/*
** Filename:	tab.class.js
**
**
**
**
**
**
**
*/


//class
function tab( parent , RES_DIR )
{
	this.parent = parent;
	if( typeof parent == "string" )this.parent = document.getElementById( parent );	
	this.parent.valign="bottom";
	
	
	//var IMG_LEFT_TOP_GRAY = new Image();	
	var IMG_LEFT_TOP_GRAY = RES_DIR + "TopLeftGray.png";
	
	//alert( "Yes" );
	var prevSelected = null;
	
	var tabs = new Array();
	var _this = this;
	
	this.tabGroup = null;
	
	this.outbox = document.createElement("DIV");
	this.parent.insertBefore(this.outbox, this.parent.firstChild);
	
	this.thebody = document.createElement("TABLE");
	this.outbox.appendChild( this.thebody );
	
	this.thebody.style.borderStyle="none";
	this.thebody.style.borderWidth="0px";
	this.thebody.border = 0;
	this.thebody.cellPadding  = 0;
	this.thebody.cellSpacing = 0;
	//this.thebody.style.width = "100%";

	var tbody = document.createElement("TBODY");
	this.thebody.appendChild( tbody );
	
	this.theRow = tbody.insertRow(-1);
	
	var theTopLeftCell =this.theRow.insertCell( -1 );
	theTopLeftCell.style.width = "12px";
	theTopLeftCell.style.height = "25px";
	theTopLeftCell.appendChild( document.createElement("div" ) ).style.width = "12px";
	
	theTopLeftCell.style.backgroundImage = "url("+IMG_LEFT_TOP_GRAY+")";
	theTopLeftCell.style.backgroundPosition = "left top";
	theTopLeftCell.style.backgroundRepeat = "no-repeat";
	
	//methods
	this.addTab = function( name, method ,value )
	{
		if( tabs.length >= 1  )
		{
			tabs[tabs.length - 1].rightEnd.style.backgroundColor = "#666666";
		}
		
		var tab = new tabItem( _this , tabs[tabs.length-1] ,  name, method , value , RES_DIR );	
		tabs[tabs.length] = tab;

		tab.rightEnd.style.backgroundColor = "";
					
		//tab.setIsSelected( false );
		return tab;
	};
	 
	
	this.unSelectPrev = function( tabobj )
	{
		
		if( prevSelected != null && tabobj !=  prevSelected  )
		{
			prevSelected.setIsSelected( false );
		}		
		prevSelected = tabobj;
		//return; 
	};
	
	
	this.setTopLeft = function( img )
	{
		theTopLeftCell.style.backgroundImage = "url("+ img +")";
	};
	
	this.isLastTab = function( tabobj )
	{
		return ( tabobj == tabs[ tabs.length -1 ] );
	};
	
	this.getTabs = function()
	{
		return tabs;
	};
}


//CLASS
function tabItem( parent ,prevItem, name, method, value , RES_DIR )
{
	//var RES_DIR = "./scripts/tab/img/";
	
	var IMG_LEFT_TOP = new Image();
	IMG_LEFT_TOP.src = RES_DIR + "LeftEndSelected.png";
	
	var IMG_LEFT_TOP_GRAY = new Image();
	IMG_LEFT_TOP_GRAY.src = RES_DIR + "TopLeftGray.png";
	
	var IMG_LEFT_END_SELECTED = new Image();
	IMG_LEFT_END_SELECTED.src = RES_DIR + "LeftEndSelected.png";
	
	var IMG_LEFT_END = new Image();
	IMG_LEFT_END.src = RES_DIR + "LeftEnd.png";
	
	var IMG_LAST_TAB_GRAY = new Image();
	IMG_LAST_TAB_GRAY.src = RES_DIR + "RightEndGray.png";
	
	var IMG_LAST_TAB_SELECTED = new Image();
	IMG_LAST_TAB_SELECTED.src = RES_DIR + "LastTabSelected.png";
	
	var IMG_RIGHT_END = new Image();
	IMG_RIGHT_END.src = RES_DIR + "LeftEnd.png";
	
	var IMG_RIGHT_END_SELECTED = new Image();
	IMG_RIGHT_END_SELECTED.src =RES_DIR + "LastTabSelected.png";
	
	var IMG_RIGHT_END_GRAY = new Image();
	IMG_RIGHT_END_GRAY.src = RES_DIR + "RightEndGray.png";
	
	var _this = this;
	
	this.name = name;
	this.method = method;
	this.parent = parent;
	this.outbox = null;
	this.value = value || "";
	
	this.isSelected = false;

	this.thebody = this.parent.theRow.insertCell( -1 );
	this.thebody.align="center";
	this.thebody.valign="middle";
	this.thebody.style.backgroundColor = "#666666";
	this.thebody.style.paddingLeft = this.thebody.style.paddingRight = "10px";
	this.thebody.style.color = "#FFFFFF";
	this.thebody.style.cursor = "pointer";
	this.thebody.style.fontSize = "12px";
	
	this.thebody.innerHTML = name;
	
	this.thebody.style.whiteSpace = "nowrap";
	
	this.rightEnd =this.parent.theRow.insertCell( -1 );
	this.rightEnd.style.backgroundImage = "url("+IMG_LAST_TAB_GRAY.src+")";
	this.rightEnd.style.backgroundPosition = "right top";
	this.rightEnd.style.backgroundRepeat = "no-repeat";
	//this.rightEnd.style.backgroundColor = "#666666";
	this.rightEnd.style.width = "12px";
	this.rightEnd.appendChild( document.createElement("div" ) ).style.width = "12px";
	
	//event
	this.thebody.onclick = function( event )
	{
			_this.setIsSelected( true );
	
			if( typeof _this.method == "function"  )
			{	
				_this.method( _this );
			}
			else if( typeof _this.method == "string" )
			{
				eval( _this.method );	
			}
			
		if( window.event ) event = window.event;
		event.cancelBubble = true;
	};
	
	this.thebody.onmouseover = function(event)
	{
		//this.thebody.style.color = "#2eccff";
		
	};


	this.thebody.onmouseout = function(event)
	{
		//this.thebody.style.color = "#FFFFFF";

		
	};	
	
	
	//method
	this.setBgImg = function( str )
	{
		this.rightEnd.style.backgroundImage = "url("+str+")";
	};
	
	this.setBgColor = function( str )
	{
		this.thebody.style.backgroundColor = str;
	};
	
	
	this.setIsSelected = function( bool )
	{
		this.isSelected = bool;
		
		if( this.isSelected )
		{
			if( this.parent.tabGroup != null  )
			{
				this.parent.tabGroup.unSelectPrev( _this );
			}
			else
			{
				this.parent.unSelectPrev( _this );
			}
			
			if( prevItem )
			{
				prevItem.setBgImg( IMG_LEFT_END_SELECTED.src  );
			}
			else
			{
				this.parent.setTopLeft( IMG_LEFT_TOP.src );
			}
			
			if(  this.parent.isLastTab( this ) )
			{
				this.setBgImg(  IMG_LAST_TAB_SELECTED.src );
				//this.rightEnd.style.backgroundColor = "";
			}
			else
			{
				this.setBgImg(  IMG_RIGHT_END_SELECTED.src  );
				//this.rightEnd.style.backgroundColor = "#999999";
			}
			
			this.thebody.style.backgroundImage = "";
			this.setBgColor( "#FFFFFF" );
			this.thebody.style.color = "#000000";

			//this.parent.theRow
		}
		else
		{
			
			this.thebody.style.backgroundColor = "#666666";
			this.thebody.style.color = "#eeeeee";
			
			//this.setBgImg(  IMG_RIGHT_END_SELECTED_GRAY.src );
			
			if( prevItem  )
			{
				if( prevItem.isSelected  )
				{
					prevItem.setBgImg( IMG_RIGHT_END_SELECTED.src );
				}
				else
				{
					prevItem.setBgImg( IMG_RIGHT_END.src );
				}
			}
			else
			{
				this.parent.setTopLeft( IMG_LEFT_TOP_GRAY.src );
			}
			
			if( this.parent.isLastTab( this ) )
			{
				//alert( "Yes" );
				this.setBgImg( IMG_RIGHT_END_GRAY.src );
				//this.rightEnd.style.backgroundColor = "";
			}
			else
			{
				this.setBgImg( IMG_RIGHT_END.src );
			}
			
		}
		
	};
	
}



function tabGroup( parent, maxtabsinbar , RES_DIR )
{
	_this = this;
	this.tabs = new Array();
	this.tabItems = new Array();
	
	var RES_DIR = RES_DIR || "./tab/img/";
	
	this.parent = parent;
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );	

	this.addTab = function( tab )
	{
		_this.tabs[ this.tabs.length ] = tab;
		tab.tabGroup = _this;
		
		if( true )
		{
			tab.outbox.style.marginLeft = (( _this.tabs.length-1 )*12 )+"px";
			tab.outbox.style.marginRight = (( _this.tabs.length-1 )*12 )+"px";
		}
		return tab;
	};
	
	this.addTabItem = function( name, method, value )
	{
		var theitem;
		if( _this.tabs.length > 0 && _this.tabs[ _this.tabs.length - 1 ].getTabs().length < maxtabsinbar  )
		{
			theitem = _this.tabs[ _this.tabs.length - 1 ].addTab( name, method, value ); 
		}
		else
		{
			thetab = new tab( parent , RES_DIR );
			//alert( thetab.thebody.tagName );
			_this.addTab( thetab );
			theitem = thetab.addTab( name, method, value ); 
		}
		
		_this.tabItems[ this.tabItems.length ] = theitem;
		
		return theitem;
	};
	
	this.selectTabByValue = function( value )
	{
		for(var i=0;i< _this.tabItems.length ;i++  )
		{
			if( _this.tabItems[i].value == value )
			{
				_this.tabItems[i].setIsSelected( true );
				_this.tabItems[i].method( _this.tabItems[i] );
				return;
			}
		}
	}
	
	
	this.unSelectPrev = function( tabitem )
	{
		for( var i=0;i< this.tabs.length;i++ )
		{
			this.tabs[ i ].unSelectPrev( tabitem );
		}
	};
	
}