var wid;
    	var hei;
    	var destwid;
    	var desthei;
		var aspectRatio =1;
    	const cvs = document.getElementById("cvs");
    	const ctx= cvs.getContext("2d");
    	const cvs2 = document.getElementById("cvs2");
    	const ctx2= cvs2.getContext("2d");
    	var cmd = "snow";
    	const div = document.getElementById("cvsWrapper");
   		const video = document.querySelector("video");
		const tracker = new clm.tracker();
		const dllink = document.getElementById("idSnap");
		const filename = "ar-filter-snapshot.png";
		var efctList=[];
		var efctNum=0;
    	
		function streamStart(){
			navigator.mediaDevices.getUserMedia({
	            video: true,
	            audio: false,
	        }).then(stream => {
	            video.srcObject = stream;
	            video.play();
	            let {width, height} = stream.getTracks()[0].getSettings();
	            videoSetup(width,height);
	        }).catch(e => {
	          alert("ERROR:" + e)
	        })
        }

        //------MAIN
		function videoSetup(w,h){
			wid=w;
			hei=h;
			aspectRatio = w/h;
			
			//---set efctnum
			efctInit();
			
			
			//---resize video size and init tracker
			video.width=wid;
			video.height=hei;
			tracker.init(); 
			tracker.start(video);
			
			//---resize canvas
			cvs.width=wid;
			cvs.height=hei;
			if(isfix){
				destwid = wid;
				desthei = hei;
			}else{
				if ((window.innerWidth / window.innerHeight) > aspectRatio) {
					desthei = window.innerHeight;
					destwid = desthei * aspectRatio;
				} else {
					destwid = window.innerWidth;
					desthei = destwid / aspectRatio;
				}

				//destwid = Math.round(window.innerWidth*0.93);
				//desthei = Math.round(destwid * sratio);
			}
			cvs2.width =  destwid;
			cvs2.height = desthei;
			//alert(destwid + "," + desthei + "," + window.innerWidth + "," + window.innerHeight);//454.735 488.817(980,1641 )
			
			//---hide video(for safari)
			$("#cvs").hide();
    		$("#video").width(1);
			$("#video").height(1);
			
			//---adjust height
			$("#cvsWrapper").width(destwid);
			$("#cvsWrapper").height(desthei);
			
			//---adjust viewport for Android
			var canvasWidth = $('#myCanvas').width();
			var deviceWidth = $(window).width();
			var scale = deviceWidth / destwid;
			$('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=' + scale + ', user-scalable=no');
  
			videoSetupEx();
			loadShow(false);
			videoLoop();
		}
		function videoLoop() {
			requestAnimationFrame(videoLoop);
			videoLoopEx();
		}
		
		function resizeWindow(){
			if(isfix){
				destwid =wid;
				desthei = hei;
			}else{
				destwid = Math.round(window.innerWidth*0.9);
				desthei = Math.round(window.innerHeight*0.9);
			}
			cvs2.width =  destwid;
			cvs2.height = desthei;
		}
		
		//---switch effect
		function efctInit(){
			for(let i=0;i<efctList.length;i++){
				if(efctList[i] == cmd){
					efctNum=i;
					break;
				}
			}
		}
		function efctNext(val){
			let mynum = efctNum + val;
			if(mynum >= efctList.length)mynum=0;
			if(mynum<0)mynum=efctList.length-1;
			if(mynum<0)return;
			if(mynum == efctNum)return;
			
			efctNum=mynum;
			cmd=efctList[efctNum];
			loadShow(true);
			videoSetupEx();
			loadShow(false);
		}
		
		//---switch device
		async function devNext() {
			switchToNextCamera().catch(error => {
			  console.error('Error switching to the next camera:', error);
			});
		}

		async function switchToNextCamera() {
			const devices = await navigator.mediaDevices.enumerateDevices();
			  const videoDevices = devices.filter(device => device.kind === 'videoinput');

			if (videoDevices.length <= 1) {
				console.log("Only one video input device is found.");
			    return; // 1つ以下のカメラしかない場合は、何もしない
			}

			const stream = video.srcObject;
			const currentVideoTrack = stream.getVideoTracks()[0];
			const currentDeviceId = currentVideoTrack.getSettings().deviceId;
			const currentIndex = videoDevices.findIndex(device => device.deviceId === currentDeviceId);
			const nextIndex = (currentIndex + 1) % videoDevices.length; // 次のデバイスのインデックスを計算

			const nextDeviceId = videoDevices[nextIndex].deviceId;
			const nextStream = await navigator.mediaDevices.getUserMedia({
				video: { deviceId: { exact: nextDeviceId } }
			});

			currentVideoTrack.stop();
			video.srcObject = nextStream;
			video.play();
		}
		
		
		//------snapshot
		function capSave(){
			document.getElementById("sndShutter").play();
			if (cvs.msToBlob) {
				var blob = cvs.msToBlob();
				window.navigator.msSaveBlob(blob, filename);
			} else {
				dllink.href = cvs.toDataURL("image/png");
				dllink.download = filename;
				dllink.click();
			}
					
		}
				
		//------UTIL
		function videoStatus(s){
			$("#dResult").html(s);
		}
		function loadShow(val){
			if(val){
				$("#iconLoad").show();
				$("#iconCam").hide();
				$("#iconL").hide();
				$("#iconR").hide();
				$("#iconDev").hide();
			}else{
				$("#iconLoad").hide();
				$("#iconCam").show();
				$("#iconL").show();
				$("#iconR").show();
				$("#iconDev").show();
			}
		}
		function myrnd(v){
			v = v + Math.floor(Math.random() * v);
			if(v>255)v=255;
			return v;
		}
		window.addEventListener("load", streamStart);
		window.addEventListener('resize', resizeWindow);
		
class cParticle {
	constructor(prop, w, h) {
		this.prop = prop;
		this.wid=w;
		this.hei=h;
		
		this.w=w;
		this.h=h;
		this.x = Math.floor(Math.random() * this.wid);
		this.y = Math.floor(Math.random() * this.hei);
		this.movx = 0;
		this.movy = 0;
	}
		     
	//---
	ptclInit(){
		let z = 1 + Math.floor(Math.random()*9);
		this.w = this.wid/15 * (z/10);
		this.h = this.w;
		this.movy = 1 * (this.wid/200) + this.wid/100 * (z/10);
	}
	ptclLoop(){
		this.x = this.x + this.movx;
		this.y = this.y + this.movy;
		if(this.x < 0){
			this.ptclInit();
			this.x = Math.floor(Math.random() * this.wid);
		}
		if(this.x > this.wid){
			this.ptclInit();
			this.x = -this.w;
		}
		if(this.y < 0){
			this.ptclInit();
			this.y = Math.floor(Math.random() * this.hei);
		}
		if(this.y > this.hei){
			this.ptclInit();
			this.y = -5 * this.h;
		}
	 }
}

	var pPtcl = new Array;
	var pLen = 30;
	var aImg = new Image();

	function videoSetupEx(){
		for(let i=0;i<pLen;i++){
			var p = new cParticle('snow', wid, hei);
			p.ptclInit();
			pPtcl.push(p);
		}
	    aImg.src = '../video/dat/snow.png';
	}
	function videoLoopEx() {
		ctx.drawImage(video, 0, 0,wid,hei);		
		for(let i=0;i<pPtcl.length;i++){
			pPtcl[i].ptclLoop();
			ctx.drawImage(aImg, pPtcl[i].x, pPtcl[i].y, pPtcl[i].w, pPtcl[i].h);
		}
		
		ctx2.drawImage(cvs,0,0, cvs2.width,cvs2.height);
	}