//简单多张图片排列显示模块
var multi_image_view = function(option, success) {
    var object = new MultiImageView(option);
    success();
    return object;
}

function MultiImageView(option) {
    this.markControl = option.markControl;
    this.defaultZoom = 'fit';
    this.init();
    this.markControl.on('task.get.before', this, function(event, context, eventObject) {
        this.task = undefined;
        this.imageCount = 0;
        this.render();
    });
    this.markControl.on('task.get.success', this, function(event, context, eventObject) {
        this.task = context.task;
        this.imageCount = this.task.pictureUrls.length;
        this.imageServer = context.imageServer;
        this.render();
    });
    this.markControl.on('step.board.show', this, function(event, context, eventObject) {
        this.container.removeClass('span12');
        this.container.addClass('span10');

        this.container.perfectScrollbar('update');
        if (this.iviewer != undefined) {
            this.iviewer.iviewer('update');
        }
    });
    this.markControl.on('step.board.hide', this, function(event, context, eventObject) {
        this.container.removeClass('span10');
        this.container.addClass('span12');

        this.container.perfectScrollbar('update');
        if (this.iviewer != undefined) {
            this.iviewer.iviewer('update');
        }
    });
    this.markControl.on('center.width.change', this, function(event, context, eventObject) {
        this.container.perfectScrollbar('update');
        if (this.iviewer != undefined) {
            this.iviewer.iviewer('update');
        }
    });
    this.markControl.on('key.press', this, function(e, context, event) {
        var code = event.keyCode;
        if (this.iviewer != undefined && this.currentConfig != undefined && this.imageCount > 0) {
            if (code == 91) {
                // [按键，切换上一张图片
                var number = this.currentConfig.number;
                if (number > 1) {
                    this.change(number - 1);
                    event.preventDefault();
                    return false;
                }
            } else if (code == 93) {
                // ]按键，切换下一张图片
                var number = this.currentConfig.number;
                if (number < this.imageCount) {
                    this.change(number + 1);
                    event.preventDefault();
                    return false;
                }
            }
        }
    });
    this.markControl.on('key.up', this, function(e, context, event) {
        var code = event.keyCode;
        if (this.iviewer != undefined && this.currentConfig != undefined && this.imageCount > 0) {
            if (code == 37) {
                // left按键，切换上一张图片
                var number = this.currentConfig.number;
                if (number > 1) {
                    this.change(number - 1);
                    event.preventDefault();
                    return false;
                }
            } else if (code == 39) {
                // right按键，切换下一张图片
                var number = this.currentConfig.number;
                if (number < this.imageCount) {
                    this.change(number + 1);
                    event.preventDefault();
                    return false;
                }
            }
        }

    });
}

MultiImageView.prototype.init = function() {
    this.configCache = {};
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container.center);
    this.container.perfectScrollbar({
        wheelSpeed: 20
    });
    this.container.width('100%');
    this.container.height(this.markControl.container.height() - 41);

    this.imageHolder = getDom(this.imageHolder_dom, this.markControl).appendTo(this.container);
    this.imageHolder.width('100%');

    this.centerHeader = getDom(this.center_header_dom, this.markControl).appendTo(this.markControl.container.header.find('p.pictures')).parent();
    this.centerHeader.hide();
    this.imageControl = getDom(this.image_control_dom, this.markControl).appendTo(this.markControl.container);
    this.imageControl.css('position', 'absolute');
    this.imageSwitchList = this.imageControl.find('#image-switch-list');

    this.centerHeader.click(this, function(event) {
        var obj = event.data.centerHeader;
        var position = obj.offset();
        var left = position.left;
        var top = position.top + obj.height();
        event.data.imageControl.css('top', top);
        event.data.imageControl.css('left', left);
        event.data.imageControl.toggle();
    });
    this.imageControl.find('a.image-popover-close').click(this, function(event) {
        event.data.imageControl.hide();
    });
    this.imageControl.find('#zoom-out-button').click(this, function(event) {
        var iviewer = event.data.iviewer;
        if (iviewer != undefined) {
            iviewer.iviewer('zoom_by', 1);
        }
    });
    this.imageControl.find('#zoom-in-button').click(this, function(event) {
        var iviewer = event.data.iviewer;
        if (iviewer != undefined) {
            iviewer.iviewer('zoom_by', -1);
        }
    });
    this.imageControl.find('#zoom-fit-button').click(this, function(event) {
        var iviewer = event.data.iviewer;
        if (iviewer != undefined) {
            iviewer.iviewer('fit');
        }
    });
    this.imageControl.find('#zoom-origin-button').click(this, function(event) {
        var iviewer = event.data.iviewer;
        if (iviewer != undefined) {
            iviewer.iviewer('set_zoom', 100);
        }
    });
}

MultiImageView.prototype.render = function() {
    if (this.task != undefined) {
        var config = this.configCache[this.task.blockId];
        if (config == undefined) {
            config = {
                number: 1,
                zoom: this.defaultZoom
            };
            this.configCache[this.task.blockId] = config;
        }
        if (config.number == undefined || config.number < 0 || config.number > this.imageCount) {
            config.number = 1;
        }
        this.currentConfig = config;

        for (var i = 1; i <= this.imageCount; i++) {
            var switchButton = getDom(this.image_switch_button_dom, this.markControl).appendTo(this.imageSwitchList);
            switchButton.html(i);
            switchButton.attr('data-number', i);
            if (i == config.number) {
                switchButton.addClass('curr');
            }
        }
        this.imageSwitchList.find('.image-switch-button').click(this, function(event) {
            var number = $(event.target).attr('data-number');
            event.data.change(number, config.zoom, config);
            event.data.imageControl.hide();
        });

        if (this.iviewer == undefined) {
            var MultiImageView = this;
            this.iviewer = this.imageHolder.iviewer({
                src: this.imageServer + this.task.pictureUrls[config.number - 1],
                zoom: config.zoom,
                ui_disabled: true,
                mousewheel: false,
                zoom_animation: false,
                onZoom: function(ev, new_zoom) {
                    MultiImageView.onZoomSet(new_zoom);
                },
                onStopDrag: function(ev, point) {
                    MultiImageView.onStopDrag(point);
                },
                onFinishLoad: function(ev, url) {
                    MultiImageView.onImageLoad();
                }
            });
            this.centerHeader.find('#image-number').html(config.number);
        } else {
            this.change(config.number, config.zoom, config);
        }
        this.imageHolder.show();
        this.centerHeader.show();

        this.imageHolder.trigger('mouseenter');
    } else {
        this.centerHeader.hide();
        this.imageHolder.hide();
        this.currentConfig = undefined;
        this.imageSwitchList.empty();
    }
}

MultiImageView.prototype.change = function(number) {
    if (this.task != undefined && number > 0 && number <= this.imageCount && this.currentConfig != undefined && this.currentConfig.loading == false) {
        this.currentConfig.loading = true;
        this.currentConfig.number = number;

        this.iviewer.iviewer('loadImage', this.imageServer + this.task.pictureUrls[number - 1]);
        this.centerHeader.find('#image-number').html(number);
        this.imageSwitchList.find('.image-switch-button').each(function(index, obj) {
            if ($(obj).attr('data-number') == number) {
                $(obj).addClass('curr');
            } else {
                $(obj).removeClass('curr');
            }
        });
    }
}

MultiImageView.prototype.onImageLoad = function() {
    this.currentConfig.loading = false;
    this.imageHolder.find('img').css('top', '0');
    this.iviewer.iviewer('set_zoom', this.currentConfig.zoom);
    if (this.currentConfig.dx != undefined && this.currentConfig.dy != undefined) {
        this.iviewer.iviewer('moveTo', point.dx, point.dy);
    }
}

MultiImageView.prototype.onZoomSet = function(zoom) {
    if (this.currentConfig.loading == false) {
        this.currentConfig.zoom = zoom;
    }
}

MultiImageView.prototype.onStopDrag = function(point) {
    if (this.currentConfig.loading == false) {
        this.currentConfig.dx = point.x;
        this.currentConfig.dy = point.y;
    }
}

MultiImageView.prototype.container_dom = '<div class="content"></div>';

MultiImageView.prototype.imageHolder_dom = '<div style="position:relative"></div>';

MultiImageView.prototype.center_header_dom = '<i class="L-pic">当前图片</i><i id="image-number" class="R-pic"></i>';

MultiImageView.prototype.image_control_dom = '<div class="image-popover hide">\
<div class="image-control">\
<span class="control-row"><p class="title">图片切换</p><p class="content" id="image-switch-list"></p></span>\
<span class="control-row"><p class="title">图片控制</p>\
<p class="content">\
<a href="#" id="zoom-out-button">放大</a><a href="#" id="zoom-in-button">缩小</a>\
<a href="#" id="zoom-fit-button">1:1</a><a href="#" id="zoom-origin-button">原始</a>\
</p></span></div>\
<a href="#" class="image-popover-close"><p>关</p><p>闭</p></a></div>';

MultiImageView.prototype.image_switch_button_dom = '<a href="#" class="image-switch-button"></a>';