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_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init')
        return;
		
		if (state != 'prev')		
			rotate();
		else
			reverseRotate();
			
    jQuery('img', item).fadeIn('slow');
		
};

/**
 * 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) {
		
    //display('Item #' + idx + ' is now visible' + item.id);
};

function rotate() {	
	//Get the first image
	var current = ($('div#bios ul li.show')?  $('div#bios ul li.show') : $('div#bios ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#bios ul li:first') :current.next()) : $('div#rotator ul li:first'));	

	next.addClass('show');
	current.removeClass('show');

};

function reverseRotate()
{
	//Get the first image
	var current = ($('div#bios ul li.show')?  $('div#bios ul li.show') : $('div#bios ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.prev().length) ? ((current.prev().hasClass('show')) ? $('div#bios ul li:first') :current.prev()) : $('div#rotator ul li:first'));
			
	next.addClass('show');
	current.removeClass('show');
}

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'circular',
				scroll: 1,
        initCallback: mycarousel_initCallback,
				itemVisibleInCallback: {
					onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
				  onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
				}
    });
});