var SimpleHoverTab = new Class({
	
    Implements: [Options, Events],
	
    options: {     
        delay: 500,     // 切换延迟
        defaultIndex: 0 // 初始页 
	},
	
	// tabs: tab页selector或elements，
    // contents: 内容selector或elements, 
    // options: 参数
	initialize: function(tabs, contents, options) {
        if (!tabs || tabs.length == 0 || !contents || contents.length == 0) return;
        
        this.tabs = $$(tabs);
        this.contents = $$(contents);
        this.curIndex = this.options.defaultIndex;
        this.setOptions(options); 
        
        this.hideAll();
        this.show(this.curIndex); 
    	this.attach();	
	},
	
	show: function(index) {    
        this.tabs[index].addClass('active');
        this.contents[index].setStyle('display', 'block');    
    },
    
    hide: function(index) {
        this.tabs[index].removeClass('active');
        this.contents[index].setStyle('display', 'none');      
    },
    
    hideAll: function() {
        this.tabs.removeClass('active');
        this.contents.setStyle('display', 'none');    
    },
    
    // 切换tab页
    changeTab: function(index) {
        this.hide(this.curIndex);
        this.show(index);
        this.curIndex = index;    
    },
    
    // 绑定事件
    attach: function() {
        this.tabs.each(function(tab, index) {
            tab.addEvents({
                'mouseenter': function(index) {
                    this.timer = this.changeTab.delay(this.options.delay, this, index);
                }.pass(index, this),
                'mouseleave': function() {
                    if (this.timer) {
                        clearTimeout(this.timer);
                    }
                }.bind(this)
            })
        }, this);
    }	
});




var FadeHoverTab = new Class({
    
    Extends: SimpleHoverTab,
    
    options: { 
    	delay: 0,
    	period: 5000	// 自动播放间隔时间
	},
    
	initialize: function(tabs, contents, options) { 
		this.parent(tabs, contents, options);
		this.length = this.tabs.length;
		this.startAutoPlay();
	},
	
	show: function(index) {    
        this.tabs[index].addClass('active');
        this.contents[index].setStyle('display', 'block').get('tween').start('opacity', 1);    
    },
    
    hide: function(index) {
        this.tabs[index].removeClass('active');
        this.contents[index].get('tween').start('opacity', 0).chain(function() {
			this.contents[index].setStyle('display', 'none');
		}.bind(this));      
    },
    
    hideAll: function() {
        this.tabs.removeClass('active');
        this.contents.setStyles({
			'display': 'none',
			'opacity': '0'	
		});    
    },
	
	// 绑定事件
    attach: function() {
        this.tabs.each(function(tab, index) {
            tab.addEvents({
                'mouseenter': function(index) {
                	this.stopAutoPlay();
                    this.timer = this.changeTab.delay(this.options.delay, this, index);
                }.pass(index, this),
                'mouseleave': function() {
                	this.startAutoPlay();
                    if (this.timer) {
                        clearTimeout(this.timer);
                    }
                }.bind(this)
            })
        }, this);
    },	
    
    startAutoPlay: function() {
		this.autoPlay = (function() {
			var index = this.curIndex + 1 < this.length ? this.curIndex + 1 : 0; 	
			this.changeTab(index);	
		}).periodical(this.options.period, this);		
	},
	
	stopAutoPlay: function() {
		clearInterval(this.autoPlay);	
	}

});