$(document).ready(function() {
	if(navigator.userAgent.match(/iPhone/i)){
		window.location = "http://somehoo.com/m/";
	}

	$("body").addClass("motivator");
	
	var showPage = function(url) {
		var className = "hoo";
		var match = /#([^#]+)$/.exec(url);
		if ( match ) {
			className = match[1];
		}
		$("#wrapper").removeClass().addClass(className);
		window.setTimeout(
			function() {
				$("#"+className+" :input:first").focus();
			},
			100
		);
	}
	
	// on pageload: show the right part of the page, based on the current url
	showPage(window.location);

	// adding .hover on :hover, because I can't get $("li:hover") working :'(
	$("#hoo 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 = 440;
		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 hovered = $("#hoo li.hover");
					// hovering another element?
					if ( hovered.length ) {
						hovered.trigger("mouseenter");
					}
					// not hovering anything?
					else if ( ulHovered ) {
						$("#hoo ul").trigger("mouseleave");
					}
				},
				10
			);
		}
		
		// animate tab-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;
		$("#hoo 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 : 460, height : 240},
					speed,
					function() {
						animationBusy = false;
						checkHoverStateStillValid(that);
					}
				);
				$("img", this).animate(
					{
						height : 240,
						paddingTop : 0,
						opacity: 1
					},
					speed
				);
				$("#map_canvas").each(
					function () {
						var map = new GMap2(document.getElementById("map_canvas"));
						map.setCenter(new GLatLng(latitude, longitude), map_zoom);
						var point = new GLatLng(latitude, longitude);
						map.addOverlay(new GMarker(point));
						map.addControl(new GSmallMapControl());
					}
				);

				// make the other lis smaller
				$("#hoo li:not(:animated)").each(
					function() {
						$(this).animate(
							{width : 40},
							speed
						);
						$("img", this).animate(
							{
								height : 160,
								paddingTop : 40,
								opacity : 0.60
							},
							speed
						);
					}
				);
			}
		);

		// reset lis when mouving mouse out of ul, but not while they're being animated
		$("#hoo 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 : 124},
					speed
				);
				$("img", this).animate(
					{
						height : 240,
						paddingTop : 0,
						opacity : 1
					},
					speed
				);
				
				window.setTimeout(
					function() {
						animationBusy = false;
						checkHoverStateStillValid();
					},
					(speed + 10)
				);
			}
		);
	}
	
});