Ext.namespace('fenceco','fenceco.public');

fenceco.public.contact = function() {

    var init = function( ) {

    	Ext.QuickTips.init();
    	Ext.form.Field.prototype.msgTarget = 'side'
    	
		new Ext.ux.Carousel('entryfenceimage', {
            itemSelector: 'img',
            interval: 5,
        	transitionEasing: 'easeIn'  ,
        	autoPlay: true,
            showPlayButton: true,
            pauseOnNavigate: true,
            freezeOnHover: true,
            navigationOnHover: true              
    	});
    	initialize();
    	buildContactForm();
	}

	var initialize  = function() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(36.014533, -95.9766), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
 
        var latlng = new GLatLng(36.014533, -95.9766);
        map.addOverlay(new GMarker(latlng));
      }
    }
    
    var buildContactForm = function( ) {
    	
    	var contactForm = new Ext.FormPanel({
	        labelWidth: 75, // label settings here cascade unless overridden
	        frame:false,
	        border : false,
	        width: 400,
	        defaults: {width: 230},
	        defaultType: 'textfield',
	
	        items: [{
	        	xtype : 'hidden',
	        	name  : 'formsend'
	        },{
	                fieldLabel: 'Name',
	                name: 'fullname',
	                allowBlank:false
	            },{
	                fieldLabel: 'Address',
	                name: 'address'
	            },{
	                fieldLabel: 'City',
	                name: 'city',
	                allowBlank : false
	            }, {
	                fieldLabel: 'Email',
	                name: 'email',
	                vtype:'email',
	                allowBlank : false
	            },{
	                fieldLabel : 'Phone',
	                name       : 'phone',
	                allowBlank : false,
	                maxLength  : 15
	            },{
	                fieldLabel : 'Product(s)',
	                allowBlank : false,
	                xtype      : 'checkboxgroup',
                    width      : 310,
                    anchor: '95%',
                    columns: 2,
	                items      : [
	                    {boxLabel: 'Fencing',               name: 'cbproducts1', inputValue: 'Fencing'},
	                    {boxLabel: 'Gates',                 name: 'cbproducts2', inputValue: 'Gates'},
	                    {boxLabel: 'Kingfisher',            name: 'cbproducts3', inputValue: 'Kingfisher'},
	                    {boxLabel: 'Wood Defender (Stain)', name: 'cbproducts4', inputValue: 'Wood Defender'}
	                ]
	            },{
	                fieldLabel : 'Details / Other Info',
	                width : 290,
	                name       : 'otherdetails',
	                xtype      : 'textarea',
	                emptyText  : 'Please provide as much detail with your request as possible including linear feet, gates and if tear out is needed.'
	            }
	        ],
	        buttons: [{
	            text: 'Send Request',
	            handler: function(){
	               if(contactForm.getForm().isValid()){
	               	   
	                    contactForm.getForm().submit({
	                        url:'sendform.php',
					        success : function( form , action ) {
					        	Ext.Msg.alert( 'Your Additional Information Request' , 'Your request has been sent. You will receive a confirmation email shortly.');
					        	contactForm.getForm().reset();
					        },
					        failure : function( form , action ) {
					        	
					        }
	                    });
	                }
	            }
	        },{
	            text: 'Clear Form',
	            handler: function(){
	                contactForm.getForm().reset();
	            }
	        }]
	    });
	
	    contactForm.render( document.getElementById('webformcontainer'));
    	
    }

    return {
    
        init : function( ) {
        
            init( );
        }
    }
}();