/*
    version 1.3
    
    CSS required:
    #slideshow{width:[image width];height:[image height];}
    #slideshow [child]{position:absolute;display:none;width:[image width];height:[image height];}

    Markup required:
    <div id="slideshow">
        <img src="#" alt="" />
        <img src="#" alt="" />
    </div>

    Script required:
    $(document).load(function () { $("slideshow").slideshow(); });

    You can pass { interval, fade } in milliseconds to adjust how long the images are shown.
    interval (default 5 seconds) is the time from completly visible to the next image starting to fade in.
    fade (default is 1.5 seconds) is the time it takes for the image to fade in.
*/
(function($) {
    $.fn.slideshow = function(options) {
        var defaults = {
            interval: 5000,
            fade: 1500
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var $div = $(this);
			$div.css({'position':'relative'});
            var $images = $div.children();
			$images.css({'position':'absolute','top':0,'left':0}).hide().first().show();
			if($images.length < 2) {
				return;
			}
            var $lastImage = $($images[0]);
            var counter = 1;
            var rotate = function() {
                $lastImage.fadeOut(options.fade);
                $($images[counter]).fadeIn(options.fade, function() {
                    $lastImage = $($images[counter]);
                    counter++;
                    if (counter >= $images.length) { counter = 0; }
                    setTimeout(rotate, options.interval);
                });
            }
            setTimeout(rotate, options.interval);
        });
    }
})(jQuery);