$(window).load(function() {
	var $display = $('#JT');

	if($display.size() == 0) {
		$("body").append(
			'<div id="JT" style="position:absolute">' +
				'<div id="JT_copy">' +
					'<div class="JT_loader" style="display:none"><div>' +
				'</div>' +
			'</div>'
		);
		$display = $('#JT');
	}

	$display.hide();

	$("span.glossar-1-0,span.glossar-1-1").each(function() {
		var $item = $(this);

		$item.wrap('<span></span>').addClass("glossarStyle").after(
			'<span>' +
				'<img class="glossarStyleIcon" alt="" src="' + Config.images.glossaryInfo + '" />' +
			'</span>'
		);

		$item.parent()
		.bind("mouseenter", function() {showGlossaryItem($item, "", false);})
		.bind("mouseleave", function() {$display.hide();});
	});
});

function showGlossaryItem($item, width) {
	var glossaryID  = $item.attr('class').match(/wid_([0-9]+-[0-9]+)/)[1];
	var glossaryURL = Config.ajax.glossaryService + "?id=" + glossaryID;
	var $display    = $('#JT');
	var $offset     = $item.offset();

	if(!width) width = 350;

	var left = 16 + $offset.left + $item.outerWidth();
	var top = $offset.top;

	if($(window).width() - left < width + 16) {
		left = $offset.left - width - 16;

		if(left < width + 16) {
			left = $offset.left;
			top = $offset.top + $item.height() + 5;
		}
	}

	$display.css({
		"width" : width,
		"top"   : top,
		"left"  : left
	}).show();

	var dataHTML = $.data($item, 'glossary-html');

	if(!dataHTML) {
		$('#JT_loader', $display).show();
		$('#JT_copy', $display).hide().load(glossaryURL, {}, function() {
			$('#JT_loader', $display).hide();
			$(this).show();
			$.data($item, 'glossary-html', $(this).html());
		});
	} else {
		$('#JT_copy').html(dataHTML);
	}
}