// JavaScript Document
// Author: Mike Lipman
// Date: 8/26/2008

var iTabSelected = 1;	// Global variable captures the current tab selected
var numTabs = 4;		// Global variable captures the number of tabs

// If the feat URL parameter is set appropriately, modify the styles to show the Featured Phones tab
if (location.href.indexOf('tabPhone=2') > 0)
{
	iTabSelected = 2;
	document.write("<style type=\"text/css\">");
	document.write(".phoneTabInfo1 {display:none;}");
	document.write(".phoneTabInfo2 {display:block;}");
	document.write("#phoneTabGraphic1 {cursor:pointer;}");
	document.write("#phoneTabGraphic2 {cursor:default;}");
	document.write(".phoneFilterSection {display:none;}");
	document.write("</style>");
}
else
{
	if (location.href.indexOf('tabPhone=3') > 0)
	{
		iTabSelected = 3;
		document.write("<style type=\"text/css\">");
		document.write(".phoneTabInfo1 {display:none;}");
		document.write(".phoneTabInfo3 {display:block;}");
		document.write("#phoneTabGraphic1 {cursor:pointer;}");
		document.write("#phoneTabGraphic3 {cursor:default;}");
		document.write(".phoneFilterSection {display:none;}");
		document.write("</style>");
	}
	else
	{
		if (location.href.indexOf('tabPhone=4') > 0)
		{
			iTabSelected = 4;
			document.write("<style type=\"text/css\">");
			document.write(".phoneTabInfo1 {display:none;}");
			document.write(".phoneTabInfo4 {display:block;}");
			document.write("#phoneTabGraphic1 {cursor:pointer;}");
			document.write("#phoneTabGraphic4 {cursor:default;}");
			document.write(".phoneFilterSection {display:none;}");
			document.write("</style>");
		}
	}
}

if (location.href.indexOf('prepaid=Y') > 0)
{
	document.write("<style type=\"text/css\">");
	document.write(".newphonePricingContractTab {display:inline; cursor:pointer; text-align:center; background-color:#e3eff0; margin-left:0.5em;}");
	document.write(".newphonePricingPrepaidTab {display:inline; cursor:pointer; text-align:center; background-color:#81AEB5; color:#ffffff; margin-left:0.1em;}");
	document.write(".newphonePricingContractTabContent {padding:0.5em 0.5em 0.5em 0.5em; display:inline; border:1px solid #cccccc; font-weight:bold; background-color:#e3eff0; border-bottom-color:#81AEB5; color:#000000; top:0em; position:relative;}");
	document.write(".newphonePricingPrepaidTabContent {position:relative; padding:0.5em 0.5em 0.5em 0.5em; display:inline; border:1px solid #cccccc; border-bottom-color:#81AEB5; font-weight:bold; top:-0.5em; padding-bottom:1em; background-color:#81AEB5;}");
	document.write(".newphonePricingContractInfo {margin:0.5em 0 0 0; display:none; background-color:#81AEB5;}");
	document.write(".newphonePricingPrepaidInfo {margin:0.5em 0 0 0; display:block; background-color:#81AEB5;}");
	document.write("#standardServiceMessage {display:none;}");
	document.write("#prepaidServiceMessage {display:block;}");
	document.write("</style>");
}

// Function Name: newImage
// Purpose: Procedure for pre-loading images
// Input:	sImg - graphic path
// Output:	none
function newImage(sImg)
{
	if (document.images)
	{
		imgImage = new Image();
		imgImage.src = sImg;
		return imgImage;
	}
}

// Function Name: preloadImages
// Purpose: Invoke the procedure for pre-loading images for each individual tab image.
//			Also, set the Featured phones tab as active if the URL has the appropriate query string
// Input:	none
// Output:	none
function preloadImages()
{
	if (document.images)
	{
		var allPhones = newImage("./../images/allPhones.jpg");
		var allPhones_over = newImage("./../images/allPhones-over.jpg");
		var blackberry_click = newImage("./../images/blackberry-click.jpg");
		var blackberry_over = newImage("./../images/blackberry-over.jpg");
		var winMob_click = newImage("./../images/winMob-click.jpg");
		var winMob_over = newImage("./../images/winMob-over.jpg");
		var featured_click = newImage("./../images/featured-click.jpg");
		var featured_over = newImage("./../images/featured-over.jpg");
	}
	// Check for the featured flag in the URL query string.  If it's there, invoke the procedure to "click" on that tab
	if (document.location.href.indexOf('tabPhone=1') > 0 || document.location.href.indexOf('tabPhone=') < 0){
		swapImage(document.getElementById('phoneTabGraphic1'), '/uscellular/images/allPhones-click.jpg');
		setSelected(document.getElementById('phoneTabGraphic1'), 1);
	}else if (document.location.href.indexOf('tabPhone=2') > 0){
		swapImage(document.getElementById('phoneTabGraphic2'), '/uscellular/images/blackberry-click.jpg');
		setSelected(document.getElementById('phoneTabGraphic2'), 2);
	}else if (document.location.href.indexOf('tabPhone=3') > 0){
		swapImage(document.getElementById('phoneTabGraphic3'), '/uscellular/images/winMob-click.jpg');
		setSelected(document.getElementById('phoneTabGraphic3'), 3);
	}else if (document.location.href.indexOf('tabPhone=4') > 0){
		swapImage(document.getElementById('phoneTabGraphic4'), '/uscellular/images/featured-click.jpg');
		setSelected(document.getElementById('phoneTabGraphic4'), 4);
	}
	
}

// Function Name: swapImage
// Purpose: For the onmouseover and onmouseout procedures.
// Input:	oObj - The image object that needs to be changed
//			sImg - The graphic path for the new image
// Output:	none
function swapImage(oObj, sImg)
{
	if ((document.images) && (oObj.src.indexOf('click') < 0))
	{
		oObj.src = sImg;
	}
}

// Function Name: setSelected
// Purpose: For the onmouseover and onmouseout procedures.
// Input:	oObj - The image object that needs to be changed
//			iNum - The ordinal number for the selected tab
// Output:	none
function setSelected(oObj, iNum)
{
	var iTemp = iTabSelected;
	iTabSelected = iNum;
	
	// Change the image that was clicked to the "selected" graphic
	// The previously selected image needs to be reverted to its "non-selected" form.
	// This image swapping should not occur if the user clicks on an already selected tab or if the phoneTabInfo <div>s haven't yet loaded
	if ((iTemp != iTabSelected) && (document.getElementById('phoneTabGraphic' + iTemp) != null) && (document.getElementById('phoneTabGraphic' + iTabSelected) != null) && (document.getElementById('phoneTabInfo' + iTemp) != null) && (document.getElementById('phoneTabInfo' + iTabSelected) != null))
	{
		document.getElementById('phoneTabGraphic' + iTemp).src = document.getElementById('phoneTabGraphic' + iTemp).src.replace('-click','');
		document.getElementById('phoneTabGraphic' + iTemp).style.cursor = 'pointer';
		document.getElementById('phoneTabGraphic' + iTabSelected).style.cursor = 'default';
		document.getElementById('phoneTabInfo' + iTemp).style.display = 'none';
		document.getElementById('phoneTabInfo' + iTabSelected).style.display = 'block';
	}
	
	// hide/unhide the filter box
	if (iNum > 1)
	{
		if (document.getElementById('phoneFilterSection') != null)
		{
			document.getElementById('phoneFilterSection').style.display = 'none';
		}
	}
	else
	{
		if (document.getElementById('phoneFilterSection') != null)
		{
			document.getElementById('phoneFilterSection').style.display = 'block';
		}
	}
}

// Function Name: pricingOutTab
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function pricingOutTab(oObj)
{
	// Do nothing if the user hovers over the currently selected tab
	if ((oObj.style.backgroundColor == '#ffffff') || (oObj.style.backgroundColor == 'rgb(255, 255, 255)'))
	{
		oObj.style.backgroundColor = '#e3eff0';
	}
}

// Function Name: pricingOverTab
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function pricingOverTab(oObj)
{
	// the first time the tab is hovered over, the backgroundColor is blank
	if (oObj.style.backgroundColor == '')
	{
		// see which pricing radio button has been selected
		if ((oObj.innerHTML.indexOf('Prepaid') >= 0) && (window.location.href.indexOf("prepaid=Y") < 0))
		{
			oObj.style.backgroundColor = '#ffffff';
		}
		else
		{
			if ((oObj.innerHTML.indexOf('Prepaid') < 0) && (window.location.href.indexOf("prepaid=Y") > 0))
			{
				oObj.style.backgroundColor = '#ffffff';
			}
			else
			{
				oObj.style.cursor = 'default';
			}
		}
	}
	else
	{
		if ((oObj.style.backgroundColor == '#e3eff0') || (oObj.style.backgroundColor == 'rgb(227, 239, 240)'))
		{
			oObj.style.backgroundColor = '#ffffff';
		}
		else
		{
			oObj.style.cursor = 'default';
		}
	}
}

// Function Name: setPricingTabSelected
// Purpose: Changes the display of the second set of tabs to acknowledge that the user has clicked on one of the tabs
// Input:	iNum - ordinal number of the selected tab
// Output:	none
function setPricingTabSelected(shown, hidden)
{
	// First, simulate the outTab behavior of the previously selected tab
	var shownTab = document.getElementById(shown);
	var hiddenTab = document.getElementById(hidden);
	
	if ((hiddenTab != null) && (shownTab != null))
	{
		hiddenTab.style.position = 'relative';
		hiddenTab.style.top = '0em';
		hiddenTab.style.paddingBottom = '0.5em';
		hiddenTab.style.color = '#000000';
		hiddenTab.style.backgroundColor = '#e3eff0';
		hiddenTab.style.cursor = 'pointer';
		hiddenTab.style.borderBottomColor = '#cccccc';
		
		shownTab.style.position = 'relative';
		shownTab.style.top = '-0.5em';
		shownTab.style.paddingBottom = '1em';
		shownTab.style.color = '#ffffff';
		shownTab.style.backgroundColor = '#81AEB5';
		shownTab.style.cursor = 'default';
		shownTab.style.borderBottomColor = '#81AEB5';
		
		// The ID can have either one or two digits at the end
		var pattern = /^\d+$/;
		var index = shown.substring(shown.length - 2);
		
		if (!pattern.test(index))
		{
			index = shown.substring(shown.length - 1);
		}
	
		if (shown.indexOf('newphonePricingContract') >= 0)
		{
			document.getElementById('newphonePricingContractInfo' + index).style.display = 'block';
			document.getElementById('newphonePricingPrepaidInfo' + index).style.display = 'none';
		}
		else
		{
			document.getElementById('newphonePricingContractInfo' + index).style.display = 'none';
			document.getElementById('newphonePricingPrepaidInfo' + index).style.display = 'block';
			document.getElementById('newphonePricingPrepaidTab' + index).style.backgroundColor = '#81AEB5';
		}
	}
}

// Function Name: changeMessage
// Purpose: Changes the display of the second set of tabs to acknowledge that the user has clicked on one of the tabs
//			The number 70 is arbitrary based on the maximum number of phones that can appear.  Increase as necessary.
// Input:	theNum - 0 for Standard, 1 for Prepaid
// Output:	none
function changeMessageAndPrices(theNum)
{
	applyFilter();
	
}

function createFilterStr()
{
	var filterStr = "";
	
	// For all checkboxes, simply add a Y as the URL parameter value
	if (document.getElementById('touchscreen') != null)
	{
		if (document.getElementById('touchscreen').checked)
		{
			filterStr += "&touchscreen=Y"
		} 
	}
	if (document.getElementById('keyboard') != null)
	{
		if (document.getElementById('keyboard').checked)
		{
			filterStr += "&keyboard=Y"
		} 
	}
	if (document.getElementById('3G') != null)
	{
		if (document.getElementById('3G').checked)
		{
			filterStr += "&3G=Y"
		} 
	}
	if (document.getElementById('mobile_internet') != null)
	{
		if (document.getElementById('mobile_internet').checked)
		{
			filterStr += "&mobile_internet=Y"
		} 
	}
	if (document.getElementById('video_messaging') != null)
	{
		if (document.getElementById('video_messaging').checked)
		{
			filterStr += "&video_messaging=Y"
		} 
	}
	if (document.getElementById('MP3') != null)
	{
		if (document.getElementById('MP3').checked)
		{
			filterStr += "&MP3=Y"
		} 
	}
	if (document.getElementById('wifi') != null)
	{
		if (document.getElementById('wifi').checked)
		{
			filterStr += "&wifi=Y"
		} 
	}
	if (document.getElementById('bluetooth') != null)
	{
		if (document.getElementById('bluetooth').checked)
		{
			filterStr += "&bluetooth=Y"
		} 
	}
	if (document.getElementById('smartphone') != null)
	{
		if (document.getElementById('smartphone').checked)
		{
			filterStr += "&smartphone=Y"
		} 
	}
	
	// for all select boxes, add the option value as the URL parameter value
	if (document.getElementById('phone_style') != null)
	{
		if (document.getElementById('phone_style').options[document.getElementById('phone_style').selectedIndex].value != "0")
		{
			filterStr += "&phone_style=" + document.getElementById('phone_style').options[document.getElementById('phone_style').selectedIndex].value;
		} 
	}
	if (document.getElementById('manufacturer') != null)
	{
		if (document.getElementById('manufacturer').options[document.getElementById('manufacturer').selectedIndex].value != "0")
		{
			filterStr += "&manufacturer=" + document.getElementById('manufacturer').options[document.getElementById('manufacturer').selectedIndex].value;
		} 
	}
	if (document.getElementById('camera') != null)
	{
		var theValue = document.getElementById('camera').options[document.getElementById('camera').selectedIndex].value;
		if (theValue != "-1")
		{
			if (theValue.indexOf(",") > 0)
			{
				filterStr += "&cameraLow=" + theValue.substring(0, theValue.indexOf(",")) + "&cameraHigh=" + theValue.substring(theValue.indexOf(",") + 1);
			}
			else
			{
				filterStr += "&cameraLow=" + theValue;
			}
		} 
	}
	if (document.getElementById('price') != null)
	{
		var theValue = document.getElementById('price').options[document.getElementById('price').selectedIndex].value;
		if (theValue != "0")
		{
			if (theValue.indexOf(",") > 0)
			{
				filterStr += "&priceLow=" + theValue.substring(0, theValue.indexOf(",")) + "&priceHigh=" + theValue.substring(theValue.indexOf(",") + 1);
			}
			else
			{
				filterStr += "&priceLow=" + theValue;
			}
		} 
	}
	
	return filterStr;
}

function createPrepaidStr()
{
	var prepaidStr = "";
	
	if (document.getElementById('serviceChoice0') != null)
	{
		if (document.getElementById('serviceChoice0').checked)
		{
			prepaidStr = "prepaid=N";
		}
		else
		{
			prepaidStr = "prepaid=Y";
		}
	}
	else
	{
		if (window.location.href.indexOf("prepaid=Y"))
		{
			prepaidStr = "prepaid=Y";
		}
		else
		{
			prepaidStr = "prepaid=N";
		}
	}
	
	return prepaidStr;
}

function createSortStr()
{
	var sortStr = "";
	
	if (document.getElementById('phoneSorter') != null)
	{
		sortStr = "&sort=" + document.getElementById('phoneSorter').options[document.getElementById('phoneSorter').selectedIndex].value;
	}
	
	return sortStr;
}

// Function Name: applyFilter
// Purpose: Look at all input elements in the filter sidebar and construct the appropriate URL query string to refresh the page
// Input:	iNum - flag to determine if the Clear Filter button was pressed
// Output:	none
function applyFilter(iNum)
{
	var prepaidStr = "";
	var sortStr = "";
	var str = "";
	var filterStr = "";
	var skuTypeStr="";
	
	prepaidStr = createPrepaidStr();
	sortStr = createSortStr();
	//str = createFilterStr();
	 
	if ((str == "") || ((iNum != null) && (iNum == 1)))
	{
		filterStr = "";
	}
	else
	{
		filterStr = "&filter=Y" + str;
	}
		
	showWait();
	//document.getElementById('phoneSorter').style.display = 'none';
	if (window.location.href.indexOf("?") > 0)
	{
		// if there has already been a filter or sort, overwrite what was there previously
		if (window.location.href.indexOf("prepaid=") > 0)
		{
			window.location.href = window.location.href.substring(0, window.location.href.indexOf("prepaid=")) + prepaidStr + skuTypeStr;
		}
		else
		{
			if (window.location.href.indexOf("tabPhone=") > 0)
			{
				window.location.href = window.location.href.substring(0, window.location.href.indexOf("tabPhone=")) + prepaidStr + skuTypeStr;
			}
			else
			{
				window.location.href = window.location.href + "&" + prepaidStr + skuTypeStr;
			}
		}	
	}
	else
	{
		window.location.href = window.location.href + "?" + prepaidStr + skuTypeStr;
	}
}

// Function Name: clearFilter
// Purpose: Refresh the page, removing everything at the end of the query string beginning with filter=Y
// Input:	none
// Output:	none
function clearFilter()
{
	applyFilter(1);
}

// Function Name: applySort
// Purpose: Refresh the page, sorting by the selected option
// Input:	none
// Output:	none
function applySort()
{
	applyFilter();
}

function showDescription(e, sStr)
{
	var IE = document.all ? true : false;
	
	if (!IE)
	{
		document.getElementById(sStr).style.top = (e.pageY - 70) + 'px';
		document.getElementById(sStr).style.left = (e.pageX + 10) + 'px';
		document.getElementById(sStr).style.display = 'block';
	}
	else
	{
		document.getElementById(sStr).style.top = (window.event.clientY + document.body.scrollTop - 70) + 'px';
		document.getElementById(sStr).style.left = (window.event.clientX + document.body.scrollLeft + 10) + 'px';
		document.getElementById(sStr).style.display = 'block';
	}
}

function removeDescription(sStr)
{
	document.getElementById(sStr).style.display = 'none';
}