//简单多张图片排列显示模块
var single_image_view = function(option, success) {
    var object = new SingleImageView(option);
    success();
    return object;
}

function SingleImageView(option) {
    this.markControl = option.markControl;
    this.init();
    this.markControl.on('center.width.change', this, function(event, context, eventObject) {
        this.reloadImage();
        this.markControl.trigger('image.reload.event');
    });
    this.markControl.on('step.board.show', this, function(event, context, eventObject) {
        this.container.removeClass('span12');
        this.container.addClass('span10');
        this.reloadImage();
        this.markControl.trigger('image.reload.event');
    });
    this.markControl.on('step.board.hide', this, function(event, context, eventObject) {
        this.container.removeClass('span10');
        this.container.addClass('span12');
        this.reloadImage();
        this.markControl.trigger('image.reload.event');
    });
    this.markControl.on('task.get.before', this, function(event, context, eventObject) {
        this.task = undefined;
        this.image = undefined;
        this.render();
    });
    this.markControl.on('task.get.success', this, function(event, context, eventObject) {
        this.task = context.task;
        this.image = undefined;
        this.render();
    });
    this.markControl.on('task.get.none', this, function(event, context, eventObject) {
        this.task = undefined;
        this.image = undefined;
        this.render();
    });
    this.markControl.on('mark.tag.show', this, function(event, context, tag){
        if(this.task != undefined && tag != undefined){
        	this.drawTag(tag);
        }
    });
    this.markControl.on('mark.tag.clear', this, function(event, context, track){
        this.reloadImage();
        this.markControl.trigger('image.reload.event');
    });
    this.markControl.on('image.position.change', this, function(event, context, topPercent) {
        if (this.task != undefined) {
            this.updateScrollTop(topPercent);
        }
    });
}

SingleImageView.prototype.init = function() {
    var self = this;
    this.container = this.markControl.container.imageContent;
    this.container.height(this.markControl.container.centerContent.height());
    this.container.css('overflow','scroll');
    
    this.canvas = $('<canvas></canvas>').appendTo(this.container)[0];
    this.ctx = this.canvas.getContext("2d");
    
    $(this.canvas).click(function(event){
        if(self.task != undefined){
        	self.markControl.trigger('image.click.event', {
        		positionX: ((event.pageX - $(self.canvas).offset().left)/$(self.canvas).width()).toFixed(3),
                positionY: ((event.pageY - $(self.canvas).offset().top)/$(self.canvas).height()).toFixed(3)
        	});
        }
    });
}

SingleImageView.prototype.render = function() {
    var self = this;
    $(this.canvas).hide();
    if (this.task != undefined && this.task.imageData != undefined) {
        //设置画布大小及背景颜色
        this.image = new Image();
        this.image.src = this.task.imageData;
        this.image.onload = function(){
            self.canvas.width = Math.min(self.container.width(), self.image.width);
            self.canvas.height = self.canvas.width * self.image.height / self.image.width;
            self.ctx.fillStyle = "#FFFFFF";
            self.ctx.drawImage(self.image, 0, 0, self.image.width, self.image.height, 0, 0, self.canvas.width, self.canvas.height);
            $(self.canvas).show();
            
            self.markControl.trigger('task.load.finish');
        }
    }
}

SingleImageView.prototype.reloadImage = function() {
    if(this.image != undefined){
    	this.canvas.width = Math.min(this.container.width(), this.image.width);
        this.canvas.height = this.canvas.width * this.image.height / this.image.width;
        this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.canvas.width, this.canvas.height);
    }
}

SingleImageView.prototype.drawTag = function(tag){
    if(tag!=undefined && tag.positionX>0 && tag.positionY>0){
        this.ctx.font ="60px Arial";
        this.ctx.fillStyle = 'red';
        this.ctx.fillText(tag.content, tag.positionX*this.canvas.width, tag.positionY*this.canvas.height);
    }
}

SingleImageView.prototype.updateScrollTop = function(scrollTopPercent) {
    var height = this.canvas.height;
    var minHeight = this.container.height();
    if (scrollTopPercent != undefined && scrollTopPercent >= 0 && scrollTopPercent <= 1 && height > minHeight) {
        var left = height * (1 - scrollTopPercent);
        var scrollTop = left > minHeight ? (height - left) : (height - minHeight);
        this.container.scrollTop(scrollTop);
    } else {
        this.container.scrollTop(0);
    }
}