var Tab=Class.create();

Tab.prototype={
	initialize:function(tab_area,btn_height,bgcolor) {
		this.index="";
		this.m_Div=new Hash();
		this.m_OnImg=new Array();
		this.m_OffImg=new Array();

		this._tab_area=tab_area;

		this._width=tab_area.getWidth();
		this._height=tab_area.getHeight();
		if (btn_height) this._btn_height=btn_height;
		if (bgcolor) this._background=bgcolor;
	},

	addTab:function(on_img,off_img,div,width) {
		this.m_Div[div.id]=div;

		this.m_Div.set(div.id,div);

		div.setStyle({
			width:this._width+'px',
			height:this._height+'px',
			position:'absolute',
			background:this._background,
			zIndex:100
		});

		div.hide();


		var i_on=new Element("img",{src:on_img,name:div.id});
		this.m_OnImg[this.m_OnImg.length]=i_on;
		this._tab_area.insert(i_on,{position:'before'});

		i_on.width=width;

		var i_off=new Element("img",{src:off_img,name:div.id});
		i_off.observe('click',(function() {
			this.activeTab(div.id);
		}).bind(this));

		this.m_OffImg[this.m_OffImg.length]=i_off;
		this._tab_area.insert(i_off,{position:'before'});

		i_off.width=width;

		this._tab_area.insert(div,{position:'bottom'});

		//this._tab_area.style.cursor='hand';

	},

	addMoreBtn:function(imgLoc) {
		var btn=new Element("img",{src:imgLoc});
		this.m_MoreBtn=btn;
	},

	addTabAjax:function(on_img,off_img,div,url) {
		this.m_Div[this.m_Div.length]=div;

		div.setStyle({
			width:this._width+'px',
			height:this._height+'px',
			position:'absolute',
			background:this._background,
			zIndex:100
		});

		div.hide();

		new Ajax.Request(url,{
			method:'get',
			onSuccess: function(transport) {
				div.innerHTML="";
				div.innerHTML=transport.responseText;
			},
			onFailure: function() {
				alert("fail");
			}
		});

		var i_on=new Element("img",{src:on_img,rel:div.id});
		this.m_OnImg[this.m_OnImg.length]=i_on;
		this._tab_area.insert(i_on,{position:'before'});

		var i_off=new Element("img",{src:off_img,rel:div.id});
		i_off.observe('click',(function() {
			this.activeTab(div.rel);
		}).bind(this));
		this.m_OffImg[this.m_OffImg.length]=i_off;
		this._tab_area.insert(i_off,{position:'before'});
		this._tab_area.insert(div,{position:'bottom'});
	},

	showButton:function(index) {
		this.m_OnImg.each(function(item) {
			if (index==item.name) {
				item.show();
			} else {
				item.hide();
			}
		});
		this.m_OffImg.each(function(item) {
			if (index!=item.name) {
				item.show();
				item.style.cursor='hand';
			} else {
				item.hide();
			}
		});

		var t=this._tab_area;
		var h=this._btn_height;
		this.m_Div.each(function(item) {
			item[1].setStyle({
				left:t.cumulativeOffset().left+'px',
				top:t.cumulativeOffset().top+h+'px'
			});
		});

		if (this.m_MoreBtn) {
			t.insert(this.m_MoreBtn,{position:'bottom'});
		}
	},

	activeTab:function(i) {
		this.unselectTab(i);

		this.showButton(i);
		this.index=i;

		this.m_Div[i].show();
	},

	unselectTab:function(i) {
		this.m_Div.each(function(item) {
			item[1].hide();
		});
	}
}