window.addEvent("load", function() {

    var fWidth = 135;
    var onManual = false;
    var timeManual = 500;
    var imagesManual = 5;
    var timeScroller = 30;
    
    var ul = $$('#carousel ul')[0];
    var img = ul.getChildren('li');
    var nImg = img.length;

    var cWidth = nImg * fWidth;
    ul.setStyle('width', cWidth);

    var cScroll = 0;
    var cPadding = 0;
    var cImg = 0;

    var autoScroller = function() {
        cScroll -= 1;
        ul.setStyle('left', cScroll);
        if (cScroll % fWidth == 0) {
            img[cImg].inject(ul);
            cImg = (cImg + 1) % nImg;
            cScroll = 0;
            ul.setStyle('left', cScroll);
        }
    }
    
    var autoTimer = autoScroller.periodical(timeScroller);

    var offsetNext = function(){
        img[cImg].inject(ul);
        cImg = (cImg + 1) % nImg;
        ul.setStyle('padding-left', (ul.getStyle('padding-left').toInt() * fWidth));
    }

    var offsetLast = function(){
        cImg = cImg - 1;
        if (cImg < 0) { cImg = nImg - 1; }
        img[cImg].inject(ul, 'top');
        ul.setStyle('padding-left', (ul.getStyle('padding-left').toInt() - fWidth));
    }    

    $('nextcar').addEvent('click', function() {
        
        if (onManual) { return; }
        onManual = true;
        $clear(autoTimer);
                
        cScroll = cScroll - (imagesManual * fWidth);
        cScroll = cScroll - (cScroll % fWidth);

        ul.set('tween',{
            duration: timeManual,
            onComplete: function(){
                cScroll = 0;
                ul.setStyle('left', cScroll);
                ul.setStyle('padding-left', 0);
                onManual = false;
            }
        });
        ul.tween('left', cScroll);
        
        var i = 0;
        while(i<imagesManual) {
            offsetNext.delay((i+1)*(Number(timeManual/imagesManual)));
            i++;
        }
        
    });

    $('lastcar').addEvent('click', function() {
    
        if (onManual) { return; }
        onManual = true;
        $clear(autoTimer);
            
        ul.setStyle('padding-left', (imagesManual * fWidth));
        ul.setStyle('left',  (-1 * (imagesManual * fWidth - cScroll)));

        cScroll = 0                

        ul.set('tween',{
            duration: timeManual,
            onComplete: function(){
                cScroll = 0;
                ul.setStyle('left', cScroll);
                ul.setStyle('padding-left', 0);
                onManual = false;
            }
        });
        ul.tween('left', cScroll);
        
        var i = 0;
        while(i<imagesManual) {
            offsetLast.delay(i*Number(timeManual/imagesManual));
            i++;
        }
        
    });

});