// > helper function - simply exposes the given message box(es)
function exposeMessageBoxes(messageBox) {
	messageBox.show();
}

// > helper function - simply hides the given message box(es)
function hideMessageBoxes(messageBox) {
	messageBox.hide();
}

//> helper function - determines the absolute position of a DOM node
function determineAbsNodePos(node) {
	var left = 0; 
	var top = 0;
	do {
		top  += node.offsetTop;
		left += node.offsetLeft;
	} while (node = node.offsetParent);
	return {top: top, left: left};
}

//> helper function - parses xmlData and generates the content for a messageBox
function createMessageFromXml(xmlData, isShowIcon) {
	var message = '';
	$("headline", xmlData).each(function() {
		clazz = (isShowIcon ? 'icon' : 'noIcon');
		message = '<strong class="' + clazz + '">' + $(this).text() + '</strong>';
	});
	$("text", xmlData).each(function() {
		message += $(this).text();
	});
	return message;
}

//> helper function - positions and draws a given messageBox beside an icon
function drawMessageBoxBesideIcon(icon, messageBox) {
	var iconPos = determineAbsNodePos(icon);
	// first set the box visible to know its size for later calculations
	exposeMessageBoxes(messageBox);
	// calculate alternative box position in case content would flow below bottom
	// when the messages are part of a layer take the available height from the overlay
	var availHeight = ($('#overlay').css('display') == 'block') ? $('#overlay').height() : $('body').height();
	var margin = availHeight - (iconPos.top + messageBox.height() + 25);
	(margin < 0) && (iconPos.top += margin);
	// add icon width (23 px) and left margin (15px)
	iconPos.left += 22;
	// finally set the resulting position values for the message box
	messageBox.css('top',  iconPos.top + 'px');
	messageBox.css('left', iconPos.left + 'px');
}

function displayInfoMessageBoxForIcon(icon, xmlMessageData) {
	// ensure all previously exposed message boxes are hidden
	hideMessageBoxes($('.infoMessage, .errorMessage'));
	var
		messageBoxId = $(icon).attr('id') + "Message",
		messageBox = $('#' + messageBoxId);
	// in case the info message box was not injected up to now
	if ($('#' + messageBoxId).size() == 0) {
		// create the message box and insert the message text
		$('body').append('<div id="' + messageBoxId + '" class="infoMessage" />');
		var messageBox = $('#' + messageBoxId);
		messageBox.html(createMessageFromXml(xmlMessageData, false));
		// now position and draw the message box
		drawMessageBoxBesideIcon(icon, messageBox);
	}
	// when already available simply expose the cached info box
	else {
		exposeMessageBoxes(messageBox);
	}
}

$(".info").livequery('mouseover', function() {
	var icon = this;
	var messageId = $(icon).attr('id');
	if(typeof(messageId) != 'undefined') {
		// substr(4) removes "info_" at the beginning
		var xmlMessageUrl = sitevars.ajaxXmlPath + messageId.substr(5) + ".xml";
		$.ajax({
			type: "GET",
			url: xmlMessageUrl,
			dataType: "xml",
			success: function(xmlData) {
				displayInfoMessageBoxForIcon(icon, xmlData);
	    	}
		});
	}
});

$(".info").livequery('mouseout', function() {
	hideMessageBoxes($('div.infoMessage'));
});