var contGauche ;
var hauteurTitre = 50 ;
var widthPrincipal = 1024 ;
var nomImgPrincipal = "atebas-collier-bracelets.jpg"
var compteur = 0 ; // Compteur de visite sur la page principale.

// Valeur pour la durée de l'affichage progressif
var pasProg   = 0.05 ;
var tempsProg = 10;

// Valeur pour la durée de l'affichage progressif
var pasDeg   = 0.05 ;
var tempsDeg = 5;



/**
 *
 *  Fonction d'initialisation, fait trois requete pour recupe les données
 *  nécessaire, et place la fenêtre correctement dans la page
 *    Fonction _placeFenetre();   
 *
 */
function init() {
//alert("init");  
  contGauche =  document.getElementById('conteneur-gauche');
  //ajax('php/getLivdor.php',_dislpayLivDorSuccess);
  //ajax('php/getNews.php',_dislpayNewsSuccess);
  ajax('php/getText.php?section=principal',_dislpayTextSuccess);
  ajax('php/incrementeCompteur.php',_dislpayCompteurSuccess);
  _placeFenetre();
}

/**
 *
 *
 */  
function _placeFenetre() {
  var larg = (document.body.clientWidth); // Largeur de la fenetre actuelle
  var haut = (document.body.clientHeight); // Hauteur de la fenetre actuelle
  widthPrincipal = larg-(190*2)-(10*2) ; // 190 et 10 *2 en moins pour prendre en compte la taille de menu droit et gauche
  var widthMenu = widthPrincipal+(50*2+20) ; // 50*2 +50 pour avoir un décalage sur le bord pour le 800*600
  var paddingMenuLeft = (widthMenu-500)/2 ; // padding pour centrer les menu interne (500 car c'est la largeur du sous menu)
  var paddingMenuRight = (widthMenu-500)/2 ; // padding pour centrer les menu interne
  document.getElementById('principal').style.width = widthPrincipal+"px";
  var lMenu = document.getElementById('menu');
  if (window.navigator.appName == 'Microsoft Internet Explorer') // Problème de marge avec IE et FF donc voila on fait la différence (juste pour IE meme si c'est FF qui bug, mais Opera reagi pareil que FF)
  {
    lMenu.style.width = (widthMenu)+"px"; // width - valPadding, car largeur ==> width + valPadding
  }
  else {
    lMenu.style.width = (widthMenu-paddingMenuLeft)+"px"; // width - valPadding, car largeur ==> width + valPadding
  }
    lMenu.style.padding = "0 0 0 "+paddingMenuLeft+"px";
    lMenu.style.margin = "0 0 0 "+(160-50)+"px";  // Margin pour centrer le menu haut (blanc))
  if (document.images['img-principal']) {
    document.images['img-principal'].height =  haut-70-70;
    largImg = document.images['img-principal'].width ;
    if (largImg > widthPrincipal) {
      document.images['img-principal'].width =  widthPrincipal-10;
      document.images['img-principal'].height = (596/795)*(widthPrincipal-10);
    }
    else {
      var hautImg = document.images['img-principal'].height;
      document.images['img-principal'].width =  (795/596)*hautImg ;
    }
  }  
}

/**
 *
 *
 */
function ajax(url,fonctSuccess,param){
//alert("ajax");
  var xhr = null; 
  if(window.XMLHttpRequest) { // Firefox et autres
    xhr = new XMLHttpRequest();
  } 
	else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false; 
  }
  xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
      fonctSuccess(xhr.responseText,param);
    }
  }
	xhr.open("GET",url,true);
	xhr.send(null);
}

/**
 *
 *
 */
function _dislpayTextSuccess(docJSON,param) {

//alert(docJSON);
//alert(param);
textePresentation = document.getElementById('princ-texte-presentation'); 
//alert(docJSON);
data = eval( "(" + docJSON + ")" );
//alert(data);
//alert(param);
  textePresentation.innerHTML = data.TEXTE.texte ;


  textePresentation = document.getElementById('princ-fond-presentation'); 
  fondPresentation  = document.getElementById('princ-texte-presentation'); 
  var widthImg = document.images['img-principal'].width ;
  
  textePresentation.style.left  = ( (widthPrincipal - (widthImg - 30) ) / 2) + 7+ "px";
  fondPresentation.style.left   = ( (widthPrincipal - (widthImg - 30) ) / 2) + 7 + "px";
  textePresentation.style.width = widthImg - 30 + "px";
  fondPresentation.style.width  = widthImg - 30 + "px";

}


/**
 *
 * Fonction qui va envoyé la requete pour mettre a jour le menu gauche 
 *
 */
function _updateGauche(pNom,labelParent) {
//alert(pNom);
//alert("updateGauche");
  tab = document.getElementsByName('MenuHaut');
  for (i=0 ; i<tab.length ; i++ ) {
    tab[i].style.borderBottom = "1px solid #AAA" ;
    tab[i].style.borderTop = "1px solid #AAA" ;
  }
  div = document.getElementById(pNom);
  div.style.borderBottom = "2px double #AAA"  ;
  div.style.borderTop = "2px double #AAA"  ;
  
  
  buffer  = "<div class='titleSection'>"+labelParent+"</div>" ;
  buffer += "<div class='princ-img-presentation'>";
  buffer += "<center><img src='"+nomImgPrincipal+"' alt='Atebas-creation, createur de colliers, d'atebas, de bracelets, ...' id='img-principal'>";
  buffer += '<div class="princ-fond-presentation"  id="princ-fond-presentation" ></div>';
  buffer += '<div class="princ-texte-presentation" id="princ-texte-presentation"><p>Section : '+labelParent+'</p></div>';  
  buffer += '</center></div>';
  
  document.getElementById('principal').innerHTML = buffer ;
  
  document.getElementById('princ-fond-presentation').style.top   = hauteurTitre + 25 + "px"; 
  document.getElementById('princ-texte-presentation').style.top  = hauteurTitre + 25 + "px"; 
  
  _placeFenetre();
  
  ajax('php/getMenu.php',_updateGaucheSuccess,pNom);
  ajax('php/getText.php?section='+pNom,_dislpayTextSuccess);
}

/**
 *
 *  @Param :
 *    docJSON :
 *      Prend la forme :  MENU:[{menu:{ID:"14",SECTION:"boucle",ENFANT:"0",
 *                        PARENT:"accessoires",LABEL:"Boucles d'oreilles "}}
 */
function _updateGaucheSuccess(docJSON,param) {

//alert(docJSON);
//alert(param);
menuGauche = document.getElementById('menu-gauche');
//alert(docJSON);
  data = eval( "(" + docJSON + ")" );
//alert(data);
//alert(param);
  buffer = data.MENU ;
  texte = "<div class='menu-gauche-section-container'> ";
  for(i=buffer.length-1  ; i >=0 ; i-- ) {
//alert(buffer[i].menu.PARENT);
    if (buffer[i].menu.PARENT == param) {  
      if(buffer[i].menu.ENFANT == 1) {
        texte += '<div id="menu' + i + '" class="menu-gauche-section-deroulant" OnMouseOver="_overMenu(this.id,OverMenuGauche)" OnMouseOut="_outMenu(this.id,OutMenuGauche)"';
        texte += "OnClick='_openCloseMenu(\"containerMenu" + i + "\")'>" 
        texte += buffer[i].menu.LABEL ;
        texte += "</div>" ;
        texte += "<div class='menu-gauche-section-sous-container' id='containerMenu"+i+"'> ";
        for(z=buffer.length-1  ; z >=0 ; z-- ) {
          if (buffer[z].menu.PARENT == buffer[i].menu.SECTION ) {  
            texte += '<div id="sous-menu' + z + '" class="menu-gauche-section-sous" OnMouseOver="_overMenu(this.id,OverMenuGauche)" OnMouseOut="_outMenu(this.id,OutMenuGauche)"';
            texte += "OnClick='_displayCentre(\""+buffer[z].menu.SECTION+"\","+buffer[i].menu.IMG+")'>"  + buffer[z].menu.LABEL ;
            texte += "</div>"
          }
        }
        texte += "</div></div>";
      }
      else {
        texte += '<div id="img' + i + '" class="menu-gauche-section" OnMouseOver="_overMenu(this.id,OverMenuGauche)" OnMouseOut="_outMenu(this.id,OutMenuGauche)"';
        texte += "OnClick='_displayCentre(\""+buffer[i].menu.SECTION+"\","+buffer[i].menu.IMG+")'>" 
        texte += buffer[i].menu.LABEL ;
        texte += "</div>" ;
      } 
    }
  }
//alert("texte : " + texte);
  menuGauche.innerHTML = texte ; 
/*
//alert(data[0].actu.message);

  for(i=data.length-1  ; i>=0 ; i-- ) {
    livDor.innerHTML += "message : " + data[i].actu.message + "<br>" ;
    livDor.innerHTML += "auteur : " + data[i].actu.auteur + "<br>" ;
    livDor.innerHTML += "e-mail : " + data[i].actu.email + "<br><br>" ;
  }

*/
  
}


/**
 *
 *
 */
function _displayCentre(pNom, imgOrText) {
//alert(pNom);
//alert(imgOrText);
  if (imgOrText == 1) {
    ajax('php/getImages.php?section='+pNom,_displayImgCentreSuccess);
  }
  else {
//alert("Partie en cours de construction ... Vous pouvez me joindre à cette adresse : lostaps@hotmail.com , merci");
    ajax('php/getText.php?section='+pNom,_displayTexteCentreSuccess);
  }
}

/**
 * Affichage des images au centre.
 *
 */
function _displayImgCentreSuccess(docJSON) {

texte = document.getElementById('principal');

//alert(docJSON);
  data = eval( "(" + docJSON + ")" );
  data = data.IMG;

//alert(data[0].img.ID);
  buffer = "<div class='titleSection'>"+data[0].img.LABEL+"</div>" ; // LABEL ==> Texte du menu, pour le titre du div principal
  tab = new Array() ;
  for(i=0  ; i<data.length ; i++ ) {
    idImg = "img-"+data[i].img.SECTION+"-"+data[i].img.ID ;
    tab[i] = new Array(idImg,data[i].img.ID); // tableau 2D , on à la position en abscisse , et deux valeurs caracteristiques.
    buffer += "<div class='img'><img height='"+((596/795)*(widthPrincipal-50)/4)+"' id='"+idImg+"' src='" + data[i].img.URL + "' onClick='_displayPopUp(\""+data[i].img.ID+"\",tab,"+i+")' height='200' alt='"+data[i].img.TEXTE+"'></div>";
//buffer += data[i].img.TEXTE + "</div>" ;
  }
//alert(buffer);  
  texte.innerHTML = buffer


}

/**
 * Affichage du texte au centre.
 *
 */
function _displayTexteCentreSuccess(docJSON) {

  texte = document.getElementById('principal');

//alert(docJSON);
  data = eval( "(" + docJSON + ")" );
  data = data.TEXTE;
  texte.innerHTML = data.texte ;
  
}

/**
 *
 *
 */
function _dislpayNewsSuccess(docJSON) {
News = document.getElementById('news-content');
News.innerHTML = "";
//alert(docJSON);
  data = eval( "(" + docJSON + ")" );
  data = data.NEWS;
//alert(data[0].news.ID);
  texte = "" ;
  for(i=data.length-1  ; i>=0 ; i-- ) {
  id = data[i].news.ID
  donnee = data[i].news.DATA
    texte += "<div class='widget-section' id='widget-section"+i+"' onMouseOver='document.getElementById(this.id).style.backgroundColor =\"#EEE\"'"
    texte += "onMouseOut='document.getElementById(this.id).style.backgroundColor =\"#FFF\"'>" ;
    texte += "<div class='widget-section-title'>" ;
    texte += "News " + id + ":" ;
    texte += "</div><div class='widget-section-content'>" ;
    texte += "message : " + donnee ;
    texte += "</div></div>"

  }
//alert(texte);
    News.innerHTML = texte ; 
}


/**
 *
 *
 */
function _dislpayLivDorSuccess(docJSON) {
//alert(docJSON);
livreDor = document.getElementById('livDor-content');
//alert("milieu");
livreDor.innerHTML = "";
//alert("fin");
  data = eval( "(" + docJSON + ")" );
  data = data.LIVDOR ;
//alert(data[1].article);
  texte ="";
  for(i=data.length-1  ; i>=0 ; i-- ) {
    texte += "<div class='widget-section' id='widget-section"+i+"livDor' onMouseOver='document.getElementById(this.id).style.backgroundColor =\"#EEE\"'"
    texte += "onMouseOut='document.getElementById(this.id).style.backgroundColor =\"#FFF\"'>" ;
    texte += "<div class='widget-section-title'>" ;
    texte += "Article " + data[i].article.ID  ;
    texte += "</div><div class='widget-section-content'>" ;
    texte += data[i].article.MESSAGE ;
   // texte += "<br>auteur : " + data[i].article.AUTEUR ;
    texte += "</div>" ;
   // texte += "<div class='widget-section-mail'>" + data[i].article.EMAIL ;
    //texte += "</div>";
    texte += "</div>";
  }
//alert(texte);
  livreDor.innerHTML = texte ;
}


/**
 *
 *
 */
function _openCloseMenu(pId) {
  if (document.getElementById(pId).style.display == 'none' ) {
    _displayById(pId);
  } 
  else if (document.getElementById(pId).style.display == 'block') {
    _eraseById(pId);
  }
  else {
    _displayById(pId);
  }
}



function _overMenu(pId,color) {
  document.getElementById(pId).style.backgroundColor = color ;
}

function _outMenu(pId,color) {
  document.getElementById(pId).style.backgroundColor = color ;
}

function _displayPopUp(pId,param,i) {
  ajax('php/getImage.php?id='+pId,_dislpayImageSuccess,param[i]);
  // changement du précedent et du suivant ici  
  popupSuiv = document.getElementById('popup-suiv');
	popupPrec = document.getElementById('popup-prec');
	if (param[i+1]) {
    popupSuiv.onclick =  function () {_suivPrec(param,i+1);}
	}
	else {
    popupSuiv.onclick =  function () {_suivPrec(param,0);}
  }
  if(param[i-1]) {
    popupPrec.onclick =  function () {_suivPrec(param,i-1);}
  }
  else {
    popupPrec.onclick =  function () {_suivPrec(param,(param.length-1));}
  }
}



/**
 *
 *
 */
function _dislpayImageSuccess(docJSON,id) {
//alert(docJSON);
  data = eval( "(" + docJSON + ")" );
//alert(data.IMG.URL);
	data   = data.IMG
	popupImg     = document.getElementById('popup-img');
	popupContent = document.getElementById('popup-content');
  sourceImage  = document.images[id[0]].src ;
	
  popupImg.innerHTML      = "<img id='img' src='"+ sourceImage +"' style='  border : 1px solid black ; border-right : 2px solid black ; border-bottom : 2px solid black ;' >"
  popupContent.innerHTML  = "<center>"+data.TEXTE+"<br>Le prix de ce produit est de "+data.PRIX+" Euros</center>" ;
	_displayById('transparent');
	_displayById('popup');

// REPLACE FENETRE CENTRE ETC
  img = document.getElementById('img');
  popupPrec = document.getElementById('popup-prec');
  popupSuiv = document.getElementById('popup-suiv');
  var larg = (document.body.clientWidth);
  var haut = (document.body.clientHeight);
  var largImg = document.getElementById('img').width ;
  var hautImg = document.getElementById('img').height;
  if( (haut-60-10)<hautImg ) {
    var img = document.images['img'];
    img.height= haut-60-10;
    hautImg = img.height;
  }  
  
  largImg = img.width ; // aprés resize, recalcul de la largeur.
  hautImg = img.height ; // aprés resize, recalcul de la hauteur.
  popupImg.style.left = ((larg/2)-(largImg/2))+"px" ;
  popupImg.style.top = (60+ ((haut-60)/2 - (hautImg/2)))+"px" ;
  popupSuiv.style.top = (haut/2)+60+"px";
  popupPrec.style.top = (haut/2)-60+"px";
  
  var opMax  = 1 ;
  var opActu = 0;

  _affProgressif(tempsProg, 'img' , opMax, opActu, pasProg);
}

/**
 *
 * 
 *
 */  
function _affProgressif(temps, pIdImg, opMax, opActu, pas) {
var objImg = document.getElementById(pIdImg);
//alert('id = '+pIdImg);
//alert('opActu = '+opActu);
//alert('pas = '+pas);
//alert('temps = '+temps);
//alert('opMax = '+opMax);

opActu   = parseFloat(opActu);
opMax    = parseFloat(opMax);
pas      = parseFloat(pas);
temps    = parseInt(temps);

  if ( (opActu+pas) < opMax ) {
    opActu += pas ;
    var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;   
    if (isIE) {
      objImg.style.filter = "alpha(opacity="+(opActu*100)+");";
    }
    else {
      objImg.style.MozOpacity = opActu ;
      objImg.style.opacity = opActu;
    }
            
    window.setTimeout("_affProgressif('"+temps+"','"+pIdImg+"','"+opMax+"','"+opActu+"','"+pas+"')",temps) ;
  }
}


/**
 *
 * 
 *
 */  
function _affDegressif(temps, pIdImg, opMin, opActu, pas, param, i) {

var objImg = document.getElementById(pIdImg);
//alert('id = '+pIdImg);
//alert('opActu = '+opActu);
//alert('pas = '+pas);
//alert('temps = '+temps);
//alert('opMin = '+opMin);

opActu   = parseFloat(opActu);
opMin    = parseFloat(opMin);
pas      = parseFloat(pas);
temps    = parseInt(temps);

  if ( (opActu-pas) > opMin ) {
    opActu -= pas ;
    var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;   
    if (isIE) {
      objImg.style.filter = "alpha(opacity="+(opActu*100)+");";
    }
    else {
      objImg.style.MozOpacity = opActu ;
      objImg.style.opacity = opActu;
    }
            
    window.setTimeout(function() {_affDegressif(temps,pIdImg,opMin,opActu,pas,param,i)}, temps) ;
  }
  else {
    _suivPrecRequete(param, i);
  }
}


/**
 *
 * 
 *
 */  
function _suivPrec(param,i) {
  opMin = 0 ;
  opActu = 1;
  
  _affDegressif(tempsDeg, 'img' , opMin, opActu, pasDeg, param,i);
}

/**
 *
 * 
 *
 */  
function _suivPrecRequete(param,i) {
  _displayPopUp(param[i][1],param,i)
}






function _erasePopUp() {
  _eraseById('transparent')
  _eraseById('popup')
}

function _eraseById(pId) {
  showhide(pId,'hidden') ;
  _noneBlock(pId,'none') ;
}

function _displayById(pId) {
  showhide(pId,'visible') ;
  _noneBlock(pId,'block') ;
}

function showhide(layer_ref, visibleorhidden) {
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById(layer_ref).style.visibility = visibleorhidden;
  } else if (document.layers) { // Netscape 4
    eval("document." + layer_ref + ".visibility = '" + visibleorhidden + "'");
  } else { // IE 4
    eval("document.all." + layer_ref + ".style.visibility = '" + visibleorhidden + "'");
  }
}

function _noneBlock(layer_ref, noneorBlock) {
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById(layer_ref).style.display = noneorBlock;
  } else if (document.layers) { // Netscape 4
    eval("document." + layer_ref + ".display = '" + noneorBlock + "'");
  } else { // IE 4
    eval("document.all." + layer_ref + ".style.display = '" + noneorBlock + "'");
  }
}

/**
 *
 * Fonction du retour de la requete ajax Compteur
 * 
 */  
function _dislpayCompteurSuccess(docJSON) {
//alert(docJSON);
compteur = docJSON;
document.getElementById('compteur').innerHTML = "Vous &ecirc;tes le "+compteur+"&egrave;me visiteur, merci.";
}