function showMessage(messageElement, showTime)
{
	// The flow is as follows: The container is marked visible
	// just long enough to grab the height and store it as a
	// variable. Then the page margin is animated to account for
	// that height as the container is simultaneously re-hidden,
	// only to slowly animate back to full opacity.
	messageElement.show(0, function() {
		$(this).parents('div').next().animate({ marginTop: $(this).parent().height() }, showTime);
		$(this).css('opacity', 0.0).animate({ opacity: 1.0 }, showTime);
	});
}

function hideMessage(messageElement, hideTime)
{
	messageElement.hide(0, function() {
		$(this).parents('div').next().animate({ marginTop: $(this).parent().height() }, hideTime);
		$(this).show(0).hide('blind', {}, hideTime);
	})
}

$(function(){

	$('#message_container').addClass('dynamic');
	$('#message_container li').hide(0, function() {
		// have to use a var to store 'this' so that it works in the
		// global scope of setTimeout
		var thisElement = $(this);
		// amount of time to show the message
		var duration = thisElement.metadata().duration;

		showMessage(thisElement, 1000);

		if (duration)
		{
			setTimeout(function() {
				hideMessage(thisElement, 300);
			}, duration);
		}
	});
	$('#message_container li a.close').click(function(e) {
		e.preventDefault();
		hideMessage($(this).parent(), 300);
	});

});