
jQuery.fn.scaleBackground = function(options) {

/*
	container_selector = '#page';
	left_ignore_selectors = new Array('#header');
	top_ignore_selectors = new Array();
	fill = true;
	centre = true;
*/
	settings = jQuery.extend({
		container_selector : 'body',
		fill :		true,
		centre :	true,
		top_ignore_selectors	: new Array(),
		left_ignore_selectors	: new Array()
	}, options);
	
	
			_scaleBackground = function() {
				container = jQuery(settings.container_selector);
				
//	get the background image of the page
				bg = jQuery('body').css('background-image');				

//	unset the background image and replace with a colour
				jQuery('body').css('background-color', '#ffffff');
				jQuery('body').css('background-image', 'none');

				url_match = /url\s*\([\'\"]*(.+?)[\'\"]*\)/
				matches = bg.match(url_match);
				if ( matches.length > 1 )
					bg_image = matches[1];
				else
					return false;
				
				if ( ! container.find('#background-container').size() ) {
//	create a new container div to hold the new image
//	and hide it by default
					div = document.createElement('div');
					div.setAttribute('id', 'background-container');
//					div.setAttribute('visibility', 'hidden');
//					div.setAttribute('style', 'display : none;');
					container.append(div);
				}

//	get the jquery handle of the new bg container
				bg_container = container.find('#background-container');
				if ( bg_container.size() < 1 )
					return false;
				bg_container = jQuery(bg_container[0]);
				
				img = document.createElement('img')
				img.setAttribute('src', bg_image);
				bg_container.append(img);
				
// 	roughly position the container and stretch the image
				bg_container.css({position : 'fixed', overflow : 'hidden', top : 0, zIndex : '-10', width : '100%', height : '100%', visibility : 'hidden'});				
				
				_l = 0;
				_t = 0;
//	fix the size of the container ignoring the left floated header
				for ( i = 0; i < settings.left_ignore_selectors.length; i++ ) {
					_l += jQuery(settings.left_ignore_selectors[i]).width();
				}
				
				for ( i = 0; i < settings.top_ignore_selectors.length; i++ ) {
					_t += jQuery(settings.top_ignore_selectors[i]).height();
				}
				
				_w = jQuery(window).width() - _l;
				_h = jQuery(window).height() - _t;
				
				bg_container.css('top', _t).css('left', _l).width(_w).height(_h);
				
				jQuery(window).resize(
					function() {
						_w = jQuery(window).width() - _l;
						_h = jQuery(window).height() - _t;
						bg_container.css('top', _t).css('left', _l).width(_w).height(_h);
						_scaleImage(bg_container.find('img'), bg_container);
					}
				);
//	scale and centre the image leaving the container in its place
				bg_container.find('img').load(
					function() {
						_scaleImage(bg_container.find('img'), bg_container);
//						bg_container.show('slow');
					}
				);
//	that's not enough for ie . do it on page load too
				jQuery(window).load(
					function() {
						if ( jQuery.browser.msie )
							_scaleImage(bg_container.find('img'), bg_container);
//						bg_container.show('slow');
					}
				);
				
//				bg_container.show('slow');
				
				
				
			}
			

			_scaleImage = function(img, bg_container) {
//	get the images parent ( this gives us our size )
				if ( ! bg_container )
					bg_container = img.parent();

//	get the original image sizes if we don't have them already
				if ( img.attr('rel') ) {
					sizes = img.attr('rel').split(',');
					_iw = sizes[0];
					_ih = sizes[1];
				} else {
					_iw = img.width();
					_ih = img.height();
					img.attr('rel', _iw + ',' + _ih);
				}
				
				_pw = bg_container.width();
				_ph = bg_container.height();
				
				_pratio = _pw/_ph;
				_iratio = _iw/_ih;
				
//	are we scaling to fit or fill ?
				if ( settings.fill ) {
					if ( _pratio > _iratio ) {
						_w = _pw;
						_h = _pw / _iratio;
					} else {
						_w = _ph * _iratio;
						_h = _ph;					
					}
				} else {
					if ( _pratio < _iratio ) {
						_w = _pw;
						_h = _pw / _iratio;
					} else {
						_w = _ph * _iratio;
						_h = _ph;					
					}				
				}
				
				if ( settings.centre ) {
					_ml = (_pw - _w) / 2;
					_mt = (_ph - _h ) / 2;
					img.css('margin-top', _mt).css('margin-left', _ml);
				}
				
				
				img.css('width',_w).css('height',_h);
//				alert(bg_container.css('visibility'));
				if (bg_container.css('visibility') == 'hidden')
					bg_container.css({opacity : 0.1, visibility: 'visible'}).animate( { opacity : 1.0 }, 'slow');
			}
			
			_scaleBackground();
}