(function($){

var timeActive = 5000;   // time in milliseconds the slide is shown
var timeAnimate = 1000;  // time in milliseconds it takes the slides to animate/fade

    $(document).ready(function() {
    
        var slider = $('<div id="s3slider"></div>');
    
        var list = $('<ul id="slideContainer"></ul>');
        var images = $('.sample img');
        
        images.each(function(index) {
        
            var listItem = $('<li class="slide"></li>');
            
            if(index === 1)
                listItem.addClass('active');
                
            var text = $(this).attr('alt');
            var caption = $('<span>' + text + '</span>');
        
            listItem.append($(this));
            listItem.append(caption);
            list.append(listItem);
        });
        
        $('.sample').html('');
        
        $('.sample').append(list);
        
        $('.slide').css('opacity', 0);
        
        $('.slide.active').css('opacity',1);
    
        setInterval( switchSlide, timeActive ); 
    });
    
    
    function switchSlide() {
        var $curActive = $('#slideContainer .active'),
            $next;
        
        if ( !$curActive.length ) $curActive = $('#slideContainer .slide:last');
        
        $next =  $curActive.next().length ? $curActive.next() : $('#slideContainer .slide:first');

    
        // switch the active and next slide
        $curActive.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, timeAnimate, function() {
                $curActive.removeClass('active last-active');
            });
        $curActive.animate({opacity: 0.0}, timeAnimate );
    };
})(jQuery);