/*
  Sliding Menu (v1.3.1) par Johann Pardanaud (Nesquik69).
  Site du créateur : http://www.plune.fr

  Remerciements à :
    - V@ldun : http://www.valdun.net/

  Licence :
    Ce code est distribué sous les termes de la licence LGPL (http://www.gnu.org/licenses/lgpl.html).
*/

var SlidingMenu = function(targetDiv, direction, speed, fadeLeft, fadeRight) {
  
  if(targetDiv.length > 0) {
    this.targetDiv = document.getElementById(targetDiv);
  } else {
    this.targetDiv = targetDiv;
  }
  
  this.direction = direction;
  
  /* On défini les variables permettant de placer les icônes selon la direction choisie */
    this.marginType = (this.direction == 'left') ? 'marginLeft' : 'marginRight';
    this.childType = (this.direction == 'left') ? 'firstChild' : 'lastChild';
    this.opposedChildType = (this.direction == 'left') ? 'lastChild' : 'firstChild';
    this.siblingType = (this.direction == 'left') ? 'nextSibling' : 'previousSibling';
  /* Fin de la définition des variables */
  
  if(fadeLeft != undefined && fadeRight != undefined) {
    this.fadeLeft = fadeLeft;
    this.fadeRight = fadeRight;
  }
  
  this.speed = 40;
  if(speed != undefined) { this.speed = speed; }
  
  this.imagesWidth = null;
  
  this.timer = null;
  
  this.init();
};

SlidingMenu.prototype.init = function(){
  /* Vérification de la largeur des images (permet aussi de vérifier le téléchargement complet des images) */
    if(this.imagesWidth == null) {
      var objReference = this;
      var targetImgs = this.targetDiv.getElementsByTagName('img');
      var nbrImgs = targetImgs.length;
      var width;
      
      for(var i=0 ; i < nbrImgs ; i++) {
        width = targetImgs[i].width;
        
        for(var j=0 ; j < nbrImgs ; j++) {
          if(targetImgs[j].width != width) {
            if(this.timer == null) {
              this.timer = setInterval(function(){ objReference.init(); }, 1000);
            }
            return false;
          }
        }
      }
      
      this.imagesWidth = width;
      clearInterval(this.timer);
      this.timer = null;
    }
  /* Fin des vérifications des images */
  
  /* Vérification des variables pouvant affecter l'affichage en cas de mauvaise entrée */
    if(this.direction != 'left' && this.direction != 'right') {
      return false; // On renvoi la valeur false en cas de problème.
    }
  /* Fin de la vérification */
  
  /* Réécriture du code HTML */
    var nbrIcons = this.targetDiv.getElementsByTagName('a').length;
    
    if(nbrIcons < 2) {
      return false; // On exige un minimum de 2 icônes pour initialiser le menu.
    }
    
    var targetA = this.targetDiv.getElementsByTagName('a');
    var arrayElementsA = new Array();
    
    for(var i=0 ; i < nbrIcons ; i++) {
      arrayElementsA.push(new Array(
        targetA[i].cloneNode(false),
        targetA[i].getElementsByTagName('img')[0].cloneNode(true)
      ));
    }
    
    this.targetDiv.innerHTML = '';
    
    for(var i=0 ; i < nbrIcons ; i++) {
      var newElement = this.targetDiv.appendChild(arrayElementsA[i][0]);
      newElement.appendChild(arrayElementsA[i][1]);
    }
  /* Fin de la réécriture du code HTML */
  
  /* Mise en place des icônes avec suppression d'éventuels styles gênants */
    // Le tableau qui suit sert à identifier l'image qui possède la plus grande hauteur.
    var arrayHeight = new Array();
    
    var browseElements = this.targetDiv[this.childType];
    browseElements.style.margin = '0px';
    browseElements.style.padding = '0px';
    browseElements.style[this.marginType] = this.imagesWidth + this.imagesWidth / 2 + 'px';
    browseElements.firstChild.style.margin = '0px';
    browseElements.firstChild.style.border = '0px';
    arrayHeight.push(browseElements.firstChild.height);
    
    while(browseElements[this.siblingType] != null) {
      browseElements = browseElements[this.siblingType];
      browseElements.style.margin = '0px';
      browseElements.style.padding = '0px';
      browseElements.style[this.marginType] = this.imagesWidth / 2 + 'px';
      browseElements.firstChild.style.margin = '0px';
      browseElements.firstChild.style.border = '0px';
      arrayHeight.push(browseElements.firstChild.height);
    }
    
    // La condition ci-dessous s'exécute lorsque les fondus n'ont pas été définis.
    if(typeof(this.fadeLeft) == 'undefined' && typeof(this.fadeRight) == 'undefined') {
      this.targetDiv[this.opposedChildType].firstChild.style.opacity = '0';
    }
  /* Fin de la mise en place des icônes */
  
  /* Mise en place des fondus */
    if(typeof(this.fadeLeft) != 'undefined' && typeof(this.fadeRight) != 'undefined') {
      arrayHeight.sort();
      
      var newfadeLeft = document.createElement('div');
        newfadeLeft.style.backgroundImage = 'url("' + this.fadeLeft + '")';
        newfadeLeft.style.backgroundRepeat = 'repeat-y';
        newfadeLeft.style.height = arrayHeight[arrayHeight.length - 1] + 'px';
        newfadeLeft.style.width = this.imagesWidth + this.imagesWidth / 2 + 'px';
        newfadeLeft.style.position = 'absolute';
        newfadeLeft.style.top = '0px';
        newfadeLeft.style.left = '0px';
      this.targetDiv.appendChild(newfadeLeft);
      
      var newfadeRight = document.createElement('div');
        newfadeRight.style.backgroundImage = 'url("' + this.fadeRight + '")';
        newfadeRight.style.backgroundRepeat = 'repeat-y';
        newfadeRight.style.height = arrayHeight[arrayHeight.length - 1] + 'px';
        newfadeRight.style.width = this.imagesWidth + this.imagesWidth / 2 + 'px';
        newfadeRight.style.position = 'absolute';
        newfadeRight.style.top = '0px';
        newfadeRight.style.right = '0px';
      this.targetDiv.appendChild(newfadeRight);
    }
  /* Fin de la mise en place des fondus */
  
  /* Quelques dernières modifications sur le bloc parent */
    this.targetDiv.style.position = 'relative';
    this.targetDiv.style.textAlign = this.direction;
    this.targetDiv.style.padding = '0px';
    this.targetDiv.style.fontFamily = 'Times New Roman';
    
    //Les quatre lignes qui suivent servent à définir une largeur idéale à notre menu.
      this.targetDiv.style.display = 'inline';
      var targetDivWidth = this.targetDiv.offsetWidth;
      this.targetDiv.style.display = 'block';
      this.targetDiv.style.width = targetDivWidth + 'px';
  /* Fin des modifications sur le bloc parent */
  
  // Et enfin, on lance l'animation et on retourne true.
    this.play();
    return true;
};

SlidingMenu.prototype.anim = function(){
  if(this.targetDiv[this.childType].nodeName == 'DIV') {
    this.skipDivs();
  }
  
  var margin = this.targetDiv[this.childType].style[this.marginType];
  margin = margin.substr(0, margin.length - 2);
  
  if(margin > 0) {
    this.targetDiv[this.childType].style[this.marginType] = margin - 1 + 'px';
    
    if(typeof(this.fadeLeft) == 'undefined' && typeof(this.fadeRight) == 'undefined') {
      this.setOpacity(margin);
    }
  }
  else {
    var clonedNode = this.targetDiv[this.childType].cloneNode(true);
    clonedNode.style[this.marginType] = this.imagesWidth / 2 + 'px';
    this.targetDiv.removeChild(this.targetDiv[this.childType]);
    
    if(this.direction == 'left') {
      this.targetDiv.appendChild(clonedNode);
    } else {
      this.targetDiv.insertBefore(clonedNode, this.targetDiv.firstChild);
    }
    
    if(this.targetDiv[this.childType].nodeName == 'DIV') {
      this.skipDivs();
    }
    
    this.targetDiv[this.childType].style[this.marginType] = this.imagesWidth + this.imagesWidth / 2 + 'px';
  }
};

SlidingMenu.prototype.play = function(){
  if(this.timer == null) {
    var objReference = this;
    
    this.timer = setInterval(function(){ objReference.anim(); }, this.speed);
    this.targetDiv.onmouseover = function(){ clearInterval(objReference.timer); };
    this.targetDiv.onmouseout = function(){ objReference.timer = setInterval(function(){ objReference.anim(); }, objReference.speed); };
  }
};

SlidingMenu.prototype.stop = function(){
  clearInterval(this.timer);
  this.targetDiv.onmouseover = null;
  this.targetDiv.onmouseout = null;
  this.timer = null;
};

SlidingMenu.prototype.setOpacity = function(margin) {
  var opacity = margin / (this.imagesWidth + this.imagesWidth / 2);
  
  this.targetDiv[this.childType].firstChild.style.opacity = opacity;
  this.targetDiv[this.childType].firstChild.style.filter = 'alpha(opacity='+ opacity * 100 +')';
  this.targetDiv[this.opposedChildType].firstChild.style.opacity = 1 - opacity;
  this.targetDiv[this.opposedChildType].firstChild.style.filter = 'alpha(opacity='+ (1 - opacity) * 100 +')';
};

SlidingMenu.prototype.skipDivs = function(){
  // Cette fonction permet de "sauter" les fondus afin de ne pas leur attribuer de styles CSS.
  
  while(this.targetDiv[this.childType].nodeName == 'DIV') {
    var clonedNode = this.targetDiv[this.childType].cloneNode(true);
    this.targetDiv.removeChild(this.targetDiv[this.childType]);
    if(this.direction == 'left') {
      this.targetDiv.appendChild(clonedNode);
    } else {
      this.targetDiv.insertBefore(clonedNode, this.targetDiv.firstChild);
    }
  }
};