$(document).ready(function () {
    function mycarousel_initCallback(carousel) {
        var thisCar = carousel.container.parent().parent();
        var thisCarClass = thisCar.attr("class");

        jQuery("."+thisCarClass + " .jcarousel-control a").bind('click', function () {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr("rel")));
            return false;
        });
    }

    function mycarousel_itemLoadCallback(carousel, state) {
        var thisCar = carousel.container.parent().parent();
        var thisCarClass = thisCar.attr("class");

        $("."+thisCarClass + " .jcarousel-control a").each(function () {
            $(this).removeClass("active");

            if ($(this).attr("rel") == carousel.first) {
                $(this).addClass("active");
            }
        });
    }

    if ($('#popularBoardsCar').length != 0) {
        $('#popularBoardsCar').jcarousel({
            scroll: 1,
            auto: 10,
            animation: "slow",
            wrap: "both",
            initCallback: mycarousel_initCallback,
            itemLoadCallback: {
                onBeforeAnimation: mycarousel_itemLoadCallback
            }
        });
    }

    if ($('#latestItemsCar').length != 0) {
        $('#latestItemsCar').jcarousel({
            scroll: 1,
            auto: 10,
            animation: "slow",
            wrap: "both",
            initCallback: mycarousel_initCallback,
            itemLoadCallback: {
                onBeforeAnimation: mycarousel_itemLoadCallback
            }
        });
    }

    if ($('#userPersonalBoardsCar').length != 0) {
        $('#userPersonalBoardsCar').jcarousel({
            scroll: 1,
            auto: 10,
            animation: "slow",
            wrap: "both",
            initCallback: mycarousel_initCallback,
            itemLoadCallback: {
                onBeforeAnimation: mycarousel_itemLoadCallback
            }
        });
    }

    if ($('#userFavoriteBoardsCar').length != 0) {
        $('#userFavoriteBoardsCar').jcarousel({
            scroll: 1,
            auto: 10,
            animation: "slow",
            wrap: "both",
            initCallback: mycarousel_initCallback,
            itemLoadCallback: {
                onBeforeAnimation: mycarousel_itemLoadCallback
            }
        });
    }
});