/*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
	};
};
function CCgtCardSlot(px){
	// elements
	const el_control=px.el_control;
	const el_table=el_control.querySelector(".cgt-table");
	// parameters
	const gspec=px.gspec;

	function init(){
		// add HTML tags
		for(let i=0;i<gspec.cards.length;i++){
			const el_slot=document.createElement("div");
			el_slot.className="cgt-card-slot";
			el_slot.setAttribute("data-cidx",(i+1));
			el_table.appendChild(el_slot);
		}
	};

	init();
};
function CCgtCardRadiate(px){
	// elements
	const el_slot=px.el_slot;
	const n=5;
	for(let i=0;i<n;i++){
		const el_radiate=document.createElement("div");
		el_radiate.className="cgt-card-radiate";
		el_radiate.setAttribute("data-idx",i);
		el_slot.appendChild(el_radiate);
		if(i==n-1){
			onAnimationEnd(el_radiate,function(e){
				el_slot.querySelectorAll(".cgt-card-radiate").forEach((el)=>{
					el.remove();
				});
			});
		}
	}
};
function CCgtCardAspectRatio(px){
	// elements
	const el_control=px.el_control;
	const elx_slot=el_control.querySelectorAll(".cgt-card-slot");

	function init(){
		// add HTML tag
		const b_ar=CSS.supports("aspect-ratio",1);
		elx_slot.forEach((el_slot)=>{
			if(b_ar){
				el_slot.style["aspect-ratio"]=1;
			}else{
				const el_aspectratio=document.createElement("div");
				el_aspectratio.className="cgt-card-aspectratio";
				el_aspectratio.style["padding-bottom"]="100%";
				el_slot.appendChild(el_aspectratio);
			}
		});
	};

	init();
};
function CCgtCardBody(px){
	// elements
	const el_control=px.el_control;
	const elx_slot=el_control.querySelectorAll(".cgt-card-slot");
	// parameters
	const gspec=px.gspec;

	function setBackground(el,url){
		el.style.background="url("+url+")";
		el.style["background-size"]="cover";
		el.style["background-position"]="center";
	};

	function createBackCard(){
		// back pic
		const el_back_pic=document.createElement("div");
		el_back_pic.className="cgt-card-back-pic";
		setBackground(el_back_pic,gspec.url_back_pic);
		// back card
		const el_back=document.createElement("div");
		el_back.className="cgt-card-back";
		el_back.appendChild(el_back_pic);
		return el_back;
	};

	function createFrontCard(cmd){
		// front pic
		const el_front_pic=document.createElement("div");
		el_front_pic.className="cgt-card-front-pic";
		const url=(cmd=="hit")?gspec.url_hit_pic:gspec.url_miss_pic;
		setBackground(el_front_pic,url);
		// front card
		const el_front=document.createElement("div");
		el_front.className="cgt-card-front";
		el_front.appendChild(el_front_pic);
		return el_front;
	};

	function slotUp(el_body){
		el_body.closest(".cgt-card-slot")
			.classList.add("cgt-card-slot-top");
	};

	function slotDown(el_body){
		el_body.closest(".cgt-card-slot")
			.classList.remove("cgt-card-slot-top");
	};

	function step_flip(el_body,callback){
		slotUp(el_body);
		onTransitionEnd(el_body,function(e){
			slotDown(el_body);
			callback(e);
		});
		el_body.classList.add("cgt-card-body-flip");
	};

	function step_shake(el_body,callback){
		onAnimationEnd(el_body,callback);
		el_body.classList.add("cgt-card-body-shake");
	};

	function step_flipback(el_body,callback){
		slotUp(el_body);
		onTransitionEnd(el_body,function(e){
			slotDown(el_body);
			callback(e);
		});
		el_body.classList.add("cgt-card-body-flipback");
	};

	function step_erase(el_body,callback){
		onTransitionEnd(el_body,callback);
		el_body.classList.add("cgt-card-body-erase");
	};

	function turn(el_body,cmd){
		// insert front card to card body
		const el_front=createFrontCard(cmd);
		el_body.insertBefore(el_front,el_body.firstChild);
		// animation sequence
		if(cmd=="hit"){
			step_flip(el_body,function(e){
				console.log("hit!");
				el_body.classList.remove("cgt-cstate-wait");
				el_body.classList.add("cgt-cstate-hit");
				CCgtCardRadiate({el_slot:el_body.closest(".cgt-card-slot")});
			});
		}else{
			step_flip(el_body,function(e){
				step_shake(el_body,function(e){
					step_flipback(el_body,function(e){
						step_erase(el_body,function(e){
							console.log("miss!");
							el_body.classList.remove("cgt-cstate-wait");
							el_body.classList.add("cgt-cstate-miss");
							//el_body.querySelector(".cgt-card-back-pic").remove();
						});
					});
				});
			});
		}
	};

	function sendClick(el_body){
		setTimeout(function(){
			const cmd=Math.random()<0.5?"hit":"miss";
			turn(el_body,cmd);
		},1000);
	};

	function click(e,el_body){
		if(el_body.classList.contains("cgt-cstate-init")){
			el_body.classList.remove("cgt-cstate-init");
			el_body.classList.add("cgt-cstate-wait");
			sendClick(el_body);
		}
	};

	function init(){
		// hide body card
		el_control.classList.add("cgt-card-body-hidden");
		// iterate slots to put a body card in each slot
		elx_slot.forEach((el_slot)=>{
			// create a body card
			const el_body=document.createElement("div");
			el_body.className="cgt-card-body";
			el_body.appendChild(createBackCard());
			// insert the body card into slot
			el_slot.appendChild(el_body);
		});
		// event:body-init
		el_control.addEventListener("body-init",function(e){
			// show body card
			el_control.classList.remove("cgt-card-body-hidden");
			// take the first body card to detect the transition end
			const el_body=el_control.querySelector(".cgt-card-body");
			// trigger body-ready after body card is shown
			onTransitionEnd(el_body,function(e){
				el_control.dispatchEvent(new Event("body-ready"));
			});
			el_control.addEventListener("body-ready",function(e){
				el_control.querySelectorAll(".cgt-card-body").forEach((el_body)=>{
					el_body.classList.add("cgt-cstate-init");
				});
			});
		});
	};

	init();
	return{
		click:click
	};
};
function CCgtCardFly(px){
	// elements
	const el_control=px.el_control;
	const elx_slot=el_control.querySelectorAll(".cgt-card-slot");
	// parameters
	const gspec=px.gspec;
	const num_of_cards=elx_slot.length;
	const card_unit=10;
	// variables
	let el_style=null;

	function triggerBodyInit(){
		el_control.dispatchEvent(new Event("body-init"));
	};

	function freezeScrollBar(){
		// freeze scorll bar.
		// If scroll bar appeared during the animation,
		// it would change the width of the body and
		// disrupt the animation.
		const el_body=document.body;
		const el_html=document.documentElement;
		if(el_html.offsetHeight<el_html.clientHeight){
			// scroll bar is not visible
			el_body.style["overflow-y"]="hidden";
		}
		el_body.style["overflow-x"]="hidden";
	};

	function releaseScrollBar(){
		const el_body=document.body;
		el_body.style["overflow-y"]="auto";
		el_body.style["overflow-x"]="auto";
	};

	function addStyleSheet(txt){
		const el=document.createElement("style");
		el.type="text/css";
		if(el.styleSheet){
			el.styleSheet.cssText=txt;
		} else {
			el.appendChild(document.createTextNode(txt));
		}
		document.getElementsByTagName("head")[0].appendChild(el);
		return el;
	};

	function createCardFlyCss(){
		let txt="";
		for(let i=0;i<num_of_cards;i++){
			const x=(Math.random()>=0.5)?1000:-1000;
			const y=(Math.random()>=0.5)?1000:-1000;
			txt+=
`.cgt-card-slot[data-cidx="${i+1}"] .cgt-card-fly{
	animation-name:kf-card-fly-${i+1};
	animation-delay:${(i%card_unit)*0.3}s;
	opacity:1;
}
@keyframes kf-card-fly-${i+1}{
	0%{
		opacity:0;
		transform:translate(${x}px,${y}px)
			scale(3) rotateX(45deg) rotateY(720deg) rotateZ(45deg)
			translate(200px,200px);
	}
	100%{
		opacity:1;
		transform:translate(0,0)
			scale(1) rotateX(0) rotateY(0) rotateZ(0)
			translate(0,0);
	}
}
`;
		}
		return txt;
	};

	function endOfFlyCards(el_fly){
		// end of fly card
		el_fly.addEventListener("animationend",function(e){
			setTimeout(function(){
				triggerBodyInit();
				// fade-out & remove card-fly
				el_control.classList.add("cgt-card-fly-end");
				el_fly.addEventListener("transitionend",function(e){
					// remove each div tag
					el_control.querySelectorAll(".cgt-card-fly").forEach((el)=>{
						el.remove();
					});
					// remove style
					el_style.remove();
					// release scroll bar
					releaseScrollBar();
				});
			},300);
		});
	};

	function run(){
		// count "animationend" event
		let idx=0;
		// freeze scroll bar
		freezeScrollBar();
		// calc lastend index
		let lastend=card_unit;
		if(card_unit<=num_of_cards){lastend--;}
		// add tags
		elx_slot.forEach((el_slot)=>{
			const el_fly=document.createElement("div");
			el_fly.className="cgt-card-fly";
			el_slot.appendChild(el_fly);
			// on the last card
			if(idx==lastend){
				lastend=-1;
				endOfFlyCards(el_fly);
			}
			idx++;
		});
		// add style & keyframes
		el_style=addStyleSheet(createCardFlyCss());
	};

	function init(){
		if(gspec.turnidx){
			triggerBodyInit();
		}else{
			run();
		}
	};

	init();
};
function CCgtTable(px){
	// elements
	const el_control=px.el_control;
	let el_table=null;
	// parameters
	const gspec=px.gspec;
	// function closures
	let fcl_cardfly=null;
	let fcl_cardbody=null;

	function click(e){
		// find the clicked card body
		let el_body=e.target.closest(".cgt-card-body");
		// flip the card
		if(el_body){
			fcl_cardbody.click(e,el_body);
		}
	};

	function run(){
		fcl_cardfly=CCgtCardFly({
			el_control:el_control,
			gspec:gspec
		});
	};

	function init(){
		// create card table
		el_table=document.createElement("div");
		el_table.className="cgt-table";
		el_control.appendChild(el_table);
		// create card slot
		CCgtCardSlot({
			el_control:el_control,
			gspec:gspec
		});
		// create aspect ratio
		CCgtCardAspectRatio({
			el_control:el_control
		});
		// create body card
		fcl_cardbody=CCgtCardBody({
			el_control:el_control,
			gspec:gspec
		});
		// events
		el_control.addEventListener("body-ready",function(e){
			el_table.addEventListener("click",function(e){
				click(e);
			});
		});
	};

	init();
	return{
		run:run
	};
};
function CCgtControl(px){
	// elements
	const el_control=px.el_control;
	// parameters
	const gspec=px.gspec;
	// function closures
	let fcl_table=null;

	function setBackground(el,url){
		el.style.background="url("+url+")";
		el.style["background-size"]="cover";
		el.style["background-position"]="center";
	};

	function run(){
		fcl_table.run();
	};

	function init(){
		//setBackground(el_control,gspec.url_bg_pic);
		fcl_table=CCgtTable({
			el_control:el_control,
			gspec:gspec
		});
	};

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