$(document).ready(function() {
	// adding .hover on :hover, because I can't get $("li:hover") working :'(
	$("#work2 li").hover(
		function(){$(this).addClass("hover");},
		function(){$(this).removeClass("hover");}
	);

	// animate the -webkit-transition thingy for other browsers
	if ( jQuery.browser.safarid ) {
		$("body").addClass("safari");
	} else {
		var speed = 600;
		var animationBusy = false;
		var ulHovered = false;

		// called when animations are done
		// triggers mouse event if the mouse has moved to another element during the animation
		var checkHoverStateStillValid = function(li) {
			var li = li;
			window.setTimeout(
				function() {
					// still hovering this element?
					if ( li && $(li).hasClass("hover") ) {
						return;
					}

					var hovered2 = $("#work2 li.hover");
					// hovering another element?
					if ( hovered.length ) {
						hovered.trigger("mouseenter");
					}
					// not hovering anything?
					else if ( ulHovered ) {
						$("#work2 ul").trigger("mouseleave");
					}
				},
				10
			);
		}

		// animate work-list on hover, but ignore further mouse events while animating
		// custom event to make the hover thingy behave less nervous
		// fire mouseenterstill if mouse entered and stopped moving
		var enteredElement = null;
		var mouseMoved = false;
		$("#work2 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);
							$(that).trigger("mouseenterstill");
						} else if ( enteredElement != that ){
							window.clearInterval(interval);
						}
						mouseMoved = false;
					},
					60
				);
			}
		).bind(
			"mouseenterstill",
			function() {
				if ( animationBusy ) {
					return;
				}
				animationBusy = true;

				// make the li:hover bigger
				var that = this;
				$(this).animate(
					{width : 400},
					speed,
					function() {
						animationBusy = false;
						checkHoverStateStillValid(that);
					}
				);
				$("img", this).animate(
					{
						height : 280,
						paddingTop : 0,
						opacity: 1
					},
					speed
				);

				// make the other lis smaller
				$("#work2 li:not(:animated)").each(
					function() {
						$(this).animate(
							{width : 40},
							speed
						);
						$("img", this).animate(
							{
								height : 240,
								paddingTop : 20,
								opacity : 0.75
							},
							speed
						);
					}
				);
			}
		);

		// reset lis when mouving mouse out of ul, but not while they're being animated
		$("#work2 ul").bind(
			"mouseenter",
			function() {
				ulHovered = true;
			}
		).bind(
			"mouseleave",
			function() {
				// don't reset the content while it's being animated
				if ( animationBusy ) {
					return;
				}
				animationBusy = true;

				ulHovered = false;

				// reset
				$("li", this).animate(
					{width : 100},
					speed
				);
				$("img", this).animate(
					{
						height : 280,
						paddingTop : 0,
						opacity : 1
					},
					speed
				);

				window.setTimeout(
					function() {
						animationBusy = false;
						checkHoverStateStillValid();
					},
					(speed + 10)
				);
			}
		);
	}
	
});