/*
 * jQuery Depth Plugin
 * This jQuery plugin displays a set of images giving the perception of depth using mouse movements
 * @name jquery.depth.js
 * @author Timothy Oswald - http://digistorm.com.au
 * @version 1.0
 * @date 25 August, 2010
 * @category jQuery plugin
 * @copyright (c) 2010 Timothy Oswald (digistorm.com.au)
 * @license Dual licensed under the MIT and GPL licenses.
 * @example Visit http://digistorm.com.au/XXXXXX for more information about this plugin
 */

(function($){
	$.fn.depth = function(options) {
		
		// Matched objects
		var jQueryMatchedObj = this;
		
		// Large image offset
		var offset = 0;
		var maxWidth = 0;
		
		// Number of Images that have loaded
		var loaded = 0;
		
		// Define Options
		var defaults = {
			Xm:0.1,
			Ym:0.01,
			center:true,
			loader:'/images/loading.gif',
			images: new Array()
		};
		var options = $.extend(defaults, options);
		
		//***************************************************
		// Load Image
		//***************************************************
		function loadImage(src,selector,id,z,left,bottom,callback) {
			
			if (src == '' || selector == '') return false;
			
			$(selector).addClass('Loading');
			
			var img = new Image();
		
			$(img).load(function () {
			
				// Hide image
				$(this).hide();
			
				// Show Loading image
				$(selector).append(this);
				
				// Fade in image
				$(this).fadeIn(200,callback);
			})
			
			.error(function () {
				// notify the user that the image could not be loaded
			})
			
			// Set the src attribute of the new image
			.attr('src', src)
			
			// Set image id
			.attr('id',id)
			
			// Set z-index
			.css('z-index',z)
			
			// Set bottom
			.css('bottom',bottom)
			
			// Set left
			.css('left',left)
			
			// Format Background images
			.css('position','absolute');
			
		}
		
		
		//***************************************************
		// Perform after image load has completed
		//***************************************************
		function afterLoad() {
			if (options.center) {
				
				// Find the greatest width of the passed images
				$.each(options.images, function(i,obj) {
					if ($('#IMG_'+i).width()>maxWidth) maxWidth = $('#IMG_'+i).width();
				})
				
				if (maxWidth>jQueryMatchedObj.width()) {
					offset = (maxWidth-jQueryMatchedObj.width())/2;
				}
			}
			
			// Update loaded images counter
			loaded++;
			
			// Update loading image
			updateLoader();
		}
		
		
		//***************************************************
		// Build and append Loading 
		//***************************************************
		function updateLoader() {
			
			// Images left to load
			var imagesLeft = options.images.length-loaded;
			
			// Div style
			var divStyle = 'background:#FFF; padding:2px 4px 2px 2px; z-index:999; position:absolute; bottom:10px; left:10px;';
			
			if (loaded==0) {// Hasnt started loading yet
				jQueryMatchedObj.append('<div id="LOADER" style="'+divStyle+'"><img style="vertical-align:middle" src="'+options.loader+'" width="16" height="16" /> Loaded '+loaded+' of '+options.images.length+'</div>');
			} else if (loaded<options.images.length) {// Still loading
				jQueryMatchedObj.children('#LOADER').html('<img style="vertical-align:middle" src="'+options.loader+'" width="16" height="16" /> Loaded '+loaded+' of '+options.images.length);
			} else {// Finished loading
				jQueryMatchedObj.children('#LOADER').html('<img style="vertical-align:middle" src="'+options.loader+'" width="16" height="16" /> Loaded '+loaded+' of '+options.images.length);
				jQueryMatchedObj.children('#LOADER').fadeOut('slow');
			}
		}
		
		
		
		
		
		
		// Perform actions on each selection
    	return jQueryMatchedObj.each(function() {
			
			// Show loading image
			updateLoader();
			
			// Calcualte the number of images passed
			var numImages = options.images.length;
			
			// Load images to document
			$.each(options.images, function(i,obj) {
				loadImage(obj.img, jQueryMatchedObj, 'IMG_'+i, numImages-i, obj.x, obj.y, afterLoad);
			})
			
			// Bind mouseMove to document
			$(document).mousemove(function(e){
				
				var xPos = e.pageX-($(window).width()/2);
				var yPos = e.pageY-($(window).height()/2);
				
				// X movement
				$.each(options.images, function(i,obj) {
					$('#IMG_'+i).css('left', (xPos*options.Xm*(i+1)-offset+obj.x)+"px");
				})
				
				// Y movement
				$.each(options.images, function(i,obj) {
					$('#IMG_'+i).css('bottom', (yPos*options.Ym*(i+1)+obj.y)+"px");
				})
				
			});
    	});
		
	};
})(jQuery);