/*

This script uses two variables that are declared on the page itself:
var page - gives the URL of the page and section the footnotes are being pulled from
var section - the piece of the URL that will be removed when the script builds the
footnote popup

styles for the footnote popups are found in the stylesheet inside.css,
called div.note

*/

$(document).ready(function(){
   $("#footnotes").load(page);


$("sup a").mouseover(
 function (e) {

 var content = $(this).attr("href");
 content = content.replace(section,'');
 text = $("li#" + content).html();

 // create popup div w/footnote content inside it

 $("body").append("<div class=\"note\">"+text+"</div>");

$("div.note").css({left:e.pageX-100, top:e.pageY-30});


});

/* hide the footnote when mouse leaves it.  Because the
 footnotes are created dynamically each time a link is hovered over, the
 ("div.note").mouseout function doesn't seem to work with them.  Thus, I
 have to do this backwards, instead of firing when the mouse leaves the
 footnote div, I fire when the mouse enters the content div.
 (which it does when it leaves the footnote div)
*/
 

$("body div.outside").mouseenter(function () {
$("div.note").remove();
});


  });