/* Author: yangzeming
 * Date: 2014-02-10
 * Desc: 滚动组件
 */
define('component/accodion',function (require, exports, module) {

    var Accodion = _.Class({
		defaultOptions: {//一些默认的属性值
	        effect: "slide",
	        activeClass: "tbui_slideshow_active",
	        interval: 5000,//自动滚动时间隔时间
	        slide: {
	            speed: 500
	        },
	        fade: {
	            speed: 1000
	        },
			hoverStop : true,
			activeCallback : function(){},
			showCallback : function(){}
	    },
	    initial: function (options) {//初始化
			this._eventStack = {};
	        options = $.extend({}, this.defaultOptions, options);
	        var self = this;
	        this.options = options;
	        this.animating = false;
	        this.current = 0;
	        this.vendorPrefix = false;//this._getVendorPrefix();
	        this.$nav = $(options.nav);//导航
	        this.$navItem = this.$nav.children();
	        this.activeCallback = options.activeCallback;
	
	        this.$container = $(options.target);//滚动内容的容器
	        this.$list = this.$container.children(".tbui_slideshow_list");
	        this.$tokens = this.$list.children();
			this.total = this.$navItem.size();//滚动内容的条数
	        if (!options.width) {//如果传入参数width,则width就为滚动内容容器的width
	            options.width = this.$container.width();
	        }
	        if (!options.height) {
	            options.height = this.$container.height();
	        }
	        this.$container.add(this.$list).css({
	            width: options.width,
	            height: options.height
	        });
	
	        this.interval = options.interval || 5000;
	        this.$navItem.first().addClass(options.activeClass);//第一条内容对应的导航键选中
	        this.$tokens.first().show();//显示内容的第一条
	
	        this.$navItem.hover(function () {//当鼠标悬浮在导航键上时执行
	                var link = this;
	                if (options.auto) {//如果为自动滚动，则鼠标悬浮时内容停止自动滚动
	                    self.stop();
	                }
	              //  this.delayHandler = setTimeout(function () {
	                    self.delayHandler = null;
	                    self.setActive($(link).index());
	                //}, 200);
	            },
	            function () {//鼠标离开时执行
	                if (options.auto) {//如果为自动滚动，则鼠标离开时内容开始自动滚动
	                    self.play();
	                }
	                if (this.delayHandler) {
	                    clearTimeout(this.delayHandler);
	                }
	            });
	
	        this.effectHandler = this["_" + options.effect];
	
	        if (options.auto) {//options.auto为true
	            this.play();//自动滚动
				if(options.hoverStop){//options.hoverStop为true
					this.$list.hover(//鼠标悬浮在内容上时
						function () {
							self.stop();//自动滚动停止
						},
						function () {
							self.play();//鼠标离开时开始自动滚动
						}
					);
				}
	        }
	
	        if (options.next) {//如果传入的参数next不为空
	            $(options.next).click(function (e) {
	                e.preventDefault();
	                e.stopPropagation();
	                self.next();//滚动到下一页
	            });
	        }
	        if (options.prev) {//如果传入的参数prev不为空
	            $(options.prev).click(function (e) {
	                e.preventDefault();
	                e.stopPropagation();
	                self.prev();//滚动到上一页
	            })
	        }
	    },
	
	    /**
	     * set active slide
	     * @param {Number} index
	     */
	    setActive: function (index) {//给导航键加选中的样式
	        if ( !this.animating &&index !== this.current) {//!this.animating &&
	            this.$navItem.removeClass(this.options.activeClass).eq(index).addClass(this.options.activeClass);
	            this.effectHandler(index);//滚动
				this.activeCallback(index);
	        }
	    },
	
	    next: function () {//下一页
	        var next = this.current + 1;
	        if (next == this.total) {
	            next = 0;
	        }
	        this.setActive(next);
	    },
	
	    prev: function () {//上一页
	        var prev = this.current - 1;
	        if (prev == -1) {
	            prev = this.total - 1;
	        }
	        this.setActive(prev);
	    },
	
	    play: function () {//滚动
	        var self = this;
	        if (this.autoHandler == null) {
	            this.autoHandler = setInterval(function () {
	                self.next();
	            }, this.options.interval);
	        }
	    },
	
	    stop: function () {//停止滚动
	        clearInterval(this.autoHandler);
	        this.autoHandler = null;
	    },
	
	    _slide: function (index) {
	        var currentSlide, direction, duration, next, prefix, transform, value;
	        var self = this;
	
	        this.animating = true;
	        currentSlide = this.current;
	
	        value = index > currentSlide ? 1 : -1;
	        direction = index > currentSlide ? -this.options.width : this.options.width;
	        next = index;
	        this.$tokens.eq(currentSlide).siblings().css({
	            display: "none",
	            left: 0,
	            zIndex: 0
	        });
	        this.$tokens.eq(next).css({
	            display: "block",
	            left: value * this.options.width,
	            zIndex: 10
	        });
			
	        if (this.vendorPrefix) {
	            prefix = this.vendorPrefix;
	            transform = prefix + "Transform";
	            duration = prefix + "TransitionDuration";
	            this.$list[0].style[transform] = "translateX(" + direction + "px)";
	            this.$list[0].style[duration] = this.options.slide.speed + "ms";
	            this.$list.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
	                self.$list[0].style[transform] = "";
	                self.$list[0].style[duration] = "";
	                self.$tokens.eq(next).css({
	                    left: 0
	                });
	                self.$tokens.eq(currentSlide).css({
	                    display: "none",
	                    left: 0,
	                    zIndex: 0
	                });
	                self.animating = false;
	                self.current = next;
	                self.$list.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
	            });
	        } else {
	            self.$list.stop().animate(
	                {
	                    left: direction
	                },
	                this.options.slide.speed,
	                function () {
	                    self.$list.css({
	                        left: 0
	                    });
	                    self.$tokens.eq(next).css({
	                        left: 0
	                    });
	                    self.$tokens.eq(currentSlide).css({
	                        display: "none",
	                        left: 0,
	                        zIndex: 0
	                    });
	
	                    self.current = next;
	                    self.animating = false;
	                }
	            );
	        }
	    },
	
	    _fade: function (number) {
	        var self = this;
	        var currentSlide, next;
	        this.animating = true;
	        currentSlide = this.current;
	        next = number;
	
	        this.$tokens.eq(next).css({
	            display: "none",
	            left: 0,
	            zIndex: 10
	        });
	
	        this.$tokens.eq(currentSlide).stop().fadeOut(this.options.fade.speed);
	        this.$tokens.eq(next).stop().fadeIn(this.options.fade.speed, (function () {
	            self.$tokens.eq(next).css({
	                zIndex: 0
	            });
				self.options.showCallback(self.$tokens.eq(next));
	            self.animating = false;
	            self.current = next;
	        }));
	    },
	
	    _getVendorPrefix: function () {
	        var body, i, style, transition, vendor;
	        body = document.body || document.documentElement;
	        style = body.style;
	        transition = "Transition";
	        vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
	        i = 0;
	        while (i < vendor.length) {
	            if (typeof style[vendor[i] + transition] === "string") {
	                return vendor[i];
	            }
	            i++;
	        }
	        return false;
	    }
    });
    module.exports = Accodion;
});