debugBox = null;
mousedOverElem = null;
debugCount = 0;

function clicked() {
	//alert("children in doc: " + document.body.childElementCount);
}

function mouseOut(e) {
	printToDebug("<p>exited: " + DOMTrace(mousedOverElem) + "</p>");
	mousedOverElem = null;
}

function mouseOver(e) {
	var elem = getElementFromEvent(e);
	mousedOverElem = elem;
	printToDebug("<p>entered: " + DOMTrace(elem) + "</p>");
}

function getElementFromEvent(e) {
	var elem;
	if (!e) {
		var e=window.event;
	}
	if (e.target) {
		elem=e.target;
	} else if (e.srcElement) {
		elem=e.srcElement;
	}
	if (elem.nodeType==3) { 
		// defeat Safari bug
		// lost the 'targ' importance in refactoring! >.<
		targ = targ.parentNode;
	}
	return elem;
}

function DOMTrace(element) {
	if (element.tagName == "HTML") {
		return "HTML";
	}
	else {
		return DOMTrace(element.parentNode) + ">" + element.tagName;
	}
}

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 = document.createElement("div");
	debugBox.setAttribute("style", "padding: 10px; border: solid black 2px; margin:20px" );
	debugBox.setAttribute("class","debug");
	document.body.appendChild(debugBox);
	debugBox.innerHTML = "<h2 style='border: 2px dotted black'>Not-Interactible Debug Console</h2>";
}