function setInfo(title, text) {
  var box = document.getElementById('infobox');
  box.innerHTML = '<div><h1>' + title + '</h1>' + text + '</div>';

  box.style.width  = '180px';
  box.style.left   = '0';
  box.style.bottom = (document.all ? '0px' : -window.pageYOffset + 'px');
}

function resetInfo(title, text) {
  var box = document.getElementById('infobox');
  box.innerHTML = '<!-- Place Holder -->';  
}

function getComment(node) {
  if (node.nodeType == 8) {
    return node.nodeValue;
  } else if (node.childNodes != null) {
    for (var i=0; i < node.childNodes.length; i++) {
      if(node.childNodes.item(i).nodeType == 8) return node.childNodes.item(i).nodeValue;
    }
  }
  return '';
}

function initInfoBox() {
  var forms  = document.getElementsByTagName('form');
  for(f = 0; f < forms.length; f++) {
    var inputs = forms[f].elements;
    for(i = 0; i < inputs.length; i++) {
      inputs[i].onfocus = function() { 
        var labels = this.parentNode.getElementsByTagName('label');
        if(labels[0]) {
          var text   = getComment(this.parentNode);
          var title  = labels[0].innerHTML.replace(/:/, '');
          title = title.replace(/<.*>/, '');
          if(text) setInfo(title, text);
        }
      }
      inputs[i].onblur  = function() { resetInfo(); }
    }
  }
}