/*
 * ExaVault Plan Page Navigation Javascript
 *
 * Handles navigation on the EV plans pages.
 *
 * Written by D. Ordal
 * October 20, 2009
 *
 */

$EV.planPageNav = {};
$EV.planPageNav.currentPage = null;

/*
 * setHighlight(): called on mouseover, highlights the item
 *
 */
$EV.planPageNav.featureListSetHighlight = function() {
	jQuery(this)
		.css('color', '#ffffff')
		.css('backgroundImage', "url('/images/features_table_arrow.gif')");

	jQuery('#' + this.id + '-content').css('display', 'block');
}

/*
 * removeHighlight(): called on mouseout; removes the highlight
 *
 */
$EV.planPageNav.featureListRemoveHighlight = function() {

	// we simply remove the style attached to the element, which lets the 
	// default style (listed in the style sheet) come through
	jQuery(this)
		.css('color', '')
		.css('backgroundImage', '');
	
	jQuery('#' + this.id + '-content').css('display', 'none');
}

/*
 * showPage(): switches the displayed 'page' when someone clicks on an item
 * in the header
 *
 * @param integer	pageId	optional argument to identify what page we should switch to
 *
 */
$EV.planPageNav.showPage = function (pageId) {

	// get the pageID from the click if it wasn't passed in
	if (typeof this.id !== 'undefined')
		pageId = this.id;
		
	// if old page is null, it means we're running for the first time
	if ($EV.planPageNav.currentPage == null) {
		if (pageId != 'planPgDetails') jQuery('#planPgDetails-content').css('display','none');
		if (pageId != 'planPgPricing') jQuery('#planPgPricing-content').css('display','none');	
		if (pageId != 'planPgFeatures') jQuery('#planPgFeatures-content').css('display','none');
	} else {
		jQuery('#' + $EV.planPageNav.currentPage + '-content').css('display','none');
		jQuery('#' + $EV.planPageNav.currentPage + '-arrow').css('visibility', 'hidden');
		jQuery('#' + $EV.planPageNav.currentPage).removeClass('horizNavOn');
		jQuery('#' + $EV.planPageNav.currentPage).addClass('horizNavOff');
	}
	
	// show the new page
	jQuery('#' + pageId + '-content').css('display', '');
	jQuery('#' + pageId + '-arrow').css('visibility', 'visible');
	jQuery('#' + pageId).removeClass('horizNavOff');
	jQuery('#' + pageId).addClass('horizNavOn');					
	
	// reset the page to the top of the window
	window.scroll(0,0);
	
	$EV.planPageNav.currentPage = pageId;
	
}

/*
 * init(): attach listeners to the appropriate parts of the feature page
 * so that the rollovers, etc. work
 *
 */
$EV.planPageNav.init = function() {

	// init the main header nav
	if (jQuery('#planPgNavTable').length > 0) {

		// show the appropriate tab, either based on a hashed part of the URL
		// e.g. ftp-storage-space/#pricing, or a default if no or bad hash is
		// passed in
		var location = window.location.hash.replace(/#/, '');
		var pageName = 'planPgDetails';		// default to details page
		switch (location) {
			case 'details': pageName = 'planPgDetails'; break;
			case 'pricing': pageName = 'planPgPricing'; break;
			case 'features': pageName = 'planPgFeatures'; break;
		}
		$EV.planPageNav.showPage(pageName);
		
		// attach listeners
		jQuery('td.planPgNavControl').click($EV.planPageNav.showPage);
		
	}
	
	// init the feature list table
	if (jQuery('#masterFeaturesList').length > 0) {
		// hide all the content elements. We do this now, rather than via a a display:none in the CSS
		// to keep the content visible for people who have JS disabled (e.g. google, etc.)
				
		jQuery('div.featureListItemDetails').css('display','none');
		jQuery('div.featureListRow')
			.mouseover($EV.planPageNav.featureListSetHighlight)
			.mouseout($EV.planPageNav.featureListRemoveHighlight); 
	}
}

jQuery(document).ready($EV.planPageNav.init);