/***************************
* Copyright (c) GrocerySavings.ca
* All Rights Reserved.
*
* Author: Ben Cho
* Website: grocerysavings.ca, localgrocerydeals.com
* CopyRight: 2007

** Functions responsible for creating displays (html code) and handling mouse over actions
***************************/

	// function for implementing drop down effect by finding a se
	sfHover = function() 
	{
		var domDropDown = document.getElementById("navDropDown");
		if (domDropDown != null)
		{

			var sfEls = domDropDown.getElementsByTagName("LI");
			if (sfEls != null)
			{
				for (var i=0; i<sfEls.length; i++) 
				{
					sfEls[i].onmouseover=function() 
					{
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() 
					{
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);


	// setup rollover images
	if (document.images)
	{
		/****************************************************
		** images for ui when not logged in
		****************************************************/

		// on is when the mouse is over image so change the image accordingly
		// off is when the mouse is not over image so change the image accordingly
		pic1on = new Image(50, 23);
		pic1on.src = "images/homeClick.gif";

		pic1off = new Image(50, 23);
		pic1off.src = "images/home.gif";

		pic2on = new Image(100, 23);
		pic2on.src = "images/registerClick.gif";

		pic2off = new Image(100, 23);
		pic2off.src = "images/register.gif";
/*
		pic3on = new Image(100, 23);
		pic3on.src = "images/whyJoinClick.gif";

		pic3off = new Image(100, 23);
		pic3off.src = "images/whyJoin.gif";
*/
		picWhyJoinon = new Image(100, 23);
		picWhyJoinon.src = "images/whyJoinClick.gif";

		picWhyJoinoff = new Image(100, 23);
		picWhyJoinoff.src = "images/whyJoin.gif";

		pic4on = new Image(100, 23);
		pic4on.src = "images/helpOptionClick.gif";

		pic4off = new Image(100, 23);
		pic4off.src = "images/helpOption.gif";

		pic5on = new Image(100, 23);
		pic5on.src = "images/forumClick.gif";

		pic5off = new Image(100, 23);
		pic5off.src = "images/forum.gif";

		pic6on = new Image(116, 23);
		pic6on.src = "images/contactClick.gif";

		pic6off = new Image(116, 23);
		pic6off.src = "images/contact.gif";

		picAboutUson = new Image(100, 23);
		picAboutUson.src = "images/aboutClick.gif";

		picAboutUsoff = new Image(100, 23);
		picAboutUsoff.src = "images/about.gif";

		picSiteMapon = new Image(116, 23);
		picSiteMapon.src = "images/siteMapClick.gif";

		picSiteMapoff = new Image(116, 23);
		picSiteMapoff.src = "images/siteMap.gif";

		picTermsOfUseon = new Image(150, 23);
		picTermsOfUseon.src = "images/termsOfUseClick.gif";

		picTermsOfUseoff = new Image(150, 23);
		picTermsOfUseoff.src = "images/termsOfUse.gif";

		picPrivacyPolicyon = new Image(150, 23);
		picPrivacyPolicyon.src = "images/privacyPolicyClick.gif";

		picPrivacyPolicyoff = new Image(150, 23);
		picPrivacyPolicyoff.src = "images/privacyPolicy.gif";

		picAdvertiseoff = new Image(100, 20);
		picAdvertiseoff.src = "images/advertise.gif";

		picAdvertiseon = new Image(100, 20);
		picAdvertiseon.src = "images/advertiseClick.gif";


		// go image for logging into member account
		goon = new Image(120, 23);
		goon.src = "images/loginGrocerySavingsClick.gif";

		gooff = new Image(120, 23);
		gooff.src = "images/loginGrocerySavings.gif";

		helpon = new Image(100, 25);
		helpon.src = "images/helpClick.gif";

		helpoff = new Image(100, 25);
		helpoff.src = "images/help.gif";

		/****************************************************
		** images for members once they've logged in
		****************************************************/
/*
		picMyAccounton = new Image(160, 25);
		picMyAccounton.src = "images/myAccountClick.gif";

		picMyAccountoff = new Image(160, 25);
		picMyAccountoff.src = "images/myAccount.gif";

		picemailProfileon = new Image(160, 25);
		picemailProfileon.src = "images/emailProfileClick.gif";

		picemailProfileoff = new Image(160, 25);
		picemailProfileoff.src = "images/emailProfile.gif";

		piclogouton = new Image(160, 25);
		piclogouton.src = "images/logoutClick.gif";

		piclogoutoff = new Image(160, 25);
		piclogoutoff.src = "images/logout.gif";	
*/
	}
	
	// given the image name, change the image when mouse is over
	function mouseOver(imageName)
	{
		if (document.images)
		{
			imgOn = eval(imageName + "on.src");
			document[imageName].src = imgOn;
		}
	}

	// given the image name, revert back the image when mouse is not over
	function mouseOut(imageName)
	{
		if (document.images)
		{
			imgOff = eval(imageName + "off.src");
			document[imageName].src = imgOff;
		}
	}

	function formMouseOver(image)
	{
		var element = document.getElementById(image);
		var imagePath = "images/" + image.replace("@", "") + "Click.gif";
		element.src = imagePath;
	}

	function formMouseOut(image)
	{
		var element = document.getElementById(image);
		var imagePath = "images/" + image.replace("@", "") + ".gif";
		element.src = imagePath;
	}

	// function specifically for the help button
	function helpOver(name)
	{
		if (document.images)
		{
			document[name].src = helpon.src;
		}
	}

	function helpOut(name)
	{
		if (document.images)
		{
			document[name].src = helpoff.src;
		}
	}

	// change color of the text, used for changing color when mouse over a link
	function changeColorOn(name)
	{
		var darkOrange = "#ab4800";
		// get a reference to the text
		var pTag = window.document.getElementById(name);
		// change the color of the text accordingly
		pTag.style.color= darkOrange;
	}

	// revert back the color of the text
	function changeColorOff(name)
	{
		var darkGreen = "#002803";
		// get a reference to the text
		var pTag = window.document.getElementById(name);
		// change the color of the text accordingly
		pTag.style.color= darkGreen;
	}

	// show underline of a link
	function showUnderline(domElement)
	{
		domElement.style.textDecoration = "underline";
	}

	// hide underline of a link
	function hideUnderline(domElement)
	{
		domElement.style.textDecoration = "none";
	}

	/****************************************************
	** START OF functions that create the screen displays (html code)
	****************************************************/


	/****************************************************
	** displays the options at the TOP 
	****************************************************/
	function displayOptions()
	{
		var string = "<div class='options'>";
		string += "<table class='options' cellspacing='0' height='26px'>";
		string += "<tr>";
//		string += "<td> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>";
		string += "<td><a href='default.asp'  onMouseOver=\"mouseOver('pic1')\" onMouseOut=\"mouseOut('pic1')\"><img src='images/home.gif' name='pic1'></a></td>";
		string += "<td>&nbsp</td>";
		string += "<td><a href='register.asp'  onMouseOver=\"mouseOver('pic2')\" onMouseOut=\"mouseOut('pic2')\"><img src='images/register.gif' name='pic2'></a></td>";
		string += "<td>&nbsp</td>";
		string += "<td><a href='whyJoin.asp'  onMouseOver=\"mouseOver('picWhyJoin')\" onMouseOut=\"mouseOut('picWhyJoin')\"><img src='images/whyJoin.gif' name='picWhyJoin'></a></td>";
		string += "<td>&nbsp</td>";
		string += "<td><a href='' onMouseOver=\"mouseOver('pic4')\" onMouseOut=\"mouseOut('pic4')\" onClick=\"javascript:window.open('help.asp', 'myWindow', 'status=1, toolbar=0, resizable=1, scrollbars=1')\" ><img src='images/helpOption.gif' name='pic4'></a></td>";
		string += "<td>&nbsp</td>";
		string += "<td><a href='forum/'  onMouseOver=\"mouseOver('pic5')\" onMouseOut=\"mouseOut('pic5')\"><img src='images/forum.gif' name='pic5'></a></td>";
		string += "<td>&nbsp</td>";
		string += "<td><a href='contact.asp'  onMouseOver=\"mouseOver('pic6')\" onMouseOut=\"mouseOut('pic6')\"><img src='images/contact.gif' name='pic6'></a></td>";
		string += "</tr>";
		string += "</table>";
		string += "</div>";
		document.write(string);
	}

	/****************************************************
	** displays the options at the BOTTOM 
	****************************************************/
	function displayWebmaster()
	{
		var string = "<div class='bottomOptions'> <table cellpadding=6 cellspacing=0><tr>";		
		string += "<td><a href='about.asp' onMouseOver=\"mouseOver('picAboutUs')\" onMouseOut=\"mouseOut('picAboutUs')\"><img src='images/about.gif' name='picAboutUs'></a></td>";
		string += "<td><a href='siteMap.asp' onMouseOver=\"mouseOver('picSiteMap')\" onMouseOut=\"mouseOut('picSiteMap')\"><img src='images/siteMap.gif' name='picSiteMap'></a></td>";
		string += "<td><a href='privacyPolicy.html' target='myWindow' onMouseOver=\"mouseOver('picPrivacyPolicy')\" onMouseOut=\"mouseOut('picPrivacyPolicy')\"><img src='images/privacyPolicy.gif' name='picPrivacyPolicy'></a></td>";
		string += "<td><a href='termsOfUse.html' target='myWindow' onMouseOver=\"mouseOver('picTermsOfUse')\" onMouseOut=\"mouseOut('picTermsOfUse')\"><img src='images/termsOfUse.gif' name='picTermsOfUse'></a></td>";
		string += "<td><p class='webmaster'> Designed by <a href='contact.asp' name='orangeBold'>";
//		string += "id='webmaster' ONMOUSEOVER=\"changeColorOn('webmaster')\" ONMOUSEOUT=\"changeColorOff('webmaster')\"> Ben Cho</a></p></td></tr></table>";
		string += "Ben Cho</a></p></td></tr></table></div>";

		document.write(string);
	}

	// handles the checking of the "remember my id" checkbox and sets the cookie for it
	function setRememberThisID()
	{
		var checkboxID = document.getElementsByName("rememberID");
		var expireDate = new Date();
		var numExpireDays = 360;
		expireDate.setTime(expireDate.getTime() + 3600000 * 24 * numExpireDays);

		if (checkboxID.item(0).checked == true)
			setCookie("rememberID", "yes", 360);
		else
			setCookie("rememberID", "no", 360);
	}

	// if the "remember id" cookie is set to "yes"
	function getRememberID()
	{
		var thisRememberID = getCookie('rememberID');
		var username = getCookie("username");

		if (username == null)
		{
			username = "";
		}
		// user chose to remember id
		if (thisRememberID == "yes" )
		{
			var t = document.getElementsByName("rememberID");		
			t.item(0).checked = true;
			var tempEmail = document.getElementsByName("username");
			tempEmail.item(0).value = username;
		}
	}

	// once the user tries to login by submitting the form on the left menu bar, "member login"
	// do three things: 1) we save the email address(username) into a cookie
	// 2) encrypt the email address
	// 3) we hash the password
	function processLoginUser()
	{
//		var tempEmail = document.getElementsByName("username");
		// set cookie to expire in a year (360 days)
//		setCookie("username", tempEmail.item(0).value, 360);

		var domEmail = document.getElementById("username");
		// set cookie to expire in a year (360 days)
		setCookie("username", domEmail.value, 360);

		// hash the pw
		var pw = document.getElementById('password');
		if (pw.value != "")
		{
			var hash = hex_md5(pw.value);
			pw.value = hash;
		}
	}


	/****************************************************
	** START display the weekly news section on the RIGHT part of the site
	****************************************************/

	var MONTH_JAN = 0;
	var MONTH_FEB = 1;
	var MONTH_MAR = 2;
	var MONTH_APR = 3;
	var MONTH_MAY = 4;
	var MONTH_JUN = 5;
	var MONTH_JUL = 6;
	var MONTH_AUG = 7;
	var MONTH_SEP = 8;
	var MONTH_OCT = 9;
	var MONTH_NOV = 10;
	var MONTH_DEC = 11;

	var string;
	var janKey = new Array(2);
	var febKey = new Array(2);
	var marKey = new Array(2);
	var aprKey = new Array(2);
	var mayKey = new Array(2);
	var junKey = new Array(2);
	var julKey = new Array(2);
	var augKey = new Array(2);
	var sepKey = new Array(2);
	var octKey = new Array(2);
	var novKey = new Array(2);
	var decKey = new Array(2);

	// 2d arrays defining how many days in each month
	janKey[0] = 1;
	janKey[1] = 31;
	febKey[0] = 2;
	febKey[1] = 28;
	marKey[0] = 3;
	marKey[1] = 31;
	aprKey[0] = 4;
	aprKey[1] = 30;
	mayKey[0] = 5;
	mayKey[1] = 31;
	junKey[0] = 6;
	junKey[1] = 30;
	julKey[0] = 7;
	julKey[1] = 31;
	augKey[0] = 8;
	augKey[1] = 31;
	sepKey[0] = 9;
	sepKey[1] = 30;
	octKey[0] = 10;
	octKey[1] = 31;
	novKey[0] = 11;
	novKey[1] = 30;
	decKey[0] = 12;
	decKey[1] = 31;
	
	// emulate a 2d array, array who's elements are also arrays
	var dateArray = new Array(janKey, febKey, marKey, aprKey, mayKey, junKey, julKey, augKey, sepKey, octKey, novKey, decKey);

	// variables to convert numbers into alphabetical format
	var currentTime = new Date();
	var intMonth = currentTime.getMonth() + 1;	
	day = currentTime.getDate();	// day as number 0-31
	date = currentTime.getDay();	// date as monday - sunday
	month = getMonth(intMonth);

	var strMonth = "";	// month in string format

	// number of days in this month
//	var numOfDays = dateArray[intMonth - 1][1];	//@@

	switch (date)
	{
		case 0:
			date = "Sunday";
			break;
		case 1:
			date = "Monday";
			break;
		case 2:
			date = "Tuesday";
			break;
		case 3:
			date = "Wednesday";
			break;
		case 4:
			date = "Thursday";
			break;
		case 5:
			date = "Friday";
			break;
		case 6:
			date = "Saturday";
			break;
	}

	// start dates of FOOD BASICS 
	dominionMonth = 1;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var dominionDay = 11;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var dominionEndDay = dominionDay + 6;
//	var dominionEndDay = dominionDay + 13;
	dominionEndMonth = dominionMonth
	dominionNumOfDays = dateArray[dominionMonth - 1][1];
	if (dominionEndDay > dominionNumOfDays)
	{
		dominionEndDay = dominionEndDay - dominionNumOfDays;
		dominionEndMonth++;
	}

	// start dates of FOOD BASICS 
	foodBasicsMonth = 8;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var foodBasicsDay = 22;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var foodBasicsEndDay = foodBasicsDay + 6;
//	var foodBasicsEndDay = foodBasicsDay + 13;
	foodBasicsEndMonth = foodBasicsMonth
	foodBasicsNumOfDays = dateArray[foodBasicsMonth - 1][1];
	if (foodBasicsEndDay > foodBasicsNumOfDays)
	{
		foodBasicsEndDay = foodBasicsEndDay - foodBasicsNumOfDays;
		foodBasicsEndMonth++;
	}

	// LOBLAWS 
	loblawsMonth = 12;		// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var loblawsDay = 29;	// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var loblawsEndDay = loblawsDay + 5;
//	var loblawsEndDay = loblawsDay + 13;	
	loblawsEndMonth = loblawsMonth;
	loblawsNumOfDays = dateArray[loblawsMonth - 1][1];
	if (loblawsEndDay > loblawsNumOfDays)
	{
		loblawsEndDay = loblawsEndDay - loblawsNumOfDays;
		loblawsEndMonth ++;
	}

	// start dates of NO FRILLS
	noFrillsMonth = 2;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var noFrillsDay = 8;		// change this @@@@@@@@@@@@@@@@@@@@@@@@
//	var noFrillsEndDay = noFrillsDay + 6;
	var noFrillsEndDay = noFrillsDay + 13;
	noFrillsEndMonth = noFrillsMonth;
	noFrillsNumOfDays = dateArray[noFrillsMonth - 1][1];
	// end day rolls over to next month
	if (noFrillsEndDay > noFrillsNumOfDays)
	{
		noFrillsEndDay = noFrillsEndDay - noFrillsNumOfDays;
		noFrillsEndMonth ++;
	}

	// start dates of PRICE CHOPPER
	priceChopperMonth = 12;				// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var priceChopperDay = 28;			// change this @@@@@@@@@@@@@@@@@@@@@@@@
	var priceChopperEndDay = priceChopperDay + 6;
//	var priceChopperEndDay = priceChopperDay + 13;
	priceChopperEndMonth = priceChopperMonth;
	priceChopperNumOfDays = dateArray[priceChopperMonth - 1][1];
	if (priceChopperEndDay > priceChopperNumOfDays)
	{
		priceChopperEndDay = priceChopperEndDay - priceChopperNumOfDays;
		priceChopperEndMonth++;
	}

	dominionEndMonth = checkMonth(dominionEndMonth);
	foodBasicsEndMonth = checkMonth(foodBasicsEndMonth);
	loblawsEndMonth = checkMonth(loblawsEndMonth);
	noFrillsEndMonth = checkMonth(noFrillsEndMonth);
	priceChopperEndMonth = checkMonth(priceChopperEndMonth);

	dominionMonth = getMonth(dominionMonth);
	dominionEndMonth = getMonth(dominionEndMonth);

	foodBasicsMonth = getMonth(foodBasicsMonth);
	foodBasicsEndMonth = getMonth(foodBasicsEndMonth);

	noFrillsMonth = getMonth(noFrillsMonth);
	noFrillsEndMonth = getMonth(noFrillsEndMonth);

	loblawsMonth = getMonth(loblawsMonth);
	loblawsEndMonth = getMonth(loblawsEndMonth);

	priceChopperMonth = getMonth(priceChopperMonth);
	priceChopperEndMonth = getMonth(priceChopperEndMonth);

	// all 5 stores' flyers start on same day, the friday
	// so just change one, food basics
	loblawsMonth = foodBasicsMonth;
	loblawsEndMonth = foodBasicsEndMonth;
	loblawsDay = foodBasicsDay;
	loblawsEndDay = foodBasicsEndDay;

	noFrillsMonth = foodBasicsMonth;
	noFrillsEndMonth = foodBasicsEndMonth;
	noFrillsDay = foodBasicsDay;
	noFrillsEndDay = foodBasicsEndDay;

	priceChopperMonth = foodBasicsMonth;
	priceChopperEndMonth = foodBasicsEndMonth;
	priceChopperDay = foodBasicsDay;
	priceChopperEndDay = foodBasicsEndDay;
/*
	// one time hack b/c FB diff from the rest 
	foodBasicsDay = foodBasicsEndDay - 7;
	foodBasicsEndDay = foodBasicsEndDay;
*/
	dominionMonth = foodBasicsMonth;
	dominionEndMonth = foodBasicsEndMonth;
	dominionDay = foodBasicsDay;
	dominionEndDay = foodBasicsEndDay;


	/****************************************************
	** END display the weekly news section on the RIGHT part of the site
	****************************************************/

	function checkMonth(thisMonth)
	{
		if (thisMonth == 13)
		{
			return 1;
		}

		return thisMonth;
	}

	function displayRightMainGetCurrentDate()
	{
		document.write(date + " " + month + " " + day);
	}

	function displayRightMainGetDominionFlyerWeek()
	{
		document.write(dominionMonth + " " + dominionDay + " - " + dominionEndMonth + " " + dominionEndDay);
	}

	function displayRightMainGetFoodBasicsFlyerWeek()
	{
		document.write(foodBasicsMonth + " " + foodBasicsDay + " - " + foodBasicsEndMonth + " " + foodBasicsEndDay);
	}

	function displayRightMainGetLoblawsFlyerWeek()
	{
		document.write(loblawsMonth + " " + loblawsDay + " - " + loblawsEndMonth + " " + loblawsEndDay);
	}

	function displayRightMainGetNoFrillsFlyerWeek()
	{
		document.write(noFrillsMonth + " " + noFrillsDay + " - " + noFrillsEndMonth + " " + noFrillsEndDay);
	}

	function displayRightMainGetPriceChopperFlyerWeek()
	{
		document.write(priceChopperMonth + " " + priceChopperDay + " - " + priceChopperEndMonth + " " + priceChopperEndDay);
	}


	/*
	* returns the string representation (Jan - Dec) of an int month (1 - 12)
	* @param	thisMonth	integer representation of the months (1 - 12)
	*/
	function getMonth(thisMonth)
	{
		switch (thisMonth)
		{
			case 1:
				return("January");
				break;
			case 2:
				return("February");
				break;
			case 3:
				return("March");
				break;
			case 4:
				return("April");
				break;
			case 5:
				return("May");
				break;
			case 6:
				return("June");
				break;
			case 7:
				return("July");
				break;
			case 8:
				return("August");
				break;
			case 9:
				return("September");
				break;
			case 10:
				return("October");
				break;
			case 11:
				return("November");
				break;
			case 12:
				return("December");
				break;
		}
	}

	/*
	* depending on the current url, change the image that links to the current url (active)
	*/
	function displayActivePageMenu()
	{
		var flyerDeals = "/default.asp";
		var flyerListings = "/canadaOntarioGroceryStoreFlyers.asp";
		var groceryGame = "/groceryGameContestRules.asp";
		var coupons = "/couponsPromotions.asp";
		var priceBook = "/groceryPriceBookHistory.asp";
		var doubleSavings = "/doubleSavingsCouponsFlyerSales.asp";
		var savingTips = "/grocerySavingSecretsTips.asp";
		var register = "/register.asp";
		var whyJoin = "/whyJoin.asp";
		var contact = "/contact.asp";
		var recommend = "/recommend.asp";

		switch (document.location.pathname)
		{
			case flyerDeals:
				document.getElementById("navFindDeals").src = "images/changePasswordClick.gif";
				break;		
		}

	}

	/**
	* 
	*/
	function calculatorCompute()
	{
		computeUnitPrice("");
		
		// only validate the fields of grocery 2 if it is enabled
		var domGrocery2CheckBox = document.getElementById("enable2");		
		if (domGrocery2CheckBox.checked)
		{
			computeUnitPrice("2")
		}
	}
	
	function showUnitPriceCalculatorHelp(domHelpImage)
	{
		var domUnitPriceCalculatorHelp = document.getElementById("unitPriceCalculatorHelp");
		domUnitPriceCalculatorHelp.style.visibility = "visible";

/*
		domUnitPriceCalculatorHelp.innerHTML = "Here is an example: coke 2/$3.99 a case, 12x500 ml <br/> Qtyp per price";

		domUnitPriceCalculatorHelp.style.position = "absolute";
		domUnitPriceCalculatorHelp.style.left = domHelpImage.style.left;
		alert(domHelpImage.style.left);
*/		

	}

	function hideUnitPriceCalculatorHelp()
	{
		var domUnitPriceCalculatorHelp = document.getElementById("unitPriceCalculatorHelp");
		domUnitPriceCalculatorHelp.style.visibility = "hidden";
	}

	/**
	* inserts the following example into the fields: case of coke 2/$3.99, case of 12x500 ml 
	*/
	function insertUnitPriceCalculatorSample()
	{
		var quantityPerPrice = document.getElementById("quantityPerPrice");
		var price = document.getElementById("price");
		var numberPerCase = document.getElementById("numberPerCase");
		var unitOfMeasure = document.getElementById("unitOfMeasure");
		var size = document.getElementById("size");

		quantityPerPrice.value = "2";
		price.value = "3.99";
		numberPerCase.value = "12";
		unitOfMeasure.options[5].selected = true;
		size.value = "355";
	}

	function changeGrocery2Enable(domGrocery2CheckBox)
	{
		var groceryNum = "2";
		var quantityPerPrice = document.getElementById("quantityPerPrice" + groceryNum);
		var price = document.getElementById("price" + groceryNum);
		var numberPerCase = document.getElementById("numberPerCase" + groceryNum);
		var unitOfMeasure = document.getElementById("unitOfMeasure" + groceryNum);
		var size = document.getElementById("size" + groceryNum);
		var calculatorResult = document.getElementById("calculatorResult" + groceryNum);

		// checked
		if (domGrocery2CheckBox.checked)
		{
			quantityPerPrice.disabled = false;
			price.disabled = false;
			numberPerCase.disabled = false;
			unitOfMeasure.disabled = false;
			size.disabled = false;
		}
		else
		{
			quantityPerPrice.disabled = true;
			price.disabled = true;
			numberPerCase.disabled = true;
			unitOfMeasure.disabled = true;
			size.disabled = true;
		}
	}

	function computeUnitPrice(groceryNum)
	{
		var quantityPerPrice = document.getElementById("quantityPerPrice" + groceryNum);
		var price = document.getElementById("price" + groceryNum);
		var numberPerCase = document.getElementById("numberPerCase" + groceryNum);
		var unitOfMeasure = document.getElementById("unitOfMeasure" + groceryNum);
		var size = document.getElementById("size" + groceryNum);
		var calculatorResult = document.getElementById("calculatorResult" + groceryNum);

		intQtyPerPrice = parseInt(quantityPerPrice.value);
		floatPrice = parseFloat(price.value);
		intNumberPerCase = parseInt(numberPerCase.value);
		strUnitOfMeasure = unitOfMeasure.value;
		floatSize = parseFloat(size.value);

		if (isNaN(intQtyPerPrice))
		{
			alert("Please enter a valid Quantity Per Price");
			quantityPerPrice.focus();
			return;
		}

		if (isNaN(floatPrice))
		{
			alert("Please enter a valid Price");
			price.focus();
			return;
		}
	
		if (isNaN(intNumberPerCase))
		{
			alert("Please enter a valid Number of Units Per Case");
			numberPerCase.focus();
			return;
		}

		if (isNaN(floatSize))
		{
			alert("Please enter a valid Size");
			size.focus();
			return;
		}
	

/*
alert(isNaN(Number("3.11")) );
alert(parseInt("a5.2"));

		quantityPerPrice = parseFloat(quantityPerPrice.value);
		price = parseFloat(price.value);
		numberPerCase = parseInt(numberPerCase.value);
		unitOfMeasure = 
		units = units.value;
*/

		var kgToLb = 2.204585537918871;
		var gToLb = 0.002204585537918871;
		var ozToLb = 0.062498897707231035;
		var mlToL = 0.001;

		var strResult = "$";

		var divisionCalculation = intQtyPerPrice * intNumberPerCase * floatSize;
//alert(divisionCalculation);
		if (divisionCalculation == 0)
		{
			calculatorResult.innerHTML = "Error! 0 is an invalid value";
			return null;		
		}

		if (strUnitOfMeasure == "lb")
		{
			floatPrice = floatPrice / (divisionCalculation);
			floatPrice = Math.round(floatPrice * 1000)/1000;
			calculatorResult.innerHTML = strResult + floatPrice + " per lb";
		}
		else if (strUnitOfMeasure == "each")
		{
			floatPrice = floatPrice / (divisionCalculation);
			floatPrice = Math.round(floatPrice * 1000)/1000;
			calculatorResult.innerHTML = strResult + floatPrice + " each";
		}
		else if (strUnitOfMeasure == "L")
		{
			floatPrice = floatPrice / (divisionCalculation);
			floatPrice = Math.round(floatPrice * 1000)/1000;
			calculatorResult.innerHTML = strResult + floatPrice + " per L";
		}
		else if (strUnitOfMeasure == "g")
		{
			floatPrice = floatPrice / (divisionCalculation * gToLb);
			floatPrice = Math.round(floatPrice * 1000)/1000;
			calculatorResult.innerHTML = strResult + floatPrice + " per lb";
		}
		else if (strUnitOfMeasure == "kg")
		{
			floatPrice = floatPrice/ (divisionCalculation * kgToLb);
			floatPrice = Math.round(floatPrice * 1000)/1000;
			calculatorResult.innerHTML = strResult + floatPrice + " per lb";
		}
		else if (strUnitOfMeasure == "g")
		{
			floatPrice = floatPrice / (divisionCalculation * ozToLb);
			floatPrice = Math.round(floatPrice * 1000)/1000;		
			calculatorResult.innerHTML = strResult + floatPrice + " per lb";
		}
		else if (strUnitOfMeasure == "ml")
		{
			floatPrice = floatPrice / (divisionCalculation * mlToL);
			floatPrice = Math.round(floatPrice * 1000)/1000;		
			calculatorResult.innerHTML = strResult + floatPrice + " per L";
		}
	}

	/**
	* hide the loading gif
	*/
	function hideLoadingGif()
	{
		var domLoadingGif = document.getElementById("loadingGif");
		if (domLoadingGif != null)
		{
			domLoadingGif.style.visibility = "hidden";
		}
	}

	/**
	* show the loading gif
	*/
	function showLoadingGif()
	{
		var domSearchResults = document.getElementById("searchResults");
		if (domSearchResults != null)
		{
			domSearchResults.innerHTML = "";
		}

		var domLoadingGif = document.getElementById("loadingGif");
		if (domLoadingGif != null)
		{
			domLoadingGif.style.visibility = "visible";
		}
	}

	/**
	* display the active image of the selected page by assigning the selected option to css class "selected"
	*/
	function showActive(domElementID)
	{
		var domElement = document.getElementById(domElementID);
		if (domElement != null)
		{
			domElement.className = "selected";
		}
	}

	/* ======================== START of floating drop down menus functions ===================*/
	// function for creating floating drop downs, start() is first called when default.asp is loaded
	function start()
	{
		var startList = function() 
		{
			if (document.all && document.getElementById) 
			{
				// first floating drop down 
				var navRoot = document.getElementById("nav");
				if (navRoot != null)
				{
					for (i=0; i<navRoot.childNodes.length; i++) 
					{
						var node = navRoot.childNodes[i];
						if (node.nodeName=="LI") 
						{
							node.onmouseover=function() 
							{
								this.className+=" over";
							}
							node.onmouseout=function() 
							{
								this.className=this.className.replace(" over", "");
							}
						}
					}
				}

				var navRoot1 = document.getElementById("nav1");
				if (navRoot1 != null)
				{
					for (j=0; j<navRoot1.childNodes.length; j++) 
					{
						var node1 = navRoot1.childNodes[j];
						if (node1.nodeName=="LI") 
						{
							node1.onmouseover=function() 
							{
								this.className+=" over";
							}
							node1.onmouseout=function() 
							{
							this.className=this.className.replace(" over", "");
							}
						}
					}
				}

				var navRoot2 = document.getElementById("nav2");
				if (navRoot2 != null)
				{
					for (k=0; k<navRoot2.childNodes.length; k++) 
					{
						var node2 = navRoot2.childNodes[k];
						if (node2.nodeName=="LI") 
						{
							node2.onmouseover=function() 
							{
								this.className+=" over";
							}
							node2.onmouseout=function() 
							{
							this.className=this.className.replace(" over", "");
							}
						}

					}
				}
			}
		}
		window.onload=startList;
	}
	/* ======================== END of floating drop down menus functions ===================*/


	// sets the focus to the beginning of a textbox
	function setSelRange(inputEl, selStart, selEnd) 
	{ 
	 if (inputEl.setSelectionRange) 
	 { 
	  inputEl.focus(); 
	  inputEl.setSelectionRange(selStart, selEnd); 
	 } 
	 else if (inputEl.createTextRange) 
	 { 
	  var range = inputEl.createTextRange(); 
	  range.collapse(true); 
	  range.moveEnd('character', selEnd); 
	  range.moveStart('character', selStart); 
	  range.select(); 
	 } 
	}

/**
	calculate grocery store total and grand total
	each store is a form, go through each form and the elements in the form
**/
function calculateGroceryStoreTotals()
{
	// check for 2$3, which is invalid since missing "/"
	invalidPriceRegex = /\w+\$\w+/;

	var total = 0;
	var quantity = 0;
	var price = 0;
	var grandTotal = 0;

	// - 1 b/c we have a form that lets the user add personal groceries
	var numForms = document.forms.length - 1;

	var formName = "";

	// traverse through all the forms
	for (i=0; i<numForms; i++)
	{
		// reset the total for each store
		total = 0;

		var thisForm = document.forms[i]
		formName = thisForm.name;

		// traverse through all the elements in the one form
		// one grocery consists of 3 elements, 1 checkbox, 1 quantity input field, 1 hidden price field
		for (j=0; j<thisForm.elements.length; j=j+3)
		{
				quantity = parseInt(thisForm.elements[j+1].value);

				// check for user entering invalid value, only takes a number
				if (isNaN(quantity))
				{
					alert("The quantity entered is invalid");
//					thisForm.elements[j+1].focus();
				}

				price = thisForm.elements[j+2].value;

				// check to see if the price has "/", if so then it will lead to two situations as sated below
				var index = price.indexOf("/");
				if (index != -1)
				{
					var priceFirstPart = price.substring(0, index);
					var priceSecondPart = price.substring(index + 1);
					// get rid of '$'
					priceSecondPart = priceSecondPart.replace(/\$/g, "");

					// 2 situations to consider
					//	1: 5/$3.00
					//	2: 4/lb

					// so check if the second part is numeric or not to determine which situation
					// situation 2
					if (isNaN(parseInt(priceSecondPart)))
					{
						price = priceFirstPart;
					}
					// situation 1
					else
					{
						price = priceSecondPart;
					}
				}
				// check to see if we can parseInt the price at all, sometimes an incorrectly inputted price can mess things up, eg. 2$4 <-- forgot "/"
				else if (isNaN(parseInt(price)) || invalidPriceRegex.test(price) == true )
				{
					continue;					
				}
				
				total = total + (quantity * price);
		}

		total = Math.round(total * 100)/100;
		// display a total for each form (store)
		var domFormTotal = document.getElementById(formName + "Total");
		domFormTotal.innerHTML =  total;

		// sum up the totals to get a grand total
		grandTotal = grandTotal + total;
		grandTotal = Math.round(grandTotal * 100)/100;
	}

	var domGrandTotal = document.getElementById("grandTotal");
	domGrandTotal.innerHTML = grandTotal;
}

function showField(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		domElement.className = "showField";
	}
}

function hideField(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		domElement.className = "hideField";
	}
}

function toggleFieldVisibility(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		if (domElement.className == "hideField")
		{
			domElement.className = "showField";
		}
		else
		{
			domElement.className = "hideField";
		}
	}
}

function showVisibility(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		domElement.style.visibility = "visible"
	}
}

function hideVisibility(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		domElement.style.visibility = "hidden"
	}
}

/*
	sets the class name for a given dom element
*/
function setClassName(domElement, newClassName)
{
	if (domElement != null)
	{
		domElement.className = newClassName;
	}
}

/*
	sets the class name for a given dom id
*/
function setClassNameByDomID(domID, newClassName)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		domElement.className = newClassName;
	}
}

function setMemberTabFocus(domElement)
{
	setClassName(domElement, 'memberTab memberTabFocus');
}

function setMemberTabOffFocus(domElement)
{
	setClassName(domElement, 'memberTab memberTabOffFocus');
}

/**
	used to set tab on focus since user is on the right page
	also remove the "onmouseout" function so that mouseout will not change tab to off focus
**/
function setMemberTabFocusByID(domID)
{
	var domElement = document.getElementById(domID);
	if (domElement != null)
	{
		setMemberTabFocus(domElement);
		domElement.onmouseout = null;
	}
}

/**
	change the color of a row (<tr>) on mouse over
**/
function hoverOnRowApplyClassName(domElement)
{
	domElement.className = "hoverGroceryRow";
}

/**
	change the color of a row (<tr>) on mouse over
**/
function hoverOffRowRemoveClassName(domElement)
{
	domElement.className = "";
}