var sub = current;

function showSub(id) {
	if (sub != id) {
		$(sub.split("-", 1) + '-menu-item').removeClassName('hover');
		new Effect.Fade(sub, { duration: 0.5, afterFinish: 
      function() { $(id).appear({duration: 0.5}) }, queue: { position: 'end', scope: 'menu', limit: 4} } );
		sub = id;
		$(sub.split("-", 1) + '-menu-item').addClassName('hover');
	} else {
		$(id).show();
	}
}

function hideSub() {
	if (sub != current) {
		$(sub.split("-", 1) + '-menu-item').removeClassName('hover');
		new Effect.Fade(sub, { duration: 0.5, afterFinish: 
	    function() { $(current).appear({duration: 0.5}) }, queue: { position: 'end', scope: 'menu', limit: 4} } );
		sub = current;
	} else {
		$(sub.split("-", 1) + '-menu-item').removeClassName('hover');
	}
}

window.onload = function() {
	$('about-menu-item').onmouseover = function() { showSub('about-sub') };
	$('services-menu-item').onmouseover = function() { showSub('services-sub') };
	$('portfolio-menu-item').onmouseover = function() { showSub('portfolio-sub') };
	$('contacts-menu-item').onmouseover = function() { showSub('contacts-sub') }
	$('content').onmouseover = function() { hideSub() };
}