$(document).ready(function(){
	
	// add an event listener, and then swap the images.
	$("#sepia1").load(function() {imageLoaded(true);}).attr("src", $("#sepia1").attr("finalsrc"));
	$("#sepia2").load(function() {imageLoaded(true);}).attr("src", $("#sepia2").attr("finalsrc"));
	$("#sepia3").load(function() {imageLoaded(true);}).attr("src", $("#sepia3").attr("finalsrc"));
	
	$("#type1").load(function() {imageLoaded(true);}).attr("src", $("#type1").attr("finalsrc"));
	$("#type2").load(function() {imageLoaded(true);}).attr("src", $("#type2").attr("finalsrc"));
	$("#type3").load(function() {imageLoaded(true);}).attr("src", $("#type3").attr("finalsrc"));
	
	$("#color1").load(function() {imageLoaded(true);}).attr("src", $("#color1").attr("finalsrc"));
	$("#color2").load(function() {imageLoaded(true);}).attr("src", $("#color2").attr("finalsrc"));
	$("#color3").load(function() {imageLoaded(true);}).attr("src", $("#color3").attr("finalsrc"));
});






// one we've got the "I'm loaded" event from all of them

var loadCount = 0;
var loadTotal = 9;
function imageLoaded(wasCached) {
	if (wasCached) try {console.log("image loaded dynamically");} catch (e) {};
	if (!wasCached) try {console.log("image loaded");} catch (e) {};
	loadCount++;
	if (loadCount == loadTotal) {
		doAnimations();
	}
}






// play the animations

function doAnimations() {
	$("#sepia1").delay(500).animate({opacity: 1}, 1000, function() {
		$("#type1").delay(500).animate({opacity: 1}, 1000);
		$("#color1").delay(500).animate({opacity: 1}, 1000, function() {
			$("#sepia2").delay(500).animate({opacity: 1}, 1000, function() {
				$("#type2").delay(500).animate({opacity: 1}, 1000);
				$("#color2").delay(500).animate({opacity: 1}, 1000, function() {
					$("#sepia3").delay(500).animate({opacity: 1}, 1000, function() {
						$("#type3").delay(500).animate({opacity: 1}, 1000);
						$("#color3").delay(500).animate({opacity: 1}, 1000, function() {
							$(".type").delay(2000).animate({opacity: 0.4}, 2000, animationFinished());
						});
					});
				});
			});
		});
	});
}



function animationFinished() {
	$(".type").mouseenter(function() {
		$(this).animate({opacity: 1}, 400);
	});
	$(".type").mouseleave(function() {
		$(this).animate({opacity: 0.4}, 400);
	});
	$(".type").css("cursor", "pointer");
};