/* Note that this has a callback which is necessary for adding a jCarousel pager */
jQuery(document).ready(function() {
    jQuery('#ulDefaultCarousel').jcarousel({
        scroll: 1,
        auto: 10,
        wrap: 'both',
        itemFirstInCallback: DefaultCarousel_itemFirstInCallback
    });
    addCarouselPaging('#ulDefaultCarousel');
});

/* This callback updates the pager when an item is cycled */
function DefaultCarousel_itemFirstInCallback(carousel, li, index, action) {
    var pageIndex = '#page' + index;
    jQuery('.pagerItem').removeClass('selected');
    jQuery(pageIndex).addClass('selected');
}

/* ***** Generic code for adding a pager to a jCarousel item ***** */
function addCarouselPaging(carouselIndex) {
    /* First create the pager div */
    jQuery(carouselIndex).parent('.jcarousel-clip').prepend('<div class="divPager"></div>');
    jQuery(carouselIndex + ' li').each(function(index) {
        jQuery('.divPager').append('<div class="pagerItem" id="page' + (parseInt(index) + 1) + '"></div>');
    });
    /* Make pager links clickable */
    jQuery('.pagerItem').click(function() {
        var pageIndex = parseInt(this.id.substring(4));
        jQuery(carouselIndex).data('jcarousel').scroll(pageIndex);
        jQuery('.pagerItem').removeClass('selected');
        jQuery('#page' + pageIndex).addClass('selected');
    });
}