// style vars
	var bgOver  = '#ffffff';
	var bgOut   = '#002040';
	var txtOver = '002040';
	var txtOut  = 'ffffff';

	// variable for the delay
	var closedelay;
	
	// holds which eventID is actually valid
	var eventID = 0;
	
	// maintiain if list is open or closed
	var status = 'closed';
	
	// which list is open, if any
	var openList;
	
	// show list
	var showList = function(pid) {
		var listID = pid.replace(/For/g,'');
			
		// check if a list is open
		if (status == "open") {
			// check if this is the list that's already open
			if (listID != openList) {
				hideList(eventID);
			}	
		}
		
		if (status == "closed") {
			// set status to open
			status = "open";
			
			// set openList to this id
			openList = listID;
			
			// move the sublist so it lines up with the parent box
			$(listID).setStyle('left', $(pid).getParent().getLeft()+'px');
			
			// apply effects to show menu
			$(listID).setStyle('visibility', 'visible');
    		var showmenu = new Fx.Styles($(listID), {wait:false,duration:500});
    		showmenu.start({height: ['0px',$(listID).getProperty('height')]});
			
			eventID++;
			closedelay = (hideList).delay(2250, hideList, eventID);  //this sets the amount of time the drop-down is visible
			
		}	
	};
	
	// hide list
	var hideList = function(eid) {

		// make sure the calling id is what we want
		if (eid == eventID) {
			
			// use a try block because openList may not be defined
			try {
				if($(openList).getStyle('visibility') == "visible") {
					// apply effects to hide menu
   		 			var hidemenu = new Fx.Styles($(openList), {wait:false,duration:250});
   	 				hidemenu.start({height: '0px'});
   	 				$(openList).setStyle('visibility', 'hidden');
				}
			}
			catch (e){}
			// set status to closed
			status = "closed";
			
			// clear the openList id
			openList = '';
		} // end if event id is correct
	};

	$$('div.subNav').each(function(el) {
		el.setStyle('height','0px');
	});

	$$('a.navbutton').each(function(el) {

		var colors = new Fx.Styles(el, {wait:false});

		var parent = el.getParent();
	
		parent.addEvent('mouseover', function() {
			// handle changes to the root icon
			parent.setStyle('background-color', bgOver);
			colors.start({
        		color: txtOver
    		});
    		
    		// if a submenu is present, define it's changes
    		if (el.hasClass('hasSubNav')) {
				showList(el.getProperty('id'));
    		}
    		else {
    			hideList(eventID);
    		}
    		
		}); // end mouseover event
		
		parent.addEvent('mouseout', function() {
			// handle changes to the root icon
			parent.setStyle('background-color', bgOut);
			colors.start({
        		color: txtOut
    		});
		});	// end mouseout event
	
	}); // end loop to attach events