$jq(document).ready(function() {
	//INITIAL VALUES-----------------------------------------------
	var initialPixelsWide = $jq(".accordian li").css("width"); //This is the reset value... must match the width in the HTML/CSS
	var speed = 400;
	//SELECTED/HOVER VALUES-----------------------------------------------
	var selectedPixelsWide = 620;
	var selectedPixelsHigh = 185;
	//DESELECTED VALUES-----------------------------------------------
	var deSelectedPixelsWide = 155;
	
	$jq(".accordian li").hover(
		function(){$jq(this).addClass("hover");},
		function(){$jq(this).removeClass("hover");}
	);
	var animationBusy = false;
	var ulHovered = false;
	var checkHoverStateStillValid = function(li) {
		var li = li;
		window.setTimeout(
			function() {
				if ( li && $jq(li).hasClass("hover") ) {
					return;
				}
				var hovered = $jq(".accordian li.hover");
				if ( hovered.length ) {
					hovered.trigger("mouseenter");
				}
				else if ( ulHovered ) {
					$jq(".accordian ul").trigger("mouseleave");
				}
			},
			10
		);
	}
	var enteredElement = null;
	var mouseMoved = false;
	$jq(".accordian li").bind(
		"mousemove",
		function() {
			mouseMoved = true;
		}
	).bind(
		"mouseenter",
		function() {
			var that = this;
			enteredElement = this;
			var interval = window.setInterval(
				function() {
					if ( !mouseMoved && enteredElement == that ) {
						window.clearInterval(interval);
						$jq(that).trigger("mouseenterstill");
					} else if ( enteredElement != that ){
						window.clearInterval(interval);
					}
					mouseMoved = false;
				},
				60
			);
		}
	).bind(
		"mouseenterstill",
		function() {
			if ( animationBusy ) {
				return;
			}
			animationBusy = true;
			var that = this;
			$jq(this).animate(
				{width : selectedPixelsWide},
				speed,
				function() {
					animationBusy = false;
					checkHoverStateStillValid(that);
				}
			);
			var currentNode = "#" + $jq(this).parent()[0].parentNode.id + " li:not(:animated)";
			$jq(currentNode).each(
				function() {
					$jq(this).animate(
						{width : deSelectedPixelsWide},
						speed
					);
				}
			);
		}
	);
	$jq(".accordian ul").bind(
		"mouseenter",
		function() {
			ulHovered = true;
		}
	).bind(
		"mouseleave",
		function() {
			if ( animationBusy ) {
				return;
			}
			animationBusy = true;
			ulHovered = false;
			$jq("li", this).animate(
				{width : initialPixelsWide},
				speed
			);
			window.setTimeout(
				function() {
					animationBusy = false;
					checkHoverStateStillValid();
				},
				(speed + 10)
			);
		}
	);
});