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 = "blindfold";
    	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);
		
		var image = new Image();
		efctList=['vr','sadako','maskbiden','maskmusk','maskape','maskdog','maskcat','maskgirl1','blindfold','maskgirl2','glass1'];
		function videoSetupEx(){
		    image.src = '../video/dat/' + cmd + '.png';
		    image.onerror = () => alert('error:image not found');
		    videoStatus('loading pics');
		}
		
		
		function videoLoopEx() {
			ctx.drawImage(video, 0, 0,wid,hei);
			var pos = tracker.getCurrentPosition();
			if(pos.length>0){
				let facex = Math.round(pos[62][0]);//center
				let facey = Math.round(pos[62][1]);
				let facewid = 2 * Math.round(pos[13][0] - pos[1][0]);
				facex = facex - facewid/2;
				facey = facey - facewid/2;
				ctx.drawImage( image , facex, facey, facewid, facewid ) ;
			}
			ctx2.drawImage(cvs,0,0, cvs2.width,cvs2.height);
		}