/*js
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
// CssHidex v1.16 [ Commercial Version ]
// Copyright (c) phpkobo.com ( http://www.phpkobo.com/ )
// Email : admin@phpkobo.com
// ID : HDXCS-116
// URL : http://www.phpkobo.com/csshidex
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
////////////////////////////////////////////////////////////////////
// $shorthands
function $(selector,el_ref){
	return (el_ref?el_ref:document).querySelector(selector);
};
function $$(selector,el_ref){
	return (el_ref?el_ref:document).querySelectorAll(selector);
};
function $id(id){
	return document.getElementById(id);
};
function $ce(tagName){
	return document.createElement(tagName);
};
////////////////////////////////////////////////////////////////////
// jQuery.offset
function jqOffset(el){
	var rect=el.getBoundingClientRect();
	var el_body=document.documentElement;
	return {
		x:rect.left+el_body.scrollLeft,
		y:rect.top+el_body.scrollTop
	};
};
////////////////////////////////////////////////////////////////////
// ajaxCall
function ajaxCall(url_server,requ,callback,auxproc,errproc){
	const xhr=new XMLHttpRequest();
	xhr.open("POST",url_server,true);
	xhr.setRequestHeader("Content-Type",
		"application/x-www-form-urlencoded; charset=UTF-8");
	xhr.addEventListener("load",function(){
		if (xhr.status==200){
			let str=xhr.responseText;
			const sig="[!json!]";
			const pos=str.indexOf(sig);
			if(pos!=-1){
				if(pos>0){
					const pretext=str.substr(0,pos);
					if(errproc){errproc("SBL",pretext);}
				}
				str=str.substr(pos+sig.length);
				const resp=JSON.parse(str);
				if (resp.result=="OK"){
					if(callback){callback(resp);}
				}else{
					if(errproc){errproc("NOR",resp.result);}
				}
			}else{
				if(errproc){errproc("SMS",str);}
			}
		}else{
			let s="";
			s+="status:"+xhr.status+"\n";
			s+="statusText:"+xhr.statusText;
			if(errproc){errproc("N2H",s);}
		}
	});
	if(auxproc){auxproc(xhr);}
	xhr.send("requ="+encodeURIComponent(JSON.stringify(requ)));
	return xhr;
};
////////////////////////////////////////////////////////////////////
// protect a webpage form drag-and-drop
function preventFileDrop(){
	document.addEventListener("dragover",function(e){
		e.preventDefault();
	});
	document.addEventListener("drop",function(e){
		e.preventDefault();
	});
};
preventFileDrop();
////////////////////////////////////////////////////////////////////
// end events
function onEnd(el,callback,ename){
	const func=function(e){
		if(el==e.srcElement){
			el.removeEventListener(ename,func);
			if(callback){callback(e);}
		}
	};
	el.addEventListener(ename,func);
};
function onTransitionEnd(el,callback){
	onEnd(el,callback,"transitionend");
};
function onAnimationEnd(el,callback){
	onEnd(el,callback,"animationend");
};
////////////////////////////////////////////////////////////////////
// createElementFromHTML
function createElementFromHTML(html){
	const el=document.createElement("div");
	el.innerHTML=html;
	return el.firstElementChild;
}
////////////////////////////////////////////////////////////////////
// browser detection
function isSafari(){
	return (window.safari!==undefined);
};
function isFireFox(){
	return (navigator.userAgent.toLowerCase().indexOf('firefox')>-1);
};
function isIE(){
	var ua=window.navigator.userAgent;
	var msie=ua.indexOf("MSIE ");
	// Trident/7.0; rv:11.0
	return ((msie>0)||!!ua.match(/Trident.*rv\:11\./));
};
////////////////////////////////////////////////////////////////////
// send enter & space to click
function esToClick(el){
	el.addEventListener("keydown",function(e){
		if((e.key=="Enter")||(e.key==" ")){
			e.preventDefault();
			this.click();
		}
	});
	return el;
};
"use strict";
function CUiControl(px){
	var el_control=px.el_control;

	function enable(){
		el_control.classList.remove("uic-disable");
	};

	function disable(){
		el_control.classList.add("uic-disable");
	};

	function init(){
		enable();
	};

	init();
	return {
		enable:enable,
		disable:disable
	};
};
"use strict";
function CSvgBtnControl(px){
	// elements
	var el_control=px.el_control;
	// parameters
	var btntype=px.btntype?px.btntype:"check";
	// function closures
	var fcl=null;
	// button data
	var btndata={
		"check":{
			scale:20,
			code:`
<svg class="sbc-svg" viewBox="0 0 16 16" fill="currentColor">
	<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
</svg>`},
		"x":{
			scale:25,
			code:`
<svg class="sbc-svg" viewBox="0 0 16 16" fill="currentColor">
	<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
	<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
</svg>`},
		"threedots":{
			scale:20,
			code:`
<svg class="sbc-svg" viewBox="0 0 16 16" fill="currentColor">
	<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>`},
		"threelines":{
			scale:20,
			code:`
<svg class="sbc-svg" viewBox="0 0 16 16" fill="currentColor">
	<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>`},
		"folder":{
			scale:20,
			code:`
<svg class="sbc-svg" viewBox="0 0 16 16" fill="currentColor">
	<path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14V3.5zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5V6zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7H1.633z"/>
</svg>`}
	};

	function setBtn(btntype){
		el_control.innerHTML=btndata[btntype].code;
		var el_svg=el_control.querySelector(".sbc-svg");
		var scale=btndata[btntype].scale;
		el_svg.style.top=el_svg.style.bottom=
		el_svg.style.left=el_svg.style.right=scale+"%";
		if(px.style){
			for(var key in px.style){
				el_control.style[key]=px.style[key];
			}
		}
	};

	function init(){
		setBtn(btntype);
		// events
		var style_focus=true;
		el_control.addEventListener("pointerdown",function(e){
			style_focus=false;
		});
		el_control.addEventListener("click",function(e){
			style_focus=true;
		});
		el_control.addEventListener("keydown",function(e){
			if((e.key=="Enter")||(e.key==" ")){
				e.preventDefault();
				this.click();
			}
		});
		el_control.addEventListener("focus",function(e){
			if(style_focus){
				el_control.classList.add("sbc-focus");
			}
		});
		el_control.addEventListener("blur",function(e){
			el_control.classList.remove("sbc-focus");
		});
		// call base class
		fcl=CUiControl({
			el_control:el_control
		});
	};

	init();
	return fcl;
};
"use strict";
////////////////////////////////////////////////////////////////////
// CFileViewControl
function CFileViewControl(px){
	// elements
	var el_control=px.el_control;
	var el_fileboard=null;

	function show(){
		el_control.classList.remove("fvc-hide");
		enable();
	};

	function hide(){
		el_control.classList.add("fvc-hide");
		disable();
	};

	function enable(){
		el_control.classList.remove("fvc-disable");
	};

	function disable(){
		el_control.classList.add("fvc-disable");
	};

	function setPicture(data){
		el_fileboard.style["background-image"]="url("+data.dataurl+")";
	};

	function clearFile(){
		el_fileboard.style["background-image"]="none";
		// dispatch event
		el_control.dispatchEvent(new Event("fileviewclear"));
	};

	function init(){
		// build droparea
		var el_checkboard=document.createElement("div");
		el_checkboard.className="fvc-checkboard";
		el_fileboard=document.createElement("div");
		el_fileboard.className="fvc-fileboard";
		var el_close=document.createElement("div");
		el_close.className="fvc-close";
		el_close.classList.add("sbc-control");
		el_close.setAttribute("tabindex","0");
		el_control.appendChild(el_checkboard);
		el_control.appendChild(el_fileboard);
		el_control.appendChild(el_close);
		CSvgBtnControl({
			el_control:el_close,
			btntype:"x"
		});
		// events
		el_close.addEventListener("click",function(e){
			clearFile();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		show:show,
		hide:hide,
		enable:enable,
		disable:disable,
		setPicture:setPicture
	};
};
"use strict";
////////////////////////////////////////////////////////////////////
// CDropAreaControl
function CDropAreaControl(px){
	// elements
	var el_control=px.el_control;
	var el_fileinput=null;
	var el_select=null;
	var el_message=null;

	function show(){
		el_control.classList.remove("dac-hide");
		el_control.classList.remove("dac-dragover");
	};

	function hide(){
		el_control.classList.add("dac-hide");
	};

	function enable(){
		el_control.classList.remove("dac-disable");
	};

	function disable(){
		el_control.classList.add("dac-disable");
	};

	function loadFile(file){
		if(!file){return;}
		el_control.dispatchEvent(new CustomEvent("dropareafile",{detail:file}));
	};

	function init(){
		// build droparea
		var el_message=document.createElement("div");
		el_message.className="dac-message";
		el_message.innerHTML="Drop Picture File Here";
		el_fileinput=document.createElement("input");
		el_fileinput.className="dac-fileinput";
		el_fileinput.setAttribute("type","file");
		el_fileinput.setAttribute("title","");
		el_fileinput.setAttribute("tabindex","-1");
		el_select=document.createElement("div");
		el_select.className="dac-select";
		el_select.classList.add("sbc-control");
		el_select.setAttribute("tabindex","0");
		el_select.appendChild(el_fileinput);
		el_control.appendChild(el_message);
		el_control.appendChild(el_select);
		CSvgBtnControl({
			el_control:el_select,
			btntype:"folder"
		});
		// events
		// relay a click on the button to the file input inside
		el_select.addEventListener("click",function(e){
			e.preventDefault();
			e.stopPropagation();
			el_fileinput.click();
		});
		// handle the change evernt of a file input
		el_fileinput.addEventListener("change",function(e){ 
			e.preventDefault();
			// check the number of the files selected.
			// if it's 0 (like the dialog box is cancelled),
			// then do not proceed.
			if(this.files.length){
				loadFile(this.files[0],"fi");
				// set the value to null so it can select
				// the same file and trigger the 'change' event.
				this.value=null;
			}
		});
		// drag and drop a file to the input code
		el_control.addEventListener("drop",function(e){
			this.classList.remove("dac-dragover");
			e.preventDefault();
			if(e.dataTransfer.files.length){
				loadFile(e.dataTransfer.files[0],"dd");
			}
		});
		el_control.addEventListener("dragenter",function(e){
			this.classList.add("dac-dragover");
		});
		el_control.addEventListener("dragleave",function(e){
			this.classList.remove("dac-dragover");
		});
		// prevent from opening the image in the browser
		// This does not stop the browser to open the image
		// when it's dropped outsite of the element
		el_control.addEventListener("dragover",function(e){
			e.preventDefault();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		show:show,
		hide:hide,
		enable:enable,
		disable:disable
	};
};
"use strict";
////////////////////////////////////////////////////////////////////
// CProgBarControl
function CProgBarControl(px){
	// elements
	var el_control=px.el_control;
	var el_bar=null;
	var el_progress=null;
	var el_text=null;
	// locale
	var lca=px.lca;
	// variables
	var default_delay=300;
	var timer_id=null;

	function show0(){
		el_control.classList.remove("pbc-hide");
		setProgress(0);
	};

	function show(delay){
		if(delay===undefined){
			delay=default_delay;
		}
		if(delay===0){
			show0();
		}else{
			timer_id=setTimeout(function(){
				if(timer_id===null){return;}
				show0();
			},delay);
		}
	};

	function hide(){
		timer_id=null;
		el_control.classList.add("pbc-hide");
	};

	function setProgress(val,max){
		if(!max){max=100;}
		var percent=Math.floor(val*100/max);
		el_text.innerHTML=percent+"%";
		el_progress.style.width=percent+"%";
	};

	function createCancelButton(){
		var el_cancel_txt=document.createElement("div");
		el_cancel_txt.className="pbc-cancel-txt";
		el_cancel_txt.innerHTML=lca["label:cancel"];
		var el_cancel_bg=document.createElement("div");
		el_cancel_bg.className="pbc-cancel-bg";
		var el_cancel=document.createElement("div");
		el_cancel.className="pbc-cancel";
		el_cancel.appendChild(el_cancel_bg);
		el_cancel.appendChild(el_cancel_txt);
		return el_cancel;
	};

	function init(){
		var el_cancel=createCancelButton();
		el_progress=document.createElement("div");
		el_progress.className="pbc-progress";
		el_text=document.createElement("div");
		el_text.className="pbc-text";
		el_bar=document.createElement("div");
		el_bar.className="pbc-bar";
		el_bar.appendChild(el_progress);
		el_bar.appendChild(el_text);
		el_control.classList.add("pbc-hide");
		el_control.appendChild(el_bar);
		el_control.appendChild(el_cancel);
		// events
		el_cancel.addEventListener("click",function(e){
			el_control.dispatchEvent(new Event("progbarcancel"));
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		show:show,
		hide:hide,
		setProgress:setProgress
	};
};
"use strict";
////////////////////////////////////////////////////////////////////
// CAlertBandControl
function CAlertBandControl(px){
	// elements
	var el_control=px.el_control;
	var el_box=null;
	var el_msg=null;

	function setupBoxColor(bgcolor){
		if(bgcolor===undefined){return;}
		var cname;
		switch(bgcolor){
		case "black":
		case "white":
		case "red":
		case "green":
		case "blue":
			el_box.classList.add("abc-box-"+bgcolor);
			break;
		default:
			el_box.style.background=bgcolor;
			break;
		}
	};

	function open(msg,bgcolor){
		if(bgcolor!==undefined){
			setupBoxColor(bgcolor);
		}
		el_msg.innerHTML=msg;
		el_control.classList.remove("abc-hide");
	};

	function close(){
		el_control.classList.add("abc-hide");
	};

	function init(){
		// build alertband
		var el_radiate=document.createElement("div");
		el_radiate.className="abc-radiate";
		var el_close=document.createElement("div");
		el_close.className="abc-close";
		el_close.classList.add("sbc-control");
		el_close.setAttribute("tabindex","0");
		if(0){
			var el_side_left=document.createElement("div");
			el_side_left.className="abc-side";
		}
		el_msg=document.createElement("div");
		el_msg.className="abc-msg";
		var el_side_right=document.createElement("div");
		el_side_right.className="abc-side";
		el_side_right.appendChild(el_close);
		var el_tbl=document.createElement("div");
		el_tbl.className="abc-tbl";
		if(0){
			el_tbl.appendChild(el_side_left);
		}
		el_tbl.appendChild(el_msg);
		el_tbl.appendChild(el_side_right);
		el_box=document.createElement("div");
		el_box.className="abc-box";
		el_box.appendChild(el_radiate);
		el_box.appendChild(el_tbl);
		el_control.classList.add("abc-hide");
		el_control.appendChild(el_box);
		CSvgBtnControl({
			el_control:el_close,
			btntype:"x",
			style:{
				color:"white",
				background:"rgba(255,255,255,.3)"
			}
		});
		// events
		el_control.addEventListener("click",function(e){
			close();
			el_control.dispatchEvent(new Event("alertbandend"));
		});
		el_close.addEventListener("click",function(e){
			e.stopPropagation();
			el_control.click();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		open:open,
		close:close
	};
};
"use strict";
////////////////////////////////////////////////////////////////////
// CWSpinnerControl
function CWSpinnerControl(px){
	// elements
	var el_control=px.el_control;
	// variables
	var default_delay=300;
	var timer_id=null;

	function start0(){
		el_control.classList.remove("wsc-hide");
	};

	function start(delay){
		if(delay===undefined){
			delay=default_delay;
		}
		if(delay===0){
			start0();
		}else{
			timer_id=setTimeout(function(){
				if(timer_id===null){return;}
				start0();
			},delay);
		}
	};

	function stop(){
		timer_id=null;
		el_control.classList.add("wsc-hide");
	};

	function init(){
		var el_spin=document.createElement("div");
		el_spin.className="wsc-spin";
		var el_radiate=document.createElement("div");
		el_radiate.className="wsc-radiate";
		var el_center=document.createElement("div");
		el_center.className="wsc-center";
		el_center.appendChild(el_spin);
		el_center.appendChild(el_radiate);
		el_control.classList.add("wsc-hide");
		el_control.appendChild(el_center);
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		start:start,
		stop:stop
	};
};
"use strict";
////////////////////////////////////////////////////////////////////
// CUPicControl
function CUPicControl(px){
	// elements
	var el_control=px.el_control;
	var el_droparea=null;
	var el_fileview=null;
	var el_progbar=null;
	var el_alertband=null;
	var el_wspinner=null;
	// locale
	var lca=px.lca;
	// extention list
	var ext_list=px.ext_list;
	// url server
	var url_server=px.url_server;
	// xhr timeout
	var xhr_timeout=((px.xhr_timeout!==undefined)?px.xhr_timeout:0);
	// Data URL
	var dataurl=null;
	// fileinfo
	var fileinfo=null;
	// xhreq
	var xhreq=null;
	// function closures
	var fcl_fileview=null;
	var fcl_droparea=null;
	var fcl_progbar=null;
	var fcl_alertband=null;
	var fcl_wspinner=null;

	function openErrMsg(errmsg){
		fcl_fileview.disable();
		fcl_droparea.disable();
		fcl_alertband.open(errmsg,"red");
	};

	function loadFile(file){
		if(!file){return;}
		// hide progress
		fcl_progbar.hide();
		// check file extention
		var ext=file.name.split(".").pop();
		if(ext_list.indexOf(ext)==-1){
			var str=lca["err:invalid-file-type"];
			str=str.replace("%ext%",ext);
			openErrMsg(str);
			return;
		}
		// show Waiting
		fcl_wspinner.start();
		fcl_droparea.disable();
		// dispatch fileinfo
		fileinfo={
			name:file.name,
			size:file.size,
			type:file.type,
			lastModified:file.lastModified
		};
		el_control.dispatchEvent(new CustomEvent("load",{detail:fileinfo}));
		// read contents
		var reader=new FileReader();
		reader.addEventListener("load",function(){
			dataurl=reader.result;
			fcl_fileview.setPicture({dataurl:dataurl});
			// browser will be busy resizing the image.
			// remove hourglass after the browser becomes idle
			setTimeout(function(){
				fcl_wspinner.stop();
				fcl_fileview.show();
				fcl_droparea.hide();
			},100);
		});
		reader.readAsDataURL(file);
	};

	function send(){
		var requ={
			cmd:"save",
			filename:fileinfo.name,
			dataurl:dataurl
		};
		xhreq=ajaxCall(url_server,requ,function(resp){
			fcl_wspinner.stop();
			fcl_fileview.enable();
			if(resp.errmsg){
				openErrMsg(resp.errmsg);
			}
			el_control.dispatchEvent(new CustomEvent("sent",{detail:resp}));
		},function(xhr){
			// set timeout in milliseconds
			if(xhr_timeout){
				xhr.timeout=xhr_timeout;
			}
			// ending procedure
			var xhr_last_type=null;
			function xhrEnd(e){
				fcl_progbar.hide();
				if(e.type!="loadend"){
					xhr_last_type=e.type;
					openErrMsg(lca["err:xhr:"+xhr_last_type]);
				}
			};
			// load events (start,progress,end)
			xhr.upload.addEventListener("loadstart",function(e){
				fcl_progbar.show();
				fcl_fileview.disable();
			});
			xhr.upload.addEventListener("progress",function(e){
				if(e.lengthComputable){
					fcl_progbar.setProgress(e.loaded,e.total);
				}
			});
			xhr.upload.addEventListener("loadend",function(e){
				xhrEnd(e);
				if(xhr_last_type===null){
					fcl_wspinner.start();
				}
			});
			// termination events (timeout,error,abort)
			xhr.upload.addEventListener("timeout",xhrEnd);
			xhr.upload.addEventListener("error",xhrEnd);
			xhr.upload.addEventListener("abort",xhrEnd);
		});
	};

	function init(){
		// build
		el_fileview=document.createElement("div");
		el_fileview.className="fvc-control";
		el_droparea=document.createElement("div");
		el_droparea.className="dac-control";
		el_progbar=document.createElement("div");
		el_progbar.className="pbc-control";
		el_alertband=document.createElement("div");
		el_alertband.className="abc-control";
		el_wspinner=document.createElement("div");
		el_wspinner.className="wsc-control";
		el_control.appendChild(el_fileview);
		el_control.appendChild(el_droparea);
		el_control.appendChild(el_progbar);
		el_control.appendChild(el_alertband);
		el_control.appendChild(el_wspinner);
		// components
		fcl_fileview=CFileViewControl({
			el_control:el_fileview
		});
		fcl_droparea=CDropAreaControl({
			el_control:el_droparea
		});
		fcl_progbar=CProgBarControl({
			el_control:el_progbar,
			lca:lca
		});
		fcl_alertband=CAlertBandControl({
			el_control:el_alertband
		});
		fcl_wspinner=CWSpinnerControl({
			el_control:el_wspinner
		});
		// events
		el_fileview.addEventListener("fileviewclear",function(e){
			// show droparea
			fcl_droparea.enable();
			fcl_droparea.show();
			// hide fileboard
			fcl_fileview.hide();
			fcl_fileview.setPicture("none");
			// clear fileinfo
			fileinfo=null;
			el_control.dispatchEvent(new CustomEvent(
				"load",{detail:fileinfo}));
		});
		el_droparea.addEventListener("dropareafile",function(e){
			loadFile(e.detail)
		});
		el_progbar.addEventListener("progbarcancel",function(e){
			xhreq.abort();
		});
		el_alertband.addEventListener("alertbandend",function(e){
			fcl_fileview.enable();
			fcl_droparea.enable();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		send:send
	};
};