var debugContents = "<b>debug</b><br/>";
var debugElementStyle = "";
var debugElementCloseButton = "";

debugElementStyle += "position: absolute;"; 
debugElementStyle += "top: 0px;";
debugElementStyle += "left: 0px;";
debugElementStyle += "width: 100%;";
debugElementStyle += "height: 15px;";
debugElementStyle += "border: 1px solid #ccc;";
debugElementStyle += "background-color: #fff;";
debugElementStyle += "overflow: hidden;";
 
debugElementCloseButton += "<div style='width: 100%; text-align: right'>";
debugElementCloseButton += "<input type='button' onclick='hideDebugConsole()' value='Close'/>";
debugElementCloseButton += "</div>";

function extendConsole() {
	var debugElement = document.getElementById('debugconsole'); 
	if(debugElement != null) {
		debugElement.style.height='300px';
	}
}

function collapseConsole() {
	var debugElement = document.getElementById('debugconsole'); 
	if(debugElement != null) {
		debugElement.style.height='15px';
	}
}

function hideDebugConsole() {
	var debugElement = document.getElementById('debugconsole'); 
	if(debugElement != null) {
		debugElement.style.display='none';
	}
}

function debugConsole(message) {
	debugContents += message + "<br>\n";
	var debugElement = document.getElementById('debugconsole'); 
	if(debugElement == null) {
		document.body.innerHTML += "<div id='debugconsole' style='" + debugElementStyle +  "' onmouseover='extendConsole()' onmouseout='collapseConsole()'><pre>" + debugContents + "</pre>" + debugElementCloseButton + "</div>";
	} else {
		debugElement.innerHTML = debugContents + debugElementCloseButton;
		debugElement.style.display = '';
	}
}

function logDebug(message) {
	debugConsole(message);
}