var cheminXML;// = "/skins/corbetts-master/scripts/liste.xml";
        
        var leTimer;
	    var leFadein;
	    var menuAcces = true;

	    //Creation des arrays qui contiendront les informations d'images
	    var listeImage = new Array();
	    var listeLien = new Array();
	    //Creation du tableau 2 dimensions
	    var listeCarrousel = new Array(listeImage, listeLien);

	    //Parametres de customization du carrousel
	    var carrousel_duree;
	    var carrousel_vitesse;
	    var carrousel_tailleX;
	    var carrousel_tailleY;

	    function creationListeXML() {

	        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
	            xmlhttp = new XMLHttpRequest();
	        }
	        else {// code for IE6, IE5
	            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	        }
	        xmlhttp.open("GET", cheminXML, false);
	        xmlhttp.send(null);


	        xmlDoc = xmlhttp.responseXML;
	        var x = xmlDoc.getElementsByTagName("image");
	        for (i = 0; i < x.length; i++) {
	           listeCarrousel[0][i] = x[i].getElementsByTagName("lienImage")[0].childNodes[0].nodeValue
	           listeCarrousel[1][i] = x[i].getElementsByTagName("lienRedirect")[0].childNodes[0].nodeValue
	       }

	       carrousel_duree   = xmlDoc.getElementsByTagName("parametre")[0].getElementsByTagName("duree")[0].childNodes[0].nodeValue;
	       carrousel_vitesse = xmlDoc.getElementsByTagName("parametre")[0].getElementsByTagName("vitesse")[0].childNodes[0].nodeValue;
	       carrousel_tailleX = xmlDoc.getElementsByTagName("parametre")[0].getElementsByTagName("largeur")[0].childNodes[0].nodeValue;
	       carrousel_tailleY = xmlDoc.getElementsByTagName("parametre")[0].getElementsByTagName("hauteur")[0].childNodes[0].nodeValue;

	       //var t = xmlDoc.getElementsByTagName("param");
	       //alert(xmlDoc.getElementById("param").attributes['duree'].value);

	    }

	    //La variable i sert de repere dans presque toutes fonctions. Elle indique quelle photo afficher.
	    var i = 1;
	    
	    function TimerC() {

	        //***Fonction qui est appelé a chaque 5000 millisecondes. Elle sert a enclencher la rotation du carrousel***

	       

	        //Si on a fait le tour du Array et qu'il n'y a plus rien, i revient a zero.
	        if (i + 1 > listeCarrousel[0].length) {
	            i = 0;
	        }
	        
	        menuAcces = true;

	        //Creation du contenu qui sera l'image principale
	        imagePrinc = "<a href='" + listeCarrousel[1][i] + "'><img width='" + carrousel_tailleX + "' height='" + carrousel_tailleY + "' src='" + listeCarrousel[0][i] + "'></a>";

	        //La variable retrait est etabli une premiere fois ici avec la valeur zero.
	        //
	        //Apres, on crée les 3 petites images du bas. Pour eviter de tenter d'afficher une image qui sort
	        //du Array ( le i qui est plus grand que la longueur du tableau ) , alors retrait servira a retirer le nombre
	        //suffisant a la variable i pour commencer a partir du debut du tableau. On lui donne la valeur de la longueur
	        //du Array et sera soustrait de i.
	        
	        var retrait = 0;
	        if ((i + 2) > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	        img1 = "<a href='" + listeCarrousel[1][i + 1 - retrait] + "'><img src='/genericimageprocess.axd?width=" + carrousel_tailleX / 3.13 + "&imageurl=" + listeCarrousel[0][i + 1 - retrait] + "'/></a>";
	        if ((i + 3) > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	        img2 = "<a href='" + listeCarrousel[1][i + 2 - retrait] + "'><img src='/genericimageprocess.axd?width=" + carrousel_tailleX / 3.13 + "&imageurl=" + listeCarrousel[0][i + 2 - retrait] + "'/></a>";
	        if ((i + 4) > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	        img3 = "<a href='" + listeCarrousel[1][i + 3 - retrait] + "'><img src='/genericimageprocess.axd?width=" + carrousel_tailleX / 3.13 + "&imageurl=" + listeCarrousel[0][i + 3 - retrait] + "'/></a>";
	        if ((i + 5) > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	        img4 = "<a href='" + listeCarrousel[1][i + 4 - retrait] + "'><img src='/genericimageprocess.axd?width=" + carrousel_tailleX / 3.13 + "&imageurl=" + listeCarrousel[0][i + 4 - retrait] + "'/></a>";
	        
	        //Permet d'enclencher le Timer qui fera la rotation des images
	        leTimer = setTimeout("TimerC()", carrousel_duree); 
	        //Tout juste avant l'enclenchement de la fonction Timer(), on applique la fonction fadeInEffet() qui
	        //fait disparaitre l'image.
	        leFadeIn = setTimeout("fadeInEffet()", carrousel_duree - carrousel_vitesse); 
	        //Fonction qui change les images et qui fait reapparaitre l'image principale ensuite, 
	        //puisqu'une autre fonction l'avait fait disparaitre (fadeInEffet)
	        fadeOutEffet(imagePrinc, img1, img2, img3, img4); 
	        //fonction
	        //imagePrinc : texte html de l'image principale 
	        //img1: texte html de la 1ere petite image
	        //img2: texte html de la 2eme petite image
	        //img3: texte html de la 3eme petite image
            //supp: texte de l'image supplementaire pour l'animation

	        

	        fadeRondBlanc(i);

	    }

	    function fadeOutEffet(imagePrinc, img1, img2, img3, supp) {

	        //imagePrinc : texte html de l'image principale 
	        //img1: texte html de la 1ere petite image
	        //img2: texte html de la 2eme petite image
	        //img3: texte html de la 3eme petite image
	        //supp: texte de l'image supplementaire pour l'animation

	        $(document).ready(function () {
	            //Changement des images
	            changeImage(imagePrinc, img1, img2, img3, supp, "auto");
	            //Effet de fadeIn, qui fait reapparaitre l'image principale
	            $('div#ImageTop').stop().animate({ "opacity": "1" }, (carrousel_vitesse / 4) * 4);
	        });

	    }

	    function changeImage(a, b, c, d, e, mode) {

	        //***Fonction qui s'occupe de changer les images pour les nouvelles***

	        //a : texte html de l'image principale 
	        //b : texte html de la 1ere petite image
	        //c : texte html de la 2eme petite image
	        //d : texte html de la 3eme petite image
	        //e : texte de l'image supplementaire pour l'animation

	        //Modification du contenu des DIV appropriés pour y mettre le nouveau contenu avec innerhtml
	        document.getElementById('ImageTop').innerHTML = a;
	        document.getElementById('image1').innerHTML = b;
	        document.getElementById('image2').innerHTML = c;
	        document.getElementById('image3').innerHTML = d;
	        document.getElementById('imageSupp').innerHTML = e;
	        
	        //Pour que la boucle fonctionne, il faut incrémenter la variable i
	        i++;
	        
	    

	        if (mode == "auto") {
	            $(document).ready(function () {
	                $('#thumbnails').css("left", "0px");
	            });

	        } 

	        //Creation du petit menu de navigation avec des ronds au milieu du carrousel
	        //creationMenu();

	    }


	    function creationMenu() {

	        //***Fonction qui crée le menu de navigation du carrousel***

	        //La variable menuHTML contiendra le code html du bg du menu de navigation de ronds.
	        //On l'initialise avec un <ul>, puisque le menu sera une liste de <li>
	        var menuHtml = "<ul>";

	        //Boucle qui cree une image de rond pour le menu pour chaque element existant dans le Array.
	        //Chaque image possede donc son bg
	        for (a = 0; a < listeCarrousel[0].length; a++) {
	                menuHtml += "<li style='display:inline;margin-right:2px;' onclick='clicBouton(" + a + ")'><img src='/sites/corbetts-master/Images/carrousel/rond_gris.png'></li>";
	            }

	        menuHtml += "</ul>";

	        //Attribution du nouveau code HTML dans le DIV du bg
	        document.getElementById('menuBG').innerHTML = menuHtml;


	        //La variable menuHTML contiendra le code html du menu de navigation de ronds.
	        //On l'initialise avec un <ul>, puisque le menu sera une liste de <li>
	        var menuHtml2 = "<ul>";

	        //Boucle qui cree une image de rond pour le menu pour chaque element existant dans le Array.
	        //Chaque image possede donc son image de point dans le menu
	        for (a = 0; a < listeCarrousel[0].length; a++) {
	            menuHtml2 += "<li id='"+a+"' style='display:inline;margin-right:2px;' onclick='clicBouton(" + a + ")'><img src='/sites/corbetts-master/Images/carrousel/rond_normal.png'></li>";
	        }

	        menuHtml2 += "</ul>";

	        //Attribution du nouveau code HTML dans le DIV du menu de ronds
	        document.getElementById('menuRonds').innerHTML = menuHtml2;

	        /*$(function () {
	            $('#menuRonds>ul>li').css("opacity", "0");
	        });*/

	    }

	    function clicBouton(id) {

	        //***Fonction qui permet de modifier les images en cliquant sur un des ronds du menu***
	        //POUR PLUS D'EXPLICATIONS SUR CETTE FONCTION, REGARDER DANS LA FONCTION Timer()

	        if (menuAcces == true){
	            
	            i = id;

	            imagePrinc = "<a href='" + listeCarrousel[1][i] + "'><img width='" + carrousel_tailleX + "' height='" + carrousel_tailleY + "' src='" + listeCarrousel[0][i] + "'></a>";

	            var retrait = 0;

	            if (i + 2 > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	            img1 = "<a href='" + listeCarrousel[1][i + 1 - retrait] + "'><img width='" + (carrousel_tailleX - 32) / 3 + "' height='" + carrousel_tailleY / 3.13 + "' src='" + listeCarrousel[0][i + 1 - retrait] + "'/></a>";
	            if (i + 3 > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	            img2 = "<a href='" + listeCarrousel[1][i + 2 - retrait] + "'><img width='" + (carrousel_tailleX - 32) / 3 + "' height='" + carrousel_tailleY / 3.13 + "' src='" + listeCarrousel[0][i + 2 - retrait] + "'/></a>";
	            if (i + 4 > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	            img3 = "<a href='" + listeCarrousel[1][i + 3 - retrait] + "'><img width='" + (carrousel_tailleX - 32) / 3 + "' height='" + carrousel_tailleY / 3.13 + "' src='" + listeCarrousel[0][i + 3 - retrait] + "'/></a>";
	            if (i + 5 > listeCarrousel[0].length) { retrait = listeCarrousel[0].length }
	            img4 = "<a href='" + listeCarrousel[1][i + 4 - retrait] + "'><img width='" + (carrousel_tailleX - 32) / 3 + "' height='" + carrousel_tailleY / 3.13 + "' src='" + listeCarrousel[0][i + 4 - retrait] + "'/></a>";

	            changeImage(imagePrinc, img1, img2, img3, img4, "clic");

	            $(function () {
	                $('#menuRonds>ul>li').stop().animate({ "opacity": "0" }, 200);
	            });
	            $(function () {
	                $('#menuRonds>ul>li#' + id).stop().animate({ "opacity": "1" }, 200);
	            });

	            //Permet d'enclencher le Timer qui fera la rotation des images
	            clearTimeout(leTimer);
	            leTimer = setTimeout("TimerC()", carrousel_duree);

	            //Tout juste avant l'enclenchement de la fonction Timer(), on applique la fonction fadeInEffet() qui
	            //fait disparaitre l'image.
	            clearTimeout(leFadeIn);
	            leFadeIn = setTimeout("fadeInEffet()", carrousel_duree-carrousel_vitesse);

	           

	        }

	    }



	    function fadeInEffet() {

	        //***Fonction permettant la disparition de l'image***

	        menuAcces = false;

            deplacementThumb();

	        $(document).ready(function () {
	            //FadeOut en jquery
	            $('div#ImageTop').stop().animate({ "opacity": "0" }, (carrousel_vitesse / 4) * 4);
	        });

	    }

	    function deplacementThumb() {

	        //***Fonction qui deplacent les thumbnails***

	        $(function () {
	            $('#thumbnails').stop().animate({ "left": -((carrousel_tailleX-32)/3)-16 }, (carrousel_vitesse / 4) * 3);
	        });

	    }

	    function fadeRondBlanc(id) {

	        $(function () {
	            $('#menuRonds>ul>li#' + (id - 1)).stop().animate({ "opacity": "1" }, 750);

	            if (id == 1) {
	            id = listeCarrousel[0].length + 1;
	        }

	            $('#menuRonds>ul>li#' + (id - 2)).stop().animate({ "opacity": "0" }, 750);
	        });
        
        }