/**************************************************************************
* doctx 탐지
**************************************************************************/
Element.prototype.detectDoctx = function(){

	let parent = this.parentElement;
	
	if(parent == null){
		return null;
	}
	
	if(parent.hasAttribute("data-doctx")){
		return parent.getAttribute("data-doctx");
	}

	return parent.detectDoctx();
}

/**************************************************************************
* 페이징 표시하는 SPAN
**************************************************************************/
class PagingInfoSpan extends HTMLSpanElement {
	constructor() {
		super();	
	}
	
	help(){
		PagingInfoSpan.help();
	}
	static help(){
		console.log("클래스명 = PagingInfoSpan");
		console.log("is속성 = paging-info");
		console.log("PagingInfoSpan 페이징 정보를 표시하는 SPAN태그이다.");
	}
	
	connectedCallback(){
		if(this.isConnected){
			let nm = this.getAttribute("name");
			let prefix = nm.substr(0,nm.indexOf("PagingInfo"))
						
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				this.id = prefix+"--"+doctx+"PagingInfo";
			}
		}
	}
}

customElements.define("paging-info", PagingInfoSpan, { extends: "span" });


/**************************************************************************
* name으로 참조하는 label
**************************************************************************/
class NameLabel extends HTMLLabelElement {
	constructor() {
		super();
	}
	
	help(){
		NameLabel.help();
	}
	static help(){
		console.log("클래스명 = NameLabel");
		console.log("is속성 = name-label");
		console.log("id가 아닌 name으로 참조하는 LABEL태그이다.");
	}
		
	connectedCallback(){
		if(this.isConnected){
			
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				if(this.getAttribute("for") != null && this.getAttribute("for").indexOf("--") == -1){
					this.htmlFor = this.getAttribute("for")+"--"+doctx;
				}
			}
		}
	}
}

customElements.define("name-label", NameLabel, { extends: "label" });

/**************************************************************************
* name과 doctx로 id를 생성하는 SELECT
**************************************************************************/
class IdSelect extends HTMLSelectElement {
	constructor() {
		super();
	}
	
	help(){
		IdSelect.help();
	}
	static help(){
		console.log("클래스명 = IdSelect");
		console.log("is속성 = id-select");
		console.log("name과 doctx로 자신의 id를 생성하는 SELECT태그이다.");
	}
		
	connectedCallback(){
		if(this.isConnected){
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				this.id = this.getAttribute("name")+"--"+doctx;
			}
		}
	}
}

customElements.define("id-select", IdSelect, { extends: "select" });

/**************************************************************************
* name과 doctx로 id를 생성하는 TEXTAREA
**************************************************************************/
class IdTextArea extends HTMLTextAreaElement {
	constructor() {
		super();
	}
	
	help(){
		IdTextArea.help();
	}
	static help(){
		console.log("클래스명 = IdTextArea");
		console.log("is속성 = id-textArea");
		console.log("name과 doctx로 자신의 id를 생성하는 TEXTAREA태그이다.");
	}
		
	connectedCallback(){
		if(this.isConnected){
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				this.id = this.getAttribute("name")+"--"+doctx;
			}
		}
	}
}

customElements.define("id-textarea", IdTextArea, { extends: "textarea" });

/**************************************************************************
* name과 doctx로 id를 생성하는 INPUT
**************************************************************************/
class IdInput extends HTMLInputElement {
	constructor() {
		super();
	}
	
	help(){
		IdInput.help();
	}
	static help(){
		console.log("클래스명 = IdInput");
		console.log("is속성 = id-input");
		console.log("name과 doctx로 자신의 id를 생성하는 INPUT태그이다.");
	}
	
	connectedCallback(){
		if(this.isConnected){
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				this.id = this.getAttribute("name")+"--"+doctx;
				if(this.hasAttribute("list") && this.getAttribute("list").indexOf("--") == -1){
					this.setAttribute("list",this.getAttribute("list")+"--"+doctx);
				}
			}
		}
	}
}

customElements.define("id-input", IdInput, { extends: "input" });

/**************************************************************************
* name과 doctx로 id를 생성하는 DATALIST
**************************************************************************/
class IdDataList extends HTMLDataListElement {
	constructor() {
		super();
	}
	
	help(){
		IdDataList.help();
	}
	static help(){
		console.log("클래스명 = IdDataList");
		console.log("is속성 = id-datalist");
		console.log("name과 doctx로 자신의 id를 생성하는 DATALIST태그이다.");
	}

	
	connectedCallback(){
		if(this.isConnected){
			let doctx = this.getAttribute("data-ref-doctx");
			if(doctx == null){
				doctx = this.detectDoctx();
			}
			if(doctx != null){
				this.setAttribute("data-ref-doctx", doctx);
				this.id = this.getAttribute("name")+"--"+doctx;
			}
		}
	}
}

customElements.define("id-datalist", IdDataList, { extends: "datalist" });



/**************************************************************************
* 중괄호 자동 추가 템플릿
**************************************************************************/
class CurlyBrackets extends HTMLTemplateElement {
	constructor() {
		super();
		
		let curlyBracketsOpen = String.fromCharCode(123); //중괄호시작
		
		let thisCon = this.content;
		
		let trs = thisCon.querySelectorAll("tr");
		
		trs.forEach(function(node) {
			let key = node.getAttribute("data-key");
			if(key != null && key != "" && key.indexOf(curlyBracketsOpen) == -1){
				node.setAttribute("data-key","{"+key+"}");
			}
			let index = node.getAttribute("data-index");
			if(index != null && index != "" && index.indexOf(curlyBracketsOpen) == -1){
				node.setAttribute("data-index","{"+index+"}");
			}
		});
		
		let tds = thisCon.querySelectorAll("td");
		tds.forEach(function(node) {
			if(node.getAttribute("onclick") != null && node.getAttribute("onclick") == ""){
				node.setAttribute("onclick","{onclick}");
			}

			if(node.getAttribute("ondblclick") != null && node.getAttribute("ondblclick") == ""){
				node.setAttribute("ondblclick","{ondblclick}");
			}
			
			if(node.childElementCount == 0){
				if(node.textContent.trim() != "" && node.textContent.indexOf(curlyBracketsOpen) == -1){
					node.textContent = "{"+node.textContent.trim()+"}";
				}
			}
		});

		let tdCheckboxes = thisCon.querySelectorAll("td>input[type='checkbox']");
		tdCheckboxes.forEach(function(node) {
			if(node.getAttribute("value") != null && node.getAttribute("value") != "" 
			&& node.getAttribute("value") != "on" 
			&& node.getAttribute("value").indexOf(curlyBracketsOpen) == -1){
				node.setAttribute("value","{"+node.getAttribute("value")+"}");
			}
			if(node.getAttribute("onchange") != null && node.getAttribute("onchange") == ""){
				node.setAttribute("onchange","{onchange}");
			}
		});
		
		let tdRadios = thisCon.querySelectorAll("td>input[type='radio']");
		tdRadios.forEach(function(node) {
			if(node.getAttribute("value") != null && node.getAttribute("value") != "" 
			&& node.getAttribute("value") != "on"
			&& node.getAttribute("value").indexOf(curlyBracketsOpen) == -1){
				node.setAttribute("value","{"+node.getAttribute("value")+"}");
			}
			if(node.getAttribute("onchange") != null && node.getAttribute("onchange") == ""){
				node.setAttribute("onchange","{onchange}");
			}
		});
	}
	
	help(){
		CurlyBrackets.help();
	}
	static help(){
		console.log("클래스명 = CurlyBrackets");
		console.log("is속성 = curly-brackets");
		console.log("그리드 렌더링시 중괄호가 빠진 부분을 자동으로 추가하는 TEMPLATE태그이다.");
	}
}
customElements.define("curly-brackets", CurlyBrackets, { extends: "template" });
