/**
 * RegisterMenuSystem: Sets observers for the mouseover, mouseout for the drop down menu system on the top of the main pages.
 * This code relies heavily on the prototype framework.
 * @return
 */
function registerMenuSystem(){
	//For each item inside the top navigation we want to set up an observer
	$$('#topNavigation table td').each(function(menuContainer){
		//Navigate to the first link inside the td.
		if(menuContainer.down("a")){
			//Detect if the page we are on is the one the element is linking to. If it is we set the class of the td to selected
			//Finds out if the current url "includes" (contains) the relative link
			if(menuContainer.down("a").up().hasClassName('selected')){
				menuContainer.addClassName("selected");
			}
		}
		
		//Prototype .down navigates into the child element matching the search parameters ("ul")
		var menuItem = menuContainer.down("ul");
		//If menuContainer has children of UL
		if(menuItem){
			//If they did not have javascript the page would render fine, but since they do we hide the element and set its position to absolute so it can appear as a hover over
			menuItem.hide();
			menuItem.setStyle("position:absolute;");
			//Registers an observer, whenever this action occurs it will execute the function
			menuContainer.observe("mouseover",function menuMouseOver(event){
											//Styling purposes only. The dropshadow doubles up when the drop down menu is shown. 
											//This removes it on the td, so the UL can display the shadow in all its longer glory
											this.addClassName("hovered");
											//"this" refers to the element that the event happened upon ("td")
											//We set the list to being displayed before we clone its position, because prototype clone cannot do so to elements that are not being shown
											this.down("ul").show();
											//Clone the location and size of the entire menu container (td) onto the (ul) (adapts for screen resize)
											menuItem.clonePosition(menuContainer,{"setHeight":false});
										});
			menuContainer.observe("mouseout",function menuMouseOut(event){
											//Styling purposes only. The dropshadow doubles up when the drop down menu is shown. 
											//This removes the special styling so when the drop down menu blinds up the shadows show proper
											this.removeClassName("hovered");
											//"this" refers to the element that the event happened upon ("td")
											this.down("ul").hide();
										});
		}
	});
}