/** 
 * A javascript 'module' that introduces a 'debug console' at the bottom
 * of the webpage in its separate <DIV> tag (class="debug").
 * 
 * It displays new elements in the manner of a stack, putting the most 
 * recent element at the top.  
 *
 * Each element is placed in its uniquely-numbered <DIV> tag
 * (e.g., <div class="debugElem22">), and accepts valid HTML as the
 * contents to be printed.
 * 
 * "printToDebug(content)" is to be the only 'public' method.
 */

var debugBox = null;
var debugCount = 0;
var debugStyle = "background-color:#101010; color:#20d820; padding:10px; border: solid white 2px; margin:20px";
var debugClass = "debug";
var debugInitialInnerHTML = "<h2 style='border: 2px dotted green'>Debug Console</h2>";

function printToDebug(content) {
	if (lacksDebug()) {
		addDebugConsole();
	}
	var entry = document.createElement("div");
	entry.setAttribute("class","debugElem" + debugCount);
	if (debugBox.lastChild.tagName=="H2") {
		debugBox.appendChild(entry);
	} else {
		debugBox.insertBefore(entry, debugBox.childNodes[1]);
	}
	entry.innerHTML = content;
	debugCount++;
}

function lacksDebug() {
	if (document.body.lastChild.tagName=="DIV" && document.body.lastChild.className=="debug") {
		return false;
	}
	return true;
}

function addDebugConsole() {
	debugBox = makeBox();
	document.body.appendChild(debugBox);
	debugBox.innerHTML = debugInitialInnerHTML;
}

function makeBox() {
	var cons = document.createElement("div");
	cons.setAttribute("style", debugStyle);
	cons.setAttribute("class", debugClass);
	return cons;
}