var $j = jQuery.noConflict();

/* fadeIn, slideDown */
var effect = 'slideDown';

/* we use the term rehover in the comments, that refers to when a user has
hovered over an item, then left the item, then hovered back over it again
quickly. we added a pause so everything is a bit more friendly. */
/* this only works because the two items with submenus are fairly far apart.
if the user was rolling over the other items with submenus when they were moving
to get to the submenu we would have problems. we'd probably need to create a
pause on hover method as well. */

$j(document).ready(function(){
	$j("#menu li ul").parent().hover(showMenu, hideMenu);
	//$j("#nav li ul").parent().click(showMenu_click);
});

var showMenu = function () {
	/* hide all other submenus. using siblings method so as not to hide current
	submenu if we're doing a rehover */
	$j(this).siblings().find("ul").hide();
	
	/* we can't just use the :hover pseudo class since we want the main menu
	item to highlight even when the mouse is over the submenu */
	$j(this).find("a").addClass("hover");
	
	/* display the submenu. only use fade effect if in a good browser */
	if (effect == "fadeIn" && jQuery.support.opacity) {
		$j(this).find("ul").fadeIn("fast").show();
	}
	else if (effect == "slideDown") {
		$j(this).find("ul").slideDown("fast").show();
	}
	else {
		$j(this).find("ul").removeAttr("style").show();
	}
	
	/* stop dequeues all actions in queue, otherwise the hideMenu method would
	be triggered even though we're hovering over the submenu. */
	$j(this).stop();
};

var hideMenu = function () {
	/* remove the hover style right away, it'll get added back if the submenu
	gets rehovered */
	$j(this).find("a").removeClass("hover");
	
	/* use the animate method to pause half a second to see if the user rolls
	back over the submenu. this will only work if we animate "this". also,
	animating opacity 1 to 1 breaks ie8. */
	$j(this).animate({border:0}, 250, function() {
		/* Clear the style attribute since stopping a slideDown/fadeIn effect
		can leave a value. If style has a value, the next time slideDown is
		called it will fail. */
		$j(this).find("ul").stop().removeAttr("style");
		/* We don't need to slideUp/fadeOut or hide since clearing the style
		attribute effectively resets the element and hides it. */
	});
};

var showMenu_click = function() {
	/* clear other drop downs before */
	$j(this).siblings().find("a").removeClass("hover");
	$j(this).siblings().find("ul").stop().removeAttr("style");
	
	$j(this).find("a").addClass("hover");
	/* the slideDown effect will not work if the style
	attribute has a value.  This shouldn't be an issue
	since we take care of it elsewhere. */
	$j(this).find("ul").removeAttr("style").slideDown("fast").show();
};