$(function() {
    $("#c1").addClass("activepanel");
    $('#wrapper').hover(
        function() {
            $('#carousel').trigger( 'pause' );
        }, function() {
						
            $('#carousel').trigger( 'play' );
        }
        );

    $('#carousel').carouFredSel({
        scroll: {
            fx: 'crossfade'
        },
        auto: {
            onBefore: function( oldI, newI ) {
                $('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', 1 ] );
            }
        }
    });

    $('#thumbnails').carouFredSel({
        auto: false,
        direction: "up",
        items: {
            start: -1,
            visible: 3,
            width: 337,
            height: 137
        },
        scroll: {
            duration: 500,
            onBefore : function(oldItems, newItems, newSizes){
                oldItems.removeClass("activepanel");
       
            },
            onAfter : function(oldItems, newItems, newSizes){
                var aantal = $(".thumbwrap").length;
                var curid = newItems.attr( 'id' ).split('c');
                var rcurid = parseInt(curid[1]) + 1;
                if(curid[1] == aantal){
                    rcurid = 1;
                }
                var nextid = $("#c"+rcurid);
                $(nextid).addClass("activepanel");
            }
        }
    });
                                
    $('#thumbnails div').click(function() {
        $('#thumbnails').trigger( 'slideTo', [ this, -1 ] );
        var altid = $(this).find('img').attr( 'alt' );
        $('#carousel').trigger( 'slideTo', [ '#carousel img[alt='+ altid +']' ] );

    }).css( 'cursor', 'pointer' );
                                

});