// JavaScript Document
function bee2b_debug( id ) {
	
	this.id         = 'bee2b_debug_' + id;
	this.element_id = id;
	this.box_id     = "debug_box_" + id;
	this.element    = document.getElementById( id );

} // end function bee2b_debug()

bee2b_debug.prototype.setID = function( id ) {
	this.id = id;
}


bee2b_debug.prototype.setElement = function( id ) {
	this.element = document.getElementById( id );
}


bee2b_debug.prototype.createDIV = function(){
	
	debug_box_body    = document.createElement( "div" );
	debug_box_body.setAttribute( "id", this.box_id );
	debug_box_body.setAttribute("style","position:fixed;top:120px;left:20px;height:200px;width:200px;border: 1px solid #ff6600;color:#ff6600;background-image: url(http://www.kolloquium-medienwissenschaft.de/wp-content/plugins/bee2b_admin_overlay/images/bg_w_80_perc.png);font-size:11px;");
	
	debug_box_header  = document.createElement( "div" );
	debug_box_header.setAttribute( "id",this.box_id + "_header" );
	debug_box_header.setAttribute("style","position:absolute;top:0px;left:0px;height:20px;width:200px;background-image: url(http://www.kolloquium-medienwissenschaft.de/wp-content/plugins/bee2b_admin_overlay/images/bg_60_perc.png);");
	
	debug_box_content = document.createElement( "div" );
	debug_box_content.setAttribute( "id",this.box_id + "_content" );
	debug_box_content.setAttribute("style","position:relative;top:20px;left:0px;height:180px;width:200px;");
	
	//debug_box_footer  = document.createElement( "div" );
	//debug_box_footer.setAttribute( "id",this.box_id + "_footer" );
	//debug_box_footer.setAttribute("style","position:absolute;bottom:0px;left:0px;height:20px;width:200px;background-color:#aa3300");
		
	debug_box_body.appendChild( debug_box_header );
	debug_box_body.appendChild( debug_box_content );
	//debug_box_body.appendChild( debug_box_footer );
		
	ziel = document.getElementsByTagName("body")[0];
	ziel.appendChild( debug_box_body );
	new Draggable( this.box_id );
}


bee2b_debug.prototype.updateDebugBox = function( box_id ) {
	
	html =  '<table>';
	html += '<tr>width:<td></td><td>' + $(this.element_id).getWidth() + '</td></tr>'
	html += '<tr>height:<td></td><td>' + $(this.element_id).getHeight() + '</td></tr>'
	html += '<tr>OffsetParent:<td></td><td>' + $(this.element_id).getOffsetParent() + '</td></tr>'
	html += '</table>'

	$( box_id + '_header' ).innerHTML = this.element_id;
	
	$( box_id + '_content' ).innerHTML = html;
	
}