var theForm, validator, clave1, clave2,distrito;
var index = 0
var createForm = function (x){
	var masterdiv = new Element ('div',{'class':'pet'}).inject($$('div.button')[1],'before');
	var h3 = new Element ('h3').setText('Mascota '+ (x+1)).inject(masterdiv);
	
	$each(form,function(e,i){
		var div = new Element ('div');
		var strong = new Element ('strong').set('html',e.texto+(e.required?' <b>*</b>':'')).inject(div);
		var span = new Element ('span').inject(div);
		if(e.tag) new Element ('em').setHTML(e.tag + '<br/>').inject(span);
		//alert(e.texto+' > '+e.type);
		if(e.type=='textarea')
		{
			var textarea = new Element ('textarea',{
				'name':'mascota['+x+']['+i+']',
				'class':e.valid
			}).inject(span);
			
		}else if(e.type=='select'){
			var select = new Element(e.type,{'name':'mascota['+x+']['+i+']','class':e.valid});
			for (var j=0; e.valores.length>j;j++ ){
				new Element ('option',{
					'value': e.valores[j].id
				}).setText(e.valores[j].nombre).inject(select);
			}
			select.inject(span);
			
		}else if(e.type=='checks'){
			
			var checks = new Element('div',{'class':'checks'});
			for (var j=0; e.valores.length>j;j++ ){
				new Element ('em',{
					'row': e.valores[j].id
				}).setText(e.valores[j].nombre).addEvent('click', function (){
					this.toggleClass('checked')
				}).inject(checks);
			}
			checks.inject(span);
			var inputChecks = new Element('input',{'type':'hidden','name':'mascota['+x+']['+i+']'}).injectAfter(checks);
			
		}else{
			var input = new Element ('input',{
				'name':'mascota['+x+']['+i+']',
				'type':e.type,
				'maxlength':'128',
				'class':e.valid
			}).inject(span);
			//detePicker
			if (e.valid=='date norequired'){
				asocDate(input,true);
			}
		}
		div.inject(masterdiv);
	});
	//$E('#steptitle span').setText('Paso 2');
	$E('#steptitle').removeClass('paso1');
	$E('#steptitle').addClass('paso2');
	index++
}

var docheck = function (el){
	el.addEvent('click', function (){this.toggleClass('checked')})
}

var getCheckeds = function(box){
	return box.getElements('em[class=checked]').get('row');
}

var asocDate = function (input,type){
	var dp = new datePicker(input,{
		format: '%DD %d %MM de %Y',
		startDate: startDate,
		minDate: minDate,
		//maxDate: maxDate,
		months: meses,
		days: dias
	});
	if (type) dp.options.maxDate= nowDate;
	else dp.options.maxDate= maxDate;
	
}

var lastCheck;
var emailInput;
var requestCheck;
var emailCheckStatus = false;
var emailCheckInfo;
var checkEmail = function(){
	var email = emailInput.value;
	if(lastCheck!='' && lastCheck!=email && email.test(iRules.mail.regex)){
		lastCheck = email;
		requestCheck.send({data:'email='+email});
	}
};
var onCheckEmail = function(r){
	if(r=='true'){
		if(!emailCheckInfo){
			emailCheckInfo = new Element('p',{'id':'errormail'}).injectAfter(emailInput);
		}
		emailCheckInfo.setStyle('display','block').innerHTML = 'Este email ya ha sido utilizado.';
		emailInput.getParent().addClass(validator.options.invalid);
		emailCheckStatus = false;
	}else if(r=='false'){
		if(emailCheckInfo){
			emailCheckInfo.setStyle('display','none');
		}
		emailCheckStatus = true;
	}else{
		alert(r);
	}
};

var sending = false;
var submitButtons;

window.addEvent('domready',function(){
	theForm = $('mascotas');
	submitButtons = theForm.getElement('.button');

	emailInput = $E('input[name=email]');
	emailInput.addEvent('blur',checkEmail);
	requestCheck = new Request({url:base+'usuario_registro.ajax',onSuccess:onCheckEmail});

	//validar antes de enviar el form
	validator = new iValidator(theForm.getElements('input[type=text],input[type=file],input[type=password],textarea'));
	theForm = $E('form').addEvent('submit',function(e){
		theForm = $('mascotas');
		validator = new iValidator(theForm.getElements('input[type=text],input[type=file],textarea'));
		//actualizando campo de hobbies
		$$('.checks').each(function(el){el.getNext().value = getCheckeds(el).join(',');});
		if(!validator.test()){
			new Event(e).stop();
			validator.showInvalid(true);
			//submitButtons.removeClass('hidden');
		}else if(!sending){
			sending = true;
			submitButtons.addClass('hidden');
			loading.show(this);
		}
	});
	// ocultar y mostrar distrito alternativo
	distrito = $('distrito');
	distrito.addEvent('change',function(){
		alter = $('distrito_alternativo').getParent().getParent();
		if(distrito.value=='Fuera de Lima') alter.removeClass('hidden');
		else alter.addClass('hidden');
	})
	
	
	//personalizando validación para las claves
	clave1 = theForm.getElement('input[name=clave1]');
	clave2 = theForm.getElement('input[name=clave2]').removeEvent('blur').addEvent('blur',function(){
		if(this.value!=clave1.value){
			this.setProperty('invalid','1').getParent().addClass(validator.options.invalid);
		}else{
			this.setProperty('invalid','0').removeProperty('invalid');
		}
	});
	//selector de fecha usuario
	asocDate(theForm.getElement('input.date'),true);

	$('step').addEvent('click',function(e) {
		validator = new iValidator(theForm.getElements('input[type=text],input[type=password],select'));
		if(!validator.test()){
			new Event(e).stop();
			validator.showInvalid(true);
		}else if(clave1.value!=clave2.value){
			new Event(e).stop();
			clave2.setProperty('invalid','1').getParent().addClass(validator.options.invalid);
		}else{
			if(emailCheckStatus){
				$('usuarios').addClass('hidden');
				$('error').addClass('hidden');
				$('mascotas').removeClass('hidden');
				createForm(index);
			}else{
				alert('Este email ya ha sido utilizado')
				emailInput.getParent().addClass(validator.options.invalid)
			}
		}
	});

	$('addpet').addEvent('click',function(e) {
		theForm = $('mascotas');
		validator = new iValidator(theForm.getElements('input[type=text],input[type=file],textarea'));
		if(!validator.test()){
				new Event(e).stop();
				validator.showInvalid(true);
			}
		else{
			$('usuarios').addClass('hidden');
			$('mascotas').removeClass('hidden');
			$('removepet').removeClass('hidden');
			createForm(index);
		}
	});
	
	//eliminar mascota
	$('removepet').addEvent('click',function(e) {
		var divpet =$$('.pet').getLast();
		if ($$('.pet').length<=1) return alert('Es necesario agregar al menos una mascota');
		
		if(confirm('¿Desea eliminar esta mascota?')){
			//index--;
			divpet.remove();
			if ($$('.pet').length<=1) $('removepet').addClass('hidden');
		}
	});
	
	new sIFR('#cont2 h1','css/italic.swf',{fontSize:20,shadowColor: '#B5A172',shadowDistanceX: 0,	shadowDistanceY: 38});
	new sIFR('#cont3 h2','css/italic.swf',{fontSize:16,shadowColor: '000000',shadowDistanceX: 0,	shadowDistanceY: 38});
	new sIFR('#cont3 h4','css/italic.swf',{fontSize:14,shadowColor: '000000',shadowDistanceX: 0,	shadowDistanceY: 0});
});