// this is the interval (in milliseconds) that each image is shown
// this number alwasy has to be higher than (FadeSpeed + 500) to allow the
// overlay time to fade in and out
var FadeInterval = 7500;
// this is the fade speed
// nb this number cannot be less that 500
// as the white overlay needs 500 millisconds to fade out after the image has changed
var FadeSpeed = 1500;

// this is the code
$(document).ready(function() {

    if ($("#ImageSlideShow #ImageSlideHolder .Slide").length > 1) {

        var div = $("<div id=\"FadeWhitePanel\"><!-- --></div>");
        $("#ImageSlideShow #ImageSlideHolder").append(div);
        var NumberOfSlides = $("#ImageSlideShow #ImageSlideHolder .Slide").length - 1;
        var CurrentSlide = 0;

        $("#ImageSlideShow #ImageSlideHolder .Slide").css("display", "none");
        $("#ImageSlideShow #ImageSlideHolder .Slide:eq(" + CurrentSlide + ")")
            .css("display", "block");
        $("#FadeWhitePanel").fadeOut();

        if (NumberOfSlides > 0) {
            setInterval(function() {
                var thisSlide = CurrentSlide;
                CurrentSlide++;
                if (CurrentSlide > NumberOfSlides) { CurrentSlide = 0; }
                // fade out the current slide
                $("#FadeWhitePanel").fadeIn(FadeSpeed, function() {
                    $("#ImageSlideShow #ImageSlideHolder .Slide:eq(" + thisSlide + ")").hide();
                    $("#ImageSlideShow #ImageSlideHolder .Slide:eq(" + CurrentSlide + ")").show();
                    $("#FadeWhitePanel").fadeOut(FadeSpeed + 500);
                });

            }, FadeInterval);
        }


    }
});