function addScript(scriptFile, conteneur) {

    var scriptUtil      = document.createElement("SCRIPT");
    scriptUtil.language = "javascript"; 
    scriptUtil.type     = "text/javascript"; 
    scriptUtil.src      = scriptFile;
    conteneur.appendChild(scriptUtil);
}

addScript("./HtmlUtil.js",document.getElementsByTagName("HEAD")[0]);
addScript("./diaporama/menu.js",document.getElementsByTagName("HEAD")[0]);

function Bouton(id, parent) {
    var btn = new NewHtmlObj("IMG", id, parent);
    
    btn.file = "";
    btn.fileOver = "";
    btn.fileOut = "";
    btn.fileDown = "";
    btn.fileSelect = "";
    btn.selected = false;
    
    btn.setSource = function(file) {  this.src = file;  };
    
    btn.onmousedown = function() { this.setSource(this.fileDown);  };
    btn.onmouseup   = function() { this.setSource(this.file);    };
    btn.onmouseout  = function() { 
        if (this.selected)  this.setSource(this.fileSelect);
        else this.setSource(this.file);   
    };
    btn.onmouseover = function() { 
        if (!this.selected) {
            this.style.cursor = "pointer"; 
            this.setSource(this.fileOver);  
        }
    };
    
    btn.setSelect = function(isSelect) {
        this.selected = isSelect;
        if (this.selected) 
            this.setSource(this.fileSelect);
        else this.setSource(this.file);
    };

    return btn;
}

function MenuItem2(id, txt, parent) {
    
    var item = new NewHtmlObj("DIV", id, parent);
    item.setPosition("relative",0,0);
    item.setGrandeur(140,14);
    item.style.overflow = "hidden";
    item.style.fontFamily  = "Calibri";
    item.style.fontSize  = "10px";
    item.style.textAlign = "left";
    item.style.fontWeight = "bold";
    item.style.backgroundImage = "url(./images/choixMEnuBorderTop.png)";
    item.style.backgroundRepeat = "no-repeat";
    item.style.color = "#dddddd";
    item.style.paddingLeft = "10px";
    item.style.paddingTop = "4px";
    
    item.categorie = txt;

    item.file = "./images/choixMEnuBorderTop.png";
    item.fileOver = "./images/choixMEnuBorderTop2.png";
    item.selected = false;
    
    item.setSource = function(file) {  this.style.backgroundImage = "url(" + file +")";   };
    
    item.onmouseout  = function() { 
        this.setSource(this.file);   
    };
    item.onmouseover = function() {
        
        this.style.cursor = "pointer"; 
        this.setSource(this.fileOver);  
    };
    item.setSource(item.file)
    parent.appendChild(item);
    return item;
}


function MenuCategorie(id, parent) {
    var cache = new NewHtmlObj("DIV", "cache" + id, parent);
    cache.setPosition("absolute",30,-107);
    cache.setGrandeur(140,0);
    cache.style.overflow = "hidden";
    
    cache.menu = new NewHtmlObj("DIV", id, parent);
    cache.menu.setPosition("relative",0,120);
    cache.menu.setGrandeur(140,120);
    cache.menu.style.overflow = "hidden";
    cache.menu.style.fontFamily  = "Calibri";
    cache.menu.style.fontSize  = "12px";
    cache.menu.style.visibility  = "hidden";
    cache.menu.style.backgroundImage = "url(./diaporama/images/blackTrans50pc.png)";
    
    cache.boutonMenu = Bouton("btnMenu", parent);
    cache.boutonMenu.file = "./diaporama/images/boutonMenu.png";
    cache.boutonMenu.fileOver = "./diaporama/images/boutonMenu_over.png";
    cache.boutonMenu.fileOut = "./diaporama/images/boutonMenu.png";
    cache.boutonMenu.fileDown = "./diaporama/images/boutonMenu_over.png";
    cache.boutonMenu.fileSelect = "./diaporama/images/boutonMenu.png";
    cache.boutonMenu.setPosition("absolute", 94,-3);
    cache.boutonMenu.setGrandeur(15, 15);
    cache.boutonMenu.setSelect(false);

    cache.appendChild(cache.menu);   
    
    var tmpMenu = new Menu2();
    var item = tmpMenu.addMenu(cache.boutonMenu, cache.menu, cache);
    
    parent.appendChild(cache);
    parent.appendChild(cache.boutonMenu);

    return cache;
}

function Panel(panel, parent)
{
    panel.style.backgroundImage = "url(./diaporama/images/player.png)";
    panel.setGrandeur(201,41);
    panel.style.textAlign = "center";
    panel.style.ZIndex = "100";
    panel.setPosition("relative",0,-20);
    

    panel.btnBack = Bouton("btnBack", parent);
    panel.btnBack.file = "./diaporama/images/back.png";
    panel.btnBack.fileOver = "./diaporama/images/back_over.png";
    panel.btnBack.fileOut = "./diaporama/images/back.png";
    panel.btnBack.fileDown = "./diaporama/images/back_click.png";
    panel.btnBack.fileSelect = "./diaporama/images/back_on.png";
    panel.btnBack.setPosition("absolute", 31,4);
    panel.btnBack.setSelect(false);
    panel.btnBack.title = "Changer la direction de défillement";
    panel.btnBack.alt = "Changer la direction de défillement";
    panel.appendChild(panel.btnBack);

    panel.btnStop = Bouton("btnStop", parent);
    panel.btnStop.file = "./diaporama/images/stop.png";
    panel.btnStop.fileOver = "./diaporama/images/stop_over.png";
    panel.btnStop.fileOut = "./diaporama/images/stop.png";
    panel.btnStop.fileDown = "./diaporama/images/stop_click.png";
    panel.btnStop.fileSelect = "./diaporama/images/stop_on.png";
    panel.btnStop.setPosition("absolute", 67,4);
    panel.btnStop.setSelect(false);
    panel.btnStop.title = "Arrêter le défillement";
    panel.btnStop.alt = "Arrêter le défillement";
    panel.appendChild(panel.btnStop);

    panel.btnPlay = Bouton("btnPlay", parent);
    panel.btnPlay.file = "./diaporama/images/play.png";
    panel.btnPlay.fileOver = "./diaporama/images/play_over.png";
    panel.btnPlay.fileOut = "./diaporama/images/play.png";
    panel.btnPlay.fileDown = "./diaporama/images/play_click.png";
    panel.btnPlay.fileSelect = "./diaporama/images/play_on.png";
    panel.btnPlay.setPosition("absolute", 103,4);
    panel.btnPlay.setSelect(true);
    panel.btnPlay.title  = "";
    panel.btnPlay.alt  = "";
    panel.appendChild(panel.btnPlay);

    panel.btnNext = Bouton("btnNext", parent);
    panel.btnNext.file = "./diaporama/images/next.png";
    panel.btnNext.fileOver = "./diaporama/images/next_over.png";
    panel.btnNext.fileOut = "./diaporama/images/next.png";
    panel.btnNext.fileDown = "./diaporama/images/next_click.png";
    panel.btnNext.fileSelect = "./diaporama/images/next_on.png";
    panel.btnNext.setPosition("absolute", 139,4);
    panel.btnNext.setSelect(true);
    panel.btnNext.title = "";
    panel.btnNext.alt = "";
    panel.appendChild(panel.btnNext);
    
    panel.menu = MenuCategorie("menuCategorie", panel);
    
    return panel;
}

function photosEcran(num, categorie, image, positionx, positiony)
{
	this.numero = num;
	this.categorie = categorie;
    this.image = image;
    this.positionx = positionx;
    this.positiony = positiony;

    this.setCategorie =  function(categorie) { this.categorie = categorie; }
    this.setImage =  function(image) { this.image = image; }
    this.setImageBySource =  function(fichier) 
    { 
        var img = new Image(); 
        img.src = fichier; 
        this.setImage(img);  
    }
    this.setPositionx =  function(positionx) { this.positionx = positionx; }
    this.setPositiony =  function(positiony) { this.positiony = positiony; }
    
    this.getCategorie = function() { return this.categorie; }
    this.getImage = function() { return this.image; }
    this.getImageSource = function() { return this.image.src; }
    this.getPositionx = function() { return this.positionx; }
    this.getPositiony = function() { return this.positiony; }
    
    this.contain = function(categorie) 
    {  return (this.getCategorie().indexOf(categorie.toLowerCase()) >= 0) ;  }
}

function Diaporama(conteneur)
{
	this.conteneur = conteneur;
	this.id = "diaporama";
	this.imageNum = 0;
	this.images = new Array();
	this.imageSelect = new Array();
	this.photos = new Array();
	this.play = true;
	this.avance = true;
	this.av = true;
    this.lastSelection = null;
	this.timer = null;
	this.transparence = 0;
	this.direction = "avance";
    this.active = false;
	this.otherRuningScript = null;
    this.arrayCat = new Array();

	this.conteneur.style.textAlign = "center";
	this.image = NewHtmlObj("IMG", "imgCache", this);
	this.image.style.position = "relative";
	this.image.style.visibility = "hidden"
	
	this.cellule = NewHtmlObj("DIV", "divEcran", this);
	this.cellule.style.position = "relative";
	this.cellule.style.width = "600px";
	this.cellule.style.height = "450px";
	this.cellule.style.overflow = "hidden"
	this.cellule.appendChild(this.image);
	this.cellule.style.textAlign = "center";
	
	this.panel = Panel(NewHtmlObj("DIV", "divPanel", this)); 
	this.panel.onclick = function(){};

	this.centre = NewHtmlObj("center", "divCenter", this)
	this.conteneur.appendChild(this.centre);
	this.centre.appendChild(this.cellule);
	this.centre.appendChild(this.panel);
	
    this.btnBackClickListener = new MouseClickListener(this);
    this.btnNextClickListener = new MouseClickListener(this);
    this.btnPlayClickListener = new MouseClickListener(this);
    this.btnStopClickListener = new MouseClickListener(this);

    this.panel.btnBack.addListener(this.btnBackClickListener);
    this.panel.btnNext.addListener(this.btnNextClickListener);
    this.panel.btnPlay.addListener(this.btnPlayClickListener);
    this.panel.btnStop.addListener(this.btnStopClickListener);
    
    this.lblRealisation = NewHtmlObj("DIV","", this);
    this.lblRealisation.innerHTML = "  Toutes les réalisations...  ";
    this.lblRealisation.setPosition("absolute",50,190);
    //this.lblRealisation.setGrandeur(300,30);
    this.lblRealisation.style.fontFamily  = "Calibri";
    this.lblRealisation.style.fontSize  = "20px";
    this.lblRealisation.style.textAlign = "center";
    this.lblRealisation.style.paddint = "15px";
    this.lblRealisation.style.border = "outset 1px #004000";
    
    this.lblRealisation.style.fontWeight = "bold";
    this.lblRealisation.style.fontStyle = "italic";
    this.lblRealisation.style.color = "#FFFFFF";
    this.lblRealisation.style.backgroundImage = "url(./images/vertTrans50pc.png)";
    this.lblRealisation.style.backgroundRepeat = "repeat";
    
    //this.lblRealisation.style.color = "#333333";
    this.lblRealisation.style.padding = "5px";
    this.lblRealisation.style.paddingTop = "8px";
    //this.lblRealisation.style.ZIndex = "500";
    
    this.centre.appendChild(this.lblRealisation);
    
    this.mouseClicked = function(mouseClickEvent) {
        if( mouseClickEvent.source.id == this.panel.btnBack.id) this.changeDirection("recule");
        if( mouseClickEvent.source.id == this.panel.btnNext.id) this.changeDirection("avance");
        if( mouseClickEvent.source.id == this.panel.btnPlay.id) this.changeMode("play");
        if( mouseClickEvent.source.id == this.panel.btnStop.id) this.changeMode("stop");
    };
    
    this.kill = function(obj) {
        while ( obj.firstChild) obj.removeChild(obj.firstChild);
        obj = null;
    }
    this.createPanelCatégorie = function() {
        
        
        for(i=0; i < this.photos.length; i++) {
            var tabCat = this.photos[i].getCategorie().split(',');
            for(j=0; j< tabCat.length; j++) {
                flag = false; 
                for(k=0; k<this.arrayCat.length; k++) {
                    if(this.arrayCat[k] == tabCat[j]) flag = true;
                }
                if (!flag) this.arrayCat[this.arrayCat.length] = tabCat[j]; 
            }
        }
        
        for(i=0; i<this.arrayCat.length; i++) {
            this.arrayCat[i] = this.arrayCat[i].substr(0,1).toUpperCase() + this.arrayCat[i].substr(1);
            if(this.arrayCat[i].indexOf("Main_") < 0 && this.arrayCat[i].indexOf("General") < 0 ) {
                var bidon = new MenuItem2("categorie"+this.arrayCat[i], this.arrayCat[i], this.panel.menu.menu);
                switch(this.arrayCat[i]) {
                    case "Pave" : bidon.innerHTML = "Les Pavés"; break;
                    case "Patio" : bidon.innerHTML = "Les Murets, Marches et Patios"; break;
                    case "Pierre" : bidon.innerHTML = "Les Pierres Naturelles"; break;
                    case "Plantation" : bidon.innerHTML = "Les Plantations"; break;
                    case "Jardin" : bidon.innerHTML = "Les Jardin d\'eau"; break;
                    default : break;
                
                }
                bidon.diapo = this;
                bidon.onclick = function() { this.diapo.setSelect(this.categorie.toLowerCase()); this.diapo.lblRealisation.innerHTML =  "  "+this.innerHTML+"...  "; diaporama.panel.menu.boutonMenu.obj.pullUp(); }
            }
        }
        var bidon = new MenuItem2("categorieAll", "all", this.panel.menu.menu);
        bidon.innerHTML = "Toutes les réalisations";
        bidon.diapo = this;
        bidon.onclick = function() { this.diapo.setSelect("all"); this.diapo.lblRealisation.innerHTML =  "  "+this.innerHTML+"...  "; }
        this.panel.menu.setGrandeur(140,this.panel.menu.menu.offsetHeight);
        this.panel.menu.setPosition("absolute",30,(this.panel.menu.menu.offsetHeight*-1)+1);
        
        
    }
	
	this.LoadPhoto = function()
	{   
	    var Document;
	    if (isIE())
		{
		   
			Document = new ActiveXObject("Microsoft.XMLDOM");
			Document.async = "false"; 
			Document.load("./diaporama/album/album.xml");
		}
		else
		{
            var xmlhttp = new window.XMLHttpRequest();
            xmlhttp.open("GET","./diaporama/album/album.xml",false);
            xmlhttp.send(null);
            Document = xmlhttp.responseXML;
		}
		
	    var childList = Document.documentElement.childNodes;
            
	    for(i=0; i < childList.length; i++)
	    {   
			var categorieArray= new Array();
			var fileImg = "";
			var posx = 0;
			var posy = 0;
			for(j=0; j < childList[i].childNodes.length; j++)
		    {   
				if (childList[i].childNodes[j].nodeName == "categorie") 
				{
					if (isIE()) categorieArray[categorieArray.length] = childList[i].childNodes[j].text;
					else categorieArray[categorieArray.length] = childList[i].childNodes[j].textContent;
				}
				if (childList[i].childNodes[j].nodeName == "fichier") 
				{
					if (isIE()) fileImg = childList[i].childNodes[j].text;
					else fileImg = childList[i].childNodes[j].textContent;
				}
				if (childList[i].childNodes[j].nodeName == "positionx") 
				{
					if (isIE()) posx = childList[i].childNodes[j].text;
					else posx = childList[i].childNodes[j].textContent;
				}
				if (childList[i].childNodes[j].nodeName == "positiony") 
				{
					if (isIE()) posy = childList[i].childNodes[j].text;
					else posy = childList[i].childNodes[j].textContent;
				}
			}
			if(childList[i].nodeName != "#text")
			{
				var img = new Image();
				var numID = this.photos.length;
				img.src = "./diaporama/album/" + fileImg;
				this.photos[numID] = new photosEcran(numID, categorieArray.toString(), img, posx, posy);
			}
		}
	}

	this.start = function()
	{   
		if (this.imageSelect.length < 1) this.setSelect("general");
		this.permaSwitchBackground();
		this.setTimer(3000); 
	}

	this.stop = function()
	{   this.stopTimer();  }

	this.setSelect = function(selection)
	{ 
	    this.imageSelect = new Array();
	    var j = 0;
	    for (i=0; i < this.photos.length; i++) 
	    {  
	        if (this.photos[i].contain(selection) || selection == "all") 
	        {  
	            this.imageSelect[j] = this.photos[i]; 
	            j++;  
	        }
	    }
	    this.imageNum = 0;
	}

	this.runBackground = function()
	{
	    if (this.transparence == 0) {
	        if ( this.av ) this.goNext();  else this.goBack();
    	    this.switchBackground();
	        this.image.style.visibility = "visible";
	        
        } 
        this.active = true;
        if (this.transparence < 100) {
            this.transparence += 5;
            this.image.style.filter = "alpha(style=0, opacity="+this.transparence+")";
            this.image.style.opacity = (this.transparence/100).toString();
            if (!this.otherRuningScript) this.setTimer(10);
            else if (!this.otherRuningScript.active) this.setTimer(10);
        } else {
            this.active = false;
            this.transparence = 0;
            this.image.style.filter = "alpha(style=0, opacity=0)";
            this.image.style.opacity = "0";
            this.image.style.visibility = "hidden";
            this.permaSwitchBackground();
            this.setTimer(5000);
        }

	}

	this.goNext = function()
	{
	    this.imageNum++;
	    if ( this.imageNum == this.imageSelect.length)
	    {   this.imageNum = 0;  }
	}
	
	this.goBack = function()
	{
	    this.imageNum--;
	    if ( this.imageNum == -1)
	    {   this.imageNum = this.imageSelect.length-1;  }
	}   
	
	this.setTimer = function(temp)
	{
	    
	    if (this.timer != null) this.stopTimer(); 
	    this.timer = setTimeout( function() { diaporama.runBackground() },temp);
	}

	this.stopTimer = function()
	{  
	    clearTimeout( this.timer);
	     this.timer = null;
	}

	this.changeMode = function(mode)
	{
	    var boutonStop = document.getElementById("btnStop");
	    var boutonPlay = document.getElementById("btnPlay");
	    var boutonNext = document.getElementById("btnNext");
	    var boutonBack = document.getElementById("btnBack");

	    if (mode == "play")
	    {  if (!this.play) this.play = true;  }
	    else
	    {  if (this.play) this.play = false;  }

	    if (this.play)
	    {
            this.setTimer(3000);
	        boutonStop.setSelect(false);
	        boutonPlay.setSelect(true);

	        if (this.avance) boutonNext.setSelect(true);
	        else        boutonBack.setSelect(true);

	        boutonStop.title = "Arrêter le Diaporama";
	        boutonStop.alt = "Arrêter le Diaporama";
	        boutonPlay.title = "";
	        boutonPlay.alt = "";
	        if (this.avance) 
	        {
	            boutonBack.title = "Changer la direction de défillement";
	            boutonBack.alt = "Changer la direction de défillement";
	            boutonNext.title = "";
	            boutonNext.alt = "";
	        }
	        else
	        {
	            boutonNext.title = "Changer la direction de défillement";
	            boutonNext.alt = "Changer la direction de défillement";
	            boutonBack.title = "";
	            boutonBack.alt = "";
	        }
	    }    
	    else
	    {
            this.stopTimer();
	        boutonStop.setSelect(true);
	        boutonPlay.setSelect(false);

	        boutonBack.setSelect(false);
	        boutonNext.setSelect(false);

	        boutonStop.title = "";
	        boutonStop.alt = "";
	        boutonPlay.title = "Démarrer le Diaporama";
	        boutonPlay.alt = "Démarrer le Diaporama";
	        boutonBack.title = "Image précédente";
	        boutonBack.alt = "Image précédente";
	        boutonNext.title = "Image Suivante";
	        boutonNext.alt = "Image Suivante";
	    }    
	}

	this.changeDirection = function(direction)
	{
	    var boutonNext = document.getElementById("btnNext");
	    var boutonBack = document.getElementById("btnBack");
	    if (this.play)
	    {
	        if (direction == "avance")
	        {   if (!this.avance) {
	            this.avance = true;  
	            boutonBack.title = "Changer la direction de défillement";
	            boutonBack.alt = "Changer la direction de défillement";
	            boutonNext.title = "";
	            boutonNext.alt = "";
	            }
	        }
	        else
	        {   if (this.avance) {
	            this.avance = false;  
	            boutonNext.title = "Changer la direction de défillement";
	            boutonNext.alt = "Changer la direction de défillement";
	            boutonBack.title = "";
	            boutonBack.alt = "";
	            }
	        }

            if (this.avance)
            {
	             this.av = true;
                boutonNext.setSelect(true);
                boutonBack.setSelect(false);
            }    
            else
            {
	             this.av = false;
                boutonNext.setSelect(false);
                boutonBack.setSelect(true);
            }
	    }
	    else
	    {
	        if (direction == "avance")  this.goNext(); else  this.goBack(); 
            this.permaSwitchBackground();
	    }    
	}

	this.switchBackground = function()
	{   
	    this.image.style.visibility = "visible";
	    this.image.src =  this.imageSelect[this.imageNum].getImageSource();
	    this.image.style.left = this.imageSelect[this.imageNum].getPositionx();
	    this.image.style.top = this.imageSelect[this.imageNum].getPositiony();
	    this.image.title = "Image " + (this.imageNum + 1) + " sur " + this.imageSelect.length;
	}

	this.permaSwitchBackground = function()
	{   
	    this.cellule.style.backgroundImage = 'url(' + this.imageSelect[this.imageNum].getImageSource() + ')';
	    if(isIE()){
	        this.cellule.style.backgroundPositionX = this.imageSelect[this.imageNum].getPositionx();
	        this.cellule.style.backgroundPositionY = this.imageSelect[this.imageNum].getPositiony();
	    } else {
	        this.cellule.style.backgroundPosition = this.imageSelect[this.imageNum].getPositionx() + " " + this.imageSelect[this.imageNum].getPositiony();
	    }
	    this.cellule.title = "Image " + (this.imageNum + 1) + " sur " + this.imageSelect.length;
	}

	this.changeBackground = function(num)
	{   
	    this.cellule.style.backgroundImage = 'url(' + this.photos[num].getImageSource() + ')';
	    if(isIE()){
	        this.cellule.style.backgroundPositionX = this.imageSelect[this.imageNum].getPositionx();
	        this.cellule.style.backgroundPositionY = this.imageSelect[this.imageNum].getPositiony();
	    } else {
	        this.cellule.style.backgroundPosition = this.photos[num].getPositionx() + " " + this.photos[num].getPositiony();
	    }
	    this.cellule.title = "";
	}

	this.getCurrentImage = function()
	{   return this.imageSelect[this.imageNum]; }
		

	this.LoadPhoto();	
	this.createPanelCatégorie();
}

function createDiapo(conteneur) { 
    diaporama = new Diaporama(conteneur);
	diaporama.start(); 
	
}

var diaporama = null;