var jCarouselCurrentIDX = 0;
    J(document).ready(function() {
        J('#mycarousel').jcarousel({
            auto: 8,
            wrap: 'both',
            scroll: 1,
            //easing: 'InOutCubic',
            animation: 1000,
            size: 3,
            start: 1,
            initCallback: jCustom_initialized,
            itemVisibleInCallback: {onBeforeAnimation: jCustom_itemVisibleInCallbackBeforeAnimation,
                                    onAfterAnimation:  jCustom_itemVisibleInCallbackAfterAnimation}
        });
        
    });
                        
    function jCustom_initialized(carousel) {
        J("#Jbutton1").click(function() {
            jCarouselCurrentIDX=3;
            carousel.startAuto(0);
            carousel.scroll(jQuery.jcarousel.intval(1));
        });
        J("#Jbutton2").click(function() {
            jCarouselCurrentIDX=1;
            carousel.startAuto(0);
            carousel.scroll(jQuery.jcarousel.intval(2));
        });
        J("#Jbutton3").click(function() {
            jCarouselCurrentIDX=2;
            carousel.startAuto(0);
            carousel.scroll(jQuery.jcarousel.intval(3));
        });
    }
    
    function jCustom_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
        J(".jcarouselButtons").children().each(function() {
            J(this).removeClass("Jactive");
        });
        nextitemIndex = parseInt(jCarouselCurrentIDX) + 1;
        if (nextitemIndex > 3) { nextitemIndex = 1; }
        J("#Jbutton"+nextitemIndex).addClass("Jactive");
    }
    
    function jCustom_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
        jCarouselCurrentIDX = idx;
        /*J(".jcarouselButtons").children().each(function() {
            J(this).removeClass("Jactive");
        });
        J("#Jbutton"+idx).addClass("Jactive");
        */
    }