$(document).ready(function() {
    var footnotesHTML = '';
    $('sup.footnote').each(function (i) {
        index = i+1;
        var thisHTML = $(this).html();
        thisHTMLclean = thisHTML.replace(/<.*?>/g, '');
        thisHTMLclean = thisHTMLclean.replace(/"/g, '&quot;');
        thisHTMLclean = thisHTMLclean.replace(/\s+/g, ' ');
        footnotesHTML = footnotesHTML+'<p><a name="footnote'+index+'">'+index+'.</a> '+thisHTML+' [<a href="#inline'+index+'">back</a>]</p>';
        $(this).html('<a class="tooltip" name="inline'+index+'" href="#footnote'+index+'" title="'+thisHTMLclean+'">'+index+'</a>');
        $(this).css('display','inline');
    });
    $('div#footnotes').html(footnotesHTML);
    $('.tooltip').tipTip({defaultPosition: "left"});
});