function offsetPosition(element) {
  var offsetLeft = 0, offsetTop = 0;
  do {
    offsetLeft += element.offsetLeft;
    offsetTop  += element.offsetTop;
  } while (element = element.offsetParent);
  return [offsetLeft, offsetTop];
}

function comboBox(id, form_name, name, class_item, class_item_h, src_left, src_center, src_right, src_left_h, src_center_h, src_right_h) {
  this.obj = document.getElementById(id);
  this.input = document.createElement('input');
  this.input.name = name;
  this.input.type = 'hidden';
  if (form_name) { document.forms[form_name].appendChild(this.input); }
  this.class_item = class_item;
  this.class_item_h = class_item_h;
  this.src_left = src_left;
  this.src_center = src_center;
  this.src_right = src_right;
  this.src_left_h = src_left_h;
  this.src_center_h = src_center_h;
  this.src_right_h = src_right_h;

  var tr, td;
  this.tbl = document.createElement('table');
  this.tbl.border = 0;
  this.tbl.cellSpacing = 0;
  this.tbl.cellPadding = 0;
  this.tbl.style.width = '100%';
  this.tbl.cb = this;
  tr = this.tbl.insertRow(this.tbl.rows.length);
  td = tr.insertCell(tr.cells.length);
  this.img_left = document.createElement('img');
  this.img_left.src = this.src_left ? this.src_left : 'images/cb_left.gif';
  td.appendChild(this.img_left);
  this.td = tr.insertCell(tr.cells.length);
  this.td.className = this.class_item;
  this.td.style.background = 'url(\'' + (this.src_center ? this.src_center : 'images/cb_center.gif') + '\') repeat-x';
  this.td.style.width = '100%';
  td = tr.insertCell(tr.cells.length);
  this.img_right = document.createElement('img');
  this.img_right.src = this.src_right ? this.src_right : 'images/cb_right.gif';
  td.appendChild(this.img_right);
  this.tbl.onmouseover = this.mouseover;
  this.tbl.onmouseout = this.mouseout;
  this.tbl.onmousedown = this.mousedown;
  this.obj.appendChild(this.tbl);

  this.backDiv = document.createElement('div');
  this.backDiv.cb = this;
  this.backDiv.style.position = 'absolute';
  this.backDiv.style.zIndex = 9;
  this.backDiv.style.left = 0;
  this.backDiv.style.top = 0;
  this.backDiv.style.display = 'none';
  this.backDiv.onclick = this.deactivate;
  this.obj.appendChild(this.backDiv);

  this.div = document.createElement('div');
  this.div.cb = this;
  this.div.style.position = 'absolute';
  this.div.style.zIndex = 10;
  this.div.style.width = this.tbl.clientWidth;
  this.div.style.border = '1px #444444 solid';
  this.div.style.display = 'none';
  this.div.style.overflowX = 'hidden';
  this.div.style.overflowY = 'auto';
  this.items_tbl = document.createElement('table');
  this.items_tbl.border = 0;
  this.items_tbl.cellSpacing = 0;
  this.items_tbl.cellPadding = 0;
  this.items_tbl.style.width = '100%';
  this.div.appendChild(this.items_tbl);
  this.obj.appendChild(this.div);

  this.items = new Array();
  
  return this;
}

comboBox.prototype.addItem = function(value, text, selected) {
  var item = new comboBoxItem(value, text);
  this.items[this.items.length] = item;
  var tr, td;
  tr = this.items_tbl.insertRow(this.items_tbl.rows.length);
  td = tr.insertCell(tr.cells.length);
  td.cb = this;
  td.item = item;
  td.className = this.class_item;
  td.appendChild(document.createTextNode(text));
  td.onmouseover = this.itemmouseover;
  td.onmouseout = this.itemmouseout;
  td.onmousedown = this.itemmousedown;
  if ((this.items.length == 1) || (selected)) { this.selectItem(item); }
}

comboBox.prototype.selectItem = function(item) {
  this.input.value = item.value;
  while (this.td.childNodes.length > 0) { this.td.removeChild(this.td.childNodes[0]); }
  this.td.appendChild(document.createTextNode(item.text));
  this.hideDiv();
}

comboBox.prototype.showDiv = function() {
  this.backDiv.style.width = document.body.clientWidth + 'px';
  this.backDiv.style.height = document.body.clientHeight + 'px'; 
  this.backDiv.style.display = 'block';
  pos = offsetPosition(this.tbl);
  this.div.style.left = pos[0] + 'px';
  this.div.style.top = pos[1] + this.tbl.clientHeight + 'px';
  this.div.style.width = this.tbl.clientWidth + 'px';
  if (this.items.length > 10) { this.div.style.height = '120px'; }
  this.div.style.display = 'block';
}

comboBox.prototype.hideDiv = function() {
  this.div.style.display = 'none';
  this.backDiv.style.display = 'none';
}

comboBox.prototype.mouseover = function() {
  cb = this.cb;
  cb.img_left.src = cb.src_left_h ? cb.src_left_h : 'images/cb_left_h.gif';
  cb.td.style.background = 'url(\'' + (cb.src_center_h ? cb.src_center_h : 'images/cb_center_h.gif') + '\') repeat-x';
  cb.img_right.src = cb.src_right_h ? cb.src_right_h : 'images/cb_right_h.gif';
}

comboBox.prototype.mouseout = function() {
  cb = this.cb;
  cb.img_left.src = cb.src_left ? cb.src_left : 'images/cb_left.gif';
  cb.td.style.background = 'url(\'' + (cb.src_center ? cb.src_center : 'images/cb_center.gif') + '\') repeat-x';
  cb.img_right.src = cb.src_right ? cb.src_right : 'images/cb_right.gif';
}

comboBox.prototype.mousedown = function() {
  this.cb.showDiv();
}

comboBox.prototype.deactivate = function() {
  this.cb.hideDiv();
}

comboBox.prototype.itemmouseover = function () {
  this.className = this.cb.class_item_h;
}

comboBox.prototype.itemmouseout = function () {
  this.className = this.cb.class_item;
}

comboBox.prototype.itemmousedown = function () {
  cb = this.cb;
  cb.selectItem(this.item);
}


function comboBoxItem(value, text) {
  this.value = value;
  this.text = text;
}