<!-- variáveis diversas -->
// variável para impedir mais que uma sincronização por vez (desbloqueado por padrão)
var block = false;
// cores a serem alteradas online
var corMudancas = new Array();
// cores a sendo enviadas ao servidor atualmente
var corMudancasTemp = new Array();
// cor selecionada atualmente (branco)
var cor = "ffffff";
// controla a tabela das últimas cores selecionadas (índice da fila circular)
var tcsIndice = 0;
// controla as chamadas de requisições (requisição em intervalos)
var httpReqInterval = null;

// função para sincronização
function sincronizarTela(){
	// ativa o block, para impedir que outro ajax seja disparado enquanto o ajax aqui disparado não terminar
	block = true;
	// pega valores que vão ser atualizados e isola eles...
	// vão ser usados nesta requisição
	corMudancasTemp = corMudancas;
	// reseta vetor de cores a serem atualizadas
	corMudancas = new Array();
	// está página atualiza tela online e local, e altera o valor da variável tempo para a data da última atualização
	link = 'alteraColunaLinha.php';
	// só pega coisas posteriores às antes pegadas..
	parametros = 'tempo='+tempo;
	//alert(corMudancasTemp.length);
	// se tivér mudanças
	if(corMudancasTemp.length > 0){
		// gera parâmetros de atualização da tela online
		for(i in corMudancasTemp){
			//alert(corMudancasTemp[i][1]);
			parametros += '&coluna_linha[]='+corMudancasTemp[i][0]+'&cor[]='+corMudancasTemp[i][1];
		}
	}else{
		// se não tiver atividade do usuário
		// só vai ser retornado atividades de outros usuários.. sem necessidade de enviar parâmetros de atividade local
	}
	//alert(parametros);
	try{
		// Mozilla/Safari
		http = new XMLHttpRequest();
	}catch(ee){
		try{
			// IE( coisa nova)
			http = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				// IE (coisa antiga)
				http = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(E){
				http = false;
			}
		}
	}
	// se não conseguiu iniciar o objeto de requisição, para...
	if(!http){
		alert('Operação cancelada, seu navegador não tem suporte a AJAX\n\nTente usar:\\nChrome, Firefox ou Opera.');
		return false;
	}
	http.open("POST",link,true);
	http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	http.setRequestHeader("Content-length", parametros.length);
	http.setRequestHeader('Content-Type', "application/x-www-form-urlencoded; charset=iso-8859-1");
	http.setRequestHeader("Connection", "close");
	http.onreadystatechange=function(){
		if (http.readyState==4){
			// caso a conexão deu OK
			if (http.status == 200){
				if(http.responseText != ''){
					resposta = http.responseText;
					//alert(resposta);
					eval(resposta);
				}
				// libera o uso do ajax, pois este ajax terminou
				block = false;
			}else{
				// caso a conexão não tenha acontecido
				// repõe os dados, para serem retransmitidos na próxima requisição
				if(corMudancasTemp.length > 0){
					for(i in corMudancasTemp){
						corMudancas[corMudancas.length] = new Array(corMudancasTemp[i][0], corMudancasTemp[i][1]);
					}
				}
				// libera o uso do ajax, pois este ajax faio
				block = false;
			}
			//alert(':'+httpR.responseText);
		}
		//alert('a'+http.readyState+'b'+http.status);
	}
	http.send(parametros);
}

// função que chama a função de sincronização a cada tanto tempo
function coresAtualizar(){
	if(block){
		// se estiver bloqueado tem outro ajax rolando
		// chama essa função novamente só daqui 5 segundos
		setTimeout(coresAtualizar, 5000);
		return false;
	}
	// chama função de sincronização da tela
	sincronizarTela();
	// programa para chamar esta função novamente daqui a x milissegundos
	setTimeout(coresAtualizar, 3500);
}

function initCon(){
	// chama função que atualiza tela local e online
	httpReqInterval = setInterval(coresAtualizar, 5000);
}

function mudaCorSelecionada(corNova, verificaRepeticao){
	cor = corNova.toUpperCase();
	//alert('cor: '+cor);
	// salva a cor na tabela de últimas cores usadas
	// somente se a cor já não está salva em alguma célula
	corCelula = '#FFFFFF';
	if(verificaRepeticao==null){
		for(n=1;n<=16;n++){
			// pega a cor da célula atual conforme o navegador sendo usado
			if(navigator.appName == 'Microsoft Internet Explorer'){
				corCelula = document.getElementById('ultimasCoresSelecionadasColuna'+n).style.backgroundColor;
			}else{
				// se não for navegador IE tem que converter RGB para HEX
				corCelula = rgbConvert(document.getElementById('ultimasCoresSelecionadasColuna'+n).style.backgroundColor);
			}
			// se a cor já existe, não salvar ela novamente
			// a não ser que a próxima caixa de cor usada não esteja sendo usada
			if(corCelula == '#'+cor){
				//alert('cor já salva');
				return;
			}
		}
	}else{
		// passa por aqui quando todas cores recentemente usadas
		// estão sendo preenchidas de branco
	}
	// cada nova cor inserida vai ser inserida na coluna à direita
	tcsIndice++;
	// se passar do limite de colunas, volta para o início
	if(tcsIndice > 16){
		tcsIndice = 1;
	}
	// coluna a ser modificada
	celula = document.getElementById('ultimasCoresSelecionadasColuna'+tcsIndice);
	celula.style.backgroundColor = '#'+cor;
	celula.onclick=function(){mudaCorSelecionada2(corNova)};
	// muda fundo e valor do input de seleção de cor
	var myPicker = new jscolor.color(document.getElementById('selecaoCor'), {})
	myPicker.fromString(corNova);
}

function mudaCorSelecionada2(corNova){
	//alert(corNova);
	// muda fundo e valor do input de seleção de cor
	var myPicker = new jscolor.color(document.getElementById('selecaoCor'), {})
	myPicker.fromString(corNova);
	//document.getElementById('selecaoCor').style.backgroundColor = '#'+corNova;
	//document.getElementById('selecaoCor').value = corNova.toUpperCase();
	mudaCorSelecionada(corNova);
}

// converte RGB para HEX
function rgbConvert(str){
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toUpperCase();
   str[1] = parseInt(str[1], 10).toString(16).toUpperCase();
   str[2] = parseInt(str[2], 10).toString(16).toUpperCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}

// evento gerando quando o mouse ta sobre uma célula da tela de pintura
function sobre(celula){
	//alert(document.getElementById(celula).style.backgroundColor);
	//alert(celula);
	// verifica se a cor já é a selecionada...
	if(document.getElementById(celula).style.backgroundColor == cor){
		//alert('cor não mudou.');
		return false;
	}
	// registra a mudança da cor (para se atualizar online)
	corMudancas[corMudancas.length] = new Array(celula, cor);
	// muda a cor da célula
	document.getElementById(celula).style.backgroundColor = '#'+cor;
}

// mostra e esconde layer *mágico*
function escondeLayer(){
	document.getElementById('layerMagico').style.display = 'none';
}

function mostraLayer(e){
	// se foi clicado com o mouse esquerdo, não mostra o layer, continua pintando sem parar
    var eID = (window.event) ? event.button : e.which;
	if(eID == 2 || eID == 3){
		//alert("O código da tecla pressionada foi: " + eID);
		return false;
	}
	document.getElementById('layerMagico').style.display = 'block';
}