var rollIdx = 0;

function initRoll()
{
	$('.roll').each(function()
	{
		var nb = $(this).find('.mot').length;
		
		if( rollIdx >= nb )
		{
			rollIdx = 0;
		}
		
		var idx1 = rollIdx;
		var idx2 = rollIdx + 1;
		var idx3 = rollIdx + 2;
		var idx4 = rollIdx + 3;
		
		if( idx2 >= nb ) 
		{
			idx2 -= nb;
		}
		if( idx3 >= nb ) 
		{
			idx3 -= nb;
		}
		if( idx4 >= nb ) 
		{
			idx4 -= nb;
		}
		
		$(this).find('.show1').css('opacity', 0.5).html($(this).find('.mot'+idx1).html());
		$(this).find('.show2').css('opacity', 1).html($(this).find('.mot'+idx2).html());
		$(this).find('.show3').css('opacity', 0.5).html($(this).find('.mot'+idx3).html());
		$(this).find('.show4').css('opacity', 0).html($(this).find('.mot'+idx4).html());

	});

}

function nextRoll()
{
	if( $('.roll .show2').queue("fx") != '' )
	{
		return;
	}
	
	$('.roll').each(function()
	{
		var show1 = $(this).find('.show1');
		var show2 = $(this).find('.show2');
		var show3 = $(this).find('.show3');
		var show4 = $(this).find('.show4');
		var pos1 = $(this).find('.position1');
		var pos2 = $(this).find('.position2');
		var pos3 = $(this).find('.position3');
		
		var ppos1 = pos1.position();
		var ppos2 = pos2.position();
		var ppos3 = pos3.position();
		
		show1.animate({fontSize: '12px', opacity: 0}, 500);
		show2.animate({fontSize: '20px', top : ppos1.top + 'px'}, 500);		
		show3.animate({fontSize: '24px', top : ppos2.top + 'px', opacity: 1}, 500);
		show4.css('opacity', 0);
		show4.css('top', ppos3.top + 'px').animate({fontSize: '20px', opacity: 0.5}, 500, function()
		{
			rollIdx++;
			show1.removeClass("show1").addClass("show4");
			show2.removeClass("show2").addClass("show1");
			show3.removeClass("show3").addClass("show2");
			show4.removeClass("show4").addClass("show3");
			initRoll();
		});
		
	});
}

$(function()
{
	initRoll();
	setInterval(nextRoll, 2000);
});