(function($){ // 01. On utilise function($) pour explicitement dire qu’on va utiliser l’alias « $ » dans notre fonction

	$.fn.diaporama = function(options){
		var defaults = {
			delay: 15, //le délai de balayage des images
			animationSpeed: "normal", //la durée de l’effet de transition
			controls:true //affichage des boutons de contrôle
		};
		
		// $.extend est une fonction JQuery qui permet de créer une variable options à partir, soit de la variable defaults, soit des paramètres spécifiés dans l’appel de la fonction $.fn.diaporama = function(options)
		var options = $.extend(defaults, options);
		
		this.each(function(){ // 02. La fonction diaporama va être appelée sur un élément ou un ensemble d’éléments. Il convient donc d’éxécuter pour chacun des éléments rencontrés la fonction diaporama
		
			// On attribue à la variable obj, l'objet courant (le diaporama courant)
			var obj = $(this);
			
			// On teste si il y a plus d'une image, sinon le diaporama n'est pas nécessaire
			if($(obj).find("li").length > 1)
			{
				// On va exécuter la fonction nextElt (nextElement) à chaque intervalle de temps (par défaut toutes les trois secondes)
				var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
				// On enregistre le sens de rotation
				var sens = "right";
				
				
				// On cache tous les éléments de la liste
				$(obj).find("li").hide();
				// Le premier élément s'affiche progressivement et se voit attribuer la classe "active"
				$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
				
				//////////////////// Contrôles ////////////////////
				
				//Si le paramètre controls est défini à true, alors on ajoute les boutons de contrôle
				if(options.controls)
				{
					// On définit l'action click pour le bouton "précédent"
					// La méthode parent permet de trouver l'élément "parent" de l'élément courant et la méthode siblings() d'en trouver les éléments frères
					// 	$(obj)  => <ul class="diaporama"> 
					//	parent => <div class="center">
					//	frères   => <div class="nav_l">
					//	élément recherché => <a class="prev">
					$(obj).parent().siblings().find(".prev").click(function(){
						// On supprime l'intervalle automatique de transition d'image
						clearInterval(inter);
						// On appelle la fonction qui affiche l'image précédente
						prevElt(options);
						
						// On relance l'affichage automatique
						inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
						// On définit le sens à gauche
						sens = "left";
					});
					
					// On définit l'action click pour le bouton "suivant"
					// La méthode siblings() permet de trouver les éléments "frères" de l'élément courant (la liste ul) --> ici notre <div>
					$(obj).parent().siblings().find(".next").click(function(){
						// On supprime l'intervalle automatique de transition d'image
						clearInterval(inter);
						// On appelle la fonction qui affiche l'image précédente
						nextElt(options);
						
						// On relance l'affichage automatique
						inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
						// On définit le sens à droite
						sens = "right";
					});
				}
				
				/////////////// Affiche l'élément suivant //////////////
				
				function nextElt(options){
					// On cache de manière progressive l'image active
					$(obj).find("li.active").fadeOut(options.animationSpeed);
					
					// Si l'image active courante n'est pas la dernière image de la liste
					if(!$(obj).find("li.active").is(":last-child")){
						// Alors on cherche l'image suivante (".next()"), on lui ajoute la class "active", et on retire cette classe à l'image précedente (l'ancienne image active)
						$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
						// On affiche la nouvelle image active progressivement
						$(obj).find("li.active").fadeIn(options.animationSpeed);
					}
					// L'image est la dernière de la liste
					else{
						// On fait la même chose mais en prenant la première image de la liste via le sélecteur "first-child"
						$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:last-child").removeClass("active");
					}
				}
				
				/////////////// Affiche l'élément précédent //////////////
				
				function prevElt(options){
					$(obj).find("li.active").fadeOut(options.animationSpeed);
					
					if(!$(obj).find("li.active").is(":first-child")){
						$(obj).find("li.active").prev().addClass("active").next().removeClass("active");
						$(obj).find("li.active").fadeIn(options.animationSpeed);
					}
					else{
						$(obj).find("li:last-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:first-child").removeClass("active");
					}
				}
			}
		});
		return this; //03. Continuer le chainage JQuery -- Le chaînage permet de continuer d’appliquer des fonctions à notre sélecteur, par exemple, $(« .diaporama »).diaporama().show.fadeOut() …
	};
})(jQuery);