/**
 * jQuery image cycle plugin - $.fn.imgCycle
 * Will rotate through images passed in via imgs array
 *
 * To be called by wrapping element
 * EXAMPLE
 * html: 
 * <div id="cycle-container"></div>
 * 
 * script: 
 * $(function() { 
 *   var imgs = [ 'cycle/1.jpg', 'cycle/2.jpg', 'cycle/3.jpg', 'cycle/4.jpg' ];
 *   $('#cycle-container').imgCycle(imgs);
 * });
 *
 * Accepts 4options:
 * 1. startRandom - default is true.  Will select a random position in the array of images to start displaying.
 * 2. interval - default is 5000 (5 seconds).  The time between rotation calls.
 * 3. speedOut - default is 1000 (1 second). The time it takes to fade out the current image.
 * 4. speedIn - default is 1250 (1 1/4 seconds). The time it takes to fade in the new image.
 *
 * Override options:
 * $(function() { 
 *   var imgs = [ 'cycle/1.jpg', 'cycle/2.jpg', 'cycle/3.jpg', 'cycle/4.jpg' ];
 *   var opts = {
 *     startRandom: false,
 *     interval: 2500,
 *     speedOut: 1500,
 *     speedIn: 1750
 *   };
 *   $('#cycle-container').imgCycle(imgs, opts);
 * });
 *
 * @author: Jeremy Burton (jermbo002@gmail.com)
 * @date: 20 January 2010
 * ------------------------------------------------------------------------------------------------------------*/


(function($) {

    $.fn.imgCycle = function(imgs, opts) {
        
        // default options
        var options = {
            startRandom: true,
            interval: 5000,
            speedOut: 1000,
            speedIn: 1250
        }
        
        options = $.extend(options, opts);
        
        // loop through each, return this for jQuery chaining
        return this.each(function() {
            
            // img images are provided
            if (imgs.length > 0) {
                
                    // number of images
                var numImgs = imgs.length,
                
                    // id of cycle container
                    id = $(this).id(),
                    
                    // reference to cycle container
                    $wrapper = $(this),
                    
                    // the index of the current image
                    index;
                
                // make sure the cycle continer is position relative
                $wrapper.css('position', 'relative');
                
                /**
                 * For Random start
                 * ------------------------------*/
                if (options.startRandom) {
                    
                    index = Math.floor(Math.random() * numImgs);
                    for (var i = 0; i < numImgs; i++) {
                        if (index >= numImgs) { index -= numImgs; }
                        $('<img>').src('/images/' + imgs[index++]).css('position', 'absolute').hide()
                            .appendTo($wrapper);
                    }
                    
                    index = 1;
                    
                }
                
                /**
                 * Starting with the first image
                 * ------------------------------*/
                else {
                    
                    index = 1;
                    for (var i = 0; i < numImgs; i++) {
                        $('<img>').src('/images/' + imgs[i]).css('position', 'absolute').hide()
                            .appendTo($wrapper);
                    }
                        
                }
                
                // initialize curImg to the first image and show it
                var curImg = $('#' + id + ' img:first').show();
                
                /**
                 * function rotate()
                 * Inner function used to do the animations.  Will fade out the current image, update the index based on the current
                 * location and fade in the next image.  After the new image has been faded in, curImg reference will be updatd.
                 */                
                function rotate() {
                    // fade out the current image
                    curImg.fadeOut(options.speedOut);
                    
                    // if we are at the end of the list, start over
                    if (++index > numImgs) { index = 1; }
                    
                    // fade in the new image
                    $('#' + id + ' img:eq(' + (index - 1) + ')').fadeIn(options.speedIn, function() {
                        curImg = $(this);
                    });
                }
                
                // Call rotate every options.interval 
                setInterval(rotate, options.interval);
                
            }
            
            // If no images were provided, alert the user via console, if console is available.
            else {
               
                if (window.console && console.log) {
                    console.log('No images provided.');
                }
                
            }   
            
        });
        
    }

})(jQuery);