function TabbedPanel( panelID, tabIndex, extensions )
{
	this.panelID = panelID;
	this.selectedPanel = null;
	this.selectedTab  = null;
	this.scrollableSpacer = null;
	this.tabs = null;
	this.scroller =  null;
	this.scrollerLocked = false;
	this.extensions = {};
	this.directEditActivated = new Array();
	this.directEditActivated[tabIndex] = true;
	if( extensions )
	{
		this.extensions = extensions;
	}
	
	
	
	var This = this;
	
	$(".panel[panel="+this.panelID+"]", "#" + this.panelID ).each( function(i) {

		if (i == tabIndex) 
		{
			This.selectedPanel = $(this);
			
		}
		else
		{
			$(this).addClass('invisible');
		}
	});
	
	$(".tab[panel="+this.panelID+"]", "#" + this.panelID).each( function(i) {

		var width = $(this).width();
		$(this).addClass("selected");
		var selWidth = $(this).width();
		$(this).css('width', (selWidth >= width ? selWidth : width) + "px");
		if (i == tabIndex) 
		{		
			This.selectedTab = $(this);
		}
		if( i != tabIndex )		{

			$(this).removeClass("selected");
		}
		
	});

	
	if(this.selectedPanel.hasClass('editable'))
	{
		this.tabs = $(".tabs[panel="+this.panelID+"]", "#" + this.panelID ).addClass('editable');
	}
	else
	{
		this.tabs = $(".tabs[panel="+this.panelID+"]", "#" + this.panelID ).removeClass('editable');
	}
	
	this.scrollableSpacer = $(".scrollable_spacer[panel="+this.panelID+"]", "#" + this.panelID );
	this.tabs = $(".tabs", "#" + this.panelID );
	
	
	
	this.refreshTabs = function()
	{
		
		var lastTab;
		var tabs = $(".tab",this.scrollableSpacer);
		tabs.each(function( i ){
			var tab = $(this);
			tab.removeClass("nohr");
			if( lastTab )
			{
				
				if( lastTab.position().top != tab.position().top )
				{
					lastTab.addClass('nohr');
				}
				if( i+1 == tabs.size() )
				{
					tab.addClass('nohr');
				}
			}
			lastTab = tab;
		});		
	};
	
	this.refreshScroller = function()
	{
		if( this.scrollableSpacer.height() > this.tabs.height() )
		{
			this.tabs.addClass('scrollable');
			this.scroller = $( ".scroller", this.tabs );
			this.scroller.addClass("up_off");
			this.scroller.addClass("down_off");
		}
		else
		{
			this.tabs.removeClass('scrollable');
			this.scroller = null;
		}
		if( this.scroller )
		{			
			var position = this.scrollableSpacer.position();
			var height = this.scrollableSpacer.height();
						
			if( height - this.tabs.height() + position.top -this.tabs.height() >= 0 )
			{
				This.scroller.removeClass("down_off");
			}
			if( position.top < 0 )
			{
				This.scroller.removeClass("up_off");
			}
			
		}
		this.scrollerLocked = false;
	};
	
	this.refresh = function()
	{
		this.refreshTabs();
		this.refreshScroller();
		if( $.isFunction( this.extensions.refreshTabs ) )
		{
			this.extensions.refreshTabs( this );
		}
		
	};
	
	
		
	this.scrollUp = function()
	{
		if( !this.scrollerLocked && !this.scroller.hasClass("down_off") )
		{
			this.scrollerLocked = true;
			var top = this.scrollableSpacer.position().top -this.tabs.height();
			top = top + "px";
			this.scrollableSpacer.animate({ 
			        top: top 		        
		      	}, 
		      	 200, "linear", function(){ This.refresh(); });
		}
	
	};
	
	this.scrollDown = function()
	{
		if( !this.scrollerLocked  && !this.scroller.hasClass("up_off") )
		{
			this.scrollerLocked = true;
			var top = (this.scrollableSpacer.position().top + this.tabs.height());
			top = top + 'px';
			this.scrollableSpacer.animate({ 
		        top:top 		        
	      	}, 
	      	 200, "linear", function(){ This.refresh(); });
		}
	};
	
	this.select =  function(tab, tabIndex)
	{
		
		if (this.selectedPanel) 
		{

			this.selectedPanel.addClass("invisible");
		}		
		if (this.selectedTab) 
		{
			this.selectedTab.removeClass("selected");
		}
		
		this.selectedTab = $(tab);
		this.selectedPanel = $("#" + this.panelID + tabIndex);
		this.selectedPanel.removeClass("invisible");
		this.selectedTab.addClass("selected");
				
		var action = this.selectedPanel.attr("action");
		if( action )
		{
			this.selectedPanel.removeAttr("action");
			
			this.selectedPanel.addClass("ajax_loading");
			var directEditParams = 
			{
				backlink : DirectEdit.backlink,
				closelink : DirectEdit.closelink,
				locale : DirectEdit.locale	
			}
			this.selectedPanel.load( action,directEditParams,function(){
				This.selectedPanel.removeClass("ajax_loading");
				This.doPostTabSelection(This,tabIndex);
			});
						
		}
		else
		{
			this.doPostTabSelection(this,tabIndex);
		}
	};
	
	this.doPostTabSelection = function( tabbedPanel, tabIndex )
	{
		if(tabbedPanel.selectedPanel.hasClass('editable'))
		{
			tabbedPanel.tabs = $(".tabs[panel="+tabbedPanel.panelID+"]", "#" + tabbedPanel.panelID ).addClass('editable');
		}
		else
		{
			tabbedPanel.tabs = $(".tabs[panel="+tabbedPanel.panelID+"]", "#" + tabbedPanel.panelID ).removeClass('editable');
		}
		/** checks if direct edit function exists*/
		try
		{
			if( func_ocms_de_reposition && !tabbedPanel.directEditActivated[tabIndex]  )
			{
				DirectEdit.reinit("#" + tabbedPanel.panelID + tabIndex);
				tabbedPanel.directEditActivated[tabIndex] = true;
			}
		}
		catch( e )
		{
			//die ie			
		}
		if( $.isFunction( tabbedPanel.extensions.onTabSelect ) )
		{
			
			tabbedPanel.extensions.onTabSelect( tabbedPanel );
		}
		tabbedPanel.refresh();
	};
	
	
	this.toggleEditor = function()
	{
		var editor = $(".editor",this.selectedPanel);
		editor.toggleClass('invisible');
		
	};

	this.refresh();
		
}