/*
 * This function sets up the page for displaying the menus, using mootools when the dom is ready.
 */
window.addEvent('domready', function() {
	window.onresize = windowResize;
	windowResize();
	
	subs=$ES('div','nav');
	subs.each(function(element) {
		new Fx.Style(element, 'opacity').set(0); 
	});
	
	subs=$ES('span','nav');
	subs.each(function(element) {
		if (element.className=="menu") {
			element.addEvent('mouseover', function(){
				window.setTimeout(function(){showMenu(element);},100);
			});

			element.addEvent('mouseleave', function(){
				window.setTimeout(function(){hideMenu(element);},100);
			});
		}
	});
});

/*
 * This function resizes the body of the page when the window is resized.
 */
function windowResize(){
	windowSize=$('wrapper').getSize().size.y;
	headerSize=$('header').getSize().size.y;
	footerSize=$('footer').getSize().size.y;
	miscSizes=20+40; //10px spacings between, then 40 for the margins
	$('body').style.height = ((1-((headerSize+footerSize+miscSizes))/windowSize))*windowSize;
}

/*
 * This function shows the submenu when there is one.
 */
function showMenu(item) {
	subs=$ES('div',item)[0];
	new Fx.Styles(subs, {
		onStart: function(){subs.style.display="block";},
		duration:100
	}).start({
		'opacity': .9
	});
}

/*
 * This one hides the submenu.
 */
function hideMenu(item) {
	subs=$ES('div',item)[0];
	new Fx.Styles(subs, {
		duration:100
	}).start({
		'opacity': 0
	});
}