JavaScript to improve footnotes by showing them in context

footnotes.js

// this script requires jQuery
$(document).ready(function() {
    Footnotes.setup();
});

var Footnotes = {
    currentFootnote: null,
    useTouch: false,
    setup: function() {
        // Find all footnote links that are already on the page
        var footnotelinks = $("a[rel='footnote']")

        // Just in case, ensure we're not already bound to those elements
        footnotelinks.unbind('click', Footnotes.footnoteclick);
        footnotelinks.unbind('mouseout', Footnotes.footnoteout);

        // Bind our event handlers
        footnotelinks.bind('click', Footnotes.footnoteclick);
        footnotelinks.bind('mouseout', Footnotes.footnoteout);
    },
    footnoteclick: function(event) {
        // Check if the user interacted with the footnote link for the first time
        if (event.currentTarget.touched != true){
            event.preventDefault(); // Don't follow the link

            // Check if another footnote is currently open and un-touch the current one
            if (Footnotes.currentFootnote !== null && Footnotes.currentFootnote !== event.currentTarget){
                Footnotes.currentFootnote.touched = false;
            }

            // Update current footnote
            event.currentTarget.touched = true;
            Footnotes.currentFootnote = event.currentTarget;
        }
        // Close any previously opened footnotes
        $('#footnotediv').remove();

        var id = $(this).attr('href').substr(1);
        var position = $(this).offset();

        var div = $(document.createElement('div'));
        div.attr('id','footnotediv');

        var el = document.getElementById(id);
        div.html($(el).html());

        var width = $(window).width() > 420 ? 400 : $(window).width() - 20;

        div.css({
            position:'absolute',
            width:'400px'
        });
        $(document.body).append(div);

        var left = position.left;
        if(left + 420  > $(window).width() + $(window).scrollLeft())
            left = $(window).width() - 420 + $(window).scrollLeft();
        var top = position.top+20;
        if(top + div.height() > $(window).height() + $(window).scrollTop())
            top = position.top - div.height() - 15;

        if (left < 0){
            left = 10;
        }
        div.css({
            left:left,
            top:top
        });
    },
    footnoteout: function(event){
        // The user tapped somewhere else or moved the mouse away
        Footnotes.currentFootnote.touched = false;
        // Wait 1 second to not surprise the user and make things feel less abrupt
        setTimeout(function(event) {
                $('#footnotediv').animate({
                    opacity: 0
                }, 600, function(event) {
                    $('#footnotediv').remove();
                    event.currentTarget.touched = false;
                });
            }, 1000);
    }
}

This is based on the code by Lukas Mathis, found here: http://ignorethecode.net/blog/2010/04/20/footnotes/

Also, just like with the original code, a #footnotediv selector in your CSS allows styling the footnotes.