////
//
// Print Debug
//
// param    value     string
// param    color     #FFFFFF or rgb(255,255,255)
// param    border    #FFFFFF or rgb(255,255,255)
//
////
printd = function(html_text, text_color, border_color) 
{
	var debug_id = "debugger_output";

	document.debug_div = document.getElementById(debug_id);
	if(!document.debug_div) 
	{
		// Initalize the debug script.
		document.debug_div = document.createElement("div");
		document.debug_div.id = "debugger_output";

		document.debug_div.style["width"] = "400px";
		document.debug_div.style["position"] = "absolute";
		document.debug_div.style["top"] = "10px";
		document.debug_div.style["right"] = "10px";
		document.debug_div.style["background"] = "#FFFFFF";
		document.debug_div.style["border"] = "1px solid #AEAEAE";
		document.debug_div.style["font"] = "11px Arial";
		document.debug_div.style["textAlign"] = "left";
	}

    var container = document.createElement("div");

	container.innerHTML = html_text;

	if(typeof html_text == "object") 
	{
		var object_elements = document.createElement("div");
		object_elements.style.margin = "0px 0px 0px 10px";
		object_elements.style.padding = "0px 0px 0px 0px";
		object_elements.style.listStyleType = "none";

		for(var key in html_text) 
		{
			var element = document.createElement("span");
			
			element.style.margin = "0px 2px 0px 0px";
			element.style.padding = "0px 4px 0px 4px";

			// Store the value 
			element.object_value = html_text[key];
			element.object_key = key;

			element.onclick = function() 
			{
				/*
				var red = Math.round((Math.random()*255));
				var green = Math.round((Math.random()*255));
				var blue = Math.round((Math.random()*255));
				var color = "rgb("+red+","+green+","+blue+")";
				printd(this.object_value, "#000000", color);
				this.style.backgroundColor = color + "";
				*/
				printd(this.object_value);
			}

			element.onmouseover = function() 
			{
				this.style.background = "#E5EBF1";
				this.style.cursor = "pointer";
			}

			element.onmouseout = function() 
			{
				this.style.background = "none";
			}

			var foo = document.createTextNode(key);
			element.appendChild(foo);

			object_elements.appendChild(element);

			// Need to add some whitespace else it won't word wrap.
			var text_element = document.createTextNode("\n");
			object_elements.appendChild(text_element);
		}

		container.appendChild(object_elements);
	} 

	container.style["padding"] = "2px 3px 2px 4px";
	container.style["borderBottom"] = "1px solid #DEDEDE";
	container.style["color"] = "#000000";

	if(text_color != null) 
	{
		container.style["color"] = text_color;
	}

	if(border_color != null) 
	{
		container.style.borderLeft = "3px solid " + border_color;
	}

	document.debug_div.appendChild(container);
	document.body.appendChild(document.debug_div);
}