DebugPanel = function(div, bufferSize, data) {
	this.lines = new Array();
	this.maxLines = bufferSize;
	if (!bufferSize)
		this.maxLines = 64;
	this.lines = '                                                                '.split('');
	this.isVisible = true;
	this.needsUpdate = true;
	this.setMaxSize(data, false);
	this.x = 0;
	this.y = 0;
	this.div = div;
	this.div.style.width = Math.floor(this.maxWidth * .9) + 'px';
//	this.div.style.height = Math.round(data.viewport.h / 3 * 2) + 'px';
	this.div.style.height = (this.maxHeight - 2) + 'px';
	this.div.style.top = '0px';
	this.div.style.left = '0px';
	this.div.style.position = 'absolute';
	this.div.style.display = 'none';
	this.div.style.overflow = 'auto';
	this.div.style.zIndex = 12288;
	this.div.style.border = 'black dashed 1px';
	this.div.style.paddingLeft = '5px';
	this.divbg = document.createElement('div');
	this.div.parentNode.appendChild(this.divbg);
	this.divbg.style.position = 'absolute';
	this.divbg.style.display = 'none';
	this.divbg.style.left = this.divbg.style.top = '0px';
	this.divbg.style.width = this.div.style.width;
	this.divbg.style.height = this.div.style.height;
	this.divbg.style.backgroundColor = 'white'; //'#ffffff';
	this.divbg.style.zIndex = this.div.style.zIndex - 1;
	this.setTransparency(100);
	this.setPanel('full');
	this.updateContents();
}

DebugPanel.prototype.setTransparency = function(transparency) {
	if (!transparency || transparency < 0) transparency = 0;
	else if (transparency > 100) transparency = 100;
	this.transparency = transparency;
	transparency = 100 - transparency;
	this.divbg.style.MozOpacity = this.divbg.style.opacity = transparency / 100;
	this.divbg.style.filter = "alpha(opacity=" + transparency + ")";
	this.add('this.transparency: ' + this.transparency);
}

DebugPanel.prototype.toggleTransparency = function() {
	if ((this.transparency > 0 && this.transparency != 100) || this.transparency == 0) this.setTransparency(100);
	else this.setTransparency(0);
}

DebugPanel.prototype.add = function() {
	for (var i = 0; i < arguments.length; i++) {
		var d = new Date();
		this.lines.push('<b>' + d.toLocaleTimeString().split(' ')[0] + '.' + d.getMilliseconds().toPrecision(3) + '>></b> ' + arguments[i]);
	}
	
	if (this.lines.length > this.maxLines) {
		this.lines.splice(0, this.lines.length - this.maxLines);
	}
	if (this.isVisible) this.updateContents();
	else this.needsUpdate = true;
}

DebugPanel.prototype.updateContents = function() {
	this.div.innerHTML = this.lines.join('<br/>');
	this.div.scrollTop = this.div.scrollHeight - this.div.clientHeight;
	this.needsUpdate = false;
}

DebugPanel.prototype.toggleVisibility = function() {
	if (this.isVisible) {
		this.hide();
	} else {
		this.show();
		this.div.style.display = this.divbg.style.display = 'block';
		if (this.needsUpdate) this.updateContents();
	}
}

DebugPanel.prototype.show = function() {
	this.div.style.left = this.divbg.style.left = this.x + 'px';
	this.div.style.top = this.divbg.style.top = this.y + 'px';	
	this.isVisible = true;
}

DebugPanel.prototype.hide = function() {
	this.div.style.top = this.divbg.style.top = (-this.div.offsetHeight) + 'px';
	this.isVisible = false;
}

DebugPanel.prototype.toggleStackingOrder = function() {
	if (this.div.style.zIndex > 999) this.div.style.zIndex = 999;
	else this.div.style.zIndex = 12288;

	this.divbg.style.zIndex = this.div.style.zIndex - 1;
	this.add('z-index: ' + this.div.style.zIndex)
}


DebugPanel.prototype.setMaxSize = function(data, bSetPanel) {
	this.maxWidth = data.viewport.w - 5;
	this.maxHeight = data.viewport.h;
	if (bSetPanel == true && this.isVisible == true) { this.setPanel(this.type); }
}

DebugPanel.prototype.clear = function() {
	this.lines = '                                                                '.split('');
	if (this.isVisible) this.updateContents();
	else this.needsUpdate = true;
}

DebugPanel.prototype.setPanel = function(type) {
	this.type = type;
	switch (type) {
		case 'left':
			this.div.style.width = this.divbg.style.width = Math.round((this.maxWidth - 2) * 2/5) + 'px';
			this.div.style.height = this.divbg.style.height = (this.maxHeight - 2) + 'px';
			this.x = 0;
			this.y = 0;
			break;
		case 'right':
			this.div.style.width = this.divbg.style.width = Math.round((this.maxWidth - 2) * 2/5) + 'px';
			this.div.style.height = this.divbg.style.height = (this.maxHeight - 2) + 'px';
			this.x = (this.maxWidth - parseInt(this.div.style.width, 10) - 2);
			this.y = 0;
			break;
		case 'up':
			this.div.style.width = this.divbg.style.width = (this.maxWidth - 2) + 'px';
			this.div.style.height = this.divbg.style.height = Math.round((this.maxHeight - 2) * 2/5) + 'px';
			this.x = 0;
			this.y = 0;
			break;
		case 'down':
			this.div.style.width = this.divbg.style.width = (this.maxWidth - 2) + 'px';
			this.div.style.height = this.divbg.style.height = Math.round((this.maxHeight - 2) * 2/5) + 'px';
			this.x = 0;
			this.y = (this.maxHeight - parseInt(this.div.style.height, 10) - 2);
			break;
		case 'full':
			this.div.style.width = this.divbg.style.width = (this.maxWidth - 2) + 'px';
			this.div.style.height = this.divbg.style.height = (this.maxHeight - 2) + 'px';
			this.x = 0;
			this.y = 0;
			break;
	}
	this.div.scrollTop = this.div.scrollHeight - this.div.clientHeight;
	this.show();
}

function toHtml(obj){
	var result = "";
	for (property in obj)
		if (typeof obj[property] != 'function')
			result += '"' + property + '": "' + obj[property] + '";<br/>';
	return "([( " + result + " )])";
}

function toTxt(obj){
	var result = "";
	for (property in obj)
		result += '"' + property + '": "' + obj[property] + '";\n';
	return "([( " + result + " )])";
}

function al() {
//return;
	if (arguments.length == 0) return;
	var txt = new Array();
	
	for (var i = 0; i < arguments.length; i++)
		txt.push(arguments[i]);
	alert(txt.join('\n'));
}