<a class="personPopupTrigger" href="<link to person>" rel="4218,a17bee64-8593-43 6e-a2f8-599a626370df">House, Devon</a> <a class="personPopupTrigger" href="<link to person>" rel="4218,f6434101-15bf-4c 06-bbb2-fbe8c111b948">House, Gregory</a> $(function()

{ var hideDelay = 500; var currentID; var hideTimer = null; // One instance that's reused to show info for the current person var container = $('<div id="personPopupContainer">' + '<table width="" border="0" cellspacing="0" cellpadding="0" align="cent er" class="personPopupPopup">' + '<tr>' + ' <td class="corner topLeft"></td>' + ' <td class="top"></td>' + ' <td class="corner topRight"></td>' + '</tr>' + '<tr>' + ' <td class="left">&nbsp;</td>' + ' <td><div id="personPopupContent"></div></td>' + ' <td class="right">&nbsp;</td>' + '</tr>' + '<tr>' + ' <td class="corner bottomLeft">&nbsp;</td>' + ' <td class="bottom">&nbsp;</td>' + ' <td class="corner bottomRight"></td>' + '</tr>' + '</table>' + '</div>'); $('body').append(container); $('.personPopupTrigger').live('mouseover', function() { // format of 'rel' tag: pageid,personguid var settings = $(this).attr('rel').split(','); var pageID = settings[0]; currentID = settings[1]; // If no guid in url rel tag, don't popup blank if (currentID == '') return; if (hideTimer) clearTimeout(hideTimer); var pos = $(this).offset(); var width = $(this).width(); container.css({ left: (pos.left + width) + 'px', top: pos.top - 5 + 'px' }); $('#personPopupContent').html('&nbsp;'); $.ajax({ type: 'GET',

url: 'personajax.aspx', data: 'page=' + pageID + '&guid=' + currentID, success: function(data) { // Verify that we're pointed to a page that returned the expected results. if (data.indexOf('personPopupResult') < 0) { . $('#personPopupContent').html('<span >Page ' + pageID + ' di d 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 mul tiple ajax // requests out if the server is taking a while. if (data.indexOf(currentID) > 0) { var text = $(data).find('.personPopupResult').html(); $('#personPopupContent').html(text); } } }); container.css('display', 'block'); }); $('.personPopupTrigger').live('mouseout', function() { if (hideTimer) clearTimeout(hideTimer); hideTimer = setTimeout(function() { container.css('display', 'none'); }, hideDelay); }); // Allow mouse over of details without hiding details $('#personPopupContainer').mouseover(function() { if (hideTimer) clearTimeout(hideTimer); }); // Hide after mouseout $('#personPopupContainer').mouseout(function() { if (hideTimer) clearTimeout(hideTimer); hideTimer = setTimeout(function() { container.css('display', 'none'); }, hideDelay); }); }); $(function() { var hideDelay = 500; var currentID;

var hideTimer = null; // One instance that's reused to show info for the current person var container = $('<div id="personPopupContainer">' + '<table width="" border="0" cellspacing="0" cellpadding="0" align="cente r" class="personPopupPopup">' + '<tr>' + ' <td class="corner topLeft"></td>' + ' <td class="top"></td>' + ' <td class="corner topRight"></td>' + '</tr>' + '<tr>' + ' <td class="left">&nbsp;</td>' + ' <td><div id="personPopupContent"></div></td>' + ' <td class="right">&nbsp;</td>' + '</tr>' + '<tr>' + ' <td class="corner bottomLeft">&nbsp;</td>' + ' <td class="bottom">&nbsp;</td>' + ' <td class="corner bottomRight"></td>' + '</tr>' + '</table>' + '</div>'); $('body').append(container); $('.personPopupTrigger').live('mouseover', function() { // format of 'rel' tag: pageid,personguid var settings = $(this).attr('rel').split(','); var pageID = settings[0]; currentID = settings[1]; // If no guid in url rel tag, don't popup blank if (currentID == '') return; if (hideTimer) clearTimeout(hideTimer); var pos = $(this).offset(); var width = $(this).width(); container.css({ left: (pos.left + width) + 'px', top: pos.top - 5 + 'px' }); $('#personPopupContent').html('&nbsp;'); $.ajax({ type: 'GET', url: 'personajax.aspx', data: 'page=' + pageID + '&guid=' + currentID, success: function(data) { // Verify that we're pointed to a page that returned the expected results. if (data.indexOf('personPopupResult') < 0) { $('#personPopupContent').html('<span >Page ' + pageID + ' did

not return a valid result for person ' + currentID + '.<br />Please have your ad ministrator check the error log.</span>'); } // Verify requested person is this person since we could have mult iple ajax // requests out if the server is taking a while. if (data.indexOf(currentID) > 0) { var text = $(data).find('.personPopupResult').html(); $('#personPopupContent').html(text); } } }); container.css('display', 'block'); }); $('.personPopupTrigger').live('mouseout', function() { if (hideTimer) clearTimeout(hideTimer); hideTimer = setTimeout(function() { container.css('display', 'none'); }, hideDelay); }); // Allow mouse over of details without hiding details $('#personPopupContainer').mouseover(function() { if (hideTimer) clearTimeout(hideTimer); }); // Hide after mouseout $('#personPopupContainer').mouseout(function() { if (hideTimer) clearTimeout(hideTimer); hideTimer = setTimeout(function() { container.css('display', 'none'); }, hideDelay); }); }); #personPopupContainer { position:absolute; left:0; top:0; display:none; z-index: 20000; } .personPopupPopup { }

#personPopupContent { background-color: #FFF; min-width: 175px; min-height: 50px; } .personPopupPopup .personPopupImage { margin: 5px; margin-right: 15px; } .personPopupPopup .corner { width: 19px; height: 15px; } .personPopupPopup .topLeft { background: url(../images/personpopup/balloon_topLeft.png) no-repeat; } .personPopupPopup .bottomLeft { background: url(../images/personpopup/balloon_bottomLeft.png) no-repeat; } .personPopupPopup .left { background: url(../images/personpopup/balloon_left.png) repeat-y; } .personPopupPopup .right { background: url(../images/personpopup/balloon_right.png) repeat-y; } .personPopupPopup .topRight { background: url(../images/personpopup/balloon_topRight.png) no-repeat; } .personPopupPopup .bottomRight { background: url(../images/personpopup/balloon_bottomRight.png) no-repeat; } .personPopupPopup .top { background: url(../images/personpopup/balloon_top.png) repeat-x; } .personPopupPopup .bottom { background: url(../images/personpopup/balloon_bottom.png) repeat-x; text-align: center; }