var cellWidth = 50;
var frontier = [];
var explored = [];
var currentNode = {};
var maze = {};
var algo = {};

function setup() {
  var canvas = createCanvas(500, 500);
  canvas.parent('sketch-holder');
  maze = new Maze(width, height, cellWidth, "Depth");
  frameRate(30);
}

function draw() {
  background(220);

  maze.updateMazeDisplay();
  
  if(!maze.mazeGenDone){
  	maze.buildNextCell();
  }
  else if (maze.mazeGenDone && algo.frontier == undefined){
	maze.resetMazeState();
	//maze.updateMazeDisplay();
	let selectedAlgo = document.getElementById("searchAlgo").value;
	if(selectedAlgo == "depthFirst") 
		algo = new DepthFirstSolver(maze.grid[0], maze.grid[maze.index(7, 7)]);
	else if(selectedAlgo == "breadthFirst")
		algo = new BreadthFirstSolver(maze.grid[0], maze.grid[maze.index(7,7)]);
	//else if(selectedAlgo == "a*")

	print("Maze generation done");
	frameRate(10);
  }
  else if (maze.mazeGenDone && algo.frontier.length > 0){
    //algo.breadthFirstNextCell(maze);
    algo.solve(maze);
  }
  else{
  	algo.highlightFinalPath(maze);
  	
  	let label = document.getElementById('information').innerHTML = `Maze Finished. Explored ${algo.statesExplored} states to find the answer.`;
  	print("Maze search done");
  	noLoop();
  	toggleForm(true);
  }
}