$(document).ready(function() {
	if(navigator.userAgent.match(/iPhone/i)){
		window.location = "http://www.megankeatley.com";
	}

	$("body").addClass("activate");
	
	var titles = {
		"work"             : "work",
		"clients"          : "clients",
		"about"            : "about",
		"contact"          : "contact",
		"contactus"        : "contact",
		"contactus-thanks" : "thanks"
		
	};
	
	// internal navigation for #hashlinks		
	$("a[href^=#]").each(function(){
		$(this).click(function(ev) {
			if ( $(this).hasClass("disabled") ) {
				 ev.preventDefault();
				return;
			}
			showPage($(this).attr("href"));
		});
	});
	
	var showPage = function(url) {
		var className = "work";
		var match = /#([^#]+)$/.exec(url);
		if ( match ) {
			className = match[1];
		}
		document.title = "Megan Keatley Dot Com // " + (titles[className] || titles["default"]);
		$("#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.hash);
	
	// these buttons should submit their form
	$("#contactus-goto-thanks").click(function(){
		var emptyRequireds = 0;
		$("#contactus-form :text").each(function() {
			if ( !$(this).val() ) {
				emptyRequireds++;
			}
		});
		if ( emptyRequireds == 1 ) { // 1 is the spamcatcher input.special
			$("#contactus-form").submit();
		}
	});
	
	
	// adding .hover on :hover, because I can't get $("li:hover") working :'(
	$("#work 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 hovered = $("#work li.hover");
					// hovering another element?
					if ( hovered.length ) {
						hovered.trigger("mouseenter");
					}
					// not hovering anything?
					else if ( ulHovered ) {
						$("#work 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;
		$("#work 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
				$("#work 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
		$("#work 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)
				);
			}
		);
	}
	
	// forms
	
});