/**
 * EXPLICITLY DECLARED PAGE SCOPED VARIABLES
 */
// Element ID of selected tab on product page
var selectedTabIndex = 1;
// Element ID of selected tab on product page
var maxTabContentHeight = 0;

/* --------------------------------------------------------------------- */

/**
 * Displays the div element that holds the selected tab content
 *
 * @param	index	(Number) - index of tab html element id
 */
function overCategory(elmt) {
	elmt.className = "category selected";
}
function offCategory(elmt) {
	elmt.className = "category";
}

function overProduct(elmt) {
	elmt.style.backgroundImage = "url('/media/img/arrows/arrow_category_on.gif')";
	elmt.className = "product selected";
}
function offProduct(elmt) {
	elmt.style.backgroundImage = "url('/media/img/arrows/arrow_category_off.gif')";
	elmt.className = "product";
}

/**
 * Displays the div element that holds the selected tab content
 *
 * @param	index	(Number) - index of tab html element id
 */
function selectTab(index) {
	// Increase height of container if needed
	setTabContentHeight(index);

	// Hide all tab content elements
	deselectTabs();

	// Display tab
	getElement("tab" + index).className = "tabon";

	// Display tab content
	getElement("tabContent" + index).className = "tabcontenton";
	
	// Update current tab page variable
	selectedTabIndex = index;
}

/**
 * Hides all tab content on the page and turns off tabs.
 * Assumes tab content element IDs start with "tab" followed by an 
 * integer index (starting with 1).
 */
function deselectTabs() {
	// Hide all tab content
	var i = 1;
	var elmt = getElement('tabContent' + i);
	while (elmt != null) { 
		elmt.className = "tabcontentoff";
		elmt = getElement('tabContent' + i++);
	}

	// Set state of tabs to off
	var i = 1;
	elmt = getElement('tab' + i);
	while (elmt != null) {
		elmt.className = "taboff";
		elmt = getElement('tab' + i++);
	}
}

/**
 * Sets the maximum height needed for the tabcontent div which houses the
 * content divs for the tabs.  Height only increased if the passed
 * element is larger in height.
 */
function setTabContentHeight(index) {
	var newTabContentHeight = Element.getHeight('tabContent' + index);
	var oldTabContentHeight = Element.getHeight('tabContent' + selectedTabIndex);
	//alert(oldTabContentHeight + "\n" + newTabContentHeight);	
	var tallerTab = Math.max(newTabContentHeight, oldTabContentHeight);
	if (tallerTab > maxTabContentHeight) {
		maxTabContentHeight = tallerTab;
		getElement('tabcontent').style.height = maxTabContentHeight + "px";
	}
}

/**
 * Handles clicking of SKU link on a product page.
 *
 * @see		Prototype -> Position
 * @see		Prototype -> Ajax
 */
function goto(url) {
	document.location.href=url;
}

/**
 * Handles clicking of SKU link on a product page.
 *
 * @see		Prototype -> Position
 * @see		Prototype -> Ajax
 */
function onClickSku(sku) {
	alert(getContentOffset().x);
	var popupHTML = "";
	// Make Ajax call to Struts action for SKU HTML
	// Add that HTML to page using Prototype API
}