class cPatricleBase{
	constructor(isStart, len,src) {
		this.isStart = isStart;
		this.len = len;
		this.img = new Image;
		this.src=src;
		this.ar = new Array();
	}
	
	doLoad(){
		this.img.src = this.src;
	}
	doStart(){
		for(let i=0;i<this.len;i++){
			var p = new cConfetti(wid,hei);
			p.ptclInit();
			this.ar.push(p);
		}
		this.isStart = true;
	}
	doLoop(){
		if(!this.isStart)return;
		for(let i=0;i<this.len;i++){
			this.ar[i].ptclLoop();
			context2.drawImage(this.img, this.ar[i].x, this.ar[i].y, this.ar[i].w, this.ar[i].h);
		}
	}
}

class cConfetti {
	constructor(w, h) {
		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;
		}
	 }
}class cPzl {
			//---コンストラクタ
			constructor(w,h,c) {
				this.wlen = w;
				this.hlen = h;
				this.pzlLen = c;
				this.pzlX=0;
				this.pzlY=0;
				this.pzlDone=false;
				this.arDat = new Array();
				
				this.auto=false;
				this.autoCt=0;
				this.autoMax=1;
				this.arHisCt=-1;
				this.arHistory = new Array();
		    }
		     
		    //---初期化
		    pzlInit(){
		    	//---init array
		    	for(let i=0;i<this.hlen;i++){
					var arTemp=new Array;
					for(let j=0;j<this.wlen;j++){
						arTemp.push({'x':j, 'y':i});
					}
					this.arDat.push(arTemp);

				}
				
				//---reset array
				for(let i=0;i<this.pzlLen;i++){
					
					let rnd=0;
					let aTemp=new Array();
					let mynum = this.pzlX-1;
					if(mynum > -1){
						aTemp.push({'x':mynum, 'y':this.pzlY});
					}
					mynum = this.pzlX+1;
					if(mynum < this.wlen){
						aTemp.push({'x':mynum, 'y':this.pzlY});
					}
					mynum = this.pzlY-1;
					if(mynum > -1){
						aTemp.push({'x':this.pzlX, 'y':mynum});
					}
					mynum = this.pzlY+1;
					if(mynum <this. hlen){
						aTemp.push({'x':this.pzlX, 'y':mynum});
					}
					rnd = Math.floor(Math.random()*aTemp.length);
					this.pzlSwap(this.pzlX, this.pzlY, aTemp[rnd]['x'], aTemp[rnd]['y']);
					
					this.arHistory.unshift([this.pzlX, this.pzlY, aTemp[rnd]['x'], aTemp[rnd]['y']]);
				}
		    }
		    
		    //---スワップ
		    pzlSwap(x1,y1,x2,y2){
		    	var tempx=this.arDat[y2][x2]['x'];
				var tempy=this.arDat[y2][x2]['y'];
				
				this.arDat[y2][x2]['x']=this.arDat[y1][x1]['x'];
				this.arDat[y2][x2]['y']=this.arDat[y1][x1]['y'];
				this.arDat[y1][x1]['x']=tempx;
				this.arDat[y1][x1]['y']=tempy;
				this.pzlX = x2;
				this.pzlY = y2;
				
		    }
		    
		    //---ステータス
		    pzlInfo(){
			    let s = this.pzlX + ',' + this.pzlY + '<br>';
				for(let i=0;i<this.hlen;i++){
					for(let j=0;j<this.wlen;j++){
						s = s + '[' + j + ',' + i + ']' + this.arDat[j][i]['x'] + ',' + this.arDat[j][i]['y'] + '|';
					}
					s = s + '<br>';
				}
				s = s + 'pzldone:' + this.pzlDone + '<br>';
				return s;
			}
			
			//---イベント
			pzlEvent(x,y){
				if(this.pzlDone)return;
				if(Math.abs(this.pzlX - x)==1){
					if(this.pzlY==y){
						this.pzlSwap(this.pzlX, this.pzlY,x,y);
						if(this.pzlCheck()){
							this.pzlDone=true;
						}
					}
				}
				if(Math.abs(this.pzlY - y)==1){
					if(this.pzlX==x){
						this.pzlSwap(this.pzlX, this.pzlY, x, y);
						if(this.pzlCheck()){
							this.pzlDone=true;
						}
					}
				}
				
			}
			//---終了判定
			pzlCheck(){
				for(let i=0;i<this.hlen;i++){
					for(let j=0;j<this.wlen;j++){
						if((this.arDat[i][j]['x'] != j) || (this.arDat[i][j]['y'] != i)){
							return false;
						}
					}
				}
				sWin.play();
				return true;
			}
			
			pzlAutoLoop(){
				if(this.pzlDone)return;
				if(!this.auto)return;
				
				this.autoCt++;
				if(this.autoCt>this.autoMax){
					this.autoCt=0;
					this.arHisCt = this.arHisCt + 1;
					if(this.arHisCt > this.arHistory.length){
						$this.auto=false;
						return;
					}
					videoStatus(this.arHisCt + '/' + this.arHistory.length);
					this.pzlEvent(this.arHistory[this.arHisCt][2],this.arHistory[this.arHisCt][3]);
					if(this.pzlCheck()){
						this.pzlDone=true;
					}
				}
				
			}
		}		//---VARS
		var wlen=10;
		var hlen=10;
		var pzlLen=300;





		//---puzzle
		var p = new cPzl(wlen,hlen,pzlLen);

		//---confetti
		var pParticle = new cPatricleBase(false,30, '../video/dat/kami.png');
		pParticle.doLoad();
		
		//---SE
		var sClick = new Audio();
		sClick.src = "../video/snd/click.mp3";
		var sWin = new Audio();
		sWin.src="../video/snd/win.mp3";

			
		//---GIRDS
		var wsize=Math.floor(wid/wlen);
		var hsize=Math.floor(hei/hlen);
		var arDat=new Array();
		var pzlX=0;
		var pzlY=0;
		var pzlDone=false;
		
		//---SUBCANVAS
		var subcanvas = document.createElement("canvas");
      	subcanvas.width = wid;
      	subcanvas.height = hei;
     	var subcontext = subcanvas.getContext('2d',  {willReadFrequently: true });
		mycanvas.addEventListener("click", e => {
			if(p.pzlDone)return;
			sClick.play();
			const rect = canvas.getBoundingClientRect();
		  	var myx= e.clientX - rect.left;
		  	var myy= e.clientY - rect.top;
			myx = Math.floor(myx/wsize);
			myy = Math.floor(myy/hsize);
			pzlEvent(myx,myy);
			
		});

		//---PZL
		function pzlStats(){
			videoStatus(p.pzlInfo());
		}
		
		function pzlEvent(x,y){
			p.pzlEvent(x,y);
			if(p.pzlDone){
				pParticle.doStart();
			}
		}
		


		//---VIDEO
		function videoSetupEx(){
			p.pzlInit();
			context2.fillStyle = 'rgb(255, 0, 0)';

		}
		function videoLoopEx() {
			subcontext.drawImage(myvideo, 0, 0, wid, hei);
			
			p.pzlAutoLoop();
			
			//--COPOYRECT
			var srcimg = subcontext.getImageData(0,0,wid,hei);
			var srcpix = srcimg.data;
			var destimg = context2.getImageData(0,0,wid,hei);
			var destpix = destimg.data;

			for(let i=0; i<hlen; i++){
				for(let j=0;j<wlen;j++){
					if(!p.pzlDone && (p.arDat[i][j]['x'] == 0) && (p.arDat[i][j]['y'] == 0)){
						context2.fillRect( j*wsize, i*hsize, wsize, hsize);
					}else{
						var tempimg = subcontext.getImageData(p.arDat[i][j]['x']*wsize, p.arDat[i][j]['y']*hsize, wsize, hsize);
						context2.putImageData(tempimg, j*wsize, i*hsize);
	    			}
				}
			}
			
					
			//---GRID
			if(!p.pzlDone){
				
				context2.beginPath () ;
				for(let j=1;j<wlen;j++){
					context2.moveTo(j*wsize,  0);
					context2.lineTo(j*wsize,  hei);
	           		context2.stroke();
	          	}
	          	for(let i=1;i<hlen;i++){
	          		context2.moveTo(0,  i*hsize);
					context2.lineTo(wid,  i*hsize);
	           		context2.stroke();
	          	}
	          	
          	}else{
          		pParticle.doLoop();
          	}
          	
          	//pzlStats();
			mycontext.drawImage(canvas2,0,0,srcwid,srchei);
		}