function BorderedArea(){

	this.body = null;
	this.parent = null;

	this.table = null;
	this.tbody = null;
	this.rows = new Array();
	this.cells = new Array();

	this.width = 80;
	this.height = 60;

	this.render = function RenderBorderedArea( ParentObject, Width, Height ){

		this.parent = ParentObject;
		this.width = (Width)?(Width):(this.width);
		this.height = (Height)?(Height):(this.height);

		/* Setup table element */
		this.table = document.createElement("TABLE");
		this.table.id = (this.parent.id)?(this.parent.id + "_table"):(this.parent.name + "_table");
		this.table.width = this.width + 30; // 30 is added becaus ethe width of each corner is 15px
		this.table.border = 0;
		this.table.cellPadding = 0;
		this.table.cellSpacing = 0;

		this.tbody = document.createElement("TBODY");
		this.table.appendChild( this.tbody );

		//Setup the top row
		this.rows[0] = document.createElement("TR");
		this.tbody.appendChild( this.rows[0] );

		this.cells[0] = new Array();
		this.cells[0][0] = document.createElement("TD");
		this.cells[0][0].style.fontSize = "6px";
		this.cells[0][0].width = 15;
		this.cells[0][0].height = 15;
		this.cells[0][0].style.backgroundImage = 'url(./images/border/lefttop.gif)';
		this.rows[0].appendChild( this.cells[0][0] );

		this.cells[0][1] = document.createElement("TD");
		this.cells[0][1].style.fontSize = "6px";
		this.cells[0][1].width = this.width;
		this.cells[0][1].height = 15;
		this.cells[0][1].style.backgroundImage = 'url(./images/border/top.gif)';
		this.rows[0].appendChild( this.cells[0][1] );

		this.cells[0][2] = document.createElement("TD");
		this.cells[0][2].style.fontSize = "6px";
		this.cells[0][2].width = 15;
		this.cells[0][2].height = 15;
		this.cells[0][2].style.backgroundImage = 'url(./images/border/righttop.gif)';
		this.rows[0].appendChild( this.cells[0][2] );

		//setup the middle row
		this.rows[1] = document.createElement("TR");
		this.tbody.appendChild( this.rows[1] );

		this.cells[1] = new Array();
		this.cells[1][0] = document.createElement("TD");
		this.cells[1][0].style.fontSize = "6px";
		this.cells[1][0].width = 15;
		this.cells[1][0].height = this.height;
		this.cells[1][0].style.backgroundImage = 'url(./images/border/left.gif)';
		this.rows[1].appendChild( this.cells[1][0] );

		this.cells[1][1] = document.createElement("TD");
		this.cells[1][1].style.fontFamily = ' "Gill Sans MT", Geneva, sans-serif ';
		this.cells[1][1].width = this.width;
		this.cells[1][1].height = this.height;
		this.cells[1][1].align = "center";
		this.cells[1][1].vAlign = "top";
		this.cells[1][1].bgColor = "#FFFFFF";
		this.rows[1].appendChild( this.cells[1][1] );
		this.body = this.cells[1][1];

		this.cells[1][2] = document.createElement("TD");
		this.cells[1][2].style.fontSize = "6px";
		this.cells[1][2].width = 15;
		this.cells[1][2].height = this.height;
		this.cells[1][2].style.backgroundImage = 'url(./images/border/right.gif)';
		this.rows[1].appendChild( this.cells[1][2] );

		//Setup the bottom row
		this.rows[2] = document.createElement("TR");
		this.tbody.appendChild( this.rows[2] );

		this.cells[2] = new Array();
		this.cells[2][0] = document.createElement("TD");
		this.cells[2][0].style.fontSize = "6px";
		this.cells[2][0].width = 15;
		this.cells[2][0].height = 15;
		this.cells[2][0].style.backgroundImage = 'url(./images/border/leftbottom.gif)';
		this.rows[2].appendChild( this.cells[2][0] );

		this.cells[2][1] = document.createElement("TD");
		this.cells[2][1].style.fontSize = "6px";
		this.cells[2][1].width = this.width;
		this.cells[2][1].height = 15;
		this.cells[2][1].style.backgroundImage = 'url(./images/border/bottom.gif)';
		this.rows[2].appendChild( this.cells[2][1] );

		this.cells[2][2] = document.createElement("TD");
		this.cells[2][2].style.fontSize = "6px";
		this.cells[2][2].width = 15;
		this.cells[2][2].height = 15;
		this.cells[2][2].style.backgroundImage = 'url(./images/border/rightbottom.gif)';
		this.rows[2].appendChild( this.cells[2][2] );

		ParentObject.appendChild( this.table );
	}

	this.write = function WriteBorderedArea( Text ){

		this.body.innerHTML += Text;
	}

	this.clear = function ClearBorderedArea(){

		this.body.innerHTML = '';
	}
}
