//简单多张图片排列显示模块
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.track.show', this, function(event, context, track){
        if(this.task != undefined && track != undefined){
        	this.drawScore(track);
        }
    });

    this.markControl.on('mark.specialTag.show', this, function(event, context, specialTag){
        if(this.task != undefined && specialTag != undefined){
        	this.drawTag(specialTag);
        }
    });
    this.markControl.on('mark.track.clear', this, function(event, context, track){
        this.reloadImage();
        //显示特殊标记的历史痕迹
        this.markControl.trigger('show.specialTag.event');
    });
    this.markControl.on('mark.specialTag.clear', this, function(event, context, track){
        this.reloadImage();
        this.markControl.trigger('show.track.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('mark.track.set', {
        		positionX: ((event.pageX - $(self.canvas).offset().left)/$(self.canvas).width()).toFixed(3),
                positionY: ((event.pageY - $(self.canvas).offset().top)/$(self.canvas).height()).toFixed(3)
        	});

        	self.markControl.trigger('mark.specialTag.set', {
        		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.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, 0, 0, this.canvas.width, this.canvas.height);
    }
}

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

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

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