/*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 CSAreaControl(px){
	// elements
	var el_control=px.el_control;
	var el_cursor=el_control.querySelector(".sarea-cursor");
	// parameters
	var inival=(px.inival!==undefined)?px.inival:{x:0,y:0};
	var minval_x=(px.minval_x!==undefined)?px.minval_x:0;
	var maxval_x=(px.minval_x!==undefined)?px.maxval_x:0;
	var minval_y=(px.minval_y!==undefined)?px.minval_y:0;
	var maxval_y=(px.minval_y!==undefined)?px.maxval_y:0;
	// value
	var value=null;
	// variables
	var pos_curr=null;
	var area_size={w:0,h:0};
	var b_moving=false;

	// debounce function to reduce # of the "pointermove" event
	function debounce(fn,time){
		var timer=null;
		return function(e){
			clearTimeout(timer);
			timer=setTimeout(function(){fn(e);},time);
		};
	};

	function calcAreaSize(){
		area_size={
			w:el_control.clientWidth,
			h:el_control.clientHeight
		};
	};

	function normalizeVal(val){
		return {
			x:Math.min(maxval_x,Math.max(val.x,minval_x)),
			y:Math.min(maxval_y,Math.max(val.y,minval_y))
		};
	};	

	function normalizePos(pos){
		return {
			x:Math.min(area_size.w,Math.max(pos.x,0)),
			y:Math.min(area_size.h,Math.max(pos.y,0))
		};
	};

	function valToPos(val){
		var val0=normalizeVal(val);
		return {
			x:((val0.x-minval_x)/(maxval_x-minval_x))*area_size.w,
			y:((val0.y-minval_y)/(maxval_y-minval_y))*area_size.h
		};
	};

	function posToVal(pos){
		return {
			x:((pos.x)/area_size.w)*(maxval_x-minval_x)+minval_x,
			y:((pos.y)/area_size.h)*(maxval_y-minval_y)+minval_y
		};
	};

	function posCursor(pos){
		var pos_curr0=normalizePos(pos);
		if((pos_curr===null)||(pos_curr.x!==pos_curr0.x)||(pos_curr.y!==pos_curr0.y)){
			pos_curr=pos_curr0;
			el_cursor.style.left=pos_curr.x+"px";
			el_cursor.style.top=pos_curr.y+"px";
			return true;
		}else{
			return false;
		}
	};

	function setValCore(val){
		var value0=normalizeVal(val);
		if((value===null)||(value.x!==value0.x)||(value.y!==value0.y)){
			value=value0;
			return true;
		}else{
			return false;
		}
	};

	function posCursorAndEvent(pos){
		posCursor(pos);
		if(setValCore(posToVal(pos_curr))){
			el_control.dispatchEvent(new CustomEvent(
				"change",{detail:value}));
		}
	};

	function getValue(){
		return value;
	};

	function setValue(val){
		setValCore(val);
		posCursor(valToPos(value));
	};

	function beginMove(e){
		// calc bar width
		calcAreaSize();
		// position cursor
		posCursorAndEvent({x:e.offsetX,y:e.offsetY});
		// capture pointer
		el_control.setPointerCapture(e.pointerId);
		// set moving flag
		b_moving=true;
	};

	function dragMove(e){
		// position cursor
		posCursorAndEvent({x:e.offsetX,y:e.offsetY});
	};

	function endMove(e){
		// release pointer capture
		el_control.releasePointerCapture(e.pointerId);
		// reset moving flag
		b_moving=false;
	};

	function init(){
		// calc area size (display must be 'block')
		calcAreaSize();
		// inival
		setValue(inival);
		// pointerdown event (should be with "touch-action:none;")
		el_control.addEventListener("pointerdown",function(e){
			e.preventDefault();
			// [pointer capture]
			// style "touch-action:none;" is necessary for touch device
			// proceed only when e.which==1 (left button)
			if(e.which==1){
				beginMove(e);
			}
		});
		// pintermove event
		el_control.addEventListener("pointermove",debounce(function(e){
			e.preventDefault();
			if(b_moving){
				dragMove(e);
			}
		},1));
		// pointerup event
		el_control.addEventListener("pointerup",function(e){
			e.preventDefault();
			if(b_moving){
				endMove(e);
			}
		});
		// disable the context menu
		// to prevent the context menu from interfering
		// pointer capture & release
		el_control.addEventListener("contextmenu",function(e){
			e.preventDefault();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		getValue:getValue,
		setValue:setValue
	};
};
"use strict";
function CSatLgnControl(px){
	// elements
	var el_control=px.el_control;
	var el_sat=el_control.querySelector(".satlgn-sat");
	var el_lgn=el_control.querySelector(".satlgn-lgn");
	var el_sarea=el_control.querySelector(".sarea-control");
	// set up parameters
	px.inival=(px.inival!==undefined)?px.inival:{h:0,s:100,l:50};
	px.minval_x=0;
	px.maxval_x=100;
	px.minval_y=0;
	px.maxval_y=100;
	// variables
	var hue=px.inival.h;
	var fcl=null;

	function xyToSL(xy){
		var s;
		var l;
		if(xy.y<-0.5*xy.x+50){
			// lightness>50%
			var q=xy.x+2*xy.y;
			l=(100-q)/2+50;
			s=q?(xy.x/q*100):0;
		}else{
			// lightness<=50%
			l=(100-xy.y)/(xy.x/100+1);
			s=l?xy.x:0;
		}
		return{s:s,l:l};
	};

	function slToXY(sl){
		var x;
		var y;
		if(sl.l>50){
			// lightness>50%
			var vx=100-(sl.l-50)*2;
			var vy=100-sl.l;
			x=vx*sl.s/100;
			y=vy*(100-sl.s)/100;
		}else{
			// lightness<=50%
			x=sl.s;
			y=100-sl.l*(1+x/100);
		}
		return {x:x,y:y};
	};

	function getValue(){
		var val=xyToSL(fcl.getValue());
		val.h=hue;
		return val;
	};

	function setValue(val){
		hue=val.h;
		fcl.setValue(slToXY(val));
	};

	function setHue(h){
		hue=h;
		el_sat.style.background="linear-gradient("+
			"to right,white,hsl("+h+",100%,50%))";
	};

	function createFillDiv(){
		var el=document.createElement("div");
		el.style.position="absolute";
		el.style.top="0";
		el.style.bottom="0";
		el.style.left="0";
		el.style.right="0";
		return el;
	};

	function setupLgnDiv(){
		el_lgn.style.background="linear-gradient("+
			"to bottom,rgba(0,0,0,0),rgba(0,0,0,1))";
	};

	function setupSatDiv(){
		setHue(hue);
	};

	function init(){
		// setup divs
		setupLgnDiv();
		setupSatDiv();
		// call base object
		px.el_control=el_sarea;
		px.inival=slToXY(px.inival);
		fcl=CSAreaControl(px);
		// events
		el_sarea.addEventListener("change",function(e){
			var val=xyToSL(e.detail);
			val.h=hue;
			el_control.dispatchEvent(new CustomEvent(
				"change",{detail:val}));
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		getValue:getValue,
		setValue:setValue,
		setHue:setHue
	};
};