$(document).ready(function() {

    // redefine Cycle's updateActivePagerLink function
    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
        // De actieve thumbnail de class "activeLI" geven
        $(pager).find('li').removeClass('activeLI').filter('li:eq('+currSlideIndex+')').addClass('activeLI');

        // Zodra er meer als 3 thumbnails zijn, moet de indhoud van de .thumbnails box opgeschoven worden met de hoogte van 1 thumbnail + margin.
        iMultiplier = currSlideIndex - 2;

        iNewMargin = 0;
        if(iMultiplier > 0){
            iNewMargin = iMultiplier * (77 + 10); // 77 = hoogte thumbnail+border en 10 = margin-bottom onder de thumbnail
        }

        // De margin-top van de .thumbnails div aanpassen
        $(pager).css('margin-top','-'+(iNewMargin)+'px');
    };

});