// alert(document.domConfig);

////
//
// 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"] = "300px";
		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";
		document.debug_div.style["zIndex"] = "9999";
	}

    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";

		html_text = sortObject(html_text);

		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";

			//element.style["cssFloat"] = "left";
			//element.style["styleFloat"] = "left";
			//element.style["width"] = "145px";
			
			// Store the value 
			try {
				element.object_value = html_text[key];
				element.object_key = key;
			} catch(e) {
				// Currently it can't seem to get "domConfig"
				// printd("Unable to get this element: " + key, "#FF0000", "#FF0000");
			}

			element.onclick = function() 
			{
				var red = Math.round((Math.random()*155)+100);
				var green = Math.round((Math.random()*155)+100);
				var blue = Math.round((Math.random()*155)+100);
				var color = "rgb("+red+","+green+","+blue+")";

				var new_debug_div = printd(this.object_value, "#000000", color);

				this.onmouseover = function() 
				{
					// new_debug_div.style["backgroundColor"] = "#FF0000";
				}

				this.onmouseout = function() 
				{
					/// new_debug_div.style["backgroundColor"] = "none";
				}

				this.style["backgroundColor"] = color + "";
			}

			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);
	} else if (typeof html_text == "function") {
		// its a function, figure out how to evaulate this.
		// passing parameters ?! hehe
	}

	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(Boolean(border_color) == true) 
	{
		container.style["borderLeft"] = "3px solid " + border_color;
	}

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

	return(container);
} 

function sortObject(o) {
    var sorted = {},
    key, a = [];

	for (key in o) {
		if (o.hasOwnProperty(key)) {
			a.push(key);
		}
	}

	a.sort();

	for (key = 0; key < a.length; key++) {
		sorted[a[key]] = o[a[key]];
	}

	return sorted;
}