jQuery(document).ready(function($) {


/* -----------------------------------------------------------------------------------------------------------------

	Email Confuserator

----------------------------------------------------------------------------------------------------------------- */

function formatMail(){
	
	$(".format-mail").each(function(){
		
		var name = $(this).attr("data-name");
		var url = $(this).attr("data-url");
		
		$(this).html('<a href="mailto:'+name+'@'+url+'">'+name+'@'+url+'</a>');
		
	});
}
formatMail();








/* -----------------------------------------------------------------------------------------------------------------

	FULLSCREEN BACKGROUND IMAGES	

----------------------------------------------------------------------------------------------------------------- */



var $fullscreen = $("#fullscreen");

if ( $fullscreen.length ){ // let's do this!
	
	
	var transition_speed = 1000;	
	
	var $content = $("#content"),
		pageH = $("#page").height(),
		footerH = 322; //$("#footer").height() - 6; // shadow is being calculated in the height...
		
	var contentPaddingTop = ($content.css("padding-top").replace(/[^\d\.]/g, ''))*1 + ($content.css("padding-bottom").replace(/[^\d\.]/g, ''))*1;


	function sizeFullscreenImage() {

		var window_width = $(window).width();
		var window_height = $(window).height();
		
		if ( window_height - footerH > pageH ) { // if window height is greater than page height
			window_height = window_height - footerH;
		} else {
			window_height = pageH; 
		}
		
		
		// Make sure #content is full height also. Why?
		// so microns are always below it. And, so background on #content is always full height.
		$content.css("height", (window_height-contentPaddingTop)+"px");


		var $img = $(".SCALE");
		// $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 height.
		var oh = window_height;
		var ow = window_height/(ratio);
			
		$img
			.attr("height", oh)
			.attr("width", ow) // Math.round?		
			.parent("div").css({ 
				'width' : window_width+"px",
				'height' : window_height+"px"
				});
				
		$fullscreen.css({ 
			'width' : (window_width)+"px", //window_width-10 *nearly* fixes the almost scroll bar appearing
			'height' : window_height+"px",
			'overflow' : 'hidden'
			});

		//} // if window_height


	} 






	/* 
		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(){
					$("#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();

	
	
	
/* ----------------------------------------------------------------	

	NEW TRANSITION
	start

----------------------------------------------------------------- */	





	
/* ----------------------------------------------------------------	

	end
	NEW TRANSITION

----------------------------------------------------------------- */	

	
	
	$("#whit_fullscreen_image-1").parent("div").css("visibility", "visible"); // set up the first one.
	
	/*
		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");
		$(target_image).addClass("SCALE").addClass("CURRENT");
		$(target_image).parent("div").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).parent("div").animate({'opacity' : 1 }, transition_speed, function(){	// Fade in. Then...
		
			$(outgoing_image).parent("div").css("z-index", "").css("visibility", "").css("opacity", ""); //removeClass("CURRENT").
			$(target_image).parent("div").css("z-index", "5"); // was 5

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






















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

	sizeFullscreenImage();
	//contentSizer();


} else { // end if $fullscreen.length

	var $content = $("#content"),
		contentPaddingTop = ($content.css("padding-top").replace(/[^\d\.]/g, ''))*1 + ($content.css("padding-bottom").replace(/[^\d\.]/g, ''))*1,
		pageH = $("#page").height(),
		footerH = 322; //$("#footer").height() - 6; // shadow is being calculated in the height...
	
	if ($content.length){
			
			function sizeFullscreenImage() {
		
				var window_width = $(window).width();
				var window_height = $(window).height();
				
				if ( window_height - footerH > pageH ) { // if window height is greater than page height
					window_height = window_height - footerH;
				} else {
					window_height = pageH; 
				}
				
				
				// Make sure #content is full height
				$content.css("height", (window_height-contentPaddingTop)+"px");
			}
		
			$(window).resize(function() { 
				sizeFullscreenImage();
				//contentSizer();
			});
		
			sizeFullscreenImage();
			//contentSizer();
	}
} // end else


	


//alert("script.js");



}); //end ready