define(function(require, exports, module) {

    function Slider(config) {
        this.cfg = {
            element: '#slider1',
            trigger: '.tab li',
            panels: '.content li',
            next: '.next',
            prev: '.prev',
            triggerType: 'click',
            delay: 0,
            autoPlay: true,
            interval: 3000,
            activeTriggerClass: 'active',
            effect: 'left',
            loop: false,
            duration: 500,
            easing: 'linear',
            indexHack: false,
            changeComplete: function(){}
        };
        $.extend(this.cfg, config);
        this.renderUI();
        if (this.length == 1) return false;
        this.bindUI();
        this.syncUI();
    }

    Slider.prototype = {
        constructor: Slider,
        renderUI: function () {
            this.slider = $(this.cfg.element);
            this.width = this.slider.width();
            this.contentItems = this.slider.find(this.cfg.panels);
            this.contentBox = this.contentItems.eq(0).parent();
            this.length = this.contentItems.length;
            this.tabItems = this.slider.find(this.cfg.trigger);
            this.next = this.slider.find(this.cfg.next);
            this.prev = this.slider.find(this.cfg.prev);
            this.index = 0;
        },
        bindUI: function () {
            var that = this;
            // 动画duration
            $.fx.speeds['duration'] = this.cfg.duration;
            // 上一页
            this.slider.delegate(this.cfg.next, 'click', function () {
                that.doNext();
            });
            // 下一页
            this.slider.delegate(this.cfg.prev, 'click', function () {
                that.doPrev();
            });
            // tab switch
            if (this.cfg.triggerType === 'hover') { // hover
                this.tabItems['hover'](function () {
                    var $this = $(this),
                        timer = setTimeout(function () {
                        that.go($this.index());
                    }, that.cfg.delay);
                    $this.data('timer', timer);
                }, function () {
                    var $this = $(this);
                    clearTimeout($this.data('timer'));
                    $this.removeData('timer');
                });
            } else { // click
                this.tabItems.on(this.cfg.triggerType, function () {
                    var $this = $(this);
                    setTimeout(function () {
                        that.go($this.index());
                    }, that.cfg.delay);
                });
            }
            // 修复IE8不支持bind
            if(!('bind' in Function.prototype)) {
                Function.prototype.bind = function() {
                    var fnToBind = this;
                    var context = arguments[0];
                    var args = Array.prototype.slice.call(arguments, 1);
                    return function() {
                        fnToBind.apply(context, args);
                    }
                }
            }
            // autoPlay
            if (this.cfg.autoPlay) {
                this.autoPlay();
                this.slider.hover(function () {
                    var $this = $(this);
                    clearInterval($this.data('autoPlayTimer'));
                }, function () {
                    that.autoPlay();
                });
            }
        },
        syncUI: function () {
            this.contentBox.css({position: 'absolute'});
            if ( this.cfg.effect != 'fade' ) {
                this.contentBox.css({width: this.width * this.contentItems.length}); // 设置content的宽度
            }
            this.cfg.effect == 'left' ? this.contentItems.css('float', 'left') : null;
            if (this.cfg.effect == 'fade') {
                this.contentItems.css({position: 'absolute', zIndex: -1}).hide().eq(0).css('zIndex', 0).stop().fadeIn(0);
            }
        },
        go: function (index) {
            if ( this.contentBox.is(':animated') ) {
                return false;
            }
            var that = this;

            if (this.cfg.loop && index >= this.length && this.cfg.effect != 'fade') {
                var $contentFirstItem = this.contentItems.eq(0);
                this.contentBox.css(this.cfg.effect, -this.width * (index - 2));
                $contentFirstItem.css(this.cfg.effect, that.width * (that.length - 1)).css('position', 'absolute');
                this.contentBox.stop().animate({left: -this.width * (index - 1)}, {
                    duration: 'duration',
                    easing: this.cfg.easing,
                    complete: function () {
                        $contentFirstItem.removeAttr('style');
                        if (that.cfg.indexHack) {
                            $contentFirstItem.css({'width': that.width, 'float': 'left'});
                        } else {
                            $contentFirstItem.css({'float': 'left'});
                        }
                        that.contentBox.css(that.cfg.effect, 0);
                        that.cfg.changeComplete(that.contentItems, index);
                    }
                });
                this.index = 0
            } else if (this.cfg.loop && index < 0 && this.cfg.effect != 'fade') {
                var $contentLastItem = this.contentItems.last();
                $contentLastItem.css(this.cfg.effect, -this.width).css('position', 'absolute');
                this.contentBox.stop().animate({left: this.width}, {
                    duration: 'duration',
                    easing: this.cfg.easing,
                    complete: function () {
                        $contentLastItem.removeAttr('style');
                        if (that.cfg.indexHack) {
                            $contentLastItem.css({'width': that.width, 'float': 'left'});
                        } else {
                            $contentLastItem.css({'float': 'left'});
                        }
                        that.contentBox.css(that.cfg.effect, -that.width * (that.length - 1));
                        that.cfg.changeComplete(that.contentItems, index);
                    }
                });
                this.index = this.length - 1;
            } else {
                index =  index >= this.length ? 0 : index < 0 ? this.length - 1 : index;
                this.index = index;
                if (this.cfg.effect == 'fade') {
                    this.contentItems.filter(function () {
                        return $(this).css('display') == 'list-item';
                    }).css('zIndex', -1).stop().fadeOut('duration');
                    this.contentItems.eq(this.index).css('zIndex', 0).stop().fadeIn({
                        duration: 'duration',
                        queue: false,
                        complete: function() {
                            that.cfg.changeComplete(that.contentItems, index);
                        }
                    });

                } else {
                    this.contentBox.stop().animate({left: -this.width * this.index}, {
                        duration: 'duration',
                        easing: this.cfg.easing,
                        complete: function() {
                            that.cfg.changeComplete(that.contentItems, index);
                        }
                    });
                }
            }
            this.tabItems.removeClass(this.cfg.activeTriggerClass).eq(this.index).addClass(this.cfg.activeTriggerClass);

        },
        checkValid: function (index) {
            return  index >= this.length ? 0 : index < 0 ? this.length - 1 : index;
        },
        doNext: function () {
            this.go(this.index + 1);
        },
        doPrev: function () {
            this.go(this.index - 1);
        },
        autoPlay: function () {
            var that = this;
            this.slider.data('autoPlayTimer', setInterval(that.doNext.bind(that), this.cfg.interval));
        },
        refreshUI: function() {
            this.renderUI();
            this.syncUI();
        }
    };

    exports.Slider = Slider;
});