// The below function, showDetail, is what hides and displays the detail sections when an anchor is clicked.
function showDetail(theId, theClass) {
	//Create an array 
	var allPageTags = new Array();
	var allPageTags = document.getElementsByTagName("div");

	//cycle through the tags and hide all with the given class
	for (i = 0; i < allPageTags.length; i++)
		if (allPageTags[i].className == theClass)
			allPageTags[i].style.display = 'none';
	
	//return all the section tab headers and section tab arrows to gray
	for (j = 0; j < document.getElementById(theClass + 'Select').firstChild.childNodes.length; j++) {
		
		//headers
		document.getElementById(theClass + 'Select').firstChild.childNodes[j].firstChild.firstChild.style.color = '#868686';
		
		//arrows
		elemArrowImg = document.getElementById(theClass + 'Select').firstChild.childNodes[j].firstChild.lastChild;
		elemArrowImg.src = elemArrowImg.src.replace('-red', '');
	}
	
	//show the clicked section
	document.getElementById(theId).style.display = 'block';
	
	//change the color of the clicked header to red
	document.getElementById(theId + 'Link').firstChild.style.color = '#ca0226';
	
	//if the arrow for this header isn't already red
	if (document.getElementById(theId + 'Link').lastChild.src.indexOf('-red.gif') < 0) {
	
		//change the src of the arrow for the clicked header
		elemArrowImg = document.getElementById(theId + 'Link').lastChild;
		elemArrowImg.src = elemArrowImg.src.replace('.gif', '-red.gif');
		
	}
}

//highlight a tab when moused-over
function highlightThisTab(theElement) {
	
	//change the color of the tab header to red
	theElement.firstChild.style.color = '#ca0226';
	
	//change the color of the header arrow to red if it isn't already
	if (theElement.lastChild.src.indexOf('-red') < 0)
		theElement.lastChild.src = theElement.lastChild.src.replace('.gif', '-red.gif');
	
}

//un-highlight a tab when moused-off of
function dehighlightThisTab(theElement) {

	//if the section for this tab is not being show, unhighlight the tab
	if (document.getElementById(theElement.id.replace('Link', '')).style.display == 'none') {
		
		//make the text gray
		theElement.firstChild.style.color = '#868686';
		
		//make the arrow gray
		theElement.lastChild.src = theElement.lastChild.src.replace('-red', '');
	}
}