//Set up:
	
	var bolZoomed = false; //Default zoom is off
	
	var bolUi = false; //Default UI is off
	
	var strImagePath = 'http://gallery.wrenkitchens.com/gallery/images/fullscreen/'; //Path to Images
	
	//Get the Viewport Dimensions
	
	var intViewPortWidth;
	
	var intViewPortHeight;
	
	
	//Define Functions
	
	//Function to get View Port Dimensions on resize
	
	function fnViewPort()
	{	
		intViewPortWidth = $(window).width();
		
		
		if (self.innerHeight){
			intViewPortHeight =self.innerHeight; // Safari doesnt seem to like the jquery function - odd?
		}else{
		intViewPortHeight = $(window).height();
		}
		
	}
	 
	 
	 //Show/Hide User Interface Controls
	 
	
	function fnShowMenu()
	{
		if (!bolUi) //Check if Ui is already open
		{
		 	$("#galleryThumbNails").animate({
		 						
		 							top:32},1000);
		    
		    $("#menuBar").animate({
		     	
		     						top:-10},500);
		     	
		    $("#menuTrigger").animate({
		     						
		   
		  	 						top:-150},50); 
	     
	    	bolUi = true; // UI is on
		}else{
			
			return false;
			e.cancelDefault();
			
		}
	}
	 
	 
	 
	function fnHideMenu()
	{
	 	if (bolUi)//Check if Ui is already closed
		{
		 	$("#galleryThumbNails").animate({
		 	
		 							top:-255},1000);
		    $("#menuBar").animate({
		     	
		     						top:0},100).animate({
		     	
		     						top:-100},400); 
		     	
		    $("#menuTrigger").animate({
		     		
		     						top:0},600);    	
		     	
		     bolUi = false; // UI is off
		     
	    }else{
			
			return false;
			e.cancelDefault();
			
		}
	 
	}
	 
	 
	 //## Define Image Fit ##
	 
	 //Fit the Main Image to the View Port
	 
	function fnImageFit()
	{
		if(bolZoomed){
			return false;
		}else{
		  
		   	// Calculate the image dimensions based on the Current View Port.
		   	
		   	var imageWidth = intViewPortWidth;
		   	
		   	var imageHeight = Math.round(intViewPortWidth/1.6);
		   	
		   	if (imageHeight>intViewPortHeight)
		   	{
		   	
		   		imageWidth = Math.round(intViewPortHeight*1.6);
		   		imageHeight = Math.round(imageWidth/1.6);
		   		
		   	}
		   	
		   	//Resize the image
		   	
		   	$("img.lifestyle").animate({
		   	
		   							width:imageWidth,
		   							
									height:imageHeight
				
									},100);
		
		}	
	}//## End Image Fit ##
	
		
	//## Define Image Swap ##
	function fnSwapImage(obj)
	{
		//Get the image to be loaded using the Image path and title attr
		
		var strGetImage =strImagePath+obj.title.toLowerCase()+".jpg";
		
		//Fade the current Image to reveal the Preloader and create a transition effect
		$("img.lifestyle, #zoomWrap").animate({
		
								opacity:0
								
								},90);
		
		
		
		//Image needs to be loaded before we can show it
		
		var strUpdateImage = new Image(); //Create a new Image 
		
		$(strUpdateImage).load(function() //Set up the onLoad event
		{
		
			if(bolZoomed) // The if the image changes when zoomed, we need to update both instances of the image, and show the right state
			{
				$("#zoomWrap").css({background:"url("+strGetImage+") no-repeat center center"});
				$("#zoomWrap").animate({ // Fade it in
	
									opacity:1
									
									},90);
				$("img.lifestyle").attr("src",strGetImage); //Set the Main Image src to the new Image
				
			}else{
			
			$("img.lifestyle").attr("src",strGetImage); //Set the Main Image src to the new Image
			
			$("img.lifestyle").animate({ // Fade it in
	
									opacity:1
									
									},90);
			}
		
		});
		
		strUpdateImage.src = strGetImage; // Request the image to load so we can assign it to the main Image
		
	}//## End Image Swap ##
	
	

	//## Define Zoom ##	
	function fnZoomImage()
	{
	    var strZoomBg = $("img.lifestyle").attr("src");
	    	
	    	if(bolZoomed)
	    	{
	    		bolZoomed = false;
	    		$("#zoomWrap").remove();
	    		$("#imageHolder").html("<img class='lifestyle' />");
	    		$("img.lifestyle").click(function(e){fnHideMenu(e);}); //Close UI on image click
	    		$("img.lifestyle").attr("src",strZoomBg);
	    		fnImageFit();
	    		$("#zoomIn").show();
	    		$("#zoomOut, #zoomTab").hide();
	    		fnHideMenu();
	    		
	    		    		
	    	}else{
	    	$("img.lifestyle").css({
	    	
	    		opacity:0
	    		
	    	},1);
	    	 
	    	$("img.lifestyle").wrap("<div id='zoomWrap'></div>")
	    	$("#zoomWrap").css({background:"url("+strZoomBg+") no-repeat center center"}).draggable();
	    	
	    		bolZoomed = true;
		    	fnHideMenu();
		    	$("#zoomIn").hide();
		    	$("#zoomOut, #zoomTab").show();
		    	
		    	
	    	}
	}
	    

	    
	    
//## Dom Ready ##
	
	$(document).ready(function() {
 
 	//Set up the UI triggers
 	
	   	$("#menuTrigger").click(function(){fnShowMenu();}); //Open UI
	   
	    $("#closeMenu").click(function(){fnHideMenu();});	//Close UI button
	    
	    $("img.lifestyle").click(function(e){fnHideMenu(e);}); //Close UI on image click
	    
	    $(".galleryThumbNail img").click(function(){fnSwapImage(this);}); // Create thumbnail functionality
	   
	    
	    
	    $("#zoomIn, #zoomOut, #zoomTab").click(function(){fnZoomImage();});
	    $("#exitGalleryLink").click(function(){
	    	window.close();
	    });
	    
	    
	   
	   
	    
	// Keep an eye on the View Port, when the DOM Loads, and when the browser is resized
	
		fnViewPort(); //Get the View Port Size
		
		fnImageFit(); //Fit the Image to the View Port
		
		$(window).resize(function()
	    {
	    	fnViewPort(); //Get the View Port Size
		
			fnImageFit(); //Fit the Image to the View Port
	    
	    });
		
	    

	 elements = null; //Add THIS!
	    
	    
	});//## End Dom ready ##