$(document).ready(function(){
						   
//----------------------------------------------- Cógigo que monta o teclado na tela   ------------------------------------------

	//var teclado = '<div id="teclado" style="z-index:100">';
//    teclado += '<div class="menu_sup">';
//    teclado += '<div id="keyboard_title">Teclado Virtual</div>';
//    teclado += '<div id="exit_selected"></div>';
//    teclado += '<img src="images/exit-ico.png"/>';
//    teclado += '</div>';
//    teclado += '<input type="password" id="senha_fake" readonly="readonly" />';
//    teclado += '<input type="hidden" id="real_password" />';
//    teclado += '<div class="buttons-container-middle">';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '<div class="button"></div>';
//    teclado += '</div>';
//    teclado += '<div id="buttons-box">';
//    teclado += '<div class="buttons-container-bottom">';
//    teclado += '<div class="button" id="ok"><div>Ok1</div></div>';
//    teclado += '<div class="button" id="limpar"><div>Limpar</div></div>';
//    teclado += '</div>';
//    teclado += '</div>';
//    teclado += '</div>';
//	
//	$(teclado).appendTo("body").hide();

//-------------------------------------------------------------------------------------------------------------------------------
						   
//----------------------------------------------- Código de funcionalidades do teclado ------------------------------------------							
	
	$("#teclado").draggable({ handle: 'div.menu_sup' });
	
	reordena_teclas();
	
	$("<div id='gray-box'></div>")
	.css({
		 opacity : 0.8,
		 width: $(document).width(),
		 height: $(document).height()
	})
	.appendTo("body").hide();
	
	$("#teclado .menu_sup img").click(function(){ // mudar aqui para o botão 'X' de fechar o teclado
		$("#teclado #senha_fake").val("");
		$("#teclado #p_password").val("");
		$("#teclado").fadeOut(500);
		$("#gray-box").fadeOut(1000);
	});
	
	$("#teclado .menu_sup img").hover(
		function() {
			$("#teclado .menu_sup #exit_selected").addClass("background-color");
		},
		function() {
			$("#teclado .menu_sup #exit_selected").removeClass("background-color");
		}
	);
	
	$("#teclado #limpar").click(function(){
		$("#teclado #senha_fake").val("");
		$("#teclado #p_password").val("");
	});
	
	$("#teclado .buttons-container-middle .button").addClass("client-button");
	
	$("#teclado .buttons-container-bottom .button").addClass("stoped");
	
	$("#teclado .buttons-container-bottom .button").hover(
		function() {
			$(this).removeClass("stoped");
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
			$(this).addClass("stoped");
		}
	);
	
	$("#teclado #p_password").val(""); // limpa o cache
	
	$("#teclado #ok").click(function(){
		
		// pensar em uma solução onde o programador implementa
		var str = $("#teclado #p_password").val();
		//str = str.substr(0,str.length-1);
		
		teclado_confirm(str); // método que deve ser implementado pelo programador


		$("#teclado").fadeOut(500);
		$("#gray-box").fadeOut(1000);
	    $("#teclado #senha_fake").val("");
	    $("#teclado #p_password").val("");
	});
	
//-------------------------------------------------------------------------------------------------------------------------------	
	
});

//Função que ordena o teclado virtual, de modo os numericos fiquem alinhados a direita e com fundo cinza.
function ordena_numerico()
{
   var array = $("#teclado .buttons-container-middle .button"); // insere todos os elementos em um array
   var numeros = [1,2,3,4,5,6,7,8,9,0];
   var arrayDiv = $("#teclado .buttons-container-middle");
   var newArray = new Array();//Array que vai armazenar as divs que tenham numero
   var indexRe = new Array();//Array que vai armazenar as posicoes das divs que contem numero a remover do outro array

   var txt;
   for(var i = 0 ; i < array.length; i++)
   {
     txt = $(array[i]).text();

     for(var j = 0; j < numeros.length; j++)
     {
       if(txt.substring(0,1) == numeros[j])
       {
         newArray[newArray.length] = array[i];
         indexRe[indexRe.length] = i;
         break;
       }
     }

   }
   //Remove as divs que tenham numero do array principal, deixando apenas as divs com letras
   var t = 4;
   while (t >= 0)
   {
       array.splice(indexRe[t],1);
       t--;
   }

  //Monta a nova ordem de botoes
  var div = $("#teclado .buttons-container-middle");
  $(div).html("");
 //Letras
 $(div).append($(array[0]));
 $(div).append($(array[1]));
 $(div).append($(array[2]));
 $(div).append($(array[3]));
 //Troca o estilo dos botoes
 $(newArray).removeClass();
 $(newArray).addClass('button clienteNumber');

 $(array).removeClass();
 $(array).addClass('button client-button');

 //Numeros
 $(div).append($(newArray[0]));
 $(div).append($(newArray[1]));
 //Letras
 $(div).append($(array[4]));
 $(div).append($(array[5]));
 $(div).append($(array[6]));

 //Numeros
 $(div).append($(newArray[2]));
 $(div).append($(newArray[3]));
 $(div).append($(newArray[4]));


   // adiciona evento click aos botões
	$("#teclado .buttons-container-middle .button div").click(function(){															   
		var str = $("#teclado #p_password").val();															   
		str += ($(this).html()).replace(/ /g,'') + '-';
		$("#teclado #p_password").val(str);
		
		var aux = $("#teclado #senha_fake").val();
		aux += 1;
		$("#teclado #senha_fake").val(aux);
	});

}               

// Função que exibe o teclado no centro da tela
function show_teclado()
{
	$("#teclado .buttons-container-middle .button").html("");
	reordena_teclas();
	//ordena_numerico();
	$("#teclado").fadeIn(500);
	$("#gray-box").fadeIn(1000);
}

// Reordena as teclas do teclado
function reordena_teclas()
{
	var letras = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
	var numeros = [1,2,3,4,5,6,7,8,9,0];
	var ln = ['Q','W','E','R','T','Y','U','I','O','P','7','8','9','A','S','D','F','G','H','J','K','L','Ç','4','5','6','Z','X','C','V','B','N','M','','','0','1','2','3']
	var digito = '';
	
	var array = $("#teclado .buttons-container-middle .button"); // insere todos os elementos em um array
	var size = array.length; // pega o tamanho do array
	
	for(var i = 0; i < array.length; i++)
	{
		var digito = ln[i];
		$(array[i]).append("<div>" + digito + "</div>");
		//var digito = get_digito(letras, numeros); // pega o dígito que será inserido na tecla
	    //var indice = parseInt(Math.random()*size); // pega um índice aleatório
		
		//$(array[indice]).append("<div>" + digito + "</div>");
		
		//for(var j = indice; j < array.length; j++)
		//	array[j] = array[j+1];
		//size--;		
	}
	
	// adiciona evento click aos botões
	$("#teclado .buttons-container-middle .button div").click(function(){															   
		var str = $("#teclado #p_password").val();															   
		//str += ($(this).html()).replace(/ /g,'') + ($(this).html()).replace(/ /g,'') + ($(this).html()).replace(/ /g,'') + '-';
		str += ($(this).html()).replace(/ /g,'');
		$("#teclado #p_password").val(str);
		
		var aux = $("#teclado #senha_fake").val();
		aux += 1;
		$("#teclado #senha_fake").val(aux);
	});
}

// Seleciona rândomicamente os 3 dígitos de uma tecla
function get_digito(letras, numeros)
{
	var indice;
		
	if(numeros.length > 0)
	{
		indice = parseInt(Math.random()*numeros.length);
		digito = numeros[indice] + " ";
		
		// remove elemento do array
		for(var i = indice; i < numeros.length-1; i++)
			numeros[i] = numeros[i+1];
		numeros.pop();	
	}
	else
	{
		indice = parseInt(Math.random()*letras.length);
		digito = letras[indice] + " ";
		
		// remove elemento do array
		for(var i = indice; i < letras.length-1; i++)
			letras[i] = letras[i+1];
		letras.pop();	
	}
	
	// adiciona outros dois caracteres
	for(var i = 0; i < 2; i++)
	{
		if(i == 1 && numeros.length > 0)
		{
			indice = parseInt(Math.random()*numeros.length);
			digito += numeros[indice] + " ";
			
			// remove elemento do array
			for(var j = indice; j < numeros.length-1; j++)
				numeros[j] = numeros[j+1];
			numeros.pop();
		}
		else
		{
			indice = parseInt(Math.random()*letras.length);
			
			if(i == 0)
				digito += letras[indice] + " ";
			else
				digito += letras[indice];
				
			// remove elemento do array
			for(var j = indice; j < letras.length-1; j++)
				letras[j] = letras[j+1];
			letras.pop();
		}
	}
	
	return digito;
}