var TabPane = Class.create();
TabPane.prototype =
{
	tabClass: "tab",
	tabOverClass: "tabOver",
	tabOnClass: "tabOn",
	activeTab: false,
	//tabHeight:35,
	startXOffset: 0,
	hgap: -1,
	tabHeight:-1,
	
	tabs: $A(),
	
	initialize:function( containerId )
	{
		this.container = $(containerId);
		this.container.style.position ="relative";
	}
	,

	addTab:function(tabDef)
	{
		Element.hide(tabDef.content);
		this.tabs.push(tabDef);
	}
	,
	/**
	 * draws tabs
	 */
	draw:function()
	{

		var tabHtml = "";
		var newTabs = $A();
		this.tabs.each(function(t)
		{
			var wrapNt = document.createElement("div");
			var nt = document.createElement("div");
			nt.id = "tab_"+t.id; 
			nt.className = "tab";
			nt.appendChild( document.createTextNode(t.name) );
			Element.setStyle(wrapNt,{display:"inline",position:"absolute"});


			if (this.tabHeight > 0 )
			{

			}
			
			wrapNt.appendChild(nt);
			
			this.container.appendChild(wrapNt);
			t.tabEl = nt;
			t.tabElWrapper = wrapNt;
			
			// make html
			// ---------
			//			tabHtml += "<div id='tab_"+t.id+"' style='position:absolute;display:inline'><div id='tabInner_"+t.id+"'class='tab' >"+t.name+"</div></div>";
			//			tabHtml += "<div  style='position:absolute;z-index:10; display:inline' id='tab_"+t.id+"' class='tab' >"+t.name+"</div>";			
		}.bind(this));
//		this.container.innerHTML += tabHtml;
		
		// now figure out heights and position them
		var currentXOffset = this.startXOffset;
		var tabHeight = 0;
		
		var isIe = navigator.userAgent.toLowerCase().indexOf('msie') != -1;
		
		this.tabs.each(function(t)
		{
			var tabEl = t.tabEl;//$('tab_' + t.id);

			var dim = Element.getDimensions(tabEl);
			tabHeight = dim.height+0;
			
			if ( isIe ) tabHeight -= 1;

						
			t.tabElWrapper.style.top = "-" + (tabHeight) + "px";
			t.tabElWrapper.style.left = (currentXOffset+ this.hgap) + "px";

			currentXOffset += dim.width + this.hgap;
			
			// add tab events
			// ---------------
			Event.observe(tabEl,"mouseover",this.tabMouseOver.bind(this));
			Event.observe(tabEl,"mouseout",this.tabMouseOut.bind(this));
			Event.observe(tabEl,"click",this.tabClick.bind(this));

			// attach elements to data def for easy access
			// ----------------------------------------------			
			var cel = $(t.content);
			t.tabEl = tabEl;
			//t.tabInnerEl = tabInnerEl;
			t.contentEl = cel;
			
			
		}.bind(this));

		
		
		this.tabs.each(function(t)
		{
			// hide content pane
			if ( t.contentEl ) Element.hide(t.contentEl);
			else alert("no content pane: " + t.content );
			
		});
		
		
		this.setActiveTabId( this.tabs[0].id );
//		this.container.style.marginTop = tabHeight+"px";
		
	}
	,
	tabMouseOver:function(e)
	{
		var t = Event.element(e);
		Element.addClassName(  t , this.tabOverClass  );
	}
	,
	tabMouseOut:function(e)
	{
		var t = Event.element(e);
		Element.removeClassName(   t , this.tabOverClass  );
	}
	,
	tabClick:function(e)
	{
		var t = Event.element(e);
		var t_id = t.id.substring(9);

	
		var tid = this.tabs.find( function(e)
		{
			if (t  == e.tabEl )
			{
				return e;
			}
		});
		
		this.setActiveTab(tid);

	}
	,
	setActiveTab: function(t)
	{


		// hide all content panes
		// ----------------------
		this.tabs.each( function(e)
		{
			Element.hide(e.contentEl);
			Element.removeClassName(e.tabEl , this.tabOnClass );			
		}.bind(this));

		Element.addClassName(t.tabEl , this.tabOnClass );
		Element.show(t.contentEl );

	}
	,
	onTabOn: function(t)
	{
		return false;
	}
	,
	setActiveTabId: function( id )
	{

		var t = this.tabs.find( function(e)
		{
			return e.id == id;
		});

		if ( t) this.setActiveTab(t);
	
	}
}