//  Pop-up footnotes by gathering text from bottom of page and inserting it into a floating box next to the footnote when the mouse is hovering. Would like a defualt size, and an option to set a size for larger amounts of text.
/*  Footnote naming convention is coming from Microsoft Word documents that were saved as HTML. Need to modify such documents as follows:
    • search/replace name= to id=
    • add class="MsoFootnoteReference" to footnote "a" tags
  
*/

// Function: load()
// Called by HTML body element's onload event when the web application is ready to start. See last line of this file.
function init()
{
//  Add functionality to footnote links for revealing the footnote in a pop-up: mouse over and mouse out.

// All links whose class = MsoFootnoteReference
  var aLinkNodes = document.getElementsByTagName('a');
  for (var count=0; count < aLinkNodes.length; count++) {
    if (aLinkNodes[count].className == "MsoFootnoteReference") {
      aLinkNodes[count].addEventListener("mouseover", show_footnote, false);
      aLinkNodes[count].addEventListener("mouseout", hide_footnote, false);
    }
  }
}

function show_footnote () {
  var aLinkHref= this.href;  //  need to split at #
  if (aLinkHref != null) {// Is this a link with an href?
    var footnoteName= aLinkHref.split("#")[1];
    var footnotePopupName= footnoteName + "_popup";
    var footnotePopup= document.getElementById(footnotePopupName);
  }
  else {//  Must be over the popup.
    var footnotePopup= this;
  }
  if (footnotePopup == null) {//  Does the footnote popup exist yet?
    //  Grab relevant footnote. Similar name but without the "_" prepended.
    var footnoteElement= document.getElementById(footnoteName.split("_")[1]);
    //  Create a new div for the popup.
    var newFootnotePopup= document.createElement('div');
    //  Name it so we can check for its existence later.
    newFootnotePopup.setAttribute("id", footnotePopupName);
    //  Fill it with stuff from relvant footnote.
    newFootnotePopup.innerHTML= footnoteElement.innerHTML;
    //  Remove the return link (<a>), which is the first child in the second child (<p>).
    var refLinkParent= newFootnotePopup.childNodes[1];  // <p>
    refLinkParent.removeChild(refLinkParent.childNodes[0]);  // <a>
    //  Style it.
    newFootnotePopup.setAttribute("class", "footnote_popup_shown");
    //  Add some listeners to allow the mouse to hover over it without disappearing.
    newFootnotePopup.addEventListener("mouseover", show_footnote, false);
    newFootnotePopup.addEventListener("mouseout", hide_footnote, false);
    //  Insert it next to the link.
    this.parentNode.insertBefore(newFootnotePopup, this);
    //++  May want to ensure placement is wide enough within viewing area, i.e. isn't schunched and doesn't extend beyond window edges.
  }
  else {//  Already exists. Show it.
    footnotePopup.setAttribute("class", "footnote_popup_shown");    
  }
}

function hide_footnote () {
  var aLinkHref= this.href; //  need to split at #
  if (aLinkHref != null) {
    var footnoteName= aLinkHref.split("#")[1];
    var footnotePopupName= footnoteName + "_popup";
    var footnotePopup= document.getElementById(footnotePopupName);
  }
  else {//  Must be over the popup.
    var footnotePopup= this;
  }
  footnotePopup.setAttribute("class", "footnote_popup_hidden");    
}

//  Processes a list of space separated items. Returns a list without the specified item. Great for removing a class name.
function remove_item_from_list (item, list) {
  var list_items= list.split(" ");
  var new_list= {};
  for (var count=0; count < list_items.length; count++) {
    if (list_items[count] != item) {
      new_list.push(list_items[count]);
    }
  }
  return new_list.join(" ");
}

/*  Arguments of addEventListener and removeEventListener for any node:
  event -
    Lowercased name in quotes. Same as HTML attribute without "on" prepended.
  function name -
    No arguments, no parentheses. In order to pass arguments, use an anonymous function to call your function, i.e. the listener:
      • function(event){ yourFunction(event); } // Just passing the event.
      • function(event){ someObject.somefunction(event); } // Referring to a function from some object.
      • function(){ yourFunction("some data"); } // Ignoring event.
      • yourFunction // Remember, just the name, no parentheses.
  use capture -
    Boolean: false, true.
      The event goes from outermost parent through its descendants to the innermost child, and then bubbles back up again. In other words, have the object respond before its descendants (true: capture ASAP), or respond after its descendants have had a chance to respond. (false: wait until it bubbles up).
 */
window.addEventListener('load', init, false);