function showTab (tabNum) {
	
	// Build Tab and Content ID's based on the tab number
	var tabID = 'Tab' + tabNum;
	var contentID = 'Content' + tabNum;

	// Get the LI object based on the tabID
	objLI = document.getElementById(tabID);
	
	// If the object exists
	if (objLI) {
		// Get the LI Objects parent (which should be the UL element the LI tag is in)
		objUL = objLI.parentNode;
	
		// Get all LI's in the UL and set their class and color
		var LIs = objUL.getElementsByTagName("li");
		for (var i = 0; i < LIs.length; i++) {
			var classString = 'Tab TabColor';
			LIs[i].className = classString;
		}
		
		// Show wanted tab is seleted
		objLI.className += ' Selected';
	
		// *****
		// ***** Step 2 - Show Tab Content 
		// *****
		
		// Scan for all DIV objects on page that contain the classname TabContent and hide them
		var divObj = document.getElementsByTagName('div');
		for (var i = 0; i < divObj.length; i++) {
			if (divObj[i].className.indexOf("TabContent") >= 0) divObj[i].style.display='none';
		}
		
		// Show wanted content DIV
		contentObj = document.getElementById(contentID);
		if ( typeof contentObj != "undefined" && contentObj != null ) contentObj.style.display='';
	}

}


function BuildTabs() {
	
	// Scan for all UL objects on page that contain the classname TabContainer
	var ulObj = document.getElementsByTagName('ul');
	
	for (var i = 0; i < ulObj.length; i++) {
		if (ulObj[i].className.indexOf("TabContainer") >= 0) {

			// Get all LI's in the UL and set their class name to "Tab"
			var LIs = ulObj[i].getElementsByTagName("li");
			for (var j = 0; j < LIs.length; j++) {
			
				// Assign Tab Class and Color
				var classString = 'Tab TabColor';
				if (j==0) classString +=  ' Selected';
				LIs[j].id = "Tab" + j;
				LIs[j].className = classString;
				LIs[j].innerHTML = "<a href=\"#" + j + "\" onClick=\"showTab('" + j + "');\">" +
									LIs[j].innerHTML +
									"</a>";
			}
		}
	}

	// Scan for all DIV objects on page that contain the classname TabContent
	var divObj = document.getElementsByTagName('div');
	var cnt = 0;
	for (var i = 0; i < divObj.length; i++) {
		
		if (divObj[i].className.indexOf("TabContent") >= 0) {
		
			// Hide it
			divObj[i].style.display='none';
			divObj[i].id = "Content" + cnt;
			
			// Create colored line and insert it as first item in content div
			lineDiv = document.createElement("div");
			lineDiv.className = "TabTopLine TabColor";
			divObj[i].insertBefore(lineDiv, divObj[i].firstChild); 
		
			// See if TabContent Div contains a top level navigation div
			var topNavFound = false;
			var tabNavObj = divObj[i].getElementsByTagName('div');
			for (var j = 0; j < tabNavObj.length; j++) {
				// If top leven navigation div found then change background color to match tab
				if (tabNavObj[j].className.indexOf("TabTopNavContent") >= 0) {
					tabNavObj[j].className += " TabColor";
					topNavFound = true;
				}
			}
		
			// Display first one
			cnt+= 1;
			if (cnt == 1) divObj[i].style.display='';

		}
	}

	// If URL has a hash value then assume it contains the ID of the tab you wish to display
	// so call the showTab function
	locationHash = window.location.hash;
	if (locationHash.length > 0) showTab(locationHash.substring(1));
}

window.onload = BuildTabs;