$(document).ready(function() {


	$.fn.imageSize = function(width, height) { 	
		var img = $(this);
		stageRatio = $(window).width()/$(window).height();
		imageRatio = width/height;

		if (stageRatio > imageRatio) {
			// match image width and adjust height to fit
			img.width($(window).width());
			img.height($(window).width()/imageRatio);
		} else {
			// match image height and adjust width to fit
				img.height($(window).height());
				img.width($(window).height()*imageRatio);
		}
	}

	$(function () {
	    var img = new Image();
	    $(img).load(function () {
	        $(this).hide();
	        $('#loader').removeClass('loading').append(this);

			//cache the image on load
			//and it's initial with/height ratio
	      	var image = $(this);
			var width = image.width();
			var height = image.height();

			//resize against initial values
			$(img).imageSize(width, height);

	        $(this).fadeIn();

			//resize image on window resize
			$(window).bind('resize', function(){
				$(image).imageSize(width, height);
			});

	    }).error(function () {
	        // notify the user that the image could not be loaded
	    }).attr('src', './i/stone01.jpg');
	});







/*	
$.fn.imageSize = function(width, height) { 	
	var img = $(this);
	stageRatio = $(window).width()/$(window).height();
	imageRatio = width/height;
	
	$("#data").empty().append('image ratio:<br/> '+imageRatio +'<br/> window Ratio:<br/>'+ stageRatio);

	if (stageRatio > imageRatio) {
		// match image width and adjust height to fit
		img.width($(window).width());
		img.height($(window).width()/imageRatio);
	} else {
		// match image height and adjust width to fit
			img.height($(window).height());
			img.width($(window).height()*imageRatio);
	}
}

$(function () {
    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $('#loader').removeClass('loading').append(this);

		//cache the image on load
		//and it's initial with/height ratio
      	var image = $(this);
		var width = image.width();
		var height = image.height();

		//resize against initial values
		$(img).imageSize(width, height);
		
        $(this).fadeIn();

		//resize image on window resize
		$(window).bind('resize', function(){
			$(image).imageSize(width, height);
		});
		
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', 'http://www.stagaustin.com/i/stag_splash06.jpg');
});







return {


//Sets up the basic functionality

initialize : function() {

// No need for any of this if the screen isn't bigger than the background image
if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {
return;
}

// Parse out the URL of the background image and drop out if we don't have one
url = $body.css('background-image').replace(/^url\(("|')?|("|')?\);?$/g, '') || false;
if (!url || url === "none" || url === "") {
return;
}

// Get the aspect ratio of the image
imgAR = bgImageSize.width / bgImageSize.height;

// Create a new image element
$bgImage = $('<img />')
.attr('src', url)
.attr('id', imageID);

// Create a wrapper and append the image to it.
// The wrapper ensures we don't get scrollbars.
$wrapper = $('<div></div>')
.css({
'overflow' : 'hidden',
'width' : '100%',
'height' : '100%',
'z-index' : '-1'
})
.append($bgImage)
.appendTo($body);

// IE6 Doesn't do position: fixed, so let's fake it out.
// We'll apply a class which gets used in the CSS to emulate position: fixed
// Otherwise, we'll simply used position: fixed.
if (ie6) {
$wrapper.addClass('ie6fixed');
} else {
$wrapper.css({
'position' : 'fixed',
'top' : 0,
'left' : 0
});
}

// Set up a resize listener to add/remove classes from the body
$window.bind('resize', resizeAction);

// Set it up by triggering a resize
$window.trigger('resize');
}
};
}();

$(document).ready(flexiBackground.initialize);





*/	

});