window.onload = function() {

	// variable for the list status
	var listStatus = 'closed';
	
	// setup var that holds our opened list's id
	var listOpen;

	// show list function
	var showList = function(lid) {
		var listId = lid.replace(/For/g,'');
		
		// need to check if there is an open list
		if(listStatus == "open") {
			// check if the open list is the same
			// as toggled list. If not, then we hide it
			if(listId != listOpen) {
				hideList();
			}
		} 
		
		if(listStatus == "closed") {
			// set our list status
			listStatus = 'open';
			
			// set the curent open list id
			listOpen = listId;
			
			// show our list with a little effects
			var el = $(listOpen);
			el.effect('opacity', {duration: 500}).custom(0, 1);
			//el.effect('height', {duration: 300}).custom(20, 40);
//			el.effect('width', {duration: 300}).custom(20, 131);
			
	
			// we add a timeout so the sublist goes away
			// if the user doesn't click/mouseover another 
			// menu item
			(hideList).delay(15000);
	
		}

	};
	
	// hide list function
	var hideList = function() {
	
		if(listOpen) {
		
			// check if our list is shown already - if so run the effects to hide list
			if($(listOpen).getStyle('visibility') == "visible") {
				var el = $(listOpen);
				el.effect('opacity', {duration: 500}).custom(1, 0);
				//el.effect('height', {duration: 300}).custom(40, 20);
//				el.effect('width', {duration: 300}).custom(131, 20);
			}
			
			// set our list status
			listStatus = 'closed';
			
			// reset open list id
			listOpen = '';
		}
	};
	
	
	$ES('.navbutton').each(
		function(e){
			
			if(e.hasClass('hasSubNav')){
				var listId  = e.id.replace(/For/g,'');
				var yOffset = 26; 
				var el      = $(listId);
				el.setStyles({
				   top: e.getTop()+yOffset+'px',
				   left: e.getLeft()+'px'
				});
				el.addEvents({
					mouseleave:
					function() {
						hideList();
					}
				});
			}
			e.addEvents({
	
				mouseenter: function() {
					
					// optional effect for mouseover
//					this.effect('opacity').custom(.3,1);
					
					// check if element has our flag for having a drop menu
					if(this.hasClass('hasSubNav')){
						
						// pass the id of the mouseover, so we can determine 
						// which list to show
						showList(this.id);
					
					}else{
					
						// if the button moused over does not have a list
						// then we close the list since we are obviously
						// on another button now
						if(listStatus == 'open'){
							hideList();
						}
					}	
				}
		})
	});
	

};