jQuery(function(){
	$("#concours-index li").each(function (i) {
		i = i+1;
		$('.concours-control').append('<li><a href="javascript:;" id="concoursitem-' + i + '">' + i + '</a></li>');
	});
	
	$("#events-index li").each(function (i) {
		i = i+1;
		$('.events-control').append('<li><a href="javascript:;" id="eventsitem-' + i + '">' + i + '</a></li>');
	});

	
	jQuery('#concours-index').jcarousel({
        start: 1,
		scroll: 1,
		wrap: 'last',
		auto: 4,
		buttonNextHTML: null,
        buttonPrevHTML: null,
		initCallback: concours_initCallback,
		itemVisibleInCallback: {
			onBeforeAnimation: concoursIn
        },
		itemVisibleOutCallback: {
            onBeforeAnimation: concoursOut
        }
    });
	
	jQuery('#events-index').jcarousel({
        start: 1,
		scroll: 1,
		wrap: 'last',
		auto: 6,
		buttonNextHTML: null,
        buttonPrevHTML: null,
		initCallback: events_initCallback,
		itemVisibleInCallback: {
			onBeforeAnimation: eventsIn
        },
		itemVisibleOutCallback: {
            onBeforeAnimation: eventsOut
        }
    });
	
	
});


function concours_initCallback(carousel)
{
    jQuery('.concours-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        carousel.stopAuto();
		return false;
    });

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


function concoursIn(carousel, item, idx, state) {
	//display('Item #' + idx + ' is now visible');
	$('.concours-control').find('#concoursitem-' + idx).addClass('active');
};
function concoursOut(carousel, item, idx, state) {
	//display('Item #' + idx + ' is no longer visible');
	$('.concours-control').find('#concoursitem-' + idx).removeClass('active');
};


function events_initCallback(carousel)
{
    jQuery('.events-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        carousel.stopAuto();
		return false;
    });

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


function eventsIn(carousel, item, idx, state) {
	//display('Item #' + idx + ' is now visible');
	$('.events-control').find('#eventsitem-' + idx).addClass('active');
};
function eventsOut(carousel, item, idx, state) {
	//display('Item #' + idx + ' is no longer visible');
	$('.events-control').find('#eventsitem-' + idx).removeClass('active');
};