/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

    jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });

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

};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
    jQuery("#jc-"+idx).addClass('active');
//alert(jQuery("#ct-"+idx).innerHTML());
      //jQuery("#campaign-text").set('html',jQuery("#ct-"+idx).innerHTML());
      document.getElementById('campaign-text').innerHTML = document.getElementById('ct-'+idx).innerHTML;

};

function mycarousel_itemFirstOutCallback(carousel, item, idx, state) {
    jQuery("#jc-"+idx).removeClass('active');
};

// needed for circular
/*function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};*/

/**
 * Item html creation helper.
 */
/*function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};*/

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        auto: 3,
        scroll: 1,
	  wrap: 'last',
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null,

        itemFirstInCallback:  mycarousel_itemFirstInCallback,

        itemFirstOutCallback:  mycarousel_itemFirstOutCallback
	// needed for circular
	//wrap: 'circular',
        //itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        //itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});