/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ///                                    ///////////////////////////////////////////// */
/* ///       EC Javascript Library        ///////////////////////////////////////////// */
/* ///                                    ///////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */
/* ////////////////////////////////////////// */



/* 
This file adds the Javascript Behavior to the page.
*/



/* /////////////////////////// */
/*                             */
/*       Navmenu Behavior      */
/*                             */
/* /////////////////////////// */



// cycles through each element of the navbar, constructs menu on and off events for each one
function navbarEvents() {

	var arrNavbars = new Array("specific", "siteWide");
	var arrNavElement = new Array("Button", "Menu");
	var intNumberOfNavElements = 5;

	// this loop works with arrNavbars to affect both navbars
	for (var i = 0; i <= 1; i++) {
		// this loop works with arrNavElement to affect Buttons and Menus
		for (var j = 0; j <= 1; j++) {
			// this loop cyles through the element numbers
			for (var k = 1; k <= intNumberOfNavElements; k++) {

				k = twoDigitString(k);

				//compile the navbar ids: each consists of a prefix indicating the navbar, the name (Button or Menu) of the element, and the numeric identifier
				var strNavElementId = arrNavbars[i] + arrNavElement[j] + k;

				//setting the events to drive the menus
				document.getElementById(strNavElementId).onmouseover = MenuOn;
				document.getElementById(strNavElementId).onmouseout = MenuOff;
			}
		}
	}
}

function MenuOn() {
	
	// take the id of the calling element and use it to construct the id of the menu to turn on
	var myElement = this.id;
	var myId = myElement.substring(myElement.length - 2, myElement.length);
	var myNavbar = myElement.substring(0, 8);
	var myMenu = myNavbar + "Menu" + myId;
	
	// turn the menu on
//	alert(myMenu);
	document.getElementById(myMenu).style.display="block";
//	alert("specificMenu" + myId); // returns the id attribute of the div
}

function MenuOff() {

	// take the id of the calling element and use it to construct the id of the menu to turn off
	var myElement = this.id;
	var myId = myElement.substring(myElement.length - 2, myElement.length);
	var myNavbar = myElement.substring(0, 8);
	var myMenu = myNavbar + "Menu" + myId;

	// turn the menu off
	document.getElementById(myMenu).style.display="none";
}



/* /////////////////////////// */
/*                             */
/*       Javascript Clock      */
/*                             */
/* /////////////////////////// */



function ecClock() {

	// Define Several arrays; Javascript returns only numbers which represent various values
	// We will define several arrays; they will be carefully ordered so that the numbers which the methods return will be replaced by the corresponding Name
	var arrDayNames = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
	var arrMonthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	
	
	// Call the date object and name variables for it's needed components
	var dateDate = new Date();

	var	intYear = dateDate.getFullYear();
	var	intMonth = dateDate.getMonth();
	var	intDate = dateDate.getDate();
	var	intDay = dateDate.getDay();
	var	intHours = dateDate.getHours();
	var	intMinutes = dateDate.getMinutes();
	var	intSeconds = dateDate.getSeconds();
	var	intAm = "";

	// determine whether its am or pm
	if (intHours < 12) {
		intAm = "AM";
	}
	else {
		intHours -= 12;
		intAm = "PM";
	}
	
	// set hour 0 to hour 12
	if (intHours == 0) {
		intHours = 12;
	}

	//Add a leading zero to single digit numbers
	intHours = twoDigitString(intHours);
	intMinutes = twoDigitString(intMinutes);
	intSeconds = twoDigitString(intSeconds);

	//Put it all together
	var strClock = intYear + " " + arrMonthNames[intMonth] + " " + intDate + ", " + arrDayNames[intDay] + "   " + intAm + " " + intHours + ":" + intMinutes + ":" + intSeconds;

	//Print the clock to the innerHTML of the #clockBox div; reset each second
		/* 
			**REWRITE** I've been informed that getElementById.innerHTML is not a good way to do this. No word on how to "really" do it though. Great. 
			Keep a lookout for a better alternative. This is not a high priority at the moment; I have yet to find a situation where this script fails to work.
			It looks like it's fairly robust solution, just not particularly good syntax. We'll clean it up as soon as we can.
		*/
	document.getElementById('clockBox').innerHTML = strClock;
	dateDate=setTimeout(ecClock,1000); 

}



/* /////////////////////////////////// */
/*                                     */
/*       Image Rollover Functions      */
/*                                     */
/* /////////////////////////////////// */



// This is the swap function for image rollovers.
function rollover(newPath) {
		document.images['rolloverImage'].src = newPath;
}

/* 
		This set of event handlers crashes the script if the id does not exist on the page. Therefore it's wrapped in an if statement to sense if the rollover image is present.
		The event handler grabs the ids of the rollover images and monitors their activity sending the image to swap into the rollover() function.
		New rollover images, simply need to use name="rolloverImage" and duplicate the if block, modifying it for the id and the image to swap.
		Since there's a lot of repetition if we add more calls, it may be possible to build two or three dimensional arrays that indicate the id, mouseover and mouseout images and looping through. This may also be a case where the event handlers would be better added in a page specific file.
*/

if (document.getElementById("contactImage")) {
	document.getElementById("contactImage").onmouseover = function() {rollover("Images/ContactUsBoxHighlight.jpg")};
	document.getElementById("contactImage").onmouseout = function() {rollover("Images/ContactUsBox.jpg")};
}



/* /////////////////////////// */
/*                             */
/*       Helper Functions      */
/*                             */
/* /////////////////////////// */



// Adds a leading zero to single digit number (string)
//**REWRITE** When possible, move the <10 check out of the function. Why call it, if it's not needed? However, it may be a good idea to have this duplicate check here, just in case two digit data is sent here by mistake. (also, this is a small enough function, it would have to be sent here a lot to slow anything noticably)
function twoDigitString(data) {
	if (data < 10) {
		data = "0" + data;
		return data;
	} else {
		return data;
	}
}



/*  addLoadEvent allows you to call any number of functions when the onload event occurs
		It is fully compatible with other scripts without wiping out their onload functions.
	addLoadEvent function was designed by Sitepoint guru Simon Willison  */
	
function addLoadEvent(func) {
	
	//assigns a variable for the onload event
	var oldonload = window.onload;
	
	// checks to see if there is a function already assigned to onload
	if (typeof window.onload != 'function') {
		window.onload = func; // if not, onload executes the function
	} 
	
	// otherwise the variable is called to run the previously called function(s)
	else {
		window.onload = function() {
			if (oldonload) {
				oldonload(); //calls the old function(s)
			}
			func(); //calls the new function
		}
	}
}

// Call the functions you want to insert, one per addLoadEvent
addLoadEvent(ecClock);
addLoadEvent(navbarEvents);