$(document).ready(function(){
	
	// On cache la partie explications tant qu'on n'a pas choisi son logiciel
	$('#scrolling_content div.navigateur').hide();
	// On cache la navigation
	$('#navigation a').hide();
	// Pour IE 6/7/8 on cache également l'"anneau" vert qui permet de resortir la barre
	if( jQuery.browser.version == '6.0' || jQuery.browser.version == '7.0' || jQuery.browser.version == '8.0' ) {
		$('#button_mail').hide();
	}
	
	// Animation au survol des icônes logiciels
	$('#barre_mail ul li a').hover(
		function() {
			$('#barre_mail ul li').css({opacity: 0.3});
			$(this).parent().css({opacity: 1});
			$(this).animate({
				top: 5
			}, 100);
		},
		function() {
			$('#barre_mail ul li').css({opacity: 1});
			$(this).animate({
				top: 0
			}, 100);
		}
	);
	
	// Sortir la barre de choix du logiciel en cliquant sur la flèche
	$('#button_mail').click(function(e){
		e.preventDefault();
		$('#h1logiciel').remove();
		$('#barre_mail').animate({ 
			top: 0,
			opacity: 1
		}, 500 );
		$('#scrolling_content div.navigateur').animate({ 
			opacity: 0
		}, 1000 ).hide();
	});
	
	// Quand on clique sur l'icône d'un logiciel
	$('a.lien_mail').click(function(e) {
		e.preventDefault();
		// On cache la barre de choix. Pour IE 6/7/8 on la cache complètement, pour les autres il reste un bouton pour la faire réapparaître.
		if( jQuery.browser.version == '6.0' || jQuery.browser.version == '7.0' || jQuery.browser.version == '8.0' ) {
			$('#barre_mail').animate({ 
				top: -123,
				opacity: 0
			}, 500 );
			$('#scrolling_content').after('<p style="padding-top: 1em; text-align: center;"><a href="configuration-logiciel-messagerie-electronique-boite-mail.php">Configurer un autre logiciel</a></p>');
		} else {
			$('#barre_mail').animate({ 
				top: -123
			}, 500 );
		}
		
		// On récupère le nom du logiciel sélectionné
		var logiciel = $(this).attr('id').replace('icone-','');
		
		// On affiche la partie explications pour le navigateur sélectionné
		$('#scrolling_content div#configurer-messagerie-'+logiciel).show().css({opacity: 0}).animate({ 
			opacity: 1
		}, 1000 );
		// et le titre
		$('#scrolling_content').after('<h1 id="h1logiciel" style="position: absolute; top: 108px; left: 0px; width: 932px; text-align: center; color: #626365">'+$(this).children().attr('alt')+'</h1>');
		
		// On en est à l'étape 1
		var etape = 1;
		// On affiche le bouton Suivant
		$('#navigation a.next').fadeIn();
		
		// on fait disparaître toutes les étapes visibles
		$('div.navigateur div.etape', '#scrolling_content').hide();
		// puis on affiche la bonne
		$('div.etape:eq('+(etape-1)+')', '#configurer-messagerie-'+logiciel).show();
		
		// Quand on clique sur Suivant...
		$('#navigation a.next').click(function(e) {
			e.preventDefault();
			// Si l'étape suivante est la dernière, on cache le bouton Suivant
			if( (etape+1) == $('div.etape', '#configurer-messagerie-'+logiciel).length ) {
				$('#navigation a.next').hide();
			}
			// On affiche le bouton Précédent
			$('#navigation a.prev').show();
			// on fait disparaître toutes les étapes visibles
			$('div.navigateur div.etape', '#scrolling_content').hide();
			// puis on affiche la bonne
			$('div.etape:eq('+etape+')', '#configurer-messagerie-'+logiciel).fadeIn();
			// et on passe à l'étape suivante
			etape++;
		});
		
		// Quand on clique sur Précédent...
		$('#navigation a.prev').click(function(e) {
			e.preventDefault();
			// Si l'étape précédente est la première, on cache le bouton Précédent
			if( (etape-2) == 0 ) {
				$('#navigation a.prev').hide();
			}
			// On affiche le bouton Suivant
			$('#navigation a.next').show();
			// on fait disparaître toutes les étapes visibles
			$('div.etape:visible', '#scrolling_content').hide();
			// puis on affiche la bonne
			$('div.etape:eq('+(etape-2)+')', '#configurer-messagerie-'+logiciel).fadeIn();
			// et on passe à l'étape précédente
			etape--;
		});
		
	});	
});