var ongletCur = null;
var onglets = new Array(); // Liste des onglets (Objet balise <li>)
var texteOnglets = new Array(); // Liste des éléments <div class="onglet"> associé à chaque onglet

/*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");

    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++) {
        oElement = arrElements[i];      
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}

function createElement(type, attr) {
  var elt = document.createElement(type);

  if (attr==null) return elt;

  var eltattr;
  for (var key in attr) {
    eltattr = document.createAttribute(key);
    eltattr.nodeValue = attr[key];
    try {
    	elt.setAttributeNode(eltattr);
    }
    catch(ex) { /* IE n'accepte pas style sous forme de chaine de caracteres */
        setStyle(elt, attr['style']);
    }

  }
  
  return elt;
}

function setStyle(elt, str) {
  var props, array;

  props = str.split(';');

  for (var i=0;i<props.length;i++) {
    array = props[i].split(':');
    if (array.length!=2) continue;
    key = trim(array[0]);
    value = trim(array[1]);

    switch (key) {
      case 'width':
        elt.style.width = '100px';      
	break;
      case 'height':
        elt.style.height = value;    
        break;  
      case 'background-color':
        elt.style.backgroundColor = value;      
      break;
      case 'left':
        elt.style.left = value;      
      break;
      case 'overflow':
        elt.style.overflow = value;      
      break;
      case 'z-index':
        elt.style.zIndex = value;      
      break;
      case 'position':
        elt.style.position = value;      
      break;
      case 'top':
        elt.style.top = value;      
      break;
      case 'margin-top':
        elt.style.marginTop = value;      
      break;
      case 'margin-left':
        elt.style.marginLeft = value;      
      break;

      default:
        alert('La propri\351t\351 de style ' + key + " n'ai pas impl\351ment\351e");
      break;
    }

  }
}

function displayOnglets() {

  // Rechercher l'élément ul dans le div id=onglets
  // Créer la liste des div class=onglet
  // Tourner sur les éléments de la liste
  //   - Récupérer l'élément h2 et son contenu TEXT_H2
  //   - Créer l'item li <li><a id="onglet1" href="#" onClick="">TEXT_H2</a></li>

  var div = document.getElementById('onglets');
  var ul = div.firstChild;

  texteOnglets = getElementsByClassName(document, 'div', 'onglet');
  var h2, h2s, titre, array, div;
  for (var i=0;i<texteOnglets.length;i++) {
    div = texteOnglets[i];
    h2s = div.getElementsByTagName('h2');
    h2 = h2s[0];
    titre = h2.innerHTML;

    createOnglet(ul, titre, i, h2.onclick, h2.id);
    h2.style.display = "none";
    h2.id = "";
  }

  if (onglets.length==0) return;

  // Activer le premier onglet de la liste
  var ieme = 0;
  
  var location = window.location.href;
  var pos = location.indexOf("#");
  if (pos>1) {
      var ancre = location.substring(pos+1, location.length);
      for (var i=0;i<onglets.length;i++) {
	  var titre = onglets[i].id;
	  if (titre==ancre) {
	      ieme = i;
	      break;
	  }
      }
  }

  changeOnglet(onglets[ieme]);
}

function createOnglet(ul, titre, i, onclick, id) {
    var array = new Array();
    //array['id'] = 'li'+i;
    var li = createElement('li', array);
    li.id = id;

    li.onmouseover = function() {ongletHover(li);};
    li.onmouseout = function() {ongletOut(li);};
    if (onclick) li.onclick = onclick;

    array['href'] = "#";
    var a = createElement('a', array);

    a.onclick = function(){ changeOnglet(li); return false;};
    a.appendChild( document.createTextNode(titre) );

    li.appendChild(a);
    ul.appendChild(li);

    onglets.push(li);
}


function changeOnglet(li) {
  if (li==ongletCur) return;

  // Modifier ongletCur
  if (ongletCur!=null) {
    var tmp = ongletCur;
    ongletCur.onmouseover = function() {ongletHover(tmp);};
    ongletCur.onmouseout = function() {ongletOut(tmp);};
    hideOnglet(ongletCur);
  }

  showOnglet(li);

  li.onmouseover = function() {return;};
  li.onmouseout = function() {return;};

  ongletCur = li;
}

function showOnglet(li) {
  ongletHover(li);

  var index = -1;
  for (var i=0;i<onglets.length;i++) {
    if (onglets[i]==li) {
      index = i;
      break;
    }
  }

  var location = window.location.href;
  var ancre = li.id;
  var pos = location.indexOf("#");

  var newLocation = "";
  if (pos==-1) newLocation = location+"#"+ancre;
  else {
      newLocation = location.substring(0, pos);
      newLocation += "#"+ancre;
  }
  window.location.href = newLocation;

  var div = texteOnglets[index];
  div.style.display = "block";
}

function hideOnglet(li) {
  ongletOut(li);

  var index = -1;
  for (var i=0;i<onglets.length;i++) {
    if (onglets[i]==li) {
      index = i;
      break;
    }
  }

  var div = texteOnglets[index];
  div.style.display = "none";
}

function ongletHover(li) {
  li.style.backgroundPosition = "0 -150px";
  li.style.borderWidht = "0";

  var a = li.firstChild;
  a.style.backgroundPosition = "100% -150px";
  //a.style.paddingBottom = "5px";
  a.style.color = "#333";
}

function ongletOut(li) {
  li.style.backgroundPosition = "left top";
  //li.style.borderBottom = "1px solid #765";

  var a = li.firstChild;
  a.style.backgroundPosition = "right top";
  //a.style.paddingBottom = "5px";
  a.style.color = "#333";
}