/*
//Example usage:
$(function() {
	//If #overlay is already in DOM, append() is unnecessary
	$("body").append('<div id="overlay"></div>');
	$(document).preloadit();
});

Overlay CSS:
#overlay {
	background: #333;
	opacity: .5;
	width: 20000px;
	height: 20000px;
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 0;
}

*/
//preloadit
(function($) {
	$.fn.extend({
		preloadit : function(options) {
			var defaults = {
				onComplete: false,	
				onUpdate: false
			};
			
			var opts = $.extend(defaults, options);			
			
			return this.each(function(i) {
				var $images = $(this).find("img"),
					cache = [],
					loadedImages = [];
				$images.each(function(i) {
					var $t = $(this);
					var cacheImage = document.createElement('img');					
					
					cache.push(cacheImage);					
					$(cacheImage).bind('load', function(e) {						
						
						loadedImages.push(e.target);
						$(this).unbind('load');
						
						//run the update function
						if(opts.onUpdate){
							var data = {
								loaded:loadedImages.length,
								total:$images.length
							};
							opts.onUpdate(data);	
						}
						
						//run the oncomplete images function well all images loaded
						if (loadedImages.length == $images.length) {

							if(opts.onComplete){						
								opts.onComplete();
							}
						}
					});
					cacheImage.src = $t.attr('src');
				});		
			});
		}
	});
})(jQuery);