//<![CDATA[

  var select_perso=function()
  {
    var are_sel=new Array();
    var mouse=new Array();//Indique si la sourie et in ou out du select pour le click_out id_button => out|in
    var key_pos=new Array();
    var max_opt=new Array();//ID select -> ID opt max
    return{
      init:function(i)
      {
	  var id=i;
	  var input_=IDOB("sel_input_"+i);
	  var button=IDOB("sel_but_"+i);
	  var opt_start="sel"+i+"opt";		var id_opts="sel_opts_"+i;
						var id_content="sel_cont_"+i;
	  addEvent(button, "click", function(){ select_perso.click(id)}); select_perso.click(id);
	  addEvent(button, "mouseover", function(){ select_perso.over(id)});
	  addEvent(button, "mouseout", function(){ select_perso.out(id)});
	  addEvent(IDOB(id_opts), "mouseout", function(){ select_perso.out(id)});

	  addEvent(document.body, "click", function(){ select_perso.click_out()});
	  //Definnission du left
	  var left_=find_pos(IDOB("sel"+id)).x;
	  IDOB(id_opts).style.left=left_+"px";

	  for(a=0;IDOB(opt_start+a)!=null;a++)//Liste des options
	  {
	    var opt=IDOB(opt_start+a);
	    addEvent(opt, "click", function(){ select_perso.option_click(this, id_content, id)});
	    addEvent(opt, "mouseover", function(){ select_perso.option_over(this)});
	    addEvent(opt, "mouseout", function(){ select_perso.option_out(this, id_opts)});
	    max_opt[id]=a;
	  }
	  addEvent(input_, "keyup", function(){ select_perso.key_press(window.event, id)});
      },
      over:function(id)
      {
	var obj_button=IDOB("sel_but_"+id);
	var obj_border=IDOB("sel_bord_"+id);
	obj_button.style.borderColor="#4c93f4";
	obj_border.style.borderColor="#4c93f4";
	obj_button.style.backgroundImage="url(/pic/form/sel/over.png)";
	obj_border.style.backgroundImage="url(/pic/form/sel/over.png)";
	mouse[id]="in";
      },
      out:function(id)
      {
	var obj_button=IDOB("sel_but_"+id);
	var obj_border=IDOB("sel_bord_"+id);
	var opts=IDOB("sel_opts_"+id);
	var display=opts.style.display;
	if(display=="none") //Si le menu est deroule on laisse un bodure sombre donc dans le cas ou il n'est pas deroule ou met une bordure claire
	{
	  obj_button.style.borderColor="#AAAAAA";
	  obj_border.style.borderColor="#AAAAAA";
	  obj_button.style.backgroundImage="url(/pic/form/sel/normal.png)";
	  obj_border.style.backgroundImage="url(/pic/form/sel/normal.png)";
	}
	mouse[id]="out";
      },
      click:function(id)
      {
	var sel=IDOB("sel_opts_"+id);
	var display=sel.style.display;
	if(display=="none"){ sel.style.display="block";}else{ sel.style.display="none";}
	IDOB("sel_input_"+id).focus();
      },
      option_click:function(opt, id_content, id)
      {
	var id_opts="sel_opts_"+id;
	//deselection de l'ancinne valeur
	if(are_sel[id_opts]!=null){IDOB(are_sel[id_opts]).style.backgroundColor="white";IDOB(are_sel[id_opts]).style.color="black";IDOB(are_sel[id_opts]).style.fontWeight="normal";}
	are_sel[id_opts]=opt.id;
	IDOB("sel"+id+"_val").value=opt.innerHTML;
	opt.style.backgroundColor="#3f86e7";
	opt.style.color="white";
	opt.style.fontWeight="bold";
	//On applique la valeur au select
	IDOB(id_content).innerHTML=opt.innerHTML;
      },
      option_over:function(obj)
      {
	obj.style.backgroundColor="#7aafe9";
	obj.style.color="white";
	obj.style.fontWeight="bold";
      },
      option_out:function(obj, id_opts)
      {
	if(are_sel[id_opts]!=obj.id)
	{
	  obj.style.backgroundColor="white";
	  obj.style.color="black";
	  obj.style.fontWeight="normal";
	}
	else
	{
	  obj.style.backgroundColor="#3f86e7";
	  obj.style.color="white";
	}
      },
      key_press:function(ev, id)
      {
	var code=keycode(ev);
	if(code==40 || code==38)
	{
	  var new_pos_id;
	  if(code==40)//Down equivaut a +1 en id de l'opt
	  {
	    var key_inc=key_pos[id]+1;
	    if(IDOB("sel"+id+"opt"+key_inc)!=null)
	    {
	      select_perso.option_out(IDOB("sel"+id+"opt"+key_pos[id]), "sel_opts_"+id);
	      new_pos_id=key_pos[id]+1;
	    }
	    else{ new_pos_id=0;	if(key_pos[id]!=null){select_perso.option_out(IDOB("sel"+id+"opt"+key_pos[id]), "sel_opts_"+id);}} //On deselection uniquement si une valeur etait selectionne
	  }
	  else //Up equivaut a -1 utilise max_opt par aller de 0 a max_opt
	  {
	    var key_de=key_pos[id]-1;
	    if(IDOB("sel"+id+"opt"+key_de)!=null)
	    {
	      select_perso.option_out(IDOB("sel"+id+"opt"+key_pos[id]), "sel_opts_"+id);
	      new_pos_id=key_pos[id]-1;
	    }
	    else{ new_pos_id=max_opt[id];	if(key_pos[id]!=null){select_perso.option_out(IDOB("sel"+id+"opt"+key_pos[id]), "sel_opts_"+id);}} //On deselection uniquement si une valeur etait selectionne
	  }
	  key_pos[id]=new_pos_id;
	  //alert("key_pos["+id+"]="+key_pos[id]);
	  select_perso.option_over(IDOB("sel"+id+"opt"+new_pos_id));
	}
	if(code==13)
	{
	  if(key_pos[id]!=null){select_perso.option_click(IDOB("sel"+id+"opt"+key_pos[id]), "sel_cont_"+id, id);	select_perso.click(id);}
	}
      },
      click_out:function()
      {
	for(a in mouse)
	{
	  if(mouse[a]=="out")
	  {
	    IDOB("sel_opts_"+a).style.display="none";
	    select_perso.out(a);
	  }
	}
      }
      
    };
  }();

  function IDOB(id)
  {
    return(document.getElementById(id));
  }

  function addEvent(obj, event, fct)
  {
    if(document.all){obj.attachEvent("on"+event, fct);}
    else{obj.addEventListener(event, fct, true);}
  }

function keycode(ev)
{
  var keycode;
  if(window.event){keycode = window.event.keyCode;}
  else{if(ev){keycode = ev.which;}}
  return(keycode);
}

function find_pos(obj)
{
    var curleft = 0;
      var curtop = 0;
      if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
      }
      return {x:curleft, y:curtop};
}

//]]-->