function makeGlosses()
{
  var as = document.getElementsByTagName('a')
  for( var i = 0; i < as.length; i++)
  {
    if (as[i].className == "gloss")
    {
      var g = as[i];
      g.glossTitle = g.title;
      g.title = "";
      g.glossElement = makeGloss(g.innerHTML, g.glossTitle);
      g.onmouseover = function(ev) { glossover(typeof ev == "undefined" ? window.event : ev, this.glossElement ); };
      g.onmouseout = function(ev) { glossout(typeof ev == "undefined" ? window.event : ev, this.glossElement ); };
      g.onmousemove = function(ev) { glossmove(typeof ev == "undefined" ? window.event : ev, this.glossElement ); };
    }
  }
}
function makeGloss(caption, text)
{
  var div = document.createElement('div');
  div.className = "glossPopup";
  div.style.position = "absolute";
  div.style.display = "none";

  var strong = document.createElement('strong');
  div.appendChild(strong);
  strong.appendChild(document.createTextNode(caption));

  var span = document.createElement('span');
  div.appendChild(span);
  span.appendChild(document.createTextNode(text));

  document.body.appendChild(div);
  return div;
}

function glossover(ev, el)
{
  if (typeof el != "undefined")
  {
    el.style.display = "";

    glossmove(ev, el);
  }
}

function glossmove(ev, el)
{
  if (typeof el != "undefined")
  {
    // get current absolute mouseposition
    var x = (ev.clientX + document.documentElement.scrollLeft);
    var y = (ev.clientY + document.documentElement.scrollTop);

    // get size of our page
    var w = (window.innerWidth ? window.innerWidth : document.documentElement.offsetWidth) + document.documentElement.scrollLeft;
    var h = (window.innerHeight ? window.innerHeight : document.documentElement.offsetHeight) + document.documentElement.scrollTop;

    // get the size of our element to be displayed
    var elw = el.offsetWidth;
    var elh = el.offsetHeight

    var xOffset = 10;
    var yOffset = 10;

    if ( (y + el.offsetHeight + yOffset) > h )
    {
      y -= el.offsetHeight;
      yOffset *= -1;
    }

    if ( (x + el.offsetWidth + xOffset) > w )
    {
      x -= el.offsetWidth;
      xOffset *= -1;
    }

    el.style.top = y + yOffset + "px"; 
    el.style.left = x + xOffset + "px"; 
  }
}

function glossout(ev, el)
{   
  if (typeof el != "undefined")
  {
    el.style.display = "none"; 
  }
}

window.onload = function() { makeGlosses(); }