/*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
	};
};
/*js
//==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>==>>>
//
//
//==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<==<<<
*/
////////////////////////////////////////////////////////////////////
// CTooltipControl
/*
var fcl_tooltip=CTooltipControl({
	el_ttarea:el_container,
	el_reference:e.target,
	message:
		"<div>aaa</div>"+
		"<div style='font-size:24px;color:red;'>bbb</div>"+
		"<div style='color:yellow;'><i>This is a test</i></div>",
	ttstyle:{
		msgbox:{
			"padding":"30px 40px",
			"border-radius":"30px",
			"background-color":"rgba(34,170,68,0.5)"
		},
		tip:{
			"size":"10px"
		},
		message:{
			"color":"yellow",
			"font-family":"impact",
			"font-size":"32px",
			"font-weight":"bold",
			"font-style":"italic"
		}
	}
});
////////////////////////////////////////////////////////////////////
//--------------- console output
// orientation
console.log("orien",orien);
// msgbox
console.log("msgbox.w",msgbox.w);
console.log("msgbox.h",msgbox.h);
// space
console.log("space.top",space.top);
console.log("space.bottom",space.bottom);
console.log("space.left",space.left);
console.log("space.right",space.right);
// clip
console.log("clip.x",clip.x);
console.log("clip.y",clip.y);
console.log("clip.w",clip.w);
console.log("clip.h",clip.h);
// reference
console.log("ref.x",ref.x);
console.log("ref.y",ref.y);
console.log("ref.w",ref.w);
console.log("ref.h",ref.h);
*/
////////////////////////////////////////////////////////////////////
function CTooltipControl(px){
	// elements
	var el_ttarea=px.el_ttarea;
	var el_reference=px.el_reference;
	var el_control=null;
	// parameters
	var message=px.message;
	var ttstyle=px.ttstyle?px.ttstyle:{};
	// variables
	var shift={dx:0,dy:0};
	var x_start;
	var y_start;

	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
		};
	};

	function copyStyle(ax,bx){
		if(bx){
			for(var key in bx){
				ax[key]=bx[key];
			}
		}
	};

	function getCssVal(cname,prop){
		var el=document.createElement("div");
		el.className=cname;
		el.style.visibility="hidden";
		el_ttarea.appendChild(el);
		var val=window.getComputedStyle(el).getPropertyValue(prop);
		el.remove();
		return val;
	};

	function getCssInt(cname,prop){
		return parseInt(getCssVal(cname,prop));
	};

	function getTipSize(){
		if(ttstyle&&ttstyle.tip&&ttstyle.tip.size){
			return parseInt(ttstyle.tip.size);
		}else{
			return getCssInt(
				"ttip-triangle",
				"border-top-width");
		}
	};

	function getBoxRadius(){
		if(ttstyle&&ttstyle.msgbox&&ttstyle.msgbox["border-radius"]){
			return parseInt(ttstyle.msgbox["border-radius"]);
		}else{
			return getCssInt(
				"ttip-msgbox",
				"border-top-left-radius");
		}
	};

	function getBackgroundColor(){
		if(ttstyle&&ttstyle.tip&&ttstyle.msgbox["background-color"]){
			return ttstyle.msgbox["background-color"];
		}else{
			return getCssVal(
				"ttip-msgbox",
				"background-color");
		}
	};

	function getMsgBoxSize(el_msgbox){
		el_msgbox.style.visibility="hidden";
		el_ttarea.appendChild(el_msgbox);
		var cs=window.getComputedStyle(el_msgbox);
		var size={
			w:parseInt(cs.getPropertyValue("width")),
			h:parseInt(cs.getPropertyValue("height"))
		};
		el_msgbox.remove();
		el_msgbox.style.visibility="visible";
		return size;
	};

	function getClipAndSpace(clip,space){
		// scroll position
		var scrollpos={
			top:document.documentElement.scrollTop,
			left:document.documentElement.scrollLeft
		};

		// viewport
		var vp={};
		vp.top=scrollpos.top;
		vp.bottom=vp.top+document.body.clientHeight;
		vp.left=scrollpos.left;
		vp.right=vp.left+document.body.clientWidth;

		// ttarea
		var ctnr_offset=jqOffset(el_ttarea);
		var ctnr={};
		ctnr.top=ctnr_offset.y;
		ctnr.bottom=ctnr.top+el_ttarea.clientHeight;
		ctnr.left=ctnr_offset.x;
		ctnr.right=ctnr.left+el_ttarea.clientWidth;

		// cross area of viewport and ttarea
		var ca={};
		ca.top=Math.max(vp.top,ctnr.top);
		ca.bottom=Math.min(vp.bottom,ctnr.bottom);
		ca.left=Math.max(vp.left,ctnr.left);
		ca.right=Math.min(vp.right,ctnr.right);

		// clip
		clip.x=ca.left;
		clip.y=ca.top;
		clip.w=ca.right-ca.left;
		clip.h=ca.bottom-ca.top;

		// reference
		var ref_offset=jqOffset(el_reference);
		var ref={};
		ref.top=ref_offset.y;
		ref.bottom=ref.top+el_reference.offsetHeight;
		ref.left=ref_offset.x;
		ref.right=ref.left+el_reference.offsetWidth;

		// space
		space.top=ref.top-ca.top;
		space.bottom=ca.bottom-ref.bottom;
		space.left=ref.left-ca.left;
		space.right=ca.right-ref.right;
	};

	function findOrien(space,msgbox){
		var k=1.0;
		var orien;
		var lx={
			top:(space.top-msgbox.h*k)*msgbox.w,
			bottom:(space.bottom-msgbox.h*k)*msgbox.w,
			left:(space.left-msgbox.w*k)*msgbox.h,
			right:(space.right-msgbox.w*k)*msgbox.h
		};

		var b_top_bottom=((0<space.top)&&(0<space.bottom));
		var b_left_right=((0< space.left)&&(0<space.right));

		if((lx.top>0)&&b_left_right){
			orien="top";
		}else if((lx.bottom>0)&&b_left_right){
			orien="bottom";
		}else if((lx.right>0)&&b_top_bottom){
			orien="right";
		}else if((lx.left>0)&&b_top_bottom){
			orien="left";
		}else{
			var n;
			n=lx.top;
			orien="top";
			if(lx.bottom>n){
				n=lx.bottom;
				orien="bottom";
			}else if(lx.right>n){
				n=lx.right;
				orien="right";
			}else if(lx.left>n){
				n=lx.left;
				orien="left";
			}
		}
		return orien;
	};

	function open(){
		// calc tooltip's tip width and height
		var u=getTipSize();
		var tri={
			w:u*2,
			h:u
		};

		// calc msgbox's border radius
		var r=getBoxRadius();
		var radius={
			x:r,
			y:r
		};

		// calc ttarea element size
		var clip={};
		var space={};
		getClipAndSpace(clip,space);

		// calc reference element size
		var ref_offset=jqOffset(el_reference);
		var ref={
			x:ref_offset.x,
			y:ref_offset.y,
			w:el_reference.offsetWidth,
			h:el_reference.offsetHeight
		};

		// create tooltip
		el_control=document.createElement("div");
		el_control.className="ttip-control";

		// el_message
		var el_message=document.createElement("div");
		el_message.className="ttip-message";
		el_message.innerHTML=message;
		copyStyle(el_message.style,ttstyle.message);

		// el_msgbox
		var el_msgbox=document.createElement("div");
		el_msgbox.className="ttip-msgbox";
		el_msgbox.appendChild(el_message);
		copyStyle(el_msgbox.style,ttstyle.msgbox);

		// msgbox
		var msgbox=getMsgBoxSize(el_msgbox);
		msgbox.w+=tri.w;
		msgbox.h+=tri.w;

		// find orientation(top,bottom,left,right)
		var orien=findOrien(space,msgbox);

		// create triangle
		var el_tri=document.createElement("div");
		el_tri.className="ttip-triangle";
		el_tri.style["border-"+orien+"-color"]=getBackgroundColor();

		// create tip
		var el_tip=document.createElement("div");
		el_tip.className="ttip-tip";
		el_tip.appendChild(el_tri);
		if(ttstyle&&ttstyle.tip&&ttstyle.tip.size){
			el_tri.style["border-width"]=ttstyle.tip.size;
		}

		// combine parts
		switch(orien){
		case "top":
			el_control.appendChild(el_msgbox);
			el_control.appendChild(el_tip);
			break;
		case "bottom":
			el_control.appendChild(el_tip);
			el_control.appendChild(el_msgbox);
			break;
		case "left":
			el_tip.style.display="inline-block";
			el_msgbox.style.display="inline-block";
			el_control.appendChild(el_msgbox);
			el_control.appendChild(el_tip);
			break;
		case "right":
			el_tip.style.display="inline-block";
			el_msgbox.style.display="inline-block";
			el_control.appendChild(el_tip);
			el_control.appendChild(el_msgbox);
			break;
		}

		// put it in ttarea
		el_ttarea.appendChild(el_control);

		// get size of msgbox
		var msgbox={
			w:el_msgbox.offsetWidth,
			h:el_msgbox.offsetHeight
		};

		// adjust tip width or height
		switch(orien){
		case "top":
		case "bottom":
			el_tip.style.height=tri.h+"px";
			break;
		case "left":
		case "right":
			el_tip.style.width=tri.h+"px";
			el_tip.style.height=msgbox.h+"px";
			break;
		}

		// position tip in the center
		switch(orien){
		case "top":
			tri.y_init=0;
			tri.x_init=(msgbox.w-tri.w)/2;
			break;
		case "bottom":
			tri.y_init=-tri.h;
			tri.x_init=(msgbox.w-tri.w)/2;
			break;
		case "left":
			tri.y_init=(msgbox.h-tri.w)/2;
			tri.x_init=0;
			break;
		case "right":
			tri.y_init=(msgbox.h-tri.w)/2;
			tri.x_init=-tri.h;
			break;
		}

		// position tooltip
		var x,y;
		switch(orien){
		case "top":
		case "bottom":
			x=ref.x+ref.w/2-msgbox.w/2;
			tri.x=tri.x_init;
			var d=(x+msgbox.w)-(clip.x+clip.w);
			if(d>0){
				tri.x=tri.x+d;
				var d_tri=(tri.x+tri.w)-(msgbox.w-radius.x);
				if(d_tri>0){
					tri.x=msgbox.w-radius.x-tri.w;
					x=x-d+d_tri;
				}else{
					x-=d;
				}
			}
			var d=clip.x-x;
			if(d>0){
				tri.x=tri.x-d;
				var d_tri=radius.x-tri.x;
				if (d_tri>0){
					tri.x=radius.x;
					x=x+d-d_tri;
				}else{
					x+=d;
				}
			}
			tri.y=tri.y_init;
			break;
		case "left":
		case "right":
			y=ref.y-(msgbox.h-ref.h)/2;
			tri.y=tri.y_init;
			var d =(y+msgbox.h)-(clip.y+clip.h);
			if(d>0){
				tri.y=tri.y+d;
				var d_tri=(tri.y+tri.h)-(msgbox.h-radius.h);
				if(d_tri>0){
					tri.y=msgbox.h-radius.y-tri.h;
					y=y-d+d_tri;
				}else{
					y-=d;
				}
			}
			var d=clip.y-y;
			if(d>0){
				tri.y=tri.y-d;
				var d_tri=radius.y-tri.y;
				if(d_tri>0){
					tri.y=radius.y;
					y=y+d -d_tri;
				}else{
					y+=d;
				}
			}
			tri.x=tri.x_init;
			break;
		}

		// additional position calculations
		var d=10;
		switch(orien){
		case "top":
			y=ref.y-(msgbox.h+tri.h);
			shift.dy=-d;
			break;
		case "bottom":
			y=ref.y+ref.h;
			shift.dy=d;
			break;
		case "left":
			x=ref.x-(msgbox.w+tri.h);
			shift.dx=-d;
			break;
		case "right":
			x=ref.x+ref.w;
			shift.dx=d;
			break;
		}

		// set tip poisitons
		el_tri.style.top=tri.y+"px";
		el_tri.style.left=tri.x+"px";

		// set tooltip poisitons
		var ctnr_offset=jqOffset(el_ttarea);
		var x_end=x-ctnr_offset.x;
		var y_end=y-ctnr_offset.y;
		x_start=x_end+shift.dx;
		y_start=y_end+shift.dy;
		el_control.style.opacity=0;
		el_control.style.left=x_start+"px";
		el_control.style.top=y_start+"px";
		setTimeout(function(){
			el_control.style.transition="opacity 0.3s,left 0.3s,top 0.3s";
			el_control.style.opacity=1;
			el_control.style.left=x_end+"px";
			el_control.style.top=y_end+"px";
		},1);
	};

	function close(){
		el_control.style.transition="opacity 0.3s,left 0.3s,top 0.3s";
		el_control.style.opacity=0;
		el_control.style.left=x_start+"px";
		el_control.style.top=y_start+"px";
		el_control.addEventListener("transitionend",function(e){
			if(e.propertyName=="opacity"){
				this.remove();
			}
		});
	};

	function init(){
		open();
	};

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