//Gets the text needed for the label when the value of the list changes
//Param: listRef = A reference to the list that fired this event
//Param: catSeperator = the character seperator for categories.
function GetCurrentCategoryLabelText(listRef, catSeperator){
	if (listRef.selectedIndex == 0)
	{ 
		return "";
	}
	
	var allText = "";
	
	var selectedCatId = listRef.value;
	
	while (selectedCatId != 0){
	
		for (var i = 0; i < categoriesArray.length; i++)
		{
			if (categoriesArray[i][0] == selectedCatId)
			{
				allText = categoriesArray[i][1] + catSeperator + allText;
				
				//now get the subcategory of this category
				selectedCatId = categoriesArray[i][2]
			}
		}
	}
	
	return allText;
}//end of GetCurrentCategoryLabelText


//Sets the text of the label when the value of the list changes
//Param: listRef = A reference to the list that fired this event
//Param: labelId = The unique id to set the text for
//Param: catSeperator = the character seperator for categories.
function SetCurrentCategoryLabel(listRef, labelId, catSeperator){
	document.all[labelId].innerText = GetCurrentCategoryLabelText(listRef, catSeperator);
}//end of SetCurrentCategoryLabel



//changes the category image to the new category id
//PARAM imgName = The referenced image unique id
//PARAM listRef = a reference to the list that caused the event
function changeCategoryImageSource(imgName, listRef){

	if (listRef.selectedIndex == 0) return;
	
	//get a reference to the image
	var imgRef = document.images[imgName];
	
	if (!imgRef) return;
	
	var imgSource = imgRef.src.toLowerCase();
	
	//get the img source, stripping the old category id:
	imgSource = imgSource.substring(0, imgSource.indexOf("categoryid=") + 11);
	
	imgRef.src = imgSource + listRef.value;
	
}//end of changeCategoryImageSource




//changes the product image to the new productId and ImageName. NOTE: the productId
//part of the dynamic image is assumed to be set
//PARAM imgName = The referenced image unique id
//PARAM fileName = the filename of the image
function changeProductImageSource(imgName, fileName){

	//get a reference to the image
	var imgRef = document.images[imgName];
	
	if (!imgRef) return;
	
	var imgSource = imgRef.src.toLowerCase();
	
	//get the img source, stripping the old category id:
	var imgSourceLasPart = imgSource.substring(imgSource.indexOf("productid=") + 10, imgSource.length);
	
	imgSource = imgSource.substring(0, imgSource.indexOf("productid=") + 10);
	
	if (imgSourceLasPart.indexOf("&") > -1)
		imgSource +=  imgSourceLasPart.substring(0, imgSourceLasPart.indexOf("&"));
	else
		imgSource += imgSourceLasPart;
	
	
	imgRef.src = imgSource + "&imageName=" + fileName;
	
}//end of changeProductImageSource


/******This is functions and properties for the ProductImages page*****/

//this is a global reference to the index of the array of images when paging
//through images
var imgArrIndex = 0;

///In the prouduct images page, this displays the next image in the 
//client registered array
function ViewNextImage(){

	if (allImgsArray.length == 0) return;
	imgArrIndex++;
	
	imgArrIndex = (imgArrIndex >= allImgsArray.length)? 0: imgArrIndex;
	var fileName = allImgsArray[imgArrIndex];
	
	changeProductImageSource(prodImgName, fileName);
	ShowCurrentViewedImageMessage();
}//end of ViewNextImage


///In the prouduct images page, this displays the previous image in the 
//client registered array
function ViewPreviousImage(){
	if (allImgsArray.length == 0) return;
	imgArrIndex--;
	
	imgArrIndex = (imgArrIndex < 0)? allImgsArray.length - 1: imgArrIndex;
	var fileName = allImgsArray[imgArrIndex];
	changeProductImageSource(prodImgName, fileName);
	ShowCurrentViewedImageMessage();
}//end of ViewPreviousImage


//Displays a message for the currently viewed image
function ShowCurrentViewedImageMessage(){
	//get a reference to the label
	var lblRef;
	if (document.all)
	{
		lblRef = document.all["lblMessage"];
	}else if (document.getElementById)
	{
		lblRef = document.getElementById("lblMessage");
	}


	if (lblRef)
	{
		lblRef.innerHTML = "Viewing image " + (imgArrIndex + 1) + " out of ";
		
		var totalImgs = allImgsArray.length;
		
		lblRef.innerHTML += totalImgs;
		
		if (totalImgs > 1)
			lblRef.innerHTML += " images";
		else
			lblRef.innerHTML += " image";
	}
}//end of ShowCurrentViewedImageMessage

///Global variables to resize the image window to when a new image is loaded
var newWidth = 0;
var newHeight = 0;
//global variable to indicate how much it should be incremented by
var INCREMENT_SPEED = 30;


//Resizes the browser window when a product image is changed and when it first loads.
//THIS WORKS IN IE 5+ ONLY
function CallResizeImageWindow()
{
	///get a reference to the containing table:
	var tblRef = document.all["imageTable"];
	
	//get the height and width and add extra space to take padding into consideration
	newWidth = tblRef.offsetWidth + 30;
	newHeight = tblRef.offsetHeight + 50;
	
	IncrementImageWindowSize();
}//end of CallResizeImageWindow


//Resizes the browser window when a product image is changed and when it first loads after about 30 seconds.
//THIS WORKS IN IE 5+ ONLY
function ResizeImageWindow(){
	setTimeout(CallResizeImageWindow, 200);
}//end of ResizeImageWindow



//When the ResizeImageWindow is called, this is then recursively called until the
//window is sized to the size its suppose to be.
function IncrementImageWindowSize()
{
	var currentWinHeight = document.body.offsetHeight + 30;
	var currentWinWidth = document.body.offsetWidth + 10;
	
	
	currentWinWidth = (newWidth > currentWinWidth)?currentWinWidth + INCREMENT_SPEED: currentWinWidth - INCREMENT_SPEED;
		
	currentWinHeight = (newHeight > currentWinHeight)?currentWinHeight + INCREMENT_SPEED: currentWinHeight - INCREMENT_SPEED;

	
	
	currentWinWidth = (Math.abs(newWidth - currentWinWidth) <= INCREMENT_SPEED + 1)?newWidth: currentWinWidth;
		
	currentWinHeight = (Math.abs(newHeight - currentWinHeight) <= INCREMENT_SPEED + 1)?newHeight: currentWinHeight;
	
	
	//now do it based on 
	
	window.resizeTo(currentWinWidth, currentWinHeight);
	
	var moveX = (screen.availWidth - currentWinWidth) / 2;
	var moveY = (screen.availHeight - currentWinHeight) / 2;
		
	if (currentWinWidth == newWidth && currentWinHeight == newHeight){
		
		//check if the window is too long. if it is, then it needs to show scrollbars and 
		//to be resized
		if (moveY < 10)
		{
			document.body.scroll = "yes";
			window.resizeTo(currentWinWidth, screen.availHeight - 10);
			moveY = 0;
		}else{
			document.body.scroll = "no";
		}
		window.moveTo(moveX, moveY);
	}else{
		
		window.moveTo(moveX, moveY);
		
		window.setTimeout("IncrementImageWindowSize()", 10);
	}
	
}


/******These are the functions for the ProductDetail page when a visitor is viewing a single product*****/

//changes the labels of prices based on the chosen option in the dropdown list when it changes.
//PARAM lstRef = A reference to the list that caused the change event
//PARAM arrayIndexName = The named index of the array where to get the array of productOption objects.
//	 The arrayName will be "optionsArray" so to get the array for this option group it will be 
//	 optionsArray[arrayIndexName]
//PARAM listPriceId = the unique ID of the span that contains the list price. May be null after trying
//	 to get the reference
//PARAM priceId = the unique ID of the span that contains the actual price
function ChangeProductPriceDisplayOnOptionListChanged(lstRef, arrayIndexName, listPriceId, priceId)
{
	//get a reference to the array that will contain all the options
	var arrayRef = optionsArray[arrayIndexName];
	
	var listPriceRef;
	var priceRef;
	
	if (document.all)
	{
		listPriceRef = document.all[listPriceId];
		priceRef = document.all[priceId];
	}
	else if (document.getElementById)
	{
		listPriceRef = document.getElementById(listPriceId);
		priceRef = document.getElementById(priceId);
	}
	else
	{
		return;
	}
	
	var chosenOption;
	
	//loop through the array  to get a reference to the chosen option:
	for (i = 0; i < arrayRef.length; i++)
	{
		if (lstRef.value == arrayRef[i].optionId)
		{
			chosenOption = arrayRef[i];
			break;
		}
	}
	
	
	if (listPriceRef) listPriceRef.innerHTML = chosenOption.listPrice; 
	priceRef.innerHTML = chosenOption.productPrice; 
}//end of ChangeProductPriceDisplayOnOptionListChanged




//changes the labels of prices based on the chosen option in the dropdown list when it changes.
//PARAM lstRef = A reference to the list that caused the change event
//PARAM arrayIndexName = The named index of the array where to get the array of productImage objects.
//	 The arrayName will be "imagesOptArray" so to get the array for this images it will be 
//	 imagesOptArray[arrayIndexName]
//PARAM imgId = the unique ID of the image that will get changed
function ChangeProductImageOnOptionListChanged(lstRef, arrayIndexName, imgId)
{
	//get a reference to the array that will contain all the images
	var arrayRef = imagesOptArray[arrayIndexName];
	
	//loop through the array  to get a reference to the chosen option:
	for (i = 0; i < arrayRef.length; i++)
	{
		if (lstRef.value == arrayRef[i].optionId)
		{
			changeProductImageSource(imgId, arrayRef[i].name);
			break;
		}
	}
	
}//end of ChangeProductImageOnOptionListChanged




/******This is to change and restore the styles of the categories and products tables on mouse over*****/

//changes the table style
//PARAM tableRef = A reference to the table or a table row
//PARAM whichClass = The css class to change this table's cssClass to
function changeTableStyle(tableRef, whichClass){

	if (tableRef)
	{
		tableRef.className = whichClass;
	}
}//end of changeCategoryTableStyle


//restores the table style
//PARAM tableRef = A reference to the table or a table row
//PARAM whichClass = The css class to restore this table's cssClass to
function restoreTableStyle(tableRef, whichClass){
	if (tableRef)
	{
		tableRef.className = whichClass;
	}
}//end of restoreCategoryTableStyle






/******These are the functions for the Members Payment Option page*****/

//toggles the visiblility of the table and button to select a payment or select/add a credit card
//to their cart
//PARAM lstRef = A reference to the list that caused the change event
//PARAM tblId = The unique Id of the table to toggle the display
function TogglePaymentOptionVisibilityOnListChanged(lstRef, tblId)
{
	//get a reference to the Table
	var tblRef = document.all[tblId];
	//get a reference to the button div container that will allow the user to select
	//a payment option other than a credit card. The id should always be "divBtnSelectPayment"
	var divRef = document.all["divBtnSelectPayment"];
	
	
	if (lstRef.value == "Credit Card")
	{
		tblRef.style.display = "block";
		divRef.style.display = "none";
	}
	else if (lstRef.selectedIndex == 0)
	{
		tblRef.style.display = "none";
		divRef.style.display = "none";
	}
	else
	{
		tblRef.style.display = "none";
		divRef.style.display = "block";
	}
}//end of TogglePaymentOptionVisibilityOnListChanged




/******These are the functions for the Cart summary page when the visitor is going to place their order*****/

//toggles the visiblility of the cart controls and displays the processing message
//PARAM orderDivId = A reference to the list that caused the change event
//PARAM processingDivId = The unique Id of the table to toggle the display
function MakeCartDisplayInvisibleAndShowProcessingMessage(orderDivId, processingDivId)
{
	if (!document.all) return;
	
	var orderDivRef = document.all[orderDivId];
	var processingDivRef = document.all[processingDivId];
	
	if (!orderDivRef || !processingDivRef) return;
	
	if (orderDivRef.style)
		orderDivRef.style.display = "none";
		
	if (processingDivRef.style)
		processingDivRef.style.display = "block";
}//end of MakeCartDisplayInvisibleAndShowProcessingMessage