var mmstartleft = 140 ;    // where from the left the main menu will start
var vmenubackground = "/graphics/btntmp0.png"
var menutimer ;

var voutlinecolor = "#002222" ; 

// Arrays for the Main menu items
mainmenuarray = new Array("Home Page*0*/index.php",
			  "The Bearhawk*1* ",
			  "The Patrol*1*",
			  " Kits *1* ",
			  "Parts Store*1*",
			  "Resources & Links*1*",
			  "Contact Us*0*/Contact/ContactMain.php" ) ;

// create the arrays of arrays that contain the submenu items
// each array item is a two element '*' separated string that contains
// 1. the display string  * 2. the location to direct the user to
submarray1 = new Array("") ;
submarray2 =  new Array("Bearhawk Specs*/Bearhawk/BHspecs.php",
			"Bearhawk Description*/Bearhawk/BHdescription.php",
			"Testimonials*/testimonials/index.php",
			"Photos*/BHgallery/index.php"  ,
			"Bearhawk Plans*/Bearhawk/Bearhawkplans.php") ;

submarray3 = new Array("Patrol Specs*/Patrol/Pspecs.php",
			"Patrol Description*/Patrol/Pdescription.php",
			"Photos*/Patrolgallery/index.php"  ,
			"Patrol Plans*/Patrol/Patrolplans.php" );

submarray4 =  new Array("Bearhawk Kits*/Kits/KitsMain.html",
			"Patrol Kits*/Kits/PKitsMain.html", 
			"Online Plant Tour*/Tour/TourMain.html",
			"Assembly Manual*/assemblymanual/index.html" ,
			"Builders Tips*/usermanual/index.html" ) ;

submarray5 = new Array("Bearhawk & misc parts*/estore/estoreMain_m.html",
			"Patrol parts*/estore/estore_patrol.html",
                	"Preferred Vendors*/vendors/preferredvendors.html" ) ;

submarray6 = new Array(  "News & Articles*/News/NewsMain.php",
                "Bear-tracks Newsletter*/bear-tracks/index.htm"
                        ) ;

var menutimer  ;

function rollin(obj)
{
        obj.style.color="#4444cc" ;
}
function rollout(obj)
{
        obj.style.color= voutlinecolor ;
}

function showpopup(obj)
{
	// find out which menu item this is by getting the last character from the id
	var vid = obj.id ;
	var submenu_no = vid.charAt(vid.length - 1 ) ;


	//now stop the old  menu timer if any
	stopmenutimer() ;

	// now get the id of the submenu
	var vpop = eval("document.getElementById(\"submenu" +submenu_no + "\")") ;
	
	var vLeft = findLeft(obj) + 10 ;
	var vTop = findTop(obj) + 18 ;


	if(vpop!=null)
	{        
		vpop.style.top = vTop  + "px" ;
		vpop.style.left= vLeft + "px" ;

			// clear out the previous contents of this element
		vpop.innerHTML = "" ;
			// now dynamically add the individual submenu items
			// this will allow me to swap this stuff out at runtime
			// first find out if the appropriate array exists
		var varr = eval("submarray" + submenu_no) ;
		if(varr)
		{
			var vinner = "" ;
			for( ii=0 ;ii<varr.length ; ii++)
			{
				// get the first part of the array element
				var vsplit = varr[ii].split("*") ;	
				vinner= vinner +"&nbsp;<a href=\""+ vsplit[1]+"\"  >"+
						 vsplit[0]+ "</a><br>"  ;
			}
			vpop.innerHTML = vinner ;
		}

	                vpop.onmouseover = function() { holdpopup(this) ;} ;
	                vpop.onmouseout  = function() { setmenutimer() ;} ;

	}
		// set the menu timer so that this popup
		// won't just hang around forever	
	 menutimer =setTimeout("stopmenutimer()",2000) ;
}

function findLeft(obj)
{
	var curleft  = 0;
	if (obj.offsetParent) 
	{
		do 
		{
			curleft += obj.offsetLeft;
		} while (obj = obj.offsetParent);
	}
	return curleft ;
}

function findTop(obj) 
{
	var curtop = 0;
	if (obj.offsetParent) {
		do {
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return curtop ;
}


function setmenutimer(submenu)
{
	menutimer =setTimeout("stopmenutimer()",2000) ;
}

function stopmenutimer()
{
	if(menutimer)
	{
		clearTimeout(menutimer) ;
	}

	// now clear out all the submenus
	var vindex = 1 ;
	var vpop = true ;
	while(vpop )
	{	
		// get the sub menu element
		vpop = eval("document.getElementById(\"submenu" +vindex + "\")") ;
		if(vpop)  vpop.style.top = "-140px" ;		
		vindex++ ;
	}
	// now get all the main menu elements
	vindex = 1 ;
	var vmain = true ;
	while(vmain)
	{
		vmain = eval("document.getElementById(\"mainmenu" + vindex + "\")") ;
		if(vmain)  vmain.style.color= voutlinecolor ;	
		vindex++ ;
	}
}

function holdpopup(obj)
{
	// this should hold this submenu up indefinitely
	clearTimeout(menutimer) ;

}

function closepopup(obj)
{
	//rollout(obj) ;
        obj.style.color= voutlinecolor ;
       // now get the id of the submenu
	var vid = obj.id ;
	var submenu_no = vid.charAt(vid.length -1 ) ; 

        var vpop = eval("document.getElementById(\"submenu" +submenu_no + "\")") ;
        vpop.style.top = "-140px" ;
}


// get the number of main menu items
var mainmenuitems = mainmenuarray.length ;

// find the container to align the nav menu
var vNavDiv = document.getElementById('navdiv') ;

// set all the menu divs with default values
var mmenustyle =  "cursor:pointer;font-weight:bold ;display:inline; " + 
		  "text-align:center; font-family:'Times New Roman';"+
		  "font-size:11px;color:"+ voutlinecolor + ";" +
		  " z-index:4;position:relative;" +
		  "margin-left:5px;margin-right:5px;" +
		  "padding-left:5px;padding-right:5px;padding-top:4px;padding-bottom:4px;" ;


/////// main menu div creation here

for(xi=1 ; xi<=mainmenuitems ;xi++)
{
	// get the main menu array items and split it to get all the descriptions
	var vsplit = mainmenuarray[xi-1].split("*") ;	
	var menutext = vsplit[0] ;  // the main menu text 
	var vflag = vsplit[1] ;     // a flag to show whether there is a submenu
	var vlink = vsplit[2] ;     // a <a href... text 

		// create the elements needed for this menuitem
	var vmdiv = document.createElement('div') ;
	if(vflag == "1")
	{
		vmdiv.onmouseover = function() { showpopup(this) ;} ;
	//	vmdiv.onmouseout  = function() { setmenutimer() ;} ;
	}
	if(vflag == "0")
	{
		// I need to use an 'eval' here to be able to get vlink in there properly
		eval( " vmdiv.onclick = function() { location='"+vlink+"'  ; } ") ; 
		vmdiv.onmouseover = function() { stopmenutimer() ;  } ;
	}

	vmdiv.style.cssText = mmenustyle ;
	
	vmdiv.setAttribute("id","mainmenu" + xi ) ;
	if(vflag == "1")
	{
		vmdiv.innerHTML = "<span onMouseOver=\"showpopup(this)\">" + menutext + "</span>" ;
	}else vmdiv.innerHTML = menutext ;
	
//	vspan = document.createElement("<a>") ;
//	vspan.innerHTML = menutext ;
//
  //      if(vflag == "1")
//        {
//                vspan.onmouseover = function() { showpopup(this) ;} ;
//        }


//	vmdiv.appendChild(vspan) ;



//	vmdiv.innerHTML = menutext;

	vNavDiv.appendChild(vmdiv) ;	
	
	// get the displayed width of this menu item
	var vmdivwidth =  vmdiv.offsetWidth ;
	var vmdivheight = vmdiv.offsetHeight ;
	// now create an img that will fit in this width
	var vmdivimg = document.createElement('img') ;
	vmdivimg.setAttribute('src',vmenubackground) ;
	vmdivimg.setAttribute('width',vmdivwidth) ;
	vmdivimg.setAttribute('height',vmdivheight) ;
	// now set the style for the image so that it is behind the text
	vmdivimg.style.cssText = "z-index:-2;position:absolute;top:1px;left:1px;display:inline;" ;


	// add this to this main menu div
	vmdiv.appendChild(vmdivimg) ;

	// and here I'll create the dropdown submenu item needed for this menu item
	var vsubdiv = document.createElement('div') ;

var submenustyle = "border:1px;border-style:solid;padding:4px;"+
                   "background-color:#eeeeee;position:absolute;" +
                   "width:150px;top:-140px;font-weight:bold ;" +
                   "font-family:'Times New Roman'; font-size:11px;" +
                   "color:"+voutlinecolor+ ";z-index:10; text-align:left ; " ;
     
	vsubdiv.style.cssText = submenustyle ;
	vsubdiv.setAttribute("id", "submenu" + xi ) ;
	vsubdiv.onmouseover = function() {  holdpopup(this) ; } ;
	vsubdiv.onmouseout  = function() {  setmenutimer() ; } ;

	vNavDiv.appendChild(vsubdiv) ;
}