/*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 CFinpControl(px){
	// elements
	var el_control=px.el_control;
	var el_overlay=null;
	var el_dialog=null;
	var el_input=null;
	// parameters
	var inival=(px.inival!==undefined)?px.inival:"";
	// callbacks
	var isValidKey=px.isValidKey?px.isValidKey:function(key){return true;};
	var normalize=px.normalize?px.normalize:function(val){return val;};
	var displayVal=px.displayVal?px.displayVal:function(val){return val;};
	// variables
	var value=null;

	// viewport offset
	function vpOffset(el){
		var rect=el.getBoundingClientRect();
		return {
			x:rect.left,
			y:rect.top
		};
	};

	function getValue(){
		return value;
	};

	function setValue(val){
		value=val;
		el_control.innerHTML=displayVal(val);
	};

	function copyStyle(el_src,el_des,ls){
		var style=window.getComputedStyle(el_src);
		for(var i=0;i<ls.length;i++){
			var key=ls[i];
			el_des.style[key]=style.getPropertyValue(key);
		}
	};

	function enter(e){
		e.stopPropagation();
		var val=normalize(el_input.value);
		if(val!==false){
			var val0=getValue();
			setValue(val);
			if(val!=val0){
				el_control.dispatchEvent(new CustomEvent("change",{detail:val}));
			}
			closeDialog();
		}else{
			el_dialog.classList.remove("finp-error");
			var dummy=el_dialog.offsetWidth;
			el_dialog.classList.add("finp-error");
		}
	};

	function cancel(e){
		e.stopPropagation();
		closeDialog();
	};

	function openDialog(){
		// overlay
		el_overlay=document.createElement("div");
		el_overlay.className="finp-overlay";
		el_overlay.addEventListener("click",cancel);
		// input box
		el_input=document.createElement("input");
		el_input.className="finp-inpbox";
		el_input.setAttribute("type","text");
		copyStyle(el_control,el_input,[
			"padding",
			"width",
			"height",
			"font-family",
			"font-size",
			"line-height",
			"letter-spacing",
			"border",
			"border-radius",
			"text-align",
			"vertical-align"
		]);
		el_input.value=getValue();
		el_input.addEventListener("keydown",function(e){
			if(isValidKey(e.key,el_input.value)){
				if(e.key=="Enter"){
					enter(e);
				}else if(e.key=="Escape"){
					cancel(e);
				}
			}else{
				e.preventDefault();
			}
		});
		// enter button
		var el_enter=document.createElement("div");
		el_enter.className="finp-enter";
		el_enter.addEventListener("click",enter);
		// cancel button
		var el_cancel=document.createElement("div");
		el_cancel.className="finp-cancel";
		el_cancel.addEventListener("click",cancel);
		// dialog
		el_dialog=document.createElement("div");
		el_dialog.className="finp-dialog";
		el_dialog.appendChild(el_input);
		el_dialog.appendChild(el_enter);
		el_dialog.appendChild(el_cancel);
		// append overlay and dialog to body
		document.body.appendChild(el_overlay);
		document.body.appendChild(el_dialog);
		// position dlglog
		var pos_control=vpOffset(el_control);
		var pos_input=vpOffset(el_input);
		var pos_dlg=vpOffset(el_dialog);
		var dx=pos_input.x-pos_dlg.x;
		var dy=pos_input.y-pos_dlg.y;
		el_dialog.style.left=(pos_control.x-dx)+"px";
		el_dialog.style.top=(pos_control.y-dy)+"px";
		// focus input box
		el_input.focus();
		// put the caret at the end of the text
		var len=el_input.value.length;
		el_input.setSelectionRange(0,len);
	};

	function closeDialog(){
		// remove overlay and dialog
		el_overlay.remove();
		el_dialog.remove();
		// focus el_control
		el_control.focus();
	};

	function init(){
		// normalize&set inival
		var val=normalize(inival);
		setValue((val===false)?"":val);
		// events
		esToClick(el_control).addEventListener("click",function(e){
			openDialog();
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		getValue:getValue,
		setValue:setValue
	};
};
"use strict";
function CHexColorControl(px){
	// elements
	var el_control=px.el_control;
	// parameters
	var inival=(px.inival!==undefined)?px.inival:"FF0000";
	// function closures
	var fcl_finp;

	function normalizeVal(val){
		return val.toUpperCase(val);
	};

	function init(){
		var re_allowed_chars=new RegExp("^[0-9A-F]$","i");
		var re_validate_value=new RegExp("^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$","i");

		function isValidKey(key,val){
			// control keys
			var key_allowed=[
				"Enter",
				"Escape",
				"ArrowLeft",
				"ArrowRight",
				"Home",
				"End",
				"Delete",
				"Backspace"
			];
			if(key_allowed.indexOf(key)!=-1){
				return true;
			}
			// allowed characters
			if(re_allowed_chars.test(key)){
				if(val.length<6){
					return true;
				}
			}
			// false if everything fails
			return false;
		};

		function normalize(val){
			if(re_validate_value.test(val)){
				return normalizeVal(val);
			}
			return false;
		};

		function displayVal(val){
			return "#"+val;
		};

		// call base class
		fcl_finp=CFinpControl({
			el_control:el_control,
			inival:inival,
			isValidKey:isValidKey,
			normalize:normalize,
			displayVal:displayVal
		});
	};

	init();
	return fcl_finp;
};
"use strict";
function CStepControl(px){
	// elements
	var el_control=px.el_control;
	var el_inpbox=el_control.querySelector(".spc-inpbox");
	var el_select=el_inpbox.querySelector(".spc-select");
	var el_inc=el_control.querySelector(".spc-inc");
	var el_dec=el_control.querySelector(".spc-dec");
	// parameters
	var inival=(px.inival!==undefined)?px.inival:0;
	var maxlen=px.maxlen;
	var decimals=(px.decimals!==undefined)?px.decimals:0;
	var minval=(px.minval!==undefined)?px.minval:null;
	var maxval=(px.maxval!==undefined)?px.maxval:null;
	var loop=(px.loop!==undefined)?px.loop:false;
	var step=(px.step!==undefined)?px.step:1;
	var init_delay=(px.init_delay!==undefined)?px.init_delay:600;
	var repeat_delay=(px.repeat_delay!==undefined)?px.repeat_delay:80;
	// callbacks
	var displayVal=px.displayVal;
	// regular expression patterns
	var sign=(px.sign!==undefined)?px.sign:false;
	var signstr=sign?"-+":"";
	var repat_allowed_chars=(px.repat_allowed_chars!==undefined)?
		px.repat_allowed_chars:
		((decimals==0)?'^['+signstr+'0-9]$':'^['+signstr+'0-9.]$');
	var repat_validate_value=(px.repat_validate_value!==undefined)?
		px.repat_validate_value:
		'^['+signstr+']?([0-9]+(\\.[0-9]+)?|\\.[0-9]+)$';
	// function closures
	var fcl_finp;

	function getValue(){
		if(el_select){
			return el_select.selectedIndex.toString();
		}else{
			return fcl_finp.getValue();
		}
	};

	function setValue(val){
		if(el_select){
			el_select.selectedIndex=val;
		}else{
			fcl_finp.setValue(val);
		}
	};

	function loopVal(v){
		if((maxval!=null)&&(v>maxval)){v=minval}
		if((minval!=null)&&(v<minval)){v=maxval}
		return v;
	};

	function limitVal(v){
		if((maxval!=null)&&(v>maxval)){v=maxval}
		if((minval!=null)&&(v<minval)){v=minval}
		return v;
	};

	function normalizeVal(val,delta,loop0){
		var v=parseFloat(val)+(delta?delta:0);
		return ((loop&&loop0)?loopVal(v):limitVal(v)).toFixed(decimals);
	};

	function setupSelect(){
		// set up decimals, step,
		// minval, maxval for a selection box
		decimals=0;
		step=1;
		minval=0;
		maxval=el_select.options.length-1;
		// set default value
		if(inival!==undefined){
			var el_option=el_select.querySelector("option[value='"+inival+"'");
			if(el_option){el_option.selected=true;}
		}
		// change event
		el_select.addEventListener("change",function(e){
			el_control.dispatchEvent(
				new CustomEvent("change",{detail:this.value}));
			e.stopPropagation();
		});
	};

	function setupInpBox(){
		var re_allowed_chars=new RegExp(repat_allowed_chars);
		var re_validate_value=new RegExp(repat_validate_value);

		function isValidKey(key,val){
			// control keys
			var key_allowed=[
				"Enter",
				"Escape",
				"ArrowLeft",
				"ArrowRight",
				"Home",
				"End",
				"Delete",
				"Backspace"
			];
			if(key_allowed.indexOf(key)!=-1){
				return true;
			}
			// allowed characters
			if(re_allowed_chars.test(key)){
				if((maxlen===undefined)||(val.length<maxlen)){
					return true;
				}
			}
			// false if everything fails
			return false;
		};

		function normalize(val){
			if(re_validate_value.test(val)){
				return normalizeVal(val,0,false);
			}
			return false;
		};

		fcl_finp=CFinpControl({
			el_control:el_inpbox,
			inival:inival,
			fcl:fcl_finp,
			isValidKey:isValidKey,
			normalize:normalize,
			displayVal:displayVal
		});

		el_inpbox.addEventListener("change",function(e){
			el_control.dispatchEvent(
				new CustomEvent("change",{detail:e.detail}));
		});
	};

	function setupIncDec(){
		var timer_id=null;

		function setupBtn(el_btn,dir){
			var step0=step*dir;
			function add(){
				var val1=getValue();
				var val2=normalizeVal(val1,step0,true);
				setValue(val2);
				if(val1!==val2){
					var val=val2;
					if(el_select){
						val=el_select.options[val2].value;
					}else{
						if(decimals){
							val=parseFloat(val);
						}else{
							val=parseInt(val);
						}
					}
					el_control.dispatchEvent
						(new CustomEvent("change",{detail:val}));
				}
			};
			el_btn.addEventListener("keydown",function(e){
				if((e.key=="Enter")||(e.key==" ")){
					add();
					e.preventDefault();
				}
			});
			el_btn.addEventListener("pointerdown",function(e){
				// [pointer capture]
				// style "touch-action:none;" is necessary for touch device
				// proceed only when e.which==1 (left button)
				if(e.which==1){
					this.setPointerCapture(e.pointerId);
					// auto repeat
					timer_id=setTimeout(function(){
						add();
						function func_repeat(){
							timer_id=setTimeout(function(){
								add();
								func_repeat();
							},repeat_delay);
						}
						func_repeat();
					},init_delay);
				}
			});
			el_btn.addEventListener("pointerup",function(e){
				// do not check if e.which==1 (left button)
				// the pointer may be released with a button
				// other than e.which==1
				// you may not receive the pointerup event for
				// e.which==1 if other button is still
				// pressed down.
				this.releasePointerCapture(e.pointerId);
				// stop auto repeat
				if(timer_id){
					clearTimeout(timer_id);
					timer_id=null;
					add();
				}
			});
			// disable the context menu on button
			// to prevent the context menu from interfering
			// pointer capture & release
			el_btn.addEventListener("contextmenu",function(e){
				e.preventDefault();
			});
		};
		setupBtn(el_inc,1);
		setupBtn(el_dec,-1);
	};

	function init(){
		if(el_select){
			setupSelect();
		}else{
			setupInpBox();
		}
		// setup increment/decremnet button
		setupIncDec();
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

	init();
	return {
		getValue:getValue,
		setValue:setValue
	};
};
"use strict";
function CPercentControl(px){
	px.displayVal=function(val){return val+"%";}
	px.minval=px.minval!==undefined?px.minval:0;
	px.maxval=px.maxval!==undefined?px.maxval:100;
	return CStepControl(px);
};
"use strict";
function CSBarControl(px){
	// elements
	var el_control=px.el_control;
	var el_cursor=el_control.querySelector(".sbar-cursor");
	// parameters
	var minval=(px.minval!==undefined)?px.minval:0;
	var maxval=(px.minval!==undefined)?px.maxval:0;
	var inival=(px.inival!==undefined)?px.inival:minval;
	// value
	var value=null;
	// variables
	var pos_curr=null;
	var bar_width=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 calcBarWidth(){
		bar_width=el_control.clientWidth;
	};

	function normalizeVal(val){
		return Math.min(maxval,Math.max(val,minval));
	};

	function normalizePos(pos){
		return Math.min(bar_width,Math.max(pos,0));
	};

	function valToPos(val){
		var val0=normalizeVal(val);
		return ((val0-minval)/(maxval-minval))*bar_width;
	};

	function posToVal(pos){
		return (pos/bar_width)*(maxval-minval)+minval;
	};

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

	function setValCore(val){
		var value0=normalizeVal(val);
		if(value!==value0){
			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
		calcBarWidth();
		// position cursor
		posCursorAndEvent(e.offsetX);
		// capture pointer
		el_control.setPointerCapture(e.pointerId);
		// set moving flag
		b_moving=true;
	};

	function dragMove(e){
		// position cursor
		posCursorAndEvent(e.offsetX);
	};

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

	function init(){
		// calc bar width
		calcBarWidth();
		// set 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 CHueBarControl(px){
	// elements
	var el_control=px.el_control;
	// function closures
	var fcl_sbar;
	// parameteres
	px.minval=0;
	px.maxval=360;

	function setupBackground(){
		var cx=[];
		for(var i=0;i<=360;i++){
			cx.push("hsl("+i+",100%,50%) "+(i*100/360).toFixed(2)+"%");
		}
		var bg="linear-gradient(to right,"+cx.join(",")+")";
		el_control.style.background=bg;
	};

	function init(){
		setupBackground();
		fcl_sbar=CSBarControl(px);
	};

	init();
	return fcl_sbar;
};
"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
	};
};
"use strict";
var CColorTool={

	getReResult:function(color){
		return(/^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i.exec(color))
	},

	isColorStr:function(color){
		return!!this.getReResult(color);
	},

	hexToRgb:function(hex){
		var result=this.getReResult(hex);
		return result?{
			r:parseInt(result[1],16),
			g:parseInt(result[2],16),
			b:parseInt(result[3],16)
		}:null;
	},

	rgbToHex:function(rgb){
		return(
			String("00"+(rgb.r).toString(16)).slice(-2)+
			String("00"+(rgb.g).toString(16)).slice(-2)+
			String("00"+(rgb.b).toString(16)).slice(-2)).toUpperCase();
	},

	hslToRgb:function(hsl){
		var h=hsl.h/360;
		var s=hsl.s/100;
		var l=hsl.l/100;
		var rgb;
		if(s==0){
			rgb={r:l,g:l,b:l};
		}else{
			function toRgb(p,q,t){
				if(t<0){t+=1;}
				if(t>1){t-=1;}
				if(t<1/6){return p+(q-p)*6*t;}
				if(t<1/2){return q;}
				if(t<2/3){return p+(q-p)*(2/3-t)*6;}
				return p;
			};
			var q=(l<0.5)?(l*(1+s)):(l+s-l*s);
			var p=2*l-q;
			rgb={r:toRgb(p,q,h+1/3),g:toRgb(p,q,h),b:toRgb(p,q,h-1/3)};
		};
		rgb.r=Math.round(rgb.r*255);
		rgb.g=Math.round(rgb.g*255);
		rgb.b=Math.round(rgb.b*255);
		return rgb;
	},

	rgbToHsl:function(rgb){
		var r=rgb.r/255;
		var g=rgb.g/255;
		var b=rgb.b/255;
		var max=Math.max(r,g,b);
		var min=Math.min(r,g,b);
		var h,s,l=(max+min)/2;
		var d=max-min;
		if(d==0){
			h=s=0;
		}else{
			s=(l>0.5)?(d/(2-max-min)):(d/(max+min));
			switch(max){
			case r:h=(g-b)/d+(g<b?6:0);break;
			case g:h=(b-r)/d+2;break;
			case b:h=(r-g)/d+4;break;
			}
			h/=6;
		}
		return {
			h:Math.round(h*360),
			s:Math.round(s*100),
			l:Math.round(l*100)
		};
	}
};
"use strict";
function CCpkControl(px){
	// elements
	var el_control=px.el_control;
	var el_preview=el_control.querySelector(".cpk-preview");
	var el_huebar=el_control.querySelector(".cpk-huebar");
	var el_satlgn=el_control.querySelector(".cpk-satlgn");
	var el_hexcolor=el_control.querySelector(".cpk-hexcolor");
	var el_val_h=el_control.querySelector(".cpk-val-h");
	var el_val_s=el_control.querySelector(".cpk-val-s");
	var el_val_l=el_control.querySelector(".cpk-val-l");
	var el_val_r=el_control.querySelector(".cpk-val-r");
	var el_val_g=el_control.querySelector(".cpk-val-g");
	var el_val_b=el_control.querySelector(".cpk-val-b");
	// inival
	var inival=px.inival?px.inival:"000000";
	// values
	var val_hex;
	var val_rgb;
	var val_hsl;
	// function closures
	var fcl_huebar;
	var fcl_satlgn;
	var fcl_hexcolor;
	var fcl_val_r;
	var fcl_val_g;
	var fcl_val_b;
	var fcl_val_h;
	var fcl_val_s;
	var fcl_val_l;
	// components:Reg,Green,Blue
	function CValRgbControl(px){
		px.minval=0;
		px.maxval=255;
		return CStepControl(px);
	};
	function CValRControl(px){
		return CValRgbControl(px);
	};
	function CValGControl(px){
		return CValRgbControl(px);
	};
	function CValBControl(px){
		return CValRgbControl(px);
	};
	// components:Hue,Saturation,Lightneww
	function CValHueControl(px){
		px.minval=0;
		px.maxval=360
		return CStepControl(px);
	};
	function CValSatControl(px){
		return CPercentControl(px);
	};
	function CValLgnControl(px){
		return CPercentControl(px);
	};
	// computeColor
	function computeColor(source){
		// compute Hex,RGB,HSL
		switch(source){
		case "hsl":
			val_rgb=CColorTool.hslToRgb(val_hsl);
			val_hex=CColorTool.rgbToHex(val_rgb);
			break;
		case "rgb":
			val_hsl=CColorTool.rgbToHsl(val_rgb);
			val_hex=CColorTool.rgbToHex(val_rgb);
			break;
		case "hex":
			val_rgb=CColorTool.hexToRgb(val_hex);
			val_hsl=CColorTool.rgbToHsl(val_rgb);
			break;
		}
	};
	// update preview
	function redrawPreview(){
		el_preview.style.background=
			"hsl("+val_hsl.h+","+val_hsl.s+"%,"+val_hsl.l+"%"+")";
	}
	// update color
	function update(source,exclude){
		// computer Hex,RGB,HSL
		computeColor(source);
		// setValue
		if(exclude!="huebar"){
			fcl_huebar.setValue(val_hsl.h);
		}
		if(exclude!="satlgn"){
			fcl_satlgn.setHue(val_hsl.h);
			fcl_satlgn.setValue(val_hsl);
		}
		if(exclude!="hexcolor"){
			fcl_hexcolor.setValue(val_hex);
		}
		if(exclude!="rgbcolor"){
			fcl_val_r.setValue(val_rgb.r);
			fcl_val_g.setValue(val_rgb.g);
			fcl_val_b.setValue(val_rgb.b);
		}
		if(exclude!="hslcolor"){
			fcl_val_h.setValue(val_hsl.h);
			fcl_val_s.setValue(val_hsl.s);
			fcl_val_l.setValue(val_hsl.l);
		}
		redrawPreview();
	};
	function updateAndEvent(source,exclude){
		update(source,exclude);
		el_control.dispatchEvent(new CustomEvent(
			"change",{detail:val_hex}));
	};
	// Get & Set
	function getValue(){
		return val_hex;
	};
	function setValue(val){
		val_hex=val;
		update("hex",null);
	};
	// init
	function init(){
		// inival
		val_hex=inival;
		computeColor("hex");
		// update preview
		redrawPreview();
		// huebar & saturation x lightness area
		fcl_huebar=CHueBarControl({
			el_control:el_huebar,
			inival:val_hsl.h
		});
		fcl_satlgn=CSatLgnControl({
			el_control:el_satlgn,
			inival:val_hsl
		});
		// hexcolor
		fcl_hexcolor=CHexColorControl({
			el_control:el_hexcolor,
			inival:val_hex
		});
		// rgbcolor
		fcl_val_r=CValRControl({
			el_control:el_val_r,
			inival:val_rgb.r
		});
		fcl_val_g=CValGControl({
			el_control:el_val_g,
			inival:val_rgb.g
		});
		fcl_val_b=CValBControl({
			el_control:el_val_b,
			inival:val_rgb.b
		});
		// hslcolor
		fcl_val_h=CValHueControl({
			el_control:el_val_h,
			inival:val_hsl.h
		});
		fcl_val_s=CValSatControl({
			el_control:el_val_s,
			inival:val_hsl.s
		});
		fcl_val_l=CValLgnControl({
			el_control:el_val_l,
			inival:val_hsl.l
		});
		// events:huebar & satlgn area
		el_huebar.addEventListener("change",function(e){
			val_hsl.h=Math.round(e.detail);
			updateAndEvent("hsl","huebar");
		});
		el_satlgn.addEventListener("change",function(e){
			var sl=e.detail;
			val_hsl.s=Math.round(sl.s);
			val_hsl.l=Math.round(sl.l);
			updateAndEvent("hsl","satlgn");
		});
		// events:hexcolor
		el_hexcolor.addEventListener("change",function(e){
			val_hex=e.detail;
			updateAndEvent("hex","hexcolor");
		});
		// events:rgbcolor
		el_val_r.addEventListener("change",function(e){
			val_rgb.r=e.detail;
			updateAndEvent("rgb","rbgcolor");
		});
		el_val_g.addEventListener("change",function(e){
			val_rgb.g=e.detail;
			updateAndEvent("rgb","rbgcolor");
		});
		el_val_b.addEventListener("change",function(e){
			val_rgb.b=e.detail;
			updateAndEvent("rgb","rbgcolor");
		});
		// events:hslcolor
		el_val_h.addEventListener("change",function(e){
			val_hsl.h=e.detail;
			updateAndEvent("hsl","hslcolor");
		});
		el_val_s.addEventListener("change",function(e){
			val_hsl.s=e.detail;
			updateAndEvent("hsl","hslcolor");
		});
		el_val_l.addEventListener("change",function(e){
			val_hsl.l=e.detail;
			updateAndEvent("hsl","hslcolor");
		});
		// call base class
		CUiControl({
			el_control:el_control
		});
	};

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