/** 
 * class: TabPanel
 * args: parent - Container Element
 *       thisString - name of global variable which keep this reference for TabPanel
 *       width - width of the Panel
 */
TabPanel = function(parent, thisString, width)
{
	this.init(parent, thisString, width);
}


TabPanel.prototype =
{
	parent: null, //some container element
	thisString: "", // how this should be taken
	
	tabs: Array(),
	count: 0,
	
	selectedTab: 0,
	
	TAB_WIDTH: 120,
	width: 0,
	
	onSelectFn: null,
	
	tabHeader: null,
	tabBodyInner: null,
	tabBodyOuter: null,
	tabRemaining: null,
	
	init: function( parent, thisString, width)
	{
		this.parent = parent;
		if( thisString == null )
		{
			alert( "wrong_use of tab. theString cannot be null");
		}
		this.thisString = thisString;
		
		if( width == null )
		{
			alert( "wrong_use of tab. width cannont be null");
		}
		this.width = width;
		
	},
	
	// copied from yui
	browser : function() {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.indexOf('opera')!=-1) { // Opera (check first in case of spoof)
		 return 'opera';
		} else if (ua.indexOf('msie 7')!=-1) { // IE7
		 return 'ie7';
		} else if (ua.indexOf('msie') !=-1) { // IE
		 return 'ie';
		} else if (ua.indexOf('safari')!=-1) { // Safari (check before Gecko because it includes "like Gecko")
		 return 'safari';
		} else if (ua.indexOf('gecko') != -1) { // Gecko
		 return 'gecko';
		} else {
		 return false;
		}
	},
	
	show: function()
	{
		var totalWidth = this.count * this.TAB_WIDTH;
		
		if( this.width < totalWidth +15 )
		{
			this.width = totalWidth +15 ;
		}
		innerHTML = "<div id=\"tabHeader" + this.thisString + "\" style=\"float:left; width:" + this.width+ "px\" >";;
		
		for( i = 0; i < this.count; i ++ )
		{
			innerHTML += "<div style=\"float:left; width:" + this.TAB_WIDTH+ "px\" ";
			
			innerHTML += "onClick=\"eval('"+ this.thisString + ".selectTab("+i+")');\">";
			
			if( this.selectedTab == i )
			{
				innerHTML += "<div class=\"bottom_selected\"><div class=\"right\">"+
				               "<div class=\"left_selected\"><div class=\"top_selected\">"; 
				innerHTML += "<div class=\"tl_selected\"><div class=\"tr_selected\">";
			}
			else
			{
				innerHTML += "<div class=\"bottom\"><div class=\"left\"><div class=\"right\"><div class=\"top\">";
				innerHTML += "<div class=\"tl\"><div class=\"tr\">";
			}
			
			innerHTML += this.tabs[i].title;
			
			innerHTML += "</div></div></div></div>";
			innerHTML += "</div></div>"; 
			innerHTML += "</div>"; 
		}
					
		// to fill the empty parts
		var remaining = this.getRemainingWidth();
		
		innerHTML += "<div id=\"tabRemaining" + this.thisString + "\" style=\"float:left; width:" + remaining+ "px\" ";
		innerHTML += "<div class=\"bottomremaining\">";
		innerHTML += "&nbsp;";
		innerHTML += "</div>";
		innerHTML += "</div>";
				
		innerHTML += "</div>";
		
		// fill the body
		innerHTML += "<div style=\"float:left; width:" + this.width+ "px\" id=\"tabBodyOuter" + this.thisString + "\">";
		
		innerHTML += "<div class=\"bottombody\"><div class=\"leftbody\"><div class=\"right\">";
		innerHTML += "<div class=\"br\"><div class=\"bl\"><div id=\"tabBodyInner" + this.thisString + "\" class=\"tr\">";
		
		innerHTML += this.tabs[this.selectedTab].innerHTML;
		
		innerHTML += "</div></div></div>";
		innerHTML += "</div></div></div>"; 
		innerHTML += "</div>";
		
		this.parent.innerHTML = innerHTML;
		
		this.tabHeader = document.getElementById( 'tabHeader'+ this.thisString );
		this.tabRemaining = document.getElementById( 'tabRemaining'+ this.thisString );
		this.tabBodyInner = document.getElementById( 'tabBodyInner'+ this.thisString );
		this.tabBodyOuter = document.getElementById( 'tabBodyOuter'+ this.thisString );
	},
	
	getRemainingWidth: function()
	{
		var totalWidth = this.count * this.TAB_WIDTH;
		
		var remaining = this.width - totalWidth;
		if( this.browser() == 'ie' || this.browser() == 'ie7' )
		{
			remaining -= 15;
		}
		else
		{
			remaining -= 5;
		}
		return remaining;
	},
	
	setWidth: function( width )
	{
		
		var totalWidth = this.count * this.TAB_WIDTH;
		if( width < totalWidth + 15)
		{
			return;
		}
		this.width = width;
		
		if( this.tabRemaining != null )
		{
			this.tabRemaining.style.width = this.getRemainingWidth() + "px";
		}
		if( this.tabHeader != null )
		{
			this.tabHeader.style.width = width + "px";
		}
		if( this.tabBodyOuter != null )
		{
			this.tabBodyOuter.style.width = width +"px";
		}
	},
	
	getTabBody: function()
	{
		return this.tabBodyInner;
	},
	
	selectTab: function( t)
	{
		if( typeof t == "number" )
		{
			this.selectedTab = t;
			t = this.tabs[t];
		}
		else
		{
			for( i = 0; i < this.count; i ++ )
			{
				if( this.tabs[i] == t || 
					this.tabs[i].title == t.title ) //tabs need not to be the same..
				{
					this.selectedTab = i;
				}
			}
		}
		this.show();
		if( this.onSelect != null )
		{
			this.onSelect( t);
		}
		if( this.tabBodyInner != null )
		{
			//this.tabBodyInner.innerHTML = t.innerHTML;
		}
	},
	
	addTab: function( t)
	{
		this.tabs[this.count] = t;
		this.count ++;
	},
	
	removeTab: function( t)
	{
		found = false;
		for( i = 0; i < this.count; i ++ )
		{
			if( found )
			{
				this.tabs[i-1] = this.tabs[i]; //shift everything
			}
			if( (typeof t == "number" && t == i )
			    ||(this.tabs[i] == t || 
			       this.tabs[i].title == t.title)  ) //tabs need not to be the same..
			{
				found = true;
			}
		}
		if( found )
		{
			this.count --;
		}
	},
	
	setOnSelect: function(onSelect)
	{
		this.onSelect = onSelect;
	},
	
	reset: function()
	{
		this.count = 0;
	},
	
	toString: function()
	{
		str = "";
		for( i = 0; i < this.count; i ++ )
		{
			str += this.tabs[i].title;
			if( i != this.count -1 )
			{
				str += ",";
			}
		}
	},
	
	getCount: function()
	{
		return this.count;
	},
	
	final: null
}

/** 
 * class: Tab
 * args: title - Title of the tab
 */
Tab = function( title, innerHTML)
{
	this.init( title, innerHTML);
}

Tab.prototype = 
{
	title: "",
	id: null,
	
	innerHTML: "", 
	
	init: function(title, innerHTML)
	{
		this.title = title;
		if( innerHTML != null )
		{
			this.innerHTML = innerHTML;
		}
	},
	
	setInnerHTML: function( innerHTML )
	{
		this.innerHTML = innerHTML;
	},
	
	final: null
}