function loadImg(url, title, caption){ 

	  var img = new Image();
	  $('#bg_image').addClass('loading').html("");
      $('#caption').html("");
	  // wrap our new image in jQuery, then:
	  $(img)
		// once the image has loaded, execute this code
		.load(function () {
		 	$(this).css('display', 'none');
            $('#bg_image').removeClass('loading').html(this);
            $(this).fadeIn();
			
			///////////////			
			
			$(window).bind("resize", function(){
				imageresize(img);
			});
			
			imageresize(img);
			/////////////////
		  if(title != "")
			  $('#caption').html('<h1 class="title">' + title +'</h1><p class="caption">' + caption + '</p>');
		})
		
		// if there was an error loading the image, react accordingly
		.error(function () {
		  // notify the user that the image could not be loaded
		  alert("fail");
		})
		
		// *finally*, set the src attribute of the new image to our image
		.attr('src', 'http://www.phidhouse.org/images/' + url);
}

function imageresize(img, ratio){
	var ratio = $(img).height()/$(img).width();
	
	var width = $(window).width();
	var height = $(window).width()*ratio;
	
	if(height < $(window).height()){
		width = $(window).height()*(1/ratio);
		height = $(window).height();
	}
	
	$(img).css("width", width);
	$(img).css("height", height);
	
}