$(function(){
    setInterval('slide()', 8000);
    // Set the first panel to be showing
    $('DIV.panels DIV.panel:first').css({
            zIndex: 10,
            right:  0
        });
    });

function slide(){
    var $panels = $('DIV.panels');
    var $current = $panels.find('DIV.panel:first');
    $current.css('zIndex', 5);

    var $new = $panels.find('DIV.panel:last').remove();
    $panels.prepend($new);
    $new.css({
        left:   $panels.width(),
        zIndex: 10
        });

    $current.animate(
        {
            left:   -160
            },
        1000,
        function(){
            }
    );
        
    $new.animate(
        {
            left:   0
            },
        1000,
        function (){
            /* Animation is complete. We no longer can see $current since it's behind $new
               But now we need to make it equal to the other panels for the next time it's second
            */
            $current.css('zIndex', 1);
            }
        );
    }