Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'qtip';

    var stoAssunto = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({ url: '../GetData/ListarTipoAssunto' }),
        reader: new Ext.data.JsonReader({}, ['id_tp_assunto', 'assunto']),
        baseParams: {
            listarTpAssunto: true
        },
        remoteSort: true
    });
    
    stoAssunto.load();
    
   var cmbAssunto = new Ext.form.ComboBox({
        id: 'cmbAssunto',
        store: stoAssunto,
        fieldLabel: '* Assunto',
        displayField: 'assunto',
        valueField: 'id_tp_assunto',
        typeAhead: true,
        mode: 'local',
        width: 530,
        listWidth: 400,
        forceSelection: true,
        selectOnFocus: true,
        lazyRender: true,
        listClass: 'ajusta_lista',
        triggerAction : 'all',
        emptyText: 'Selecione um assunto',
        tabIndex: 15,
        labelStyle: 'text-align:right;'
    });
    
     var txtNome = new Ext.form.TextField({
        id: 'txtNome',
        fieldLabel: '* Nome',
        allowBlank: false,
        width: 530,
        tabIndex: 16,
        labelStyle: 'text-align:right;'
     });
    
     var txtemail = new Ext.form.TextField({
        id: 'txtEmail',
        fieldLabel: '* E-mail',
        vtype: 'email',
        allowBlank: false,
        width: 530,
        tabIndex: 17,
        labelStyle: 'text-align:right;'
    });
  
    var cmbCliente = new Ext.form.ComboBox({
        id: 'cmbCliente',
        fieldLabel: '* Já é Cliente?',
        labelStyle: 'text-align:right;',
        mode: 'local',
        tabIndex: 21,
        allowBlank: false,
        displayValue: 'text',
        selectValue : 'value',
        width: 70,
        store: [
                    ['N', 'NÃO'],
                    ['S', 'SIM']
                ],
        typeAhead: true,
        forceSelection: true,
        triggerAction: 'all'
        
    });
    
    var txtCPFGer = new Ext.form.TextCPFCNPJ({
	    id : 'txtCPFGer',
	    vtype: 'cpf',
	    visible: false,
	    tabIndex: 23,
	    fieldLabel: '',
	    visible: false,
	    labelStyle: 'text-align:right',
	    width: 150
	});
    
    var cmbPessoa = new Ext.form.ComboBox({
        id: 'cmbPessoa',
        visible: false,
        fieldLabel: '',
        labelStyle: 'text-align:right;',
        typeAhead: true,
        mode: 'local',
        displayValue: 'text',
        selectValue : 'value',
        width: 100,
        store: [
                    ['F', 'FÍSICA'],
                    ['J', 'JURÍDICA']
                ],
        forceSelection: true,
        tabIndex: 22,
        triggerAction: 'all'
    });
    
    cmbCliente.setValue('N');
    cmbPessoa.setVisible(false);
    txtCPFGer.setVisible(false);
    
    cmbPessoa.on('select', function(a, b, c) {
        txtCPFGer.setValue('');
        txtCPFGer.vtype = (b.data.field1 == 'J') ? 'cnpj' : 'cpf';
        txtCPFGer.validate();
        
        if (b.data.field1 == 'J') {
            txtCPFGer.setFieldLabel('* CNPJ:');
            txtCPFGer.setVisible(true);
        } else {
            txtCPFGer.setFieldLabel('* CPF:');
            txtCPFGer.setVisible(true);
        }
    });
    
    cmbCliente.on('select', function(a, b, c) {
        if (b.data.field1 == 'S') {
            cmbPessoa.setVisible(true);
            txtCPFGer.setVisible(true);
            cmbPessoa.setFieldLabel('* Pessoa');
            txtCPFGer.setFieldLabel('* CPF');
            cmbPessoa.setValue('F');
            cmbCliente.setValue('S');
            
        } else {
            cmbPessoa.setVisible(false);
            txtCPFGer.setVisible(false);
            cmbPessoa.setValue('');
            txtCPFGer.setValue('');
            cmbPessoa.setFieldLabel('');
            txtCPFGer.setFieldLabel('');
            cmbCliente.setValue('N');
        }
    });
    
    var txtTelefone = new Ext.form.TextField({
        id: 'txtTelefone',
        fieldLabel: '* Telefone',
        width: 210,
        allowBlank: false,
        tabIndex: 19,
        labelStyle: 'text-align:right;',
        maskRe: /[0-9]/,
        maxLength: 14,
        minLength: 14,
        minLengthText: 'Formato correto para este campo é: (00) 0000-0000',
        maxLengthText: 'Formato correto para este campo é: (00) 0000-0000',
        enableKeyEvents: true,
        listeners: {
            'keydown': {
                fn: function(a, b) {
                    var v = a.getValue();
                    if (v == null || v == undefined || v == '') {
                        return;
                    }
                    v = v.replace(/\D/g, '');
                    v = v.replace(/^(\d\d)(\d)/g, '($1) $2');
                    v = v.replace(/(\d{4})(\d)/, '$1-$2');
                    this.setValue(v);
                }
            }
        }
    });
    
    var txtCelular = new Ext.form.TextField({
        id: 'txtCelular',
        fieldLabel: 'Celular',
        width: 210,
        tabIndex: 20,
        labelStyle: 'text-align:right;',
        maskRe: /[0-9]/,
        maxLength: 14,
        minLength: 14,
        minLengthText: 'Formato correto para este campo é: (00) 0000-0000',
        maxLengthText: 'Formato correto para este campo é: (00) 0000-0000',
        enableKeyEvents: true,
        listeners: {
            'keydown': {
                fn: function(a, b) {
                    var v = a.getValue();
                    if (v == null || v == undefined || v == '') {
                        return;
                    }
                    v = v.replace(/\D/g, '');
                    v = v.replace(/^(\d\d)(\d)/g, '($1) $2');
                    v = v.replace(/(\d{4})(\d)/, '$1-$2');
                    this.setValue(v);
                }
            }
        }
    });
    
    var txtArea = new Ext.form.TextArea({
        id: 'txaMensagem',
        fieldLabel: '* Mensagem',
        allowBlank: false,
        width: 530,
        height: 300,
        tabIndex: 24,
        labelStyle: 'text-align:right;'
    });

    
     var FormContato = new Ext.form.FormPanel({
        id: 'FormContato',
        labelWidth: 100,
        width: 650,
        border: false,
        layoutConfig: {columns: 2},
        defaults: { border: false},
        frame: false,
        renderTo: 'form_contato',
        bodyStyle: 'background-color:transparent;',
        items: [
//            new Ext.Panel({
//                layout: 'table',
//                layoutConfig: {columns: 2},
//                border: false,
//                defaults: { border: false},
//                items: [
                    { layout: 'form', items: [cmbAssunto], colspan: 2 },
                    { layout: 'form', items: [txtNome], colspan: 2 },
                    { layout: 'form', items: [txtemail], colspan: 2 },
                    { layout: 'form', items: [txtTelefone], colspan: 1 },
                    { layout: 'form', items: [txtCelular], colspan: 1 },
                    { layout: 'form',
                       items: [
                            new Ext.Panel({
                                layout: 'table',
                                border: false,
                                defaults: { border: false},
                                layoutConfig: {columns: 3},
                                items: [
                                    { layout: 'form', items: [cmbCliente], colspan: 1},
                                    { layout: 'form', items: [cmbPessoa], colspan: 1 },
                                    { layout: 'form', items: [txtCPFGer], colspan: 1 }
                                ]
                            })
                        ],
                        colspan: 3
                    },
                   { layout: 'form', items: [txtArea], colspan: 2 }
//                ]
//            }),
        ]
    });
    
    new Ext.ImageButton({
        id: 'limparContato',
        renderTo: 'btn_limpar',
        text: 'Limpar',
        imgPath: '../img/btn_limpar_campos.gif',
        tooltip: 'Limpar',
        tabIndex: 26,
        handler: function() {
            FormContato.getForm().reset();
        }
    });
    new Ext.ImageButton({
        id: 'enviarContato',
        renderTo: 'btn_enviar',
        text: 'Enviar',
        imgPath: '../img/btn_enviar_dados.gif',
        tooltip: 'Enviar',
        tabIndex: 25,
        handler: function() {
            FormContato.getForm().submit({
                url: '../FaleConosco',
                params: { envia_email: true },
                method: 'POST',
                waitTitle: 'Aguarde..',
                waitMsg: 'Enviando informações...',
                success: function() {
                    Ext.Msg.alert('Status', 'Mensagem Enviada com sucesso!', function(btn, text) {
                        if (btn == 'ok') {
                            FormContato.getForm().reset();
                            cmbPessoa.setVisible(false);
                            txtCPFGer.setVisible(false);
                            cmbPessoa.setFieldLabel('');
                            txtCPFGer.setFieldLabel('');
                        }
                    });
                },
                failure: function(form, action) {
                    if (action.failureType == 'server') {
                        obj = Ext.util.JSON.decode(action.response.responseText);
                        Ext.Msg.alert('Não foi posssivel enviar o e-mail!', obj.errors.reason);
                        FormContato.getForm().reset();
                    }
                }
            });
        }
    });
});