/**
 * 首页banner轮播
 * @author: liuyue(yue.liu@yoho.cn)
 * @date: 2015/12/04
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload');

(function() {
    var Slider = function(element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.slider.defaults, options);
        this.bigItem = this.$element.find('.slide-wrapper').find('li');
        this.smallItem = null;
        this.len = this.bigItem.size();
        this.index = 0;
        this.timer = null;
        this.init();
    };

    Slider.prototype = {
        init: function() {
            if (!this.$element) {
                return;
            }

            if (this.len <= 1) {
                lazyLoad(this.$element.find('img.lazy'));
                return;
            }
            if (this.options.pagination) {
                this.smallItem = $(this.options.pagination).find('li');
            } else {
                this._createPage();
            }

            if (this.options.orient) {
                this._createOrient();
            }
            this._slideShow();
            this._bindEvent();
            this._autoplay();
        },
        _createOrient: function() {

            var orientHtml = '<div class="slide-switch">' +
                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe64e;</span></a>' +
                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe64c;</span></a>' +
                '</div>';

            if (this.$element.find('.slide-switch').length > 0) {
                return;
            }

            this.$element.append(orientHtml);
        },
        _createPage: function() {
            var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
                            '<div class="slide-shade"></div><div class="slide-pagination-last">',
                i = 0;

            if (this.len <= 1) {
                return;
            }
            for (i = 0; i < this.len; i++) {
                pageHtml += '<span></span>';
            }
            pageHtml += '</div></div></div>';
            this.$element.append($(pageHtml));
            this.smallItem = this.$element.find('.slide-pagination-inner span');
        },
        _bindEvent: function() {
            var that = this;

            this.$element.find('.slide-switch').on('click', '.next', function() {
                that._nextSlide();
                clearInterval(that.timer);
                that.timer = setInterval(function() {
                    that._nextSlide();
                }, that.options.time);
            }).on('click', '.prev', function() {
                that._prevSlide();
                clearInterval(that.timer);
                that.timer = setInterval(function() {
                    that._nextSlide();
                }, that.options.time);
            });

            this.smallItem.on('mouseenter', function() {
                that.index = $(this).index();
                clearInterval(that.timer);
                that._slideShow();
            }).on('mouseleave', function() {
                that._autoplay();
            });

            this.$element.on('mouseenter', function() {
                $(this).find('.slide-switch').addClass('show');
            }).on('mouseleave', function() {
                $(this).find('.slide-switch').removeClass('show');
            });
        },
        _nextSlide: function() {
            if (this.index === this.len - 1) {
                this.index = 0;
            } else {
                this.index++;
            }
            this._slideShow();
        },
        _prevSlide: function() {
            if (this.index === 0) {
                this.index = this.len - 1;
            } else {
                this.index--;
            }
            this._slideShow();
        },
        _slideShow: function() {
            var $img = this.bigItem.eq(this.index).find('img.lazy');

            // 未加载图片的及时显示
            if ($img.attr('src') !== $img.data('original')) {
                lazyLoad($img, {
                    event: 'sporty'
                });
                $img.trigger('sporty');
            }

            this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
            this.bigItem.eq(this.index).show().stop().animate({
                opacity: 1
            }, function() {

                // 修正IE下切换时文字会重叠的问题
                $(this).find('.slide-tips > p').removeClass('hide');
            }).siblings().stop().animate({
                opacity: 0
            }, function() {
                $(this).hide().find('.slide-tips > p').addClass('hide');
            });
        },
        _autoplay: function() {
            var that = this;

            clearInterval(this.timer);
            this.timer = setInterval(function() {
                that._nextSlide();
            }, this.options.time);
        }
    };
    $.fn.slider = function(option) {
        return this.each(function() {
            var $this = $(this),
                data = $this.data('Slider'),
                options = typeof option === 'object' && option;

            if (!data) {
                $this.data('Slider', (data = new Slider(this, options)));
            }
            if (typeof option === 'string') {
                data[option]();
            }
        });
    };
    $.fn.slider.Constructor = Slider;
    $.fn.slider.defaults = {
        time: 5000,
        orient: true, // 左右切换箭头的显示
        pagination: null
    };
}($));