/*
 * zoolutionFader - jQuery Plugin
 * Lightweight Content Fader
 *
 * Examples and documentation at: http://zoolution-labs.com
 * 
 * Copyright (c) 2009 - 2010 zoolution-labs.com 
 *
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */


/*

zoolutionFader  is a lightweight content fader plugin for jQuery.  
there are serveral options for adjusting the fading-speed and timeout.
additional you can set a preloader which appears until all images are loaded.

zoolutionFader is short and easy to understand so you can customize the 
functions in the way you need. but in most cases the zoolutionFader will fit 
the to the requirements.

how to use:

first you need the html structure. the default elements for zoolutionFader are a <div> with a <ul> inside.
each <li> elemnt of the <ul> is a fading element. for example:

		<div id="zoolution_fader">
			
			<ul>	
				<li>
					<a href="#"><img src="img/header_blue.jpg" alt="" /></a>
				</li>
				
				<li>
					<a href="#"><img src="img/header_green.jpg" alt="" /></a>
				</li>
				
				<li>
					<a href="#"><img src="img/header_green2.jpg" alt="" /></a>
				</li>
			</ul>
		
		</div>

than you need the css definitions for the fader. in this case my images are 984x430px

#zoolution_fader{
background: #fcfbfb;
width:984px;
height:430px;
}
#zoolution_fader ul, #zoolution_fader li{
margin:0;
padding:0;
list-style:none;
}
#zoolution_fader li{ 
width:984px;
height:430px;
position: relative;
overflow:hidden; 
display: none;
}
#zoolution_fader img{
border: none;
width:984px;
height:430px;
}	
#zoolution_fader a{
text-decoration: none;
}
#zoolution_fader .zoolution_preloader{
background: url('img/loader.gif') center center no-repeat;
height: 100%;
}


the next you need is the jQuery framework and the zoolutionFader plugin. place these tags in yout html header.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.zoolution-fader.js"></script>


to get the zoolutionFader work you have to call the function and bind it to the html element. 
<script type="text/javascript">
$(document).ready(function() { 

	$("#zoolution_fader").zoolutionFader();
	
});
</script>

that's it.


more examples:

if you want to adjust the transistion and the timeout you can do this by setting the options like

$(document).ready(function() { 

	$("#zoolution_fader").zoolutionFader(zooTimeout: 2000, zooFadeIn: 600);
	
});
 

to call the preloader which appears until all imgages are loaded try this:

$(document).ready(function() { 

	$("#zoolution_fader").zoolutionFader(zooPreloader: true);
	
});


of course you can bind the loop to multible containers with different options

$(document).ready(function() { 

	$("#zoolution_fader").zoolutionFader(zooPreloader: true);
	$("#zoolution_fader_2").zoolutionFader(zooTimeout: 8000);
	
});


also it doesn't matter what kind of html is inside the <li> you can mix text, images, iframes or even flash.

in this case there are images with an 


*/

(function($) {

        $.fn.zoolutionFader = function(options) {
		
		// set defaults for html structure, pause, fade speed and preaload
		
          var defaults = {
          
          	zooID: '#'+$(this).attr('id'),
          	zooIndex: 0,
          	zooTimeout: 4000,
         	zooFadeIn: 800,
          	zooFadeOut: 600,
          	zooPreload: false,
          	zooSingle: false
          
          };
        
        // override the defaults by options
         var options = $.extend(defaults, options);
          
          
       		
       	 zoolution_rotator = function(options){
  		      
  		     
  		     // count the child elements
  		       		
       		 var size = $(options.zooID+" ul").children().size();
       		 
	 			
	 		
	 		// if the loop starts 
	 		 if(options.zooIndex == "0"){
	 			
	 			// setting the step index 
	 			var step = 1;
	 			var prev = 0;
	 	
	 			var current = $(options.zooID+" ul li:nth-child("+step+")");
	    		var oldie = $(options.zooID+" ul li:nth-child("+prev+")");
	    		
	    		// show the first element
	    		$(current).fadeIn(options.zooFadeIn);
	
	 		 }
	 		
	 		 else{
	    		
	    		// setting the step index 
	    		var step = options.zooIndex+1;
	    		var prev = options.zooIndex;
	   			
	   			
	   			// if the current element ist the last element
	    		if(size < step){
	    			
	    			// setting the step index 
	    			step = 1;
	    			prev = size;
	    
	    		} 
	 
	 		 
	 		 var current = $(options.zooID+" ul li:nth-child("+step+")");
	 		 var oldie = $(options.zooID+" ul li:nth-child("+prev+")"); 	
	 	
	 	
	 		 }
	 		
	 		 var singlecheck = false;
	 		 if(size < 2) singlecheck = true;
	 			
	 		 var update = {
	    		zooIndex: step,
	    		zooSingle: singlecheck
	    		
	    	 };
	    	
	    	 var options = $.extend(options, update);
	 		
	 		 // fade the last element to the current element
	 		 
	 		 if(options.zooSingle == false){
	 		 
	 		 		$(oldie).fadeOut(options.zooFadeIn, function() {
        			$(current).fadeIn(options.zooFadeIn);
        			
      		 	});
      		 	
      		 }
			
	 		 
	 		 timeout = setTimeout(function(){
				
				zoolution_rotator(options);
	
			 },options.zooTimeout); 
       		
			};
			
			
			
       		// hiding the images until they are loaded
       	   
       	   	if(options.zooPreload){
       	   		
       	   		$(options.zooID).html('<div class="zoolution_preloader">'+$(options.zooID).html()+'</div>');
       	   		
       	   
       	   		$(window).load( function() {
    		
    				// calling the loop
    				zoolution_rotator(options);
    			
    				// hiding the preload background image
    	    		$('.zoolution_preloader').css('background-image', 'none');
    
    	   		});
    	   	}
    	   	else{
    	   	
    	   		zoolution_rotator(options);
    	   	
    	   	}

       	   
     		

        };
})(jQuery);