// JavaScript Document
//-- Position d'un element
function getPosition(e){
  	var left = 0;
  	var top  = 0;
  	while (e.offsetParent && e.offsetParent.id != "menu"){
  		left += e.offsetLeft;
  		top  += e.offsetTop;
  		e     = e.offsetParent;
  	}
  	left += e.offsetLeft;
  	top  += e.offsetTop;
  	
  	return {x:left, y:top};
};
var l = 0;
var targetLeft = 0;
var objMoveLeft = 0;
var timer=0;
//--
function addMenuEvent(){
    var menu = document.getElementById('menu');
    
    //-- Parcours des LI
    var ul = menu.firstChild;
    for(var i=0;i<(ul.childNodes.length -2);i++){
        ul.childNodes[i].onclick=function(){
              //alert(ul.tagName);
        };
        ul.childNodes[i].onmouseover=function(event){
              clearTimeout(timer);
			  var coord = getPosition(this);
              //alert(coord.x);
              targetLeft = coord.x;
              
              var objMove = document.getElementById('menu').firstChild.childNodes[7];
              objMove.style.width = parseInt(this.offsetWidth)+"px";
              objMoveLeft = parseInt(objMove.style.left);
              //alert(objMoveLeft);
              if (objMoveLeft>targetLeft){
                  moveD(this,event);
              }else if (objMoveLeft<targetLeft){
                  moveG(this,event);
              }
              
              
        };
    }
};
//--
function moveG(obj,event){
    var objMove = document.getElementById('menu').firstChild.childNodes[7];
    //debug("Move " + objMoveLeft + ":: Target " + targetLeft);
    //-- Tant que left du masque < à left du target, on bouge
    if (objMoveLeft<=targetLeft){
        //alert("Move " + objMoveLeft + ":: Target " + targetLeft);
        objMove.style.left=(objMoveLeft + 20) + "px";
        objMoveLeft = (objMoveLeft + 20);
        if (objMoveLeft>=targetLeft){
            objMove.style.left=targetLeft + "px";
            objMoveLeft = 0;
            clearTimeout(timer);
            return false;
        }
        timer=setTimeout(function(obj,event){ moveG(obj,event); },40);
    }
}

//--
function moveD(obj,event){
    var objMove = document.getElementById('menu').firstChild.childNodes[7];
    //var objMoveLeft = parseInt(objMove.style.left);
    //debug("Move " + objMoveLeft + ":: Target " + targetLeft);
    //-- Tant que left du masque < à left du target, on bouge
    // Vers la droite
    if (objMoveLeft>=targetLeft){
        objMove.style.left=(objMoveLeft - 20) + "px";
        objMoveLeft = (objMoveLeft - 20);
        if (objMoveLeft<targetLeft){
            objMove.style.left=targetLeft + "px";
            objMoveLeft = 0;
            clearTimeout(timer);
            return false;
        }
        timer=setTimeout(function(obj,event){ moveD(obj,event); },40);
    }
}

/*
function debug(t){
    document.getElementById('debug').innerHTML += t+"<br >";
}
*/
//--

//window.onload = function(){
//    addMenuEvent();
//};

if (window.addEventListener){
  window.addEventListener('load', addMenuEvent , false);
} else if (window.attachEvent) { //-- IE
  window.attachEvent('onload', addMenuEvent );
}