$(document).ready(function() {			  
	$("#content a").click(function(){		
	var hrefValue = $(this).attr("href")				
	 buildOverlayDiv(hrefValue);	
	return false;	
});
//attach 2 new divs to the last body tag
function buildOverlayDiv(hrefValue){
 	pgeHeight = $(window).height(); 
 	srllHeight = document.documentElement.scrollHeight;
	$("body").append("<div id='imgArea'></div>");
	$("body").append("<div id='imgWindow'><div id='photoFade'></div></div>");		
	pageHeight();
	$("#imgArea").css('opacity', '0');
	$("#imgArea").css('position', 'absolute');	
	animateOverlayDiv(hrefValue)
}

function animateOverlayDiv(hrefValue){
	//fade animation sets background opacity to 0.8
	$("#imgArea").fadeTo('fast', 0.8);
	$("#imgArea").show("fast", function () { 
		insertContent(hrefValue);
		});
}

//take the value of the href and amend it to the img src value
function insertContent(hrefValue){
	var imgLoc = $("#content a")	
	var imgHeight = $("#photoFade img").height();
		$("#photoFade").css('opacity', '1');
		$("#photoFade").css('visibility', 'visible');		
		
		$("#photoFade").append("<img src=" + hrefValue + ">");			
		$("#photoFade").append('<span><a href="#" id="close_btn"><img src="images/close.gif" width="12" height="12" border="0" /></a></span>');	
	  return false;
}

//work out the height of a users screen and attach this number to css height of the imgArea div
function pageHeight(){
 	pgeHeight = $(window).height(); 
	pageWidth = $(window).width(); 
 	srllHeight = document.documentElement.scrollHeight;
	if (pgeHeight > srllHeight){
 	$("#imgArea").css('height', pgeHeight);
	$("#imgWindow").css('width', pageWidth);
 	}else{  
 	$("#imgArea").css('height', srllHeight);
 	 }
  }  
  
//when the the body click fadout function called
$("body").click(function(){
		fadeOut();
		  //return false;
		});
$("#close_btn").click(function(){
		fadeOut();
		  return false;
		});
		
//Reove the 2 divs for the overlay and the image from the dom
function fadeOut(){
	$("#photoFade").fadeOut('slow', function () {		
	$("#photoFade").remove();
	});
	$("#imgArea").fadeOut('slow', function () {	
	$("#imgArea").remove();
	});
	}

		
});