/*
	Scripts for tabs (NOT used for navigation-style tabs)
	
	The setupTabs function, called onload, finds all divs with class "tab-set" and converts them to tabbed panels.
	The assumed structure of a tab set is:
	
		<div class="tab-set">
			<div>
				<h2|h3|h4>Header</>
				[...content...]
			</div>
			<div>
				<h2|h3|h4>Header</>
				[...content...]
			</div>
			...
		</div>
		
	The headers are removed from their divs and made into list items, and the resulting list inserted
	at the beginning of the tab set. To keep track of which header goes with which tab, the divs are assigned IDs
	based on the ID of the tab set (which MUST have an ID), e.g. mytabset-3 is the third tab (div) in div#mytabset;
	and the header LI elements are assigned IDs based on the tab IDs -- e.g. mytabset-3-header. 
	
	The first tab, by default, is left "active"; the others are hidden, and their headers are turned into links
	with "onclick" events assigned. When the header of an inactive tab is clicked, that tab becomes active, and the others are made inactive.
	
	The divs within the tab set are assigned class "tab" for formatting. The active tab header is given class="selected".
	
	A separate CSS file is required for positioning of the tabs (see tabs.css).
	
	NOTE: I would have preferred to leave the headers in place in the flow of the document. However, I couldn't 
	make the formatting work -- that is, I couldn't get all the headers floated above the active tab without assigning the headers fixed widths.
	
*/

function getSectionHeader(obj) {
	var elements = obj.getElementsByTagName('h2');
	if( elements.length > 0 ) {
		return elements[0];
	}
	elements = obj.getElementsByTagName('h3');
	if( elements.length > 0 ) {
		return elements[0];
	}
	elements = obj.getElementsByTagName('h4');
	if( elements.length > 0 ) {
		return elements[0];
	}
	return null;
}

function makeTabHeaderLink(tabHeader) {
	// Adds link to tab header.
	var tabHeaderText = tabHeader.childNodes[0];
	var newLink = document.createElement('A');
	addEvent(newLink,'click',showTab);
	tabHeader.removeChild(tabHeaderText);
	newLink.appendChild(tabHeaderText);
	tabHeader.appendChild(newLink);
	return;	
}

function removeTabHeaderLink(tabHeaderLink) {
	var tabHeader = tabHeaderLink.parentNode;
	var tabHeaderText = tabHeaderLink.childNodes[0];
	tabHeaderLink.removeChild(tabHeaderText);
	tabHeader.removeChild(tabHeaderLink);
	tabHeader.appendChild(tabHeaderText);
	return;	
}

function getTabs(tabSet) {
	var nodes = tabSet.childNodes;
	var tabs = new Array;
	for( j=0; j<nodes.length; j++ ) {
		if( nodes[j].nodeName == 'DIV' ) {
			tabs[tabs.length] = nodes[j];
		}
	}
	return tabs;
}

function setupTabs() {
	// Call this onload.
	
	var divs = document.getElementsByTagName('div');
	for( i=0; i<divs.length; i++ ) {
		if( divs[i].className.indexOf('tab-set') != -1 ) {
			var tabSet = divs[i];
			var tabSetId = tabSet.getAttribute('id');
			var tabs = getTabs(tabSet);
			
			var j;
			var tabHeaderList = document.createElement('UL');
			tabHeaderList.className = 'tab-headers';
			for( j=0; j<tabs.length; j++ ) {
				// list of tab headers

				// Assign classname to tabs 
				tabs[j].className = 'tab';
				
				// Find header; remove from document & add to header list
				var tabHeader = getSectionHeader(tabs[j]);
				var tabHeaderText = tabHeader.childNodes[0];
				var tabHeaderListItem = document.createElement('LI');
				tabHeaderListItem.setAttribute('id',tabSetId + '-' + j + '-header');
				tabHeader.removeChild(tabHeaderText);
				tabs[j].removeChild(tabHeader);
				tabHeaderListItem.appendChild(tabHeaderText);
				tabHeaderList.appendChild(tabHeaderListItem);
								
				tabs[j].setAttribute('id',tabSetId + '-' + j)
				
				// Hide all but the first tab and make headers into links to open tabs
				if( j==0 ) {
					tabHeaderListItem.className = 'selected';
				}
				else {
					makeTabHeaderLink(tabHeaderListItem);
					tabHeaderListItem.className = '';
					tabs[j].style.display = 'none';
				}
			}
			// Show tab header list
			tabSet.insertBefore(tabHeaderList,tabSet.firstChild);
		}
	}
}

function showTab(evt) {
	var tabHeaderLink = findEventOwner(evt);
	var selectedTabHeader = tabHeaderLink.parentNode;
	var selectedTabHeaderId = selectedTabHeader.getAttribute('id');
	var selectedTabId = selectedTabHeaderId.substring(0,selectedTabHeaderId.indexOf('-header'));
	var selectedTab = document.getElementById(selectedTabId);
	
	var tabSet = selectedTab.parentNode;
	var tabs = getTabs(tabSet);
	
	for( j=0; j<tabs.length; j++ ) {
		var tabHeader = document.getElementById(tabs[j].getAttribute('id') + '-header');
		if( tabs[j].getAttribute('id') == selectedTabId ) {
			// Show tab and remove link
			tabs[j].style.display = 'block';
			removeTabHeaderLink(tabHeaderLink);
			tabHeader.className = 'selected';
		}
		else {
			// Hide tabs other than the one selected
			makeTabHeaderLink(tabHeader);
			tabHeader.className = '';
			tabs[j].style.display = 'none';
		}
	}
	
}