window.addEvent('domready', function() {				 
//nav
$$("#nav li a").each(function(navLink,i){
		//only make animations for list items with a sub-menu
		if(navLink.getNext()){
			//create the effect for sub-navigation
			var subNavFX = new Fx.Styles(navLink.getNext(), {
				wait:false,
				duration: 500,
				transition: Fx.Transitions.Expo.easeOut
			});
			//remember individual heights
			var thisHeight = new Array();
			thisHeight[i] = navLink.getNext().getSize().size.y;
			//set initial styles to prevent flickering
			navLink.getNext().setStyles({
				opacity: 0,
				height:0,
				left: 'auto'
			});
			//mouse over event on the main nav link
			navLink.addEvent("mouseenter", function(ev){
				if(navLink.getNext()){
					//add hover class
					navLink.getParent().addClass("hover");
					//animate in
					subNavFX.start({
						opacity: 1,
						height: thisHeight[i]
					});
				}
				//change background color of link for pages we are not on
				if(navLink.getParent().getProperty('id') !="current"){
					navLink.setStyle('backgroundColor', '#ff9933');
				}
			});
			//mouse out on the main nav list item
			navLink.getParent().addEvent("mouseleave", function(ev){
				//change the link color back to transparent
				if(navLink.getParent().getProperty('id') !="current"){
					navLink.setStyle('backgroundColor', 'transparent');
				}
				//animate out and remove hover class
				subNavFX.start({
						opacity: 0,
						height: 0
					}).chain(function(){navLink.getParent().removeClass("hover");});
			});
		}
	});

});