function showMessageBox(message, type){
	if ($('#topMessageBox').size() > 0){
		removeMessageBox();
	}
	
	var mbox = $("<div id='topMessageBox'></div>");
	mbox
		.css('opacity', '0')
		.css('position', 'absolute')
		.css('top', '0')
		.css('left','0')
		.css('z-index','10')
		.css('padding','5px')
		.css('border','1px solid #3A5B7E')
		.css('text-align','center')
		.css('background-color', '#3A5B7E')
		.css('width','99%');
	
	var messageDiv = $("<div>"+message+"</div>");
	messageDiv
		.css('width','94%')
		.css('height', '50px')
		.css('margin-top', '15px')
		.css('font-size', '14px')
		.css('font-weight', 'bold')
		.css('color', 'white')
		.css('background-color', '#3A5B7E')
		.css('float','left')
		.css('text-align','center')
		.css('vertical-align', 'middle');
		
	var closeBtn = $("<div><img id='closeMessageBtn' src='/images/icons/12-em-cross.png' /></div>");
	closeBtn
		.css('width', '2%')
		.css('float', 'right')
		.css('cursor', 'pointer');
	closeBtn.click(
			function(){
				removeMessageBox();
			});
	
	if(type != undefined){
		if (type == 'warning'){
			var logoPath = '/images/icons/alert.png';
		}
		
		logoDiv = $("<div style='width: 14%; float'><img height='40px' width='40px' src='"+ logoPath +"'</div>");
		logoDiv
			.css('width','14%')
			.css('float','left')
			.css('vertical-align', 'middle');;
		
		messageDiv.css('width', '80%');
		
		mbox.append(logoDiv);
	}
	mbox.append(messageDiv);
	mbox.append(closeBtn);
	$('body').append(mbox);
	
	closeBtn
		.css('height', messageDiv.height())
		.css('vertical-align', 'middle');
	
	/*
	 * Now get the mbox's height and move it up just that much, so we can down it down
	 */
	mbox.css('top', -mbox.height());
	
	mbox.animate({'opacity': .95, 'top': 0},1000);
}

function removeMessageBox(){
	$('#topMessageBox').fadeOut(400, function(){$('#topMessageBox').remove()});
}