Xsn.AddressbookDialog = function(){
	this.init();
	this.addEvents({'transfer': true, 'groupschange': true});
}

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

	init: function(){
		var dlg = new Ext.LayoutDialog("addressbook-dlg", {
		        modal:true,
		        autoCreate: {
					id: 'addressbook-dlg',
					tag: 'div'
				},
				title: 'Adresboek',
		        width:950,
		        height:515,
		        shadow:true,
		        minWidth:600,
		        minHeight:350,
                closable:false,
                draggable:true,
                collapsible:false,
                animateTarget:null,
                resizable:false,						        
		        west: {
		            split:true,
		            initialSize: 210,
		            minSize: 100,
		            maxSize: 350,
		            titlebar: true,
		            collapsible: true,
		            animate: true
		        },
		        east: {
		            split:true,
		            initialSize: 260,
		            minSize: 100,
		            maxSize: 350,
		            titlebar: true,
		            collapsible: true,
		            autoScroll: true,
		            animate: true
		        },
		        center: {
		            titlebar: true,
		            autoScroll:false
		        }
		});
		dlg.addKeyListener(27, dlg.hide, dlg);
	 	this.addContactBtn = dlg.addButton('Toevoegen', this.transferContacts, this);
	 	this.addContactBtn.hide();
		dlg.addButton('Sluiten', dlg.hide, dlg);

		this.layout = dlg.getLayout();

		this.layout.beginUpdate();
		this.initGroupsTree();		
		this.initContactsGrid();
		this.initContactPropertyGrid();
		this.initInGroupsTree();		
		this.initTemplatesTree();
		this.layout.endUpdate();
		this.layout.getRegion('east').showPanel(0);
		this.dlg = dlg;
		this.mask = new Ext.LoadMask(Ext.get('addressbook-dlg'));

		this.importDlg = new Xsn.ImportDialog();
		this.exportDlg = new Xsn.ExportDialog();
		
		this.groupMutationDlg = new Xsn.GroupMutationDialog();

	},

	initContactsGrid : function(){
		var cm = new Ext.grid.DefaultColumnModel([
		   {header: "Naam", width: 200, 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=getContacts'}),
		    reader: new Ext.data.JsonReader({
		           root: 'contacts',
		           id: 'id',			               
		           totalProperty: 'totalcount'
		       }, Contact),
			remoteSort: true 			           
		});
		ds.setDefaultSort('naam', 'asc'); 	
		ds.baseParams = {'group': '0'};		

		ds.on('beforeload', function(){
			this.mask.msg = 'Bezig met het laden van de lijst...';
			this.mask.onBeforeLoad();
		}, this);

		ds.on('load', function(st, rs, opts){
			if (!grid.getSelectionModel().hasSelection()) this.clearContactInfo();
			var tc = ds.getTotalCount();
			var c = ds.getCount();
			this.dlg.getLayout().getRegion('center').getActivePanel().setTitle('Contactpersonen' + (tc > 0 ? ': ' + (opts.params.start + 1) + ' - ' + (opts.params.start + c) + ' van ' + tc : ''));			
			this.mask.onLoad();
		}, this);
		
		var container = this.layout.getEl().createChild({tag:'div'});				
		var grid = new Ext.grid.Grid(container, {
		    ds: ds,
		    cm: cm,
		    selModel: new Ext.grid.RowSelectionModel(),
		    enableColLock:false
		});
		grid.getSelectionModel().on('rowselect', this.loadContactInfo, this);
		grid.getSelectionModel().on('rowdeselect', this.clearContactInfo, this);
		grid.render();

		var gridFoot = grid.getView().getFooterPanel(true);
		var tb = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 17});
		tb.addSeparator();
						
		this.txtFilter = Ext.DomHelper.append(container.dom, {tag:'input', type:'text', size:'15'}, true);
		this.txtFilter.on('keyup', function(){
			this.loadContacts();
		}, this, {buffer:100});
		
		tb.add('Zoeken:', this.txtFilter.dom);

		var gridHead = grid.getView().getHeaderPanel(true);
		var tb = new Ext.Toolbar(gridHead);

		if (Xsn.settings['import']){
			tb.addButton({
			    cls: 'x-btn-text-icon import-btn',
			    text: "Import",
			    tooltip: 'Contactpersonen importeren',
			    handler: function(){
					this.importDlg.show(this.onImportContacts.createDelegate(this), this.groupsTree.getSelectionModel().getSelectedNode());	
				},
			    scope:this
			});
		}

		if (Xsn.settings['export']){
			tb.addButton({
			    cls: 'x-btn-text-icon export-btn',
			    text: "Export",
			    tooltip: 'Contactpersonen exporteren',
			    handler: function(){
					this.exportDlg.show(this.onExportContacts.createDelegate(this), this.groupsTree.getSelectionModel().getSelectedNode());	
				},
			    scope:this
			});
		}
		
		if (Xsn.settings['import'] || Xsn.settings['export']) tb.addSeparator();

		tb.addButton({
		    cls: 'x-btn-text-icon add-btn',
		    text: "Nieuw",
		    tooltip: 'Een nieuwe contactpersoon aanmaken',
		    handler: function(){
		     	if (!this.contactDialog) {
					this.contactDialog = new Xsn.FormDialog({width:300, height:150, title: 'Nieuwe contactpersoon aanmaken', okButtonText:'Toevoegen', cancelButtonText:'Sluiten'});
					this.contactDialog.setForm(new Xsn.ContactDialogForm());
				}
				var node = this.groupsTree.getSelectionModel().getSelectedNode() || this.groupsTree.root;				
				this.contactDialog.getDialogForm().setBaseParams({group_id:node.id.substring(4)});				
				this.contactDialog.show(function(vals){
				 	Ext.Ajax.request({url:'index.php?action=addContact&' + Ext.urlEncode(vals), scope:this, success: function(r,o){
						this.loadContacts();								
					}});
				}.createDelegate(this));
			},
		    scope:this
		});
	
		tb.addButton({cls: 'x-btn-text-icon del-btn', 
			tooltip: 'De geselecteerde contactpersonen verwijderen.',
			text: 'Verwijderen',
			handler: function(){
			 	if (grid.getSelectionModel().hasSelection()){
				 	var records = grid.getSelectionModel().getSelections();			 	 
					var ids = ''; 
					for (var x=0;x<records.length;x++){
					 	ids += (ids == '' ? records[x].id : ',' + records[x].id); 
					}
				 	Ext.MessageBox.confirm('Contactpersoon verwijderen', 'Weet u zeker dat u de geselecteerde ' + (records.length > 1 ? 'contactpersonen' : 'contactpersoon') + ' wilt verwijderen ?', function(btn){
						if (btn == 'yes'){
						 	Ext.Ajax.request({url:'index.php?action=removeContacts&ids=' + ids, scope:this, success: function(r,o){
								this.loadContacts();						
							}});         													                    
						}
					}, this);
				}
			}
		, scope:this});		

		this.layout.add('center', new Ext.GridPanel(grid, {title: 'Contactpersonen', fitToFrame: false}));
		this.contactsGrid = grid;
	
	},

	initContactPropertyGrid : function(){
		var cm = new Ext.grid.DefaultColumnModel([
		      {header: "Veld", width: 100, dataIndex: 'veld'},
		      {header: "Waarde", width: 100, dataIndex: 'waarde', editor: new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank: true}))}
		]);
		cm.defaultSortable = true;
		
		var Field = Ext.data.Record.create([
	       {name: 'id'},    
	       {name: 'veld', type: 'string'},
	       {name: 'waarde', type: 'string'}
		]);
		
		var ds = new Ext.data.Store({
		    proxy: new Ext.data.HttpProxy({url: 'index.php?action=getContactInfo'}),
		    reader: new Ext.data.JsonReader({
		           root: 'fields',
		           id: ' id',			               
		           totalProperty: 'totalcount'
		       }, Field),
			remoteSort: true 			           
		});
		ds.setDefaultSort('veld', 'asc'); 		    
				
		container = this.layout.getEl().createChild({tag:'div'});		
		var grid = new Ext.grid.EditorGrid(container, {
		    ds: ds,
		    cm: cm,
		    loadMask: true,
		    selModel: new Ext.grid.CellSelectionModel(),
		    enableColumnMove:false,
		    autoSizeColumns:true,
		    enableColLock:false					    
		});
		grid.render();

		grid.on('cellclick', function(grid, rowIndex, colIndex, e){
			if (!this.editToggle.pressed) grid.getColumnModel().isCellEditable = function(colIndex, rowIndex){return false;};					 
			else grid.getColumnModel().isCellEditable = function(colIndex, rowIndex){return (colIndex == 1);};					 
		},this);

		grid.on('afteredit', function (e){
		 	var id = this.contactsGrid.getSelectionModel().getSelected().get('id');
		 	Ext.Ajax.request({url:'index.php?action=updateContactInfo&contactpersoon_id=' + id + '&veld=' + e.record.get('id') + '&waarde=' + encodeURIComponent(e.value), scope:this, success: function(r,o){
				this.loadContacts();
			}});
		},this);

		var gridHead = grid.getView().getHeaderPanel(true);
		var tb = new Ext.Toolbar(gridHead);

		this.editToggle = tb.addButton({text: 'Gegevens bewerken: uitgeschakeld',
	        enableToggle: true,
    	    toggleHandler: function(item, pressed){
				if (pressed) item.setText('Gegevens bewerken: ingeschakeld');
				else item.setText('Gegevens bewerken: uitgeschakeld');
			},
			cls: 'x-btn-text-icon toggle-edit-btn',
        	pressed: false,
        	tooltip: 'De mogelijkheid om contactgegevens te bewerken aan/uit zetten.'
	    });

		this.layout.add('east', new Ext.GridPanel(grid, {title: 'Details', fitToFrame: false}));
		this.propertyGrid = grid;
	},

	initGroupsTree : function(){
		var groupsPanel = this.layout.getEl().createChild({tag:'div', id:'addressbook-dlg-groups'});
		var tbPanel = groupsPanel.createChild({tag:'div', id:'addressbook-dlg-groups-tb'});
		var treePanel = groupsPanel.createChild({tag:'div', id:'addressbook-dlg-groups-tree'});
	                    
		var tree = new Ext.tree.TreePanel(treePanel, {
		    animate:true, 
		    loader: new Ext.tree.TreeLoader({dataUrl:'index.php?action=getGroupsNodes'}),
		    enableDD:false,
			ddGroup: 'abgrp',
		    rootVisible:true,                
		    containerScroll: true
		});
		
		var root = new Ext.tree.AsyncTreeNode({
		    text: 'Alle contactpersonen', 
		    draggable:false, 
		    cls: 'folder',
		    id:'grp-0',
		    expanded:true
		});
		tree.setRootNode(root);

		tree.on('beforeload', function(){
			tree.getEl().mask('Bezig met laden...');
		}, this);

		tree.on('load', function(){
			tree.getSelectionModel().select(root);
			tree.getEl().unmask();
		},this);

        var editor = new Ext.tree.TreeEditor(tree, {allowBlank: false});

		editor.on('beforestartedit', function(ed, node, val){
			return (tree.getRootNode().ui.textNode.id != node.id);
		}, this);

        editor.on('complete', function(ed, val){
			//var node = tree.getSelectionModel().getSelectedNode();
			var node = ed.editNode;
			if (val != ''){
			 	Ext.Ajax.request({url:'index.php?action=renameGroupsNode&id=' + node.id + '&naam=' + val, scope:this, success: function(r,o){
					this.fireEvent('groupschange', this);
					if (this.contactsGrid.getSelectionModel().getSelected()) this.inGroupsTree.root.reload();
				}});
			}
		},this);
        
		tree.on('beforenodedrop', function(e){
			if ((e.point == 'above' || e.point == 'below') && e.dropNode.parentNode.id != e.target.parentNode.id) Ext.Ajax.request({url: 'index.php?action=setGroupsNodeParent&parent_id=' + e.target.parentNode.id + '&id=' + e.dropNode.id, scope:this, success: function(r,o){
				this.fireEvent('groupschange', this);						
				this.inGroupsTree.root.reload();				
				//this.loadContacts(e.dropNode);
			}});
		 	else if (e.point == 'append' && e.dropNode.parentNode.id != e.target.id) Ext.Ajax.request({url:'index.php?action=setGroupsNodeParent&parent_id=' + e.target.id + '&id=' + e.dropNode.id, scope:this, success: function(r,o){
				this.fireEvent('groupschange', this);
				this.inGroupsTree.root.reload();										
				//this.loadContacts(e.dropNode);				
			}});
	 		else return false;
		}, this);
                
        tree.getSelectionModel().on('selectionchange', function(sm, node){
		    //this.contactsGrid.getSelectionModel().clearSelections();    	
			if (node && node.isSelected()) this.loadContacts(node);
        }, this);

		tree.render();
    
		var tb = new Ext.Toolbar(tbPanel);

    	if (Xsn.settings.groepaanmaken){
			tb.addButton({
	            cls: 'x-btn-icon add-btn',
	            handler: function(){
	             	var parent = tree.getSelectionModel().getSelectedNode();
					var addGroup = function(r,o){
					 	eval(r.responseText);
	
						this.fireEvent('groupschange', this);						
	                    var node = parent.appendChild(new Ext.tree.AsyncTreeNode({
	                        text:'Nieuwe groep',
							id: id,
							cls: 'file',
							expanded: true
	                    }));
	                    node.parentNode.expand();
	                
	                    setTimeout(function(){
							editor.triggerEdit(node);
	                    }.createDelegate(this), 10);
					}
					if (parent.id != 'grp--1') Ext.Ajax.request({url:'index.php?action=addGroupsNode&parent_id=' + parent.id + '&naam=Nieuwe groep', scope:this, success: addGroup});         													                    
	            },
	            scope: this,
	            tooltip: 'Een nieuwe groep aanmaken.'
	        });				
		}

		tb.addButton({cls: 'x-btn-icon edit-btn', handler: function(){
		 	var node = tree.getSelectionModel().getSelectedNode();
		 	if (node.id != 'grp--1' && node.id != 'grp--2') editor.triggerEdit(node);
		}, scope:this, tooltip: 'De naam van de geselecteerde groep wijzigen.'});                
		tb.addSeparator();

		tb.addButton({cls: 'x-btn-icon group-mutate-btn', handler: function(){
		 	var node = tree.getSelectionModel().getSelectedNode();
			if (node) this.groupMutationDlg.show(node);
		}, scope:this, tooltip: 'Groep mutaties uitvoeren.'});  
		
		
		tb.addButton({cls: 'x-btn-icon del-btn', 
			handler: function(){
				var node = tree.getSelectionModel().getSelectedNode();
				if (node.parentNode && node.id != 'grp--1' && node.id != 'grp--2'){
					if (!node.firstChild){
					 	if (!this.deleteGroupDialog){
							this.deleteGroupDialog = new Xsn.FormDialog({width:550, height:235, title: 'Wat wilt u doen?'});
							this.deleteGroupDialog.setForm(new Xsn.GroupDialogForm());
						}
						//this.contactDialog.getDialogForm().setBaseParams({group_id:node.id.substring(4)});				
						var deleteGroup = function(vals){
							var node = tree.getSelectionModel().getSelectedNode();
							var n = node.previousSibling || node.parentNode;
						 	n.select();						 	
						 	node.parentNode.removeChild(node);

							var selRadio = this.deleteGroupDialog.getEl().child('input[type=radio]:checked');							 	
				            Ext.Ajax.request({url:'index.php?action=removeGroupsNode&id=' + node.id.substring(4) + '&radio=' + selRadio.dom.value, scope:this, success: function(r,o){
								this.fireEvent('groupschange', this);						
							}});
						}
						this.deleteGroupDialog.show(deleteGroup.createDelegate(this));						 
					} else {
						Ext.MessageBox.alert('Groep verwijderen', 'Deze groep heeft een of meerdere subgroepen en kan derhalve niet worden verwijderd.');
					}
				}
			}
		, scope:this, tooltip: 'De geselecteerde groep verwijderen.'});
		
		this.layout.add('west', new Ext.ContentPanel(groupsPanel, {title: 'Groepen', toolbar: tb, tree: tree, resizeEl: treePanel, autoScroll:true, fitToFrame: true}));
		this.groupsTree = tree;	
			
	},

	initInGroupsTree : function(){
		var panel = this.layout.getEl().createChild({tag:'div', id:'addressbook-dlg-ingroups'});
		
		var tbPanel = panel.createChild({tag:'div', id:'addressbook-dlg-ingroups-tb'});
		var treePanel = panel.createChild({tag:'div', id:'addressbook-dlg-ingroups-tree'});
		var commentPanel = panel.createChild({tag:'div', style:'padding:5px;font-size:10px',id:'addressbook-dlg-ingroups-comment'});
    
		var tree = new Ext.tree.CheckTreePanel(treePanel, {
		    animate:false, 
		    loader: new Ext.tree.CheckTreeLoader({dataUrl:'index.php?action=getContactGroupsNodes'}),
		    enableDD:false,
		    rootVisible:false,                
		    containerScroll: true
		});
		
		var root = new Ext.tree.CheckTreeNode({
		    text: 'Alle contactpersonen', 
		    draggable:false,
		    cls: 'folder',
		    id:'grp-0',
		    expanded: true,
		    uiProvider: Ext.tree.CheckTreeNodeUI
		});
		tree.setRootNode(root);
		
		tree.on('beforeload', function(){
			panel.mask('Bezig met laden...');
		}, this);

		tree.on('load', function(){
			panel.unmask();
		},this);

		var tb = new Ext.Toolbar(tbPanel);
		tb.addButton({
            cls: 'x-btn-text-icon refresh-btn',
            text:'Gegevens tonen',
            handler: function(){
				var record = this.contactsGrid.getSelectionModel().getSelected();	
				if (record){
					this.commentPanel.hide();
					var ldr = this.inGroupsTree.getLoader();
					ldr.baseParams = {'contactpersoon_id': record.id};
					this.inGroupsTree.root.reload();
				}             
            },
            scope: this,
            tooltip: 'Gegevens tonen.'
        });				

		tree.render();				

		var sm = tree.getSelectionModel();
		sm.select = sm.select.createInterceptor(function(node){
		    return node.attributes.selectable !== false;
		});

        tree.on('check', function(node, checked){
			var grps = node.getSerializedNodeChecks();	            	
        	var id = this.contactsGrid.getSelectionModel().getSelected().id;
	        Ext.Ajax.request({url:'index.php?action=updateContactGroups&contactpersoon_id=' + id + '&grps=' + grps});         							 	             	
        }, this);

		this.layout.add('east', new Ext.ContentPanel(panel, {tree:tree, title: 'In groepen', fitToFrame: true}));
		this.inGroupsTree = tree;	
		
		commentPanel.dom.innerHTML = 'Klik op de knop \'Gegevens tonen\' om de data van de geselecteerde contactpersoon weer te geven.';	
		this.commentPanel = commentPanel;
	},

	initTemplatesTree : function(){
		var panel = this.layout.getEl().createChild({tag:'div', id:'addressbook-dlg-templates'});
		var tree = new Ext.tree.CheckTreePanel(panel, {
		    animate:false, 
		    loader: new Ext.tree.CheckTreeLoader({dataUrl:'index.php?action=getContactTemplatesNodes'}),
		    enableDD:false,
		    rootVisible:false,                
		    containerScroll: true
		});
		
		var root = new Ext.tree.CheckTreeNode({
		    text: 'Alle templates', 
		    draggable:false, 
		    cls: 'folder',
		    id:'grp-0',
		    expanded: true,
		    uiProvider: Ext.tree.CheckTreeNodeUI,
		    checkProtection: true		    
		});
		tree.setRootNode(root);
		tree.on('beforeload', function(){
			tree.getEl().mask('Bezig met laden...');
		}, this);

		tree.on('load', function(){
			tree.getEl().unmask();
		},this);		
		
		tree.render();

		var sm = tree.getSelectionModel();
		sm.select = sm.select.createInterceptor(function(node){
		    return node.attributes.selectable !== false;
		});

        tree.on('check', function(node, checked){
        	var grps = node.getSerializedNodeChecks();
        	var id = this.contactsGrid.getSelectionModel().getSelected().id;
	        Ext.Ajax.request({url:'index.php?action=updateContactTemplates&contactpersoon_id=' + id + '&grps=' + grps});         							 	             	
        }, this);

		this.layout.add('east', new Ext.ContentPanel(panel, {tree:tree, title: 'Afgemeld voor', fitToFrame: true}));
		this.templatesTree = tree;		
	},

	show : function(showAddContactButton){
		if(showAddContactButton) {
			this.addContactBtn.show();    	 
			this.layout.getRegion('east').collapse(true);
		} else {
			this.layout.getRegion('east').expand(null,true);		 
			this.addContactBtn.hide();    	 
		}
		//this.refresh();
        this.dlg.show();
    },
    
    refresh : function(){
     	this.groupsTree.getSelectionModel().clearSelections();
		this.groupsTree.root.reload();
	},
    
    hide : function(){
		this.dlg.hide();	
	},

    loadContactInfo : function (sm, rowIndex, record){
	 	
		this.clearContactInfo();
        var ds = this.propertyGrid.getDataSource();
		ds.baseParams = {contactpersoon_id : record.id};
		ds.load();

		var ldr = this.templatesTree.getLoader();
		ldr.baseParams = {'contactpersoon_id': record.id};
		this.templatesTree.root.reload();
        
	},
	
	clearContactInfo : function (sm, row){
		this.propertyGrid.getDataSource().removeAll();

		while(this.inGroupsTree.root.firstChild){
		     this.inGroupsTree.root.removeChild(this.inGroupsTree.root.firstChild);
		}

		while(this.templatesTree.root.firstChild){
		     this.templatesTree.root.removeChild(this.templatesTree.root.firstChild);
		}	
		
		this.commentPanel.show();						
    },

    loadContacts : function(node){
     	if (!node) var node = this.groupsTree.getSelectionModel().getSelectedNode();
	    var ds  = this.contactsGrid.getDataSource();
		ds.baseParams = {'group': node.id.substr(4), 'filter-col': 'naam', 'filter-val': this.txtFilter.dom.value};
		ds.load({params:{start:0, limit:17}});
	},

	onImportContacts : function(parent, id){
		this.importDlg.hide();
		if (id > 0){
			var node = this.groupsTree.getNodeById(parent);
			node.attributes.children = null;			
			node.on('expand', function(){
				var importNode = this.groupsTree.getSelectionModel().select(this.groupsTree.getNodeById('grp-' + id));
				this.loadContacts(importNode);		
				node.un('expand', this);
			}, this);
			node.reload();
		}
	},

	onExportContacts : function(value, grp){
	    window.open('index.php?action=export&exportType=' + value + '&exportGroup=' + grp.id);
		this.exportDlg.hide();
	},
	
	transferContacts : function(){
		var records = this.contactsGrid.getSelectionModel().getSelections();			
		this.fireEvent('transfer', records);
	}

	
});