var elId = 0;
window.addEvent('domready', function() {
       
    $(document.body).addClass('hasScript');
    $('viewport').setStyle('cursor', (Browser.Engine.trident) ? 'url(images/grab.cur), move' : 'url(images/grab.png), move');
    
    // scroll controller
    $('navi').getElements('a').addEvent('click', function(e){              
        var effect = new Fx.Scroll($('viewport'), {
            duration:1200,
            transition: Fx.Transitions.Quad.easeInOut
        }).toElement($(e.target.href.split('#')[1]));        
        e.target.blur();
        e.stop();
    });       
             
    $('viewport').addEvent('mousedown', function(e){
        $('viewport').setStyle('cursor', (Browser.Engine.trident) ? 'url(images/grabbing.cur), move' : 'url(images/grabbing.png), move');
        $('viewport').grabbing = true;
        $('viewport').prevPos = e.client.x;
        e.stop();
    });
    
    $('viewport').addEvent('mousemove', function(e){
        if($('viewport').grabbing) {
            var scroll = $('viewport').getScroll();
            var delta = e.client.x - $('viewport').prevPos;
            var myFx = new Fx.Scroll('viewport').set(scroll.x - delta, 0);
            $('viewport').prevPos = e.client.x;            
        }
        e.stop();
    });    
    
    $(document.body).addEvent('mouseup', function(e){
        $('viewport').grabbing = false;
        $('viewport').setStyle('cursor', (Browser.Engine.trident) ? 'url(images/grab.cur), move' : 'url(images/grab.png), move');        
        e.stop();
    });
});

window.addEvent('load', function() {
    // create sliders
    $('viewport').getElements('a[rel^=slider]').each(function(el){
        elId++;        
        var slideEl = new Element('div', {
            id: 'slider' + elId,            
            slide: {duration: 'long', mode:'horizontal'}            
        }).inject(el.getParent().getParent(), 'bottom');
        slideEl.innerHTML = '<img src="' + el.href + '" alt="" /><br /><div class="subline">'+el.title.replace(/ \- /g, '<br />')+'</div>';
        slideEl.slide('hide');
             
        el.rel = 'slider' + elId;
        el.addEvent('click', function(e){
            $(e.target).getParent().getParent().getElements('a[rel^=slider]').each(function(el){                
                $(el.rel).slide('out');
            });
            $(e.target.getParent().rel).slide('in');
            e.stop();
        });                
    });
});