//查看所有原始裁切图模块
var slice_view = function (option, success) {
    var object = new SliceView(option);
    success();
    return object;
}

function SliceView(option) {
    this.markControl = option.markControl;
    this.server = option.server;
    this.init();

    this.markControl.on('task.get.success', this, function (event, context, eventObject) {
        this.render(context.task.pictureUrls);
    });
    this.markControl.on('task.get.none', this, function (event, context, eventObject) {
        this.render();
    });
    this.markControl.on('task.get.before', this, function (event, context, eventObject) {
        this.render();
    });
    this.markControl.on('view.sidebar.open', this, function (event, context, eventObject) {
        if (context.task != undefined) {
            this.render(context.task.pictureUrls);
        }
    });
    this.markControl.on('view.sidebar.close', this, function (event, context, eventObject) {
        if (context.task != undefined) {
            this.render(context.task.pictureUrls);
        }
    });
}

SliceView.prototype.init = function () {
    var self = this;
    this.markControl.initMarkFunction();
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container);
    this.container.width(this.maxWidth);

    this.container.header = getDom(this.container_header_dom, this.markControl).appendTo(this.container);
    this.container.header.width('100%');

    this.container.content = getDom(this.container_content_dom, this.markControl).appendTo(this.container);
    this.container.content.width('100%');

    this.container.header.find('.image-close').click(function () {
        self.toggle(false);
    });

    this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
    this.control.find('#show-slice-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(true);
    });
    this.control.find('#hide-slice-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(false);
    });
    self.toggle(false);
}

SliceView.prototype.render = function (urls) {
    var self = this;
    self.container.header.find('.image-switch').empty();
    self.container.content.empty();
    if (urls != undefined && urls.length > 0) {
        for (var i = 0; i < urls.length; i++) {
            var url = urls[i];
            var id = "slice" + i;
            var nav = $('<a href="#" data-url="' + url + '" id="' + id + '"><span>' + (i + 1) + '</span></a>').appendTo(this.container.header.find('.image-switch'));
        }
        this.container.header.find('.image-switch a').click(function () {
            var url = this.getAttribute("data-url");
            var id = this.getAttribute("id");
            self.renderContent(self.container.content, id);
        });
        this.container.header.find('.image-switch a').first().click();

    } else {
        this.container.hide();
    }
}

SliceView.prototype.renderContent = function (content, id) {
    content.width(this.markControl.container.centerContent.width());
    content.height(this.markControl.container.centerContent.height());
    content.empty();
    var url = document.getElementById(id).getAttribute("data-url");
    content.append($('<canvas id="slice-canvas"></canvas>'));
    var image = new Image();
    image.crossOrigin = '';
    image.src = this.server + url;
    image.canvas = document.getElementById('slice-canvas');
    image.content = content;
    image.onload = function () {
        var ctx = image.canvas.getContext("2d");
        image.canvas.width = Math.min(image.width, image.content.width());
        var scale = image.canvas.width / image.width;
        image.canvas.height = image.height * scale;
        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.canvas.width, image.canvas.height);
        //this.canvas.toDataURL("image/jpeg");
    }
}

SliceView.prototype.toggle = function (show) {
    if (show == true) {
        this.show = true;
        this.container.show();
    } else {
        this.show = false;
        this.container.hide();
    }
}

SliceView.prototype.control_dom = '<h3 class="popover-title" data-i18n-text="mark.slice">全卷</h3>\
<div class="popover-content"><p id="slice-list" class="popover-list">\
<a href="#" id="show-slice-button" data-i18n-text="mark.slice.open">打开</a><a href="#" id="hide-slice-button" data-i18n-text="mark.slice.close">关闭</a>\
</p></div>';

SliceView.prototype.container_dom = '<div class="image-view-popover sheet" style=" width:100%; height:100vh;"></div>';

SliceView.prototype.container_header_dom = '<div class="popover-header">\
    <p class="title" data-i18n-text="mark.slice.check">全卷切换</p>\
    <p class="image-switch"></p>\
    <p class="image-close"><img src="{staticServer}/mark-new/images/images-close-b.png" /></p></div>';

SliceView.prototype.container_content_dom = '<div class="popover-cont"></div>';