/**
* Callback handler when an element moves into first position in the carousel.
* Update the class of left side border to make it invisible.
*/
function itemFirstInCallbackHandler(carousel, element, index, state) {
    $(element).removeClass("jcarousel-item-horizontal");
    $(element).addClass("jcarousel-item-border");

}

/**
* Callback handler when an element moves out of first position in the carousel.
* Update the class of left side border to make it visible.
*/
function itemFirstOutCallbackHandler(carousel, element, index, state) {
    $(element).removeClass("jcarousel-item-border");
    $(element).addClass("jcarousel-item-horizontal");
}

function recommendationImageInitCallback(carousel, state) {
    if (state == 'init') {
        var ni = carousel.options.numItem;
        var c_off = (carousel.options.containerOffset == null) ? -7 : carousel.options.containerOffset;
        var f_c = $(carousel.list.children()[0]);
        if (ni) {
            var iw = f_c.outerWidth({ margin: true });
            var iw_wm = f_c.outerWidth();
            var iw_c = iw - iw_wm;
            /*Set the clip area width. Note: The margin is not included for the last item shown*/
            carousel.clip.width((ni - 1) * iw + iw_wm);
            /*Set the container area width.*/
            carousel.container.width((ni) * iw + c_off);
        }
    }
}

/**
* Init the 4 carousels
*/
jQuery(document).ready(function() {
    jQuery('.carousel-4w div ul.jcarousel-skin-tango').jcarousel({
        scroll: 1,
        itemFirstInCallback: itemFirstInCallbackHandler,
        itemFirstOutCallback: itemFirstOutCallbackHandler,
        initCallback: recommendationImageInitCallback,
        numItem: 4  /* No of Items to be displayed in carousel */
    });
});


/**
* Init the 3 item carousels
*/
jQuery(document).ready(function() {
    jQuery('.carousel-3w div ul.jcarousel-skin-tango').jcarousel({
        scroll: 1,
        itemFirstInCallback: itemFirstInCallbackHandler,
        itemFirstOutCallback: itemFirstOutCallbackHandler,
        initCallback: recommendationImageInitCallback,
        numItem: 3  /* No of Items to be displayed in carousel */
    });
});