Ext.onReady(function(){	
	
	var win;	
	var contactFrm;
	
    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
	
	var addrPanel = new Ext.Panel({
		title:'',
		bodyStyle: 'font-weight:normal;padding:2px; background-color:#202020; color:#090;font-family:Verdana, Geneva, sans-serif; font-size:14px;height: 90px;padding:5px;',
		html: '<p>13 PARK PLACE, LONDRES SW1A 1LP</p><p>&nbsp;</p><p>Tlfno: +44(0)2074996867</p><p>&nbsp;</p><p>Fax: +44(0)2074996782</p>',
		defaults: {autoWidth:true, autoHeight:true}
	});
	
	var addressPanel = new Ext.Panel({
		defaults: {autoWidth:true, autoHeight:true},
		title: '',
        html: '<iframe width="500" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=13+PARK+PLACE,+LONDRES+SW1A+1LP&amp;sll=51.506199,-0.139957&amp;sspn=0.052889,0.1157&amp;ie=UTF8&amp;ll=51.512695,-0.135784&amp;spn=0.006611,0.014462&amp;z=14&amp;iwloc=addr&amp;om=0&amp;output=embed&amp;s=AARTsJpfTIytE7hK2dfdhNusQDDhcp0HiA"></iframe>'
	});


		 var imgCaptcha = '';
		 
		 contactFrm = new Ext.BasicForm('contacto',
											{
											 url:'processContactForm.cfm',
											 standardSubmit: true,
											 name: 'contactFrm'
											 });
		 
	  var emailLabel = new Ext.form.Label({
										  renderTo: 'emailLabel', 
										  text: 'Su Correo Electronico - (Your Email Address)',										  
										  style: 'color:#595959;font-family:Tahoma, Geneva, sans-serif;font-size:13px;'
										  });
	  var subjectLabel = new Ext.form.Label({
										  renderTo: 'subjectLabel', 
										  text: 'El Titulo del Mensaje - (Message Title)',
										  style: 'color:#595959;font-family:Tahoma, Geneva, sans-serif;font-size:13px;'
										  });
	  var subjectLabel = new Ext.form.Label({
										  renderTo: 'uMsgLabel', 
										  text: 'El Contenido del Mensaje - (Message Content)',
										  style: 'color:#595959;font-family:Tahoma, Geneva, sans-serif;font-size:13px;'
										  });
	  var captchaLabel = new Ext.form.Label({
										  renderTo: 'captchaLabel', 
										  text: 'Escribe los numeros que aparecen en la Imagen - (Type the numbers shown in the picture)',
										  style: 'color:#595959;font-family:Tahoma, Geneva, sans-serif;font-size:13px;'
										  });	  
	  var uEmail = new Ext.form.TextField({
		   applyTo: 'uEmail',
		   width: 300,
		   allowBlank: false,
		   vtype: 'email',
		   emptyText: 'Escribe un correo electronico valido',
		   blankText: 'Escribe un correo electronico valido',
		   fieldLabel: 'Su Correo Electronico'
		  });

	  var uSubject = new Ext.form.TextField({
		   applyTo: 'uSubject',
		   width: 300,
		   allowBlank: false,
		   emptyText: 'Escribe el titulo de su mensaje',
		   blankText: 'Por favor escribe el titulo de su mensaje'
		  });

	  var captcha = new Ext.form.TextField({
		   applyTo: 'captcha',
		   width: 100,
		   allowBlank: false,
		   blankText: 'Por favor escribe los numeros que aparecen en la imagen'
		  });
	  
	  var uMsg = new Ext.form.HtmlEditor({
			applyTo: 'uMsg',
			width: 500,
			height: 220,
		    allowBlank: false,
		    emptyText: 'Escribe el contenido de su mensaje',
		    blankText: 'Por favor escribe el contenido de su mensaje'
		});
	  
	  contactFrm.add(emailLabel);
	  contactFrm.add(uEmail);
	  
	  contactFrm.add(subjectLabel);
	  contactFrm.add(uSubject);
	  
	  contactFrm.add(uMsg);		  

    var frmPanel = new Ext.Panel({
								 title: '',
								 defaults: {autoWidth: true, autoHeight:true},
								 bodyStyle: 'padding:1px;',
								 collapsible: true,
								 contentEl: 'contacto',
								 applyTo: 'frmPanel',
								 draggable: true,
								 stateful: true
		                     });
          
	      function frmHandler(){
			    var contEmail   = uEmail.getValue();
				var contSubj    = uSubject.getValue();
				var contCaptcha = captcha.getValue();
				var contuMsg    = uMsg.getValue();
				
				if(!uEmail.isValid() || !uSubject.isValid() || !captcha.isValid() || !uMsg.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
					});
				}
				
				//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(id)
			{
				// 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(id).innerHTML = captchaIMG;
				
				imgCaptcha	=	(first + second + third + fourth + fith);
				return imgCaptcha;
				
			};
			
			jscaptcha('captchaDiv');
			
			  //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 numeros escritos no coinciden con los de la imagen',
						   width: 400,
						   fn: function(){
							         jscaptcha('captchaDiv'); 
									 document.getElementById('captcha').value = '';
									 document.getElementById('captcha').focus();
									}, //Reload the Image
						   buttons: Ext.MessageBox.OK,
						   icon: Ext.MessageBox.ERROR
						 });						   
						}
					 else{  
						 //Submit the form
						 $("#contacto").submit();
					}
				  };

   var winContact  = new Ext.Window({
		  title: 'CONTACTAR A LA EMBAJADA POR EMAIL',
		  width: 700,
		  layout:'fit',
		  height: 580,
		  iconCls: 'embarege',
		  model:true,
		  plain:true,
		  bodyStyle:'padding:2px; text-align:left;overflow:scroll;',
		  defaults:{autoHeight: true,autoWidth:true},
		  autoScroll: true,
		  closable:false,
		  items: frmPanel,
		  allowDomMove: true,
		  collapsible:false,
		  resizable:false,
		  maximizable : false,
		  minimizable : false,
		  modal:true,		  
						 footer: true,
						 fbar:[
							   {text: 'Enviar Mensaje', iconCls: 'enviar', scale: 'large', handler: frmHandler},
							   {text: 'Cerrar', iconCls: 'cerrar', scale: 'large', handler: function(){winContact.hide();}}
							]
	});

function openContactForm(){ 
   $('#contacto').css("display", "block");
   $('#contacto').css("visibility", "visible");

   $('#frmPanel').css("display", "block");
   $('#frmPanel').css("visibility", "visible");
   
   winContact.show();
};

Ext.EventManager.on("btnContactar", 'click', function(){

	if(!win){
		win = new Ext.Window({
			title: 'EMBAREGE-LONDRES - INFORMACION DE CONTACTO',
			items:[addrPanel,addressPanel],	
			modal: false,
       		width: 520,	
       	    height:550,
			closable: false,
			resizable: false,
			iconCls: 'embarege',
			footer: true,
			fbar: [{xtype: 'tbseparator', scale: 'large', width: 10},
				   {
				     xtype: 'button', text: 'Enviar Email', scale: 'large', iconCls: 'enviar', handler: function(){win.hide();openContactForm();}
				   },
                   {
				     xtype: 'button', text: 'Cerrar', scale: 'large', iconCls: 'cerrar', handler: function(){win.hide();}
				   }]
		});
	}
	 win.show();
     });
  });