// JavaScript Document
 var win;
Ext.onReady(function(){
    Ext.QuickTips.init();
  	Ext.form.Field.prototype.msgTarget = 'under';	
	
	// Remove the loading panel after the page is loaded
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading_mask').fadeOut({remove:true});
    }, 250);
	
	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
    var login = new Ext.FormPanel({ 
        labelWidth:100,
        url:'/includes/login.php', 
        frame:true, 
		height:150,
		bodyStyle:'padding:5px',
        title:'Sistema de Trámites on-line en el consulado. (Usuarios con cuenta)', 
        defaultType:'textfield',
		monitorValid:true,
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
        items:[{ 
                fieldLabel:'Usuario', 
                name:'loginUsername', 
                allowBlank:false,
				maxLength : 16,
				anchor:'75%',
				maxLengthText : 'El usuario debe tener maximo 16 digitos'
				//,maskRe: /([0-9]+)$/   
            },{ 
                fieldLabel:'Clave', 
                name:'loginPassword', 
                inputType:'password',
				anchor:'75%',
				enableKeyEvents:true, 
                allowBlank:false,
				listeners:{
					specialkey : function(field, e) {
					  if (e.getKey() == Ext.EventObject.ENTER) {
							sumbitForm();
					 }
				   }					
				}
            }],
	        

	// All the magic happens after the user clicks the button     
        buttons:[{ 
                text:'Ingresar al Sistema',
                formBind: true,	 
                // Function that fires when user clicks the button 
                handler:function(){ 
                     sumbitForm();
                } 
            }] 
    });
	
function getDatosForm(){
	var datosForm =  new Ext.form.FormPanel({
			baseCls: 'x-plain',
			layout:'form',
			id:'datosForm',
			border: true,
			defaultType: 'textfield',
			buttonAlign: 'right',
			bodyStyle: 'padding:5px',	
			labelWidth: 150,
			monitorValid: true,
			items: [{
					xtype:'panel',
					bodyStyle: 'background:none;border:0px; padding-bottom:10px',
					html:'Ingrese el número de DNI y el correo asociado a su cuenta al momento de crearla.'
					},{
					id: 'numberDNI',
					fieldLabel:'Ingresar DNI',				
					name: 'numberDNI',
					maxLength: 8,
					width:200,
    	            allowBlank:false,					
					emptyText  : 'Digite el número de DNI aquí',
					blankText  : 'este campo no puede estar en blanco',
					invalidText: 'Debe igresar solo números',
					maxLengthText: 'El número de DNI debe tener 8 digitos',
					maxLength  : 8,
					validator  : function(v){
					var t = /([0-9]+)$/;
					return t.test(v);
					}			 
					},{
					id: 'correo',
					fieldLabel:'Ingresar E-mail',				
					name: 'correo',												                
    	            allowBlank:false,
					maxLength: 64,
					emptyText  : 'Digite el e-mail aquí',
					blankText  : 'este campo no puede estar en blanco',
					vtypeText: 'Debe igresar un email válido como: usuario@servidor.com',				
					width:200,
					vtype:'email'
					
					}],
			buttons:[{
				text:'Recobrar Clave',
				formBind:true,
				handler: function(){					
					
						maskingAjax.request({								 
						url : '/includes/recover_password.php', 
						headers: {'Content-Type':'content=application/xhtml+xml;charset=utf-8'},
						params : {
							 dni: document.getElementById('numberDNI').value,
							 email: Ext.getCmp('correo').getValue() 
						},
						method: 'GET',
						success: function ( result, request) { 
							if (result.responseText > 0){
								win.hide()
								Ext.MessageBox.alert('Password Enviado', 'Su password ha sido envaido a: '+  Ext.getCmp('correo').getValue(),function (){window.location = 'index.php'});

							}else{
								win.hide()
								Ext.MessageBox.alert('Atención', 'Su correo o DNI no se encuentran registrados, por favor intente de nuevo.',function (){window.location = 'index.php'});
							}
						},
						failure: function ( result, request) { 
							Ext.MessageBox.alert('Error', 'No se pudo guardar la informacion error: '+ result.responseText); 
						} 
					});												

				}
			 },{
				text:'Cerrar',
				handler: function(){
					window.location = 'index.php'
				}
	 		 }]		
		
	});	
	var datosFormWindow = new Ext.Window({
			 width:400
			,height:190
			,id:'datosFormWindow'
			,resizable:false
			,layout:'fit'
			,border:true
			,closeAction:'hide'
			,closable:false
			,modal:true
			,title:'Recobrar Clave'			
			,items: datosForm
				
		});
	datosFormWindow.show();	}	
	
 function sumbitForm(){
	login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Conectando', 
                        waitMsg:'Enviando datos...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
                        success:function(){ 
                        	//Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				   //if (btn == 'ok'){
		                        var redirect = '/index.php?cGF0aD1tYWlu'; 
		                        window.location = redirect;
                                   //}
			        //});
                        },
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Login Incorrecto!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Atencion!', 'El servidor de autenticacion no esta disponible : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    });	 
 }
 
 
 var extra = new Ext.Panel({
						id:'main-panel',
						baseCls:'x-plain',						
						layout:'table',
						layoutConfig: {columns:1},
						// applied to child components
						defaults: {frame:true, width:405},
						items:[login,{
							title:'¿Aún no tiene cuenta?',
							height:104,
							buttonAlign:'center',
							html:'Para poder ingresar al sistema debe crear una cuenta.',
							buttons: [{
								text     : 'Crear Cuenta',
								handler  : function (){registroCuenta.show();}
								//style: 'margin-right:330px'
							},{
								text     : 'Olvidé mi clave',
								handler  : function(){getDatosForm()}
																
							}]
						 }]
						});
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.       
    win = new Ext.Window({
        layout:'fit',
		renderTo:'loginDiv',
        width:420,
        height:270,
        closable: false,
        resizable: false,
        plain: false,
        border: false,
        items: [extra]
	});
	win.show();
	
});