Creating a rotator

Creating a rotator

New to javascript/jquery, been trying to create a rotator which displays a large image with caption and uses next/previous button and thumbnails for control. Everything works fine but when the rotator gets to the last item i'd like it to go back to the first, and when the previous button is clicked at the first item I'd like it to go to the last.

  1. $(document).ready(function() {

        //set to zero
        var x = 0;

        //rotation speed and timer
        var speed = 5000;
        var run = setInterval('rotate()', speed);

        //how many items
        var totalItems = $('#thumbnails ul li').size();

        //add classes
        $("#thumbnails li a:first").addClass("active");
        $("#featured li:first").addClass("first");

        //if user clicks on a thumbnail
        $('#thumbnails li a').click(function() {
            $('#featured li').fadeOut(600);
            var n = $('#thumbnails li a').index($(this));
            $('#thumbnails li a').removeClass('active');
            $(this).addClass('active');
            $('#featured li').hide();
            $('#featured li:eq('+n+')').fadeIn((600));
            $('#featured li:eq('+n+') .bigImage').css({"position":"absolute","bottom":"-300px"});
            $('#featured li:eq('+n+') .bigImage').animate({"bottom":"0px"},1000);
            clearInterval(run);
            run = setInterval('rotate()', speed);
            x = n;
            return false;
        });

        //if user clicked on previous button
        $('#thumbnails a.previous').click(function() {
            clearInterval(run);
            run = setInterval('rotate()', speed);
            x = x-1;
            if(x>totalItems-1) { x=totalItems-2; }
            if(x<0) {
                $('#thumbnails li a').removeClass('active');
                $('#thumbnails li:first a').addClass('active');
                $('#featured li:first').fadeIn((600));
                $('#featured li:first .bigImage').css({"position":"absolute","bottom":"-300px"});
                $('#featured li:first .bigImage').animate({"bottom":"0px"},500);        
            } else {
                $('#thumbnails li a').removeClass('active');
                $('#thumbnails li:eq('+x+') a').addClass('active');
                $('#featured li').hide();
                $('#featured li:eq('+x+')').fadeIn((600));
                $('#featured li:eq('+x+') .bigImage').css({"position":"absolute","bottom":"-300px"});
                $('#featured li:eq('+x+') .bigImage').animate({"bottom":"0px"},500);
            }
        //cancel the link behavior            
        return false;
        });

        //if user clicked on next button
        $('#thumbnails a.next').click(function() {
            clearInterval(run);
            run = setInterval('rotate()', speed);
            x = x+1;
            if(x<0) { x=1; }
            if(x>totalItems-1) {
                $('#thumbnails li a').removeClass('active');
                $('#thumbnails li:last a').addClass('active');
                $('#featured li').hide();
                $('#featured li:last').fadeIn((600));
                $('#featured li:last .bigImage').css({"position":"absolute","bottom":"-300px"});
                $('#featured li:last .bigImage').animate({"bottom":"0px"},500);        
             } else {
                $('#thumbnails li a').removeClass('active');
                $('#thumbnails li:eq('+x+') a').addClass('active');
                $('#featured li').hide();
                $('#featured li:eq('+x+')').fadeIn((600));
                $('#featured li:eq('+x+') .bigImage').css({"position":"absolute","bottom":"-300px"});
                $('#featured li:eq('+x+') .bigImage').animate({"bottom":"0px"},500);
            }
            return false;
        });

        //if mouse hover, pause the auto rotation, otherwise rotate it
        $('#featured li').hover(
            function() {
                clearInterval(run);
            },
            function() {
                run = setInterval('rotate()', speed);    
            }
        );

    });

    //a simple function to click next link
    //a timer will call this function, and the rotation will begin  
    function rotate() {
        $('#thumbnails a.next').click();
    }