// Show a line of tabs (li tags) and when they are clicked, a div tag is shown
var multiTabs = {
	init: function(){
		// how long should effect last? 1000 per second
		this.fxDur = 1000;
		// the window anchor on page load
		this.windowHash = new Array();
		wH = location.hash.substr(1).split(":");
		wH.each(function(w){
			t = w.split("=");
			this.windowHash[t[0]]=t[1];
		},multiTabs);		
		// name of the parent containers
		this.container = $$('div.showTabs');
		// loop through containers
		this.container.each(function(cont,i){
			// effect for resizing container
			cont.inEffect = new Fx.Morph(cont, {duration: this.fxDur, transition: Fx.Transitions.Sine.easeInOut});
			// get the UL
			cont.tabs = cont.getFirst('ul');
			cont.tabs.height = cont.tabs.getSize().y;
			cont.active = -1;
			cont.titles = new Array();
			cont.tabs.lis = cont.tabs.getElements('li');
			cont.tabs.lis.each(function(li,j){
				li.tab = li.getProperty('tab');
				li.dims = $(li.tab).getSize();
				$(li.tab).setStyles({'display':'none','visibility':'visible'});
				if(li.get('html')==this.windowHash[i]){
					this.showNow(i,j);
				}
				$(li.tab).outEffect = new Fx.Morph($(li.tab), {duration: (this.fxDur/2), transition: Fx.Transitions.Sine.easeIn});
				$(li.tab).inEffect = new Fx.Morph($(li.tab), {duration: this.fxDur, transition: Fx.Transitions.Sine.easeInOut});
				li.onclick = this.showTab.pass([i,j],multiTabs);
				li.addEvent('mouseover', function(){this.addClass('over');});
				li.addEvent('mouseout', function(){this.removeClass('over');});
				cont.titles.push(li.get('text').trim());
			},multiTabs);
			// if no active tab, show the first one (0)
			if(cont.active<0){
				this.showNow(i,0);
			};
		
		},multiTabs);
		
		/*


		
		// get all the links on the page so we can search for anchors
		this.links = $('box').getElements('a');
		this.links.combine($('box').getElements('area'));
		this.links.each(function(a){
			myIDX = a.href.indexOf('#');
			// if this link has an anchor....
			if(myIDX>0){
				mySUBSTR = decodeURIComponent(a.href.substring(myIDX+1));
				// if the link anchor matches one of the tab titles...
				if(this.titles.contains(mySUBSTR)){
					// set it so that clicking on that link shows a tab
					a.onclick=this.showTab.pass(this.titles.indexOf(mySUBSTR),multiTabs);
				}
			}
		},multiTabs);
		*/
	},
	
	showTab: function(cont,li){
		// only do this if we're not already the active tab
		if(li != this.container[cont].active){
			// turn off the currently active tab
			this.deactivateTab(cont,this.container[cont].active);
			// set the active tab style
			this.container[cont].tabs.lis[li].addClass('active');
			// turn on the new tab, after waiting for the old one to hide
			this.activateTab.delay(this.fxDur, multiTabs, [cont,li]);
		}
		return false;
	},
	
	activateTab: function(cont,li){
		// set a bunch of styles, some opacity & visibility are just for saftey
		$(this.container[cont].tabs.lis[li].tab).setStyles({'display':'block','height':'0px','opacity':1,'visibility':'visible'});
		// start the effects
		//this.container[cont].inEffect.start({'height':this.container[cont].tabs.height + this.container[cont].tabs.lis[li].dims.y});
		this.container[cont].inEffect.start({'height':400});
		//$(this.container[cont].tabs.lis[li].tab).inEffect.start({'height':this.container[cont].tabs.lis[li].dims.y});
		$(this.container[cont].tabs.lis[li].tab).inEffect.start({'height':346});
		// set the active tab to this one
		this.container[cont].active = li;
	},
	
	deactivateTab: function(cont,li){
		// remove active tab style
		this.container[cont].tabs.lis[li].removeClass('active');
		// start the fade out effect
		$(this.container[cont].tabs.lis[li].tab).outEffect.start({'opacity':0});
		// wait, and then do some cleanup on the div tag
		this.hideTab.delay((this.fxDur/2),multiTabs,[cont,li]);
	},
	
	hideTab: function(cont,li){
		// hide the div tag in the way that we like it hidden
		$(this.container[cont].tabs.lis[li].tab).setStyles({'opacity':1,'display':'none','visibility':'visible'});
	},
	
	showNow: function(cont,li){
		// this shows a tab with no effects, no delay. only used on page load.
		this.container[cont].tabs.lis[li].addClass('active');
		$(this.container[cont].tabs.lis[li].tab).setStyle('display','block');
		//this.container.setStyle('height',this.container[cont].tabs.height+this.container[cont].tabs.lis[li].dims.y);
		this.container.setStyle('height',400);
		this.container[cont].active = li;
	}
};

window.addEvent('domready', function(){
	multiTabs.init();  // 
});