jQuery(document).ready(function($){
	//On créer un ul apres la div titre_boite_actu
	$('<ul class="ui-tabs-nav"></ul>').insertAfter('div#titre_boite_actu');
	// on récupere toutes les divs 
	
	// On rajoute la class on aurait pu le faire manuellement mais cela rentrait en conflit avec la version sans javascript
	$('#featured .item').addClass('ui-tabs-panel ui-tabs-hide');
	
	$('#featured .ui-tabs-panel').each(function(index) {
		$(this)
		// dans le ul on va
		.appendTo('#featured ul.ui-tabs-nav')
		// mettre les divs en question mais avant on va les entourée chacune 
		// d'un li avec id unique
		// + d'un lien qui renverra vers une div via une ancre
		.wrap('<li class="ui-tabs-nav-item" id="nav-fragment-' + (index+1) + '"><a class="lien_carroussel" href="#fragment-' + (index+1) + '"></a></li>');
	});

	// on duplique les div de tout a leur
	$('#featured .ui-tabs-nav .ui-tabs-nav-item a .ui-tabs-panel').each(function(index) {
		$(this).clone().insertBefore('#duplication');
	});

	// on enleve les class des div présent dans les li
	$('#featured ul .ui-tabs-panel').each(function() {
		$(this).removeClass();
	});

	// on ajoute un identifiant unique au div qui sont hors du ul
	$('#featured .ui-tabs-panel').each(function(index) {
		$(this).attr({
			'id' : 'fragment-' + (index+1)
		});
	});
	
	// On rajoute le display block on aurait pu le faire manuellement mais cela rentrait en conflit avec la version sans javascript
	$('#accueil_digitaleo #accueil_nos_succes .ui-tabs-panel .resume').css('display','block');

	// on selectionne le premier li
	$('#nav-fragment-1').addClass('ui-tabs-selected');

	// on demasque la premiere div
	$('#fragment-1').removeClass('ui-tabs-hide');

	// on fait tourner les li
	$('#featured > ul').tabs({fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
	
	// On gère le survol de l'image enfin du li qui est autour
	$('#featured .ui-tabs-nav-item').hover(  
		function() {
			//on arrete le defilement
			$("#featured ul").tabs("rotate",0,false);
			//on enleve la class active sur tous les li
			$('#featured .ui-tabs-nav-item').removeClass('ui-tabs-selected');
			//sur celui qu'on survol on ajoute la class active
			$(this).addClass('ui-tabs-selected');
			// on recupere l'enfant de l'element survoler entre autre le lien 
			// On recupere le href de ce lien qui va nous servir comme selecteur de la partie de droite
			var hrefLienCarroussel = $(this).children(".lien_carroussel").attr('href');
			// on masque tous les bloc a droite
			$('.ui-tabs-panel').addClass('ui-tabs-hide');
			// grace au href recuperer precedent on selectionne l'element correspondant sur la droite qu'on affiche
			$(hrefLienCarroussel).removeClass('ui-tabs-hide');
		},  
		function() {
			// lorsuqu'on arrete de survoler on reprend le defilement
			$('#featured > ul').tabs('rotate',8000,true);  
		}  
	);
	
	// On gere le click sur l'image
	$('.ui-tabs-nav-item a.lien_carroussel').click(function () {
		// on recupere le lien qui est dans le lien
		var nathaniel = $(this).find(".lien_article").attr('href');
		// l'url actuelle est egale au lien
		location.href = nathaniel;
    }); 
	

	
	
});