/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

				Ext.QuickTips.init();

				// Nome
				var nome = new Ext.form.TextField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'Nome',
								name: 'nome',
								allowBlank: false,
								width: 150,
								maxLength: 150,
								minLength: 3,
								msgTarget: 'qtip'
				});

				// Info namespace
				Ext.namespace('Ext.info');

				Ext.info.tipo = [
								['Solicitação','Solicitação'],
								['Informação','Informação'],
								['Reclamação','Reclamação'],
								['Outro','Outro']
				];

    // Assunto
				var assunto = new Ext.form.TextField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'Assunto',
								name: 'assunto',
								allowBlank: false,
								maxLength: 100,
								minLength: 3,
								msgTarget: 'qtip',
								anchor: '45%'
				});

    // E-mail
				var email = new Ext.form.TextField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'E-mail',
								name: 'email',
								allowBlank: false,
								width: 250,
								maxLength: 255,
								minLength: 3,
								vtype: 'email',
								msgTarget: 'qtip',
								anchor: '45%'
				});

   // Texto
	  var texto = new Ext.form.TextArea({
							fieldLabel: 'Texto',
							hideLabel: true,
							name: 'texto',
							allowBlank:false,
							msgTarget: 'qtip',
							maxLength: 2000,
							height: 150,
							anchor: '45%'
   });

    // Telefones -------------------------------------------------

				// Tipo telefone
				Ext.namespace('Ext.telefone');

				Ext.telefone.tipo = [
        ['Residencial', 'Residencial'],
        ['Comercial', 'Comercial'],
        ['Fax', 'Fax'],
        ['Celular', 'Celular'],
								['Recado', 'Recado']
    ];

				// Telefone Tipo
				var tipo = new Ext.form.ComboBox({
								store: new Ext.data.SimpleStore({
												fields: ['id', 'titulo'],
												data : Ext.telefone.tipo
								}),
								labelStyle: 'font-size:100%;',
								fieldLabel: 'Tipo',
								hiddenId: 'telefone_tipo',
								hiddenName: 'tipo',
								allowBlank: false,
								msgTarget: 'qtip',
								valueField: 'id',
								displayField: 'titulo',
								typeAhead: false,
								editable: false,
								mode: 'local',
								triggerAction: 'all',
								emptyText: 'Escolha...',
								selectOnFocus: true,
								anchor: '98%'
				});
				
				// Telefone DDD
				var ddd = new Ext.form.NumberField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'DDD',
								name: 'ddd',
								allowBlank: false,
								allowNegative: false,
								allowDecimals: false,
								maxLength: 2,
								msgTarget: 'qtip',
								anchor: '98%'
					});

    // Telefone Número
				var numero = new Ext.form.NumberField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'Número',
								name: 'numero',
								allowBlank: false,
								allowNegative: false,
								allowDecimals: false,
								maxLength: 11,
								msgTarget: 'qtip',
								anchor: '99%'
					});

				 var ramal = new Ext.form.NumberField({
								labelStyle: 'font-size:100%;',
								fieldLabel: 'Ramal',
								name: 'ramal',
								allowBlank: true,
								allowNegative: false,
								allowDecimals: false,
								maxLength: 11,
								msgTarget: 'qtip',
								anchor: '100%'
					});

	   // Form ----------------------------------------------------
    var formPanel = new Ext.FormPanel({
								url: url + '/modulos/contato/contato.enviar.php',
								el: 'div-contato',
								width: 400,
								labelAlign: 'top',
								border: false,
								autoWidth: true,
								autoHeight: true,
								items: [
												nome,
												email,
												{
												layout: 'column',
												baseCls: 'x-plain',
												anchor: '50% 0%',
												items:[{
																columnWidth:.2,
																layout: 'form',
																border: false,
																anchor: '100% 100%',
																items: [tipo]
												},{
																columnWidth:.1,
																layout: 'form',
																border: false,
																anchor: '100% 100%',
																items: [ddd]
												},{
																columnWidth:.4,
																layout: 'form',
																border: false,
																anchor: '100% 100%',
																items: [numero]
												},{
																columnWidth:.2,
																layout: 'form',
																border: false,
																anchor: '100% 100%',
																items: [ramal]
												}]},
												assunto,
												texto
								],
								buttonAlign:'left',
								buttons: [{
												id: 'enviar',
												text: 'Enviar',
												handler: function() {
																// check form value 
																if (formPanel.form.isValid()) {
																				formPanel.form.submit({	
																								params: {PHPSESSID:sessionId, 'loja':lojaId},
																								waitTitle: 'Aguarde',
																								waitMsg: 'Enviando...',
																								failure: function(form, action) {
																												Ext.MessageBox.show({
																																title: 'Erro',
																																msg: action.result.msg.clientCode,
																																buttons: Ext.MessageBox.OK,
																																animEl: 'Botao',
																																icon: Ext.MessageBox.ERROR
																												});
																								},
																								success: function(form, action) {
																												Ext.MessageBox.show({
																																title: 'Informação',
																																msg: action.result.msg.clientCode,
																																buttons: Ext.MessageBox.OK,
																																animEl: 'Botao',
																																icon: Ext.MessageBox.INFO			
																												});	
																												formPanel.form.reset();
																								}
																					});                   
																		} else{
																					Ext.MessageBox.show({
																									title: 'Erro',
																									msg: '<b>Por favor, verifique os erros.</b>',
																									buttons: Ext.MessageBox.OK,
																									animEl: 'Botao',
																									icon: Ext.MessageBox.ERROR			
																					});
																		}             
														}
								}]
				});

				formPanel.render();
});