//cache 2 arrow images
imageUp = new Image();
imageUp.src = "Images/GroupHeader_RightIcon.gif";
imageDown = new Image();
imageDown.src = "Images/GroupHeader_RightIconOpen.gif";
imageOn = new Image();
imageOn.src = "Images/GroupHeader_RightIcon2.gif";

var cnt;
var nCount;										// for doing the loop
var objSpanCollection;							// store a collecion of Menu
var menuHeightCollection = new Array();   // store a collection of Menulists' height
var realMenuObj = new Array(); 
var objMenu;									// the menu is clicked on

function InitializeMenu()
{
		nCount=0;
		// 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
			if(objSpan.id .indexOf("spanpanel") != -1)
                        {
			  realMenuObj[nCount] = objSpan;
			  // get a collection of Menus' height
                          menuHeightCollection[nCount] = objSpan.childNodes.item(1).clientHeight;
                          // assign the click event to every Menuheader
                          // prevent the bug if asp.net control has the tag called span;
                          if(objSpan.childNodes.item(0).id=="xpmenu" )
                          {
                            realMenuObj[nCount].childNodes.item(0).onclick = ControlMenu;
                                                      }
                          nCount++;
                        }
                }
}

function ControlMenu() 
{
	cnt = 1;
	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>
	var objArrow = this.childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0);
		
	if (objMenu.style.display == "none")
	{
	  objArrow.src = imageDown.src;  //change to the Down Arrow
	  ShowMenu();
	}
	else
	{
	  objArrow.src = imageUp.src;  //change to the Up Arrow
	  HideMenu();
	}
}
	
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 transparency 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 < realMenuObj.length; i++)
	if (objMenu.parentNode == realMenuObj[i])
		objMenu.style.height = objMenu.clientHeight + (menuHeightCollection[i]/10);
		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 < realMenuObj.length; i++)
	   if (objMenu.parentNode == realMenuObj[i])
	      objMenu.style.height = objMenu.clientHeight - (menuHeightCollection[i]/10);
	   objList.style.display = "none";
	   cnt++;
	   setTimeout("HideMenu()",30)
   }
   if (cnt >= 10)
     objMenu.style.display = "none";
}