var crfHTML={};

crfHTML.print=
function(msg){
   console.log(msg);
}

crfHTML.init=
function(cb=null){
   LABKEY.requiresCss("crfDORA/crfHTML.css");
   this.print('CSS loaded');
   if (cb) cb();
}

crfHTML.getElement=
function(id){
   return document.getElementById(id);
}

crfHTML.append=
function(element,id=null,el=null){
   if (id) document.getElementById(id).appendChild(element);
   if (el) el.appendChild(element);
}

crfHTML.addStyle=
function(el,style){
   el.classList.add(style);
}


crfHTML.clearStyle=
function(el,style){
   el.classList.remove(style);
}

crfHTML.createSelect=
function(qMap,id=null,el=null){
   let fName='[makeSelect]';
   let input=document.createElement('select');
   this.addSelectOptions(input,qMap);
   this.append(input,id,el);
   return input;
}

crfHTML.createTable=
function(id=null,el=null,style=null){
   let table=document.createElement('table');
   this.append(table,id,el);
   if (style) this.addStyle(style);
   return table;
}

crfHTML.createBox=
function(id=null,el=null){
   let fbox=document.createElement('div');
   fbox.classList.add("box");
   this.append(fbox,id,el);
   return fbox;
}

crfHTML.createParagraph=
function(text,id=null,el=null){
   let fp=document.createElement("p");
   fp.innerHTML=text;
   fp.classList.add("center");
   this.append(fp,id,el);
   return fp;
}

crfHTML.createTblHeader=
function(id=null,el=null){
   let element=document.createElement('th');
   this.append(element,id,el);
   return element;
}

crfHTML.createButton=
function(id=null,el=null){
   let button=document.createElement('input');
   button.type='button';
   this.append(button,id,el);
   return button;
}

crfHTML.createTextNode=
function(text,id=null,el=null){
	let tNode=document.createTextNode(text);
   this.append(tNode,id,el);
   return tNode;
}

crfHTML.setTextNode=
function(el,text){
   el.nodeValue=text;
}

crfHTML.createDiv=
function(divId=null,id=null,el=null){
   let div=document.createElement('div');
   if (divId) div.id=divId;
   this.append(div,id,el);
   return div;
}

crfHTML.createTextArea=
function(id=null,el=null){
   let area=document.createElement('textarea');
   this.append(area,id,el);
   return area;
}

crfHTML.createLabel=
function(label,id=null,el=null){
   let x=document.createElement('label');
   x.innerText=label;
   this.append(x,id,el);
   return x;
}

crfHTML.createDate=
function(id=null,el=null){
   let x=document.createElement('input');
   x.type='date';
   this.append(x,id,el);
   return x;
}

crfHTML.createTextInput=
function(id=null,el=null){
   let x=document.createElement('input');
   x.type='text';
   this.append(x,id,el);
   return x;
}

crfHTML.createFileInput=
function(id=null,el=null){
   let x=document.createElement('input');
   x.type='file';
   this.append(x,id,el);
   return x;
}

crfHTML.createCheckbox=
function(id=null,el=null){
   let x=document.createElement('input');
   x.type='checkbox';
   this.append(x,id,el);
   return x;
}

crfHTML.clear=
function(el){
   while (el.hasChildNodes()){
      el.removeChild(el.lastChild);
   }
}

crfHTML.clearOptions=
function(input){
   while(input.options.length) input.remove(0);
}

crfHTML.addSelectOptions=
function(input,qMap){
   let fName='[addSelectOptions]';
   this.clearOptions(input);
   let opt = document.createElement("option");
	opt.text = "<Select>";
	opt.value = -1;
	input.options[0] = opt;
	this.print(fName+": Adding <Select>");
	

	//add other, label them with LUT
	for (let v in qMap) {
		this.print(fName+': populating '+v+': '+qMap[v]);

		let opt = document.createElement("option");
		opt.text = qMap[v];
		opt.value = v;
		input.options[input.options.length] = opt;
		
	}
	input.selectedIndex=0;	
}

crfHTML.updateSelect=
function(input,cell,x,value){
   let fName='[updateSelect]';
   this.print(fName+' value '+value);
   let children=cell.children;
   for (let i=0;i<children.length;i++){
      let el=children[i];
      let lab=el.value;
      this.print(fName+' style ['+el.className+']');
      this.clearStyle(el,'teal');
      if (lab==value){
         lab+='[*]';
         this.addStyle(el,'teal');
      }
      this.print(fName+' '+lab);

   }
   input.value=x;
}