fancyMenu.registry = [];

// contstructor
function fancyMenu(titleId, containerId, containerPosRefId) {
  // menu container is shifted by these values when displayed
  this.leftPadding = 0;
  this.topPadding = -1;
  
  this.titleId = titleId;
  this.containerId = containerId;
  this.containerPosRefId = containerPosRefId;
  this.hideTimer = 0;  
  this.visible = false;

  // add a pointer to this menu to a list of all created menus
  fancyMenu.registry[containerId] = this;
}

fancyMenu.prototype.showMenu = function() {
  // clear the close timer for this object, if any
  if (this.hideTimer) {
    window.clearTimeout(this.hideTimer);
    this.hideTimer = 0;
  }
  
  // hide other containers
  for (menu in fancyMenu.registry) {
    if (menu != this.containerId) {
      fancyMenu.hide(menu);
    }
  }
  
  // align the container with the title left border
  fancyMenu.setLeft(this.containerId, fancyMenu.getLeft(this.titleId) + this.leftPadding);
  fancyMenu.setTop(this.containerId, fancyMenu.getTop(this.containerPosRefId) + this.topPadding);

  // show the container
  fancyMenu.show(this.containerId);
}

fancyMenu.prototype.hideMenu = function() {
  if (this.hideTimer) {
    window.clearTimeout(this.hideTimer);
  }
  this.hideTimer = setTimeout("fancyMenu.hide('" + this.containerId + "')", 100);
}

fancyMenu.show = function(id) {
  obj = document.getElementById(id);
  obj.style["visibility"] = "visible";
}

fancyMenu.hide = function(id) {
  obj = document.getElementById(id);
  obj.style["visibility"] = "hidden";
}

fancyMenu.setLeft = function(id, left) {
  obj = document.getElementById(id);
  obj.style["left"] = left + "px";
}

fancyMenu.getLeft = function(id) {
  obj = document.getElementById(id);
  return obj.offsetLeft;
}

fancyMenu.setTop = function(id, top) {
  obj = document.getElementById(id);
  obj.style["top"] = top + "px";
}

fancyMenu.getTop = function(id) {
  obj = document.getElementById(id);
  return obj.offsetTop;
}