/*
 * WHQ Image Loader 1.0 by Sam Holton
 * 
 * USE: A loader that displays each image individually after it loads.
 */

//TO DO:

/*
 * 
 */

(function($){
	
	$.fn.imageLoader = function(options){
		
		var defaults = {
				// defaults here
		}
		
		var options = $.extend(defaults, options);
		var parent;
		var thisLoader;
		
		return this.each(function(){
			
			$('#content img').each(function(){
				
				parent = $(this).parent();
				
				//set image's parent position to relative
				parent.css('position','relative');
				//add loader div to parent div
				parent.append('<div class="loader"></div>');
				//set loader div position to middle
				parent.children('.loader').css('top', (parent.height()/2) - (parent.children('.loader').height()/2));
				parent.children('.loader').css('left', (parent.width()/2) - (parent.children('.loader').width()/2));
				
				$(this).load(function(){
					displayImage($(this));
				});
				
			});
			//$('img').fadeIn();
			
			function displayImage(_img){
				
				thisLoader = _img.parent().children('.loader');
				
				_img.css('visibility','visible');
				_img.css('display','none');
				thisLoader.css('display','none');
				_img.fadeIn();
				
			}
			
		});
	}
	
})(jQuery);

//-----------------------------------------------------------------------------------------------------------------------------------