var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d');
var board = [];
var blocksize = 20;
var size = canvas.width / blocksize;
var score = 0;

canvas.onclick = handleClick;
newGame();

function setUpGame() {
	board = [];
	colors = ['red', 'green', 'blue', 'purple', 'orange'];
	for (var i = 0; i < size; i++) {
		board.push(new Array(size));
	}
	
	for (var row = 0; row < size; row++) {
		for (var col = 0; col < size; col++) {
			var color = colors[Math.floor(Math.random() * colors.length)];
			board[row][col] = {color: color, marked: false};
		}
	}
}

function drawBoard() {
	for (var row = 0; row < size; row++) {
		for (var col = 0; col < size; col++) {
			context.fillStyle = board[row][col].color;
			context.fillRect(col * blocksize, row * blocksize, blocksize, blocksize);		
		}
	}
}

function checkGameOver() {
	for (var row = 0; row < size; row++) {
		for (var col = 0; col < size; col++) {
			var color = board[row][col].color;
			if (color !== 'black' 
			&& ((row > 0 && board[row - 1][col].color === color)
			|| (row < size - 1 && board[row + 1][col].color === color)
			|| (col > 0 && board[row][col - 1].color === color)
			|| (col < size - 1 && board[row][col + 1].color === color))) {
				return false;
			}
		}
	}
	
	if (board[size - 1][0].color === 'black') {
		alert('You win! Final score: ' + score);
	} else {
		alert('Game Over. Final Score: ' + score);
	}
}

function findMatchingBlocks(row, col, color) {
	if (board[row][col].color === 'black' 
		|| board[row][col].marked
		|| board[row][col].color !== color) {
		return 0;
	}
	
	board[row][col].marked = true;
	
	var sum = 1;
	if (row > 0) {
		sum += findMatchingBlocks(row - 1, col, color);
	}
	if (row < size - 1) {
		sum += findMatchingBlocks(row + 1, col, color);
	}
	if (col > 0) {
		sum += findMatchingBlocks(row, col - 1, color);
	}
	if (col < size - 1) {
		sum += findMatchingBlocks(row, col + 1, color);
	}
	
	return sum;
}

function dropMarkedBlocks() {
	for (var col = 0; col < size; col++) {
		for (var row = size - 1; row >= 0; row--) {
			if (board[row][col].marked) {
				for (var colrow = row; colrow >= 0; colrow--) {
					if (colrow > 0) {
						board[colrow][col].color = board[colrow - 1][col].color;
						board[colrow][col].marked = board[colrow - 1][col].marked;
					} else {
						board[colrow][col].color = 'black';
						board[colrow][col].marked = false;
					}
				}
				row++;
			}
		}
	}
}

function shiftClearedRows() {
	for (var col = 0; col < size; col++) {
		while (board[size - 1][col].color === 'black') {
			for (var shiftcol = col; shiftcol < size - 1; shiftcol++) {
				for (var row = 0; row < size; row++) {
					board[row][shiftcol].color = board[row][shiftcol + 1].color;
					board[row][shiftcol].marked = board[row][shiftcol + 1].marked;
				}
			}
			
			for (var row = 0; row < size; row++) {
				board[row][size - 1].color = 'black';
				board[row][size - 1].marked = false;
			}
			
			var allblack = true;
			for (var examcol = size - 1; examcol > col; examcol--) {
				if (board[size - 1][examcol].color !== 'black') {
					allblack = false;
				}
			}
			
			if (allblack) {
				break;
			}
		}
	}
}

function updateScore() {
	document.getElementById('score').innerHTML = 'Score: ' + score;
}

function handleClick(event) {
	var row = Math.floor(event.y / blocksize);
	var col = Math.floor(event.x / blocksize);
	var blocks = findMatchingBlocks(row, col, board[row][col].color);
	if (blocks < 2) {
		board[row][col].marked = false;
		return;
	}
	score += Math.pow(blocks - 1, 2);
	dropMarkedBlocks();
	shiftClearedRows();
	drawBoard();
	updateScore();
	
	checkGameOver();
}

function newGame() {
	score = 0;
	setUpGame();
	drawBoard();
	updateScore();
}