window.addEvent('domready', function(){
    adjustWidth();    
    buildNavigator();
});

function buildNavigator(){

    var navigator = $('navigator');

    var scroller = new Fx.Scroll(window,  {
        offset: {
            'x': -30,
            'y': 0
        }
    });

    var projects = $$('.project');
    projects.each(function(item, index){
        var link = new Element('a', {'html': index})
        link.inject(navigator);
        link.addEvent('click', function(){
            scroller.start(item.getCoordinates()['left'], 0);
            highlight(link)
        })
    })

    function highlight(highlighted){
        navigator.getElements('a').each(function(item){
            if(item == highlighted){
                item.addClass('highlighted');
            } else {
                item.removeClass('highlighted');
            }
        })
    }
    
}

function adjustWidth(){
    var items = $('projectdetail').getElement('ul').getElements('li');
    var body = $('vertical');
    var imgwidth = items[0].getSize().x;
    body.setStyle('width', items[0].getSize().x * items.length);
}