//var flag = 0; // 1 PC & 0 User
var turn = 1;
var wait = 1;
var nim = 0;
var mode = 0;
var size = 0;
var game;
var rack;
var stack = 0;
var pieces = 0;
var user;
var pass;
var k = 0;
//var online = 0;  usar no leave

//--------------------------------------------------------
//						CHECK LOGIN						//
//--------------------------------------------------------
function checkLogin() {
	var nameRegex = /^[a-zA-Z0-9\_]+$/;
	var username_teste = document.getElementById('user').value;
	var password_teste = document.getElementById('pass').value;
	var match = document.getElementById('user').value.match(nameRegex);

	if (username_teste.length === 0) {
		alert("Your username is empty!");
		return false;
	}

	if (match === null) {
		alert("Your username is not valid. Only characters A-Z, a-z and '_' are  acceptable.");
		return false;
	}

	if (username_teste.length > 15) {
		alert("You have more than 15 characters on username!");
		return false;
	}

	if (password_teste.length === 0) {
		alert("Your password is empty!");
		return false;
	}

	if (password_teste.length < 4) {
		alert("Your password is too small!");
		return false;
	}

	document.getElementById('user').innerHTML = username_teste;
	return true;
}

//------------------------------------------------------------
//							REGISTER						//
//------------------------------------------------------------
function register() {
	var user = document.getElementById("user").value;
	var pass = document.getElementById("pass").value;

	if (checkLogin()) {

		var xhr = new XMLHttpRequest();
		xhr.open("POST", "http://twserver.alunos.dcc.fc.up.pt:8008/register",
				true);
		xhr.onreadystatechange = function() {

			if (xhr.readyState < 4)
				return;
			if (xhr.status == 200) { //faz login
				var resposta = JSON.parse(xhr.responseText);
				username = name;
				password = pass;
				document.getElementById('painel_login').style.display = 'none';
				document.getElementById('jogo_on').style.display = 'none';
				document.getElementById('login').style.display = 'none';
				document.getElementById('registo').style.display = 'none';

				document.getElementById('painel_jogo').style.display = 'block';
			} else {
				alert("Password errada!");
				document.getElementById("my_login").reset();
			}
		}
		xhr.send(JSON.stringify({
			"nick" : user,
			"pass" : pass
		}));
	} else {
		document.getElementById("my_login").reset();
	}
}
//------------------------------------------------------------
//							JOIN							//
//------------------------------------------------------------
function join() {

	var group = "19";
	user = document.getElementById("user").value;
	pass = document.getElementById("pass").value;
	size = document.getElementById("numb_on").value;



	console.log("Username: " + user + "| Password: " + pass);

	var xhr = new XMLHttpRequest();

	xhr.open("POST", "http://twserver.alunos.dcc.fc.up.pt:8008/join", true);
	xhr.onreadystatechange = function() {

		if (xhr.readyState < 4)
			return;
		if (xhr.status == 200) {
			var game_ash = JSON.parse(xhr.responseText);
			game = game_ash.game;
			update(user, game);
			wait = 1;
		}
	}
	xhr.send(JSON.stringify({
		"group" : group,
		"nick" : user,
		"pass" : pass,
		"size" : size
	}));
}
//------------------------------------------------------------
//							UPDATE							//
//------------------------------------------------------------
function update(user, game) {
	var xhr = new XMLHttpRequest();
	console.log("ON UPDATE");
	xhr.open("GET", 'http://twserver.alunos.dcc.fc.up.pt:8008/update?nick='
			+ user + '&game=' + game, true);
	var eventSource = new EventSource(
			'http://twserver.alunos.dcc.fc.up.pt:8008/update?' + 'nick=' + user
					+ '&game=' + game);
	var flag = 0;
	eventSource.onmessage = function(event) {
		var evdata = JSON.parse(event.data);
		console.log("WINNER: " + evdata.winner);
		rack = evdata.rack;
		if (rack != undefined)
			rack = rack.reverse();
		console.log(evdata);
		if (evdata.turn !== undefined) {
			if (evdata.turn === user) {
				turn = 1;
			} else
				turn = 0;

			if (wait == 1) {
				mode = 1;

				gerar_tab(evdata.rack);
				wait = 0;
			} else {
				update_tab(rack);

				console.log(evdata);

			}
		}

		if (evdata.winner != undefined) {
			winner(evdata.winner);
			//alert(evdata.winner + " venceu!");

		}

	}
}

//------------------------------------------------------------
//							NOTIFY							//
//------------------------------------------------------------
function notify(stack_2, pieces_2) {
	user = document.getElementById("user").value;
	pass = document.getElementById("pass").value;
	stack = stack_2;
	pieces = pieces_2;

	var xhr = new XMLHttpRequest();
	//var game_ash = JSON.parse(xhr.responseText);
	//var game=game_ash.game;
	xhr.open("POST", "http://twserver.alunos.dcc.fc.up.pt:8008/notify", true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState < 4)
			return;
		if (xhr.status == 200) {
			var notify = JSON.parse(xhr.responseText);
		}

	}
	xhr.send(JSON.stringify({
		"nick" : user,
		"pass" : pass,
		"game" : game,
		"stack" : stack,
		"pieces" : pieces
	}));
}

//------------------------------------------------------------
//							RANKING							//
//------------------------------------------------------------


//------------------------------------------------------------
//							LEAVE							//
//------------------------------------------------------------
function leave() {
	user = document.getElementById("user").value;
	console.log("TURN MO LEAVE" + turn);
	var xhr = new XMLHttpRequest();

	xhr.open("POST", "http://twserver.alunos.dcc.fc.up.pt:8008/leave", true);
	xhr.onreadystatechange = function() {

		if (xhr.readyState < 4)
			return;
		if (xhr.status == 200) {
			var leave = JSON.parse(xhr.responseText);
			console.log(leave);
		}
	}
	xhr.send(JSON.stringify({
		"game" : game,
		"pass" : pass,
		"nick" : user
	}));
}
//------------------------------------------------------------
//							GERA TAB						//
//------------------------------------------------------------
function gerar_tab(rack) {
	if (mode == 0) {
		document.getElementById('tabuleiro').style.display = 'block';
		document.getElementById('play').style.display = 'inline-block';
		document.getElementById('quit').style.display = 'inline-block';

		nim = tam * tam;
		var table = document.getElementById('tableclass');
		console.log("= " + tam);
		for (var i = 0; i < tam; i++) {
			var row = table.insertRow();
			row.classList.add('tr');

			for (var j = 0; j < tam; j++) {
				var td = row.insertCell();
				td.classList.add('td');
				cell_onclick(td, i, j);
			}
		}
		if (flag != 0)
			setTimeout(pc_play, 100);

	} else {
		rack.reverse(); //sai invertido 1,2,3...
		console.log("IN GERA TAB");
		document.getElementById('jogo_on').style.display = 'none';
		document.getElementById('gerar_tab').style.display = 'block';
		document.getElementById('tabuleiro').style.display = 'block';
		document.getElementById('quit').style.display = 'inline-block';
		console.log("length: " + rack);

		nim = rack.length * rack.length;
		var table = document.getElementById('tableclass');
		for (var i = 0; i < rack.length; i++) {
			var row = table.insertRow();
			row.classList.add('tr');
			console.log("row " + i + " ");
			for (var j = 0; j < rack[i]; j++) {
				var td = row.insertCell();
				td.classList.add('td');
				cell_onclick(td, i, j);
			}
		}
		console.log("NO FIM DO CELL" + rack);

		/*
		 for (var i = 0; i < rack.length; i++) {

		 console.log("row "  + i+" ");

		 for (var j =0; j <rack[i]; j++) {
		 cell_onclick(td, j, i);
		 }
		 }*/
		//update(user,game);
		//rack.reverse();
	}

}
function winner(winner) {
	document.getElementById('tabuleiro').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('modo_jogo').style.display = 'none';
	document.getElementById('play').style.display = 'none';
	document.getElementById('quit').style.display = 'none';
	alert(winner+" venceu o jogo!")
	document.getElementById('painel_init').style.display = 'block';

}

function gerar_tab2() {
	var table = document.getElementById('tabelaclassificacao');

	for (var i = 0; i < 11; i++) {
		var row = table.insertRow();
		row.classList.add('tr_1');

		for (var j = 0; j < 2; j++) {
			var td = row.insertCell();
			td.classList.add('td_1');

		}
	}
	var n = "Nome";
	var t = "Tempo";
	document.getElementById("tabelaclassificacao").rows[0].cells[0].innerHTML = n;
	document.getElementById("tabelaclassificacao").rows[0].cells[1].innerHTML = t;

	for (i = 1; i <= 10; i++) {
		var player_class = i + 'º		--------------		';
		var player_time = "-- / -- / --";
		console.log(player_class);
		document.getElementById("tabelaclassificacao").rows[i].cells[0].innerHTML = player_class;
		document.getElementById("tabelaclassificacao").rows[i].cells[1].innerHTML = player_time;

	}

}

function getCell(l, c) {
	var boardElement = document.getElementById("tableclass");
	return boardElement.rows[l].cells[c];
}

function pc_play() {
	document.getElementById('demo_3').style.display = 'none';

	var x, y;
	var cell;
	// alert(nim);

	if (nim <= 0)
		return;

	do {
		x = Math.floor((Math.random() * tam));
		y = Math.floor((Math.random() * tam));
		// console.log(x + " " + y + " " + tam);
	} while (getCell(x, y).className != "td");

	for (var i = x; i >= 0; i--) {
		var cell_vizinha = getCell(i, y);
		if (cell_vizinha.className == "inactive")
			break;
		cell_vizinha.className = "temporario";

	}

	setTimeout(function() {
		for (var i = x; i >= 0; i--) {
			var cell_vizinha = getCell(i, y);
			if (cell_vizinha.className == "inactive")
				break;
			cell_vizinha.className = "inactive";
			nim--;

		}
		winner();

		flag = 0;
	}, 1000);
}

function winner_off() {
	if (nim <= 0) {
		if (flag == 0) {
			alert("Parabéns, ganhaste!");

		} else {
			alert("Perdeste, tente de novo!");

		}

		document.getElementById('tabuleiro').style.display = 'none';
		document.getElementById('gerar_tab').style.display = 'none';
		// document.getElementById('myFunction').style.display = 'none';
		document.getElementById('quit').style.display = 'none';
		document.getElementById('play').style.display = 'none';
		document.getElementById('try_again').style.display = 'block';

		return;
	}
}
function update_tab(rack) {
	var tab = document.getElementById('tableclass');
	var count = 0;
	for (var i = 0; i < rack.length - 1; i++) {
		count = 1;
		for (var j = size - 1; j >= 0; j--) {
			console.log("i " + i + "j " + j);
			if (count > rack[i]) {
				//adioncar classe inativo
				if (getCell(j, i) !== undefined) {
					getCell(j, i).className = "inactive";
					getCell(j, i).onmouseover = undefined;
					getCell(j, i).onmouseout = undefined;
				}
			} else {
				count++;
			}
		}
	}

}

function cell_onclick(cell, l, c) {

	// rack.reverse();
	console.log("RACK NO CELL " + rack);
	var data = [];
	var length = size; // user defined length

	for (var i = 0; i < length; i++) {
		data.push(i);
	}

	cell.onclick = function() {
		if (turn === 1) {
			if (cell.className == "td") {
				k = data[c];
				for (var i = l; i >= k; i--) {

					var cell_vizinha = getCell(i, c);
					console.log("CELL ON L E c" + l + " " + i + " ");

					if (cell_vizinha.className == "inactive")
						break;

					cell_vizinha.className = "inactive";
					nim--;
					//console.log("RACK NO CELL no fim " + rack);

				}
				// nim = nim - (l + 1);

				//winner();

				//flag = 1;
				//if(mod==0)
				//setTimeout(pc_play, 3);
			}

			stack = size - c - 1;
			pieces = size - l - 1;
			notify(stack, pieces);
		} else
			alert("Não é a tua vez!");
	}

	cell.onmouseover = function() {
		if (cell.className !== "inactive" && cell.className !== "temporario")
			for (var i = l; i >= 0; i--) {
				var cell_vizinha = getCell(i, c);
				if (cell_vizinha !== undefined) {
					if (cell_vizinha.className == "inactive"
							|| cell_vizinha.className == "temporario")
						break;
					cell_vizinha.className = "active";
				}
			}
	}

	cell.onmouseout = function() {
		if (cell.className !== "inactive" && cell.className !== "temporario")

			for (var i = size - 1; i >= 0; i--) {
				var cell_vizinha = getCell(i, c);
				if (cell_vizinha !== undefined) {

					if (cell_vizinha.className == "inactive"
							|| cell_vizinha.className == "temporario")
						break;
					cell_vizinha.className = "td";
				}
			}
	}

}

function clearBoard() {

	var i;
	for (i = 0; i < size; i++) {
		if (document.getElementById("tableclass").rows.length != 0)
			document.getElementById("tableclass").deleteRow(0);
	}
}
function clearBoard_rank() {

	var i;
	for (i = 0; i < 10; i++) {
		if (document.getElementById("tabelaclassificacao").rows.length != 0)
			document.getElementById("tabelaclassificacao").deleteRow(0);

	}
}

function modo_online_jogo() {
	document.getElementById('modo_jogo').style.display = 'none';

	document.getElementById('jogo_on').style.display = 'block';
}

function myFunction() {
	var x, text;

	x = document.getElementById("numb").value;
	document.getElementById('demo_3').style.display = 'none';

	document.getElementById('gerar_tab').style.display = 'block';
	tam = x;
	//clearBoard();
	gerar_tab();
}

function first_play() {
	document.getElementById('demo').style.display = 'none';
	document.getElementById('demo_2').style.display = 'block';

	flag = 0// user

}
function first_play_pc() {
	document.getElementById('demo').style.display = 'none';
	document.getElementById('demo_2').style.display = 'block';

	flag = 1; // pc

}

function dif_play() {
	document.getElementById('demo_2').style.display = 'none';
	document.getElementById('demo_3').style.display = 'block';

}
function registar() {
	document.getElementById('header_painel2').style.display = 'none';
	document.getElementById('painel_login').style.display = 'block';
}

function login() {
	document.getElementById('painel_rank').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('tabuleiro').style.display = 'none';
	document.getElementById('painel_init').style.display = 'none';
	document.getElementById('painel_login').style.display = 'block';
}
function login_wData() {
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_init').style.display = 'block';
}
function config() {
	clearBoard();
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_rank').style.display = 'none';
	document.getElementById('painel_init').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'block';
	document.getElementById('tabuleiro').style.display = 'none';

}
function modo_jogo() {
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('modo_jogo').style.display = 'none';
	document.getElementById('demo').style.display = 'block';
}
function instrucoes() {
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_init').style.display = 'none';
	document.getElementById('painel_rank').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'block';

}
function rank() {
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_init').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	clearBoard_rank();
	document.getElementById('painel_rank').style.display = 'block';
	gerar_tab2();
	document.getElementById('tabelaclassificacao').style.display = 'block';

}

function home() {
	clearBoard();
	document.getElementById('tabuleiro').style.display = 'none';
	document.getElementById('quitgame').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'none';
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_rank').style.display = 'none';
	document.getElementById('painel_init').style.display = 'block';
	//document.getElementById('demo').style.display = 'block';

}
function table_click() {
	var boardElement = document.getElementById("tabuleiro");
	alert(boardElement.rows[l].cells[c]);
}

function try_again() {
	clearBoard();
	document.getElementById('try_again').style.display = 'none';
	document.getElementById('demo').style.display = 'block';
}
function playbutton() {
	document.getElementById('painel_login').style.display = 'none';
	document.getElementById('painel_rank').style.display = 'none';
	document.getElementById('painel_init').style.display = 'none';
	document.getElementById('painel_instrucoes').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'block';
	document.getElementById('painel_jogo').style.display = 'block';
	document.getElementById('tabuleiro').style.display = 'block';
}
function quitbutton() {
	document.getElementById('play').style.display = 'none';
	document.getElementById('quit').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('gerar_tab').style.display = 'none';
	document.getElementById('tabuleiro').style.display = 'none';
	document.getElementById('quitgame').style.display = 'block';
	//leave();
}
function yes() {
	clearBoard();
	document.getElementById('tabuleiro').style.display = 'none';
	document.getElementById('quitgame').style.display = 'none';
	document.getElementById('painel_jogo').style.display = 'none';
	document.getElementById('painel_init').style.display = 'block';
	document.getElementById('demo').style.display = 'block';
	leave();

}
function quitfunction() {
	document.getElementById('play').style.display = 'inline-block';
	document.getElementById('quitgame').style.display = 'none';
	document.getElementById('quit').style.display = 'inline-block';
	document.getElementById('painel_jogo').style.display = 'block';
	document.getElementById('tabuleiro').style.display = 'block';
	document.getElementById('gerar_tab').style.display = 'block';

}