(function($)
{
    function ImageRotator(element, data) {
        assert(element.length == 1, 'ImageRotator only works on 1 element');
        assert(data[0] && data[0].file, 'No valid data provided, did the server script return any data?');

        
        element.css({'border' : 0, 'padding' : 0});
        element.css('background-image','url(' + data[0].file + ')');

        
        // Add image placeholders inside the div, for fading
        var overlay = $('<div>', {'class' : 'ir_overlay'});
        overlay.css({'border' : 0, 'margin' : 0, 'padding' : 0});
        overlay.css({'width' : element.css('width'), 'height' : element.css('height')});
        overlay.fadeOut(0);
        
        element.append(overlay);

        this.element = element;
        this.overlay = overlay;
        this.data = data;
        this.iData = 0;
    }
    $.extend(ImageRotator.prototype, {
        start : function() {
           
            var cData = this.data[this.iData];
            var nData = this.data[(this.iData + 1) % this.data.length];
            var element = this.element;
            var overlay = this.overlay;

            // Set next data index
            this.iData = (this.iData + 1) % this.data.length;

            overlay.css('background-image','url(' + nData.file + ')');

            var This = this;
            overlay.delay(cData.duration).fadeIn(nData.fadeDuration, function() {
                // Flip overlay to element
                element.css('background-image','url(' + nData.file + ')');
                overlay.fadeOut(0);
                This.start();
            });

        }
    });

    $.fn.imageRotator = function(url)
    {
        // Make sure elements are saved, else they will be overwritten by the document object
        var elements = $(this);

        // Retrieve the image data asynchronously
        $.getJSON(url, null, function(data) {
            elements.each( function() {
                var elem = $(this);
                setTimeout(function() {
                    var ir = new ImageRotator(elem, data);
                    ir.start();
                }, 0);
            });
        });
        return this; // jQuery object
        
    };

   
})(jQuery);