//简单多张图片排列显示模块
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);
        }
    });
    this.markControl.on('mark.setting.init', this, function (event, context, setting) {
        var scale = setting['image.view.scale'];
        if (scale != undefined) {
            this.scale = Number(scale);
        }
    });
}

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.ctx.fillStyle = "#FFFFFF";
    this.scale = 1.0;

    $(this.canvas).click(function (event) {
        if (self.task != undefined) {
            let left = event.pageX - $(self.canvas).offset().left
            let top = event.pageY - $(self.canvas).offset().top
            let offsetX = left
            let offsetY = top
            let offsetIndex = 1
            for (let i = 0; i < self.task.imageLayout.length; i++) {
                let layout = self.task.imageLayout[i]
                if (top > layout.top && top <= layout.bottom) {
                    offsetIndex = layout.config.i
                    offsetX = left / layout.ratio + layout.config.x
                    offsetY = (top - layout.top) / layout.ratio + layout.config.y
                    break
                }
            }
            self.markControl.trigger('image.click.event', {
                positionX: (left / $(self.canvas).width()).toFixed(3),
                positionY: (top / $(self.canvas).height()).toFixed(3),
                offsetIndex: offsetIndex,
                offsetX: offsetX,
                offsetY: offsetY
            });
        }
    });

    this.imageControl = getDom(this.image_control_dom, this.markControl).insertBefore(this.markControl.container.assistantButton.parent());
    this.imageControl.find('.zoom-in-button').click(this, function (event) {
        self.reloadImage(0.2);
        self.markControl.trigger('image.reload.event');
    });
    this.imageControl.find('.zoom-out-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('fit');
        self.markControl.trigger('image.reload.event');
    });
}

SingleImageView.prototype.render = function () {
    $(this.canvas).hide();
    if (this.task != undefined && this.task.imageData != undefined) {
        //设置画布大小及背景颜色
        this.image = this.task.imageData;
        this.reloadImage();
        $(this.canvas).show();
        this.markControl.trigger('task.load.finish');
    }
}

SingleImageView.prototype.reloadImage = function (scaleAddon) {
    if (this.image != undefined) {
        var scale = this.scale;
        if (scaleAddon != undefined) {
            if (scaleAddon == 'fit') {
                scale = 1.0;
            } else {
                scale += scaleAddon;
            }
        }
        if (scale < 0.2) {
            scale = 0.2;
        } else if (scale > 3) {
            scale = 3;
        }
        if (scale != this.scale) {
            this.markControl.trigger('mark.setting.change', {
                'image.view.scale': scale
            });
            this.scale = scale;
        }

        this.canvas.width = Math.min(this.container.width(), this.image.width) * this.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(30 * this.scale) + "px 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);
    }
}

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