function Combobox(initArgs) {
  this.listSize = 10;

  if (initArgs) this.init(initArgs);
}

Combobox.prototype.init = function (initArgs) {
  for (key in initArgs) {
    this[key] = initArgs[key];
  }

  this.input = document.getElementById(this.inputId);

  var dropdown = document.createElement("select");
  this.dropdown = dropdown;
  dropdown.className = this.input.className;
  dropdown.size = this.listSize;
  dropdown.style.position = "absolute";
  dropdown.style.left = absoluteLeft(this.input) + "px";
  dropdown.style.top = absoluteBottom(this.input) + "px";
  dropdown.style.width = this.input.offsetWidth + "px";
  
  var button = document.createElement("button");
  button.style.position = "absolute";
  button.style.width = 20 + "px";
  button.style.height = this.input.offsetHeight + "px";
  button.style.left = absoluteRight(this.input) - 20 + "px";
  button.style.top = absoluteTop(this.input) + "px";
  button.style.padding = "0";
  
  var self = this;
  button.onclick = function() { self.toggle(); return false; };  
  
  if (this.input.addEventListener) {
    this.input.addEventListener("keypress", function(e) {
      if ((e.keyCode == 38 || e.keyCode == 40) && !e.which) {
	self.show();
	self.dropdown.focus();
      }
    }, false);
  } else {    
    this.input.attachEvent("onkeydown", function(e) {
      if (e.keyCode == 38 || e.keyCode == 40) {
	self.show();
	self.dropdown.focus();
      }
    });			   
  }

  if (this.input.addEventListener) {
    dropdown.addEventListener("keypress", function(e) {
      if (e.keyCode == 13) {
	self.optionSelected();
	e.preventDefault();
      } else if (e.keyCode == 27) {
	self.hide();
	self.input.focus();
      }
    }, false);
  } else {
    dropdown.attachEvent("onkeydown", function(e) {
      if (e.keyCode == 13) {
	self.optionSelected();
      } else if (e.keyCode == 27) {
	self.hide();
	self.input.focus();
      }
    });
  }

  dropdown.onclick = function(e) {
    self.optionSelected();
  }
 
  var img = document.createElement("img");
  img.src = "/static/down-arrow.gif";
  img.style.verticalAlign = "middle";
  button.appendChild(img);

  this.setData(this.data);
  elementInsertAfter(this.input.parentNode, dropdown, this.input);
  elementInsertAfter(this.input.parentNode, button, this.input);

  this.input.style.width = (this.input.offsetWidth - button.offsetWidth - 4) + "px";

  this.hide();
}

Combobox.prototype.optionSelected = function() {
  if (this.onchange) {
    this.onchange(this.data[this.dropdown.selectedIndex]);
  }
  this.input.focus();
  this.hide();
}

Combobox.prototype.setData = function(data) {
  this.data = data;
  this.dropdown.options.length = 0;
  for (var i = 0; i < this.data.length; i++) {
    var o = new Option(data[i].title, data[i].value);
    o.data = data[i];
    this.dropdown[this.dropdown.length] = o;
  }
}

Combobox.prototype.hide = function() {
  this.dropdown.style.visibility = 'hidden';
}

Combobox.prototype.show = function() {
  this.dropdown.style.visibility = '';
}

Combobox.prototype.toggle = function() {
  this.dropdown.style.visibility = this.dropdown.style.visibility == 'hidden' ? '' : 'hidden'; 
  if (this.dropdown.style.visibility == 'hidden') {
    this.input.focus();
  } else {
    this.dropdown.focus();
  }
}