$(document).ready(function() {
 // addHint moved out of the .ready function to accommodate dynamic content.
 // can be called directly and/or in the .ready function.
 addHint();
});

var to = null;
var timerRunning = false;

function addHint(){
  mouseeX = 0;
  mouseY = 0;

  $('[alt]').each(function(){
  // Build hint from image and parent link titles.  Not sure which titles
  // will take precedence, so we'll use them all for now. . .
  var tag = "";
  if ($(this).attr('alt') != undefined){
    tag = tag + " " + $(this).attr('alt');
    }
  if ($(this).attr('title') != undefined){
    tag = tag + " " + $(this).attr('title');
    }
  if ($(this).parent().attr('title') != undefined){
    tag = tag + " - " + $(this).parent().attr('title');
    }
  // Create hint <div> and add generated hint to the new <div>
  $(this).parent().append('<div class="hint">' + tag + '</div>');
  //Clean up titles and alts to avoid collisions.
  $(this).parent().removeAttr('title');
  $(this).removeAttr('alt').removeAttr('title');
  });

  $('[title]').each(function(){
  var currtag = "";
  if ($(this).attr('title') != undefined){
    currtag = currtag + $(this).attr('title');
    }
  $(this).after('<div class="hint">' + currtag + '</div>');
  $(this).removeAttr('title');
  });

  $('.hint').prev().hover(
    function(e) {
      if (timerRunning){
        clearTimeout(to);
        timerRunning = false;
      }
      mouseX = e.pageX;
      mouseY = e.pageY;
      t = $(this);
      to = setTimeout('display(t)', 500);
      timerRunning = true;
    },
    function() {
    clearTimeout(to);
    timerRunning = false;
    $('.hint').hide();
    }
  );
};

function display(t){
  //var height = $(t).next().height() + 5;
  //var width = $(t).next().width() + 5;
  var leftVal = (mouseX+10) + 'px';
  var topVal = (mouseY) + 'px';
  $(t).next().css({left: leftVal, top: topVal}).show();
};