/*
 * Author Ken Ott - www.metamorphicmedia.com
 * Fades in Image by send ing the URL and container element ex - "#container"
 */
        
function fadeInImage(imageURL, containerElement){
	//Set the opacity of the image to 0 and display loader
	$(containerElement).addClass('loading');   
	$(containerElement).find('img').css({opacity: 0.0});
		
	$(containerElement).animate({height: "100", width:"100"},		//set low height for animation up -needed because we are actually loading the image in php not JS
								100,					//speed
								function(){	//anim done
									var img = new Image();
									$(img).load(function() {    // when image has loaded...
										$(containerElement).removeClass('loading');   // remove '.loading' class (loading anim gif), then insert our image in div
										//alert($(this).height());
										$(containerElement).animate({	//animations
																		height: $(containerElement).find('img').height(), 
																		width: $(containerElement).find('img').width()
																	}, 		
																	500,														//speed
																	function() {	//anim done
																		$(containerElement).find('img').fadeTo("slow", 1.0); // fade image in
																	});
									}).attr('src', imageURL);
								});
}

        
function fadeInImage_JSload(imageURL, containerElement){
	
	//similar to above but physically loads the image -IF USING REMOVE IMAGE FROM PHP BELOW
	//THIS method must be integrated into the above to work correctly... it's not complete
	
	$(img).load(function() {    // when image has loaded...
		//$(this).css('display', 'none'); // hide image by default
		$('#large_work_display').removeClass('loading').append(this);   // remove 'div#loader.loading' class (loading anim gif), then insert our image in 'loader' div
		$(this).find('img').fadeTo("slow", 1.0); // fade image in
	}).attr('src', imageURL);
}