var canvas = document.getElementById('planoDeFundo');
var context = canvas.getContext('2d');
var towerA = [], towerB = [], towerC = [];
var toMove = null;
var idF=" ", idT= " ";
var nMovements = 0, nWrongMoves=0, nDisks;
var moves=""; //string to save movements
var acertou=0;
var optimalSolution;
		 	//NavyBlue  Lime     Fuchsia   yellow   Orange   LightSteelBlue  red
var colors = ["#000080","#00FF00", "#FF00FF", "yellow", "#FFA500", "#B0C4DE","red"];
var start = Date.now(), startOfMove, totalTime, moveTime; //timing vars

function inicio (QntityDisks){
	nDisks = QntityDisks;
	optimalSolution= Math.pow(2,nDisks)-1;
	var x = 0;
	var y = 558;
	var w = 330;
	moves="";
	startOfMove=Date.now();
	for (var i = 0; i < nDisks; i++) {
		var disk = new Disk(x,y,w,40,colors[i]);
		towerA.push(disk);
		x+=20;  //moves to the right
		y-=42; //moves up, +1 to separate disks
		w-=40; //reduces disk width
	}
	drawScene();

}

class Disk{
	constructor(x,y,w,h,fill){
		this.x=x;
		this.y=y;
		this.w=w;
		this.h=h;
		this.fill=fill;
	}
	draw(){//(ctx, x, y, width, height, radius, fill, stroke)
		context.fillStyle = this.fill;
		context.strokeStyle = "black";
		roundRect(context, this.x, this.y, this.w, this.h, 20, 20, true);
	}
	clear(){
		context.clearRect(this.x, this.y, this.w, this.h);
	}
}
function reinicio (){
	while(towerA.length>0){
		towerA.pop();
	}
	while(towerB.length>0){
		towerB.pop();
	}
	while(towerC.length>0){
		towerC.pop();
	}
	nMovements=0;
	idF = " ";
	idT=" ";
	toMove=null;
	inicio();
}
function drawTowers (){
	context.beginPath();
	<!-- torre 1 -->
	context.fillStyle = 'black';
	context.fillRect(160, 260, 10, 340);//x, y, largura, altura
    
    <!--Base t1-->
	context.fillRect(0, 600, 330, 15);

	<!-- torre 2 -->
	context.fillRect(505, 260 ,10, 340);

    <!--Base t2-->
	context.fillRect(345, 600, 330, 15);

	<!-- torre 3 -->
	context.fillRect(850, 260, 10, 340);

    <!--Base t3-->
	context.fillRect(690, 600, 330, 15);
}

function drawDisks (){
	for(i=0; i<towerA.length; i++){
		towerA[i].draw();
	}
	for(i=0; i<towerB.length; i++){
		towerB[i].draw();
	}
	for(i=0; i<towerC.length; i++){
		towerC[i].draw();
	}
}

function drawScene (){
	context.clearRect(0, 0, canvas.width, canvas.height);
	drawTowers();
	drawDisks();
	drawFromTo();
}

function buttonClick (id){
	if(toMove == null && getTower(id).length>0){
		toMove = id;
		idF= String.fromCharCode(65+id);
		idT= " ";
		drawScene();

	} else if(toMove != null && toMove != id){
		idT = String.fromCharCode(65+id);
		moveDisk(toMove, id);
		toMove=null;
	}
}

function getTower (id){
	switch(id){
		case 0:
			return towerA;
		case 1:
			return towerB;
		case 2:
			return towerC;
	}
}

function drawFromTo (){
	context.font = "50px Arial";
	context.fillStyle = "black";
	context.fillText("Move from "+idF+" to "+idT, 50, 50);
	context.fillText("Movements: "+nMovements, 50, 100);
}


function moveDisk (origin, destiny){
	var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
	moveTime = Math.floor( (Date.now()- startOfMove) /1000);
	moves+="\n"+origin+" "+destiny+"  "+moveTime;
	startOfMove = Date.now();//update start of movement
	console.clear();
	console.log(moves);
	nMovements++;
	
	topDiskOrigin = originTower[originTower.length-1];
	if(destinyTower.length>0){
		topDiskDestiny = destinyTower[destinyTower.length-1];
		if(topDiskOrigin.w<topDiskDestiny.w){
			topDiskOrigin.x += 345*(destiny-origin);
			topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
			originTower.pop();
			destinyTower.push(topDiskOrigin);
			drawScene();
		} else{
			nWrongMoves++;
			alert("Movimento Inválido");
			idF =" ";
			idT =" ";
			drawScene();						
		}
	}else{	
		topDiskOrigin.x += 345*(destiny-origin);
		topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
		originTower.pop();
		destinyTower.push(topDiskOrigin);
		nMovements++;
		drawScene();
	}
	if(towerC.length == nDisks && nDisks!=0){
		acertou=1;
		totalTime= Date.now() - start;
		if(nMovements==optimalSolution){
			alert("You Won in the least amount of movements!!!\nCongratulations!!!");
		}else{
			alert("You Won!!!\nCongratulations!!");
		}
	}
}

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == "undefined" ) {
    stroke = true;
  }
  if (typeof radius === "undefined") {
    radius = 5;
  }
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  if (stroke) {
    ctx.stroke();
  }
  if (fill) {
    ctx.fill();
  }        
}
inicio(4);