function calculateNewHeight(img) {
	var w=img.width;
    var h=img.height;
    if(w>500) h*=500/w;
    if(h<100) h=500;
    return h;    
}

function showLoading() {
	large_img=$(".large_image img").hide();
	$(".large_image").addClass('loading');
	var h=calculateNewHeight(large_img);
    //$(".loading").css("height", h);
  	$(".loading-message").html("Now loading...");
}

function updateLargeImage(params) {
	var active_img = $("img.active");
	var description=active_img.next().html();
	var large_div = $(".large_image");
	var large_img = $(".large_image img").get(0);
	
	$(".loading-message").html(""); 
		
	var img = new Image();
  	var timeoutID=false;
  	if(params&&params['showLoading']) {
		timeoutID = setTimeout("showLoading()", 100);
  		
  	}
    // wrap our new image in jQuery, then:
  	$(img)
    // once the image has loaded, execute this code
    	.load(function () {
    		if(timeoutID) clearTimeout(timeoutID);
    	// set the image hidden by default    
    		$(this).hide();
    		var h=calculateNewHeight(this);
    		//alert("Hey! "+h);  	
  	
        	$(".large_image").css("height", h);
        	
    	// with the holding div #loader, apply:
    		large_div
    		// remove the loading class (so no background spinner), 
    		.removeClass('loading');
        	// then insert our image
        	large_img.src = this.src; 
        	//alert("Hey!");
        	$(large_img).fadeIn("slow");
        	$(".large_image_container .image_description").html(description).css("width", large_img.width-8); 
        	large_img.title=description;
        	 
    	})
    
    	// if there was an error loading the image, react accordingly
    	.error(function () {
      		// notify the user that the image could not be loaded
      		alert("The image could not be loaded.");
    	})
    
    	// *finally*, set the src attribute of the new image to our image
    	.attr('src', active_img.get(0).lowsrc);
    
}

$(document).ready(function() {
	updateLargeImage();
	
	$(".image_array img").click(function() { 
		$("img.active").removeClass("active");
		$(this).addClass("active");
		updateLargeImage({showLoading: true});
		});
});