var tpdbg = false;
function CATpanel(mainDiv,st){
	var outOfTab = true;
	this.outOfTab = outOfTab;
	this.mainDiv = mainDiv;
	mainDiv.className = "CATmdiv";
	this.tabs = new Array();
	var tabz = this.tabs;
	var act = 0;
	this.actTab = act;
	var x2=0;
	var y2=0;
	
	function changeTab(ele, md){
		outOfTab = false;
		if(ele.className == 'tab'+(act+1))return false;
		//alert(ele.className+'ind: '+ele.style.zIndex);
		tabz[act].style.zIndex = 1;
		setOpacity(tabz[act],(act==1?50:65));
		act = (act==0)?1:0;
		tabz[act].style.zIndex = 2;
		setOpacity(tabz[act],100);
		if(tpdbg)alert('changing tab complete act='+act);
	}
	
	function toggleTab(){
		changeTab(tabz[(act==0?1:0)],null);
		outOfTab = true;
	}
	this.toggleTab=toggleTab;
	
	function checkChange(md,e){
		ec = eventCoords(e);
		for(i in tabz){
			if(isAt(ec[0],ec[1],tabz[i])){
				if(isAt(ec[0],ec[1],tabz[i].childNodes[0])){changeTab(tabz[i],md);return;}
				if(isAt(ec[0],ec[1],tabz[i].childNodes[1])){changeTab(tabz[i],md);return;}
				if(isAt(ec[0],ec[1],tabz[i].childNodes[2])){changeTab(tabz[i],md);return;}
				if(isAt(ec[0],ec[1],tabz[i].childNodes[3])){changeTab(tabz[i],md);return;}
			}
		}
		
	}
	
	function setContent(index, element){
		element.parentNode.removeChild(element);
		tabz[index].childNodes[2].appendChild(element);
		//adjustTabSize(index);
		if(tpdbg)alert('setting content complete');
	}
	
	this.setTabContent = setContent;
	
	function adjustTabSize(index){
		if(tpdbg)alert('adjusting tab size started');
		var size = getSize(tabz[index].childNodes[2].firstChild);
		tabz[index].childNodes[2].style.height = size[1];
		size =0;
		for(i in tabz){
			size1 = getSize(tabz[i]);
			size1 = size1[1];
			size = (size>size1)?size:size1;
		}
		mainDiv.style.height = size;
		setPlacement(null,null);
		if(tpdbg)alert('adjusting tab size complete');
	}
	this.adjustTabSize = adjustTabSize;
	
	function setDesc(index, element){
		element.parentNode.removeChild(element);
		tabz[index].childNodes[0].appendChild(element);
		element.className = 'CATdesc'+index;
		if(tpdbg)alert('setting description complete');
	}
	
	this.setTabDesc = setDesc; 
	
	function addTab(styleName,tabImg,headImg,footImg){
		var tabDiv = document.createElement("DIV");
		tabDiv.className = styleName;
		var tabber = document.createElement("DIV");
		tabber.className = "CATtab";
		var head = document.createElement("DIV");
		head.className = "CAThead";
		var content = document.createElement("DIV");
		content.className = "CATcont";
		var img = document.createElement("IMG");
		img.src = tabImg;
		img.className = "CATimg";
		tabber.appendChild(img);
		var foot = document.createElement("DIV");
		foot.className = "CATfoot";
		var img2 = document.createElement("IMG");
		img2.src = footImg;
		img2.className = "CATimg";
		foot.appendChild(img2);
		var img3 = document.createElement("IMG");
		img3.src = headImg;
		img3.className = "CATimg";
		head.appendChild(img3);
		
		tabDiv.appendChild(tabber);
		tabDiv.appendChild(head);
		tabDiv.appendChild(content);
		tabDiv.appendChild(foot);
		
		this.mainDiv.appendChild(tabDiv);
		this.tabs.push(tabDiv);
		
		img.onclick = function(){ changeTab(tabDiv, mainDiv)};
		tabDiv.onclick = function(event){if(outOfTab)checkChange(mainDiv,event); outOfTab=true;};
		head.onclick = function(){ changeTab(tabDiv, mainDiv)};
		content.onclick = function(){ changeTab(tabDiv, mainDiv)};
		foot.onclick = function(){ changeTab(tabDiv, mainDiv)};
		var ind = (tabz[0]==tabDiv)?0:1;
		if(ind==0)setOpacity(tabDiv,100);
		else setOpacity(tabDiv,50);
		tabz[ind].onmouseout = function(){backOut()};
		tabz[ind].onmouseover = function(e){backOpacity(ind,e);};
		head.onmouseover = function(e){backOpacity(ind,e);};
		head.onmouseout = function(e){backOpacity(ind,e);};
		tabber.onmouseover = function(e){backOpacity(ind,e);};
		tabber.onmouseout = function(e){backOpacity(ind,e);};
		
		if(tpdbg)alert('adding tab complete');
	}
	
	this.addTab = addTab;
	
	function calcTransp(i){
		if(i==0){
			temp = getAbsPos(tabz[i]);
			temp2 = getSize(tabz[i]);
			temp3 = getSize(tabz[i].childNodes[0]);
			tabz[i].transp = [temp[0]+temp3[0],temp[1],temp[0]+temp2[0],temp[1]+temp3[1]];
		}else{
			temp = getAbsPos(tabz[i]);
			temp2 = getSize(tabz[i]);
			temp3 = getSize(tabz[i].childNodes[0]);
			tabz[i].transp = [temp[0],temp[1],temp[0]+temp2[0]-temp3[0],temp[1]+temp3[1]];
		}
	}
	
	function backOpacity(i,e){
		ec = eventCoords(e);
		calcTransp(i);
		if(i==act){
			if(isIn(ec[0],ec[1],tabz[i].transp)){
				j= (i==0)?1:0;
				calcTransp(j);
				if(isIn(ec[0],ec[1],tabz[j].transp))backOut();
				else setOpacity(tabz[j],90);
			}else backOut();
		}else{
			if(isIn(ec[0],ec[1],tabz[i].transp))backOut();
			else setOpacity(tabz[i],90);
		}
	}
	
	function backOut(){
		setOpacity(tabz[(act==0?1:0)],(act==1?65:50));
	}
		
	
	function setPlacement(){
		var size = getSize(mainDiv);
		tabz[1].style.width = size[0];
		tabz[0].style.width = size[0];
		if(tpdbg)alert('set_placement_complete');
	}
	
	this.setTabPlacement = setPlacement;
	
	function predictAndSetSize(){
		
	}
	this.predictAndSetSize = predictAndSetSize;
	
	if(tpdbg)alert('cat panel creation complete');
}



/*
function CATpane(element){
	this.mainDiv = element;
	this.tabDiv = document.createElement("DIV");
	this.contDiv = document.createElement("DIV");
	this.tabs = new Array();
	this.index = 0;
	this.colors = new Array();
	
	this.mainDiv.appendChild(this.tabDiv);
	this.mainDiv.appendChild(this.contDiv);
	
	this.tabDiv.style.backgroundColor = "transparent";
	this.tabDiv.style.width = '100%';
	//this.tabDiv.style.height = '20%';
	
	this.contDiv.style.backgroundColor = "white";
	this.contDiv.style.width = '99.3%';
	this.contDiv.style.height = '397';
	
	function addTabImage(src,wid,hei,leftMarg,z,ifmid){
		imgDiv = document.createElement("DIV");
		imgDiv.style.display = 'inline';
		imgDiv.style.position = "relative";
		imgDiv.style.left = leftMarg;
		img = document.createElement("IMG");
		imgDiv.appendChild(img);
		img.src = src;
		img.style.backgroundColor = "transparent";
		if(wid!=null)img.style.width = wid;
		if(hei!=null){
			img.style.height = hei;
			this.tabDiv.style.height = hei;
		}
		if(z!=null)imgDiv.style.zIndex=z;
		
		if(ifmid){
			//imgDiv.style.left = '-10';
			imgDiv.style.top = '-100';
			img.style.width = '100%';
		}
		//if(side!=null)img.style.
		//img.style
		this.tabDiv.appendChild(imgDiv);
		this.tabs.push(imgDiv);
	}
	this.addTabImage = addTabImage;
	
	function addTabColor(index,border,back){
		this.colors[index] = new Array(border,back);
	}
	this.addTabColor = addTabColor;
	
	function setColor(index){
		pane.contDiv.style.backgroundColor = this.colors[index][1];
		pane.contDiv.style.borderColor = this.colors.index[0];
		pane.contDiv.style.borderTop= '0';
		pane.contDiv.style.borderBottomWidth = '3';
		pane.contDiv.style.borderLeftWidth = '3';
		pane.contDiv.style.borderRightWidth = '3';
		pane.contDiv.style.borderStyle = "solid";
	}
	this.setColor = setColor;
	
	function switchTab(index){
		if(index==0){
			this.tabs[0].style.zIndex = '0';
			this.tabs[1].style.zIndex = '2';
			setColor(1);
		}else{
			this.tabs[0].style.zIndex = '2';
			this.tabs[1].style.zIndex = '0';
			setColor(0);
		}
	}
	this.switchTab = switchTab;}*/