class tcTab
{
	constructor(config){
		
		this.bColor="";
		
		if(typeof config == 'undefined' || config == null) config = {};
		if(typeof config.float == 'undefined'){ config.float='left'; }
		
		this.id=0;
		this.par=null;
		this.sel=false;
		this.con=null; //Элемент с содержимым
		this.href='';

		//Сам таб на который нажимаем (ушко)
		this.div=document.createElement('div')
		this.div.style.cssText='position: relative; top: 1px; cursor: pointer; float: '+config.float+'; border: 1px solid #b3b3b3; border-radius: 5px 5px 0px 0px; padding: 1px; padding-right: 4px; padding-left: 4px; margin-left: 2px; margin-right: 2px;'
		this.div.style.background = g_backColor1;
		this.div.innerHTML=config.caption;

		this.div.onmouseover=function(obj){return function(){ if(!obj.sel) obj.div.style.background = g_rowColor1; }}(this);
		this.div.onmouseout=function(obj){return function(){ if(!obj.sel) obj.div.style.background = g_backColor1; }}(this);
		this.div.onclick=function(obj){return function(){ obj.setSel(); if(obj.href!='') goToURL(obj.href); }}(this)
	}

	setConText(txt)
	{	if(this.con!=null) this.con.parent.removeChild(this.con)
		this.con=document.createElement('div')
		this.con.style.cssText='width: 100%; height: 100%;'
		if(!this.sel) this.con.style.display='none'
		this.con.innerHTML=txt
		this.par.ctt.appendChild(this.con)
		return this.con
	}

	setConObj(val)
	{
		if(this.con!=null) this.con.parent.removeChild(this.con)
		if (typeof val === 'string' || val instanceof String)
			val=document.getElementById(val);
		if(val===null || typeof(val)=='undefined') return;
		this.con=val;
		if(!this.sel) this.con.style.display='none';
		this.par.ctt.appendChild(this.con);
		return val;
	}

	setSel()
	{
		for(let i=0;i<this.par.tbs.length;i++)
		{	this.par.tbs[i].div.style.background = g_backColor1;
			this.par.tbs[i].div.style.borderBottom = "1px solid #b3b3b3"
			this.par.tbs[i].sel=false
			this.par.tbs[i].con.style.display='none'
		}
		this.div.style.background = g_rowColor2;
		this.div.style.borderBottom = '1px solid var(--back-color)'
		//this.con.style.display='inline'
		this.con.style.display='block';
		this.sel=true
	}
}

/** Создать закладки
 *  id - контейнер либо идентификатор контейнера в который вставляем табы
 */
class tcTabs
{
	constructor(id){
		this.tbs=new Array();
		if(typeof id == 'string') this.bd=document.getElementById(id); else this.bd=id;

		this.wra=document.createElement('div');
		this.wra.style.cssText="display: table; width :100%; height: 100%; padding: 0px; margin: 0px; border-collapse: collapse; border: 0px solid #000000;";

		var tr=null;
		tr=document.createElement('div');
		tr.style.cssText='display: table-row; height: 1%; padding: 0px; margin: 0px; border: 0px solid #0000ff;'

		this.btt=document.createElement('div');
		this.btt.style.cssText='display: table-cell; width :100%; height: 1%; padding: 0px; margin: 0px; border: 0px solid #0000ff;background-color: '+g_backColor2+';color:'+g_textColor1+';';
		tr.appendChild(this.btt);
		this.wra.appendChild(tr);

		tr=document.createElement('div');
		tr.style.cssText='display: table-row; width :100%; height: 100%; padding: 0px; margin: 0px; border: 0px solid #0000ff;'

		//Content
		this.ctt=document.createElement('div');
		this.ctt.style.cssText='display:table-cell; width :100%; height: 100%; padding: 0px; margin: 0px; border; border: 1px solid #b3b3b3; overflow:hidden;'

		tr.appendChild(this.ctt);
		this.wra.appendChild(tr);

		this.bd.appendChild(this.wra);
	}

	addTab(config)
	{
		let tab=new tcTab(config)
		tab.par=this
		this.btt.appendChild(tab.div);

		this.tbs[this.tbs.length]=tab;
		return tab;
	}

	delTab(tab)
	{
		if (typeof tab === 'string' || tab instanceof String)
		{
		}else
		{
			for(let i=0;i<this.tbs.length;i++)
			{
				if(this.tbs[i]==tab)
				{
					this.btt.removeChild(tab.div);
				}
			}
		}
	}
}