jQuery(document).ready
(
function($)
{
	// FULLSCREEN BACKGROUND IMAGES
	var transition_speed = 1000;	
	var auto_next = 'false'; //not ready yet
	
	function sizeFullscreenImage()
	{
		var window_height = $(window).height();
		var window_width = $(window).width();
		
		var $img = $(".SCALE");
		var img_height = $img.attr("data-height"); 
		var img_width = $img.attr("data-width");
		var ratio = img_height/img_width;
		
		//size based on width.
		var oh = window_width*(ratio);
		var ow = window_width;
		
		if ( oh < window_height )
		{
			//size based on height.
			var ow = window_height/ratio;
			var oh = window_height; 			
		} 
		$img.attr("height", oh).attr("width", ow); // Math.round?
		if ( $("body").hasClass("ie6") == true )
		{ 
			$("#fullscreen").css("width", window_width+"px").css("height", window_height+"px"); 
		}
	} 

	function setupFullscreenImage()
	{
		var $img = $(".FIRST");
		var src = $img.attr("data-src");

		$img.attr("src", src).css("opacity", 0).css("visibility", "visible").css("z-index", 5);

		$img.load
		(
			function()
			{ 
				$(this).animate({'opacity' : 1 }, transition_speed, function(){
						$("#fullscreen img").each(function(){
							var src = $(this).attr("data-src");
							$(this).attr("src", src);
							
							// Cleanup (not required)
							$(this).removeAttr("data-src");						
							// End Cleanup
							
							//$(this).removeClass("FIRST");
						});				
				}); //animate 
				//$(this).removeClass("FIRST");
			}
		)
		.each(function(){
			if ( this.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) ){
				$(this).trigger("load");
				//$("#nav").css("background","red");
			}
		}); 
	} //function
	setupFullscreenImage();

	/*
		TRANSITION
		
	*/
	$("#microns a").click(function(e)
	{
		e.preventDefault();
		// Prevent Double-Click
		if ( $(this).hasClass("current_micron") == true ) {
			return false; // stop
		}
		var target_image = '#whit_fullscreen_image-' + $(this).attr("rel");
		if ( $(target_image).hasClass("CURRENT") == true )
		{
			return false; // stop
		}
		var outgoing_image = '#' + $(".CURRENT").attr("id");
		$("#microns a").removeClass("current_micron");
		// DO STUFF WITH THE IMAGES.
		$(outgoing_image).removeClass("SCALE").removeClass("CURRENT");
		$(target_image).addClass("SCALE").addClass("CURRENT").css("opacity",0).css("visibility", "visible").css("z-index", "6");
		sizeFullscreenImage(); // call this once we've given the new image the .SCALE class. 
		$(target_image).animate({'opacity' : 1 }, transition_speed, function(){	// Fade in. Then...
		
			$(outgoing_image).css("z-index", "").css("visibility", "").css("opacity", ""); //removeClass("CURRENT").
			$(target_image).css("z-index", "5"); 

		}); //animate 
		
		$(this).addClass("current_micron");
		
	});

	sizeFullscreenImage();
	
	$(window).resize(function() { 
		sizeFullscreenImage();
	});

}); //end document ready