var mycarousel_items = new Array(); // Items to add to the carousel

var mycarousel_min = 1; // Track the minimum and maximum indexes of
var mycarousel_max = 1; // items that we have added to the carousel

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

function mycarousel_itemLoadCallback(carousel, state)
{
    // Add items so that exactly one item is available either side of
    // the currently visible items (looping so that the list of items
    // scrolls continuously)
    for (var i = carousel.first - 1; i <= carousel.last + 1; i++) {
        // Check if the item already exists
        if (i > 0 && !carousel.has(i)) {
            var idx = (i-1) % mycarousel_items.length;
            carousel.add(i, mycarousel_items[idx]);

            // Keep track of the min/max items that we have added
            if (i < mycarousel_min) mycarousel_min = i;
            if (i > mycarousel_max) mycarousel_max = i;
        }
    }

    // Remove items from the start and end of the list, keeping just one
    // extra item on either side
    while (mycarousel_min < carousel.first - 1) {
        if (carousel.has(mycarousel_min)) {
            carousel.remove(mycarousel_min);
        }
        mycarousel_min++;
    }
    while (mycarousel_max > carousel.last + 1) {
        if (carousel.has(mycarousel_max)) {
            carousel.remove(mycarousel_max);
        }
        mycarousel_max--;
    }

    // Enable Captify on the items, so that the descriptions pop up
    // when the user hovers over them
    captify_images();
};

function captify_images()
{
    $('img.captify').captify({
        // all of these options are... optional
        // ---
        // speed of the mouseover effect
        speedOver: 'fast',
        // speed of the mouseout effect
        speedOut: 'fast',
        // how long to delay the hiding of the caption after mouseout (ms)
        hideDelay: 2000,
        // 'fade', 'slide', 'always-on'
        animation: 'slide',
        // text/html to be placed at the beginning of every caption
        prefix: '',
        // opacity of the caption on mouse over
        opacity: '0.7',
        // the name of the CSS class to apply to the caption box
        className: 'caption-bottom',
        // position of the caption (top or bottom)
        position: 'bottom',
        // caption span % of the image
        spanWidth: '416px'
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        start: 1,
        scroll: 1,
        auto: 6,
        animation: 'slow',
        wrap: 'last',
        initCallback: mycarousel_initCallback,
        itemLoadCallback: mycarousel_itemLoadCallback
    });
    captify_images();
});