var coord = new Array(19,19,19,19,19,19,19,19,20,20,20,20,20,21,21,21,21,21,22,22,22,22,22,23,23,23,23,23,24,24,24,24,24,25,25,25,25,25,26,26,26,26,26,27,27,27,27,27,28,28,28,28,28,29,29,29,29,29,30,30,30,30,31,31,32,32,32,32,33,33,33,33,33,34,34,34,34,35,35,36,36,36,36,37,37,37,37,37,38,38,38,38,39,39,40,40,40,40,41,41,41,41,42,42,43,43,43,43,44,44,44,44,45,45,46,46,46,47,47,48,48,48,49,49,50,50,50,50,51,51,51,51,52,52,53,53,53,54,54,55,55,56,56,57,57,58,58,59,59,60,60,60,61,61,62,62,62,63,63,64,64,64,65,65,66,66,66,67,67,68,68,69,69,70,70,71,71,72,72,73,73,73,74,74,75,75,76,76,77,77,78,79,79,80,80,81,81,82,82,83,83,84,84,85,85,86,87,87,88,88,89,89,90,90,91,91,92,92,93,93,94,95,95,96,96,97,98,98,99,99,100,101,101,102,102,103,104,104,105,105,106,107,107,108,108,109,110,111,111,112,113,114,114,115,115,116,117,118,118,119,120,121,121,122,122,123,124,124,125,125,126,127,128,128,129,130,131,132,132,133,134,135,135,136,136,137,138,139,139,140,141,142,143,143,144,145,146,147,147,148,149,150,151,151,152,153,154,155,155,156,157,158,159,159,160,161,162,163,163,164,165,166,167,168,169,170,171,172,172,173,174,175,176,177,178,179,180,181,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,222,223,224,225,226,227,228,229,230,231);

var initialOffset = 20;
var imageHeight = new Array(0, 17, 19); 		/*heights of item images for all levels of the menu */
var elementVOffset = new Array(0, 9, 10); 		/*vertical offset of ankering point of each image */
var vGapAfter = new Array(0,2,0); 				/*vertical gap after each element */
var indent = new Array(0, -3, 5);				/*horizontal indentations from the right */
var vGapBeforeSubmenu = 5;
var vGapAfterSubmenu = 5;
var animSpeed = 1;
var hiding = false;								/*denotes whether we are currently hiding the menu */
var newIndex = new Array(0, -1, -1);			/*when hiding, holds the index of the next position to be displayed*/ 
var index = new Array(-1, -1, -1);			 	/*index of the current page*/ 


function getMenuIndex(page)
{
	var ret = new Array(0, -1, -1);
	for (var i = 0; i < menu.length; i++)
	{
		if (menu[i].href == page)
		{
			ret[0] = i;
			return ret;
		}
		for (var j = 0; j < menu[i].submenu.length; j++)
		{
			if (menu[i].submenu[j].href == page)
			{
				ret[0] = i;
				ret[1] = j;
				return ret;
			}
			for (var k = 0; k < menu[i].submenu[j].submenu.length; k++)
				if (menu[i].submenu[j].submenu[k].href == page)
				{
					ret[0] = i;
					ret[1] = j;
					ret[2] = k;
					return ret;
				}
		}
	}
	return ret;
}

// temp variables, for correct display in new layout, with new cell dimensions
var diffH = 15;
var diffV = 20;

function getRightOffset(topOffset)
{
	var temp;
	if (topOffset >= diffV)
		temp = coord[topOffset - diffV] - diffH;
	else
		temp = 0;
	if (temp < 0)
		alert('topOffset: ' + topOffset + '\ntemp: ' + temp);
	return temp;		
}

	
function setTargetHeights(index)
{
	var num = index[0];								/*number of top-level menu*/
	var offset = initialOffset;
  
	for (var i = 0; i < menu[num].submenu.length; i++)
	{
		menu[num].submenu[i].targetTopOffset = offset;
		menu[num].submenu[i].visible = true;
		offset += (imageHeight[1] + vGapAfter[1]);
//		alert('index[1]: ' + index[1] + '\nlength: '+ menu[num].submenu[i].submenu.length);
		if ((index[1] == i) && (menu[num].submenu[i].submenu.length > 0)) /*display current submenu */
		{
			offset += vGapBeforeSubmenu;
//			alert('In setTargetHeights; index :' + index + ', setting visibility');
			for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
			{
//				document.write(offset + '<br>');
				menu[num].submenu[i].submenu[j].targetTopOffset = offset;
				menu[num].submenu[i].submenu[j].visible = true;
				offset += (imageHeight[2] + vGapAfter[2]);			  
			}		  
			offset += vGapAfterSubmenu;
		}	  
		else /* postion the hidden submenu above the parent element  */
		{
			var tmpOffset = offset - vGapAfterSubmenu - imageHeight[1];
			for (var j = menu[num].submenu[i].submenu.length - 1; j >= 0; j--)
			{
//				document.write(tmpOffset + '<br>');
				menu[num].submenu[i].submenu[j].targetTopOffset = tmpOffset;
				menu[num].submenu[i].submenu[j].visible = false;			  
				tmpOffset -= (imageHeight[2] + vGapAfter[2]);			  
			}		  
		}
	}
	
	tmp = '';

	for (var i = 0; i < menu[num].submenu.length; i++)
	{
		tmp += 'menuitem' + num + i + '\n';
		tmp += 'current:' + menu[num].submenu[i].currentTopOffset + '\n';
		tmp += 'target:' + menu[num].submenu[i].targetTopOffset + '\n';
		for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
		{
			  tmp += 'menuitem' + num + i + j + '\n';
			  tmp += 'current:' + menu[num].submenu[i].submenu[j].currentTopOffset + '\n';
			  tmp += 'target:' + menu[num].submenu[i].submenu[j].targetTopOffset + '\n';
		}
	}
	
//	alert(tmp);	
}

function setHeightsHideSubmenu(index)
{
	var num = index[0];								/*number of top-level menu to height*/


	var offset = 0;

	for (var i = menu[num].submenu.length - 1; i >= 0; i--)
	{
		menu[num].submenu[i].targetTopOffset = offset;
		menu[num].submenu[i].visible = false;
//		alert('index[1]: ' + index[1] + '\nlength: '+ menu[num].submenu[i].submenu.length);

//			var tmpOffset = offset - vGapAfterSubmenu - imageHeight[1];
		var tmpOffset = offset + (imageHeight[1] + vGapAfter[1]) - (vGapAfterSubmenu + imageHeight[2] + vGapAfter[2]);
		for (var j = menu[num].submenu[i].submenu.length - 1; j >= 0; j--)
		{
//				document.write(tmpOffset + '<br>');
			menu[num].submenu[i].submenu[j].targetTopOffset = tmpOffset;
			menu[num].submenu[i].submenu[j].visible = false;			  
			tmpOffset -= (imageHeight[2] + vGapAfter[2]);			  
		}		  
		offset -= (imageHeight[1] + vGapAfter[1]);

	}
	
	tmp = '';

	for (var i = 0; i < menu[num].submenu.length; i++)
	{
		tmp += 'menuitem' + num + i + '\n';
		tmp += 'current:' + menu[num].submenu[i].currentTopOffset + '\n';
		tmp += 'target:' + menu[num].submenu[i].targetTopOffset + '\n';
		for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
		{
			  tmp += 'menuitem' + num + i + j + '\n';
			  tmp += 'current:' + menu[num].submenu[i].submenu[j].currentTopOffset + '\n';
			  tmp += 'target:' + menu[num].submenu[i].submenu[j].targetTopOffset + '\n';
		}
	}
	
//	alert(tmp);	
}


	
function drawMenu()
{
	var output = '';

	//var topOffset = 0; 								/* total offset from the top of the ankering point of a given element*/

	for (var num = 0; num < menu.length; num++)
	{
		for (var i = 0; i < menu[num].submenu.length ; i++)
		{
			topOffset =  menu[num].submenu[i].targetTopOffset;
			menu[num].submenu[i].currentTopOffset = topOffset;
			output += '<div class = "menuitem" id="menuitem' + num + i +'" style="right: ' 
									+ eval( getRightOffset(topOffset + elementVOffset[1]) + indent[1])+ 'px; top: ' + topOffset
									+ 'px; visibility: hidden;">\n';
									//+ 'px;">';
			output += ('<a href = "javascript:openPage(\'' + menu[num].submenu[i].href + '\')">');
			output += ('<img src="' + menu[num].submenu[i].imgsrc + '">');
			output += '</a></div>\n';

			for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
			{
				topOffset = menu[num].submenu[i].submenu[j].targetTopOffset;
				menu[num].submenu[i].submenu[j].currentTopOffset = topOffset;
				//var visib = menu[num].submenu[i].submenu[j].visible ? 'visible' : 'hidden';
				output += '\t<div class = "menuitem" id="menuitem' + num + i + j +'" style="right: ' 
									+ eval(getRightOffset(topOffset + elementVOffset[2]) + indent[2])+ 'px; top: ' + topOffset 
									+ 'px; visibility: hidden;">\n' ;
									//+ 'px;">' ;
				output += ('\t<a href= "javascript:openPage(\'' + menu[num].submenu[i].submenu[j].href + '\')">');
				output += ('<img src="' + menu[num].submenu[i].submenu[j].imgsrc + '">');
				output += '</a></div>\n';

			}

		}
	}
	document.write(output);
//	alert(output);
}

function updateMenu(newPage)
{
	currentPage = newPage;
//	index = getMenuIndex(currentPage);
//	setTargetHeights(index);
//	animateMenu();  
	newIndex = getMenuIndex(currentPage);
	setTargetHeights(newIndex);
	if (newIndex[0] == index[0] || index[0] == -1)
	{
		index = newIndex;
		hiding = false;
	}
	else
	{
		setHeightsHideSubmenu(index);
		hiding = true;
		animSpeed = 2;
	}
	animateMenu();
}

function sign(number)
{
	if (number > 0)
		return 1;
	else if (number < 0)
		return -1;
	else
		return 0;  
}

function animateMenu()
{
	var done = true;
	var num = index[0];								/*number of top-level menu*/
	var	hidingThreshold = initialOffset - 1;
	
	for (var i = 0; i < menu[num].submenu.length; i++)
	{
		var diff = menu[num].submenu[i].currentTopOffset - menu[num].submenu[i].targetTopOffset;
		elem = document.getElementById('menuitem'+num+i);
		if (diff != 0)
		{
			//alert('menuitem' + num + i + '\ncurrent: ' + menu[num].submenu[i].currentTopOffset 							+ '\ntarget: '+ menu[num].submenu[i].targetTopOffset);
			done = false;
			var s = sign(diff);
			menu[num].submenu[i].currentTopOffset -= s * Math.min(animSpeed, Math.abs(diff));
			elem.style.top = menu[num].submenu[i].currentTopOffset + 'px';
			elem.style.right = eval(getRightOffset(menu[num].submenu[i].currentTopOffset+elementVOffset[1])+indent[1])+'px';  
		}
		if (elem.style.visibility == 'visible')
			if (menu[num].submenu[i].currentTopOffset < hidingThreshold)				
			{
				menu[num].submenu[i].visible = false;
				elem.style.visibility = 'hidden';
			}
		if (elem.style.visibility == 'hidden')
			if (menu[num].submenu[i].currentTopOffset >= hidingThreshold)
			{
				menu[num].submenu[i].visible = true;
				elem.style.visibility = 'visible';
			}  



		for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
		{
			elem = document.getElementById('menuitem'+num+i+j);
			var diff = menu[num].submenu[i].submenu[j].currentTopOffset - menu[num].submenu[i].submenu[j].targetTopOffset;
			if (diff != 0)
			{
//				alert('menuitem' + num + i + j + '\ncurrent: ' + menu[num].submenu[i].submenu[j].currentTopOffset 							+ '\ntarget: ' + menu[num].submenu[i].submenu[j].targetTopOffset);

				done = false;
				var s = sign(diff);
				menu[num].submenu[i].submenu[j].currentTopOffset -= s * Math.min(animSpeed, Math.abs(diff));
				elem.style.top = menu[num].submenu[i].submenu[j].currentTopOffset + 'px';
				elem.style.right = eval(getRightOffset(menu[num].submenu[i].submenu[j].currentTopOffset+elementVOffset[2])+indent[2])+'px';  
			}
//			if (menu[num].submenu[i].submenu[j].visible)
			if (elem.style.visibility == 'visible')
				if (menu[num].submenu[i].submenu[j].currentTopOffset < 
//					(menu[num].submenu[i].currentTopOffset + imageHeight[1]))// + vGapAfter[1] + vGapBeforeSubmenu))
					Math.max(menu[num].submenu[i].currentTopOffset + imageHeight[1], hidingThreshold))// + vGapAfter[1] + vGapBeforeSubmenu))
				{
					menu[num].submenu[i].submenu[j].visible = false;
					elem.style.visibility = 'hidden';
				}
//			if (!menu[num].submenu[i].submenu[j].visible)
			if (elem.style.visibility == 'hidden')
				if (menu[num].submenu[i].submenu[j].currentTopOffset >= 
//					(menu[num].submenu[i].currentTopOffset + imageHeight[1]))// + vGapAfter[1] + vGapBeforeSubmenu))
					Math.max(menu[num].submenu[i].currentTopOffset + imageHeight[1], hidingThreshold))// + vGapAfter[1] + vGapBeforeSubmenu))
				{
					menu[num].submenu[i].submenu[j].visible = true;
					elem.style.visibility = 'visible';
//					alert('jo!');
				}  
		}
	}
	if (!done)
	{
//		alert('go!');
		setTimeout("animateMenu()", 10);	  
	}
	else if(hiding)
	{
		index = newIndex;
		animSpeed = 1;		
		setTimeout("animateMenu()", 10);	
		hiding = false;

	}
}

//set the position so that all the menu is hidden
function setInitialHeights()
{
	for (var num = 0; num < menu.length; num++)
	{
		//var offset = initialOffset - 1;
		var offset = 0;

		for (var i = menu[num].submenu.length - 1; i >= 0; i--)
		{
			menu[num].submenu[i].targetTopOffset = offset;
			menu[num].submenu[i].visible = false;
	//		alert('index[1]: ' + index[1] + '\nlength: '+ menu[num].submenu[i].submenu.length);

//			var tmpOffset = offset - vGapAfterSubmenu - imageHeight[1];
			var tmpOffset = offset + (imageHeight[1] + vGapAfter[1]) - (vGapAfterSubmenu + imageHeight[2] + vGapAfter[2]);
			for (var j = menu[num].submenu[i].submenu.length - 1; j >= 0; j--)
			{
//				document.write(tmpOffset + '<br>');
				menu[num].submenu[i].submenu[j].targetTopOffset = tmpOffset;
				menu[num].submenu[i].submenu[j].visible = false;			  
				tmpOffset -= (imageHeight[2] + vGapAfter[2]);			  
			}		  
			offset -= (imageHeight[1] + vGapAfter[1]);

		}
	}	
	tmp = '';

	for (var num = 0; num < menu.length; num++)
	{
		for (var i = 0; i < menu[num].submenu.length; i++)
		{
			tmp += 'menuitem' + num + i + '\n';
			tmp += 'current:' + menu[num].submenu[i].currentTopOffset + '\n';
			tmp += 'target:' + menu[num].submenu[i].targetTopOffset + '\n';
			for (var j = 0; j < menu[num].submenu[i].submenu.length; j++)
			{
				  tmp += 'menuitem' + num + i + j + '\n';
				  tmp += 'current:' + menu[num].submenu[i].submenu[j].currentTopOffset + '\n';
				  tmp += 'target:' + menu[num].submenu[i].submenu[j].targetTopOffset + '\n';
			}
		}
	}	
//	alert(tmp);	
}

setInitialHeights();