$(function() {
    $('.Slideshow').each( function() {
        var imageContainer;
        var bufferContainer;
        var slideShowElements
        var timer;
        var shuffle;
        var index = 0;

        shuffle = $(this).attr('shuffle') == 'true';

        imageContainer = $('<div id="imageContainer"></div>')
            .css('position', 'absolute')
            .css('width', $(this).css('width') )
            .css('height', $(this).css('height') )
            .css('overflow', 'hidden');

        bufferContainer = $('<div id="bufferContainer"></div>')
            .hide()
            .css('position', 'absolute')
            .css('width', $(this).css('width'))
            .css('height', $(this).css('height'))
            .css('overflow', 'hidden');

        slideShowElements = shuffleElements( $(this).children() );
        $(this).children().remove();
        $(this).prepend(imageContainer).prepend(bufferContainer);

        imageContainer.append( slideShowElements.get(index) );

        timer = setInterval(onTimer, $(this).attr('duration') );
        
        function onTimer(element)
        {
            index = (index+1) % slideShowElements.length;

            bufferContainer.empty().append( slideShowElements.get(index) );

            imageContainer.fadeOut('slow');
            bufferContainer.fadeIn('slow', function() {
                imageContainer.empty().append( slideShowElements.get(index) ).show();
                bufferContainer.hide();
            });
        }
        
        function shuffleElements(o)
        {
            for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        }

    });

});