$(document).ready(function() {
		
	$('input[name=respuesta1]').radioBox();
	$('input[name=respuesta2]').radioBox();
	$('input[name=respuesta3]').radioBox();

	$("input[name=numTarjetaCon]").val("N\xFAmero tarjeta");
	$("input[name=fechaExpCon]").val("Ej. dd/mm/aaaa");
	
	$("input[name=numTarjetaCon]").focus(function(){
		if ($(this).val() == "N\xFAmero tarjeta") {
			$(this).val("");
		}
	});
	$("input[name=numTarjetaCon]").blur(function(){
		if ($(this).val() == "" ){
			$(this).val("N\xFAmero tarjeta");
		}
	});
	
	$("input[name=fechaExpCon]").focus(function(){
		if ($(this).val() == "Ej. dd/mm/aaaa") {
			$(this).val("");
		}
	});
	$("input[name=fechaExpCon]").blur(function(){
		if ($(this).val() == "" ){
			$(this).val("Ej. dd/mm/aaaa");
		}
	});	
	
	$("form#LoginConcurso").validate({
		onkeyup: false,
		onfocusout: false,
		rules: {
			numTarjetaCon: {
				required: true,
				rut: true,
				maxlength: 12
			},
			fechaExpCon: {
				required: true,
				date: true
			}
		},
		messages: {
			numTarjetaCon:{
				required: "Este dato es obligatorio",
				rut: function(element){
					if ($("input[name=numTarjetaCon]").val() != 'N\xFAmero tarjeta') 
						return "Ingresa una tarjeta válida";
					else return "Este dato es obligatorio";
				},
				maxlength: function(element){
					if ($("input[name=numTarjetaCon]").val() != 'N\xFAmero tarjeta') 
						return "Ingresa una tarjeta válida";
					else return "Este dato es obligatorio";
				}
			},
			fechaExpCon: {
				required: "Este dato es obligatorio",
				date: function(element) {					
					if ($("input[name=fechaExpCon]").val() != 'Ej. dd/mm/aaaa')
			      		return "Formato válido dd/mm/aaaa";
					else return "Este dato es obligatorio";						
			    }
			}
		},
		errorPlacement: function(error, element) {
			var $form = element.parents('form:first');
			var firstError = $form.validate().errorList[0].message;			
			
			if (mostrar_error) {
				$('#globoError').remove();
				$('#globoErrorGrande').remove();
				if (element.attr('name') == 'numTarjetaCon'){
					var $padre = element.parents('#tarjeta:first');
					var top = '-12';
				}else{
					var $padre = element.parents('#fecha:first');
					var top = '40';
				}				
				$padre.prepend('<div id="globoError" class="globoError" style="top: '+top+'px; left: -60px; margin-left: 100px; font-size: 1em; font-weight: normal"><div align="center">' + firstError + '</div></div>');
				mostrar_error = false;
			}
		}
	});
	
	$('#btnLoginConcurso').click(function(){
		mostrar_error = true;
		if ($("form#LoginConcurso").valid()) {	
			$.ajax({
				data: "accion=login"+"&rut="+$('#numTarjetaCon').val()+"&fechaExp="+$('#fechaExpCon').val(),
				type: "POST",
				url: urlGlobal +"/s/",
				success: function(respuesta){					
					if(respuesta == 'OK'){
						$('#LoginConcurso').submit();						
					}else{
						var $padre = $('#numTarjetaCon').parents('#tarjeta:first');						
						$padre.prepend('<div id="globoErrorGrande" class="globoErrorGrande" style="top: -25px; font-size: 1em; font-weight: normal"><div align="center">La combinación de tarjeta y fecha son incorrectas</div></div>');
					}
				}
			});					
		}
		return false;
	});
	
	$('form#LoginConcurso input[name=numTarjetaCon],form#LoginConcurso input[name=fechaExpCon]').keypress(function(e) {
		mostrar_error = true;
		if (e.keyCode == 13 && $("#LoginConcurso").valid()) {
			$.ajax({
				data: "accion=login"+"&numTarjeta="+$('#numTarjetaCon').val()+"&fechaExp="+$('#fechaExpCon').val(),
				type: "POST",
				url: urlGlobal +"/s/",
				success: function(respuesta){					
					if(respuesta == 'OK'){
						$('#LoginConcurso').submit();						
					}else{
						var $padre = $('#numTarjetaCon').parents('#tarjeta:first');						
						$padre.prepend('<div id="globoErrorGrande" class="globoErrorGrande" style="top: -25px; font-size: 1em; font-weight: normal"><div align="center">La combinación de tarjeta y fecha son incorrectas</div></div>');
					}
				}
			});
		}
	});
	
	$("form#frmPreguntasConcurso").validate({
		onkeyup: false,
		onfocusout: false,
		rules: {
			respuesta1: {
				required: true
			},
			respuesta2: {
				required: true
			},
			respuesta3: {
				required: true
			}
		},
		messages: {
			respuesta1:{
				required:"Selecciona una respuesta"
			},
			respuesta2:{
				required:"Selecciona una respuesta"
			},
			respuesta3:{
				required:"Selecciona una respuesta"
			}
		},
		errorPlacement: function(error, element) {
			var $form = element.parents('form:first');
			var firstError = $form.validate().errorList[0].message;
			var $padre = element.parents('.lista-preguntas:first');
			
			if (mostrar_error) {
				$('#globoError').remove();
				if (element.attr('name') == 'respuesta1')
					var top = '-30';
				else if (element.attr('name') == 'respuesta2')
						var top = '90';
					 else if (element.attr('name') == 'respuesta3')
							var top = '230';															
				$padre.prepend('<div id="globoError" class="globoError" style="top: '+top+'px; margin-left: 160px;"><div align="center">' + firstError + '</div></div>');
				mostrar_error = false;
			}
		}
	});	
	
	$('#btnPreguntasConcurso').click(function(){
		mostrar_error = true;
		if ($("form#frmPreguntasConcurso").valid()) {
			$("#frmPreguntasConcurso").submit();
		}		
	});
	
	
});