/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init')
        return;

    jQuery('img', item).fadeIn('fast');
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
    //alert('item' + [idx]);	
	//jQuery('#item' + idx).removeClass("highlight")
	jQuery('#item' + idx).addClass("highlight")
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
	//alert(jQuery('img', item))
    jQuery('img', item).fadeOut('fast');	

};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
   //alert('Item #' + idx + ' is no longer visible');
   //jQuery('#item' + idx).css("background", "#4088B8")
   	jQuery('#item' + idx).removeClass("highlight")
   
};


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

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

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

	


// Ride the carousel...
jQuery(document).ready(function() {
	jQuery("#mycarousel ul").css("cssText", "margin:0; padding:0; width:1600px !important;");
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,	
			
		itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },
		
   		itemVisibleOutCallback: {
            onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
        }		
   

    });
});