//简单多张图片排列显示模块
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.container.perfectScrollbar('update');
    });
    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');
    });
}

SingleImageView.prototype.init = function() {
    var self = this;
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container.centerContent);
    this.container.height(this.markControl.container.centerContent.height());
    //this.container.perfectScrollbar({
    //    wheelSpeed: 20
    //});
    this.markControl.addNavGroup('答卷', this.container);
    
    this.canvas = this.container.find('canvas')[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)
        	});
        }
    });
    
    this.imageControl = getDom(this.image_control_dom, this.markControl).insertBefore(this.markControl.container.assistantButton.parent());
    this.imageControl.find('.zoom-out-button').click(this, function(event) {
    	self.reloadImage(0.2);
        self.markControl.trigger('image.reload.event');
    });
    this.imageControl.find('.zoom-in-button').click(this, function(event) {
    	self.reloadImage(-0.2);
        self.markControl.trigger('image.reload.event');
    });
    this.imageControl.find('.zoom-fit-button').click(this, function(event) {
    	self.reloadImage();
        self.markControl.trigger('image.reload.event');
    });
}

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.scale = 1.0;
        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(scale) {
    if(this.image != undefined){
    	if(scale != undefined){
    		this.image.scale = this.image.scale + scale;
    		if(this.image.scale < 0.2){
    			this.image.scale = 0.2;
    		}else if(this.image.scale > 3){
    			this.image.scale = 3;
    		}
    	}else{
    		this.image.scale = 1.0;
    	}
    	this.canvas.width = Math.min(this.container.width(), this.image.width) * this.image.scale;
        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.image!=undefined){
        this.ctx.font = parseInt(60 * this.image.scale) + "px Arial";
        this.ctx.fillStyle = 'red';
        this.ctx.fillText(tag.content, tag.positionX*this.canvas.width, tag.positionY*this.canvas.height);
    }
}

SingleImageView.prototype.container_dom = '<div style="overflow: scroll; width: 100%"><canvas></canvas></div>';

SingleImageView.prototype.image_control_dom = '<em>\
<a href="#" class="btn zoom-out-button">放大</a>\
<a href="#" class="btn zoom-in-button">缩小</a>\
<a href="#" class="btn zoom-fit-button">适应</a>\
</em>';