$(window).load(function(){
    $(".tabbed-carousel-container .tab").click(showcarousel);
    resizeByContainer("0"); // init resizing by first carousel
});

function showcarousel(){

    // remove class active from all
    $(".tabbed-carousel-container .tab").removeClass("active");

    // add to specific clicked one
    $(this).addClass("active");

    var id = this.id.replace(/tab-/, "");

    $(".tabbed-carousel-container .jcarousel").css("visibility", "hidden");

    $("#carousel-"+id).css("visibility", "visible");

    resizeByContainer(id);

    return false; // prevent triggering the link
}

function resizeByContainer(id){
    var carouselheights = $("#carousel-"+id+" .jcarousel-container").height();
    var tabsheight = $(".tabbed-carousel-container .tab").height(); // getting the height of the first tab, in this case for all

    // setting the container to new height, additional 13px is here for the bg Picture!
    $(".tabbed-carousel-container").animate({height: carouselheights+tabsheight+13}, "1000");
    // plus 1, cause of the tabs height and the overlapping background graphic
    $(".tabbed-carousels").animate({height: carouselheights+1}, "1000");

    // addtionaly change the height of the next and previous buttons to accomplishing their vertical centration
    $(".jcarousel-prev-horizontal, .jcarousel-next-horizontal").animate({height: carouselheights}, "1000");
}