window.addEvent('domready', function() {
    
    var mover_l = $$('div.js-left')[0];
    var mover_r = $$('div.js-right')[0];
    
    var area = $$('div.js-area')[0];
    var table = $$('table.js-table')[0];
    
    var tds = table.getElements('td');
    var count = tds.length;
    var total_width = table.getSize().x + 1;
    var width = total_width / count;
    var current = 0;
    var moving;
    
    var timer;
    
    var fx = new Fx.Tween(table, {
        'duration': 500,
        'property': 'left',
        'transition': Fx.Transitions.Expo.easeInOut,
        'onStart': function() {
            fxing = true;
            $clear(timer);
        },
        'onComplete': function() {
            current = moving;
            fxing = false;
            
            timer = (function() {
                run(1);
            }).delay(5000);
        }
    });
    var fxing = false;
    
    function move() {
        fx.start(-(moving * width));
    };

    function run(dir) {
        if (dir < 0) {
            if (current === 0) {
                moving = count - 1;
            } else {
                moving = current - 1;
            };
        } else {
            if (current === count - 1) {
                moving = 0;
            } else {
                moving = current + 1;
            };
        };
        
        move();
    };
    
    mover_r.addEvent('click', function(e) {
        if (fxing) return;
        
        run(1);
    });
    
    mover_l.addEvent('click', function() {
        if (fxing) return;
        
        run(-1);
    });
    
    
    count -= 3;
    (function() {
        run(1);
    }).delay(1000);
});