/*
 * 	fade 0.1 - jQuery plugin
 */
 
/*
	$("#slider").fade();
	<div id="slider">
		<ul>
			<li><a href="#" title="Image"><img alt="Image 1" src="1.jpg" /></a></li>
        	<li><a href="#" title="Image"><img alt="Image 1" src="2.jpg" /></a></li>
        	<li><a href="#" title="Image"><img alt="Image 1" src="3.jpg" /></a></li>
		</ul>
	</div>
 */

(function($) {

	$.fn.fade = function(options){
		var defaults = {
			pause:	3000,
			speed: 500
		}		
		var options = $.extend(defaults, options);
		this.each(function() {  						   
			var obj = $(this); 
			var x;
			var current = 1;
			//Fade in UL if user set the opacity to be 0.
			var sLength = $("li", obj).length;
			var w = $(obj).width(); //Get the width of container div 
			var h = $(obj).height(); //Get the height of container div
			$("ul", obj).css({'width': w, 'height': h, "position": "relative", 'overflow': 'hidden'});// Dynamically set some variables on the UL and position it rel
			$("ul li", obj).css({'position': 'absolute', 'top':'0px', 'left':'0px', 'opacity':'0', 'width':w, 'height':h});//Override potentially dangers stuff :)
			$("ul li:nth-child(1)",obj).css({"opacity":'1', "z-index": 1});
			$("ul", obj).animate({ opacity: '1' }, {duration:options.speed});			
			//Get new li and fade parent UL down.
			var count =1;
			function fade(){	
				count++;
				if(current == sLength){
					current = 1;
				}
				else{
					current++;
					x = current * w;
				}
				$("ul li:nth-child("+current+")",obj).css({"opacity":'0', "z-index": count}).animate({ opacity: '1' }, { queue:false, duration:options.speed, complete:complete});
			}
			//On fade complete
			function complete(){
				//put complete code here	
			};
			//*******************************************
			//Start Timer
			var timer = setInterval( fade, options.pause)
		});
	};

})(jQuery);