var g_anchorCount = 1;
var i;

function displayTab(tabID, tabbedGroup, linkID) {
	//grab all tabs in the given container and hide them
	tabContainer = document.getElementById(tabbedGroup);
	tabbedContent = tabContainer.getElementsByTagName('div');
	tabLinksContainer = tabContainer.getElementsByTagName('ul')[0];
	tabLinks = tabLinksContainer.getElementsByTagName('a');
	
	for (i=0; i<tabbedContent.length;i++) {
		if (!tabbedContent[i].className || tabbedContent[i].className != "tabbed-content") { 
			continue; 
		}
		tabbedContent[i].style.display = "none";
	}
	for (i=0; i<tabLinks.length;i++) {
		tabLinks[i].className = "";
	}
	
	//show the selected tab
	activeTab = document.getElementById(tabID);
	activeLink = document.getElementById(linkID);
	activeTab.style.display = "block";
	activeLink.className = "active";
	activeLink.blur();
}

function buildTabs(headingTag, tabbedGroup) {
	var count = 0;
	// create the list that will hold the tab links
	var oList = document.createElement("UL");
	oList.className = "tabbed-nav";
	
	var tabContainer = document.getElementById(tabbedGroup);
	var tabbedContent = tabContainer.getElementsByTagName('div');
	var headingElements = tabContainer.getElementsByTagName(headingTag);
	
	// loop through each tag and make a tab for it
	for (i=0; i<tabbedContent.length;i++) {
		if (!tabbedContent[i].className || tabbedContent[i].className != "tabbed-content") { 
			continue; 
		}
		
		// give each set of content a unique ID
		var tabID = tabbedGroup + "content" + i;
		var linkID = tabbedGroup + "link" + i;
		tabbedContent[i].setAttribute("id", tabID);
		
		// get the text that is inside the given heading tag
		var tabHeadingText = headingElements[count].innerHTML;
		var tabHeadingMark = tabHeadingText;
		if ((tabHeadingMark.indexOf('<img') != -1) || (tabHeadingMark.indexOf('<IMG') != -1)) {
			tabHeadingMark = tabHeadingMark.split('>')[1];
		}
		tabHeadingMark = tabHeadingMark.replace(/\s/g,'');
		tabHeadingMark = tabHeadingMark.replace(/[^a-zA-Z 0-9]+/g,'');
		
		// build a named anchor for the location
		var anchorMark = "<a name='" + tabHeadingMark + "' id='" + tabHeadingMark + "'></a>";
		tabbedContent[i].innerHTML = anchorMark + tabbedContent[i].innerHTML;
		
		// create a LI tag for the tab. 
		// This will be inserted into the UL that holds all of the tabs.
		var tabListItem = document.createElement("LI");
		var tabLink = document.createElement("A");
		var sLinkDest = "#" + tabHeadingMark;
		var tabLinkText = document.createTextNode(tabHeadingText);
		tabLink.setAttribute("id", linkID);
		tabLink.setAttribute("href", sLinkDest);
		if (i == 0) {
			tabLink.className = "active";	
		}
		tabLink.linkID = linkID;
		tabLink.tabID = tabID;
		tabLink.innerHTML = tabHeadingText;
		tabLink.onclick = function() {
			displayTab(this.tabID,tabbedGroup,this.linkID);
			return false;
			};
		
		tabListItem.appendChild(tabLink);
		oList.appendChild(tabListItem);
		
		//hide the headings and other tabs
		tabbedContent[i].style.display = "none";
		headingElements[count].style.display = "none";

		g_anchorCount++;
		count++;
	}
	// find the first group and display it
	var firstGroup = document.getElementById(tabbedGroup + "content0");
	firstGroup.style.display = "block";
	// add the tab list to the top of the container
	tabContainer.insertBefore(oList, firstGroup);
}

