Current File : /home/aventura/public_html/js/jquery.background.image.scale-0.1.js

/** 
 * @projectDescription Scalable Background Image
 * @author 	Matt Hobbs (http://nooshu.com/)
 * @version 0.1
 * 
 * Takes an IMG tag you want as a page / container background
 * and scales the image up / down depending on page size
 */
(function($){
	$.fn.backgroundScale = function(customOptions){
		//Merge default and user options
		var options = $.extend({}, $.fn.backgroundScale.defaultOptions, customOptions);
		return this.each(function(i){
			var $this = $(this);
			var $bgImage = $(options.imageSelector);
			
			//Set some basic CSS positioning rules
			$this.css({position: "absolute"});
			$bgImage.css({position: "absolute"});
			
			//Define out vars
			var containerWidth, containerHeight, containerRatio;
			var imageWidth, imageHeight, imageRatio;
			
			//Manipulation function
			var imageManipulation = function(){
				//Set the container details
				containerWidth = $this.width() + options.containerPadding;
				containerHeight = $this.height() + options.containerPadding;
				containerRatio = containerWidth / containerHeight;
				
				//Set the image details
				imageWidth = $bgImage.width();
				imageHeight = $bgImage.height();
				imageRatio = imageWidth / imageHeight;
				
				//Center the image within the container?
				if(options.centerAlign){
					$bgImage.css({
						left: '50%',
						top: '0',
						marginLeft: -(containerWidth/2),
						marginTop: -(0)
					});
				}
				
				//Decide what to do with the image
				if(imageRatio < containerRatio){//Width less than height
					$bgImage.css({
						width: containerWidth,
						height: containerWidth * (1/imageRatio)
					});
				} else if(imageRatio > containerRatio){//Height less than width
					$bgImage.css({
						width: containerHeight * imageRatio,
						height: containerHeight
					});
				} else if(imageRatio == containerRatio){//Unlikely event ratios are equal
					//Image width less or equal to height, choose width as it's shorter
					if(imageWidth <= imageHeight){
						$bgImage.css({
							width: containerWidth,
							height: containerWidth * (1/imageRatio)
						});
					} else {//Else choose shorter height
						$bgImage.css({
							width: containerHeight * imageRatio,
							height: containerHeight
						});
					}
				}
			}
			
			//Fire on page load
			imageManipulation();
			
			//Add the browser resize event
			$(window).bind("resize.backgroundScale", function(){
				imageManipulation();
			})
		});
	}
	
	//Set our plugin defaults
	$.fn.backgroundScale.defaultOptions = {
		imageSelector: "#bgImage",
		centerAlign: true,
		containerPadding: 80
	};
})(jQuery);