/* Started from the excellent tutorial at http://www.elated.com/articles/javascript-tabs/ */
var tabLinks = new Array();
var contentDivs = new Array();

function init() {
	var docname=document.location.href;
	var dochash=getHash(docname);
	var usedochash = false;
	var tabListItems = document.getElementById('tabs').childNodes;
	/* Grab the tab links and content divs from the page */
	for (var i = 0; i < tabListItems.length; i++) {
		if ( tabListItems[i].nodeName == "LI" ) {
			var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
			var id = getHash(tabLink.getAttribute('href'));

			tabLinks[id] = tabLink;
			contentDivs[id] = document.getElementById(id);
			if (id == dochash)
				usedochash = true;
		}
	}

	var alltabs = document.getElementById('alltabs');
	alltabs.onclick = showall;
	/* Assign onclick events to the tab links, and
	 * highlight the chosen tab (if there is one) */
	for ( var id in tabLinks ) {
		tabLinks[id].onclick = showTab;
		if (id == dochash)
			tabLinks[id].className = 'selected';
	}

	/* Hide all content divs except the one for the
	 * chosen example (if there is one) */
	for (var id in contentDivs) {
		if (id != dochash && dochash != "all")
			contentDivs[id].className = 'tabContent hide';
	}
}

function showall() {
	var selectedId = getHash(this.getAttribute('href'));

	for (var id in contentDivs) {
		tabLinks[id].className = '';
		contentDivs[id].className = 'tabContent';
	}
	/* Update the hash in the url */
	parent.location.hash = selectedId;

	/* Stop the browser from following the link */
	return false;
}

function showTab() {
	var selectedId = getHash(this.getAttribute('href'));

	/* Highlight the selected tab, and dim all others.
	 * Also show the selected content div, and hide all others. */
	for (var id in contentDivs) {
		if (id == selectedId) {
			tabLinks[id].className = 'selected';
			contentDivs[id].className = 'tabContent';
		} else {
			tabLinks[id].className = '';
			contentDivs[id].className = 'tabContent hide';
		}
	}
	/* Update the hash in the url */
	parent.location.hash = selectedId;

	/* Stop the browser from following the link */
	return false;
}

function getFirstChildWithTagName(element, tagName) {
	for (var i = 0; i < element.childNodes.length; i++) {
		if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
	}
}

function getHash( url ) {
	var hashPos = url.lastIndexOf ( '#' );
	return url.substring( hashPos + 1 );
}

