//delay plugin code found here: http://james.padolsey.com/javascript/jquery-delay-plugin/
$.fn.delay = function(time, callback){ jQuery.fx.step.delay = function(){}; return this.animate({delay:1}, time, callback); }

$(document).ready(function () {

	//initializing elements
	$("#nav li ul").each(function(i) {
		$(this).wrap("<div class=\"dropDownWrap\"></div>");
		$(this).parent("div.dropDownWrap").css("width", $(this).width() + "px");
	});
	$("#nav li ul").css({"left":"auto","bottom":"0px"});

	$("#nav li").mouseenter(function() {
		$(this).children("div.dropDownWrap").addClass("expanded");

		$("#nav li div.dropDownWrap").each(function() {
			if(!$(this).hasClass("expanded")) {
				var height = $(this).height();
				if(height > 0) {
					$(this).stop("clearQueue");
					$(this).removeClass("expanded");
					navCollapse(this);
				}
			}
		});

		navExpand($(this).children("div.dropDownWrap"));
	});

	$("#nav li").mouseleave(function() {
		$(this).children("div.dropDownWrap").removeClass("expanded");
		$(this).children("div.dropDownWrap").delay(500,function() {
			navCollapse(this);
		});
	});

});

function navExpand(element) {
	var height = $(element).children("ul").height() + "px";
	var offset = "-" + height;
	$(element).animate({ 
		bottom: offset,
		height: height
	}, 100 );
}
function navCollapse(element) {
	$(element).animate({ 
		bottom: "0px",
		height: "0px"
	}, 100 );
}