/******************************************************************************
*	Tabbed Content switcher JavaScript		
******************************************************************************/

// Set Variables for Classes and Divs and suffixes
var currentPanel = 'samplers-panel'; // default visible panel
var tabSuffix = '-tab'; // the suffix attached to the id of the <li> that activates the scroll 
var panelSuffix = '-panel'; // the suffix attached to the id of the panel that is scrolled to
var tabID = 'navTabs'; // the id of the ul containing the nav tabs
var selectedClass = 'selected'; // the class name attached to the <li> that corresponds with the current visible panel
var deselectedClass = 'deselected'; // the class name attached to the <li>'s of all hidden panels

// Function for adding an onload event to an existing onload event (if one is present)
function addLoadEvent(func)
	{
	// Get the onload event
	var oldonload = window.onload;
	// If the onload event IS NOT a function...
	if (typeof window.onload != 'function')
		{
		// the onload event is a function
		window.onload = func;
		} else {
		// otherwise, add a function to the existing onload event
		window.onload = function()
			{
			oldonload();
			func();
			}
		}
	}

// Scroll the Panel content to the position of the selected link
function ScrollPanel(selected) {
	// remember the last panel selected and refresh current panel
	if (currentPanel == selected) {
		return false;
	}
	lastPanel = currentPanel;
	currentPanel = selected;
	
	// Change the highlighted tab
	// get the root of the panel and change the class to highlight the current tab
	panelTab = addSuffix(currentPanel, tabSuffix);
	document.getElementById(panelTab).className = selectedClass;
	if (lastPanel) {
		lastTab = addSuffix(lastPanel, tabSuffix);
		document.getElementById(lastTab).className = deselectedClass;
	}
	
	// Change the highlighted panel
	// get the celected panel and change the class to show it
	document.getElementById(currentPanel).className = selectedClass + panelSuffix;
	if (lastPanel) {
		document.getElementById(lastPanel).className = deselectedClass + panelSuffix;
	}
	return false;
}

function addSuffix(needsSuffix, theSuffix) {
	hasSuffix = needsSuffix.split('-')[0] + theSuffix;
	return hasSuffix;
}

// Function for preparing the Tabs for content sliding
function prepareTabs() {
	// Check for necessary DOM methods
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	// Check for necessary elements
	if (!document.getElementById(tabID)) return false;
	// Get all the elements inside the element with value of var tabID that are links
	var tabs = document.getElementById(tabID);
	var links = tabs.getElementsByTagName("a");
	for (var i=0; i < links.length; i++) {
		// Set the onclick value to activate the showpic function
		links[i].onclick = function() {
			// split whichPanel into the url and the actual id we need
			var thisPanelString = String(this);
			var thisPanel = thisPanelString.split('#')[1];
			return ScrollPanel(thisPanel);
		}
		links[i].onkeypress = links[i].onclick;
	}
}

// Prepares the placeholder image when the page loads
addLoadEvent(prepareTabs);