Xsn.MailDialog = function(){
	this.init();
	this.addEvents({'send': true, 'addcontact': true});
}

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

	init :  function(){
		dlg = new Ext.LayoutDialog("mail-dlg", {
	        modal:true,
	        autoCreate: true,
			title: 'Nieuwsbrief verzenden',
	        width:950,
	        height:500,
	        shadow:true,
            closable:false,
            draggable:true,
            collapsible:false,
            animateTarget:null,
            resizable:false,				                
	        minWidth:300,
	        minHeight:300,
	        west: {
	         	useShim:true,
	         	split:true,
	         	minSize:100,
	         	maxSize:250,
	         	initialSize:175,			         	
				titlebar: true,
				autoScroll:false
			},
	        center: {
	         	useShim:true,			         
	            titlebar: true,
	            autoScroll:true
	        }, 
			east: {
	         	useShim:true,	
				split:true,		         
	            titlebar: true,
	            autoScroll:false, 
				initialSize: 435,
				minSize:200,
				maxSize:500					 
			}
		});
		dlg.addKeyListener(27, dlg.hide, dlg);
		dlg.addButton('Verzenden', this.sendMailing, this);				
		dlg.addButton('Sluiten', dlg.hide, dlg);
	
		var layout = dlg.getLayout();		
										                    								
		var groupsPanel = layout.getEl().createChild({tag: 'div', id: 'mail-groups'});								                    				
		var treePanel = groupsPanel.createChild({tag: 'div', id: 'mail-groups-tree'});								                    				
		var tbPanel = groupsPanel.createChild({tag: 'div', id: 'mail-groups-tb'});								                    			
		var propsPanel = layout.getEl().createChild({tag: 'div', id: 'mail-props'});	

		this.mask = new Ext.LoadMask(Ext.get('mail-dlg'));

		var tree = new Ext.tree.CheckTreePanel(treePanel, {
		    animate:true, 
		    loader: new Ext.tree.CheckTreeLoader({dataUrl:'index.php?action=getMailGroupsNodes'}),
		    enableDD:false,
		    rootVisible:true,                
		    containerScroll: true
		});
		
		var root = new Ext.tree.CheckTreeNode({
		    text: 'Alle contactpersonen', 
		    draggable:false, 
		    cls: 'folder',
		    id:'grp-0',
		    selectable: false,
		    allowUncheckedParent:false,
		    allowUncheckedChildren:true,
		    uiProvider: Ext.tree.CheckTreeNodeUI
		});
		tree.setRootNode(root);

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

        tree.on('check', function(node, checked){
        	var grps = tree.root.getSerializedNodeChecks();

			this.mask.msg = 'Verwerken van de geselecteerde mailgroepen...';
			this.mask.onBeforeLoad();
        	Ext.Ajax.request({url:'index.php?action=setMailGroups&grps=' + grps, scope:this, success: function(r,o){
				this.mask.onLoad();
				this.grid.getDataSource().reload();				
			}});         							 	             	
        }, this);

	 	tree.render();

		var cm = new Ext.grid.DefaultColumnModel([
		   {header: "Naam", width: 200, dataIndex: 'naam'},
		   {header: "Email", width: 200, dataIndex: 'email'}
		]);
		cm.defaultSortable = true;
		
		var Contact = Ext.data.Record.create([
	       {name: 'id'},    
	       {name: 'naam', type: 'string'},
	       {name: 'email', type: 'string'},
	       {name: 'adres', type: 'string'}
		]);
		
		var ds = new Ext.data.Store({
		    proxy: new Ext.data.HttpProxy({url: 'index.php?action=getMailContacts'}),
		    reader: new Ext.data.JsonReader({
		           root: 'contacts',
		           id: 'id',			               
		           totalProperty: 'totalcount'
		       }, Contact),
			remoteSort: true 			           
		});
		ds.setDefaultSort('naam', 'asc'); 	
		ds.baseParams = {'filter-col': 'naam', 'filter-val': ''};

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

		ds.on('load', function(st, rs, opts){
			var tc = ds.getTotalCount();
			var c = ds.getCount();
			this.dlg.getLayout().getRegion('east').getActivePanel().setTitle('Contactpersonen' + (tc > 0 ? ': ' + (opts.params.start + 1) + ' - ' + (opts.params.start + c) + ' van ' + tc : ''));			
			this.mask.onLoad();
		}, this);
		
		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();

		var gridFoot = grid.getView().getFooterPanel(true);
		var tb = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 15});
		tb.addSeparator();

		this.txtFilter = Ext.DomHelper.append(container.dom, {tag:'input', type:'text', size:'15'}, true);
		this.txtFilter.on('keyup', function(){
			ds.baseParams = {'filter-col': 'naam', 'filter-val': this.txtFilter.dom.value};
			ds.load({params:{start:0, limit:15}});
		}, this, {buffer:100});
		tb.add('Zoeken:', this.txtFilter.dom);

		var gridHead = grid.getView().getHeaderPanel(true);
		var tb = new Ext.Toolbar(gridHead);
				
		tb.addButton({
		    cls: 'x-btn-text-icon add-btn',
		    text: 'Toevoegen',
		    tooltip: "Contacptersonen uit adresboek aan de lijst toevoegen.",
		    handler: this.onAddContact,
			scope:this
		});	            
		tb.addSeparator();				
		tb.addButton({
		    cls: 'x-btn-text-icon del-btn',
		    tooltip: "De geselecteerde contactpersonen uit de lijst verwijderen.",
		    text: 'Verwijderen',
		    handler: this.removeContact,
		    scope:this
		});	 

		var form = new Ext.form.Form({
			labelAlign:'top',
			labelWidth:'200'	
		});
    	form.add(

			new Ext.form.Field({
			    autoCreate:{tag: 'div', cn:{tag:'div'}},
			    fieldLabel:'Nieuwsbrief',
			    dataIndex: 'nieuwsbriefNaam',
			    value:'',
			    setValue:function(val) { 
			          this.value = val;
			          if(this.rendered){
			               this.el.child('div').update(val);
			          }
			    },
			    getRawValue : function(){
			         return this.value;
			    }
			}),    	
    	    	
	        new Ext.form.TextField({
	            fieldLabel: 'Mail onderwerp',
	            name: 'subject',
	            invalidText: 'U moet een onderwerp invoeren.',		            
	            allowBlank:false
	        }),
	
	        new Ext.form.TextField({
	            fieldLabel: 'Emailadres afzender',
	            name: 'email',
	            invalidText: 'U moet een geldig emailadres invoeren.',		            
	            allowBlank:false,
	            vtype:'email'
	        }),
		
	        new Ext.form.TextField({
	            fieldLabel: 'Naam afzender',
	            name: 'naam',
	            invalidText: 'U moet een afzender naam invoeren.',
	            allowBlank: false
	        })
	    );
	    form.end();
	    form.applyIfToFields({
	        width:150
	    });
	    form.render('mail-props');
		
		layout.beginUpdate();
		layout.add('center', new Ext.ContentPanel(groupsPanel, {tree: tree, title: 'Groepen', autoScroll:true, fitToFrame: true}));
		layout.add('west', new Ext.ContentPanel(propsPanel, {title: 'Details', fitToFrame: true}));
		layout.add('east', new Ext.GridPanel(grid, {title: 'Contactpersonen', fitToFrame: false}));
		layout.endUpdate();	
		propsPanel.setStyle('visibility', 'visible');	
		
		this.form = form;
		this.tree = tree;
		this.grid = grid;
		this.dlg = dlg;
	},

	show : function(newsletter){
	 	this.newsletter = newsletter;
	 	this.form.findField('nieuwsbriefNaam').setValue(newsletter.getTitle());
	 	this.grid.getDataSource().load({params: { start:0, limit:15}});
		this.tree.root.reload();
		this.dlg.show();	
	},

	sendMailing : function(){
		if (this.txtFilter.dom.value != '') Ext.MessageBox.alert('Mailing versturen', 'U heeft een momenteel een zoekopdracht gegeven. Derhalve kan de mailing niet worden verstuurd. Leeg het zoekveld en probeer het opnieuw.');
		else if (!this.form.isValid()) Ext.MessageBox.alert('Mailing versturen', 'U heeft niet alle invoervelden ingevuld. Derhalve kan de mailing kan niet worden verzonden'); 		 			 	
		else {
		 	var c = this.grid.getDataSource().getTotalCount();
		 	if (c == 0) Ext.MessageBox.alert('Mailing versturen', 'U heeft geen contactpersonen geselecteerd');
		 	else {
				Ext.MessageBox.confirm('Mailing versturen', 'Weet u zeker dat u de nieuwsbrief \'' + this.newsletter.getTitle() + '\' wilt versturen aan ' + c + (c > 1 ? ' personen' : ' persoon') + ' ?', function(btn){
					if (btn == 'yes'){
					 	this.mask.msg = 'Bezig met verzenden...';
					 	this.mask.onBeforeLoad();
					 	var vals = this.form.getValues();
					 	Ext.Ajax.request({url:'index.php?action=sendMail&' + Ext.urlEncode(vals), scope:this, success: function(r,o){
							this.dlg.hide();
							this.reset();
							this.fireEvent('send', this);
							this.mask.onLoad();
						}});
					}
				},this);
			}
		};
	},

	onAddContact : function(){
		this.fireEvent('addcontact', this);
	},
	
	addContacts : function(records){
		var ids = '';
		for (var x=0;x<records.length;x++){
		 	ids += (ids == '' ? records[x].id : ',' + records[x].id); 
		}
		Ext.Ajax.request({url:'index.php?action=addMailContacts&ids=' + ids, scope:this, success: function(r,o){
			this.grid.getDataSource().reload();			
		}});         							 
	},	

	refresh : function(){
	 	if (this.tree.root.rendered){
			this.grid.getDataSource().reload();							
			this.tree.root.attributes.children = null;
		 	this.tree.root.reload();			
		}
	},

	reset : function(){
	 	this.tree.root.setChecked(false);
		this.refresh();
		//this.form.reset();
	},

	removeContact : function(){
		var records = this.grid.getSelectionModel().getSelections();
		var ids = ''; 
		for (var x=0;x<records.length;x++){
		 	ids += (ids == '' ? records[x].id : ',' + records[x].id); 
		}
		Ext.Ajax.request({url:'index.php?action=removeMailContacts&ids=' + ids, scope:this, success: function(r,o){
			this.grid.getDataSource().reload();			
		}});         							 			
	}
		
});