//	This function is called in the body onload
function setupTabs() {

	//	Make sure we are using DOM browsers
	if(document.getElementById) {
	
		//	Set the wrapping DIV to have the class "in-tabs", which triggers the CSS
		document.getElementById('three-tab-wrapper').className = "in-tabs";
		
		//	Look through the children of the DIV holding the three DIVs that will become tabbed
		for (var a = 0; a < document.getElementById('three-tab-wrapper').childNodes.length; a++) {
		
			//	Temp variable so we do not have to write the long getElById
			var tempObj = document.getElementById('three-tab-wrapper').childNodes[a];
			
			//	When we find one of its children DIVs
			if(tempObj.tagName && tempObj.tagName.toUpperCase() == "DIV") {
				
				//	Now, look through *that* DIV for its h3
				for (var b = 0; b < tempObj.childNodes.length; b++) {
					if(tempObj.childNodes[b].tagName && tempObj.childNodes[b].tagName.toUpperCase() == "H3") {
					
						//	Now, we need to write an A tag within the H3s.  We *could* just assign
						//	an onClick event, but it will be easier in CSS to just add the A tag and
						//	let CSS handling styles.
						var tempWithinH3 = tempObj.childNodes[b].innerHTML;
						tempWithinH3 = "<a href='#' onclick='toggleTab(this); return false;'>" + tempWithinH3 + "</a>";
						tempObj.childNodes[b].innerHTML = tempWithinH3;
					}
				}
			}		
		}
		//	Now, hide the tabs
		hideAllTabs();
		
		//	And immediately set "tabOne" to be visible again
		document.getElementById("tabOne").className = "active-tab";
	}
}

function toggleTab(aObj) {
	hideAllTabs();
	aObj.parentNode.parentNode.className = "active-tab";
}

//	Set all three nodes to inactive
function hideAllTabs() {
	document.getElementById('tabOne').className = "inactive-tab";
	document.getElementById('tabTwo').className = "inactive-tab";
	document.getElementById('tabThree').className = "inactive-tab";
}