TabPanel = new Class({
	tabContainer:null,
	tabs:[],
	tabContents:[],
	selected:null,
	tabClass:"tab",
	tabContentClass:"tabContent",
	
	initialize: function(){
		var ret = new Element('div');
		var tabindex = new Element('div');
		ret.extend(this);
		tabindex.extend(this);
		return ret, tabindex;
	},
	setHTML: function(html){
		new Element('div').setHTML.apply(this,[html]);
		this.assessHTML();
	},
	assessHTML: function(){
		if(!this.tabContainer){
			this.tabContainer = new Element('div');
			this.tabContainer.injectInside(this);
			this.tabContainer.addClass("tabContainer");
		}
		var _tabs = $ES('.Tab',this);
		for(var x=0; x<_tabs.length; x++){
			var tab = Extensions.replaceTag(_tabs[x],"Tab");
			if(tab)this.addTab(tab);
		}
		var _tabs = $ES('.TabContent',this);
		for(var x=0; x<_tabs.length; x++){
			var tabContent = Extensions.replaceTag(_tabs[x],"TabContent");
			if(tabContent)this.addTabContent(tabContent);
		}
		this.select(this.selected?this.selected:this.tabs[0].getValue());
	},
	select: function(value){
		for(var x=0; x<this.tabs.length; x++){
			var tab = this.tabs[x];
			if(value==tab.getValue()){
				tab.addClass(this.tabClass+"_down");
			}else{
				tab.removeClass(this.tabClass+"_down");
			}
		}
		for(var x=0; x<this.tabContents.length; x++){
			var contents = this.tabContents[x];
			if(value==contents.getValue()){
				contents.setStyle("display","block");
			}else{
				contents.setStyle("display","none");
			}
		}
		this.selected = value;
	},
	addTab: function(tab){
		var myThis = this;
		for(var y=0; y<this.tabs.length; y++){
			if(this.tabs[y]==tab){
				return;
			}
		}
		tab.addClass(this.tabClass);
		tab.remove();
		this.tabs.push(tab);
		var index = this.tabs.length-1;
		tab.addEvent('click',function(){myThis.select(this.getValue());});
		tab.addEvent('focus',function(){myThis.doMouseOver(this);});
		tab.addEvent('mouseout',function(){myThis.doMouseOut(this);});
		tab.addEvent('mouseover',function(){myThis.doMouseOver(this);});
		tab.addEvent('blur',function(){myThis.doMouseOut(this);});
		tab.injectInside(this.tabContainer);
	},
	doMouseOver: function(tab){
		if(tab.getValue()!=this.selected){
			//tab.removeClass(this.tabClass);	
			tab.addClass(this.tabClass+"_over");
		}
	},
	doMouseOut: function(tab){
		tab.removeClass(this.tabClass+"_over");	
		//tab.addClass(this.tabClass);
	},
	addTabContent: function(tabContent){
		var found = false;
		for(var y=0; y<this.tabContents.length; y++){
			if(this.tabContents[y]==tabContent){
				return;
			}
		}
		tabContent.addClass(this.tabContentClass);
		tabContent.remove();
		this.tabContents.push(tabContent);
		var index = this.tabContents.length-1;
		tabContent.injectInside(this);
	}
});
Tab = new Class({
	className:"Tab",
	initialize: function(){
		var ret = new Element('div');
		var tabindex = new Element('div');
		ret.extend(this);
		tabindex.extend(this);
		return ret, tabindex;
	},
	getValue: function(){
		return this.getProperty("ret");
	}
});
TabContent = new Class({
	initialize: function(){
		var ret = new Element('div');
		var tabindex = new Element('div');
		ret.extend(this);
		tabindex.extend(this);
		return ret, tabindex;
	},
	getValue: function(){
		return this.getProperty("ret");
		return this.getProperty("tabindex");
	}
});

Extensions.addReplacableTag("TabPanel",TabPanel);
Extensions.addReplacableTag("noscript",null);

// Fixes tabbing problem in IE6
if (window.ie6) {
	window.addEvent("domready", function() {
		$$(".Tab")[0].addEvent("click", function() { setTimeout('$("netbankLogon").focus()', 100);});
		$$(".Tab")[1].addEvent("click", function() { setTimeout('$("commsecLogon").focus()', 100);});
		$$(".Tab")[2].addEvent("click", function() { setTimeout('$("commbizLogon").focus()', 100);});
	});
}