/********************************************************
*                   Fonctions Utiles                    *
********************************************************/

var arrayOpenedLayer = null;


// Fonction qui permet d'afficher ou de masquer un élément HTML
function DisplayLayer(IdLayer)
{
    var layer = document.getElementById(IdLayer);
    
    if (layer != null)
    {
        if (layer.style.display == '' || layer.style.display == 'none')
        {
            layer.style.display = 'block';
            
            if (layer.className.search("NoCorrectPNG") != -1)
            {
                layer.className = layer.className.replace("NoCorrectPNG", "");
            }

            correctPNG();
        }
        else
        {
            layer.style.display = 'none';           
        }
    }
}

// Fonction qui permet d'afficher ou de masquer un élément HTML
function DisplayLayer(IdLayer,AlwaysOpen, restrictif) {

    
    restrictif= restrictif || false;

    var layer = document.getElementById(IdLayer);

    if (layer != null) 
    {
        if (layer.style.display == '' || layer.style.display == 'none' || AlwaysOpen == true) 
        {       
            layer.style.display = 'block';
            
            if (layer.className.search("NoCorrectPNG") != -1)
            {
                layer.className = layer.className.replace("NoCorrectPNG", "");
            }

            correctPNG();


            if (arrayOpenedLayer != null && restrictif == true) {
                
                if (document.getElementById(arrayOpenedLayer) != null)
                    document.getElementById(arrayOpenedLayer).style.display = 'none';
            }
            
            arrayOpenedLayer = IdLayer;
        }
        else 
        {
            layer.style.display = 'none';
            arrayOpenedLayer = null;
        }
    }
}

// Fonction qui permet de changer la class d'un element HTML
function ChangeClass(layer, Class1, Class2) {

    if (layer != null) {
        if (layer.className == Class1) {
            layer.className = Class2;
        }
        else {
            layer.className = Class1;
        }
    }
}


// Fonction qui permet de changer la class d'un element HTML
function ChangeClassTagInId(IdElement, TagName, Class1) {
    var element = document.getElementById(IdElement);
    var tags = element.getElementsByTagName(TagName);
    for (var i = 0; i < tags.length; i++) 
    {
        var elementTag = document.getElementById(tags[i].id);
        
        if (elementTag.className != Class1) 
        {
            elementTag.className = Class1;
        } 
    }
}

function ChangeClassById(IdElement, Class1, Class2) 
{
    var element = document.getElementById(IdElement);
    ChangeClass(element, Class1, Class2);
}

// fonction qui masque tous les éléments d'une classe donnée, pour les éléments d'un tag donné
function MasquerInfosAction(CSSClass, Tag, Element)
{
    var listeElementsToMask = getElementsByClassName(CSSClass, Tag, Element);
    
    for (var i=0; i<listeElementsToMask.length; i++)
    {
        listeElementsToMask[i].style.display = "none";
    }
}

// Fonction qui récupère tous les éléments d'un tag passé en paramètre, qui ont une classe CSS donnée
function getElementsByClassName(className, tag, elm)
{
    var testClass = new RegExp("(^|s)" + className + "(s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++)
    {
        current = elements[i ];
        if(testClass.test(current.className))
        {
	        returnElements.push(current);
        }
    }
    return returnElements;
}

/********************************************************
*                    MENTIONS                           *
********************************************************/
function togglePanel(toggleAnchor, mutToggleContentId, collapseClass, shrinkClass){
    var o = document.getElementById(mutToggleContentId);
    o.style.display = (o.style.display == 'none' || o.style.display == '') ? 'block' : 'none';
    toggleAnchor.className = (o.style.display == 'none') ? shrinkClass : collapseClass;
    return false;
}

function openPanel(toggleAnchor, mutToggleContentId, collapseClass){
    var o = document.getElementById(mutToggleContentId);
    o.style.display = 'block';
    toggleAnchor.className = collapseClass;
    return false;
}


function displayPanel(mutToggleContentId, collapseClass){
    var o = document.getElementById(mutToggleContentId);
    o.style.display = 'block';
    var i=0;
    while( 
        o.parentNode.childNodes[i].tagName == null 
        || (o.parentNode.childNodes[i].tagName.toLowerCase() != "a" 
        && i<o.parentNode.childNodes.length) ) {
            i++;
    }
    
    o.parentNode.childNodes[i].className = collapseClass;
    return false;
}

/********************************************************
*                    CARACTERISTIQUES                   *
********************************************************/
function etoTabCaracs(linkCaracsId, listCaracsId, nbOnglets)
{
    this.linkCaracsId = linkCaracsId;
    this.listCaracsId = listCaracsId;
    this.nbOnglets = nbOnglets;
}

etoTabCaracs.prototype = 
{
    init:function()
    {
        var TabCaracs = this;
        for (var i=1; i<=this.nbOnglets; i++)
        {
            var Link = document.getElementById(this.linkCaracsId + i);
            var Bloc = document.getElementById(this.listCaracsId + i);
            
            if (Link != null && Bloc != null)
            {
                if (i==1)   // On affiche par défaut le 1er bloc
                {
                    if (Bloc.style.display=="block")
                    {
                        Link.className = "MutToggleShrink MutActif";
                        Bloc.style.display="block";
                    }
                }
                else        //on masque les blocs suivants
                {
                    Link.className = "MutToggleShrink";
                    Bloc.style.display = "none";
                }
                
                Link.onclick=function()
                {
                    TabCaracs.select(this);
                    return false;
                }
                
                Link = null;
                Bloc = null;
            }
        }
    },
    
    select:function(Link)
    {       
        var numLink = Link.id.substring(this.linkCaracsId.length, Link.id.length);
        var Bloc = document.getElementById(this.listCaracsId + numLink);
        if (Bloc != null)
        {
            if (Bloc.style.display != "block")
            {
                Link.className = "MutToggleShrink MutActif";
                Bloc.style.display="block";
            }
            else
            {
                Link.className = "MutToggleShrink";
                Bloc.style.display = "none";
            }
        }
	}
}

/********************************************************
*                    OCS                                *
********************************************************/
function togglePanelImage(toggleAnchor, mutToggleContentId, collapseClass, shrinkClass, imageoffId, imageonId){

    var o = document.getElementById(mutToggleContentId);
    o.style.display = (o.style.display == 'none' || o.style.display == '') ? 'block' : 'none';
    toggleAnchor.className = (o.style.display == 'none') ? shrinkClass : collapseClass;

    var img1 = document.getElementById(imageoffId);
    var img2 = document.getElementById(imageonId);
    img1.style.display = (img1.style.display == 'none' || img1.style.display == '') ? 'block' : 'none';
    img2.style.display = (img1.style.display == 'none' || img1.style.display == '') ? 'block' : 'none';

    return false;
}

/********************************************************
*                   Slide Blocs                         *
********************************************************/

// Effectue une rotation des blocs en bouclant vers la gauche
// NbBlocs => Nombre du blocs entrant dans la boucle
// BaseIdBloc => Tous les blocs de la boucle ont pour Id la forme suivante => BaseIdBloc_1, BaseIdBloc_2
function SlideBundleLeft(NbBlocs, BaseIdBloc, CssClassInvisible)
{
    var tabDiv = new Array();
    var tabDiv2 = new Array();
    
    // Créé un tableau contenant tous les blocs entrant dans la boucle
    // et un tableau contenant tous les contenus des blocs de la boucle
    for (var i = 1; i <= NbBlocs; i++)
    {
        var div = document.getElementById(BaseIdBloc + "_" + i);
       
        if (div != null)
        {
            tabDiv[i] = div;
            tabDiv2[i] = div.innerHTML;
        }
    }
    
    // Effectue une rotation des contenus des blocs affichés
    for (var i = 1; i <= NbBlocs; i++)
    {
        if (i < NbBlocs)
        {
            tabDiv[i].innerHTML = tabDiv2[i + 1];   
        }
        else
        {
            tabDiv[i].innerHTML = tabDiv2[1]
        }
                
        // Correction PNG transparent
        if (tabDiv[i].className.search(CssClassInvisible) == -1)
        {
            var ListeImg = tabDiv[i].getElementsByTagName('img');
            if (ListeImg.length > 0)
            {
                for (var iImg = 0; iImg < ListeImg.length; iImg++)
                {
                    var imgName = ListeImg[iImg].src.toUpperCase();
                    if (imgName.substring(imgName.length - 3, imgName.length) == "PNG")
                    {
                        Correct_Unique_Png(ListeImg[iImg]);
                    }
                }
            }
        }

    }
}

// Effectue une rotation des blocs en bouclant vers la gauche
// NbBlocs => Nombre du blocs entrant dans la boucle
// BaseIdBloc => Tous les blocs de la boucle ont pour Id la forme suivante => BaseIdBloc_1, BaseIdBloc_2
function SlideBundleRight(NbBlocs, BaseIdBloc, CssClassInvisible)
{
    var tabDiv = new Array();
    var tabDiv2 = new Array();
    
    // Créé un tableau contenant tous les blocs entrant dans la boucle
    // et un tableau contenant tous les contenus des blocs de la boucle
    for (var i = 1; i <= NbBlocs; i++)
    {
        var div = document.getElementById(BaseIdBloc + "_" + i);
       
        if (div != null)
        {        
            tabDiv[i] = div;
            tabDiv2[i] = div.innerHTML;
        }
    }
    
    // Effectue une rotation des contenus des blocs affichés
    for (var i = 1; i <= NbBlocs; i++)
    {
        if (i > 1)
        {
            tabDiv[i].innerHTML = tabDiv2[i - 1];
        }
        else
        {
            tabDiv[i].innerHTML = tabDiv2[NbBlocs];
        }

        // Correction PNG transparent
        if (tabDiv[i].className.search(CssClassInvisible) == -1)
        {
            var ListeImg = tabDiv[i].getElementsByTagName('img');
            if (ListeImg.length > 0)
            {
                for (var iImg = 0; iImg < ListeImg.length; iImg++)
                {
                    var imgName = ListeImg[iImg].src.toUpperCase();
                    if (imgName.substring(imgName.length - 3, imgName.length) == "PNG")
                    {
                        Correct_Unique_Png(ListeImg[iImg]);
                    }
                }
            }
        }

    }
}

/********************************************************
*                   Slide Bundle Pack                   *
********************************************************/

//javascript:SlideBundleRight(6, 'LinkBundlePack', 'Invisible');

function SlideBundlePacks(NbPacks, BaseLinkId, BaseBlocId, CssClassInvisible, CssClassActif, CssClassFirst, CssClassBlockPack, CssClassBlockPackActif, CssClassPngTransparent)
{

    this.nbPacks = NbPacks;
    this.baseLinkId = BaseLinkId;
    this.baseBlocId = BaseBlocId;
    this.cssClassInvisible = CssClassInvisible;
    this.cssClassActif = CssClassActif;
    this.cssClassFirst = CssClassFirst;
    this.cssClassBlockPack = CssClassBlockPack;
    this.cssClassBlockPackActif = CssClassBlockPackActif;
    this.CssClassPngTransparent = CssClassPngTransparent;
    this.tabDiv = new Array();
    this.tabDiv2 = new Array();
    this.tabDiv3 = new Array();
    this.tabDiv4 = new Array();
    this.selected = BaseLinkId + "_1";
    
    var slideBundlePacks = this;
    
    // Créé un tableau contenant tous les blocs entrant dans la boucle
    // et un tableau contenant tous les contenus des blocs de la boucle
    for (var i = 1; i <= this.nbPacks; i++)
    {
        var div = document.getElementById(this.baseLinkId + "_" + i);
        var div2 = document.getElementById(this.baseBlocId + "_" + i);

       
        if (div != null && div2 != null)
        {
            this.tabDiv[i] = div;
            this.tabDiv2[i] = div.innerHTML;
            this.tabDiv3[i] = div2;
            this.tabDiv4[i] = div2.innerHTML;
            
            div.onmouseover = function()
            {
                slideBundlePacks.select(this.id);
                return false;
            }
            
            div.onclick = function()
            {
                return false;
            }
        }
    }
    
    slideBundlePacks.select(this.selected);
}                           

SlideBundlePacks.prototype = 
{
    slideDown:function()
    {    
        var FirstBack1 = this.tabDiv2[1];
        var FirstBack2 = this.tabDiv4[1];

        // Effectue une rotation des contenus des blocs affichés
        for (var i = 1; i <= this.nbPacks; i++)
        {       
            if (i < this.nbPacks)
            {
                this.tabDiv[i].innerHTML = this.tabDiv2[i + 1];   
                this.tabDiv2[i] = this.tabDiv2[i + 1];
                this.tabDiv3[i].innerHTML = this.tabDiv4[i + 1];   
                this.tabDiv4[i] = this.tabDiv4[i + 1];
            }
            else
            {
                this.tabDiv[i].innerHTML = FirstBack1;
                this.tabDiv2[i] = FirstBack1;
                this.tabDiv3[i].innerHTML = FirstBack2;   
                this.tabDiv4[i] = FirstBack2;
            }
        }
        
        this.select(this.selected);
    },

    slideUp:function()
    {    
        var LastBack1 = this.tabDiv2[this.nbPacks];
        var LastBack2 = this.tabDiv4[this.nbPacks];
        
        // Effectue une rotation des contenus des blocs affichés
        for (var i = this.nbPacks; i >= 1; i--)
        {
            if (i > 1)
            {
                this.tabDiv[i].innerHTML = this.tabDiv2[i - 1];
                this.tabDiv2[i] = this.tabDiv2[i - 1];
                this.tabDiv3[i].innerHTML = this.tabDiv4[i - 1];   
                this.tabDiv4[i] = this.tabDiv4[i - 1];
            }
            else
            {            
                this.tabDiv[i].innerHTML = LastBack1;
                this.tabDiv2[i] = LastBack1;
                this.tabDiv3[i].innerHTML = LastBack2;   
                this.tabDiv4[i] = LastBack2;
            }
        }

        this.select(this.selected);
    },
    
    PNGCorrection:function(obj)
    {
        // Correction PNG transparent
        if (obj.className.search(this.cssClassInvisible) == -1)
        {
            var ListeImg = obj.getElementsByTagName('img');
            if (ListeImg.length > 0)
            {
                for (var iImg = 0; iImg < ListeImg.length; iImg++)
                {
                    var imgName = ListeImg[iImg].src.toUpperCase();
                    if (imgName.substring(imgName.length - 3, imgName.length) == "PNG")
                    {
                        Correct_Unique_Png(ListeImg[iImg]);
                    }
                }
            }
        }
    },
    
    select:function(id)
    {      
        var idx = parseInt(id.substr(id.length - 1, 1));
    
        //Réinitialisation
        for (var i = 1; i <= this.nbPacks; i++)
        {
            if (this.tabDiv[i].className != this.cssClassFirst)
                if (this.tabDiv[i].className != this.cssClassInvisible)
                    this.tabDiv[i].className = "";
        
            this.tabDiv3[i].className = this.cssClassBlockPack + " " +  this.cssClassInvisible + " " + this.CssClassPngTransparent;
            
            if (i == 1)
            {
                this.tabDiv[i].className = this.cssClassFirst;
            }
        }

        //Set Active class
        if (this.tabDiv[idx].className == this.cssClassFirst)
            this.tabDiv[idx].className = this.cssClassFirst + " " + this.cssClassActif;
        else
            this.tabDiv[idx].className = this.cssClassActif;
            
        this.tabDiv3[idx].className = this.cssClassBlockPack + " " +  this.cssClassBlockPackActif;
        
        this.selected = id;

        correctPNG();
	}
}