Xsn.ImportVerificationDialog = function(config) {
    Ext.apply(this, config);
    this.init();
} 

Ext.extend(Xsn.ImportVerificationDialog, Ext.util.Observable, {

	init : function(){
		dlg = new Ext.LayoutDialog(Ext.id(), { 
                autoTabs:true,
                modal:true,
                autoCreate: true,
                closable:false,
                draggable:true,
                collapsible:false,
                resizable:false,                
                animateTarget:null,                
                title: 'Import verificatie',
                width:650,
                height:325,
                resizable:false,
                shadow:true,
                north: {
					initialSize: 30,
					titlebar:false,
					autoScroll:false
				},
                west: {
					titlebar: true,
					autoScroll: false,
					initialSize: 180, 
					collapsible: true,
					cmargins: {top:0, right:3, bottom:0, left:0},
					margins: {top:0, right:3, bottom:0, left:0}															
				},
                center: {
					titlebar:false,
					autoScroll:false
				}
        });
        dlg.addKeyListener(27, dlg.hide, dlg);
        dlg.addButton('Ok', this.importContacts, this);	            
        dlg.addButton('Annuleer', dlg.hide, dlg);
        this.dlg = dlg;

		var layout = dlg.getLayout();

		var cm = new Ext.grid.DefaultColumnModel([
		   {header: "Naam", width: 180, dataIndex:'naam'},
		   {header: "Email", width: 220, dataIndex:'email'}
		]);
		cm.defaultSortable = true;
				
		var Contact = Ext.data.Record.create([
	       {name: 'id'},    
	       {name: 'naam', type: 'string'},
	       {name: 'email', type: 'string'}			   		       
		]);
		
		var ds = new Ext.data.Store({
		    proxy: new Ext.data.HttpProxy({url: 'index.php?action=getImportVerificationContacts'}),
		    reader: new Ext.data.JsonReader({
		           id: ' id',			               
		           totalCount: 'TotalCount'
		       }, Contact),
			remoteSort: false 			           
		});
		ds.setDefaultSort('naam', 'asc'); 	
		ds.baseParams = {'group': '0'};		
		
		var container = layout.getEl().createChild({tag:'div'});				
		var grid = new Ext.grid.Grid(container, {
		    ds: ds,
		    cm: cm,
		    selModel: new Ext.grid.RowSelectionModel(),
		    enableColLock:false
		});
		grid.render();

		grid.getSelectionModel().lock();

		var formContainer = layout.getEl().createChild({tag:'div', id: 'import-verification-form'});				
		var form = new Ext.form.Form({
			labelAlign:'top',
			url: 'index.php?action=updateImportSettings'
		});
		
    	form.add(
		    new Ext.form.ComboBox({
		        store: new Ext.data.SimpleStore({
			        fields: ['naam', 'value'],			   
			        data : []
			    }),
		        typeAhead: true,
		        displayField: 'naam',
		        valueField: 'value',
		        fieldLabel: '\'Naam\' kolom',
		        mode: 'local',
		        name: 'naam',
		        triggerAction: 'all',
		        emptyText:'Selecteer een kolom...',
		        selectOnFocus:true,
		        forceSelection:true,
		        allowBlank:false		        
		    }),
			new Ext.form.ComboBox({
		        store: new Ext.data.SimpleStore({
			        fields: ['email', 'value'],
			        data : []
			    }),
		        typeAhead: true,
		        displayField: 'email',
		        valueField: 'value',		        
		        fieldLabel: '\'Email\' kolom',
		        mode: 'local',
		        name: 'email',
		        triggerAction: 'all',
		        forceSelection: true,
		        allowBlank: false,
		        emptyText: 'Selecteer een kolom...',
		        selectOnFocus:true
		    }),
			new Ext.form.Checkbox({
	            boxLabel:'CSV file bevat kolom definitie',
	            name:'has_header',
				labelWidth: 0,
				labelSeparator: '&nbsp',	            
	            dataIndex: 'has_header',
	            fieldLabel: '',
	            itemCls: 'x-form-item-hide-label'
	        })		    
	    );
	    form.end();
	    form.applyIfToFields({
	        width:150
	    });
	    form.render(formContainer);	
	    
		form.findField('naam').on('select', function(){
			form.submit({reset:false});				
		}, this);	    
	    
		form.findField('email').on('select', function(){
			form.submit({reset:false});				
		}, this);	    
	    
		form.findField('has_header').on('check', function(){
			form.submit({reset:false});			
		},this);
	    
	    form.on('actioncomplete', function(f, a){
			this.grid.getDataSource().reload();
		}, this);
	    
		this.form = form;
	
		var label = dlg.getLayout().getEl().createChild();		
		label.createChild({style:'padding:5px;background-color:#d6dff7;margin:1px 1px 0 1px;border-bottom:1px solid #adbed6'}).dom.innerHTML = 'Weet u zeker dat u de contactpersonen op onderstaande wijze wilt importeren ?';
		
		layout.add('north', new Ext.ContentPanel(label, {fitToFrame:true}));
		layout.add('west', new Ext.ContentPanel(formContainer, {fitToFrame:true, title:'Kolomkeuze'}));
		layout.add('center', new Ext.GridPanel(grid, {title: 'Contactpersonen', fitToFrame: false}));
		layout.getRegion('north').getEl().setStyle('border-bottom', '1px solid white');
		
		this.grid = grid;	
	},

	importContacts : function(){
	 	Ext.MessageBox.confirm('Contactpersonen importeren', 'De te importeren personen worden geplaatst in de groep \'' + this.parent.text + '\'. Weet u het zeker?', function(btn){
			if (btn == 'yes'){
			 	Ext.Ajax.request({url:'index.php?action=importContacts&group_id=' + this.parent.id, scope:this, success: function(r,o){
		 	 		var ret = eval('(' + r.responseText + ')');
		 	 		Ext.MessageBox.alert('Contactpersonen importeren', ret.msg, function(){
			 	 		this.callback(ret.id);				
					}, this);
				}});         					
			}
		}, this);
	},

	initForm : function(config){
	 	this.form.findField('naam').store.proxy.data = config.data;
	 	this.form.findField('naam').store.load();	 	
 		this.form.findField('email').store.proxy.data = config.data;
	 	this.form.findField('email').store.load();	 	
		this.form.setValues(config.values);
	},
	
	show : function(callback, parent, config){
		this.callback = callback;
		this.parent = parent;
		this.initForm(config);
		this.grid.getDataSource().load();
		this.dlg.show();						
	},
	
	hide : function(){
		this.dlg.hide();
	}

});