/**
 * Image Rotator
 * 
 * Create a rotating image from a stacked set of images within the dom.
 * For an example of this code at work visit http://2020creativegroup.com/ and watch the front-page images
 * 
 * @author Jon Beebe
 * @since 17 December, 2009
 */ 
(function($){
    $.fn.ImageRotator = function($options, onChange)
    {    
        window.clearInterval(window.auto_play_intervals);
        
        if(onChange == undefined) onChange = function(e){};
        
        var $defaults = {
            container_selector    : 'div.auto-play',
            image_selector        : 'img',
            auto_play             : true,
            AUTO_PLAY_INTERVAL    : 5000,
            FADE_INTERVAL         : 2000,
			ANIMATE_CONTAINER_HEIGHT:false,
			onChange:onChange
        };

        // extend the options
        var $opts = $.extend($defaults, $options);

        // bring the options to the galleria object
        for (var i in $opts) {
            if (i) {
                $.fn.ImageRotator[i]  = $opts[i];
            }
        }
        
        var initAutoPlayGallery = function(event, data) {
            
            window.clearInterval(window.auto_play_intervals);
            
                $($opts['container_selector']).each( function() {
        
                    var children = $($opts['image_selector'], this);
                    
//                    log('initAutoPlayGallery with ' + children.length + ' items');
                    
                    if(children.length > 1) {
                        var childIndex = 0;
                        children.each( function() {
                            var $target = $(this);
//                            $(this).fadeOut(0).attr('data-index', childIndex);
                            $target.attr('data-index', childIndex);
                            if($target.hasClass('inactive')) {
                                $target.css('display', 'block').fadeOut(0);
                            }
                            childIndex++;
                        });
            
//                        $(children).fadeIn(0);
                        
                        window.auto_play_intervals = window.setInterval(rotateAutoPlayGallery, $opts['AUTO_PLAY_INTERVAL']);
                    }
                });
        };
        
        var rotateAutoPlayGallery = function() {
            
            $($opts['container_selector']).each( function() {
        
                var children = $($opts['image_selector'], this);

                for(var i = 0; i < children.length; i++) {
            
                    var target = children[i];

//                    if( $(target).css('display') !== "none" ) {
                    if( $(target).hasClass('active') ) {
                        
                        $(target).fadeOut($opts['FADE_INTERVAL']).removeClass('active');
            
						var child = null;
                        if (i == children.length-1) {
							child = $( children[0] );
                        }
                        else {
							child = $( children[i+1] );
                            
                        }

						child.fadeIn($opts['FADE_INTERVAL'], $opts.onChange).addClass('active').removeClass('inactive');

						if($opts['ANIMATE_CONTAINER_HEIGHT'] == true) {
							
							height = child.height();
							
							$($opts['container_selector']).animate({height:height}, $opts['FADE_INTERVAL']/3);
							
						}
                
                        break;
                    }
                }
            });
        };
        
        
//        var onChange = function(e) {
//            
//            
//        };
        
        initAutoPlayGallery(null, null);
        
        return this;
    }
    
})(jQuery);

/**
 * Initialize all our Image Rotators
 */
//$(document).ready( function() {
//    $('.auto-play').ImageRotator();
//});

/**
 * When javascript updates the dom respond by initializing any new
 * image rotators that were added
 */
//$(document).bind("AJAX_CONTENT_REFRESHED", function() {
//    $('.auto-play').ImageRotator();
//});