$(function(){		
	
	// preloader image logic	
	var loading = $("#loading");		

	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"});
	}

	function hideLoading(){
		loading.fadeTo(1000, 0);

	};
	// stop preloader image logic

		function fadeInBg() {
		$("#image_container").fadeIn(2000);
		hideLoading();	
    }				

	function showCopy() {
		$("#portfolio_copy").fadeIn(2000);
	}

	// portfolio image loading logic		
	$("#thumbs img").click(function(){

		var id = $(this).attr("id");  // used to determine which image to get based on the thumbnail image id tag

		showLoading(); //fade in the animated loading gif

		
		$("#portfolio_copy").fadeOut(1000, function() {
			
			$("#portfolio_copy").load("page_copy.html #" + id, showCopy);
		});
		
		
		$("#image_container").fadeOut(2000, loadPortImg);  // fade out current image (if any) and calls the img loading function

			function loadPortImg() {				
				
				$("#image_container").empty();  // clear any imaage currently loaded			
				$("#image_container").append("<img id='loaded_img' src='' / >");  // add new empty image tag as loading "shell"
				
				$("#loaded_img").load(function() {  // once the loaded_img div is fully loaded call fadeInBg funciton
										
					fadeInBg();
					
				});
				
				$("#loaded_img").attr("src","images/" + id + ".jpg");  // now add the selected img src to the appended img tag (once this loads fully the fadeInBg function is called
				
		} // stop loadPortImg function
			

	});  // stop thumbnail click function
	
}); //stop jquery