$(document).ready(function() {
    // Let the magic begin
    var goOnAhead = false;

    // hide all the <li>
    $(".carousel").hide();

    // start the autorotate
    $("#carousel1").show();
    autoRotate(upperlimit);

    // looking for the click
    $(".carousellink").click(function() {
        showSlide($(this).attr("name"));
        i = $(this).attr("name");
    });

    // restart the slideshow
    $(".carousel").mouseenter(function() {
        stopTheShow();
    });

    $(".carousel").mouseleave(function() {
        restartTheShow();
    });

    // stop the show
    function stopTheShow() {
        $().stopTime('carousel');
    }

    function restartTheShow() {
        autoRotate(i);
    }

    // the function that actually does the animation		
    function showSlide(slideNum) {
        // hide the current image
        $(".carousel").hide();
        // fade in the new image
        $("#carousel" + slideNum).fadeIn("1500");
    }

    function autoRotate(startNumber) {
        i = startNumber

        // look for mouseover, to stop the animation
        $().everyTime(5000, 'carousel', function() {
            showSlide(i)

            if (i != upperlimit) {
                i++;
            }
            else {
                // restart the program from the beginning
                autoRotate(1);
                return false;
            }
            return currenti = i
        });
    }
});