//cache 2 arrow images

	imageUp = new Image();
	imageUp.src = "http://site.herbalnanny.com/images/sw/hb_product_eg_up.gif";
	imageDown = new Image();
	imageDown.src = "http://site.herbalnanny.com/images/sw/hb_product_eg_down.gif";

	var cnt;										// for doing the loop
	var objSpanCollection;							// store a collecion of Menu
	var menuHeightCollection = new Array(); 		// store a collection of Menulists' height
	var objMenu;									// the menu is clicked on
	var prevMenu=null;								// the previous menu that was clicked
	var objPrevMenu;
	var prevImage = null;
	
	function InitializeMenu()
	{
		// get a collection of menus
		objSpanCollection = document.body.getElementsByTagName("SPAN");

		for (var i = 0; i < objSpanCollection.length; i++)
		{
			var objSpan = objSpanCollection[i];

			// get a collection of Menus height
			menuHeightCollection[i] = objSpan.childNodes.item(1).clientHeight;

			// assign the click event to every Menuheader
			objSpan.childNodes.item(0).onclick = ControlMenu;
			
			//Show the First Menu detail screen on Start Up
			if (i != 0)
			{
				objSpan.childNodes.item(1).style.display = "none";
				objSpan.childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0).src = imageDown.src
			}
		}
		prevMenu = document.getElementById("MenuDetails_1");
		prevImage = document.getElementById("MenuHeader_1");
	}
	
	
	function ControlMenu()
	{
		cnt = 1;

		var objArrow;
		if ((prevMenu != null) && (prevMenu.style.display != "none"))
		{
			
			objPrevMenu = prevMenu ;
			objArrow = prevImage.childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0);
			objArrow.src = imageDown.src; 
			HidePreviousMenu();
		}
		
		
		objMenu = this.parentNode.childNodes.item(1);	// memorize the Menulist has been clicked
		
		
		// Get the arrow that belongs to the clicked menu
		// starting with <div> then <table> then <tbody> then <tr> then <td> and the last one is
		// what we need: <img>
		
		objArrow = this.childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0);
		
		if (objMenu.style.display == "none")
		{
			objArrow.src = imageUp.src;  //change to the Down Arrow
			ShowMenu()
		}
		else
		{
			objArrow.src = imageDown.src;  //change to the Up Arrow
			HideMenu();	
		}
		//Store the previous menu
		prevMenu = this.parentNode.childNodes.item(1);
		prevImage = this.parentNode.childNodes.item(0);
		
	}

	function ShowMenu()
	{
		var objList = objMenu.childNodes.item(0);	// get the Linkslist of the Menulist
		
		if (cnt < 10)
		{

			// display the Menulist
			objMenu.style.display = "block";

			// increase the tranparency of the Menulist
			//objMenu.filters["alpha"].opacity = objMenu.filters["alpha"].opacity + 10;

			// loop through the Menu collection to find the position of the clicked Menu
			// to get the actual height of the menu list and then increase the height of the Menulist
			for (var i = 0; i < objSpanCollection.length; i++)
				if (objMenu.parentNode == objSpanCollection[i])
					{
						objMenu.style.height = objMenu.clientHeight + (menuHeightCollection[i]/10);
						if (objMenu.clientHeight >= menuHeightCollection[i]) 
							{
								objMenu.style.height = menuHeightCollection[i]; 
							}
					}

				cnt++;

			// do this function again after 30 miliseconds until the actual Menulist's height is returned
			setTimeout("ShowMenu()",30)
		}

		// display the Menulist if the it's actual height is returned
		if (cnt >= 10)
			objList.style.display = "block";
	}
 

	function HideMenu()
	{
		var objList = objMenu.childNodes.item(0);	// get the Linkslist of the Menulist
		if (cnt < 10)
		{
			//objMenu.filters["alpha"].opacity = objMenu.filters["alpha"].opacity - 10;
			for (var i = 0; i < objSpanCollection.length; i++)
				if (objMenu.parentNode == objSpanCollection[i])
					objMenu.style.height = objMenu.clientHeight - (menuHeightCollection[i]/10);
					

			objList.style.display = "none";
			cnt++;

			setTimeout("HideMenu()",30)
		}

		if (cnt >= 10)
			objMenu.style.display = "none";
	}
	
   function HidePreviousMenu()
	{
		var objList = objPrevMenu.childNodes.item(0);	// get the Linkslist of the Menulist
		if (cnt < 10)
		{

			//objPrevMenu.filters["alpha"].opacity = objPrevMenu.filters["alpha"].opacity - 10;
			for (var i = 0; i < objSpanCollection.length; i++)
				if (objPrevMenu.parentNode == objSpanCollection[i])
					objPrevMenu.style.height = objPrevMenu.clientHeight - (menuHeightCollection[i]/10);
				
			objList.style.display = "none";
			cnt++;
			if (cnt < 10){
			setTimeout("HidePreviousMenu()",30);
			}
		}

		if (cnt >= 10)
			objPrevMenu.style.display = "none";
			//objList.style.display = "none";
	}