speed= 10;
pas=10;

/** Cette fonction est appelée au début, elle replace tous les sous menus à une position initiale, elle permet aussi de redéfir certaine propriétés que l'on aura changer pour ie6, voir les adapations à la fin du poste **/

function positionSubMenus() {
	
	var divs= document.getElementsByTagName('div');
	var elt;
	var i;

	for(i=0;i<divs.length;i++) {
		elt=divs.item(i);
		if(elt.className=='sub-menu-box1') {
			elt.style.left="0px";
                        elt.style.top="-200px";
                        elt.style.display="none";
		}
                if(elt.className=='visibility-menu-box1') {
                    elt.style.position= "absolute";
                    elt.style.top="0px";
                }
	}
	
		for(i=0;i<divs.length;i++) {
		elt=divs.item(i);
		if(elt.className=='sub-menu-box2') {
			elt.style.left="0px";
                        elt.style.top="-200px";
                        elt.style.display="none";
		}
                if(elt.className=='visibility-menu-box2') {
                    elt.style.position= "absolute";
                    elt.style.top="0px";
                }
	}
	
		for(i=0;i<divs.length;i++) {
		elt=divs.item(i);
		if(elt.className=='sub-menu-box3') {
			elt.style.left="0px";
                        elt.style.top="-200px";
                        elt.style.display="none";
		}
                if(elt.className=='visibility-menu-box3') {
                    elt.style.position= "absolute";
                    elt.style.top="0px";
                }
	}	
	
		for(i=0;i<divs.length;i++) {
		elt=divs.item(i);
		if(elt.className=='sub-menu-box4') {
			elt.style.left="0px";
                        elt.style.top="-200px";
                        elt.style.display="none";
		}
                if(elt.className=='visibility-menu-box4') {
                    elt.style.position= "absolute";
                    elt.style.top="0px";
                }
	}		
	
}

/** Cette fonction lance l'affichage et le déplacement des sous menus **/

function showSubMenu(menu) {

	var sub_menu= menu.getElementsByTagName('div')[1];
	sub_menu.style.display="block";	

       /** si le sous menu est en position initiale, on le replace juste au dessus de sa zone d'affichage grace à offsetHeigh qui nous sa hauteur **/
      /** On ne le fait qu'une fois, sinon il a tendence à se replacer alors qu'on navigue à l'intérieur **/
        if(sub_menu.style.top=="-200px") sub_menu.style.top=-sub_menu.offsetHeight+"px";

        /** On va se servir de la fonction setInterval, si un menu est déjà en déplacement, on annule d'abord le déplacement en cours avec clearInterval **/
        if(sub_menu.interval) clearInterval(sub_menu.interval);
       
       /** cette syntaxe de setInterval permet de passer des arguments à la fonction répétée et est acceptée par tous les navigateurs **/
        sub_menu.interval= setInterval(function () { move(sub_menu); },speed);

}

function hideSubMenu(menu) {

    var sub_menu= menu.getElementsByTagName('div')[1];
    if(sub_menu.interval) clearInterval(sub_menu.interval);
    sub_menu.interval= setInterval(function () { moveBack(sub_menu); },speed);


}

/** mouvement de descente **/
/** On se sert de la propriété top des sous menus pour les déplacer **/
/** On peut aussi utiliser offsetTop, mais comme il n'est pas interprété de la même facon par tous les navigateurs, j'ai préféré la première solution **/

function move(sub_menu) {
    var top = parseInt(sub_menu.style.top);
    top+=pas;
    if(top>=0) {
        clearInterval(sub_menu.interval);
        top=0;
    }
   
    sub_menu.style.top=top+"px";
}


/** Mouvement de remontée **/

function moveBack(sub_menu) {
    var top=parseInt(sub_menu.style.top);
    top-=pas;
    if(top<=-sub_menu.offsetHeight) {
        clearInterval(sub_menu.interval);
        top=-sub_menu.offsetHeight;
        sub_menu.style.display="none";

    }
    
    
    sub_menu.style.top=top+"px";

}


/** Pour mieux séparer le javascript du html, on insère de facon dynamique les onmouseover et onmouseout au chargement de la page **/

function setHover1() {
	var i;
	var j;
	var divs = document.getElementsByTagName('div');
	var elt;
	for(i=0;i<divs.length;i++) {
	
		elt= divs.item(i);
		if(elt.className=="menu-box1" || elt.className=="cache-select" ) {
			elt.onmouseover = function() { showSubMenu(this); }
			elt.onmouseout = function() { hideSubMenu(this); }
		}
	}
	
	for(i=0;i<divs.length;i++) {
	
		elt= divs.item(i);
		if(elt.className=="menu-box2" || elt.className=="cache-select" ) {
			elt.onmouseover = function() { showSubMenu(this); }
			elt.onmouseout = function() { hideSubMenu(this); }
		}
	}	

	for(i=0;i<divs.length;i++) {
	
		elt= divs.item(i);
		if(elt.className=="menu-box3" || elt.className=="cache-select" ) {
			elt.onmouseover = function() { showSubMenu(this); }
			elt.onmouseout = function() { hideSubMenu(this); }
		}
	}	

	for(i=0;i<divs.length;i++) {
	
		elt= divs.item(i);
		if(elt.className=="menu-box4" || elt.className=="cache-select" ) {
			elt.onmouseover = function() { showSubMenu(this); }
			elt.onmouseout = function() { hideSubMenu(this); }
		}
	}
	
}


function begin() {
    positionSubMenus();
    setHover1();
}


window.onload = begin;