(function($) {
	$.fn.fullBg = function(){
	
		// we need the image and the container to work with
		var bgImg 		= $(this).children(':first');
		var bgContainer = $(this);
		
		//
		// the guts of the resize logic. works our the ratio and picks the most 
		// applicable way to scale the image making sure to keep the aspect ratio ok.
		//
		function resizeImg() {
		
			var imgwidth = bgImg.width();
			var imgheight = bgImg.height();
			
			var winwidth = $(window).width();
			var winheight = $(window).height();
			
			var widthratio = winwidth / imgwidth;
			var heightratio = winheight / imgheight;
			
			var widthdiff = heightratio * imgwidth;
			var heightdiff = widthratio * imgheight;


			// lets do the resize shal we!
			if(heightdiff > winheight) {
				bgImg.css({
					width: winwidth+'px',
					height: heightdiff+'px'
				});
			} else {
				bgImg.css({
					width: widthdiff+'px',
					height: winheight+'px'
				});		
			}
			
			// set container width and height.
			bgContainer.width(winwidth);
			bgContainer.height(winheight);
			
			// resize the overlay's height so that scroll bars dont extend outside
			// our usable screen area.
			$('#background_overlay').height(winheight);
		} 
		
		// fire the image resize only after the image has loaded and we have its width. 
		bgImg.load(function() {
			resizeImg();
		});

		// attach the onload function, image .load wont fire if the image is cached
		$(function() { resizeImg(); });
		
		// attach our window resize event to the window.
		$(window).resize(function() {
			resizeImg();
		});

		
	};
	
})(jQuery)