/**
 * @author Christian
 */
function createTab(tabdata, id){
	this.tabData = tabdata;
	this.tab = document.getElementById(id);
	this.tab1 = document.createElement('div');
	this.isIE = false;
	if (document.all) {
		this.isIE = true;
	}
	this.tabGrafic='./images/tab_grp';
}
createTab.prototype.setPicture=function(grp){
	this.tabGrafic=grp;
}
createTab.prototype.setAction=function(act){
	this.tabAction=act;
}

createTab.prototype.initTab=function(){
	this.tab.style.height="78px";
	this.tab.style.background="url("+this.tabGrafic+"/tab_10.gif) bottom repeat-x"
	this.tab1.style.height='78px';
	this.tab1.style.width='25px';
	this.tab1.style.background="url("+this.tabGrafic+"/tab_01.gif) left bottom no-repeat";
	if(this.isIE)
	this.tab1.style.styleFloat="left";
	else
	this.tab1.style.cssFloat="left";
	this.tab2=document.createElement('div');
	this.tab2.style.height='78px';
	this.tab2.style.width='160px';
	this.tab2.style.background="url("+this.tabGrafic+"/tab_02.gif) bottom repeat-x";
	if(this.isIE)
	this.tab2.style.styleFloat="left";
	else
	this.tab2.style.cssFloat="left";
	this.tab2.align="center";

	this.tab3=document.createElement('div');
	this.tab3.style.height='78px';
	this.tab3.style.width='40px';
	this.tab3.style.background="url("+this.tabGrafic+"/tab_03.gif) left bottom no-repeat";
	if(this.isIE)
	this.tab3.style.styleFloat="left";
	else
	this.tab3.style.cssFloat="left";
	
	var firstDiv=document.createElement('div');
	firstDiv.style.width='225px';
	firstDiv.style.height='78px';
	if(this.isIE)
	firstDiv.style.styleFloat="left";
	else
	firstDiv.style.cssFloat="left";
	var a=this.createA(this.tabData[0],0);
	this.tab2.appendChild(a);
	firstDiv.appendChild(this.tab1);
	firstDiv.appendChild(this.tab2);
	firstDiv.appendChild(this.tab3);
	this.tab.appendChild(firstDiv);
	
	for(var i=1;i<this.tabData.length-1;i++){
		var continer=this.createCont();
		a=this.createA(this.tabData[i],i)
		var tab4=this.createTab4();
		tab4.appendChild(a);
		var tab5=this.createTab5();
		continer.appendChild(tab4);
		continer.appendChild(tab5);
		this.tab.appendChild(continer);
	}
	//add last tab
	var continer=this.createCont();
	var tab4=this.createTab4();
	a=this.createA(this.tabData[this.tabData.length-1],this.tabData.length-1);
	tab4.appendChild(a);
	var tab5=this.createTabLast();
	continer.appendChild(tab4);
	continer.appendChild(tab5);
	this.tab.appendChild(continer);
	var cl=document.createElement('div');
	cl.style.clear="both";
	this.tab.appendChild(cl);
}
createTab.prototype.createCont=function(){
		var divCont=document.createElement('div');
		divCont.style.width='200px';
		divCont.style.height='78px';
		if(this.isIE)
		divCont.style.styleFloat="left";
		else
		divCont.style.cssFloat="left";
		return divCont;
	}

createTab.prototype.createTab4=function(){
	var tab4=document.createElement('div');
	tab4.style.height='78px';
	tab4.style.width='160px';
	tab4.style.background="url("+this.tabGrafic+"/tab_04.gif) bottom repeat-x";
	if(this.isIE)
	tab4.style.styleFloat="left";
	else
	tab4.style.cssFloat="left";
	tab4.align="center";
	return tab4;
}
createTab.prototype.createTab5=function(){
	var tab5=document.createElement('div');
	tab5.style.height='78px';
	tab5.style.width='40px';
	tab5.style.background="url("+this.tabGrafic+"/tab_06.gif) bottom left no-repeat";
	if(this.isIE)
	tab5.style.styleFloat="left";
	else
	tab5.style.cssFloat="left";
	return tab5;
}
createTab.prototype.createTabLast=function(){
	var tab5=document.createElement('div');
	tab5.style.height='78px';
	tab5.style.width='40px';
	tab5.style.background="url("+this.tabGrafic+"/tab_09.gif) bottom left no-repeat";
	if(this.isIE)
	tab5.style.styleFloat="left";
	else
	tab5.style.cssFloat="left";
	return tab5;
}
createTab.prototype.createA=function(label,idx){
	var a=document.createElement('a');
	a.href='#';
	a.innerHTML=label;
	a.style.fontSize='16px';
	a.style.textDecoration='none';
	a.style.display='block';
	a.style.paddingTop='18px';
	a.style.fontFamily="Arial";
	a.style.color="white";
	//a.style.fontWeight="bold";
	a.idx=idx;
	a.onclick=function(that){
		return function(){
			that.changeActab(this.idx);
			if(that.tabAction[this.idx]!='' || that.tabAction[this.idx]!=undefined){
				eval(that.tabAction[this.idx]);
			}
			return false;
		}
	}(this);
	return a;
}
createTab.prototype.changeActab=function(tengah){
	var jmlTab=this.tab.childNodes.length-1;
	if (tengah == 0) {
		var Div = this.tab.childNodes[0];
		Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_01.gif) left bottom no-repeat";
		Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_02.gif) bottom repeat-x";
		Div.childNodes[2].style.background = "url(" + this.tabGrafic + "/tab_03.gif) left bottom no-repeat";
		for(var i=1;i<jmlTab;i++){
			Div = this.tab.childNodes[i];
			if (i < jmlTab - 1) {
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_06.gif) left bottom no-repeat";
			}else{
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_09.gif) left bottom no-repeat";
			}
		}
	}
	else 
		if (tengah == jmlTab - 1) {
			var Div = this.tab.childNodes[0];
			Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_11.gif) left bottom no-repeat";
			Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
			Div.childNodes[2].style.background = "url(" + this.tabGrafic + "/tab_07.gif) left bottom no-repeat";
			for (var i = 1; i < jmlTab-2; i++) {
				var Div = this.tab.childNodes[i];
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_07.gif) left bottom no-repeat";
			}
			if (this.tabData.length>2) {
				var Div = this.tab.childNodes[jmlTab - 2];
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_05.gif) left bottom no-repeat";
				var Div = this.tab.childNodes[jmlTab - 1];
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_02.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_08.gif) left bottom no-repeat";
			}else{
				var Div = this.tab.childNodes[jmlTab - 2];
				Div.childNodes[2].style.background = "url(" + this.tabGrafic + "/tab_05.gif) left bottom no-repeat";
				var Div = this.tab.childNodes[jmlTab - 1];
				Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_02.gif) bottom repeat-x";
				Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_08.gif) left bottom no-repeat";
			}
		}
		else {
			for (var i = 0; i < jmlTab; i++) {
				var Div = this.tab.childNodes[i];
				if (i == 0) {
					Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_11.gif) left bottom no-repeat";
					Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
					if (i == tengah - 1) 
						Div.childNodes[2].style.background = "url(" + this.tabGrafic + "/tab_05.gif) left bottom no-repeat";
					else 
						Div.childNodes[2].style.background = "url(" + this.tabGrafic + "/tab_07.gif) left bottom no-repeat";
				}
				else 
					if (i < tengah) {
						Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
						if (i == tengah - 1) 
							Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_05.gif) left bottom no-repeat";
						else 
							Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_07.gif) left bottom no-repeat";
					}
					else 
						if (i == tengah) {
							Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_02.gif) bottom repeat-x";
							Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_03.gif) left bottom no-repeat";
						}
						else 
							if (i == jmlTab - 1) {
								Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
								Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_09.gif) left bottom no-repeat";
							}
							else 
								if (i > tengah) {
									Div.childNodes[0].style.background = "url(" + this.tabGrafic + "/tab_04.gif) bottom repeat-x";
									Div.childNodes[1].style.background = "url(" + this.tabGrafic + "/tab_06.gif) left bottom no-repeat";
								}
			}
		}
}
function test(){
	alert('test');
}