window.addEvent('domready', function() { 

    // Let's define some variables first
    var wrapper = $('wrap'); // The outer wrapper
    var carousel = $('carousel'); // The inner wrapper
    var items = $$('#carousel li'); // The different elements, this is an array
    var item_width = 615; // The full width of a single item (incl. borders, padding, etc ... if there is any)
    var max_margin = items.length * item_width - item_width;
    
    // Set up the animation
    var animation = new Fx.Tween(carousel, {duration: 1500});
    
    // The function to browse forward
    function next_item(pos){
        if(pos == -max_margin){
            animation.start('left', 0);
        } else { 
            var newposition = pos - item_width;
            animation.start('left', newposition);
        }
    }
    
    // The function to browse backward
    function previous_item(pos){
        if(pos == 0){
            animation.start('left', -max_margin);
        } else { 
            var newposition = pos + item_width;
            animation.start('left', newposition);
        }
    }
    
    // Set up the 'next' and 'previous' buttons
    $('next').addEvent('click', function(){
        var position = parseInt(carousel.getStyle('left'));
        next_item(position);
    });
    
    $('previous').addEvent('click', function(){
        var position = parseInt(carousel.getStyle('left'));
        previous_item(position);
    });
    
});