// styles for when js is turned on
document.write('<style type="text/css" media="screen"> \
					.tabContent { border:10px solid #009C46; width:97.6%; margin-bottom:1em; } \
					.tabContentPad { padding:10px 10px 0px 10px; } \
					</style>');

/* http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
function addLoadEventForTabs(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			if (oldonload) {
			    oldonload();
			}
			func();
		}
	}
}

/* http://www.dustindiaz.com/getelementsbyclass/ */
function getElementsByClass(searchClass,node,tag) {
	//alert(searchClass);
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < els.length; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}


function tabbedTables() {
	if (document.getElementById) {
		
		var tabAnchor = (unescape(self.document.location.hash.substring(1)));
		
		// get all tabWrap divs on page
		var tabWrap = getElementsByClass("tabWrap", document, "div");
		
		// process each individually to set unique id's
		for (var i=0; i<tabWrap.length; i++) {
			
			// set unique tab group id
			var tabWrapId = 'tab-'+i;
			tabWrap[i].id = tabWrapId

			// get all tab content within this tab group
			var tabContent = getElementsByClass("tabContentWrap", document.getElementById(tabWrapId), "div");
			
			var tabToDisplay = 0;
			
			// set id and hide each tab content
			for (var j=0; j<tabContent.length; j++) {
				
				var tabContentId = 'tab-'+i+'-'+j;
				tabContent[j].id = tabContentId;
				tabContent[j].className += ' tabHide';
			
				tabAnchors = document.getElementById(tabContentId).getElementsByTagName('a');
				for (var k=0; k<tabAnchors.length; k++) {
					if (tabAnchors[k].id.substr(0,4) == "tab-") {
						if (tabAnchors[k].id == tabAnchor) {
							tabToDisplay = j;
						}
					}
				}
			} 
			
			
			// show the first tab
			tabContent[tabToDisplay].className = tabContent[tabToDisplay].className.replace(' tabHide', ' tabShow');
			
			// get all tab headers within this tab group
			var tabHdr = getElementsByClass("tabHdr", document.getElementById(tabWrapId), "*");
			
			// create tab nav list and hide original tab headers
			var tabNav = '<div class="tabNav" id="tabNav-'+i+'">';
			for (var j=0; j<tabHdr.length; j++) {

				var tabNavContent = tabHdr[j].innerHTML;
				
				//console.log((tabHdr[j].innerHTML));
				tabNav += '<div id="tabNav-'+i+'-'+j+'" onclick="displayTab('+i+','+j+'); return false;" onmouseover="this.style.cursor=\'pointer\';">'+tabNavContent+'</div>';
				tabHdr[j].style.display = 'none';
			}
			tabNav += '</div>';
			tabNav += '<div class="tblHdrTab"><div class="tblHdrTabSub"></div></div>';
			
			// add tab nav list to tab group
			tabWrap[i].innerHTML = tabNav + tabWrap[i].innerHTML;
			
			tabNavSelected = document.getElementById('tabNav-'+i+'-'+tabToDisplay);
			tabNavSelected.className += 'selected';
			
			tabWrap[i].style.display = 'block';
		}
	}
}

function displayTab(tabWrap, tab) {
	var tabWrapId = 'tab-'+tabWrap;
	var tabNavId = 'tabNav-'+tabWrap;
	
	// get all tab content within the specified tab group
	var tabs = getElementsByClass("tabContentWrap", document.getElementById(tabWrapId), "div");

	// hide every tab content
	for (var i=0; i<tabs.length; i++) {
		tabs[i].className = tabs[i].className.replace(' tabShow', ' tabHide');
	}
	
	// display the specified tab content
	tabs[tab].className = tabs[tab].className.replace(' tabHide', ' tabShow');

	// get all tab nav items within the specified tab group
	var tabNav = document.getElementById(tabNavId);
	var tabs = tabNav.getElementsByTagName('div');
	
	// reset style for each tab nav item
	for (var i=0; i<tabs.length; i++) {
		tabs[i].className =  tabs[i].className.replace('selected', '');
	}
	tabs[tabs.length-1].className += ' tabLast';
	
	// hilight the specified tab nav
	tabs[tab].className += ' selected';
}


document.write('<style type="text/css" media="screen">.tabWrap { display:none; }</style>');

addLoadEventForTabs(tabbedTables);