$(document).ready(function() {
	Footnotes.setup();
});

var Footnotes = {
	footnotetimeout: false,
	setup: function() {
		var footnotelinks = $("a[rel='footnote']")
		
		footnotelinks.unbind('mouseover',Footnotes.footnoteover);
		footnotelinks.unbind('mouseout',Footnotes.footnoteoout);
		
		footnotelinks.bind('mouseover',Footnotes.footnoteover);
		footnotelinks.bind('mouseout',Footnotes.footnoteoout);
	},
	footnoteover: function() {
		clearTimeout(Footnotes.footnotetimeout);
		$('#footnotediv').stop();
		$('#footnotediv').remove();
		
		var id = $(this).attr('href').substr(1);
		var position = $(this).offset();
	
		var div = $(document.createElement('div'));
		div.attr('id','footnotediv');
		div.bind('mouseover',Footnotes.divover);
		div.bind('mouseout',Footnotes.footnoteoout);

		var el = document.getElementById(id);
		div.html('<div>'+$(el).html()+'</div>');
		
		$(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;
		div.css({
			left:left,
			top:top,
			opacity:0.9
		});
	},
	footnoteoout: function() {
		Footnotes.footnotetimeout = setTimeout(function() {
			$('#footnotediv').animate({
				opacity: 0
			}, 600, function() {
				$('#footnotediv').remove();
			});
		},100);
	},
	divover: function() {
		clearTimeout(Footnotes.footnotetimeout);
		$('#footnotediv').stop();
		$('#footnotediv').css({
				opacity: 0.9
		});
	}
}