(function($) {
	// The backImage plugin for scaling a backgound image with browser resizing.
	$.fn.backImage = function(options) {
		
		var settings = $.extend({
					positionX: 'left',
					positionY: 'top',
					stretchXY: true,
					stretchX: false,
					stretchY: false
				},options || {}
			);
		
		return this.each(function(){
			var $this = $(this);
			var position = eval('('+$this.attr('data-position')+')');
			var stretch = $this.attr('data-stretch');
			
			if (stretch){
				settings.stretchXY = (stretch.toLowerCase() == 'xy');
				settings.stretchX = (stretch.toLowerCase() == 'x');
				settings.stretchY = (stretch.toLowerCase() == 'y');
				$this.removeAttr('data-stretch');
			}
			
			if (position){
				if (position.X)
					settings.positionX = position.X;
				if (position.Y)
					settings.positionY = position.Y;
				$this.removeAttr('data-position')
			}
			
			if ($this.attr('data-background')){
				$this.css({
					backgroundImage: 'url('+$this.attr('data-background')+')',
					backgroundRepeat: 'no-repeat',
					backgroundPosition: settings.positionX+' '+settings.positionY,
					backgroundAttachment: 'scroll'
				}).removeAttr('data-background')
			}
			
			if (settings.stretchXY)
				$this.css({backgroundSize: 'cover'});
			else {
				if (settings.stretchX)
					$this.css({backgroundSize: '100% auto'});
				if (settings.stretchY)
					$this.css({backgroundSize: 'auto 100%'});
			}
		});
	};
})(jQuery);