
function infoBoxesInit() {
// prepare the popup infoboxes

var doc_width = $(document).width();
var offset_x = -100;
var offset_y = -30;
var correction_x = 0;

// change their location in the DOM, move them to the body element
	$("body [id^='infobox']").each(function(i){
		$(this).clone(true).appendTo("body");
		$(this).remove();
	});

// create the events handlers
	$("[rel^='infobox']").each(function(i){
		var el_width = $("#"+$(this).attr("rel")).width() + 12;// +12 pixels of css padding+border
		var el_height = $("#"+$(this).attr("rel")).height() + 12;// +12 pixels of css padding+border

		$(this).hover(function(){
			$("#"+$(this).attr("rel")).fadeIn("fast");
		},
		function(){
			$("#"+$(this).attr("rel")).hide();
		});	

		$(this).mousemove(function(e){
			correction_x = (doc_width - e.pageX) - el_width;
			if (correction_x > offset_x) {
				correction_x = offset_x;
			}
			$("#"+$(this).attr("rel")).css("left", (e.pageX + correction_x) + "px").css("top", (e.pageY + offset_y - el_height) + "px");
		});
	});
}

// starting the script on page load
$(document).ready(function(){
	infoBoxesInit();
});