var imageDivID = "mouseoverImage";

function showStaffImage(short_name, displayBelowThisObject) {
  displayBelowThisObject.style.backgroundColor = "#f0f0f0";
  displayBelowThisObject.style.color = "#774400";
  displayBelowThisObject.style.cursor = "default";
  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;

  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }
  
  x = x + 135;
  y = y - 100;
  
  if (!document.getElementById(imageDivID)) {
    // don't use innerHTML to update the body, because it can cause global variables
    // that are currently pointing to objects on the page to have bad references
    var newNode = document.createElement("div");
    newNode.setAttribute("id", imageDivID);
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }

  var imageDiv = document.getElementById(imageDivID);
  imageDiv.style.position = "absolute";
  imageDiv.style.left = x + "px";
  imageDiv.style.top = y + "px";
  imageDiv.style.visibility = (imageDiv.style.visibility == "visible" ? "hidden" : "visible");
  imageDiv.style.display = (imageDiv.style.display == "block" ? "none" : "block");
  imageDiv.style.zIndex = 10000;

  var html = "<img src=\"/boulderhigh/images/photos/" + short_name + ".jpg\">";
  imageDiv.innerHTML = html;
}

function closeStaffImage(displayBelowThisObject) {
  displayBelowThisObject.style.backgroundColor = "white";
  displayBelowThisObject.style.color = "black";
  var imageDiv = document.getElementById(imageDivID);
  if (imageDiv != null) {
    imageDiv.style.visibility = "hidden";
    imageDiv.style.display = "none";
  }
}