//addEventHandler(window, "load", initSelectBoxes);
var option_height = 15;
var option_visible = 8;

function initSelectBoxes() {
  var sb = document.getElementsByTagName("*");
  for (var i=0; i < sb.length; i++) {
    if (sb[i].getAttribute("id") == "selectbox") {
      initSelectBox(sb[i]);
    }
  }
}

function initSelectBox(node) {
  var box = document.createElement("TABLE");
  box.style.position = "absolute";
  box.style.border = "1px solid #FFFFFF";
  box.style.marginLeft = "157px";
  box.style.width = "220px";
  box.style.top  = 60 - (document.all ? 1 : 0);
  box.cellSpacing = box.cellPadding = 0;
  box.style.cursor = (document.all) ? "hand" : "pointer";
  box.style.zIndex = 3;
  node.onclick = function () { this.options.style.top = getOffsetTop(this) + 21; onClickSelectBox(this.options); }
  var row = box.insertRow(-1);
  var cell = row.insertCell(-1);
  cell.style.border = "1px solid #F96600";
  cell.vAlign = "top";
  cell.style.backgroundColor = "#FFFFFF" ;
  cell.style.height = 1;
  cell.innerHTML = "<img src='/images/1pix.gif' width=1 height=1>";
  document.getElementById("selectboxoptions").appendChild(box);
  cell = cell.appendChild(document.createElement("DIV"));
  cell.style.paddingLeft = "2px";
  box.style.display = "none";
  box.setAttribute("onselectoption", node.getAttribute("onselectoption"));
  var options = window[node.getAttribute("options")];
  var value = node.getAttribute("value");
  for (var i=0; i < options.length; i++) {
    if (value == options[i][0]) {
      node.getElementsByTagName("TD")[1].innerHTML = options[i][1];
    }
    addOption(cell, options[i][1], options[i][0]);
  }

  if (options.length > option_visible) {
    cell.style.height = option_visible * option_height + 2;
   cell.style.overflowY = "scroll";
  }

  addEventHandler(cell, "mouseover", onMouseOverOptions);
  addEventHandler(cell, "mouseout" , onMouseOutOptions);

  node.options = box;
  box.style.display = "block";
  if (box.offsetWidth < node.offsetWidth - 22)
    box.style.width = node.offsetWidth - 22;
  box.style.display = "none";
}

function onMouseOverOptions(e) {
  var t = e.target ? e.target : e.srcElement;
  while (t.className != "option" && t.tagName.toUpperCase() != "TABLE" && t != null) t = t.parentNode;
  if (t && t.className == "option") {
    t.style.backgroundColor = "#00125C";
    t.style.color = "#FFFFFF";
  }
}

function onMouseOutOptions(e) {
  var t = e.target ? e.target : e.srcElement;
  while (t.className != "option" && t.tagName.toUpperCase() != "TABLE" && t != null) t = t.parentNode;
  if (t && t.className == "option") {
    t.style.backgroundColor = "";
    t.style.color = "";
  }
}

function addOption(node, text, value) {
  var option = node.appendChild(document.createElement("DIV"));
  option.style.height = option_height;
  option.innerHTML = text;
  option.className = "option";
  option.setAttribute("value", value);
  addEventHandler(option, "click", onClickOption);
}

function onClickSelectBox (node) {
  if (node.style.display == "none") {
  	var l = document.createElement("IMG");
  	l.src = "/images/1pix.gif";
  	l.id = "blocklayer";
  	l.style.position = 'absolute';
  	l.style.top      = 0;
  	l.style.left     = 0;
  	
  	l.width  = self.document.body.clientWidth;
  	l.height = self.document.body.clientHeight;
  	l.onclick = function () { onClickSelectBox(node)};
    l.style.zIndex = 2;
  	l.style.display = "";
  	self.document.body.appendChild(l);
    node.style.display = "";
  } else {
    node.style.display = "none"
    self.document.body.removeChild(document.getElementById("blocklayer"));
  }
}

function onClickOption (e) {
  var t = e.target ? e.target : e.srcElement;
  while (t.className != "option" && t.tagName.toUpperCase() != "TABLE" && t != null) t = t.parentNode;
  if (t && t.className == "option") {
    var box = t.parentNode;
    while (box.tagName.toUpperCase() != "TABLE") box = box.parentNode;
    onClickSelectBox(box);
    var s = box.getAttribute("onselectoption");
    if (window[s]) window[s](t.getAttribute("value"));
  }
}