Ext.onReady(function(){

    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.QuickTips.init();

    Ext.each(Ext.select('.newsletter-subscribe-link', true), function(el) {


        el.on('click',function() {
      
            if(Ext.getCmp('nlsub-win'))
                Ext.getCmp('nlsub-win').destroy();

            var state_store = new Ext.data.JsonStore({
                storeId:'state-store'
                ,autoLoad: true
                ,url:'/jsonutil/state-province'
                ,root: 'data'
                ,fields: ['state']
                ,emptyText: ''
                ,editable: true
            
            });
            
            
            
            
            var state_combo = new Ext.form.ComboBox({
                id: 'state-combo'
                ,name: 'state'
                ,valueField: 'state'
                ,displayField: 'state'
                ,queryParam: 'state'
                ,fieldLabel: 'state/province*'
                ,triggerAction: 'all'
                ,typeAhead: true
                ,hideTrigger: true
                ,selectOnFocus: true
                ,mode: 'local'
                ,store: state_store
            
            });
            
            var country_store = new Ext.data.JsonStore({
                storeId:'country-store'
                ,autoLoad: true
                ,url:'/jsonutil/country'
                ,root: 'data'
                ,fields: ['country']
                ,emptyText: ''
                ,editable: true
            
            });
            
            
            var country_combo = new Ext.form.ComboBox({
                id: 'country-combo'
                ,name: 'country'
                ,valueField: 'country'
                ,displayField: 'country'
                ,queryParam: 'country'
                ,fieldLabel: 'country*'
                ,triggerAction: 'all'
                ,typeAhead: true
                ,hideTrigger: true
                ,selectOnFocus: true
                ,mode: 'local'
                ,store: country_store
            
            });
           
            var nls_form = new Ext.form.FormPanel({
                id:'nls-form-panel'
                ,formId:'nls-form'
                ,frame: true
                ,defaults: { width: 280, xtype:'textfield', labelSeparator:'' }
                ,items:[ 
                     { id:'email', fieldLabel:'email*', name:'email' }
                    ,{ id:'firstname',fieldLabel:'firstname*', name:'firstname' }
                    ,{ id:'lastname',fieldLabel:'lastname*', name:'lastname' }
                    ,{ id:'jobtitle',fieldLabel:'job title*', name:'jobtitle' }
                    ,{ id:'company',fieldLabel:'company*', name:'company' }
                    ,{ id:'address1',fieldLabel:'street address*', name:'address1' }
                    ,{ id:'address2',fieldLabel:'street address 2', name:'address2' }
                    ,{ id:'address3',fieldLabel:'street address 3', name:'address3' }
                    ,{ id:'city', fieldLabel:'city*', name:'city' }
                    ,state_combo
                    ,country_combo
                    ,{ id:'postalcode', fieldLabel:'postal code*', name:'postalcode' }
                    ,{ id:'phone', fieldLabel:'phone*', name:'phone' }
                    ,{xtype:'panel',style:'padding-top:10px',width:400,height:90,html:'CSM Worldwide will not use your email address or information for any purpose other than distributing the CSM Insights newsletter and/or special invitations. <a href="http://www.csmauto.com/privacy">Privacy Policy</a>' }

            
                ]
                ,buttons: [
                    {
                     text: 'Send'
                    ,handler:function(){
                        form = Ext.getCmp('nls-form-panel').getForm();
                        form.submit( {
                            url:'/csminsights/json-subscribe',method:'POST'
                            ,success:function(form,action) {  
                                Ext.getCmp('nlsub-win').hide();
                                Ext.Msg.show({title: 'Email Sent', msg: action.result.reason, width:400, height:340,buttons:Ext.Msg.OK});
                             }
                            ,failure:function(form,action) {  
                                Ext.Msg.show({title: 'Errors', msg: action.result.reason, width:400, height:340,buttons:Ext.Msg.OK});
                            }
                            ,waitMsg:'Processing ...'
                        });
            
                    }
               }]
            });
           
            var nls_win = new Ext.Window({
                    id          : 'nlsub-win'
                    ,layout      : 'fit'
                    ,width       : 440
                    ,height      : 500
                    ,closeAction :'hide'
                    ,plain       : true
                    ,title: ' &nbsp;&nbsp; newsletter subscription '
                    ,items       : [nls_form]
           
            });
            
           
            nls_win.show();
      
       });

    });




});