//*** 	AC-Tabs 
//*		Author: 		M. Dempster 
//*		Last modified:  5/28/2009
//* 	Dependency:  	Mootools 1.2.x core with Selectors and Events
//*		Parameters      ---------------------------------------------------------  	
//* 		container: 		ID reference to the overall tab set container.  Defaults to AC-Tabs.
//*			tabs: 			Selector reference to the individual Tab containers.  No default...this must be specified in the function call.
//*			startIndex: 	Selects the tab to start visible.  If random is set to true, this value is ignored.  Defaults as 0 (first tab)
//*			onShow: 		Prepares an event to be triggered when the tab is shown.  Defaults to empty function.
//*			random: 		Start on a randomly selected tab.  Defaults false.
//*			addCorners: 	Add corner divs and classes (corner tl, corner tr) to tabs.  Defaults false.
//*			forceHeight: 	Force all tab height to match the height of the longest tab content. Defaults false.



var Tabs = new Class({
	Implements: [Events, Options],
	options: {
			container: 'AC-Tabs',
			tabs: [],
			startIndex: 0, //id of default on tab will make it focus on load
			onShow: Class.empty,
			random: false,
			addCorners: false,
			forceHeight: false
	},
	initialize: function(options){
			this.setOptions(options)
			this.tabs = [];
			this.effects = [];
			this.maxHeight = 0;
			if(this.options.tabs.length > 0) {
				$(this.options.container).setProperty('class','on');
				tabContainer = new Element('ul', { 'class': 'AC-TabCtrl'} ).injectTop(this.options.container);
				this.addTabs(this.options.tabs);
				if (this.options.forceHeight) {
					this.setTabHeight(this.options.tabs);
				}
				if(this.options.random) {
				    if(this.tabs.length) this.showTab($random(0, this.options.tabs.length - 1));    
			    }else{
			        if(this.tabs.length) this.showTab(this.options.startIndex);
			    }
			} else {
				$(this.options.container).setProperty('class','off');	
			}
	},
	addTabs: function(tabs){
			$$(tabs).each(function(tab){
					this.tabs.include($(tab));
					if (this.options.forceHeight) {
						if (tab.getStyle('height').toInt() > this.maxHeight) { this.maxHeight = tab.getStyle('height').toInt(); } 
					}
					tab.setStyles({
							display:'none',
							visibility: 'hidden'
					});
					if(tab.getProperty('id')=='default') this.options.startIndex = this.tabs.indexOf(tab);
					
					
					this.effects[this.tabs.indexOf(tab)] = new Fx.Morph(tab, {duration:150, transition:Fx.Transitions.Sine.easeInOut});
					tabText = tab.getFirst().get('text');										
					tabItem = new Element('li').inject(tabContainer).set('html',tabText).set('id', 'tab' + this.tabs.indexOf(tab));

					if (this.options.addCorners) {
						var topLeft = new Element('span').injectTop(tabItem).addClass("corner tl");
						var topRight = new Element('span').injectTop(tabItem).addClass("corner tr");
						if(window.ie6 && tabItem.getSize().scrollSize.x % 2){
							topRight.setStyle('right', -2);
						}
					}
					
					var idx = this.tabs.indexOf(tab);
					
					tabItem.addEvents({
						'mouseover': function(){
							if (!this.hasClass('active')) {this.addClass('hover');} 
						},
						'mouseout':  function(){ 
							if (!this.hasClass('active')) {this.removeClass('hover');} 
						},
						'click': function() {
							this.jumpForward(idx)
						}.bind(this)
					});
					
					
			}, this);
			
	},
	addTab: function(tab){
		this.addTabs([tab]);
	},
	setTabHeight: function(tabs) {
		$$(tabs).each(function(tab){
			tab.setStyle('height', this.maxHeight + 'px');
		}, this);				   
	},
	jumpForward: function (index) {
		if($chk(this.now)) this.showTab(index);
		else if(!$defined(this.now)) this.showTab(this.options.startIndex);
	},
   
	showTab: function(iToShow){
			var now = this.now;          
			var currentTab = this.tabs[now];
			var tab = this.tabs[iToShow];
			tabContainer.getChildren()[iToShow].addClass('active');
			tabContainer.getChildren()[iToShow].removeClass('hover');
			function fadeIn(s){
					s.setStyles({
							display:'block',
							visibility: 'visible',
							opacity: 0
					});
					this.effects[this.tabs.indexOf(s)].start({ 'opacity': 1 });
					this.fireEvent('onShow', [tab, iToShow]);
			};
			if(tab) {
					if($chk(now) && now != iToShow){
							this.effects[now].start({ 'opacity': 0 }).chain(function(){
									tabContainer.getChildren()[now].removeClass('active');
									tabContainer.getChildren()[now].removeClass('hover');
									this.tabs[now].setStyle('display', 'none');
									fadeIn.apply(this, [tab]);
							}.bind(this));
					} else fadeIn.apply(this, [tab]);
					this.now = iToShow;
			}
	}
});



window.ACaddEvent('domready', function(){	
	if($$('#AC-Tabs .AC-Block').length > 0){ 
		new Tabs({ tabs: $$('#AC-Tabs .AC-Block')}); 
	};
});
