AWP.Layer.TabPanel = function(config) {
	AWP.Layer.TabPanel.superclass.constructor.call(this, config);
}

Ext.extend(AWP.Layer.TabPanel, Ext.TabPanel, {
	container: null,
	autoDestroy: true,
	expandHeight: function(southPanel) {
		var height = southPanel.getInnerHeight();
		this.setHeight(height);
		this.fireEvent('bodyresize', this);
	},
	adjustHeight: function(tabPanel, tab, pos) {
		var southPanel = AWP.mainPanel.getComponent('south');
		var height = southPanel.getInnerHeight() - document.getElementById('tab_title').offsetHeight - 2;
		this.setHeight(height);
	},
	adjustSEAWAHeight: function(tabPanel, tab, pos) {
		this.setHeight(this.initialConfig.height);
	},
/*	onBeforeRemoveTab: function(tabPanel, tab) {
		tab.fireEvent('close');
	},*/
	onRemove : function(tabPanel, item){
		AWP.Layer.TabPanel.superclass.onRemove.apply(this, arguments);
		if (this.items.length == 0) {
			//this.southPanel.collapse();
		}
	},
	adjustWidth: function() {
		this.setWidth(document.getElementById('seawa-tabpanel').offsetWidth - 10);
		AWP.map.updateSize();
	},
	CLASS_NAME: "AWP.Layer.TabPanel"
});

AWP.Layer.TabPanel.AWP = function() {
	var config = {
		renderTo: 'grid'
	};
	
	/**
	 * Outer TabPanel with border and inner GridPanel without border are better
	 */
	config.border = true;
	//config.style = 'border: 1px solid red';
	/**
	 * We use this because the background of the title is similar with the title of the south region
	 */
	config.plain = true;
	//config.minTabWidth = 200;
	//config.defaults = {autoScroll: true};
	//config.resizeTabs = true; // turn on tab resizing
	
	config.autoWidth = true;
	/**
	 * We have to register event to observe the height change of the outter south region
	 * see @expandHeight method
	 */
	//config.autoHeight = true;
	config.enableTabScroll = true;
	
	var tabPanel = new AWP.Layer.TabPanel(config);
	
	tabPanel.addListener('add', tabPanel.adjustHeight, tabPanel);
	//this.addListener('beforeremove', this.onBeforeRemoveTab, this);
	
	return tabPanel;
}

AWP.Layer.TabPanel.SEAWA = function(config) {
	var config = config || {};
	
	/**
	 * Outer TabPanel with border and inner GridPanel without border are better
	 */
	config.border = true;
	/**
	 * 2009-07-13 Ma: this style is very important for the tabpanel's flex 
	 */
	//config.style = 'position: absolute';
	//config.height = 150;
	
	//config.width = document.getElementById('seawa-tabpanel').offsetWidth - 10;
	/**
	 * We use this because the background of the title is similar with the title of the south region
	 */
	config.plain = false;
	//config.minTabWidth = 200;
	//config.defaults = {autoScroll: true};
	//config.resizeTabs = true; // turn on tab resizing
	
	//config.autoWidth = true;
	/**
	 * We have to register event to observe the height change of the outter south region
	 * see @expandHeight method
	 */
	//config.autoHeight = true;
	config.enableTabScroll = true;
	
	/*config.items = [
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'},
		{title: 'test long title', html: 'test content'}
	];*/
	
	tabPanel = new AWP.Layer.TabPanel(config);
	tabPanel.addListener('add', tabPanel.adjustSEAWAHeight, tabPanel);
	
	return tabPanel;
}