$(document).ready(function(){

	var $animation = $("#animation"); // conteneur d'animation

	// si il y a + d'une image, on lance l'animation sinon on reste statique
	if($('#animation div').length > 1){
		var $changer = $('<ul></ul>').appendTo($animation); // liens de nav entre chaque ecran

		// pour chaque div : ajout de son id et du lien vers celle-ci
		$animation.find('div').each(function(index){
			$(this).attr('id', 'tabs-'+(index+1));
			$changer.append('<li><a href="#tabs-'+(index+1)+'">'+(index+1)+'</a></li>');
		});

		// animation des divs
		$animation.tabs({ fx: [{opacity:'toggle', width:'toggle', duration:'slow'},{opacity:'toggle', width:'toggle', duration:'fast'}] }).tabs("rotate", 4000, true);

		// on pause l'anim sur le mouseover
		$animation.find('div').mouseover(function(){
			$(this).parent().tabs('rotate', 0, false);
		});
		$animation.mouseout(function(){
			$(this).tabs('rotate', 4000, true);
		});
	}
});