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
			new fx.Opacity($(listOpen), {duration: 500}).custom(0, 1);
			new fx.Height($(listOpen), {duration: 300}).custom(20, 40);
			new fx.Width($(listOpen), {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") {
				new fx.Opacity($(listOpen), {duration: 500}).custom(1, 0);
				new fx.Height($(listOpen), {duration: 300}).custom(40, 20);
				new fx.Width($(listOpen), {duration: 300}).custom(131,20);
			}
			
			// set our list status
			listStatus = 'closed';
			
			// reset open list id
			listOpen = '';
		}
	};
	var list = $$('a.navbutton');
list.each(function(element) {
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});
 
	element.addEvent('mouseenter', function(){
		fx.start({
			'opacity':'0.5'
		});
	});
 
	element.addEvent('mouseleave', function(){
		fx.start({
			'opacity':'1'
		});
	});
 
});
	

	

};