jQuery(document).ready(function() {
  var hideDelay = 500;
  var currentID;
  var hideTimer = null;

  // One instance that's reused to show color sample
  var container = $('<div id="colorPopupContainer"><div id="colorPopupContent"></div></div>');

  $('body').append(container);

  $('.colorPopupTrigger').live('mouseover', function() {
    var href = $(this).attr('rel')

    // If no href in tag, don't popup blank
    if (href == '')
      return;

    if (hideTimer)
      clearTimeout(hideTimer);

    var pos = $(this).offset();
    container.css({
      left: pos.left + ($(this).outerWidth() - $(this).width()) / 2 + 'px',
      top: pos.top + $(this).outerHeight() + 5 + 'px'
    });

    $('#colorPopupContent').html('&nbsp;');
        /*if (data.indexOf('personPopupResult') < 0) {
          $('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '. Please have your administrator check the error log.</span>');
        }

        // Verify requested person is this person since we could have multiple ajax
        // requests out if the server is taking a while.
        if (data.indexOf(currentID) > 0) {
          var text = $(data).find('.personPopupResult').html();
          $('#personPopupContent').html(text);
        }*/
    /*$.ajax({
      type: 'GET',
      url: href,
      success: function(data) {
        // Verify that we're pointed to a page that returned the expected results.
        $('#colorPopupContent').html(data);
      }
    });*/
    $('#colorPopupContent').html('<img src="' + href + '" alt="" />');

    container.css('display', 'block');
  });

  $('.colorPopupTrigger').live('mouseout', function() {
    if (hideTimer)
      clearTimeout(hideTimer);
    hideTimer = setTimeout(function() {
      container.css('display', 'none');
    }, hideDelay);
  });

  // Allow mouse over of details without hiding details
  /*$('#colorPopupContainer').mouseover(function() {
    if (hideTimer)
      clearTimeout(hideTimer);
  });*/

  // Hide after mouseout
  $('#colorPopupContainer').mouseout(function() {
    if (hideTimer)
      clearTimeout(hideTimer);
    hideTimer = setTimeout(function() {
      container.css('display', 'none');
    }, hideDelay);
  });
});