;(function($, window, document, undefined) {
    
    // the constructor
    var RotateHtml = function(elem, options) {
        this.container = $(elem);
        this.options = $.extend(this.defaults, options);
    };
    
    RotateHtml.prototype = {
        // the plugin defaults
        defaults: {speed: 8000},
        
        // plugin variables
        vars: {
            currentIndex: 0,
            maxIndex: 0
        },
        
        // the initialization of the plugin
        init: function() {
            var self = this;
            
            // wait for window load to get correct image dimensions
            $(window).load(function() {
                self.vars.rotatables = self.container.children();
                self.vars.maxIndex = self.vars.rotatables.length - 1;
               
                var containerWidth = 0,
                    containerHeight = 0;
                
                // apply the CSS to the rotatables
                self.vars.rotatables.each(function(i) {
                    if($(this).width() > containerWidth) containerWidth = $(this).width();                    
                    if($(this).height() > containerHeight) containerHeight = $(this).height();
                    
                    $(this).css({
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        zIndex: 10,
                        display: i ? 'none' : 'block'
                    });
                });
                
                // container CSS
                self.container.css({
                    display: 'block',
                    visibility: 'visible',
                    position: 'relative',
                    width: containerWidth,
                    height: containerHeight,
                    zIndex: 11
                });
                
                self.vars.current = $(self.vars.rotatables[0]);
                
                // the animations
                self.rotateInterval = setInterval(function(){self.__rotate()}, self.options.speed);
            });
        },
        
        // do the animation between slides
        __rotate: function() {
            this.vars.current.fadeOut('slow');
            this.__setNewCurrent();
            this.vars.current.fadeIn('slow');
        },
        
        // manages the current rotatable index
        __setNewCurrent: function() {
            this.vars.currentIndex = this.vars.currentIndex >= this.vars.maxIndex ? 0 : this.vars.currentIndex + 1;
            this.vars.current = $(this.vars.rotatables[this.vars.currentIndex]);
        }
    };
    
    // Handle one to many instantiations of the plugin
    $.fn.rotateHtml = function(options) {
        return this.each(function () {
            var element = $(this);
            // hide the container until ready
            element.css('visibilty', 'hidden');
            // return early ifthis element already has a plugin instance
            if(element.data('RotateHtml')) return;
            // pass options to plugin constructor
            var rotator = new RotateHtml(element, options).init();
            // store plugin object in this element's data
            element.data('RotateHtml', rotator);
        });
    };
})(jQuery, window, document);