var inside=0
var timer;

function bouton(){
        document.getElementsByName("gamme_id")[0].form.style.textAlign="left";
        var i=0;
        while(document.getElementsByName("gamme_id")[0].parentNode.parentNode.childNodes[i].nodeType!=1)i++;
        document.getElementsByName("gamme_id")[0].parentNode.parentNode.childNodes[i].style.display="none";
        document.getElementsByName("gamme_id")[0].parentNode.style.display="none";
        var i=0;
        while(document.getElementsByName("famille_id")[0].parentNode.parentNode.childNodes[i].nodeType!=1)i++;
        document.getElementsByName("famille_id")[0].parentNode.parentNode.childNodes[i].style.display="none"
        document.getElementsByName("famille_id")[0].parentNode.style.display="none"
        var boutons=document.getElementsByTagName("button");
        var nb = boutons.length;
        for (i=0;i<nb;i++)boutons[i].style.display="block";
	var choixgamme=document.createElement("span");
	choixgamme.id="cg";
	//choixgamme.setAttribute("class","choix");
	//choixgamme.style.backgroundColor="#f3cd6a";
	//choixgamme.style.border="solid black 1px";
	choixgamme.style.color="#c10010";
	choixgamme.style.display="block";
	choixgamme.style.size="80%";
	choixgamme.style.overflowX="hidden";
	choixgamme.style.fontSize="12px";
	choixgamme.style.fontWeight="bold";
	
	var choixfamille=document.createElement("span");
	choixfamille.id="cf";
	//choixfamille.setAttribute("class","choix");
	//choixfamille.style.border="solid black 1px";
	//choixfamille.style.backgroundColor="white";
	choixfamille.style.fontSize="12px";
	choixfamille.style.fontWeight="bold";
	choixfamille.style.color="#c10010";
	choixfamille.style.display="block";

	document.getElementsByName("gamme")[0].parentNode.appendChild(choixgamme);
	choixgamme.style.textAlign="center";
	sel=document.getElementsByName("gamme_id")[0];

	choixgamme.appendChild(document.createTextNode(sel.options[sel.selectedIndex].text));
	document.getElementsByName("famille")[0].parentNode.appendChild(choixfamille);
	choixfamille.style.textAlign="center";
	sel=document.getElementsByName("famille_id")[0];

	choixfamille.appendChild(document.createTextNode(sel.options[sel.selectedIndex].text));
}

function appear(obj,bouton){

        clearTimeout(timer);
        sel=document.getElementsByName(obj)[0];
        
        if (document.getElementById("liste1"))document.getElementById("liste1").parentNode.removeChild(document.getElementById("liste1"));
        var div=document.createElement("ul");
        div.setAttribute("id","liste1");
        div.setAttribute("class","liste1");
        bouton.parentNode.appendChild(div);
        //var ul=document.createElement("ul");
        //div.appendChild(ul);
        for (i=0;i<sel.length;i++){
                var element=document.createElement("li");
                element.setAttribute("class","listes");
                var option=document.createTextNode(sel.options[i].text);
                element.appendChild(option);
                element.id=i;

                element.onclick=function (){
                        sel.selectedIndex=this.id;
			switch (bouton.name){
				case 'gamme' : lequel="cg";
						break;
				case 'famille' : lequel="cf";
						break;
			}
			choix=document.getElementById(lequel);
			choix.removeChild(choix.firstChild);
			choix.appendChild(document.createTextNode(sel.options[sel.selectedIndex].text));
                        sel.form.submit();
                        div.parentNode.removeChild(div);
                };

               	element.onmouseover=function(){this.style.background="#feab3f";inside=1;};
               	element.onmouseout=function(){this.style.background="#f3cd6a";inside=0;};


                div.appendChild(element);
        }

div.onmouseout=function (e){
        timer=setTimeout("if (inside<1 && document.getElementById('liste1'))document.getElementById('liste1').parentNode.removeChild(document.getElementById('liste1'));",500)
}


var limite = div.clientHeight-20;
div.style.height="10px"
div.style.overflow="hidden"
descendre (limite)
}

function descendre (limite){
        l=limite;
        if (liste=document.getElementById('liste1')){
        
                var height=parseInt(liste.style.height);
                height+=10;
                liste.style.height=height.toString()+'px';
                if (height<l)setTimeout("descendre(l)",1)
                else liste.style.overflowY="auto"
        }
}