/**
	* initTabs - to be called on Window load
	* initialise the behaviour for switching between tabs in a pane - requires mootools http://mootools.net/
	* The functionality in this script requires some naming conventions:
		1) all tabsystem navigation divs to have class '._tabBoxTabs'
		2) all tabsystem navigation divs to have id '[tabsystem_id_no_spaces_no_dashes]-tabs'
		3) tabsystem content divs to be contained within a divs with id '[tabsystem_id_no_spaces_no_dashes]-content'
		4) tabsystem buttons are <li> elements with class='tabbutton' and containing <a href='#'>[label]</a> element
		5) script adds class 'on' or 'off' to the tabbutton <li> elements
		5) count and order of tabbuttons = count and order of tabcontent divs 
	*/
	function initTabs(){
		//use mootools to get all tabsystems on the page
		var tabsystems = $$('._tabBoxTabs');
		var tcs =[];
		var tabbuttons = [];
		
		//loop through tabsystems to initialise each one		
		for(var i=0; i<tabsystems.length; i++){
		//for(var i=0; i<$$('._tabBoxTabs').length; i++){
			
			//use mootools elements to get the button <li> elements
			//tabbuttons[i] = $$('._tabBoxTabs')[i].getChildren();
			
			var tabscount = tabsystems[i].getChildren().length;
			
			//follow naming convention and split name to get identifier
			var id=(tabsystems[i].id).split("-")[0];
			//var tabcontent = $E('#'+id+'-content');
			
			//get all the tabcontent divs
			//tcs[i]=tabcontent.getChildren();
			
			//loop through the divs and set them all to hidden and apply 'off' class to buttons (count should be equal)
			var contentChildren = $E('#'+id+'-content').getChildren();
			for(var j=0;j<contentChildren.length;j++){
				contentChildren[j].setStyle('display','none');
				
				//don't add the 'off' class to any non-button <li>s (such as .endcap)
				var tabBoxTabsChildren = tabsystems[i].getChildren();
				if(tabBoxTabsChildren[j].hasClass('tabbutton')){
					tabBoxTabsChildren[j].addClass('off');
				}
			}
			
			//show the first tab item as on
			tabBoxTabsChildren[0].addClass('on');
			tabBoxTabsChildren[0].removeClass('off');
			
			//show the first tab content item
			contentChildren[0].setStyle('display','block');
			
			//var tcsi=tcs[i];
				
			//the function to be attached to each navbutton click event	
			// @param e eventobject
			var switchContent=function(e){
			
				//console.log(this.mySystemIndex);
				//hide all content			
				var children = $E('#'+this.mySystemID+'-content').getChildren()
				for(var j=0; j<children.length; j++){
					if(children[j].hasClass('tabcontent')){
						children.setStyle('display','none');
					}
				}
				
				//console.log(this.mySystemID);
				//show the selected content
				children[this.myIndex].setStyle('display','block');
				
				//reset styles on all buttons
				var tabchildren = $$('._tabBoxTabs')[this.mySystemIndex].getChildren();
				for(var j=0;j<tabchildren.length;j++){
					//don't add the 'off' class to any non-button <li>s (such as .endcap)
					if(tabchildren[j].hasClass('tabbutton')){
						tabchildren[j].removeClass('on');
						tabchildren[j].addClass('off');
					}
				}
				
				//add 'on' state to the selected tab
				var p=this.getParent();
				p.addClass('on');
				p.removeClass('off');
				this.blur();
				
				//stop the default <a> event from being executed (no thanks to mootools - documented methods don't work for IE)
				if(e!==undefined){
					if (e.stopPropagation){ 
						e.stopPropagation(); 
						e.preventDefault(); 
					} else { 
						e.returnValue = false; e.
						cancelBubble = true; 
					} 
					return false; 
				}
			}
			
			//bind the onclick event with the <a> element in the tabbutton (thanks again mootools)
			var tabBoxTabsChildrenA = tabsystems[i].getChildren();
			for(var k=0;k<tabBoxTabsChildrenA.length;k++){
				var a=$E('a',tabBoxTabsChildrenA[k]);				
				if(a!==undefined && tabBoxTabsChildrenA[k].hasClass('tabbutton')){
					a.myIndex=k;
					a.mySystemIndex=i;
					a.mySystemID=id;
					a.addEvent('click',switchContent);
				}
			}
		}
		
	}
	
	//initialise the tabsystems
	window.addEvent('load',initTabs);