$(document).ready(function () {

	/*$("#invert_light").click( function() {
		
		$("#invert_dark").fadeIn(250);
		$(this).fadeOut(250);
		
		$("#logo_light").fadeIn(350);
		$("#logo_dark").fadeOut(350);
		
		$("body").animate({ backgroundColor: "rgb(226, 226, 226)", color: "#303030" }, 350);
		$("a").animate( { color: "#303030" }, 350);
		$(".subheader").animate( { color: "#404040" }, 350);
	
	});
	
	$("#invert_dark").click( function() {
		
		$("#invert_light").fadeIn(250);
		$(this).fadeOut(250);
		
		$("#logo_light").fadeOut(350);
		$("#logo_dark").fadeIn(350);
		
		$("body").animate({ backgroundColor: "#202020", color: "#909090" }, 350);
		$("a").animate( { color: "#909090" }, 350);
		$(".subheader").animate( { color: "#707070" }, 350);
		
	});
	
	$(".invert").hover( function() {
		$(".invert").animate( { left: "-4" }, 75);
	}, function() {
		$(".invert").animate( { left: "-10" }, 75);
	});
	
	function changeInfo(page) {
   		$.ajax({ url: page, cache: false, success: function(html) { $(".content").html(html); updateAttributes(); $(".content").fadeIn(75); } });
   }
   
   function updateAttributes() {

	$(".content > a").css( { fontWeight: "bold" } );
	
   	if($("#logo_dark").css("display") != "none") {
   		$("a").css( { color: "#909090" });
		$(".subheader").css( { color: "#707070" });
   	} else {
   		$("a").css( { color: "#303030" });
		$(".subheader").css( { color: "#404040" });
   	}
   	
   }
	
	$("a[href='#']").click( function() {
	
		if($(this).attr("id") != "active") {
	
		$("a").each( function(i) {
			$(this).css( { borderBottom: "0px" } );
		});
	
		$("#active").removeAttr("id");
		
		$(this).attr( { id: "active" } );
	
		$(this).css( { borderBottom: "2px solid rgb(92, 49, 15)" } );
		
		var newPage = $(this).attr("alt");
		$(".content").fadeOut(75, function() { changeInfo(newPage); } );
		
		}
		
	});*/
	
	//$(".application_info").css({opacity: 0.0, display: "none"});
	
	/*$(".application > img").click(function() {
		var parentIndex = $(".application").index($(this).parent());
		focusApplicationWithIndexAnimated(parentIndex, true);
	});*/
	
	$("#apptivate_icon").mousedown(function() {
		$(this).attr("src", "resources/images/apptivate_pressed_128.png");
	});
	$("#apptivate_icon").mouseup(function() {
		$(this).attr("src", "resources/images/apptivate_128.png");
	});
	
	$("#mailtim").attr("href", "mailto:tim" + "@" + "cocoabeans.se");
	$("#mailtim").text($("#mailtim").attr("rel") != "" ? $("#mailtim").attr("rel") : ("tim" + "@" + "cocoabeans.se"));
	$("#mailinfo").attr("href", "mailto:info" + "@" + "cocoabeans.se");
	$("#mailinfo").text("info" + "@" + "cocoabeans.se");
	
	$(".download > img").mousedown( function() {
		$(this).attr( { src: "resources/images/download_pressed.png" } );
	});
	
	$(".download > img").mouseout( function() {
		$(this).attr( { src: "resources/images/download.png" } );
	});
	
	$(".visit > img").mousedown( function() {
		$(this).attr( { src: "resources/images/visit_pressed.png" } );
	});
	
	$(".visit > img").mouseout( function() {
		$(this).attr( { src: "resources/images/visit.png" } );
	});
	
	$("a[href='#prev']").click(function() {
		history.go(-1);
		return false;
	});
	
});

$(window).load(function() {
	var selectedIndex = indexCorrespondingToHash(document.location.hash);
	if(selectedIndex == -1) {
		loadApplications();
	} else {
		focusApplicationWithIndexAnimated(selectedIndex, false);
	}
});

function loadApplications() {
	// Animate the applications
	var applications = $("#applications > .application");
	applications.css({opacity: 0.0});
	applications.css({display: "inline-block"});
	applications.css({bottom: "200px"});
	animateApplicationContainer(0);
}

function hashCorrespondingToIndex(index) {
	if(index == 0) return "apptivate";
	if(index == 1) return "remoteclock";
	if(index == 2) return "desktopday";
}

function indexCorrespondingToHash(hash) {
	if(hash == "#apptivate") return 0;
	if(hash == "#remoteclock") return 1;
	if(hash == "#desktopday") return 2;
	return -1;
}

function infoIdentifierForIndex(index) {
	return hashCorrespondingToIndex(index) + "_info";
}

function focusApplicationWithIndexAnimated(index, shouldAnimate) {
	var container = $(".application").eq(index);
	var pos = container.position();
	document.location.hash = hashCorrespondingToIndex(index);
	if(shouldAnimate == true) {
		container.animate({left: "-=" + pos.left + "px"}, "fast");
		$(".application").not(container).each(function(i, element) {
			if(i < index) {
				$(element).animate({left: "-=" + pos.left + "px", opacity: 0.0}, "fast");
			} else {
				$(element).animate({top: "+=100px", opacity: 0.0}, "fast");
			}
		});
	} else {
		container.css({left: "-" + pos.left + "px"});
		$(".application").not(container).css({opacity: 0.0});
	}
	
	// Show the info
	var infoContainer = $("#" + infoIdentifierForIndex(index));
	infoContainer.css({display: "block"});
	if(shouldAnimate == true) {
		infoContainer.css({left: container.offset().left + 50 + "px"});
		infoContainer.animate({left: "188px", opacity: 1.0}, "fast");
	} else {
		infoContainer.css({opacity: 1.0});
	}
}

function animateApplicationContainer(index) {
	if(index > $("#applications > .application").length) return;
	$("#applications > .application").eq(index).animate({bottom: "0px", opacity: 1.0}, "fast", "easeOutCubic");
	setTimeout(function() { animateApplicationContainer(index+1); }, 100);
}