/*
 * Simple jQuery background resizer
 * tama@tama.co.nz
 * 19 August 2010
 */

// create the object
var Background = {};

Background.init = function()
{
	// get the background image element
	this.background_image_elem = $('#background-image img');
	
	// set the onload function for the image
	this.background_image_elem.load(function() {
		
		// resize the image, because it's visibility: hidden it's still part of the DOM
		// and will resize correctly (this won't work if it's display: none).
		Background.resize();
		
		// show the image when it's loaded and resized
		$(this).css("visibility", "visible");
		
	});
	
    // resize the background whenever the window is resized
	$(window).resize(function() {
		Background.resize();
	});
	
	 // do this just incase
       setTimeout(function() {Background.onLoad()}, 200);

	
}


Background.resize = function()
{
	// get the width and height of the window
	var width = $(window).width();
	var height = $(window).height();

	// figure out the ratios between the image and the window
	var widthRatio = width / this.background_image_elem.width();
	var heightRatio = height / this.background_image_elem.height();

	// calculate the new image size
	var r = Math.max(widthRatio, heightRatio);
	var imageWidth = Math.round(this.background_image_elem.width() * r);
	var imageHeight = Math.round(this.background_image_elem.height() * r);

	// and resize it
	this.background_image_elem.width(imageWidth);
	this.background_image_elem.height(imageHeight);

}

// when the document is ready (i.e. DOM has finished but images could still be loading)
// initialise the background object
$(document).ready(function() {
	Background.init();
});