var $ = require("jquery");
require('./lazyloadImage');

;
(function(global, undefined) {

    var ImgSlider = function(element, options) {
        this.options = options;
        this.$wrap = $(element);
        this.$element = $(element).find("ul");
        this.$lis = this.$element.find("li");
        this.$ctrl = $(this.options.slideCtrl).appendTo(this.$wrap);
        this.$btnPrev = this.$ctrl.find('.slide-ctrl-prev'); //上一张按钮
        this.$btnNext = this.$ctrl.find('.slide-ctrl-next'); //下一张按钮
        this.len = this.$lis.length;
        this.width = this.$lis.width() + parseInt(this.$lis.css("margin-right"));
        this.index = 1;
        this.page = 1;
        this.init();
    };


    ImgSlider.DEFAULTS = {
        slideCtrl: '<div class="slide-ctrl"><a class="slide-ctrl-prev" href="javascript:;"></a><a class="slide-ctrl-next" href="javascript:;"></a></div>',
        pageNum: 4,
        itemClass: ''
    };


    ImgSlider.prototype = {
        constructor: ImgSlider,

        init: function() {

            var _this = this;
            if (this.len <= 4) return;
            this._calculationWidth(this.len, this.width);
            this.$btnPrev.hide();


            // 绑定事件
            this._bindEvent();
        },

        /*
         * next
         */
        next: function() {
            this.$btnPrev.show();
            this.index++;
            this._animate(-this.width);
        },

        /*
         * prev
         */
        prev: function() {
            this.$btnNext.show();
            this.index--;
            this._animate(this.width);
        },

        /*
         * 添加节点
         */
        _addDom: function() {
            var _this = this;
            if (!this.$element.data("url")) return;
            $.ajax({
                type: 'GET',
                url: YohoConfig.mainUrl + _this.$element.data("url") + _this.page,
                dataType: 'json',
                success: function(data) {
                    var item = '',
                        msg = data.data,
                        len = msg.length;

                    for (var i = 0; i < len; i++) {
                        item += '<li class="' + _this.options.itemClass + '"><a href="javascript:;"><img src="" data-slide="' + msg[i].pics + '" data-original="' + msg[i].cover + '" data-imgzoom="' + msg[i].dynamic + '"/><span>' + msg[i].title + '</span></a></li>'
                    }
                    $(item).appendTo(_this.$element);

                    //添加节点后重新计算宽度
                    if (_this.options.itemClass != '') {
                        _this.len = _this.$element.find("li." + _this.options.itemClass).length;
                    } else {
                        _this.len = _this.$element.find("li").length;
                    }

                    _this._calculationWidth(_this.len, _this.width);
                    _this.page++;
                }
            });

        },
        /* 
         * 插件事件绑定
         */
        _bindEvent: function() {
            var _this = this;

            this.$btnNext.on("click", function() {
                if (_this.$element.is(':animated')) return;
                _this.next();
                _this.$element.find("img").lazyload();
                if (_this.index == _this.len - _this.options.pageNum + 1) {
                    $(this).hide();
                };
                if ((Math.ceil(_this.index / _this.options.pageNum)) % 3 == 0 && (Math.ceil((_this.index - 1) / _this.options.pageNum)) % 3 != 0) {
                    _this._addDom();

                }
            });

            this.$btnPrev.on("click", function() {
                if (_this.$element.is(':animated')) return;
                _this.prev();
                if (_this.index == 1) {
                    $(this).hide();
                };

            });
        },



        /*
         * 动画
         */
        _animate: function(offset) {
            var left = parseInt(this.$element.css('left')) + offset;
            var _this = this;
            if (offset > 0) {
                offset = '+=' + offset;
            } else {
                offset = '-=' + Math.abs(offset);
            }

            this.$element.stop().animate({
                'left': offset
            }, 300);

        },

        //计算宽度
        _calculationWidth: function(len, width) {
            this.$element.width(len * width);
        },

        //resize
        resize: function() {
            this.width = this.$lis.width() + parseInt(this.$lis.css("margin-right"));
            if (this.options.itemClass != '') {
                this.len = this.$element.find("li." + this.options.itemClass).length;
            } else {
                this.len = this.$element.find("li").length;
            }
            this._calculationWidth(this.len, this.width);
            this.$element.css({
                'left': -(this.index - 1) * this.width
            });
        }
    };


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

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


    $.fn.imgSlider = Plugin;
    $.fn.imgSlider.Constructor = ImgSlider;

})($);