function debugLog (message, force) {
	var d;
	var doc;
	if (debugWindow != null) {
		doc = debugWindow.document;
	} else {
		doc = document;
	}
	if (doc == null) return;
	d = doc.getElementById ('debugarea');
	if (d == null) return;
	if (topDebugOn == true || force == true) {
		var p = doc.createElement ('div');
//		var ts = doc.createTextNode (new Date().toLocaleString());
		var text = doc.createTextNode (message);
		p.appendChild (text);
		if (d.firstChild) {
			d.insertBefore (p, d.firstChild);
		} else {
			d.appendChild (p);
			d.style.scrollTop = 0;
		}
	}
}

function sdebugLog (area, szMessage, force) {
	var d;
	if (debugWindow != null) {
		d = debugWindow.document.getElementById (area + 'DebugArea');
	} else {	
		d = document.getElementById (area + 'DebugArea');
	}
	if (d == null) return;
	if (topDebugOn == true || force == true) {
		d.innerHTML = szMessage;
	}
}

function toggleDebug (debugItem) {
	var b;
	var v = debugItem + 'DebugOn';
	eval ('var t = ' + v);
	if (t == false) {
		eval (v + ' = true');
		b = '1px solid #000000';
	} else {
		eval (v + ' = false');
		b = '0px';
	}
	checkDebug (debugItem);

	// This is what we're debugging, as long as it's not "top"...
	if (debugItem == 'top') return;
	
	// ...or "tiles"
	if (debugItem == 'tiles') {
		var s = nHigh * nWide;
		for (var j = 0; j < s; j++) {
			var img = getRawObject ('i' + j);
			img.style.border = b;
		}
	} else {
		var dd = getRawObject (debugItem);
		dd.style.border = b;
	}
}

function checkDebug (debugItem) {
	var d;
	if (debugWindow == null) {
		d = document.getElementById ('toggle' + debugItem + 'debug');
	} else {
		d = debugWindow.document.getElementById ('toggle' + debugItem + 'debug');
	}
	var v = debugItem + 'DebugOn';
	eval ('var t = ' + v);
	if (t == true) {
		d.style.color = '#00FF00';
		debugLog ('Debug for ' + debugItem + ' is enabled', true);
		d.innerHTML = debugItem; // + ' is enabled';
	} else {
		d.style.color = '#FF0000';
		debugLog ('Debug for ' + debugItem + ' is disabled', true);
		d.innerHTML = debugItem; // + ' is disabled';
	}    
}

function initializeDebugWindow () {
	try {
		debugWindow = window.open ('', 'jsdebug', 'scrollbars=no,menubar=no,status=no,width=640,height=480');
	} catch (e) {
	}
	if (debugWindow == null) return;
	var fsize = '12px';
	var head = debugWindow.document.getElementsByTagName("head")[0];

	// Set a title in the head
	debugWindow.document.title = 'Prototype 4 Javascript Debug';

	// Append the extra scripts to the head
	var script = debugWindow.document.createElement ('script');
	script.setAttribute ('src', 'globals.js');
	script.setAttribute ('type', 'text/javascript');
	head.appendChild (script);
	
	script = debugWindow.document.createElement ('script');
	script.setAttribute ('src', 'debug.js');
	script.setAttribute ('type', 'text/javascript');
	head.appendChild (script);

	// First table row, fisrt column in the inner table, contains the text
	var div = debugWindow.document.createElement ('div');
	div.id = 'justdebug';
	div.style.fontFamily = 'arial';
	div.style.fontSize = fsize;
	
	// Attach the text
	var text = debugWindow.document.createTextNode ('Debug: ');
	div.appendChild (text);
	// Attach the div to a new td
	var td = debugWindow.document.createElement ('td');
	td.appendChild (div);
	// Attach the td to a tr
	var tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);

	// First table row, second column in the inner table, contains the the scalebar toggle with onclick event
	div = debugWindow.document.createElement ('div');
	div.id = 'togglescalebarImgdebug';
	div.onclick = function () { toggleDebug ('scalebarImg'); }
	div.style.cursor = 'pointer';
	div.onmouseover = function () {
		this.style.textDecoration = 'underline';
	}
	div.onmouseout = function () {
		this.style.textDecoration = 'none';
	}
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.appendChild (div);
	// Attach the td to the first tr
	tr.appendChild (td);

	// First table row, third column in the inner table, contains the tiles toggle with onclick event
	div = debugWindow.document.createElement ('div');
	div.id = 'toggletilesdebug';
	div.onclick = function () { toggleDebug ('tiles'); }
	div.style.cursor = 'pointer';
	div.onmouseover = function () {
		this.style.textDecoration = 'underline';
	}
	div.onmouseout = function () {
		this.style.textDecoration = 'none';
	}
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.appendChild (div);
	// Attach the td to the first tr
	tr.appendChild (td);

	// First table row, forth column in the inner table, contains the "add space to debug"
	div = debugWindow.document.createElement ('div');
	div.id = 'addspacedebug';
	div.onclick = function () { debugLog ('-', true); }
	div.style.cursor = 'pointer';
	// Attach some text
	text = debugWindow.document.createTextNode ('Add spaces');
	div.appendChild (text);
	div.onmouseover = function () {
		this.style.textDecoration = 'underline';
	}
	div.onmouseout = function () {
		this.style.textDecoration = 'none';
	}
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.appendChild (div);
	// Attach the td to the first tr
	tr.appendChild (td);

	// Finish the inner table. Attach the tr to a new table
	var table = debugWindow.document.createElement ('table');
	table.appendChild (tr);

	// Attach the inner table to the first td of the outer table
	td = debugWindow.document.createElement ('td');
	td.colSpan = 3;
	td.appendChild (table);
	// Attach that td to a new tr
	tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);
	// Attach this row to a new table
	table = debugWindow.document.createElement ('table');
	table.appendChild (tr);

	// Second row of the outer table has the main debug area
	div = debugWindow.document.createElement ('div');
	div.id = 'debugarea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'left';
	div.style.height = '250px';
	div.style.width = '620px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.colSpan = 3;
	td.appendChild (div);
	// Attach the td to a new tr
	tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);
	// Attach this row to the outer table
	table.appendChild (tr);

	// Third row of the outer table has 3 columns
	// First is for the scale
	div = debugWindow.document.createElement ('div');
	div.id = 'scaleDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Scale');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to a new tr
	tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);

	// Second is for the real time mouse move
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseMoveDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('RT Mouse Movement');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Third is for the mouse down event
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseDownDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Mouse Down');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Attach this row to the outer table
	table.appendChild (tr);

	// Forth row of the outer table has 3 columns
	// First is for the mouse up event
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseUpDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Mouse Up');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to a new tr
	tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);

	// Second is for the viewport size
	div = debugWindow.document.createElement ('div');
	div.id = 'viewPortDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Viewport');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Third is for the nHigh x nWide
	div = debugWindow.document.createElement ('div');
	div.id = 'nWidenHighDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Tile Width / Height');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Attach this row to the outer table
	table.appendChild (tr);

	// Fifth row of the outer table has 3 columns
	// First is for amount of mouse drag
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseDragDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Last Mouse Drag');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to a new tr
	tr = debugWindow.document.createElement ('tr');
	tr.appendChild (td);

	// Second is for double click
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseDoubleClickDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Mouse Double Click');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Third is for mouse wheel
	div = debugWindow.document.createElement ('div');
	div.id = 'mouseWheelDebugArea';
	div.style.	fontFamily = 'arial';
	div.style.fontSize = fsize;
	div.style.zIndex = '102';
	div.style.overflow = 'auto';
	div.style.visibility = 'visible';
	div.style.textAlign = 'center';
	div.style.vAlign = 'middle';
	div.style.height = '25px';
	div.style.width = '200px';
	div.style.border = '1px solid #B2ACA0';
	// Attach the div to a new td
	td = debugWindow.document.createElement ('td');
	td.style.textAlign = 'center';
	td.style.fontSize = fsize;
	text = debugWindow.document.createTextNode ('Mouse Wheel');
	td.appendChild (text);
	td.appendChild (div);
	// Attach the td to the tr
	tr.appendChild (td);

	// Attach this row to the outer table
	table.appendChild (tr);

	// Append the outer table to the body
	var body = debugWindow.document.body;
	body.appendChild (table);

//	debugWindow.moveTo (1281, 0);
	debugWindow.document.close ();

	try {
		window.focus ();
	} catch (e) {
	}

	debugLog ('Page loaded');
	checkDebug ('tiles');
	checkDebug ('scalebarImg');
}