// JavaScript Document

//Global Variables
var intCols = 2; //Number of columns for the icon menu table

//This function is used to create the instance of the menu icon objects
function menuIcon( mouseouticon, mouseovericon, currentpageicon, linkurl, newwindow, alttext ){ //Object for storing image names and link url
	this.MouseOutIcon = mouseouticon;			//Icon to be displayed when mouse is NOT over the menu item
	this.MouseOverIcon = mouseovericon;			//Icon to be displayed when mouse IS over the menu item
	this.CurrentPageIcon = currentpageicon;		//Icon to be displayed when the menu item is on it's associated page
	this.LinkURL = linkurl;						//The URL to load when the menu item is clicked
	this.NewWindow = newwindow;					//Should the URL be displayed in a new window
	this.AltText = alttext
}

//This array will store the menu icon objects created below
var aryMenuIcons = new Array(); //Create array of menuIcons

aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnCatalogUp.png', '/Images/IconMenu/btnCatalogHover.png', '/Images/IconMenu/btnCatalogDown.png','http://catalog.henrico.lib.va.us/uhtbin/cgisirsi/0/0/0/1/774/X/BLASTOFF', true, 'Kids Catalog' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnKinderUp.png', '/Images/IconMenu/btnKinderHover.png', '/Images/IconMenu/btnKinderDown.png', '/kids/ready4k.html', false, 'Ready for Kindergarten' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnEventUp.png', '/Images/IconMenu/btnEventHover.png', '/Images/IconMenu/btnEventDown.png', 'http://www.henricolibrary.org/evanced/lib/eventcalendar.asp?ag=Mother+Goose+(6-24+months),+Toddler+(age+2),+Preschool+(3-5+yrs),+Elementary+(5-11+yrs),+All+ages,+Family,+with+an+adult&et=&df=list&cn=0&private=0&ln=ALL', true, 'Kids Events' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnHomeworkUp.png', '/Images/IconMenu/btnHomeworkHover.png', '/Images/IconMenu/btnHomeworkDown.png', '/kids/homework_help.html', false, 'Homework Help' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnInternetUp.png', '/Images/IconMenu/btnInternetHover.png', '/Images/IconMenu/btnInternetDown.png', '/kids/internet4kids.html', false, 'Internet for Kids' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnFunUp.png', '/Images/IconMenu/btnFunHover.png', '/Images/IconMenu/btnFunDown.png', '/kids/gamesandfun.html', false, 'Just for Fun' );
aryMenuIcons[ aryMenuIcons.length ] = new menuIcon( '/Images/IconMenu/btnGrownupsUp.png', '/Images/IconMenu/btnGrownupsHover.png', '/Images/IconMenu/btnGrownupsDown.png', '/kids/grownups.html', false, 'For Grownups' );

function displayMenu(){
	var x;
	var y = 1;
	var intRows;
	var intCells;
	var intTotalCells;
	var strHTML;
	var strCurrentPage = document.location.pathname; // used to compare current page to the icon's link page.
	
	//First get the number of cells that will make even rows based on the number of columns.  Deal with the left over later.
	intCells = parseInt( String( aryMenuIcons.length / intCols ), 10 ) * intCols; 
	
	//This gets the total cells that will ultimately be in the table.  
	intRows = parseInt( String( aryMenuIcons.length / intCols ), 10 );
	( aryMenuIcons.length % intCols )? intTotalCells = ( intRows + 1 ) * intCols : intTotalCells = intRows * intCols; //If there is a remainder then one more row will be needed
//	intTotalCells = intRows * intCols; //will be used later to finish out the last row in the table
	
	strHTML = '<table align="center" border="0"><tr>'; //Open the table and first row
	
	for( x = 0; x < intCells; x++ ){
		if( strCurrentPage.toLowerCase() == aryMenuIcons[x].LinkURL.toLowerCase() ){
			strHTML += '<td align="center"><img src="' + aryMenuIcons[x].CurrentPageIcon + '"></td>'; //The current page is the icon's link page.
		} else {
			strHTML += '<td align="center"><a href="' + aryMenuIcons[x].LinkURL + '"'; //The current page is not the icon's link page so include a link to its page
			if( aryMenuIcons[x].NewWindow ){ //If a new window is desired this will be set to true.
				strHTML += ' target="_new" ';
			}
			strHTML	+= '><img border="0" src="' + aryMenuIcons[x].MouseOutIcon + '" onMouseOver="buttonOn( this, aryMenuIcons[' + x + ']);" onMouseOut="buttonOff( this, aryMenuIcons[' + x + ']);" alt="' + aryMenuIcons[x].AltText + '"></a></td>';
		}
		
		if( y < intCols ) {
			y++;
		} else {
			strHTML += '</tr><tr>';
			y = 1;
		}
	}
	
	//If there are any remaining menu icons then add them to the last row and center them using rowspan.
	if( aryMenuIcons.length > intCells  ){
		if( ( aryMenuIcons.length - intCells ) == 1 ){ 
			//if there is only one icon left then center it under the rest.
			if( strCurrentPage.toLowerCase() == aryMenuIcons[x].LinkURL.toLowerCase() ){ //If the current page is this icon's link page then display the currentpageicon.
				strHTML += '<td align="center" colspan="' + intCols + '"><img src="' + aryMenuIcons[x].CurrentPageIcon + '" alt="' + aryMenuIcons[x].AltText + '"></td>';
			} else {
				strHTML += '<td align="center" colspan="' + intCols + '"><a href="' + aryMenuIcons[x].LinkURL + '"';
				if( aryMenuIcons[x].NewWindow ){ //If a new window is desired this will be set to true.
					strHTML += ' target="_new" ';
				}
				strHTML += '><img border="0" src="' + aryMenuIcons[x].MouseOutIcon; 
				strHTML += '" onMouseOver="buttonOn( this, aryMenuIcons[' + x + ']);" onMouseOut="buttonOff( this, aryMenuIcons[' + x + ']);" alt="' + aryMenuIcons[x].AltText + '"></a></td>';
			}
		} else {
			//otherwise write out the remaining icons
			var y;
			for( y = x; y < aryMenuIcons.length; y++ ){ //This works because x is still set from the for loop above. It will be = the last icon displayed +1 
				strHTML += '<td align="center"><img border="0" src="' + aryMenuIcons[y].MouseOutIcon + '" onMouseOver="buttonOn( this, aryMenuIcons[' + y + ']);" onMouseOut="buttonOff( this, aryMenuIcons[' + y + ']);" alt="' + aryMenuIcons[x].AltText + '"></a></td>';
			}

			//Now finish out the table by writing any empty cells needed to fill out the last row
			if( ( intTotalCells - aryMenuIcons.length ) > 0 ){
				for( x = 0; x < ( intTotalCells - aryMenuIcons.length ); x++ ){
					strHTML += '<td>&nbsp;</td>';
				}
			}
		}
	}
	
	strHTML += '</tr></table>'; //Close out the table
	
	document.getElementById('IconMenu').innerHTML = strHTML;
}

// Call the displayMenu function 1 second after the page loads.
setTimeout( 'displayMenu()', 100 ); 

function buttonOn( objImage, objMenuIcon ) {
	objImage.src = objMenuIcon.MouseOverIcon;
}

function buttonOff( objImage, objMenuIcon ) {
	objImage.src = objMenuIcon.MouseOutIcon;
}

// Call the displayMenu function to display the menu.
setTimeout( 'displayMenu()', 100 );