$(document).ready(function() {
	

	$("body").addClass("activatethedeathray");
	
	var titles = {
		"work"             : "We craft Interfaces",
		"clients"          : "All Clients",
		"about"            : "About",
		"contact"          : "Contact / Hire us",
		"contactus"        : "Contact us",
		"contactus-thanks" : "Contact us - Thanks",
		"hireus"           : "Hire us - Step 1",
		"hireus-step2"     : "Hire us - Step 2",
		"hireus-step3"     : "Hire us - Step 3",
		"hireus-step4"     : "Hire us - Step 4",
		"hireus-thanks"    : "Hire us - Thanks",
		
		"default"          : "We craft Interfaces"
	};
	
	// 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 = "Made by Elephant - " + (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();
		}
	});
	$("#hireus-goto-thanks").click(function(){
		$("#hireus-form").submit();
	});
	
	// update time brussels in footer
	var now = new Date();
	var hours = now.getUTCHours() + (now.getUTCMonth()<3 && now.getUTCMonth()>9 ? 1 : 2); // daylight savings, roughly
	var timeElement = $("#footer li.tel small");
	timeElement.text(timeElement.text().replace(
		"4PM",
		hours%12 + (hours>=12?"PM":"AM")
	));
	var timeElement2 = $("#timvandamme li.tel small");
	timeElement2.text(timeElement2.text().replace(
		"4PM",
		hours%12 + (hours>=12?"PM":"AM")
	));

	// 
	if (
		document.location.hash == "#contactus-thanks" ||
		document.location.hash == "#hireus-thanks"
		) {
		var start, counter = start = 3;
		var interval = window.setInterval(
			function() {
				if (counter>0){
					$("span.countdown").text(counter--);
				} else {
					window.clearInterval(interval);
					window.location.hash = "work";
					showPage();
					$("span.countdown").text(start);
				}
			},
			1000
		)
	}

	// 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 : 500},
					speed,
					function() {
						animationBusy = false;
						checkHoverStateStillValid(that);
					}
				);
				$("img", this).animate(
					{
						height : 197,
						paddingTop : 0,
						opacity: 1
					},
					speed
				);

				// make the other lis smaller
				$("#work li:not(:animated)").each(
					function() {
						$(this).animate(
							{width : 20},
							speed
						);
						$("img", this).animate(
							{
								height : 177,
								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 : 197,
						paddingTop : 0,
						opacity : 1
					},
					speed
				);
				
				window.setTimeout(
					function() {
						animationBusy = false;
						checkHoverStateStillValid();
					},
					(speed + 10)
				);
			}
		);
	}
	
	// forms
	// show/hide the info text for the inputfields
	$("#hireus :text").bind(
		"focus",
		function() {
			$(this).parent().addClass("selected");
		}
	).bind(
		"blur",
		function() {
			$(this).parent().removeClass("selected");
		}
	);

	// disable next button of required fields
	$("#hireus fieldset:has(p.required)").each(function() {
		var emptyRequireds = 0;
		$("p.required :text", this).each(function() {
			if ( !$(this).val() ) {
				emptyRequireds++;
			}
		});
		if ( emptyRequireds ) {
			$("p.button a", this).addClass("disabled");
		} else {
			$("p.button a", this).removeClass("disabled");
		}
	});

	// update style required fields on blur
	$("#hireus p.required :text").bind(
		"blur",
		function() {
			if ( !$(this).val() ) {
				$(this).parent().addClass("forgotten");
			} else {
				$(this).parent().removeClass("forgotten");
			}
		}
	);
	
	// validate fieldset on next button click
	$("#hireus p.button a").each(function() {
		$(this).click(function(ev) {
			var fieldset = $(ev.target).parents("fieldset");
			var emptyRequireds = 0;

			$("p.required :text", fieldset).each(function() {
				if ( !$(this).val() ) {
					$(this).parent().addClass("forgotten");
					emptyRequireds++;
				} else {
					$(this).parent().removeClass("forgotten");
				}
			});
			$("p.forgotten:first input").focus();
			
			if ( emptyRequireds ) {
				$(this).addClass("disabled");
			} else if ( $(this).hasClass("disabled") ) {
				$(this).removeClass("disabled").trigger("click");
			}
		});
	});
	
	// update hire us summary
	$("#hireus-goto-step4").click(function(){
		$("#hireus-step4 dd").each(function() {
			$(this).text(
				$("#"+$(this).attr("id").replace("-summary", "")).val()
				||
				"/"
			);
		});
	});
});