var messages = [];
var message_xhtml =
	  '<div class="message_display" title="bezár">'
	  	+ '<div class="message_wrapper">'
			+ '<div class="message"><span>%message%</span></div>'
			+ '<div class="arrow"></div>'
		+ '</div>'
	+ '</div>';

function message_display($el, message)
{
	var $dummy =
		$('<span>')
			.addClass('message_dummy')
			.text(message)
			.appendTo(document.body);
	text_height = $dummy.height();
	$dummy.remove();

	var xhtml = message_xhtml.split('%message%').join(message);

	var $display = $(xhtml).appendTo('body');

	var $message = $display.find('div.message');
	$message.height(text_height);

	var $arrow = $display.find('div.arrow');
	$arrow.height(text_height);

	$display.height($message.outerHeight());

	var offset = $el.offset();
	var top = offset.top
		+ (($el.outerHeight() - $message.outerHeight()) / 2);
	var left = offset.left - $display.outerWidth();
	var left_start = left - 50;

	$display
		.css({
			opacity: .4,
			top: top + 'px',
			left: left_start + 'px',
			cursor: 'pointer'
		})
		.animate({
			opacity: 1,
			left: left + 'px'
		}, 'fast', 'swing')
		.click(function() {
			$(this).fadeOut('fast');
		});

	messages.push($display);
}

function message_destroy()
{
	for(var i = 0; i < messages.length; ++ i)
		messages[i].fadeOut('fast');

	messages = [];
}