function preloadImage(url, callback) {
	var img = new Image();
	$(img).load(callback).attr('src', url);
}

// Needed for back browse actions to call document.ready
history.navigationMode = 'compatible';

$(document).ready(function() {
	
	//-------------------------------------------------------
	// Disable background gradient until the pattern is loaded for
	// slow connections. We only show the gradient in webkit browser
	// and ff 3.6, and we do a solid color fallback for the others.
	
	if (($.browser.webkit) || ($.browser.mozilla && $.browser.version.substr(0, 5) == "1.9.2")) {
		preloadImage("/static/img/kal-pattern.gif", function() {
			$("#top .gradient-loading").addClass("gradient");
			$("#top .gradient-loading").removeClass("gradient-loading");
		})
	} else {
		$("#top .gradient-loading").addClass("gradient-disabled");
		$("#top .gradient-loading").removeClass("gradient-loading");
	}
	

	//-------------------------------------------------------
	// Animate Kaleidoscope Logo. We can only animate on webkit
	// and we have to wait for all the images we need to load or
	// people might see the biggest beachball ever.

	if ($.browser.webkit) {
		
		var imagesForAnimationLoaded = [];
		
		function didLoadAnimationImage() {
			
			imagesForAnimationLoaded.push(this);
			
			if (imagesForAnimationLoaded.length == 3)
				startAnimatingLogo();
		}
		
		preloadImage("/static/img/ks_color.png", didLoadAnimationImage);
		preloadImage("/static/img/ks_shading.png", didLoadAnimationImage);
		preloadImage("/static/img/ks_mask.png", didLoadAnimationImage);
		
		function startAnimatingLogo() {

			$("#appicon_static").hide();
			$("#appicon_animated").show();

			var fps = 12.0;
			var seconds = 40.0;
			var degrees = 0.0;
			var step = (360.0 / fps) * (1.0 / seconds);
			
			setInterval(function() {
				$("#logo_color").css({"-webkit-transform": "rotate(" + degrees + "deg)"})
				degrees += step;
			}, 1000.0 / fps);
		
		}
	}
	
	//-------------------------------------------------------
	// Set up the image viewers
	
	setupFullScreen();
	
	buildImageViewers([
		[".top-screenshot-1", "/static/img/screen_top_text.jpg"],
		[".top-screenshot-2", "/static/img/screen_top_image.jpg"],
		[".top-screenshot-3", "/static/img/screen_top_integration.jpg"]
	]);

	buildImageViewers([
		[".text-screenshot-1", "/static/img/screen_text_blocks.jpg"],
		[".text-screenshot-2", "/static/img/screen_text_fluid.jpg"],
		[".text-screenshot-3", "/static/img/screen_text_unified.jpg"]
	]);

	buildImageViewers([
		[".image-screenshot-1", "/static/img/screen_image_two.jpg"],
		[".image-screenshot-2", "/static/img/screen_image_one.jpg"],
		[".image-screenshot-3", "/static/img/screen_image_split.jpg"],
		[".image-screenshot-4", "/static/img/screen_image_diff.jpg"]
	]);

	//-------------------------------------------------------
	// Set up the video image viewers
	
	function showVideoPlayer(url) {
		
		$("#video_popup").css({"top": ($(window).scrollTop() + 30) + "px"});
		
		$("#video_popup_overlay").show();
		$("#video_popup").show();
		
		$("#video_popup").click(function() {
			$("#video_popup_overlay").hide();
			$("#video_popup").hide();
			$("#video_popup_container").html("");

			$("#text-video").click(function() {showVideoPlayer("video/text")});
			$("#image-video").click(function() {showVideoPlayer("video/image")});
		});
		
		$("#video_popup_container").html(
			"<div class=\"popup_close_button black\"><div class=\"cross\"></div></div><iframe src =\"" + url + "\" height=\"496\" width=\"780\"></iframe>");
	}
	
	$("#text-video").click(function() {showVideoPlayer("video/text")});
	$("#image-video").click(function() {showVideoPlayer("video/image")});

	//-------------------------------------------------------
	// Set up the download button
	
	function showDowloadPopUp() {

		$("#download_popup_overlay").show();
		$("#download_popup").show();
		
		$("#download_popup_container .button").click(function() {
			$("#download_popup_overlay").hide();
			$("#download_popup").hide();
		});
		
		$("#download_popup_container").append(
			$("<iframe src =\"/download\" height=\"0\" width=\"0\"></iframe>"));
	}
	
	$(".download").click(showDowloadPopUp);
	
	//-------------------------------------------------------
	// Set up scrolling actions
	
	$(".scroll_to_top").click(function() {$.scrollTo($("body").position().top, 300)});
	$(".scroll_to_text").click(function() {$.scrollTo($("#text").position().top-40, 300)});
	$(".scroll_to_image").click(function() {$.scrollTo($("#image").position().top+30, 300)});
	$(".scroll_to_workflow").click(function() {$.scrollTo($("#workflow").position().top+30, 300)});
	$(".scroll_to_details").click(function() {$.scrollTo($("#details").position().top, 300)});


	//-------------------------------------------------------
	// Hover state for green round buttons in header
	
	function addHoverClasses() {
	
		$("#sitenav .screenshot").hover(
			function() {$(this).next().addClass("hover")},
			function() {$(this).next().removeClass("hover")}
		);
	
		$("#sitenav .screenshot").mousedown(
			function() {$(this).next().addClass("active")});

		$("#sitenav .screenshot").mouseup(
			function() {$(this).next().removeClass("active")});
	}
	
	addHoverClasses();

});