// Show a line of tabs (li tags) and when they are clicked, a div tag is shown
var multiTabs = {
	init: function(){
		// name of the parent container
		this.container = $('showTabs'); 
		// how long should effect last? 1000 per second
		this.fxDur = 1000;
		this.container.inEffect = new Fx.Morph(this.container, {duration: this.fxDur, transition: Fx.Transitions.Sine.easeInOut});
		// name of tabs ul container
   		this.tabs = $('showTabsTitles');
		this.height = this.tabs.getSize().y;
		// var for storing which tab is active
		this.active = -1;
		// Arrary for storing the HTML of the tabs
		this.titles = new Array();
        this.tabs.lis = this.tabs.getElements('li');
		// the window anchor on page load
		this.windowHash = location.hash.substr(1);
        this.tabs.lis.each(function(li,i){
			// get the height of the div tag
			li.dims = $(li.title).getSize();
			// had to be display=block, visiblity=hidden to get height, but we don't like it that way.
			$(li.title).setStyles({'display':'none','visibility':'visible'});
			// if the window anchor = the html of this li, show that tab right now
			if(li.get('html')==this.windowHash){
				this.showNow(i);
			}
			// set the in & out effects
			$(li.title).outEffect = new Fx.Morph($(li.title), {duration: (this.fxDur/2), transition: Fx.Transitions.Sine.easeIn});
			$(li.title).inEffect = new Fx.Morph($(li.title), {duration: this.fxDur, transition: Fx.Transitions.Sine.easeInOut});
			// set the events. click=show, mouse over & out show/remove highlight
        	li.onclick = this.showTab.pass(i,multiTabs);
			li.addEvent('mouseover', function(){this.addClass('over');});
			li.addEvent('mouseout', function(){this.removeClass('over');});
			this.titles.push(li.get('text').trim());
		},multiTabs);
		// if no active tab, show the first one (0)
		if(this.active<0){
			this.showNow(0);
		};
		// 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(li){
		// only do this if we're not already the active tab
		if(li != this.active){
			// turn off the currently active tab
			this.deactivateTab(this.active);
			// turn on the new tab, after waiting for the old one to hide
			this.activateTab.delay(this.fxDur, multiTabs, li);
		}
		return false;
	},
	
	activateTab: function(li){
		// set the active tab style
		this.tabs.lis[li].addClass('active');
		// set a bunch of styles, some opacity & visibility are just for saftey
		$(this.tabs.lis[li].title).setStyles({'display':'block','height':'0px','opacity':1,'visibility':'visible'});
		// start the effects
		this.container.inEffect.start({'height':this.height+this.tabs.lis[li].dims.y+'px'});
		$(this.tabs.lis[li].title).inEffect.start({'height':this.tabs.lis[li].dims.y+'px'});
		// set the active tab to this one
		this.active = li;
	},
	
	deactivateTab: function(li){
		// remove active tab style
		this.tabs.lis[li].removeClass('active');
		// start the fade out effect
		$(this.tabs.lis[li].title).outEffect.start({'opacity':0});
		// wait, and then do some cleanup on the div tag
		this.hideTab.delay((this.fxDur/2),multiTabs,li);
	},
	
	hideTab: function(li){
		// hide the div tag in the way that we like it hidden
		$(this.tabs.lis[li].title).setStyles({'opacity':1,'display':'none','visibility':'visible'});
	},
	
	showNow: function(li){
		// this shows a tab with no effects, no delay. only used on page load.
		this.tabs.lis[li].addClass('active');
		$(this.tabs.lis[li].title).setStyle('display','block');
		this.container.setStyle('height',this.height+this.tabs.lis[li].dims.y+'px');
		this.active = li;
	}
};

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