function Tab( Title, Selected ){

	this.title = Title;
	this.selected = Selected;

	this.td_left = null;
	this.td_center = null;
	this.td_right = null;
	this.anch = null;

	this.container = document.createElement("SPAN");
	this.container.style.position = 'absolute';
	this.container.style.visibility = 'hidden';

	this.html = '';
}
function TabArea(){

	this.body = null;
	this.parent = null;

	this.table = null;
	this.tbody = null;
	this.rows = new Array();
	this.cells = new Array();

	this.title = null;
	this.width = 80;
	this.height = 60;

	this.tabs = new Array();

	this.addTab = function AddTab2TabArea( TabTitle, Selected ){

		if( Selected ){
			for(var ot=0;ot<this.tabs.length;ot++){
				this.tabs[ot].selected = false;
			}
		}
		this.tabs[this.tabs.length] = new Tab( TabTitle, Selected );
	}

	this.render = function RenderTabArea( 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 + 26; // 30 is added becaus the width of each corner is 13px
		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 = "1px";
		this.cells[0][0].width = 13;
		this.cells[0][0].height = 23;
		this.cells[0][0].vAlign = 'bottom';
		this.cells[0][0].innerHTML = "<img src='./images/classic_tab/left_top_corner.gif' width=13>";
		this.rows[0].appendChild( this.cells[0][0] );

		for(var t=0;t<this.tabs.length;t++){

			cIndex = this.cells[0].length
			this.cells[0][cIndex] = document.createElement("TD");
			this.cells[0][cIndex].style.fontSize = "1px";
			this.cells[0][cIndex].width = 12;
			this.cells[0][cIndex].height = 23;
			this.cells[0][cIndex].vAlign = 'bottom';
			this.cells[0][cIndex].innerHTML = "<img src='./images/classic_tab/left_tab" + ( (this.tabs[t].selected)?("_selected"):("") ) + ".gif' height=23>";
			this.rows[0].appendChild( this.cells[0][cIndex] );
			this.tabs[t].td_left = this.cells[0][cIndex];

			//setup the title TD
			cIndex = this.cells[0].length
			this.cells[0][cIndex] = document.createElement("TD");
			this.cells[0][cIndex].style.fontSize = "6px";
			this.cells[0][cIndex].height = 23;
			this.cells[0][cIndex].align = 'left';
			this.cells[0][cIndex].vAlign = 'center';
			this.cells[0][cIndex].noWrap = true;
			this.cells[0][cIndex].style.background = "url(./images/classic_tab/top_tab" + ( (this.tabs[t].selected)?("_selected"):("") ) + ".gif)";

				//setup the tab title
				this.tabs[t].anch = document.createElement("A");
				this.tabs[t].anch.style.color = ( (this.tabs[t].selected)?("#000000"):("#FFFFFF") );
				this.tabs[t].anch.style.fontFamily = ' Verdana, Geneva, Arial, Helvetica, sans-serif ';
				this.tabs[t].anch.style.textDecoration = 'none';
				this.tabs[t].anch.style.fontSize = '11';
				this.tabs[t].anch.style.fontWeight = 'bold';
				this.tabs[t].anch.innerHTML = this.tabs[t].title;
				this.tabs[t].anch.href = '#';
				this.tabs[t].anch.index = t;
				this.tabs[t].anch.ref = this;
				this.tabs[t].anch.onclick = function clickTab(){

					this.ref.tabs[this.index].selected = true;

					for(var tIndex=0;tIndex<this.ref.tabs.length;tIndex++){

						if( tIndex != this.index ) this.ref.tabs[tIndex].selected = false;
						this.ref.tabs[tIndex].td_left.innerHTML = "<img src='./images/classic_tab/left_tab" + ( (this.ref.tabs[tIndex].selected)?("_selected"):("") ) + ".gif' height=23>";
						this.ref.tabs[tIndex].td_center.style.background = "url(./images/classic_tab/top_tab" + ( (this.ref.tabs[tIndex].selected)?("_selected"):("") ) + ".gif)";
						this.ref.tabs[tIndex].td_right.innerHTML = "<img src='./images/classic_tab/right_tab" + ( (this.ref.tabs[tIndex].selected)?("_selected"):("") ) + ".gif' height=23>";
						this.ref.tabs[tIndex].anch.style.color = ( (this.ref.tabs[tIndex].selected)?("#000000"):("#FFFFFF") );
					}

					this.ref.setTabContent();
					return false;
				}
				this.cells[0][cIndex].appendChild( this.tabs[t].anch );

			this.rows[0].appendChild( this.cells[0][cIndex] );
			this.tabs[t].td_center = this.cells[0][cIndex];

			cIndex = this.cells[0].length
			this.cells[0][cIndex] = document.createElement("TD");
			this.cells[0][cIndex].style.fontSize = "1px";
			this.cells[0][cIndex].width = 12;
			this.cells[0][cIndex].height = 23;
			this.cells[0][cIndex].vAlign = 'bottom';
			this.cells[0][cIndex].innerHTML = "<img src='./images/classic_tab/right_tab" + ( (this.tabs[t].selected)?("_selected"):("") ) + ".gif' height=23>";
			this.rows[0].appendChild( this.cells[0][cIndex] );
			this.tabs[t].td_right = this.cells[0][cIndex];
		}

		cIndex = this.cells[0].length
		this.cells[0][cIndex] = document.createElement("TD");
		this.cells[0][cIndex].style.fontSize = "3px";
		this.cells[0][cIndex].width = this.width;
		this.cells[0][cIndex].height = 23;
		this.cells[0][cIndex].style.background = "url(./images/classic_tab/top.gif)";
		this.cells[0][cIndex].innerHTML = "&nbsp;";
		this.rows[0].appendChild( this.cells[0][cIndex] );

		cIndex = this.cells[0].length
		this.cells[0][cIndex] = document.createElement("TD");
		this.cells[0][cIndex].style.fontSize = "6px";
		this.cells[0][cIndex].width = 13;
		this.cells[0][cIndex].height = 23;
		this.cells[0][cIndex].vAlign = 'bottom';
		this.cells[0][cIndex].innerHTML = "<img src='./images/classic_tab/right_top_corner.gif' width=13>";
		this.rows[0].appendChild( this.cells[0][cIndex] );

		//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 = "3px";
		this.cells[1][0].width = 13;
		this.cells[1][0].height = this.height;
		this.cells[1][0].style.background = "url(./images/classic_tab/left.gif)";
		this.cells[1][0].innerHTML = "&nbsp;";
		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 = "left";
		this.cells[1][1].vAlign = "top";
		this.cells[1][1].colSpan = 1 + ( this.tabs.length * 3 );
		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 = "3px";
		this.cells[1][2].width = 13;
		this.cells[1][2].height = this.height;
		this.cells[1][2].style.background = "url(./images/classic_tab/right.gif)";
		this.cells[1][2].innerHTML = "&nbsp;";
		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 = 13;
		this.cells[2][0].height = 13;
		this.cells[2][0].innerHTML = "<img src='./images/classic_tab/left_bottom_corner.gif' width=13>";
		this.rows[2].appendChild( this.cells[2][0] );

		this.cells[2][1] = document.createElement("TD");
		this.cells[2][1].style.fontSize = "3px";
		this.cells[2][1].width = this.width;
		this.cells[2][1].height = 13;
		this.cells[2][1].colSpan = 1 + ( this.tabs.length * 3 );
		this.cells[2][1].style.background = "url(./images/classic_tab/bottom.gif)";
		this.cells[2][1].innerHTML = "&nbsp;";
		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 = 13;
		this.cells[2][2].height = 13;
		this.cells[2][2].innerHTML = "<img src='./images/classic_tab/right_bottom_corner.gif' width=13>";
		this.rows[2].appendChild( this.cells[2][2] );

		ParentObject.appendChild( this.table );
	}

	this.write = function WriteTabArea( tabIndex, Text ){

		if( tabIndex >= 0 && tabIndex < this.tabs.length )
			this.tabs[tabIndex].html += Text;

		if( this.tabs[tabIndex].selected )
			this.body.innerHTML = this.tabs[tabIndex].html;
	}

	this.appendTab = function AppendTabContent( tabIndex, appenedObject ){

		this.tabs[tabIndex].container.appendChild( appenedObject );
		this.setTabContent();
	}

	this.setTabContent = function SetContentOfBodyTabArea(){

		for(var t=0;t<this.tabs.length;t++){

			if( this.tabs[t].selected ){

				for(var c=0;c<this.body.childNodes.length;c++){this.body.removeChild( his.body.childNodes[c] );}
				for(var c=0;c<this.tabs[t].container.childNodes.length;c++){this.body.appendChild(this.tabs[t].container.childNodes[c]);}
				break;
			}
		}
	}
}