/******************************************************************************************

 DHTML Pop-down menu system

 

 In order to have a working DHTML dropdown menu, we need some flexibility with when the menu

 closes -- the user needs to have a second or two where he can mouse off a text link without 

 "dropping" the menu. This system works through a "heartbeat"--a function that runs every 

 half second or so. The system keeps a running "heartbeat count" and a "target count" on which

 the menu will be closed. When the user is moused over the navigation tab or a link on the 

 DHTML menu, the "heartbeat target" is pushed back. Once the user mouses out, the "target" stops

 being pushed back and the heartbeat count reaches it, closing the menu. (note: we don't really

 keep track of the number of beats since the page was loaded... since all that matters is the

 DIFFERENCE between the "current" count and the "target" count, the numbers never get much larger

 than the largest possible difference between them (set by the SECONDS_TO_CLOSE variable).

 

 To manage the system, you need to include this script file in the HTML header of the host document

 and add the following items:

 

 To the HREF of each "tab" image (the triggers for the menus):

 	 onmouseover="fnShowMenu(<menu#>);" onmouseout="fnHideMenu(<menu#>);"

	 	(where <menu#> is a zero-based index of the tabs ... the first tab will have fnShowMenu(0),

		the second will have fnShowMenu(1), etc.)

		

 To each IMG tag:

	name="menu_tab_<menu#>"

	

 In a SCRIPT block above the tabs:

		iCurrentSection = <section#>;

		(where section# is the index of the current section within the site)

		

		This keeps the "current" tab in its "on" color and prevents it from "mousing out"

		

 You also need to set the constants in the area marked "EDITABLE" below. More information can

 be found there.

 

 -AK 05/01/2002 1:15 PM



 ******************************************************************************************/



/******************************************************

 * DECLARE & INIT VARIABLES

 ******************************************************/



// CONSTANTS

var BEAT_FREQUENCY; // how often the "heartbeat" occurs, in ms

var SECONDS_TO_CLOSE; // how many seconds after mouseout the menu closes. This is only accurate to within BEAT_FREQUENCY milliseconds

var BEATS_TO_CLOSE; // how many "heartbeats" after mouseout to keep the menu open (calculated)



var SUBNAV_OFF_BGCOLOR; // the bg color of the menu table

var SUBNAV_ON_BGCOLOR; // the moused-over bg color of the menu table



// GLOBAL STATUS VARS (read by the heartbeat)

var bMenuIsOpen = false; 

var bMouseIsOver = false; 

var iCurrentBeat = 0; // the current # of heartbeats

var iBeatToClose = -1; // the beat to close the page at



var iCurrentSection = -1; // this is set in the HTML near the tabs

var iLastLitTab = -1; // so it will know which tab to turn off on mouseout



var sBrowserType = '';

var bPageIsLoaded = false;



// MENU LINK CONTAINER VARS



var arrMenu; // a 3D array containing all the arrLinks and arrLabels

var arrLinks;

var arrLabels;



var arrLeftCoords;

var arrImageNames;

var arrImagePreloadOn;

var arrImagePreloadOff;

var iNumLinks;



arrMenu = new Array();





/******************************************************

 * *** EDIT HERE *** EDITABLE STUFF *** EDIT HERE ***

 ******************************************************/

/*

This is how often the "heartbeat" that checks for open menus runs. Don't

change this unless you know what you're doing. 

*/



BEAT_FREQUENCY = 500;



/* 

This is where you set how long it takes for the subnav to close. It should be accurate to within a half a second.

*/


SECONDS_TO_CLOSE = 0;

//SECONDS_TO_CLOSE = 2;



/* 

This is where you set the colors for the subnav table:

*/



SUBNAV_OFF_BGCOLOR = '#1E569F'; // the default color of the submenu bg



SUBNAV_ON_BGCOLOR  = '#0066CC'; // the "mouseovered" color of the submenu bg



/* 

This is where you set the left margins for each menu. They're preset

to match the formatting of the tabbed navigation.

*/



arrLeftCoords = new Array(0,98,241,354,494,0);



/* 

This is where you set the names of the tab navigation images. The images

should be named <name>_on.gif and <name>_off.gif to make the rollovers work

properly.

*/



arrImageNames = new Array('home','releases','docs','project','support','news','groups');



/*

This is where you change the subnavigation links and text. For each submenu, you need three lines of code:



Line 1, to specify the URLS that you want:

arrLinks = new Array('http://link1', 'http://link2', 'http://link3');



Line 2, to specify the labels for those links:

arrLabels = new Array('Link 1 Label', 'Link 2 Label', 'Link 3 Label');



and Line 3, to add those links to the system

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);



Edit ONLY the stuff between single quotes in lines 1 and 2 to set the subnav links to whatever

you want them to be. DO NOT EDIT LINE 3. Be SURE that line 1 and line 2 have the same number of items.

Repeat these three lines for every main navigation link that will have a submenu. 



-AK 

*/

// FIRST TAB -- HOME


arrLinks = false;

arrLabels = false;

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);



// SECOND TAB - RELEASE

arrLinks = new Array('/gafirst/hrms/releases/current/' , '/gafirst/hrms/releases/upcoming/' , '/gafirst/hrms/releases/relinfo.phtml', '/gafirst/hrms/releases/rel751.phtml', '/gafirst/hrms/docs/ki.phtml');

arrLabels = new Array('Current Release' , 'Upcoming Release', 'Release v8', 'Release v7.51', 'Known Issues');

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);



// 3RD TAB -- DOCUMENTATION

arrLinks = new Array('/gafirst/hrms/docs/newsletter/' , '/gafirst/hrms/docs/self-service/' , '/gafirst/hrms/docs/audit/' , '/gafirst/hrms/docs/metrics/' , '/gafirst/hrms/docs/busproc.phtml', '/gafirst/hrms/docs/budget_mod/', '/gafirst/hrms/docs/ftc.phtml', '/gafirst/hrms/docs/mcr/', '/gafirst/hrms/docs/ki.phtml', '/gafirst/hrms/docs/mfe/', '/gafirst/hrms/docs/training/' , '/gafirst/hrms/docs/workshops/');

arrLabels = new Array('HRMS Newsletter', 'Self Service' , 'Audit Requirements', 'Metrics', 'Business Processes', 'Budget Module', 'Foundation Table Changes', 'Model Change Review', 'Known Issues', 'MFE and HRDM', 'Training' , 'Workshops/Presentations');

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);



// 4TH TAB -- PROJECT INFO

//arrLinks = new Array('/gafirst/hrms/project/hardware/',   '/gafirst/hrms/project/eapps1/' , '/gafirst/hrms/project/timea/' ,   '/gafirst/hrms/docs/mfe/');

//arrLabels = new Array('Hardware/Forms', 'HRMS Self-Service' , 'Time &amp; Attendance' , 'MFE and HRDM');

arrLinks = new Array('/gafirst/hrms/project/eapps1/' , '/gafirst/hrms/project/timea/' ,   '/gafirst/hrms/docs/mfe/');

arrLabels = new Array('HRMS Self-Service' , 'Time &amp; Attendance' , 'MFE and HRDM');

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);



//5TH TAB - SUPPORT

arrLinks = new Array('/gafirst/hrms/support/faq/', '/gafirst/hrms/docs/mcr/', '/customer_services/ticket/');

arrLabels = new Array('FAQ', 'Model Change Review', 'Submit a Support Ticket');

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);


// 6TH TAB - WHAT'S NEW

arrLinks = false;

arrLabels = false;

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);


// 7TH TAB - USER GROUPS

arrLinks = false;

arrLabels = false;

arrMenu[arrMenu.length] = new Array(arrLinks, arrLabels);


/******************************************************

 * *** END EDITING *** END EDITING *** END EDITING *** 

 ******************************************************/



iNumLinks = arrMenu.length;

BEATS_TO_CLOSE = Math.round((SECONDS_TO_CLOSE * 1000) / BEAT_FREQUENCY);



/******************************************************

 * BUILD PRELOADED IMAGE ARRAYS

 ******************************************************/



arrImagePreloadOn = new Array();

for (i=0; i < arrImageNames.length; i++) {

	arrImagePreloadOn[i] = new Image();

//	arrImagePreloadOn[i].src = './images/' + arrImageNames[i] + '_on.gif';

	

	arrImagePreloadOn[i].src = '/gafirst/hrms/images/' + arrImageNames[i] + '_on.gif';



}



arrImagePreloadOff = new Array();

for (i=0; i < arrImageNames.length; i++) {

	arrImagePreloadOff[i] = new Image();

//	arrImagePreloadOff[i].src = './images/' + arrImageNames[i] + '_off.gif';

arrImagePreloadOff[i].src = '/gafirst/hrms/images/' + arrImageNames[i] + '_off.gif';



}



/******************************************************

 * HEARTBEAT FUNCTION

 ******************************************************/



function fnPulse() {



	if (sBrowserType != 'xx') {

		// keep the "heartbeat count" as low as possible ... we only need keep track of the 

		// last BEATS_TO_CLOSE beats

		if (iCurrentBeat > BEATS_TO_CLOSE) {

			iBeatToClose = iBeatToClose - iCurrentBeat;

			iCurrentBeat = 0;

		}



		if (bMenuIsOpen) {

			if (bMouseIsOver) {

				fnExtendBeat();			

			} else {



				if (iBeatToClose <= iCurrentBeat) {

					bMenuIsOpen = false;

					iBeatToClose = -1;

					fnCloseAllMenus();



					if (iLastLitTab >= 0 && iLastLitTab != iCurrentSection) {

						document.images['menu_tab_' + iLastLitTab].src = arrImagePreloadOff[iLastLitTab].src

					}



					iLastLitTab = -1;		



				} // end if (iBeatToClose <= iCurrentBeat)



			} // end if (bMouseIsOver)





		} // end if (bMenuIsOpen)



		iCurrentBeat++;



		setTimeout('fnPulse();', BEAT_FREQUENCY);

	}	

}



function fnExtendBeat() {

	iBeatToClose = iCurrentBeat + BEATS_TO_CLOSE;

}





/******************************************************

 * BODYLOAD FUNCTIONS

 ******************************************************/



 

function fnLoadBody() {



	bPageIsLoaded = true; // makes sure menus don't draw until the page stops loading

	fnPulse();



}



function fnGetBrowserType() {

	// ie, n4, ne, xx

	// TODO: Make this work



	if (document.all) {

		sBrowserType = 'ie';

	} else if (document.layers) {

		sBrowserType = 'ne';

	} else if (document.getElementById) {

		sBrowserType = 'n6';

	} else {

		sBrowserType = 'xx';

	}



}





/*************************************************

 * MAGIC TABLE BACKGROUND SCRIPTS

 *************************************************/



function fnDarken(iCellToDarken) {



	if (sBrowserType == 'ie' || sBrowserType == 'n6') {

		fnGetDiv('tablemenu_left_' + iCellToDarken).backgroundColor = SUBNAV_ON_BGCOLOR;

		fnGetDiv('tablemenu_center_' + iCellToDarken).backgroundColor = SUBNAV_ON_BGCOLOR;

	}

}



function fnLighten(iCellToLighten) {



	if (sBrowserType == 'ie' || sBrowserType == 'n6') {

		fnGetDiv('tablemenu_left_' + iCellToLighten).backgroundColor = SUBNAV_OFF_BGCOLOR;

		fnGetDiv('tablemenu_center_' + iCellToLighten).backgroundColor = SUBNAV_OFF_BGCOLOR;

	}



}

/******************************************************

 * MENU SHOW/HIDE FUNCTIONS

 ******************************************************/

 

function fnShowMenu(iMenuNum) {

	var objDiv;

	var iNewLeft;

	var i;

	if (bPageIsLoaded) {

		if (sBrowserType != 'xx') {



			/***********************************************

			 * FLIP THE NEW TAB ON AND THE OLD TAB OFF

			 ***********************************************/



			if (

				iLastLitTab >= 0 && iLastLitTab != iCurrentSection && iLastLitTab != iMenuNum) {

				document.images['menu_tab_' + iLastLitTab].src = arrImagePreloadOff[iLastLitTab].src

			}



			if (iMenuNum != iCurrentSection && iLastLitTab != iMenuNum) {

				document.images['menu_tab_' + iMenuNum].src = arrImagePreloadOn[iMenuNum].src

			}



			iLastLitTab = iMenuNum;

			 

			/***********************************************

			 * SHOW THE MENU

			 ***********************************************/

			fnCloseAllMenus();



			if (arrMenu[iMenuNum] != false) {

//			if (true) {

				iActiveMenuNum = iMenuNum

				objDiv = fnGetDiv('menu' + iMenuNum);

				objDiv.visibility = 'visible';



				/***********************************************

				 * SET THE GLOBALS

				 ***********************************************/

				bMouseIsOver = true;

				bMenuIsOpen = true;

				fnExtendBeat();	

			}

	

			 

	

		} else {

		

	// just do the mouseover

			 document.images['menu_tab_' + iMenuNum].src = '/gafirst/hrms/images/' + arrImageNames[iMenuNum] + '_on.gif';

		}

	}	

}



function fnHideMenu(iMenuNum) {



	if (bPageIsLoaded) {

		bMouseIsOver = false;

	}

	

	if (sBrowserType == 'xx') {

		// turn off the tab for non-DHTML browsers

	 	if (iMenuNum != iCurrentSection) {

			document.images['menu_tab_' + iMenuNum].src = '/gafirst/hrms/images/' + arrImageNames[iMenuNum] + '_off.gif';

		}

	}

}



function fnMenuOn() {

	bMouseIsOver = true;

	fnExtendBeat();	

}



function fnMenuOff() {

	bMouseIsOver = false;

}





/******************************************************

 * CLOSE/HIDE FUNCTIONS

 ******************************************************/



function fnGetDiv(sName) {

	if (sBrowserType == 'n6') {

		return document.getElementById(sName).style;

	} else if (sBrowserType == 'ne') {

		return document.layers[sName];

	} else if (sBrowserType == 'ie') {

		return document.all[sName].style;

	}

}



function fnCloseAllMenus() {

	var objDiv;

	var i;



	for (i=0; i < iNumLinks; i++) {

		if (arrMenu[i] != false) {

			objDiv = fnGetDiv('menu' + i);

			objDiv.visibility = 'hidden';

		}

	}

	

}





/*************************************************

 * MENU DRAWING FUNCTIONS

 *************************************************/



function fnDrawMenus() {

	var i;

	var j;

	var iNumSubLinks;

	var arrMenuPage;

	var arrMenuItem;

	var sLabel;

	var sLink;

	document.write ('<span id=\'E1\'>');

	if (sBrowserType != 'xx') {


		for (i=0; i < iNumLinks; i++) {
		
			arrMenuPage = arrMenu[i];

			if (arrMenuPage != false) {

				iNumSubLinks = arrMenuPage[0].length;
				
				
				document.write ('<div id=\'menu' + i + '\'>');

		document.write ('<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" bordercolor=\"#FFFFFF\"><tr valign=\"top\"><td>');

				document.write ('<table border=\'0\' align=\'left\' cellpadding=\'2\' cellspacing=\'0\'>');

	// THIS ROW ADDS A SPACE ABOVE THE MENU

		//		document.write   ('<tr>');

		//		document.write     ('<td width=\'140\' height=\'5\' class=\'bordercell\' colspan=\'4\'>');

			//	document.write       ('<img width=\'104\' height=\'5\' src=\'/gafirst/hrms/images/spacer.gif\' />');

			//	document.write       ('<img alt=\'\' hspace=\"0\" vspace=\"0\" width=\'140\' height=\'1\' src=\'/gafirst/hrms/images/spacerblk.gif\' />');

			//	document.write     ('</td>');

			//	document.write   ('</tr>');			

	

	

				for (j=0; j < iNumSubLinks; j++) {

					sLink = arrMenuPage[0][j];

					sLabel = arrMenuPage[1][j];

	

					document.write   ('<tr>');

			// 		document.write     ('<td width=\'1\' height=\'5\' class=\'bordercell\'>');

				//	document.write       ('<img alt=\'\' width=\'1\' height=\'5\' src=\'/gafirst/hrms/images/spacer.gif\' />');

				//	document.write     ('</td>');

	

		// MUST HAVE THIS CELL OR ROLLOVER CELL COLOR DOESN'T WORK

		

					document.write   ('<td align=\"center\" valign=\"top\" id=\'' + 'tablemenu_left_' + i + '_' + j + '\' width=\'1\' height=\'0\' class=\'bodycell\'>');



				document.write       ('<img alt=\'\' width=\'2\' height=\'1\' src=\'/gafirst/hrms/images/spacer.gif\' />');

					document.write     ('</td>');

					

	// ADJUST THE WIDTH OF THE DROP DOWNS HERE

					

					document.write   ('<td id=\'' + 'tablemenu_center_' + i + '_' + j + '\' width=\'150\' class=\'bodycell\'>');

					document.write   ('<a class=\'sublink\' href=\'' + sLink + '\' ');

					document.write   (' onMouseOver=\"fnDarken(\'' + i + '_' + j + '\'); fnMenuOn();\") ');

					document.write   (' onMouseOut=\"fnLighten(\'' + i + '_' + j + '\'); fnMenuOff();\" ');

					document.write   ('>');

					document.write   (sLabel);

					document.write   ('</a>');

	

					document.write     ('</td>');

		//			document.write     ('<td width=\'1\' height=\'5\' class=\'bordercell\'>');

			//		document.write       ('<img alt=\'\' width=\'1\' height=\'5\' src=\'/gafirst/hrms/images/spacer.gif\' />');

			//		document.write     ('</td>');

					document.write   ('</tr>');

	

	//				document.write   ('<tr>');

		//			document.write     ('<td width=\'1\' height=\'1\' class=\'bordercell\'>');

		//			document.write       ('<img alt=\'\' width=\'1\' height=\'1\' src=\'/gafirst/hrms/images/spacer.gif\' />');

		//			document.write     ('</td>');

		//			document.write     ('<td width=\'102\' height=\'1\' class=\'spacercell\' colspan=\'2\'>');

		//		document.write       ('<img alt=\'\' width=\'102\' height=\'1\' src=\'/gafirst/hrms/images/spacer.gif\' />');

		//			document.write     ('</td>');

		//			document.write     ('<td width=\'1\' height=\'1\' class=\'bordercell\'>');

		//			document.write       ('<img alt=\'\' width=\'1\' height=\'1\' src=\'/gafirst/hrms/images/spacer.gif\' />');

		//			document.write     ('</td>');

		//			document.write   ('</tr>');

					

				

				}

				// end row item

					

	//			document.write   ('<tr>');

		//		document.write     ('<td width=\'104\' height=\'1\' class=\'bordercell\' colspan=\'4\'>');

		//		document.write       ('<img width=\'104\' height=\'1\' src=\'/gafirst/hrms/images/spacer.gif\' />');

		//		document.write     ('</td>');

		//		document.write   ('</tr>');			 

	

				document.write ('</table>');

	document.write ('</td></tr></table>');

				document.write ('</div>');
			
				

				

				

			} // end big for loop

		} // end "if there's a menu for this one"

	} // end "if ie or netscape"
	
		document.write ('</span>');

} // end fnDrawMenus

      



/*************************************************

 * STYLE DRAWING FUNCTIONS

 *************************************************/



function fnDrawMenuCSS() {

	

	var i;

	if (sBrowserType != 'xx') {



		document.write ('<STYLE TYPE=\'text/css\'><!--');

		document.write ('a.sublink {');

		document.write ('color:#FFFFFF;');

		document.write ('font-size:11px;');

		document.write ('font-family:verdana,arial,sans serif;');

		document.write ('font-weight:bold;');

		document.write ('}');



		document.write ('a.sublink:link    { color: #FFFFFF; }');

		document.write ('a.sublink:visited { color: #FFFFFF; }');

		document.write ('a.sublink:active  { color: #FFFFFF; }');



		document.write ('td.bordercell {');

//		document.write (	'background-color:#FFDB92;');

		document.write ('background-color:#FFFFFF;');

		document.write ('}');



		document.write ('td.bodycell {');

		document.write ('background-color:' + SUBNAV_OFF_BGCOLOR + ';');

		document.write ('}');



		document.write ('td.spacercell {');

		document.write ('background-color:' + SUBNAV_ON_BGCOLOR + ';');

		document.write ('}');


		for (i=0; i < iNumLinks; i++) {
	
			document.write ('#menu' + i + ' {');

			document.write (' position: absolute;');

			document.write (' left: ' + arrLeftCoords[i] + 'px; ');
			
			document.write (' top: 137px; ');   // PIXELS FROM THE TOP 

			document.write (' visibility: hidden; ');
			
			document.write ('	z-index: ' + i + '; ');

//			document.write (' z-index: ' + 2 + '; ');

			document.write ('}');
			
		
		}
		
			
			document.write ('--></STYLE>');

	}

}



/*************************************************

 * RUN PRELOAD FUNCTIONS	

 *************************************************/



fnGetBrowserType();

fnDrawMenuCSS();

fnDrawMenus();