/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 * Programmer:  Jean-Charles Miron (PWGSC)
 * Date:        10th of June 2009
 * Description: This javascript file looks for tabbed panes in the html page and
 *              manipulates them to make them accessible.
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

var panels; // Multi arrayed variable that will contain all the panels. 
var tabs;   // Multi arrayed variable that will contain all the tabs.

/*
 * This will allow us to run our function after the page has loaded. We save the 
 * onload function, then modify it by adding our own function at the end.
 */ 
var existingOnload = null;
if (window.onload) { existingOnload = window.onload; }

window.onload = function (ev) {
	if (existingOnload) { existingOnload(ev); }
	addLoadEvent();
};

/*
 * This function is called when the page loads. We define the function getElementsByClassName
 * that will allow us to get elements by their class name. Then we detect if css is enabled.
 * We save all the tabs and panels in arrays for quick and easy access later on. Lastly we set 
 * the appropriate css classes to the tabs and the panes.
 */
function addLoadEvent(){ 
	addGetNodesByClassName(); // Add the function getElementByClassName to the document object.
	
	// Check to see if the css is enabled on the browser.
	if( isCSSEnabled() ){
		/* Get all tab lists found on the page.*/
		var nodes = document.getNodesByClassName("tab-list");
		if(nodes == null || nodes.length < 1) return;
		
		panels = new Array(nodes.length);
		tabs = new Array(nodes.length);
		
		for(var i=0; i<nodes.length; i++){	
			tabs[i] = getTabs(nodes[i], new Array() );
			panels[i] = new Array(tabs[i].length);		
			/* We manipulate the tabs by adding a custom function to the onclick event. */
			for(var j=0; j<tabs[i].length; j++){
				// Find the panel associated with the id found in the href of the tab link.
				panels[i][j] = document.getElementById( tabs[i][j].href.substr(tabs[i][j].href.indexOf("#")+1) );
				if( panels[i][j] == null ) return false;
				
				// Show / hide the panels/tabs
				if( j == 0 ){
					panels[i][j].style.display = 'block';
					tabs[i][j].parentNode.className = "tab-selected"; 
				}else panels[i][j].style.display = 'none';
				
				
				// We set the onclick event of the link to give the panel id to the function
				tabs[i][j].tabID = i + "_" + j;
				tabs[i][j].onclick = function(e){ changeTab(this.tabID); return false; };
			}			
		}			
		
		/* Hide all elements that contain the class 'tab-hide' */
		var tmp = document.getNodesByClassName("tab-hide");
		for(var i=0; i<tmp.length; i++){
			tmp[i].style.display = 'none';
		}
	}
} 

/*
 * This function will create an array of all the links found inside a given node
 */
function getTabs(node,tabArr){
	for(var i=0; i<node.childNodes.length; i++){
		if(node.childNodes[i].nodeType == 1){
			if(node.childNodes[i].tagName == "A") tabArr.push(node.childNodes[i]);	
			else getTabs(node.childNodes[i],tabArr);
		}
	}	
	return tabArr;
}

/*
 * This function will change the tab and panel of the specified tabbed panel. 
 */
function changeTab(index){
	var tbPnl = index.substr(0, index.indexOf("_"));
	var id = index.substr(index.indexOf("_")+1);
		
	for(var i=0; i<tabs[tbPnl].length; i++){
		if( i == id ){
			panels[tbPnl][i].style.display = 'block';
			tabs[tbPnl][i].parentNode.className = "tab-selected"; 
		}else{
			panels[tbPnl][i].style.display = 'none';
			tabs[tbPnl][i].parentNode.className = ""; 
		}
	}
}