$(document).ready(function() {

    // Start carousel slider
    // met tabs en slideshow van http://flowplayer.org/tools/tabs/index.html
    var oSlider = $("#carouselslider ul.navigation").tabs("#carouselslider .items > .item", {
                      current: 'active',                /* classname for current navigation item */
                      effect: 'fade',                   /* transition effect */
                      fadeInSpeed: 500,
                      fadeOutSpeed: 0,
                      history: false,                   /* add hash (#first) to url for history, not possible with multiple instances on 1 page */
                      rotate: true,                     /* wrap first item to last one */
                      onClick: function(event, index){
                          
                          /* 
                            when we switch panel we want to edit the background of the while slider 
                            this is needed for a smooth "crossfade" effect
                          */
                          var oPane = this.getCurrentPane();
                          var sBackground = "#4A4641 url("+$(oPane).find("img").attr("src")+") top right no-repeat";
                          $("#carouselslider").css("background", sBackground);
                          
                      }
                  }).slideshow({
                      autoplay: true,                   /* start slideshow on load */
                      interval: 3000
                  });
        
});