$(function() {

	var browser = $.browser;
	var windowWidth  = $(window).width();



	// TYPEKIT BADGE

	$(".typekit-badge").hide();



	// ELEVATOR

	$("#scroll-top a").click(function(){
		$("html,body").animate({ scrollTop: 0 }, 3000, "easeInOutCirc", function(){
			window.location.hash = "#top";
			selected_work = 0;
		});
		return false;
	});



	// KEYBOARD NAVIGATION

	var hash = window.location.hash;
	if ((hash != "") && (hash != "#top") && (hash != "#footer")) {
		var selected_work = $(hash).parent().attr("id").substr(5);
	}else{
		var selected_work = 0;
		if (hash == "#footer") { selected_work = $(".work").length + 1; }
	}
	var total_works = $(".work").each(function(){}).length;

	function setHash(el) {
		var hash = $("#work-" + el + " aside").attr("id");
		var el   = $("#" + hash);
		$(el).attr("id", ""); //HIDE THE ID ATTRIBUTE TO PREVENT THE BROWSER FROM JUMPING AROUND *cof* FIREFOX

		window.location.hash = hash; //SET THE HASH

		$(el).attr("id", hash); //PUT THE ID BACK IN PLACE

		return false;

	}


	var shiftPressed = false;

	$(window).keydown(function(e) {
		if (e.keyCode == 16) { //SHIFT
			shiftPressed = true;
		}
	}).keyup(function(e) {
		if (e.keyCode == 16) { //SHIFT
			shiftPressed = false;
		}
	});


	$(window).bind("keydown", function(e){

		function goToFirstWork() {
			selected_work = 1;
			var position = $("#work-1").offset().top;
			$("html,body").animate({ scrollTop: position }, 1000, "easeInOutExpo", function(){ setHash(selected_work); });
			return false;		
		}

		function goToLastWork() {
			selected_work = $(".work").length;
			var position = $("#work-" + selected_work).offset().top;
			$("html,body").animate({ scrollTop: position }, 1000, "easeInOutExpo", function(){ setHash(selected_work); });
			return false;		
		}


		if (!zoomed) {
			if (e.keyCode == 38) { //UP

				if (shiftPressed) {
					goToFirstWork();
				}else{

					if (selected_work > 1) {
						selected_work--;
						var position = $("#work-" + selected_work).offset().top;
						$("html,body").animate({ scrollTop: position }, 1000, "easeInOutExpo", function(){ setHash(selected_work); });
					}else if (selected_work == 0) {
						goToFirstWork();
					}else if (selected_work == 1) {
						selected_work = 0;
						$("html,body").animate({ scrollTop: "0px" }, 500, "easeInOutExpo", function(){ window.location.hash = "top"; });
					}
					return false;
				}		
			}else if (e.keyCode == 40) { //DOWN
			
				if (shiftPressed) {
					goToLastWork();
				}else{
					if (selected_work < total_works) {
						selected_work++;
						var position = $("#work-" + selected_work).offset().top;
						$("html,body").animate({ scrollTop: position }, 1000, "easeInOutExpo", function(){ setHash(selected_work); });
					}else if (selected_work == 0) {
						goToFirstWork();
					}else if (selected_work == total_works) {
						var position = $("footer").offset().top;
						$("html,body").animate({ scrollTop: position }, 1000, "easeInOutExpo", function(){ window.location.hash = "footer"; });
						selected_work++;
					}
					return false;
				}
			
			}else if (e.keyCode == 13) { //ENTER
				hash = window.location.hash;
				if ((!zoomed) && (hash != "") && (hash != "#top") && (hash != "#footer")) {
					zoomIn($(hash).parent().find(".gutter"));
				}
			
			}

		}else{
			if (e.keyCode == 27) { //ESC
				zoomOut();
			}
		}

	});



	// ZOOM WORKS

	doc_height = $(document).height();
	id         = "";
	zoomed     = false;

	$("#preview_img").css("top", doc_height);

	function zoomIn(el) {

		zoomed = true;

		id = $(el).parent().attr("id");

		var animation_element = (browser.mozilla) ? "html" : "body";

		$(animation_element).animate({ scrollTop: "0px" }, 1000, "easeInOutExpo", function(){

			selected_work = id.substr(5);
			img           = $(el).attr("href");
			title         = $(el).find("img").attr("alt");

			setHash(selected_work);

			$("#preview_img").attr({
				src: img,
				title: title,
				alt: title
			});
		
			$("#preview_wrapper").show();
			$("#preview_bg").fadeIn();
			$("#preview_img").show().animate({ top: "0px" }, 500, "easeInOutExpo");		
		});
	}

	function zoomOut() {
	
		zoomed = false;
	
		goTo = $("#" + id).position().top;
	
		$("html,body").animate({ scrollTop: goTo }, 700, "easeInOutExpo");
		$("#preview_img").animate({ top: doc_height }, 700, "easeInOutExpo", function(){
			$(this).hide();
		});
		$("#preview_bg").fadeOut(700, function(){
			$("#preview_wrapper").hide();
		});
	
	
	}

	$(".work .gutter").click(function(){
		if (windowWidth >= 768) {
			zoomIn($(this));
		}else{
			var img = $(this).find("img");
			
			if ($(img).attr("data-moved") == "true") {
				$(img).css("top", 0).attr("data-moved", "false");
			}else {
				var imgHeight = $(img).height();
				var margin  = (imgHeight - 200) * -1;
		
				$(img).css("top", margin).attr("data-moved", "true");
			}
			
		}
		return false;
	});

	$("#preview_wrapper").click(function(){
		zoomOut();
	});



	// PREVENT JUMP

	$("a[href=#]").click(function(){
		return false;
	});



	// TOOLTIP
	
	var title = "";
		tooltip = $("#tooltip_wrapper");
	
	$("*[title]").hover(function(e){
	
		el      = $(this);
		
		title = $(el).attr("title");
		$(el).removeAttr("title");
	
		tooltipTimer = setTimeout(function() {
			
			$(tooltip).find("#tooltip_text").text(title);
	
			var xPos = ($(el).offset().left + $(el).width() / 2) - ($(tooltip).width() / 2);
				yPos = $(el).offset().top - $(tooltip).height() + parseInt($(el).css("padding-top"));

			$(tooltip)
				.css({
					left: xPos,
					top: yPos,
					display: "block",
					opacity: 0
				})
				.animate({
					top: yPos-5,
					opacity: 1
				}, 200);
		}, 500);
		
	}, function(){
		
		$(el).attr("title", title);
		clearTimeout(tooltipTimer);

		$(tooltip).animate({
				top: yPos-25,
				opacity: 0
			}, 200, function(){
				
				if ($(tooltip).is(":animated")) {
					$(tooltip).css({
						left: -1000,
						top: -1000,
						display: "none",
						opacity: 0
					});
					$(tooltip).find("#tooltip_text").text("");
				}
			});
	});
	
	$(tooltip).hover(function(){
		$(tooltip).hide();
	});
	
	
	
	// RESIZE
	
	$(window).resize(function(){
		//$("#intro").text($(window).width());
		windowWidth = $(window).width();
	});


});