var canvas, context, list, tileWidth, tileHeight, turn, interval, colors, lines;

window.addEventListener("load", loaded, false);

function loaded(){
	canvas = document.getElementById("myCanvas");
	canvas.addEventListener("click", onClick, false);
	context = canvas.getContext("2d");

	context.fillStyle = "grey";
	context.strokeStyle ="black";
	context.lineWidth = 10;

		turn = 1;
		interval = null;
		colors = getRandomColors(64);

		console.log(colors);


		list = [[0,0,0],
						[0,0,0],
						[0,0,0]];

	var hallo = true;
	if(hallo) {

			}

	tilesInWidth = list[0].length;
	tilesInHeight = list.length;
	tileWidth = canvas.width / tilesInWidth;
	tileHeight = canvas.height / tilesInHeight;

	draw();
}



function onClick(event){
	var ox = event.offsetX;
	var oy = event.offsetY;
	var tx = Math.floor(ox / tileWidth);
	var ty = Math.floor(oy / tileHeight);

	console.log( list[ty][tx] );

	if(list[ty][tx] === 0) {
		list[ty][tx] = turn;


		if(checkWinner() ) {
			alert('we hebben een winnaar!');
			}else{
		changeTurn();
	}
}

	draw();
}

function checkWinner() {
	//horizon
		if( list[0][0]===turn  && list[0][1]===turn && list[0][2]===turn) {
			return true;
		}
		if( list[1][0]===turn  && list[1][1]===turn && list[1][2]===turn) {
			return true;
		}
		if( list[2][0]===turn  && list[2][1]===turn && list[2][2]===turn) {
			return true;
		}
//vertikaal
		if( list[0][0]===turn  && list[1][0]===turn && list[2][0]===turn) {
			return true;
		}
		if( list[0][1]===turn  && list[1][1]===turn && list[2][1]===turn) {
			return true;
		}
		if( list[0][2]===turn  && list[1][2]===turn && list[2][2]===turn) {
			return true;
		}
		//diagonaal
		if( list[0][0]===turn  && list[1][1]===turn && list[2][2]===turn) {
			rainbow( [[0,0], [1,1], [2,2]] );
			return true;
		}
			if( list[0][2]===turn  && list[1][1]===turn && list[2][0]===turn) {
				return true;
		}

	return false;
}
function rainbow(tiles) {
	interval = setInterval(function() {



		console.log('tick!');
	},100);
}



function changeTurn() {
	if(turn === 1) {
		turn = 2;
	}else {
		turn = 1;
	}
}

function draw(){
	context.clearRect(0,0, canvas.width, canvas.height);
	for(var y=0; y<list.length; y++){
		for(var x=0; x<list[y].length; x++){

			switch( list[y][x] ) {
				case 0: 	// lege tegel

				break;
				case 1: 	// kruisje
							cross(x,y);
				break;
				case 2: 	// cirkel
							circle(x,y);
				break;
			}
		}
	}
}

function circle(x,y){
	var posX= x * tileWidth + (tileWidth/2);
	var posY= y * tileHeight + (tileHeight/2);
	context.strokeStyle = "#FF0000";
	context.lineWidth = 8;
	context.beginPath();
	context.arc( posX,posY,40,0,2*Math.PI);
	context.stroke();
}

function cross(x,y){
	var posX= x * tileWidth + (tileWidth/2);
	var posY = y * tileHeight + (tileHeight/2);
	var size = 40;
	context.strokeStyle = "#00FF00";
	context.lineWidth = 8;
	context.beginPath();
    context.moveTo(posX -size, posY + size);
    context.lineTo(posX + size, posY - size);
    context.moveTo(posX - size , posY -size );
    context.lineTo(posX + size, posY + size);
    context.stroke();
}

function getRandomColors(amount) {
	var list = [];
	for (var i=0; i<amount; i++) {
		list.push(getRandomColor() );
	}
	return list;
}

function getRandomColor() {
  var chars = '';
  for (var i = 0; i < 6; i++) {
    chars += getRandomChar();
  }
  return '#'+chars;
}

function getRandomChar() {
  var chars = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
  var char = chars[ getRandomInt(0,15) ];
  return char.toString();

}

function getRandomInt(min,max) {
  return Math.floor(Math.random()*(max-min+1)+min);
}