/**
 * This method is to support tab navigation.
 * It can show/hide the panel(s) when user clicks on the tab.
 */
function showHideTab(clickObj) {
	// ignore the click action if it's already selected
	if(clickObj.parentNode) {
		if(clickObj.parentNode.id == "selected") {
			return;
		}
	}

	// get the tabPanel node element
	var tabPanelNode = document.getElementById('tabPanel');

	if(tabPanelNode) {
		// get all the <li> elements under tabPanel
		var tabNodes = tabPanelNode.getElementsByTagName('li');

		// iterate through each tab node and show/hide them
		for (var i = 0; tabNodes && i < tabNodes.length; ++i) {		
			if(tabNodes[i] && tabNodes[i].getElementsByTagName('a') && 
					tabNodes[i].getElementsByTagName('a').length > 0) {
				var childNode = tabNodes[i].getElementsByTagName('a')[0];

				if(childNode.id == clickObj.id) {
					//show the selected div
					childNode.parentNode.id = "selected";
					if(document.getElementById("div_" + childNode.id)) {
						document.getElementById("div_" + childNode.id).style.display = "block";
						document.getElementById("div_" + childNode.id).style.visibility = "visible";
					}
				} else {
					// hide the unselected div
					childNode.parentNode.id = "unselected";
					if(document.getElementById("div_" + childNode.id)) {
						document.getElementById("div_" + childNode.id).style.display = "none";
						document.getElementById("div_" + childNode.id).style.visibility = "hidden";
					}
				}
			}
		}
	}
}