var visibleSubNav = '';
var mine = false;

function hideEffect(){
	new Effect.Fade('subnav', {duration: 0.40, afterFinish: function(){
		$$('.subnav_content').each(Element.hide);
		visibileSubNav = '';
	}});
}

function positionSubnav(subnav, thisButton){
	var subnav_left = $(thisButton).cumulativeOffset()[0]-45;
	subnav_left = subnav_left + "px";
	$('subnav').setStyle({left: subnav_left});
}

function switchEffect(subnav, thisButton){
	new Effect.Fade('subnav', {duration: 0.40, queue:'end', afterFinish: function(){														 
		new Effect.Appear('subnav', {duration: 0.40, beforeStart: function(){
			mine = true;
			Effect.ScrollTo('headerelement', {duration: 0.5});
			positionSubnav(subnav, thisButton);
			var subnav_image = 'url(images/' + subnav + '_bg.png)';
			$('subnav').setStyle({
				backgroundImage: subnav_image
			});
			$(visibleSubNav).hide();
			$$('.subnav_content').each(Element.hide);
			$(subnav).show();
			visibleSubNav = subnav;
		}, afterFinish: function(){
				mine = false;
				if (ie6 | ie7 | saf){
					Event.observe(document.onscroll ? document : window, "scroll", function(){
						if (!mine)
							hideEffect();																		
					});
				}
				Event.observe(document.onresize ? document : window, "resize", function() {
					positionSubnav(subnav, thisButton);
				});	
		}});
	}});	
}

function mouseOverState(event){
	var thisButton = Event.findElement(event,'div');
	var subnav = $(thisButton).readAttribute('subnav');	
	if (!$('subnav').visible()){
		$$('.subnav_content').each(Element.hide);
		$(subnav).show();
		var subnav_image = 'url(images/' + subnav + '_bg.png)';
		$('subnav').setStyle({
							 backgroundImage: subnav_image
							 });
		new Effect.Appear('subnav', {duration: 0.40, queue:'end', beforeStart: function(){
			mine = true;
			Effect.ScrollTo('headerelement', {duration: 0.5});
			positionSubnav(subnav, thisButton);
		}, afterFinish: function(){
			mine = false;
			if (ie6 | ie7 | saf){
				Event.observe(document.onscroll ? document : window, "scroll", function(){
					if (!mine)
							hideEffect();																		
				})
			}																			
			Event.observe(document.onresize ? document : window, "resize", function() {
				positionSubnav(subnav, thisButton);
			});																   
		}});
		visibleSubNav = subnav;
	}else{
		if (subnav!=visibleSubNav){
			switchEffect(subnav, thisButton);
		}
	}
}

function slideDownSubNavs(){
	if (saf){
		$('subnav').setStyle({position: 'fixed'});
	}
	$('subnav').setStyle({visibility: 'visible'}).hide();
	$$('.subnav_content').each(Element.hide);
	var subnav_buttons = $$('.subnav_button');
	for (var i=0; i<subnav_buttons.length; i++){
		if (subnav_buttons[i].readAttribute('subnav')!='false')
			subnav_buttons[i].observe('mouseover', mouseOverState);	
	}
	$('subnav').observe('mouseleave', hideEffect);
}