// JavaScript Document
     var winContacto;
	 
	 Ext.QuickTips.init();	
     Ext.onReady(function(){	
	 	 	    
		 var imgCaptcha = '';
		 
		// turn on validation errors beside the field globally
		Ext.form.Field.prototype.msgTarget = 'side';			 
		 var frmPanel = new Ext.form.FormPanel({
			  formId: 'frmPanel',
			  applyTo: 'frmDiv',
			  url: 'processContactForm.cfm',
			  standardSubmit: true,
			  width: 500,
			  height: 500,
			  autoHeight: true,
			  title: '',
			  frame: false,			  
			  labelAlign: 'top',
			  border:0,
			  labelPad: 10,
			  labelWidth: 200,
			  bodyStyle: 'padding:5px;',
			  defaultType: 'textfield', 			  
			  items: [
			   {
				   name: 'Nombre',
				   xtype: 'textfield',
				   allowBlank: false,
				   width: 300,
				   fieldLabel: 'Nombre', 
				   blankText: 'Por favor escribe su nombre.'				   
			    },
			   {
				   name: 'uEmail',
				   allowBlank: false,
				   fieldLabel: 'Correo Electrónico', 
				   xtype: 'textfield',
				   width: 300,
				   blankText: 'Por favor escribe su correo electrónico.',
				   vtype: 'email'
				   				   
			    },	
				{
				   name: 'uSubject',
				   allowBlank: false,
				   fieldLabel: 'Asunto', 
				   xtype: 'textfield',
				   width: 300,
				   blankText: 'Por favor escribe el asunto del mensaje'				   
			    },
				{
					xtype: 'htmleditor',
					name:  'uMsg',
					fieldLabel: 'Su Mensaje', 
					allowBlank: false,
					width: 480,
					height: 200
					},
					{
					itemId: 'captchaDiv',
					xtype: 'box',
					autoEl: {
						tag: 'div',
						id: 'captchaDiv',
						style: 'width:158px; height:auto;',
						html: ''
					}
					},
					{
						xtype: 'textfield',
						allowBlank: false,
						width: 300,
						name: 'captcha',
						fieldLabel: 'Escribe los números de la imagen',
						blankText: 'Escribe los números de la imagen'
				}			     
			  ]
			 });
	      function frmHandler(){
			    var aForm = frmPanel.getForm();				
				var contCaptcha = aForm.findField('captcha').getValue();
				
				if(!aForm.isValid()){
				  // Show a dialog using config options:
					Ext.Msg.show({
					   title:'Embarege-londres.org - Errores en el formulario',
					   msg: 'Por favor rellena todos los campos del formulario',
					   buttons: Ext.Msg.OK,
					   icon: Ext.MessageBox.ERROR
					});
					jscaptcha();
				}
				
				//if the form is valid, then check if the captcha text matches the captcha image
				else{
					//Call the handlerFrmCaptcha to validate the captcha
					handlerFrmCaptcha(contCaptcha);
				}
			  };

			function jscaptcha()
			{
				// Set Variables	
					var first	=	(Math.floor(Math.random()*10))+'';
					var second	=	(Math.floor(Math.random()*10))+'';
					var third	=	(Math.floor(Math.random()*10))+'';
					var fourth	=	(Math.floor(Math.random()*10))+'';
					var fith	=	(Math.floor(Math.random()*10))+'';
	
				// Display the Captcha Images
				var img1 = '<img src=Imagenes/' + first + '.gif border=0>';
				var img2 = '<img src=Imagenes/' + second + '.gif border=0>';	
				var img3 = '<img src=Imagenes/' + third + '.gif border=0>';
				var img4 = '<img src=Imagenes/' + fourth + '.gif border=0>';
				var img5 = '<img src=Imagenes/' + fith + '.gif border=0>';
				
				var captchaIMG = img1 + img2 + img3 + img4 + img5;								
				document.getElementById('captchaDiv').innerHTML = captchaIMG;				
				imgCaptcha	=	(first + second + third + fourth + fith);
				return imgCaptcha;
				
			};
			
			jscaptcha();
			
			  //Handlers the form captcha validation and form submittion 
			  function handlerFrmCaptcha(aField){				  
											
						if(aField != imgCaptcha){
						   Ext.MessageBox.show({
						   title:'EMBAREGE-LONDRES.ORG - Error Verificacion',
						   msg: 'Los n&uacute;meros escritos no coinciden con los de la imagen',
						   width: 400,
						   fn: function(){
							         jscaptcha(); 
									 frmPanel.getForm().findField('captcha').setValue('');
									 frmPanel.getForm().findField('captcha').focus('');
									}, //Reload the Image
						   buttons: Ext.MessageBox.OK,
						   icon: Ext.MessageBox.ERROR
						 });						   
						}
					 else{
						   // attach a submit handler to the form  
						   frmPanel.getForm().submit({
							    url: 'processContactForm.cfm',
								method: "POST",
								waitMsg: "Enviando su mensaje. Por favor tenga paciencia ...",
								waitTitle: "EMBAREGE-LONDRES.ORG: Contacto Por Email",
								success: displayConfirmMsg,
								failure: function() {Ext.Msg.alert("ERROR ENVIO","No se ha podido enviar el mensaje");}	   
							   });
						   
						}
				  }; 
				  
				  function displayConfirmMsg(res){
					       var json = Ext.util.JSON.decode(res.responseText);
						   Ext.MessageBox.show({
						   title:'EMBAREGE-LONDRES.ORG - Mensaje de Confirmacion',
						   msg: json.msg,
						   width: 600,
						   fn: function(){
							         jscaptcha(); 
									 frmPanel.getForm().findField('captcha').setValue('');
									 frmPanel.getForm().findField('captcha').focus('');
									}, //Reload the Imageos 
						   buttons: Ext.MessageBox.OK,
						   icon: Ext.MessageBox.INFO
						 });					   
					  };
		winContacto  = new Ext.Window({
        title: 'FORMULARIO DE CONTACTO DE EMBAREGE-LONDRES.ORG',
        width: 520,	
        height:600,	
		renderTo: Ext.getBody(),
        minWidth: 100,
        minHeight: 50,
		layout: 'fit',
		iconCls: 'frmIcon',
		model:true,
        plain:true,
        defaults:{autoHeight: true,autoWidth:true},
		autoScroll: true,
		closable:false,
		items: frmPanel,
		allowDomMove: true,
		animCollapse: true,
		collapsible:true,
		resizable:false,
		maximizable : false,
		minimizable : false,
		modal:true,
		footer: true,
		fbar:[
			   {text: 'Enviar Mensaje', iconCls: 'frmIcon', scale: 'large', handler: function(){frmHandler();}},
			   {text: 'Cancelar', scale: 'large', handler: function(){winContacto.hide();}},
			   {text: 'Informaci&oacute;n de Contacto', scale: 'large', handler: function(){mostrarDireccion();}}			   
			]
	 });
	 return winContacto;
     winContacto.setPosition(100,10);	  
	 });
	 
function mostrarVentana(){
	 
	  winContacto.show();
	}
	
function mostrarDireccion(){
	  winContacto.hide();
	  
	  Ext.onReady(function(){
		   var dirPanel = new Ext.Panel({
			    collapsible:false,
				border: 0,
				defaults: {autoHeight:true, autoWidth:true},
				autoLoad: {url: 'mapaEmbarege-London.cfm', scripts:true},
				renderTo: 'dirDiv'
			   });
			   
		var dirWindow = new Ext.Window({
        title: 'INFORMACION DE CONTACTO DE LA EMBAJADA',
        width: 520,	
        height:550,	
		renderTo: Ext.getBody(),
        minWidth: 100,
        minHeight: 50,
		layout: 'fit',
		iconCls: 'frmIcon',
		model:true,
        plain:true,
        defaults:{autoHeight: true,autoWidth:true},
		autoScroll: true,
		closable:false,
		items: dirPanel,
		allowDomMove: true,
		animCollapse: true,
		collapsible:true,
		resizable:false,
		maximizable : false,
		minimizable : false,
		modal:true,
		footer: true,
		fbar:[			   
			   {text: 'Cerrar', scale: 'large', handler: function(){dirWindow.hide();}}
			]
	    });
		
		dirWindow.show();
	 });
	}