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 = "wrongprint";
    	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);
		
		efctList=['security','Mosaic','Mirror','VHS','wrongprint','timestamp','dot','earthquake','div2-2','div3-3','div1-5','div1-5','div5-1'];
		var myimg = new Image;
		var wlen;
		var hlen;
		var wsize;
		var hsize;
		var timeposX = wid/2;
		var timeposY = hei/8;
		var recposX = wid/10;
		var recposY = hei/8;

			
		function videoSetupEx(){
			switch(cmd){
			case "div5-1":
				wlen=5;
				hlen=1;
				wsize = Math.floor(wid/wlen);
				hsize = Math.floor(hei/hlen);
				break;
			case "div1-5":
				wlen=1;
				hlen=5;
				wsize = Math.floor(wid/wlen);
				hsize = Math.floor(hei/hlen);
				break;
			case "div4-4":
				wlen=4;
				hlen=4;
				wsize = Math.floor(wid/wlen);
				hsize = Math.floor(hei/hlen);
				break;
			case "div3-3":
				wlen=3;
				hlen=3;
				wsize = Math.floor(wid/wlen);
				hsize = Math.floor(hei/hlen);
				break;
			case "div2-2":
				wlen=2;
				hlen=2;
				wsize = Math.floor(wid/wlen);
				hsize = Math.floor(hei/hlen);
				break;
			case "dot":
		   		myimg.src = "../video/dat/dot.png";
		   		wlen = 20;
				wsize=wid/wlen;
				hlen=20;
				hsize=hei/hlen;
		   		break;
		   
		   	case "timestamp":
		   		ctx.fillStyle = 'white'; 
				fsize=Math.floor(wid/20);
				ctx.font = 'bold ' + fsize + 'px serif';
				ctx.textAlign = 'left'; 
				break;
			case "VHS":
				fsize=Math.floor(wid/14);
				ctx.font = 'bold ' + fsize + 'px serif';
				ctx.textAlign = 'left';		
				ctx.fillStyle = 'white';        
				break;
		   	}
		}
		
		
		function videoLoopEx() {
			switch(cmd){
			
			case "dot":
				ctx.drawImage(video, 0, 0, wid, hei);
				for(let i=0 ; i < wlen ; i++){
					for(let j=0 ; j < hlen ; j++){
						ctx.drawImage( myimg , i*wsize, j*hsize, wsize, hsize ) ;
					}
				}
				break;
					
			case "earthquake":
				var myw=wid/30;
				ctx.drawImage(video, myrnd(myw), myrnd(myw), wid, hei);
				break;
				
			case "div":
				ctx.drawImage(video, 0, 0,wid,hei);
				break;
				
			case "Mirror":
				ctx.drawImage(video, 0, 0, wid, hei);
				var imgd = ctx.getImageData(0, 0,wid, hei);
				var pix = imgd.data;
				wlen=wid/2;
				for(j=0;j<hei;j++){
					for(i=0;i<wlen;i++){
						pixnum = (i + j*wid)*4;
						pixnum2 = ((wid - i) + j*wid)*4;
						pix[pixnum]=pix[pixnum2];
						pix[pixnum+1]=pix[pixnum2+1];
						pix[pixnum+2]=pix[pixnum2+2];
					}
				}
				ctx.putImageData(imgd, 0, 0);
				break;
				
			case "Mosaic":
				ctx.drawImage(video, 0, 0, wid, hei);
				var imgd = ctx.getImageData(0, 0, wid, hei);
				var pix = imgd.data;
				var mysize=50;
				cellwid=Math.floor(wid/mysize);
				cellhei=Math.floor(hei/mysize);
				for(j=0;j<mysize;j++){
				for(i=0;i<=mysize;i++){
					pixX = i * cellwid;
					pixY =  j * cellhei;
					pixnum = (pixX + pixY*wid)*4;
					ctx.fillStyle = 'rgb(' + pix[pixnum] + ',' + pix[pixnum+1] + ',' + pix[pixnum+2] + ')';
					ctx.fillRect(pixX,pixY,cellwid,cellhei)
				}
				}
				break;
					
			case "timestamp":
				ctx.drawImage(video, 0, 0, wid, hei);
				DD = new Date();
				Hours = DD.getHours();
				Minutes = DD.getMinutes();
				Seconds =DD.getSeconds();
				var txt = Hours + ':' + Minutes + ':' + Seconds;
				ctx.fillText(txt, 10, 70+fsize);
				break;
				
			case "wrongprint":
				ctx.drawImage(video, 0, 0,wid,hei);
				var imgd = ctx.getImageData(0, 0, wid, hei);
				var pix = imgd.data;
				var ar=new Array(pix.length);
				for (var i = 0, n = pix.length; i < n; i ++) {
					ar[i] = pix[i];
				}
				
				var ct=0;
				var rnd=myrnd(10);
				for (var i = 0, n = pix.length; i < n; i += 4) {
					mynum=i+40;
					if(mynum> pix.length)break;
					
					pix[i] =ar[mynum]
					pix[i] = ar[mynum+1];
					pix[i] = ar[mynum+2];
				}
				ctx.putImageData(imgd, 0, 0);
				break;
				
			case "VHS":
				ctx.drawImage(video, 0, 0,wid,hei);
				ctx.fillText('PLAY', recposX,recposY);
				
				DD = new Date();
				Hours = DD.getHours();
				Minutes = DD.getMinutes();
				Seconds =DD.getSeconds();
				var txt = Hours + ':' + Minutes + ':' + Seconds;
				ctx.fillText(txt, timeposX, timeposY);
				
				var imgd = ctx.getImageData(0, 0, wid, hei);
				var pix = imgd.data;
				var ar=new Array(pix.length);
				//---copy array
				for (var i = 0, n = pix.length; i < n; i ++) {
					ar[i] = pix[i];
				}
				
				var ct=0;
				var rnd;
				for(j=0;j<hei*2;j++){
					if(j<hei/5){
						rnd=myrnd(8);
						}else if(j>hei*4/5){
						rnd=myrnd(8);
					}else{
						rnd=myrnd(5);
					}
					for(k=0;k<wid;k++){
						mynum = (k + j*wid)*4;
						newnum = mynum + rnd*4;
						if(newnum> pix.length)break;
						
						pix[mynum] =ar[newnum]
						pix[mynum+1] = ar[newnum+1];
						pix[mynum+2] = ar[newnum+2];
					}
				}
				ctx.putImageData(imgd, 0, 0);
				break;
				
			case "div5-1":
			case "div1-5":
			case "div4-4":
			case "div3-3":
			case "div2-2":
				for(let i=0;i<hlen;i++){
					for(let j=0;j<wlen;j++){
						ctx.drawImage(video, j*wsize, i*hsize, wsize, hsize);
					}
				}
				break;
			}
			ctx2.drawImage(cvs,0,0, cvs2.width,cvs2.height);
		}