Ext.ux.Recaptcha = Ext.extend(Ext.BoxComponent, {

    onRender : function(ct, position){

        if(!this.el){
        
        	xformitem = document.createElement('div');
        	xformitem.setAttribute('class', 'x-form-item');
        
        	/*label = document.createElement('label');
            label.style.float = 'left';
            label.innerHTML = this.fieldLabel + ':';
            label.setAttribute('class', 'x-form-item-label');
			label.setAttribute('style', 'width: 75px;');*/
           	//xformitem.appendChild(label);
           	
			
           
           
            //recapt = document.createElement('div');
            recapt = Ext.get(this.custom_theme_widget).dom;
           
		    // recapt.setAttribute('style', 'padding-left: 0px; left: 0; position: inherit; display: block');

            xformitem.appendChild(recapt);
            
            this.container.dom.appendChild(xformitem);
           
            this.el = document.createElement('div');

            this.el.id = this.getId();
            
            //label.setAttribute('for', this.el.id);			

        }

        Ext.ux.Recaptcha.superclass.onRender.call(this, ct, position);

    }

});



Ext.reg('recaptcha', Ext.ux.Recaptcha); 





Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
     
     Ext.override(Ext.Component, {
    getAutoCreate : function() {
        var cfg = typeof this.autoCreate == "object" ?
                  Ext.apply({}, this.autoCreate, this.defaultAutoCreate) : Ext.apply({}, this.defaultAutoCreate);
        if (this.id && !cfg.id) {
            cfg.id = this.id;
        }
        return cfg;
    }
});
   
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'/contact.php',
        frame:false,
        border: false,
        //title: 'Contact Details',
        renderTo: 'contactForm',
        method: 'post',
         labelSeparator: '',
        bodyStyle:'padding:8px',
        width: 360,
        defaults: { width: 180, maxLength: 100, autoCreate: {autocomplete: 'on'} },
        defaultType: 'textfield',
		layoutConfig: {
        	labelSeparator: ''   // layout config has lowest priority (defaults to ':')
    	},
        items: [{
                fieldLabel: '* First Name',
                name: 'first',
                allowBlank:false
                
            },{
                fieldLabel: '* Last Name',
                name: 'last'
               // , allowBlank:false
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: '* Email',
                name: 'email',
                vtype: 'email',
                validationEvent: 'blur'
                //, allowBlank:false
            }, {
                fieldLabel: 'Phone',
                name: 'phone'
              },{
           		fieldLabel: 'Message',
	            xtype: (whitepaper == '0') ? 'textarea':'hidden',
	            name: 'message',
	            height: 100,
	            width: 230
	           
	            //anchor: '100% 100%'  // anchor width and height
	        }, {

                        xtype: 'recaptcha',    name: 'recaptcha',
                        fieldLabel: '* Verification',    
                        id: 'recaptcha',    
                        publickey: '6LdiQAcAAAAAAIIfj_HrVx4xQGTBgCgIeRqtnLiA',    
                        theme: 'custom',  custom_theme_widget: 'recaptcha_widget', lang: 'en'

                },
                
                {
                
                	xtype: 'button',
                	
                	//style: 'align: center; width: 60px !important;',
                	width: 60,
                	cls: 'formSubmitButton',
                	text: 'Submit',
		        	handler: function(){
		        		if(simple.getForm().isValid()){

		            		simple.getForm().submit({url:'/contact.php', waitMsg:'Sending Request...', success: formSuccess, failure: formFailure});
		            	}
		        	}
	        
	    
                },
                
                {
                
                	xtype: 'button',
                	text: 'Cancel',
                	width: 60,
                	cls: 'formCancelButton'},
                	
                	{ xtype: 'hidden',
                	name: 'form_name',
                	value: contact_form_name
                	},
                	{ xtype: 'hidden',
                	name: 'whitepaper',
                	value: whitepaper
                	}
            
        ]

        
   
   
    });
    
    
	
	//Recaptcha.style_set = false;
	//Recaptcha._set_style("");
	
	formSuccess = function(form,action) { 
	
		simple.destroy();
		Ext.get('contactFormHeader').hide();
		Ext.get('contactFormSuccess').show();
	  
	}
	
	// Ext.get('recaptcha_widget').setStyle('padding-left: 0px; left: 0; position: inherit; display: block;');
	
	formFailure = function(form,action) { 
	
		if (action.result != undefined)
			alert(action.result.detail);
		else {
			alert("Unknown error. Please check the form and try again");
		}   
	}
	
	
	new Ext.ToolTip({
        target: 'captcha_help',
        html: '<a href="javascript:Recaptcha.reload()" title="Reload CAPTCHA Image">Having trouble reading the words?</a> <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type(\'audio\')">Audio Version</a> | <a href="javascript:Recaptcha.showhelp()">Instructions</a> </div> <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type(\'image\')">Get an image CAPTCHA</a></div>',
        title: 'CAPTCHA Spam Check',
        autoHide: false,
        closable: true,
        hideDelay: 5000,
        mouseOffset: [15,8],
        draggable: true,
        anchor: 'left',
        showDelay: 100
    });

});