var mouseX;                         //position de la souris en x
var mouseY;                         //position de la souris en y
var currentEssenceSurvol = null;    //id de l'essence survolée

function Essence(t, p, g) {
    this.title = t;
    this.path = p;
    this.listGamme = g;
}

function Gamme(t, u) {
    this.title = t;
    this.url = u;
}


function locateMouse(e){
  var DocRef;   // Pour IE

  if(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else{
    mouseX = event.clientX;
    mouseY = event.clientY;

    DocRef = (document.documentElement && document.documentElement.clientWidth)?document.documentElement:document.body;

    mouseX += DocRef.scrollLeft;
    mouseY += DocRef.scrollTop;
  }
}

function displayEssence(elmt,display,value){
    
    if(!display && document.getElementById('survol_tonalite_'+elmt.id)){
        var tooltip = document.getElementById('survol_tonalite_'+elmt.id);
        if( (elmt.offsetLeft<=mouseX-10 && mouseX+10<=elmt.offsetLeft+elmt.offsetWidth &&
             elmt.offsetTop<=mouseY-10 && mouseY+10<=elmt.offsetTop+elmt.offsetHeight) ||
             (tooltip.offsetLeft<=mouseX-10 && mouseX+10<=tooltip.offsetLeft+tooltip.offsetWidth &&
             tooltip.offsetTop<=mouseY-10 && mouseY+10<=tooltip.offsetTop+tooltip.offsetHeight)){
            return;
        }
        document.getElementById('survol_tonalite_'+elmt.id).parentNode.removeChild(document.getElementById('survol_tonalite_'+elmt.id));
        currentEssenceSurvol = null;
        document.onmousemove = null;
        return;
    }

    if(currentEssenceSurvol!=null && document.getElementById('survol_tonalite_'+currentEssenceSurvol))
        document.getElementById('survol_tonalite_'+currentEssenceSurvol).parentNode.removeChild(document.getElementById('survol_tonalite_'+currentEssenceSurvol));

    currentEssenceSurvol = elmt.id;
    var div = document.createElement('div');
    div.id='survol_tonalite_'+elmt.id;
    div.className = 'tonalite_essence_survol';
    div.style.left =elmt.offsetLeft+10+'px';

    divContent = document.createElement('div');
    divContent.className = 'tonalite_essence_survol_content';

    divContentRight = document.createElement('div');
    divContentRight.className = 'tonalite_essence_survol_content_right';
    divContentRight.appendChild(document.createElement('div').appendChild(document.createTextNode('Gamme')))
    var divListGamme = null;
    var linkListGamme = null;
    for(indiceGamme in listEssence[value].listGamme){
        divListGamme = document.createElement('div');
        linkListGamme = document.createElement('a');
        divListGamme.className = 'tonalite_essence_survol_item_gamme';
        linkListGamme.appendChild(document.createTextNode(listEssence[value].listGamme[indiceGamme].title));
        linkListGamme.href=listEssence[value].listGamme[indiceGamme].url;
        divListGamme.appendChild(linkListGamme);
        divContentRight.appendChild(divListGamme);
    }

    divBottom = document.createElement('div');
    divBottom.className = 'tonalite_essence_survol_bottom';
    divBottom.appendChild(document.createTextNode(listEssence[value].title));

    divContent.appendChild(divContentRight);
    div.appendChild(divContent);
    div.appendChild(divBottom);

    div._elmt = elmt;
    div._value = value;
    div.onmouseout = function(){
        displayEssence(this._elmt,false,this._value);
    }
    currentEssenceSurvol  = elmt.id;
    document.body.appendChild(div);
    div.style.top =elmt.offsetTop+20-div.offsetHeight+'px';
}

function loadEssence(){
    var div = null;
    var img = null;
    var parent = document.getElementById('tonalite_liste_essence');
    for(var essence in listEssence){
        div = document.createElement('div');
        div.className = 'tonalite_essence';
        div.id = 'essence_'+essence;
        div._id = essence;
        div.onmouseover = function(){
            document.onmousemove = locateMouse;
            displayEssence(this,true,this._id);
        }
        
        div._idVignette = div.id;
        div.onmouseout = function(){
            var idVignette = this._idVignette;
            var realId = this._id;
            displayEssence(document.getElementById(idVignette),false,realId);
        }
        parent.appendChild(div);

        img = document.createElement('img');
        img.src = path+listEssence[essence].path;
        div.appendChild(img);
    }
    var divNoFLoat = document.createElement('div');
    divNoFLoat.className='noFloat';
    parent.appendChild(divNoFLoat);
}

//Tonalité diapo
var $z = jQuery.noConflict();

$z(document).ready( function(){
    $z('#tonalite_diapo_photo').cycle('fade');
});