//简单多张图片排列显示模块
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.ec = new EasyCanvas({
    	canvas: this.canvas,
    	onClick: function(offset){
        	self.markControl.trigger('image.click.event', offset);
    	}
    });
    
    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');
        self.ec.zoom(0.2);
    });
    this.imageControl.find('.zoom-in-button').click(this, function(event) {
    	//self.reloadImage(-0.2);
        //self.markControl.trigger('image.reload.event');
        self.ec.zoom(-0.2);
    });
    this.imageControl.find('.zoom-fit-button').click(this, function(event) {
    	//self.reloadImage();
        //self.markControl.trigger('image.reload.event');
        self.ec.zoom('default');
    });
}

SingleImageView.prototype.render = function() {
    var self = this;
    this.ec.reset();
    if (this.task != undefined && this.task.imageData != undefined) {
        //设置画布大小及背景颜色
        this.image = new Image();
        this.image.src = this.task.imageData;
        this.image.onload = function(){
        	self.ec.drawImage(self.image);
        	self.markControl.trigger('task.load.finish');
        }
    }
}

SingleImageView.prototype.reloadImage = function() {
    if(this.image != undefined){
        this.ec.drawImage(this.image);
    }
}

SingleImageView.prototype.drawTag = function(tag){
    if(tag!=undefined && tag.left>0 && tag.top>0 && this.image!=undefined){
        this.ec.drawText(tag.content, tag.left, tag.top)
    }
}

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);
    }
}

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>';