jQuery.fn.carrousel = function(initMapLevel)
{
    var carrousel = this;
    var slideWrapper = $('.carSlides', carrousel);
    var slidewidth = $('div.carSlidesWrapper', carrousel).css('width').replace(/[^0-9]/g, '');
    var navWrapper = $('.carNav', carrousel);
    var slides = $('div.imageDiv', slideWrapper);
    var closeButton = $('.closeButton');
    var newHeight = 0;

    slideWrapper.width(slideWrapper.outerWidth() * slides.length);

    $("a", navWrapper).click(
        function()
        {
            slideWrapper.width(slidewidth * slides.length);
            slideWrapper.parent().css('visibility', 'visible');

            $("div[id^='flashContainerMap']").animate(
            {
                opacity: "0"
            }, 350, function()
            {
                $("div[id^='flashContainerMap']").css('visibility', 'hidden');
            });

            gotoSlide(this);
        }
    );
    
    updateNavigation();

    closeButton.click(
        function()
        {
            $("div[id^='flashContainerMap']").css('visibility', 'visible');
            $("div[id^='flashContainerMap']").fadeTo(550, '1');
            
            // Haal de active markering weg
            $('div.carWrapper a[class ~= \'active\'] img').stop().fadeTo(350, '.4');
            $('div.carWrapper a[class ~= \'active\']').removeClass('active');
        }
    );

    $('.scrollUp', carrousel).click(
        function()
        {
            if (newHeight < 0)
            {
                newHeight += 113;
                $('.carWrapper', carrousel).stop().animate({top: newHeight});
            }
            
            updateNavigation();
        }
    );

    $('.scrollDown', carrousel).click(
        function()
        {
            if ((newHeight > '-' + Math.ceil(($('.carWrapper > a', carrousel).length / 2) - 3) * 113) > 0)
            {
                newHeight -= 113;
                $('.carWrapper', carrousel).stop().animate({top: newHeight});
            }
            
            updateNavigation();
        }
    );

    $("a img", navWrapper).css({ opacity: 0.4 });

    $("a img", navWrapper).mouseenter(
        function()
        {
            if (!$(this).parent().hasClass('active'))
            {
                $(this).stop();
                $(this).fadeTo(350, '1');
            }
        }
    ).mouseleave(
        function()
        {
            if (!$(this).parent().hasClass('active'))
            {
                $(this).stop();
                $(this).fadeTo(350, '.4');
            }
        }
    );
    
    function updateNavigation()
    {
        if (newHeight == 0)
        {
            $('.scrollUp', carrousel).css('visibility', 'hidden');
        }
        else
        {
            $('.scrollUp', carrousel).css('visibility', 'visible');
        }
        
        if ((newHeight > '-' + Math.ceil(($('.carWrapper > a', carrousel).length / 2) - 3) * 113) > 0)
        {
            $('.scrollDown', carrousel).css('visibility', 'visible');
        }
        else
        {
            $('.scrollDown', carrousel).css('visibility', 'hidden');
        }
    }

    function activateNav(e)
    {
        if (!$(e).hasClass('active'))
        {
            $("a.active", carrousel).prev().stop();
            $("a.active", carrousel).stop();

            $("a.active", carrousel).prev().animate({left: '0px'}, 300);
            $("a.active img", carrousel).fadeTo(350, '.4');
            $("a.active", carrousel).removeClass('active');

            $(e).addClass('active');
            $(e).prev().animate({left: '10px'}, 300);
            $("img", e).fadeTo(350, '1');
        }
    }

    function gotoSlide(e)
    {
        slideWrapper.stop();
        activateNav(e);

        var toSlide = $("a", navWrapper).index(e);
        slideWrapper.animate({left: '-' + slidewidth * toSlide}, 400);
    }

    if (typeof initMapLevel == 'undefined' || (initMapLevel != 'zoomout' && initMapLevel != 'zoomin'))
    {
        initMapLevel = '_level0.zoomin';
    }
    else
    {
        initMapLevel = '_level0.' + initMapLevel;
    }

    toggleMapPage(initMapLevel);
};