$(function(){ // permet d'attendre le chargement complet du DOM
	console.log("Ça marche !");
	
	// EXO 2
	// Question 2.1
	var question2_1 = $('#footer_site p:first').html();
	console.log(question2_1);
	
	// Question 2.2
	
	$('#main h1').each(function(index){
			// ici index contient tour à tour le rang de chaque élément sélectionné
			// attention : le rang commence à 0 pour le premier élément sélectionné
			// $(this) représente tour à tour chacun des éléments sélectionnés
			// (ici les balises <h1> )
			console.log(index+" : "+$(this).text());
			
			});
	
	// EXO 3
	function agrandirLogo(){
		$(this).css('width', '300px');  // Q3.2
	}	
	$('#header_top img').on('mouseenter', agrandirLogo);  // Q3.1
	
	var largeurLogo = $('#header_top img').css('width');
	// var largeurLogo = $('#header_top img').width();
	console.log(largeurLogo);
	function retrecirLogo(){
		// $(this).css('width', '200px');  // Q3.3
		$(this).css('width', largeurLogo);  // Q3.4
		// $(this).width(largeurLogo);
	}
	$('#header_top img').on('mouseleave', retrecirLogo); // Q3.3

	// EXO 4
	var couleurBouton = $('#bouton_decouvrir_thes').css('background-color');  // Q4.1
	console.log(couleurBouton);
	
	var largeurBouton = $('#bouton_decouvrir_thes').width();  // Q4.2
	console.log(largeurBouton);
	
	function changerCouleurBoutonThes(){
		$('#bouton_decouvrir_thes').css('background-color', 'green');  // Q4.4
	}
	$('#bouton1').on('click', changerCouleurBoutonThes);
	
	function retablirCouleurBoutonThes(){
		$('#bouton_decouvrir_thes').css('background-color', couleurBouton); // Q4.5
	}
	$('#bouton2').on('click', retablirCouleurBoutonThes); // Q4.5
	
	function masquerBoutonThes(){
		// $('#bouton_decouvrir_thes').hide(1000);
		// $('#bouton_decouvrir_thes').css('display', 'none');
		$('#bouton_decouvrir_thes').css('visibility', 'hidden'); // Q4.6
	}
	$('#bouton3').on('click', masquerBoutonThes); // Q4.6
	
	function afficherBoutonThes(){
		// $('#bouton_decouvrir_thes').show(1000);
		// $('#bouton_decouvrir_thes').css('display', 'block');
		$('#bouton_decouvrir_thes').css('visibility', 'visible');  // Q4.7
	}
	$('#bouton4').on('click', afficherBoutonThes);  // Q4.7
	
	var largeurBoutonActuelle = largeurBouton;
	function agrandirBoutonThes(){
		if(largeurBoutonActuelle > 150){
			largeurBoutonActuelle = largeurBouton;
		}
		else{
			largeurBoutonActuelle = largeurBoutonActuelle+5;
		}
		console.log(largeurBoutonActuelle);
		$('#bouton_decouvrir_thes').width(largeurBoutonActuelle);
	}
	$('#bouton5').on('click', agrandirBoutonThes); // Q4.8
	
	// EXO 5
	function afficherSousMenu(){
		$(this).find('ul').css('display', 'block'); // Q5.1
	}
	$('#menu_top>ul>li').on('mouseenter', afficherSousMenu);  // Q5.1
	
	function masquerSousMenu(){
		$(this).find('ul').css('display', 'none');   // Q5.2
	}
	$('#menu_top>ul>li').on('mouseleave', masquerSousMenu);   // Q5.2
	
	// EXO 6
	function ajouterClasse(){
		if($(this).parent().hasClass('selection_news')){ // si l'élément est actif (i.e. 
														// si le <h2> correspondant au span cliqué a la classe "selection_news")
			$(this).parent().removeClass('selection_news');  // Q6.4
			$(this).parent().siblings('p').css('display', 'none');  // Q6.4
		}
		else{	
			$('#news h2').removeClass('selection_news');  // Q6.3
			$('#news p').css('display', 'none');          // Q6.3
			$(this).parent().addClass('selection_news');  // Q6.1
			$(this).parent().siblings('p').css('display', 'block'); // Q6.2
		}
	}
	$('#news span').on('click', ajouterClasse); // Q6.1 
	
	// EXO 7
	function changerImageFond(){
		var imageFondCSS = $(this).css('background-image'); // Q7.1
		console.log(imageFondCSS);
		$('#news').css('background-image',imageFondCSS); // Q7.2
	}
	$('#patterns .bloc').on('click', changerImageFond);
	
	// EXO 8
	function animerSlogan(){
		$('.slogan').animate({'opacity':'0.2'}, 2000); // Q8.2
	}
	$('.slogan').on('click', animerSlogan); // Q8.1
	
	// EXO 9
	function decalerImage(){
		$(this).find('img').animate({'left':'300px'}, 1000);  // Q9.2
	}
	$('#espaces_thes div').on('mouseenter', decalerImage);  // Q9.1
	
	function replacerImage(){
		$(this).find('img').animate({'left':'0px'}, 1000); // Q9.3
	}
	$('#espaces_thes div').on('mouseleave', replacerImage); // Q9.3
	
	// EXO 10
	function deplacerImage(){
		var divCliquee = $(this).clone();   // avant de retirer la division, on la duplique
		$(this).remove();  // on retire la division cliquée du HTML
		$('#espaces_thes').prepend(divCliquee); // on rajoute le clone au début de la div "espaces_thes"
		// la division clonée a perdu les écouteurs d'événement, il faut les remettre dessus
		divCliquee.on('mouseenter', decalerImage);
		divCliquee.on('mouseleave', replacerImage); 
		divCliquee.on('click', deplacerImage);
		// pour replacer l'image de la div déplacée :
		divCliquee.find('img').animate({'left':'0px'}, 1000);
		
	}
	
	$('#espaces_thes div').on('click', deplacerImage); // Q10.1
	
});