/**
* Function to update the image source.
* @param obid: Element ID of the display container.This is assumed to be an image element.
* @param obnm: Name of the new product image. 
* 
* Note: The function will appends .gif extension to image name
*/
function disp_img_prod(obid, obnm) {
    $("#" + obid).attr("src", 'images/' + obnm + '.gif');
}
/**
* Callback function to update the carousel clip and container width.
* @param carousel: Carousel object on which the event was fired
* @param state: State of the carousel object
*/
function productImageInitCallback(carousel, state) {
    if (state == 'init') {
        var ni = carousel.options.numItem;
        var c_off = (carousel.options.containerOffset == null) ? 20 : 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);
        }
    }
}
/**
* Initialize the carousel object when DOM is ready
*/
jQuery(document).ready(function() {
    jQuery('ul.jcarousel-skin-product-images').jcarousel({
        initCallback: productImageInitCallback,
        numItem: 4  /* No of Items to be displayed in carousel */
    });
});