var waitTime = 10;
var scrollSize = 2;

var scroller = null;

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

    var projectList = $('projectList');
    var projects = projectList.getChildren('div');
    var i = 0;
    for (i = 0; i < projects.length; i++) {
        if (projects[i].id == 'activeProject') {
            break;
        }
    }
    projectList.scrollTo(i * 100);


    scroller = new Chain();

    $('arrLeft').addEvents({
        'mouseenter': function() {
            scroller.chain(scrollLeft);
            scroller.callChain();
        },
        'mouseleave': function() {
            scroller.clearChain();
        }
    });

    $('arrRight').addEvents({
        'mouseenter': function() {
            scroller.chain(scrollRight);
            scroller.callChain();
        },
        'mouseleave': function() {
            scroller.clearChain();
        }
    });

});



function scrollLeft() {
    var el = $('projectList');
    el.scrollTo(el.getScroll().x - scrollSize, 0);
    scroller.wait(waitTime);
    scroller.chain(scrollLeft);
    scroller.callChain();
}

function scrollRight() {
    var el = $('projectList');
    el.scrollTo(el.getScroll().x + scrollSize, 0);
    scroller.wait(waitTime);
    scroller.chain(scrollRight);
    scroller.callChain();
}



function changeImage(el, img) {
    var prevImg = $$('#images a.active')[0];
    var nextImg = new Element(el);
    if (prevImg.id != nextImg.id) {
        var imgEl = $('projectImg');
        imgEl.src = img;
        prevImg.removeClass('active');
        nextImg.addClass('active');
    }
}