function mycarousel_initCallback1(carousel) {
	$("#1").addClass("onstate");
    jQuery('.jcarousel-control1 a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id')));
        $("#1").removeClass("onstate");
        $("#2").removeClass("onstate");
        $("#3").removeClass("onstate");
		$(this).addClass("onstate");
        return false;
    });
};

function mycarousel_initCallback2(carousel) {
	$("#4").addClass("onstate");
    jQuery('.jcarousel-control2 a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id') - 3));
        $("#4").removeClass("onstate");
        $("#5").removeClass("onstate");
        $("#6").removeClass("onstate");
		$(this).addClass("onstate");
        return false;
    });
};

function mycarousel_initCallback3(carousel) {
	$("#7").addClass("onstate");
    jQuery('.jcarousel-control3 a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id') - 6));
        $("#7").removeClass("onstate");
        $("#8").removeClass("onstate");
        $("#9").removeClass("onstate");
		$(this).addClass("onstate");
        return false;
    });
};

/**
* This is the callback function which receives notification
* when an item becomes the first one in the visible range.
*/

function mycarousel_itemFirstInCallback1(carousel, item, idx, state) {
        $("#1").removeClass("onstate");
        $("#2").removeClass("onstate");
        $("#3").removeClass("onstate");
        num = idx;
        $("#" + num).addClass("onstate");
        return false;
};

function mycarousel_itemFirstInCallback2(carousel, item, idx, state) {
        $("#4").removeClass("onstate");
        $("#5").removeClass("onstate");
        $("#6").removeClass("onstate");
        num = idx + 3;
        $("#" + num).addClass("onstate");
        return false;
};

function mycarousel_itemFirstInCallback3(carousel, item, idx, state) {
        $("#7").removeClass("onstate");
        $("#8").removeClass("onstate");
        $("#9").removeClass("onstate");
        num = idx + 6;
        $("#" + num).addClass("onstate");
        return false;
};



// Ride the carousel...
jQuery(document).ready(function() {

    jQuery(".carousel1").jcarousel({
        scroll: 1,
        itemFirstInCallback:  mycarousel_itemFirstInCallback1,
        initCallback: mycarousel_initCallback1
    });

    jQuery(".carousel2").jcarousel({
        scroll: 1,
        itemFirstInCallback:  mycarousel_itemFirstInCallback2,
        initCallback: mycarousel_initCallback2
    });

    jQuery(".carousel3").jcarousel({
        scroll: 1,
        itemFirstInCallback:  mycarousel_itemFirstInCallback3,
        initCallback: mycarousel_initCallback3
    });
});