// JavaScript Document

  $(document).ready(function(){
	//$("#container").css( { display: "none"} );
	$variables = {};  
	$("#container").after("<div id='box'><a class='closeBtn'><p class='closeMessage'>Close window</p></a></div><div id='boxBG'></div>");
	$("#boxBG").height($(document).height());
		
	$("div.personsPet a").click(function(event){  
		event.preventDefault();
		$variables.linkPath = $(this).attr("href");
			////console.log($variables.linkPath); 
		//if($variables.linkPath == "#" || $variables.linkPath == "") {
			$variables.linkAlt = $(this).find("img").attr('alt'); 
			$variables.linkTitle = $(this).find("span.imageTitle").html();
			$variables.linkDescription = $(this).find("span.imageDescription").html();
			////console.log($variables.linkDescription); 
			if ( $("#box img").length > 0 ) {
				$("#box img").remove();
			} 
			
			//$("#box").center();
			$("#boxBG").css( {filter:"alpha(opacity=60)"});
			$("#boxBG").fadeIn(function() {
			//$("#boxBG").fadeTo(250, 0.55)//, function () {
			//function() {				
			$("#box p").remove();
			//$("#box").fadeIn(function() {
				////console.log(" LOAD IMAGE HERE");
				var img = new Image();
			  // wrap our new image in jQuery, then:
				$(img).load(function () { 
				//  once the image has loaded, execute this code
			   //set the image hidden by default  
				
				//	$(img).hide();
					//console.log("Image loaded");
					$("div#box a").html("<p>Close window</p>");
					$("div#box a").append(img);
					$("div#box img").css( { display:"block" });
					$variables.imageWidth = $("div#box").width();
					$variables.width = 0;
					$variables.height = 0;
					  if (document.documentElement) {
						  $variables.width = document.documentElement.offsetWidth;
						  $variables.height = document.documentElement.offsetHeight;
					  } else if (window.innerWidth && window.innerHeight) {
						  $variables.width = window.innerWidth;
						  $variables.height = window.innerHeight;
					  }


					//$("div#box").center();
					//console.log($variables.imageWidth);
					//console.log($variables.width);
					$variables.diffwidth = (($variables.width - $variables.imageWidth) /2);
					//console.log($variables.diffwidth);
					$("div#box").fadeIn();
					$("div#box").css( { "position": "fixed"});
					$("div#box").css( { "left": $variables.diffwidth});
					
					
				})  
				$(img).error(function () {
					$("#box p").remove();
					$("div#box").fadeIn();
					$("div#box a").html("Sorry that image can not be found, please try another");
					// notify the user that the image could not be loaded
					////console.log("ERROR");
				 })
				$(img).attr('src', $variables.linkPath);
				$(img).attr('alt', $variables.linkAlt);
				$("div#box a").after("<p></p>");
				$("div#box p").html("<span class='imageTitle'>"+$variables.linkTitle+"</span>"+$variables.linkDescription);
				
				}); 
			//	} 

			 });  
	   
			 $("div#box a").click(function(event){ 
				////console.log(" OUT");
				$("div#box").fadeOut();
				$("div#boxBG").fadeOut();
				event.preventDefault();
			})
	
});