/*  
 * 图片放大轮播插件
 * author:liuyue
 * date:2015-04-23
 */
var $ = require("jquery");

;
(function(global, undefined) {

    var ImgZoom = function(element, options) {
        this.$element = $(element);
        this.options = options;
        this.$tpl = ''; //大图存放模板
        this.$overlay = ''; //黑色透明背景
        this.$zoomBox = ''; //大图最外层包裹
        this.imgHeight = 0; //大图高度
        this.imgWidth = 0; //大图宽度
        this.$btnPrev = ''; //前一张按钮
        this.$btnNext = ''; //后一张按钮
        this.currentClass = 'currentPhoto'; //当前图片的标识类

        this.init();
    };


    ImgZoom.DEFAULTS = {
        originalAttr: 'data-original', //图片原图存放属性
        styleClass: '',
        isContainer: false //杂志页需求
    };


    ImgZoom.prototype = {

        init: function() {

            this._create();

            this._bindEvent();

            if (this.options.isContainer) {
                this.$element.find('[' + this.options.originalAttr + ']').eq(0).trigger('click.imgzoom');
            }

        },

        /*  
         * 创建大图模板
         */
        _create: function() {
            if ($('.img-zoom').size() <= 0) {
                this.$tpl = $('<div class="img-zoom ' + this.options.styleClass + '" onselectstart="return false" unselecttable="on">' +
                    '<img src="" />' +
                    '<a href="javascript:;" class="close"></a>' +
                    '<a href="javascript:;" class="guide-btn prev"></a>' +
                    '<a href="javascript:;" class="guide-btn next"></a>' +
                    '</div>' +
                    '<div class="overlay"></div>');
                $('body').append(this.$tpl);
            }
            this.$overlay = $('.overlay');
            this.$zoomBox = $('.img-zoom');
            this.$btnPrev = $('.guide-btn.prev');
            this.$btnNext = $('.guide-btn.next');
        },

        /*  
         * 事件绑定
         */
        _bindEvent: function() {
            var that = this;
            //图片点击事件
            this.$element.on('click.imgzoom', '[' + this.options.originalAttr + ']', function() {
                that.$element.find("." + that.currentClass).removeClass(that.currentClass);
                $(this).addClass(that.currentClass);
                that._photoEfficiency($(this));
            });

            //点击zoom外部隐藏zoom及overlay
            this.$overlay.on('click', function() {
                that._zoomHide();
            });

            this.$btnPrev.off('click');
            this.$btnNext.off('click');

            this.$btnPrev.on('click', function() {
                that._photoSwitch(that.$element.find('[' + that.options.originalAttr + ']').index(that.$element.find("." + that.currentClass)), "left");
            });

            this.$btnNext.on("click", function() {
                that._photoSwitch(that.$element.find('[' + that.options.originalAttr + ']').index(that.$element.find("." + that.currentClass)), "right");
            });
        },

        /*  
         * 图片显示效果
         */
        _photoEfficiency: function(data) {
            var that = this,
                hiddenImg = $('<img src="' + this.$element.find("." + this.currentClass).attr(this.options.originalAttr) + '">');

            this._loadImg(hiddenImg.attr('src'), function() {
                that.$zoomBox.find('img').attr('src', hiddenImg.attr('src'));

                that.imgHeight = that.$zoomBox.find('img').outerHeight();
                that.imgWidth = that.$zoomBox.find('img').outerWidth();

                that.$zoomBox.css({
                    "marginTop": -that.imgHeight / 2
                })

            });
            //图片显示
            this._zoomShow();

            //检测首尾状态
            this._getArrowState();
        },

        /*  
         * zoom及overlay显示
         */
        _zoomShow: function() {
            this.$overlay.addClass("show");
            this.$zoomBox.addClass("show");
        },

        /*  
         * zoom及overlay隐藏
         */
        _zoomHide: function() {
            this.$overlay.removeClass("show");
            this.$zoomBox.removeClass("show");
        },

        /*  
         * 检测首尾状态
         */
        _getArrowState: function() {
            if (this.$element.find('[' + this.options.originalAttr + ']').index(this.$element.find("." + this.currentClass)) == 0) {
                this.$btnPrev.hide();
            } else {
                this.$btnPrev.show();
            }
            if (this.$element.find('[' + this.options.originalAttr + ']').index(this.$element.find("." + this.currentClass)) == this.$element.find('[' + this.options.originalAttr + ']').size() - 1) {
                this.$btnNext.hide();
            } else {
                this.$btnNext.show();
            }
        },

        /*  
         * 图片左右切换
         * @param: index为当前图片索引，direction为切换方向
         */
        _photoSwitch: function(index, direction) {
            var _index;

            this.$element.find('.' + this.currentClass).removeClass(this.currentClass);
            if (direction === 'left') {
                _index = index - 1;
            } else {
                _index = index + 1;
            }
            console.log(_index);
            this.$element.find('[' + this.options.originalAttr + ']:eq(' + _index + ')').addClass(this.currentClass);
            this._photoEfficiency();
        },

        /*  
         * 图片load
         * @param: src为要load的图片src
         */
        _loadImg: function(src, callback) {
            var img = new Image();
            if ($.browser.msie) {
                obj.onreadystatechange = function() {
                    if (this.readyState == "complete") {
                        callback.call(img); //将回调函数的this替换为Image对象
                        img = null;
                    }
                }
            } else {
                img.onload = function() { //图片下载完毕时异步调用callback函数。
                    callback.call(img); //将回调函数的this替换为Image对象
                    img = null;
                };
            }
            img.src = src;
        }
    }


    function Plugin(option, _relatedTarget) {
        return this.each(function() {
            var $this = $(this);
            var data = $this.data('yoho.imgZoom');
            var options = $.extend({}, ImgZoom.DEFAULTS, $this.data(), typeof option == 'object' && option);
            // 如果没有初始化，则初始化该对象，并且把该对象绑定到此元素的yoho.PicSilder属性下。
            if (!data) $this.data('yoho.imgZoom', (data = new ImgZoom(this, options)));

            // 如果传递的options是一个字符串，则表示调用改对象的原型方法。
            if (typeof option == 'string') data[option](_relatedTarget);
        });
    };


    $.fn.imgZoom = Plugin;
    $.fn.imgZoom.Constructor = ImgZoom;

})(this);