var x; 
var speed; 
var running;
var timeout;
var scroller;
var thumbs;
var width;
var viewportWidth;
var bBlockScroll = false

//Breedte van een scrollbar item
var iItemWidth = 310;

//Recursieve scroll functie
function imageScroll(direction) { 

    if( running == 1 )
    {
        if( !bBlockScroll )
        {
            //Breedte van de scroller uitrekenen
            var scrollerWidth = thumbs.size() * iItemWidth;
            
            //Terug scrollen
            if (direction == 'left') {
                //Kijk of het volgende element het eerste element is, dan aanvullen
                if( x > -iItemWidth )
                {
                    //Voeg thumbs toe voor de scroller
                    newThumbs = $('.thumbbase').clone().removeClass('thumbbase').prependTo(scroller);
                    //Update thumbs array
                    thumbs = $('.thumb');
                    //Vergroot breedte van de scroller
                    scroller.width(thumbs.size() * iItemWidth);
                    //Verschuif hele scroller
                    x = x - newThumbs.size() * iItemWidth;
                }
                x += speed;
                scroller.css('left',x + 'px');
            }
            
            //Vooruit scrollen
            else {
                //Kijk of het volgende element het laatste element is, dan aanvullen
                if( scrollerWidth - viewportWidth + x < iItemWidth )
                {
                    //Voeg thumbs toe na de scroller
                    $('.thumbbase').clone().removeClass('thumbbase').appendTo(scroller);
                    //Update thumbs array
                    thumbs = $('.thumb');
                    //Vergroot breedte van de scroller
                    scroller.width(thumbs.size() * iItemWidth);
                }
                x -= speed;
                scroller.css('left',x + 'px');
            }
        }
        
        timeout = setTimeout("imageScroll('" + direction + "')", 15);
    }
}

//Start de scroller
function startScroll(direction) {
    stopScroll();
    
    if( running == 0 ) {
        speed = 2;
        running = 1;
    }
    
    imageScroll(direction);
}

//Stop scrollen
function stopScroll() { 
    if(running == 1) {
        clearTimeout(timeout); 
        running = 0;
    }

}

function clickScroll(direction) {
    if( !bBlockScroll )
    {
        stopScroll();
        //Bereken aantal pixels om vooruit te springen
        var iPixelMove = viewportWidth-400;
        var scrollerWidth = thumbs.size() * iItemWidth;

        //Terug scrollen
        if (direction == 'left') {
            //Kijk of het volgende element het eerste element is, dan aanvullen
            if( x > -iPixelMove )
            {
                //Voeg thumbs toe voor de scroller
                newThumbs = $('.thumbbase').clone().removeClass('thumbbase').prependTo(scroller);
                //Update thumbs array
                thumbs = $('.thumb');
                //Vergroot breedte van de scroller
                scroller.width(thumbs.size() * iItemWidth);
                //Verschuif hele scroller
                x = x - newThumbs.size() * iItemWidth;
                scroller.css('left',x + 'px');
            }
            x += iPixelMove;
        }

        else {
            //Kijk of er nog genoeg ruimte is om een pagina vooruit te gaan
            if( scrollerWidth - viewportWidth + x < iPixelMove )
            {
                //Voeg thumbs toe na de scroller
                $('.thumbbase').clone().removeClass('thumbbase').appendTo(scroller);
                //Update thumbs array
                thumbs = $('.thumb');
                //Vergroot breedte van de scroller
                scroller.width(thumbs.size() * iItemWidth);
           }
           x -= iPixelMove;
        }    

        //Blokkeer scroller voor 1.5 seconden
        bBlockScroll = true;
        //Start animatie
        scroller.animate (
            {left: x + 'px'},
            {duration: 1500, complete: function(){bBlockScroll = false;} } );
        startScroll(direction);
    }
}

//Automatisch starten
$(document).ready(function() {   
    
    thumbs = $('.thumb');
    
    //Kijk of er scrolleritems zijn. Anders loopt het script vast in de while loop
    if( thumbs.size() > 0 )
    {
        //Dingen initialiseren
        scroller = $('#scroller');
        viewportWidth = $(window).width();
        
        //Extra klassen toevoegen
         thumbs.addClass('thumbbase');
        
        //Breedte van de scroller uitrekenen
        var scrollerWidth = thumbs.size() * iItemWidth;
        
        //Kijk of alle scrolleritems de pagina wel gaan vullen
        //Zo nee, ga items klonen tot het wel vullend is
        while( scrollerWidth < ( viewportWidth + 2 * iItemWidth ))
        {
            $('.thumbbase').clone().appendTo(scroller);
            thumbs = $('.thumb');
            scrollerWidth = thumbs.size() * iItemWidth;
        }
        
        //Breedte van scroller en X positie instellen
        scroller.css('width', scrollerWidth + 'px');
        x = ((scrollerWidth-viewportWidth)/2)*-1;
        scroller.css('left', x + 'px');
            
        speed = 1;
        running = 1;
        $('#bottombanner').css('visibility', 'visible');
        timeout = setTimeout("imageScroll('right')", 1000);
        
        window.onresize = function() {viewportWidth = $(window).width();};
    }    
});