/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 * Programmer:  Jean-Charles Miron, Ekaterina Panina (PWGSC)
 * Date:        22th of June 2009
 * Description: This javascript file looks for collapsible panes in the html page 
 *              and manipulates them to make them accessible.
 *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
 
/*
 * 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 (e) {
	if (existingOnload) { existingOnload(e); }
	addLoadEvent();
};

/*
 * This function is called when the page loads. We define the function getElementsByCalssName
 * that will allow us to get elements by their class name. Then we detect if css is enabled.
 * 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()){
		hideAllPanes(true);
		addToggleButtons();
	}
}

/*
 * This functions hides / shows the box container that belongs to the link.
 */
function collapsePane(id){	
	var blockElement = document.getElementById(id);	
	if( blockElement.style.display == 'none' ) blockElement.style.display = 'block';
	else blockElement.style.display = 'none';
}

/*
 * This function adds toggle buttons in div elements that contain the class collapseToggleAll.
 * These toggle buttons will show/hide all the collapsable panes on the page.
 */
function addToggleButtons(){
	var nodes = document.getNodesByClassName("collapseToggleAll");
	if( nodes == null ) return;
	
	for(var i=0; i<nodes.length; i++){
		var lang = document.getElementsByTagName('html')[0].getAttribute('lang');
		var tmp = document.createElement('p');
		var tmpText;
		
		nodes[i].appendChild(tmp);
		
		// Create a A element and text node for the show all, then we append them to the div.
		tmp = document.createElement('a');
		if(lang == "fr" || lang == "fra") tmpText = document.createTextNode('Afficher');
		else tmpText = document.createTextNode('Show All');		
		tmp.href = "";
		tmp.onclick = function(e){ showAllPanes(); return false; };
		tmp.appendChild(tmpText);
		nodes[i].appendChild(tmp);	
		
		tmpText = document.createTextNode(' | ');
		nodes[i].appendChild(tmpText);
		
		// Create a A element and text node for the hide all, then we append them to the div.
		tmp = document.createElement('a');
		if(lang == "fr" || lang == "fra") tmpText = document.createTextNode('Masquer');
		else tmpText = document.createTextNode('Hide All');
		tmp.href = "";
		tmp.onclick = function(e){ hideAllPanes(false); return false; };	
		tmp.appendChild(tmpText);
		nodes[i].appendChild(tmp);
	}
}

/*
 * This function will show all collaspable panes on the page.
 */
function showAllPanes() {
	var nodes = document.getNodesByClassName("collapseToggle",null);
	if(nodes == null || nodes.length < 1) return;
	
	for(var i=0; i<nodes.length; i++){
		// Get the specified id specified in the link.
		var id = nodes[i].href.substr(nodes[i].href.indexOf("#")+1);		
		// Find the block element that contains the id specified by the link.
		var blockElement = document.getElementById(id);			
		if(blockElement == null) continue;		
		blockElement.style.display = 'block';
	}
}

/*
 * This function will hide all collaspable panes on the page.
 */
function hideAllPanes(flag) {
	var nodes = document.getNodesByClassName("collapseToggle",null);
	if(nodes == null || nodes.length < 1) return;
	
	for(var i=0; i<nodes.length; i++){
		// Get the specified id specified in the link.
		var id = nodes[i].href.substr(nodes[i].href.indexOf("#")+1);
		
		// Find the block element that contains the id specified by the link.
		var blockElement = document.getElementById(id);	
		if(blockElement == null) continue;
		
		blockElement.style.display = 'none';

		// We set the onclick event of the link to give the block element id to the function. This is done
		// only if the flag is for initial startup is set.
		if( flag ){
			if(blockElement.className == "collapseOpen") blockElement.style.display = 'block';
			nodes[i].blockElementID = id;
			nodes[i].onclick = function(e){ collapsePane(this.blockElementID); return false; };
		}
	}
}