Quick and dirty log panel when console.log isn't available

log.css

#log {
	max-height: 10em;
	height: 10em;
	overflow-y: scroll;
	
	position: fixed;
	right: 0;
	top: 0;
	
	margin: 0;
	
	width: 50%;
	
	z-index: 10;
	
	background-color: #1D1F21;
	color: #AAAAAA;
}

#log p{
	font-size: 1em;
	font-family: monospace;
	margin: 0.2em 0 0 1em;
	border-top: 1px solid #888888;
}

#log :last-child {
	margin-bottom: 0.5em;
}

log.js

function scrollLogToBottom() {
	var logBox = $('#log');
	logBox.scrollTop(logBox.prop('scrollHeight'));
}

function log(msg) {
	var logBox = $('#log');
	var newText = $("<p>").text(msg);
	var diff = logBox.prop('scrollTop') - logBox.prop('scrollHeight') + logBox.height();
	var shouldScrollToBottom = diff === 0;
	logBox.append(newText);
	if (shouldScrollToBottom) {
		scrollLogToBottom();
	}
	if (!_log_visible) {
		hideLog();
	}
}

var _log_visible = true;

function hideLog() {
	var logBox = $('#log');
	var lastP = logBox.children('p').last();
	
	logBox.offset( { top: lastP.outerHeight(true) - logBox.height() + 20 } );
	scrollLogToBottom();
	
	_log_visible = false;
}

function showLog() {
	var logBox = $('#log');
	logBox.offset( { top: 0 } );
	scrollLogToBottom();
	_log_visible = true;
}

function toggleShowLog() {
	if (_log_visible) {
		hideLog();
	} else {
		showLog();
	}
}

$('#log').click(function(event) {
    toggleShowLog();
});