jQuery(document).ready(function() {
	jQuery('#carousel').jcarousel({
		auto: 0,
		wrap: 'last',
		scroll: 1,
		initCallback: mycarousel_initCallback,
		buttonNextHTML: null,
		buttonPrevHTML: null,
		itemVisibleInCallback: {
			onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
			onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
		},
		itemVisibleOutCallback: {
			onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
			onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
		}
	});
});
                
function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
	cycleComplete = true;
	if (state == 'init') {
		return;
	} else {
		cycleComplete = true;
	}
	$('#control' + idx).css('background-color','#999999');
};

function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
	$('#control' + idx).css('background-color','#999999');
	if (cycleComplete && idx == 1) {
		carousel.stopAuto();
	}
};

function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
	$('#control' + idx).css('background-color','#F2F2F3');
};

function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
	$('#control' + idx).css('background-color','#F2F2F3');
};