// JavaScript Document
// Author: Mike Lipman
// Date: 7/9/2008

var iTabSelected = 1;	// Global variable captures the current tab selected
var iTabSecondSelected = 1;	// Global variable captures the current tab selected for the second set of tabs
var numTabs = 5;		// Global variable captures the number of tabs
var iPreviewTop = 0;

// Function Name: buildAppList
// Purpose: Based on the value of the option selected, the specific application array is read to display the appropriate information
// Input:	oObj - The select object that has an option selected
//			iTab - The ordinal number of the Tab to denote the category of the application
// Output:	none
function buildAppList(oObj,iTab)
{
    
    var catid=0;
	var sSelectedOptVal=""
	if(oObj != null)
	{
	catid=oObj.options[oObj.selectedIndex].id;
	sSelectedOptVal = oObj.options[oObj.selectedIndex].value;
	}else{
	sSelectedOptVal=iTab-1;
	}
	var iTokenIndex = sSelectedOptVal.indexOf(",");
	var iCat = -1;
	var iSubCat = -1;
	var iMod = -1;
	var sDivStr = "<table class=\"eeAppsApplicationTable\">";	// table that will make up the entirety of the <div>
	var list1 = "<ul class=\"standardList eeAppsApplicationList\">";	// first column of the table
	var list2 = "<ul class=\"standardList eeAppsApplicationList\">";	// second column of the table
	var list3 = "<ul class=\"standardList eeAppsApplicationList\">";	// third column of the table
	var bEmpty = true;
	var curArr =new Array();
	
	// First, remove the image (if any) that has previously been previewed
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).innerHTML = 'Hover your mouse over an Application for a Preview';
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).style.display = 'block';
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).style.height = 'auto';
	document.getElementById('eeAppsPreviewViewDetails' + iTab).style.display = 'none';
	document.getElementById('eeAppsPreviewViewDetails' + iTab).style.height = '0px';
	document.getElementById('eeAppsPreviewImage' + iTab).style.display = 'none';
	
	// iTokenIndex will be less than zero only if the 'All' option is selected in a given tab
	if (iTokenIndex > 0)
	{
		iCat = sSelectedOptVal.substring(0, iTokenIndex);
		//alert("iCat"+iCat);
		iSubCat = sSelectedOptVal.substring(iTokenIndex + 1);
		//alert("iSubCat"+iSubCat);
	}
	else
	{
		iCat = sSelectedOptVal;
	}
	
	// Case for future use if a blank option is needed
	if (iCat == -1)
	{
		document.getElementById('eeAppsApplicationSection' + iTab).style.display = 'none';
		document.getElementById('eeAppsApplications' + iTab).innerHTML = '';
	}
	else
	{
		// iSubCat will be greater than -1 if a sub-category has been selected (i.e. a non-'All' option)
		if (iSubCat > -1)
		{
			//iSubCat = (iSubCat * 1) + 1;	// ensure javascript interprets iSubCat as a number and add one
			//alert("catArr Size --> "+catArr.length);
			//alert("catArr Content --> "+catArr);
			if(catArr[iCat][iSubCat])
			{
			curArr = catArr[iCat][iSubCat];	
			}
			else
			{
			bEmpty=true;
			}// The 'All' option is in the 0th sub-category position
			//alert("curArr Length... --> "+cat0sub0);
			//alert("curArr Cont... --> "+curArr);
			
		}
		else
		{
			curArr = catArr[iCat][catArr[iCat].length -1];
		}
			
		// Traverse the sub-category array and parse out the name, ID, and picture link of each app to create a list item
		for (i = 0; i < curArr.length; i++)
		{
			// The modulo operator is used to ensure that all 3 lists have a proportionate number of items
			bEmpty = false;
			iMod = i % 3;
			//sName = curArr[i].substring(0, curArr[i].indexOf(";"));
			//iNum = curArr[i].substring((curArr[i].indexOf(";") + 1),curArr[i].lastIndexOf(";"));
			//sPic = curArr[i].substring(curArr[i].lastIndexOf(";") + 1);
			//alert(curArr[i]);
			if (iMod == 0)
			{
				list1 = list1 + curArr[i];
			}
			else
			{
				if (iMod == 1)
				{
					list2 = list2 + curArr[i];
				}
				else
				{
					if (iMod == 2)
					{
						list3 = list3 +curArr[i];
					}
				}
			}
		}
	
		// By the end of the loops, all 3 lists will be populated and as evenly distributed with items as possible
		if (bEmpty)
		{
			sDivStr = sDivStr + "<tr><td>There are no applications under this category</td></tr></table>";
		}
		else
		{
			list1 = list1 + "</ul>";
			list2 = list2 + "</ul>";
			list3 = list3 + "</ul>";		
			sDivStr = sDivStr + "<tr><td>" + list1 + "</td><td>" + list2 + "</td><td>" + list3 + "</td></tr></table>";
		}

		document.getElementById('eeAppsApplicationSection' + iTab).style.display = 'block';
		
		document.getElementById('eeAppsApplications' + iTab).innerHTML =sDivStr;
	}
}

// Function Name: showImage
// Purpose: Show the preview image as the user hovers over a list item
// Input:	sStr - The image name
//			iNum - Application ID
//			iTab - The ordinal number of the Tab to denote the category of the application
// Output:	none
function showImage(sStr, iNum, iTab, pCatId)
{
    
	// The first step displays a "processing" message as the image is downloaded
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).innerHTML = 'Generating Preview...';
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).style.display = 'block';
	document.getElementById('eeAppsPreviewContentVerbiage' + iTab).style.height = 'auto';
	document.getElementById('eeAppsPreviewViewDetails' + iTab).style.display = 'none';
	document.getElementById('eeAppsPreviewViewDetails' + iTab).style.height = '0px';
	document.getElementById('eeAppsPreviewImage' + iTab).style.display = 'none';
	
	// The second step calls the server to retrieve the image and sets the links as appropriate
	document.getElementById('eeAppsPreviewImageLink' + iTab).href = '/uscellular/data/apps/gameDetail.jsp?prodId='+ iNum +'&parentCatId='+pCatId;
	document.getElementById('eeAppsPreviewViewDetailsLink' + iTab).href = '/uscellular/data/apps/gameDetail.jsp?prodId=' + iNum +'&parentCatId='+pCatId;
	document.getElementById('eeAppsPreviewImage' + iTab).src =  sStr;
}

// Function Name: removeVerbiage
// Purpose: Called immeditely after the preview image loads, it removes the "processing" message and displays the image
// Input:	iTab - The ordinal number of the Tab to denote the category of the application
// Output:	none
function removeVerbiage(iTab)
{
	// If the "processing" message is displaying, remove it
	if (document.getElementById('eeAppsPreviewContentVerbiage' + iTab).innerHTML.indexOf('Generating Preview') > -1)
	{
		document.getElementById('eeAppsPreviewImage' + iTab).style.display = 'block';
		document.getElementById('eeAppsPreviewContentVerbiage' + iTab).innerHTML = '';
		document.getElementById('eeAppsPreviewContentVerbiage' + iTab).style.display = 'none';
	}
}

// Function Name: overTab
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function overTab(oObj)
{
	var sPage = location.href;
	// Do nothing if the user hovers over the currently selected tab
	if (oObj.id.indexOf(iTabSelected) < 0)
	{
		oObj.style.cursor = 'pointer';
		
		// Show different colors based on the page
		if (sPage.indexOf('appsToPhone') > 0)
		{
			oObj.style.backgroundColor = '#fabe23';
		}
		else
		{
			if (sPage.indexOf('freeApp') > 0)
			{
				oObj.style.backgroundColor = '#81AEB5';
				oObj.style.color = '#ffffff';
			}
			else
			{
				if (sPage.indexOf('newRelease') > 0)
				{
					oObj.style.backgroundColor = '#cdcf4f';
				}
				else
				{
					if (sPage.indexOf('business') > 0)
					{
						oObj.style.backgroundColor = '#d7ece5';
					}
					else
					{
						oObj.style.backgroundColor = '#cdcf4f';
					}
				}
			}
		}
	}
	else
	{
		oObj.style.cursor = 'default';
	}
}

// Function Name: outTab
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function outTab(oObj)
{
	// Do nothing if the user hovers over the currently selected tab
	if (oObj.id.indexOf(iTabSelected) < 0)
	{
		oObj.style.backgroundColor = '#ffffff';
		
		if (location.href.indexOf('freeApp') > 0)
		{
			oObj.style.color = '#000000';
		}
	}
}

// Function Name: setTabSelected
// Purpose: Changes the display of the tabs to acknowledge that the user has clicked on one of the tabs
// Input:	iNum - ordinal number of the selected tab
// Output:	none
function setTabSelected(iNum)
{
	var iTemp = iTabSelected;
	var sColor = '';
	iTabSelected = iNum;
	
	// First, simulate the outTab behavior of the previously selected tab
	outTab(document.getElementById('eeTabContent' + iTemp));
	document.getElementById('eeTabContent' + iTemp).style.borderBottomColor = '#cccccc';
	document.getElementById('eeTabContent' + iTemp).style.top = '0em';
	document.getElementById('eeTabContent' + iTemp).style.paddingBottom = '0.5em';
	
	// set the styling of the currently selected tab to indicate that it is selected
	if (location.href.indexOf('appsToPhone') > 0)
	{
		sColor = '#ffe6a8';
	}
	else
	{
		if (location.href.indexOf('freeApp') > 0)
		{
			sColor = '#e3eff0';
		}
		else
		{
			if (location.href.indexOf('business') > 0)
			{
				sColor = '#139b8b';
			}
			else
			{
				sColor = '#eeefce';
			}
		}
	}
	document.getElementById('eeTabContent' + iTabSelected).style.borderBottomColor = sColor;
	document.getElementById('eeTabContent' + iTabSelected).style.backgroundColor = sColor;
	document.getElementById('eeTabContent' + iTabSelected).style.top = '-0.5em';
	document.getElementById('eeTabContent' + iTabSelected).style.paddingBottom = '1em';
	
	if (location.href.indexOf('business') > 0)
	{
		document.getElementById('eeTabContent' + iTabSelected).style.color = '#ffffff';
		document.getElementById('eeTabContent' + iTemp).style.color = '#000000';
	}
	
	if (location.href.indexOf('freeApp') > 0)
	{
		document.getElementById('eeTabContent' + iTabSelected).style.color = '#000000';
		document.getElementById('eeTabContent' + iTemp).style.color = '#000000';
	}
	
	// Swap the activated tab content
	document.getElementById('eeTabInfo' + iTemp).style.display = 'none';
	document.getElementById('eeTabInfo' + iTabSelected).style.display = 'block';
	
	iPreviewTop = 0;
	obj = document.getElementById('eeAppsPreview' + iTabSelected);
}

// Function Name: setTabSecondSelected
// 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 setTabSecondSelected(iNum)
{
	var iTemp = iTabSecondSelected;
	var sColor = '';
	iTabSecondSelected = iNum;
	
	// First, simulate the outTab behavior of the previously selected tab
	outTabSecond(document.getElementById('eeTabSecondContent' + iTemp));
	document.getElementById('eeTabSecondContent' + iTemp).style.borderBottomColor = '#cccccc';
	document.getElementById('eeTabSecondContent' + iTemp).style.top = '0em';
	document.getElementById('eeTabSecondContent' + iTemp).style.paddingBottom = '0.5em';
	document.getElementById('eeTabSecondContent' + iTemp).style.color = '#000000';
	
	document.getElementById('eeTabSecondContent' + iTabSecondSelected).style.borderBottomColor = '#139b8b';
	document.getElementById('eeTabSecondContent' + iTabSecondSelected).style.backgroundColor = '#139b8b';
	document.getElementById('eeTabSecondContent' + iTabSecondSelected).style.top = '-0.5em';
	document.getElementById('eeTabSecondContent' + iTabSecondSelected).style.paddingBottom = '1em';
	document.getElementById('eeTabSecondContent' + iTabSecondSelected).style.color = '#ffffff';
	
	document.getElementById('eeTabSecondInfo' + iTemp).style.display = 'none';
	document.getElementById('eeTabSecondInfo' + iTabSecondSelected).style.display = 'block';
}

// Function Name: outTabSecond
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function outTabSecond(oObj)
{
	// Do nothing if the user hovers over the currently selected tab
	if (oObj.id.indexOf(iTabSecondSelected) < 0)
	{
		oObj.style.backgroundColor = '#ffffff';
	}
}

// Function Name: overTabSecond
// Purpose: Change the background color of the tab
// Input:	oObj - tab in the table
// Output:	none
function overTabSecond(oObj)
{
	var sPage = location.href;
	// Do nothing if the user hovers over the currently selected tab
	if (oObj.id.indexOf(iTabSecondSelected) < 0)
	{
		oObj.style.cursor = 'pointer';
		oObj.style.backgroundColor = '#d7ece5';
	}
	else
	{
		oObj.style.cursor = 'default';
	}
}

window.onscroll = function test() 
{
	if (document.getElementById('eeTabInfo1') != null)
	{
		if (document.getElementById('eeTabInfo1').style.display != 'none')
		{
			obj = document.getElementById('eeAppsPreview1');
		}
		
		if ((iPreviewTop == 0) && (obj != null))
		{
			var curtop = 0;
			var oTemp = obj;
			
			// by Peter-Paul Koch & Alex Tingle
			if (obj.offsetParent)
			{
				while(1)
				{
				  curtop += obj.offsetTop;
				  if (!obj.offsetParent)
				  {
					  break;
				  }
				  obj = obj.offsetParent;
				}
			}
			else
			{
				if (obj.y)
				{
					curtop += obj.y;
				}
			}
			
			iPreviewTop = curtop;
			obj = oTemp;
		}
		else
		{
			if (obj != null)
			{
				// There are serious compatibility issues in deriving the vertical middle of the browser
				// The innerWidth property is valid only for FF and the like, while IE has its own version called clientWidth
				// Further complicating matters is an IE6/7 difference which requires the definition of the iebody variable
				var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
				var iPosY = 0;
				
				if (window.innerWidth)
				{
					iPosY = window.pageYOffset;
				}
				else
				{
					iPosY = iebody.scrollTop;
				}
				
				if (iPosY > iPreviewTop)
				{
					obj.style.top = (iPosY - iPreviewTop + 10) + 'px';
				}
				
				else
				{
					obj.style.top = '0px';
				}
			}
		}
	}
}