/************************************************************\
* TabPanel object v1                                         *
* By Andrew Green                                            *
* Supports: NN6+, Moz1+, IE4+		                         *
*                                                            *
* Allows you to make a table into a tab panel makeing the    *
* cells in the first row tabs and the rows after that the    *
* content which is shown when tabs are clicked               *
*                                                            *
*  Constructor                                               *
*    TabPanel(tableElement,optional tabIndex)                *
*  Methods                                                   *
*    show(tabIndex)                                        *
\************************************************************/

function TabPanel(_table,_selected){
	this._table = _table;
	if(_selected)
		this._selected=_selected ;
	else
		this._selected=0;

	for(var i = 0; i<_table.rows[0].cells.length;i++){//loop through settingup the odd rows as title and even as invisable

		 _table.rows[0].cells[i].onclick=function(evt){//set the title rows on mouse down to show its panel
			evt = (evt) ? evt : (window.event) ? window.event : "";
			var _targElem = (evt.target) ? evt.target : evt.srcElement;


			
			//loop through going down the tree to make sure it is a row of stack panel and not of another element
			var _cell=_targElem;
			while(_cell.parentNode.parentNode.parentNode!=self._table){
				_cell=_cell.parentNode;
			}
			
			//self._selected=row.rowIndex/2;//divide the clicked row by half
			
			self.show(_cell.cellIndex);//divide row index in half to get panel id and then show


		}
		//this._table.rows[i+1].style.display = "none";
		this._table.rows[i+1].cells[0].className="tab-body";
		if(i!=this._selected){//if not the selected panel then hide
			this._table.rows[i+1].style.display = "none";
			_table.rows[0].cells[i].className="tab";
		}else{
			this._table.rows[i+1].style.display = "";
			_table.rows[0].cells[i].className="tab-selected";
		}
		
	}
	
	this.show = function(_selected){

			self._table.rows[self._selected+1].style.display="none";//Hide the current open panel before selecting new panel
			_table.rows[0].cells[self._selected].className="tab";

			self._selected=_selected;//set the selected panel

			self._table.rows[self._selected+1].style.display="";//show the new selected panel
			_table.rows[0].cells[self._selected].className="tab-selected";
			
			if(self.callback)
				self.callback(_selected);
		}
		
	var self = this;
	
}