var nameBoxId = 'nameBox';
var nameLabelId = 'nameLabel';
var frameBoxId = 'frameBox';

var boxWidth = 80 + 2 * 5; // WIDTH + BORDER

function showName(name, x, y) {
  var bx = document.getElementById(nameBoxId);
  var lb = document.getElementById(nameLabelId);
  
  // Label entfernen
  while (lb.childNodes.length > 0) {
    lb.removeChild(lb.firstChild);
  }
  
  var lbl = document.createTextNode(name);
  lb.appendChild(lbl);
  
  bx.style.top =  (y + 30) + 'px';
  bx.style.left = (x - 100) + 'px';
  
  bx.style.display = 'inline';
}
function hideName() {
  var bx = document.getElementById(nameBoxId);
  bx.style.display = 'none';
}
function showBox(x, y) {
  var bx = document.getElementById(frameBoxId);
  
  var off = Math.floor(boxWidth / 2);
  
  bx.style.top =  (y - off) + 'px';
  bx.style.left = (x - off) + 'px';
  
  bx.style.display = 'inline';
}
function hideBox() {
  var bx = document.getElementById(frameBoxId);
  bx.style.display = 'none';
}