/*
      CUSTOM STYLED DROP DOWN
  ================================

  You  should  use standart  "select"  object 
  with  some name like "test", also it should 
  have defined "styled" class like:

    .styled {
      display: none;
    }

  The only thing you need to implement is the 
  following styles:

    .div_select                 - top level div style;
    .div_selected_node          - selected option div style;
    .div_selected_node_disabled - when option is not selected;
    .div_select_popup           - popup div style;
    .div_select_popup_node      - popup node div style;
    .div_select_popup_node_over - popup node over div style;

    .test                       - .div_select style override (optional)
    (name is same as in select object)
   
  To init drop downs you should paste to your 
  page following code:  

    window.onload = SCDropDown.init; or SCDropDown.init();
*/

key_chars = 'abcdefghijklmnopqrstuvwxyz';
var SCDropDown = {  
  init: function() {                        
    try {
      var inputs = document.getElementsByTagName("select"), i;
      for(i = 0; i < inputs.length; i++)
        if(inputs[i].className == "styled")
          SCDropDown.div_select_init(inputs[i]);
    }
    catch (e){}

    if (document.all) 
      document.onclick = SCDropDown.window_click;  
    else { 
      window.captureEvents(Event.CLICK);
      window.onclick = SCDropDown.window_click;
    }
  },
  
  div_select_init: function(select) {
    var div_select = document.getElementById("div_select_" + select.name);
    if (div_select) 
      var div_select_exists = true;

    if (div_select_exists)
      div_select.innerHTML = "";
    else {
      div_select           = document.createElement("div"); 
      div_select.className = "div_select " + select.name;
      div_select.id        = "div_select_" + select.name;
      div_select.select    = select;  
      select.div_select    = div_select;
    }

    var selected_option = select.options[select.selectedIndex];

    var div_selected_node            = document.createElement("div");
    div_selected_node.id             = "div_selected_" + select.name;
    div_selected_node.className      = "div_selected_node" + (select.selectedIndex == 0?"_disabled":"");
    div_selected_node.tabIndex       = select.tabIndex;
    div_selected_node.owner          = div_select;
    div_selected_node.style.cursor   = "default";
    div_selected_node.node_get       = SCDropDown.div_selected_node_popup_node_get;
    div_selected_node.set            = SCDropDown.div_selected_node_set;
    div_selected_node.onclick        = SCDropDown.div_selected_node_click;
    div_selected_node.onkeydown      = SCDropDown.div_selected_node_onkeydown;
    div_selected_node.div_popup_get  = SCDropDown.div_selected_node_popup_get;
    div_select.selected_node         = div_selected_node;
    div_selected_node.appendChild(document.createTextNode(selected_option.text));
  
    div_select.appendChild(div_selected_node);

    SCDropDown.div_select_popup_init(div_selected_node);    
 
    if (div_select_exists) 
      document.getElementById(select.name.replace('_hidden', '')).value = selected_option.value;
    else {
      var input   = document.createElement("input");
      input.type  = "hidden";
      input.id    = select.name.replace('_hidden', '');
      if (select.name.indexOf('_hidden')!=-1)
        input.name  = select.name.replace('_hidden', '');
  
      input.value = selected_option.value;

      select.parentNode.insertBefore(div_select, select);
      if (select.form)
        {select.form.appendChild(input)}
      else
        div_select.parentNode.insertBefore(input, div_select);  
      div_select.input = input;  
    }
  },

  div_select_popup_init: function(div_selected_node) {
    var div_select_popup               = document.createElement("div");
    div_select_popup.className         = "div_select_popup";
    div_select_popup.id                = "div_select_popup_" + div_selected_node.owner.select.name;
    div_select_popup.selected_node     = div_selected_node;
    div_select_popup.highlighted_index = div_selected_node.owner.select.selectedIndex;
    div_select_popup.open              = SCDropDown.div_select_popup_open;
    div_select_popup.close             = SCDropDown.div_select_popup_close;
    div_select_popup.onchange          = SCDropDown.div_select_popup_onchange;

    var options = div_selected_node.owner.select.options, div_popup_node, i;
    for(i = 0; i < options.length; i++) {
      div_popup_node               = document.createElement("div");
      div_popup_node.className     = "div_select_popup_node" + (div_selected_node.owner.select.selectedIndex==i?"_over":"");
      div_popup_node.id            = "option_" + i + "_" + div_selected_node.owner.select.name;      
      div_popup_node.index         = i;
      div_popup_node.style.cursor  = "default";
      div_popup_node.div_popup     = div_select_popup;
      div_popup_node.onclick       = SCDropDown.div_popup_node_click;
      div_popup_node.onmouseover   = SCDropDown.div_popup_node_mouseover;
      div_popup_node.onmouseout    = SCDropDown.div_popup_node_mouseout;
      div_popup_node.highlight_set = SCDropDown.div_popup_node_highlight_set;
      div_popup_node.appendChild(document.createTextNode(options[i].text));     

      div_select_popup.appendChild(div_popup_node);
    }

    div_selected_node.owner.appendChild(div_select_popup);
  },

  div_selected_node_click: function() {
    var div_popup = this.div_popup_get();
    if (div_popup.IsOpened)
      div_popup.close();
    else
      div_popup.open();
  },
  
  div_selected_node_onkeydown: function(ae) {
    var e         = (document.all?event:ae);
    var div_popup = this.div_popup_get();
    var node      = this.node_get();

    if (e.keyCode == 9/*Tab*/)
        div_popup.close();

    if (e.keyCode == 38/*Up*/)
      this.set(this.owner.select.selectedIndex - 1);

    if (e.keyCode == 40/*Down*/)
      this.set(this.owner.select.selectedIndex + 1);

    if (e.keyCode == 13/*Enter*/) {
      this.set(div_popup.highlighted_index);
      div_popup.close();
    }

    if ((e.keyCode >= 65) && (e.keyCode <= 90)) 
    {
      var nodes       = div_popup.getElementsByTagName('div');
      var key_char    = key_chars.charAt(e.keyCode - 65);
      var start_index = (node.index < nodes.length - 1?node.index + 1:0);
      for (var i = start_index; i < nodes.length; i++) 
      {
        if (i == node.index)
          return;

        if (nodes[i].innerHTML.charAt(0).toLowerCase() == key_char) {
          this.set(nodes[i].index);
          return; 
        }

        if (i == nodes.length - 1)
          i = 0;
      }
    }
  },

  div_selected_node_popup_get: function () {
    return this.parentNode.getElementsByTagName("div")[1];
  },

  div_selected_node_set: function (index) {
    var select = this.owner.select; 
    if ((index < 0) || (index > select.options.length - 1))
      return;

    var node = this.node_get();
    node.highlight_set(false);

    select.selectedIndex = index;    

    document.getElementById(select.name.replace('_hidden', '')).value = select.options[index].value;          
    this.className = "div_selected_node" + (index == 0?"_disabled":"");
    this.innerHTML = select.options[index].text;

    var node = this.node_get();    
    node.highlight_set(true);

    this.div_popup_get().onchange();
  },

  div_selected_node_popup_node_get: function () {
    var select = this.owner.select;
    var popup  = this.div_popup_get();
    return popup.childNodes[select.selectedIndex];
  },

  div_select_popup_open: function () {
    var options = this.getElementsByTagName("div"), i;
    for (i = 0;i < options.length; i++)
      options[i].highlight_set(options[i].index == 
        this.selected_node.owner.select.selectedIndex);

    this.selected_node.owner.style.zIndex = 50;

    this.style.display = "block";
    this.IsOpened      = true;
  },

  div_select_popup_close: function () {
    this.selected_node.owner.style.zIndex = 1;

    this.style.display = "none";
    this.IsOpened      = false;
  },

  div_select_popup_onchange: function () {
    var select = this.selected_node.owner.select;
    try {
      if (select.onchange)
        select.onchange();
    }
    catch (e) {}
  },

  div_popup_node_mouseover: function () {
    if (this.div_popup.IsOpened)
    {
      var selected_node = this.div_popup.selected_node.node_get();
      selected_node.highlight_set(false);
      this.highlight_set(true);
    }
  },

  div_popup_node_mouseout: function () {
    if (this.div_popup.IsOpened)
      this.highlight_set(false);
  },
  
  div_popup_node_click: function() {
    var selected_node = this.div_popup.selected_node;
    if (selected_node.owner.select.selectedIndex != this.index)
      selected_node.set(this.index);

    this.div_popup.close();
  },

  div_popup_node_highlight_set: function (highlight) {
    this.className = "div_select_popup_node" + (highlight?"_over":"");
    if (highlight)
      this.div_popup.highlighted_index = this.index;
  },

  window_click: function(ae) {
    var e = (ae ? ae : window.event);  
    var element = (e.srcElement ? e.srcElement : e.target); 
    var select_list = document.getElementsByTagName('SELECT');

    for(i = 0; i < select_list.length; i++) {
      var select = select_list[i];
      if ((select.className == "styled") && (!element.id || (element.id.indexOf(select.name) == -1)))
        select.div_select.selected_node.node_get().div_popup.close();
    }
  }
}