// This file has functions that will allow one to use cool sliding menus
// Written by Edward M Jakubowski for www.elamsdesigns.com
//
// Menu Directions:
// 1. Place the MainMenuDiv somewhere on your HTML page. 
//   <div id="MainMenuDiv"/>
// 2. Define the MainMenu Array like the following Example:
//   var MainMenu = new Array(3);
//   MainMenu[0] = "Test1";
//   MainMenu[1] = "Jewelry";
//   MainMenu[2] = "Woodwork";
// 3. Define the SubMenu# arrays and optionally specify the link like the following Example:
//   var SubMenu0 = new Array(4);
//   SubMenu0[0] = "Elam's Designs;ElamsDesigns.html";
//   SubMenu0[1] = "Charlotte Elam";
//   SubMenu0[2] = "Sherril Elam";
//   var SubMenu1 = new Array(2);
//   SubMenu1[0] = "Necklaces";
//   SubMenu1[1] = "Bracelets";
//   SubMenu1[2] = "Earrings";
// 4. Call the GenerateMainMenu() function to Dynamically create the menu system.  
//   GenerateMainMenu(MainMenu, "MainMenuDiv");
//

var btnvals = new Array(25);
var btnFlgs = new Array(25);
var slideFlg = 0;
function SlideLeftBarDown(con,val)
{
//alert(val);
//alert(eval(val));
//	if (slideFlg == 0)
		SlideBackground(con.id, eval(val), 4, 28);
	eval(val + '=28');
	con.style.color = "#002B80";
}

function SlideLeftBarUp(con,val)
{
//	if (slideFlg == 0)
		SlideBackground(con.id, eval(val), -4, 0);
	eval(val + '=0');
	con.style.color = "#FFFFFF";
}

function SlideBackground(con,val,add,maxval)
{
//	if (val >= maxval)
//		return;	
	//alert(con);
	val += add;
	document.getElementById(con).style.backgroundPosition = '0px ' + val + 'px';
	//alert(aboutusY);
	if ((val < maxval && add > 0) || (val > maxval && add < 0))
	{
		slideFlg = 1;
		setTimeout("SlideBackground('" + con + "'," + val + "," + add + "," + maxval + ")",10);
	}
	else
		slideFlg = 0;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function MouseOverMainMenu(con, subMenuNum, widthVal, maxWidth)
{
	if (eval("typeof(SubMenu" + subMenuNum +")") == "undefined")
		return;
	var sm = document.getElementById('subMenuDiv' + subMenuNum);
	if (sm.style.width.replace('px','') < maxWidth)
		ShowSubMenu(con, subMenuNum, widthVal, maxWidth);
	else
		KeepSubMenuOpen(subMenuNum);
}

function ShowSubMenu(con, subMenuNum, widthVal, maxWidth)
{
	if( btnFlgs[subMenuNum] == 1)
	{
		//KeepSubMenuOpen(subMenuNum);
		//return;
	}
	if (eval("typeof(SubMenu" + subMenuNum +")") == "undefined")
		return;
	var mm = document.getElementById(con);
	var sm = document.getElementById('subMenuDiv' + subMenuNum);
	var x = findPos(mm)[0] + mm.offsetWidth + 5;
	var y = findPos(mm)[1] +5;//+ (mm.offsetHeight /2) - 10;
	widthVal += 5;
	sm.style.visibility = "visible";
	sm.style.position = 'absolute';
	sm.style.left = x + 'px';
	sm.style.top = y + 'px';
	sm.style.width = widthVal + "px";
	if (widthVal < maxWidth)
		setTimeout("ShowSubMenu('" + con + "'," + subMenuNum + "," + widthVal + "," + maxWidth + ")", 10);
	else
	{
		GrowSubMenu(subMenuNum,1);
		//btnFlgs[subMenuNum] = 0;
	}
}

function KeepSubMenuOpen(subMenuNum)
{
	btnFlgs[subMenuNum] = 2;
}

function TimedHideSubMenu(con, subMenuNum, widthVal, maxWidth, step) // this function is used to make sure that the mouse is off the menu
{
	if (eval("typeof(SubMenu" + subMenuNum +")") == "undefined")
		return;
	if (step == 0)
	{
		btnFlgs[subMenuNum] = 1;
		setTimeout("TimedHideSubMenu('" + con + "'," + subMenuNum + "," + widthVal + "," + maxWidth + ",1)", 500);
		return;
	}
	if (step == 1 && btnFlgs[subMenuNum] == 1)
	{
		btnFlgs[subMenuNum] = 0;
		HideSubMenu(con, subMenuNum, widthVal, maxWidth);
		return;
	}
	if (step == 1 && btnFlgs[subMenuNum] == 2)
	{
		btnFlgs[subMenuNum] = 0;
	}
} 

function HideSubMenu(con, subMenuNum, widthVal, maxWidth)
{
	if (eval("typeof(SubMenu" + subMenuNum +")") == "undefined")
		return;
	var pt = document.getElementById('SubMenuTblDiv'+subMenuNum)
	if (pt.offsetHeight > 1)
	{
		ShrinkSubMenu(subMenuNum,pt.offsetHeight);
		setTimeout("HideSubMenu('" + con + "'," + subMenuNum + "," + widthVal + "," + maxWidth + ")", 400);
		return;
	}
	var mm = document.getElementById(con);
	var sm = document.getElementById('subMenuDiv' + subMenuNum);
	var x = findPos(mm)[0] + mm.offsetWidth + 5;
	var y = findPos(mm)[1] +5;//+ (mm.offsetHeight /2) - 10;
	widthVal -= 5;
	sm.style.position = 'absolute';
	sm.style.left = x + 'px';
	sm.style.top = y + 'px';
	sm.style.width = widthVal + "px";
	if (widthVal > maxWidth)
		setTimeout("HideSubMenu('" + con + "'," + subMenuNum + "," + widthVal + "," + maxWidth + ")", 10);
	else
	{
		sm.style.visibility = "hidden";
		btnFlgs[subMenuNum] = 0;
	}
}

function ShrinkSubMenu(subMenuNum, val)
{
	val += -5
	var smtd= document.getElementById('SubMenuTblDiv' + subMenuNum);
	var smpt = document.getElementById('SubMenuPTbl' + subMenuNum);
	if (smtd && val > 1)
	{
		smtd.style.height = val;
		smpt.style.height = 1;
	}
	if (val > 1)
		setTimeout("ShrinkSubMenu(" + subMenuNum + "," + val + ")", 10);		
	else
		smtd.style.height = 1;
}

function GrowSubMenu(subMenuNum, val)
{
	val += 5
	var smtd = document.getElementById('SubMenuTblDiv' + subMenuNum);
	var smtt = document.getElementById('SubMenuTbl' + subMenuNum);
	var smpt = document.getElementById('SubMenuPTbl' + subMenuNum);
	smtd.style.height = val;
	//smpt.style.height = '100%';
	if (val < smtt.offsetHeight)
		setTimeout("GrowSubMenu(" + subMenuNum + "," + val + ")", 10);		
}

function GenerateMainMenu(menuArr, menuDivId)
{
	var md = document.getElementById(menuDivId);
	var i;
	var s;
	var mmHtml;
	mmHtml = "";
	mmHtml += "<table border='0' width='100%' id='MainMenuTbl' cellpadding='0' cellspacing='0' height='325'>\r\n";
	mmHtml += "<tr><td height='26'>&nbsp;</td></tr>\r\n";

	for (i in menuArr)
	{
		mmHtml += "<tr><td id='mmbtn" + i + "' height='26' align='center' background='minibbar4.jpg' style='background-repeat: repeat-x; color:#FFFFFF; font-family:Times New Roman; font-size:14pt'>\r\n";
		mmHtml += menuArr[i] + "</td></tr>\r\n";
	}
	
	mmHtml += "</table>";

	for (i in menuArr)
	{
		if (eval("typeof(SubMenu" + i +")") != "undefined")
		{
			mmHtml += "<div id='subMenuDiv" + i + "' style='overflow: hidden; width: 10px; height: 180px; visibility: hidden; position: absolute; top: 1px;'>";
			mmHtml += "<table width='100%' id='SubMenuPTbl" + i + "' cellspacing='0' cellpadding='0' bgcolor='#FFFFFF'>";
			mmHtml += "<tr><td height='27' onmouseup='ShrinkSubMenu(" + i + ",150)' align='center' bgcolor='#FFFFFF' bordercolordark='#002B80' bordercolor='#002B80' background='minibbar3rot.jpg'>&nbsp;</td></tr>";
			mmHtml += "<tr><td><div id='SubMenuTblDiv" + i + "' style='height: 1px;overflow: hidden;'>";
			mmHtml += "<table width='128' id='SubMenuTbl" + i + "' cellspacing='0' cellpadding='0'>";
			for (s = 0; s < 20; s++)
			{
				if (eval("typeof(SubMenu" + i +"[" + s + "])") != "undefined")
				{
					txt = eval("SubMenu" + i +"[" + s + "]");
					link = "";
					splt = txt.indexOf(';');
					if (splt != -1) // if there is a semicolon in the SubMenu then there is a link
					{
						link = txt.substring(splt+1);
						txt = txt.substring(0,splt);
						mmHtml += "<tr><td onclick=\"window.location.href='" + link + "';\" onmouseover=\"this.style.cursor='pointer'\" id='smbtn" + s + "' height='25' align='center' style='border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px' bgcolor='#FFFFFF' bordercolordark='#002B80' bordercolor='#002B80'>";
					}
					else
					{
						mmHtml += "<tr><td id='smbtn" + s + "' height='25' align='center' style='border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px' bgcolor='#FFFFFF' bordercolordark='#002B80' bordercolor='#002B80'>";
					}
					mmHtml += "<font color='#002B80'>" + txt + "</font></td></tr>";
				}
			}	
			mmHtml += "</table></div>";
			mmHtml += "</td></tr><tr><td height='27' align='center' style='border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px' bgcolor='#FFFFFF' background-repeat: repeat-x; background='minibbar3.jpg'>&nbsp;</td></tr>";
			mmHtml += "</table></div>";
		}
	}	
	
	//alert(mmHtml);
	md.innerHTML = mmHtml;

	for (i in menuArr)
	{
		btnFlgs[i] = 0;
		btnvals[i] = 0;
		cntrl = "document.getElementById('mmbtn" + i + "')";
		tmp = cntrl + ".onmouseover = function() {SlideLeftBarDown(" + cntrl + ",'btnvals[" + i + "]');MouseOverMainMenu(" + cntrl + ".id," + i + ",0,130);};";
		eval(tmp);		
		tmp = cntrl + ".onmouseout = function() {SlideLeftBarUp(" + cntrl + ",'btnvals[" + i + "]');TimedHideSubMenu(" + cntrl + ".id," + i + ",130,0,0);};";
		eval(tmp);
		if (eval("typeof(SubMenu" + i +")") != "undefined")
		{		
			cntrl = "document.getElementById('subMenuDiv" + i + "')";
			tmp = cntrl + ".onmouseover = function() {KeepSubMenuOpen(" + i + ");};";
			eval(tmp);		
			tmp = cntrl + ".onmouseout = function() {TimedHideSubMenu('mmbtn" + i + "'," + i + ",130,0,0);};";
			eval(tmp);
			cntrl = "document.getElementById('SubMenuTblDiv" + i + "')";
			tmp = cntrl + ".onmouseover = function() {KeepSubMenuOpen(" + i + ");};";
			eval(tmp);		
			tmp = cntrl + ".onmouseout = function() {TimedHideSubMenu('mmbtn" + i + "'," + i + ",130,0,0);};";
			eval(tmp);
		}
	}
}