window.scrollTo(0, 1); 


jQuery(document).ready(function($) {
 
 	
	// NAV FADE IN
	

       

    $('#welcome, #thetop, #thenav, #header, #nav, #subNav, #quote, #quote2, #check, #micron').hide().fadeIn(1000);  
 
 	
 	
	
	$(".highlight, #subNav li").fadeTo("slow", 1); // This sets the opacity of the thumbs to fade down to 60% when the page loads

		$(".highlight, #subNav li").hover(function(){
	
			$(this).fadeTo("fast", 0.9); // This should set the opacity to 100% on hover
		},
	
		function(){
	
   			$(this).fadeTo("fast", 1); // This should set the opacity back to 60% on mouseout
		});
	
	
	// FULLSCREEN BACKGROUND IMAGES
	 $(window).load(function() { 
	
	
	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.attr("data-ratio");
		
		//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 ){ 
			$("#biggy").css("width", window_width+"px").css("height", window_height+"px"); 
		}
	} 


	/* 
		SET UP IMAGES
		This runs the first time the page loads.
		It gets the first "image" and applies it's src, allowing the browser to load it.
		Once the first image is loaded and made visible, the other images are given their src so 
		the browser can load them into cache in the background, without them being seen.
	*/
	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(){
					$("#biggy 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
		
	*/
	$("#buttons a").click(function(e){
		e.preventDefault();
		
		// Prevent Double-Click
		if ( $(this).hasClass("current_button") == 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");
		
		$("#buttons a").removeClass("current_button");							
										
		
		// 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_button");
		
	});


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

});

}); //end document ready