/*
 * 	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 = {	
			showControls: true,
			controlId: 'controls',	
			controlBottom: 10,
			controlLeft: 10,
			playText: 'Play',
			playId :'controlsPlay',
			pauseText: 'Pause',
			pauseId :'controlsPause',
			pause:	3000,
			speed: 500,
			loop: true
		}		
		var options = $.extend(defaults, options);
		this.each(function() {  						   
			var obj = $(this); 
			var x;
			var current = 1;
			var isPlaying = true;
			//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
			obj.css({"position": "relative"});
			$("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;
			
			if(options.showControls){
				var html = "";
				html += '<div id="'+ options.controlId +'"></div>';	
				$('ul', obj).after(html);	
				
				//Create play/pause buttons
				$('#'+ options.controlId).append('<span id="'+ options.playId +'"><a href=\"javascript:void(0);\">'+ options.playText +'</a></span>' +' <span id="'+ options.pauseId +'"><a href=\"javascript:void(0);\">'+ options.pauseText +'</a></span>');
				
				
				$('#'+options.controlId).css({"position":"absolute", "left": options.controlLeft+"px", "bottom": options.controlBottom+"px", 'z-index':100000});
				
				
				$('#'+ options.playId).css('display','none');
				$('#'+ options.pauseId).css('display','block');
				
				$('#'+ options.playId).click(function(){						
						toggle();
				 });
				
				$('#'+ options.pauseId).click(function(){						
						toggle();
				 });
				
				
				function toggle(){
					if(isPlaying){
						clearInterval(timer);
						isPlaying = false;
						$('#'+ options.playId).css('display','block');
						$('#'+ options.pauseId).css('display','none');
					}
					else{			
						isPlaying = true;	
						fade();
						timer = setInterval( fade, options.pause)	;
						$('#'+ options.playId).css('display','none');
						$('#'+ options.pauseId).css('display','block');
					}
				};
			};
			
			
			function fade(){	
				count++;
				if(current == sLength){
					if(options.loop){
						current = 1;
					}
					else{
						return false;	
					}
				}
				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);