Convert ^*ID into action blocks that reveal their corresponding <p>*ID: text</p> on hover.

footnotes.js

$(function() {
	var footnotes = {};
	// Gather footnotes.
	var footnotePattern = /^\*(\w+):/;
	$("p, .footnote").not(".footnote p, p .footnote").each(function() {
		var match = footnotePattern.exec($(this).text());
		if (match && match.length) {
			footnotes[match[1]] = $(this);
		}
	});
	// Connect references.
	var referencePattern = /^\*(\w+)$/;
	var highlighterCSS = {"background-color": "#f3f315"};
	$("sup").each(function() {
		var match = referencePattern.exec($(this).text());
		if (match && match.length) {
			var reference = match[1], referent = footnotes[reference];
			if (referent) {
				referent.css(highlighterCSS).detach();
				$(this).css(highlighterCSS).hover(function() {
					var parentBlock = $(this).closest("p, div, body>*");
					referent.insertAfter(parentBlock);
				}, function() {
					referent.detach();
				});
			}
		}
	});
});