Xsn.OpenNewsletterDialog = function(config) {
    Ext.apply(this, config);
    this.addEvents({'ready':true, 'open':true, 'updatetitle': true, 'beforedelete':true, 'delete':true});
	this.init();
} 

Ext.extend(Xsn.OpenNewsletterDialog, Ext.util.Observable, {
	
	init : function(){
	 	dlg = new Ext.LayoutDialog("xsn-dlg-open", { 
            autoTabs:true,
            modal:true,
			autoCreate: true,
            title: 'Nieuwsbrief openen',
            width:950,
            height:500,
            shadow:true,
            closable:false,
            draggable:true,
            collapsible:false,
            animateTarget:null,
            resizable:false,				                
            west: {
             	initialSize: 230,
             	minSize: 150,
             	maxSize: 300,
             	split:true,
             	useShim:true,
				titlebar: true,
				autoscroll:true,
				collapsible: true	
			},
            center: {
				titlebar: false,
				autoscroll:false
			}
        });
        dlg.addKeyListener(27, dlg.hide, dlg);

		var treePanel = dlg.getLayout().getEl().createChild({tag:"div", id:"xsn-dlg-tree-panel-open"})
		var tbCt = treePanel.createChild({tag:"div", id:"xsn-dlg-tree-tb-open"})
		var treeCt = treePanel.createChild({tag:"div", id:"xsn-dlg-tree-open"})
		
		tree = new Ext.tree.TreePanel(treeCt, {
            animate:true, 
            loader: new Ext.tree.TreeLoader({dataUrl:'index.php?action=listNewsletters'}),
            enableDD:false,
            rootVisible:false,                
            containerScroll: true
        });

	    var root = new Ext.tree.AsyncTreeNode({
            text: 'newsletters', 
            draggable:false, 
            id: 'newsletters'
        });
		tree.el.dom.innerHTML = '';
        tree.setRootNode(root);

	    tree.getSelectionModel().on('selectionchange', function(sm, node){
			this.previewNewsletter(node);	
		}, this);	 
	 	tree.render();

		tree.getLoader().on('load', this.selectFirstNode, this);

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

		editor.on('beforestartedit', function(ed, node, val){
			return ed.editNode.attributes.leaf === true;
		}, this);

      	editor.on('complete', function(ed, val){
			var node = ed.editNode;
			if (val != ''){
			 	Ext.Ajax.request({url:'index.php?action=renameNewsletter&id=' + node.id + '&naam=' + val, scope:this, success: function(r,o){
					this.fireEvent('updatetitle', node.id, val);
				}});
			}
		},this);
			
		var tb = new Ext.Toolbar(tbCt);

		tb.addButton({cls:'x-btn-text-icon toggle-edit-btn', tooltip: 'De naam van de geselecteerde nieuwsbrief wijzigen.', text: 'Naam wijzigen', handler: 
			function(){
			 	var node = tree.getSelectionModel().getSelectedNode();
			 	if (node) editor.triggerEdit(node);
			},
		scope: this });

		tb.addButton({cls:'x-btn-text-icon del-btn', tooltip: 'De geselecteerde nieuwsbrief verwijderen.', text: 'Verwijderen', handler: 
			function(){
			 	var node = tree.getSelectionModel().getSelectedNode();
			 	if (node && node.attributes.leaf === true){
					Ext.MessageBox.confirm('Nieuwsbrief verwijderen', 'Weet u zeker dat u de nieuwsbrief \'' + node.text + '\' wilt verwijderen?', function(btn){
						if (btn == 'yes'){
						 	var id = node.id;
						 	if (this.fireEvent('beforedelete', id) !== false){
						 	 	var p = node.previousSibling || node.nextSibling || node.parentNode;
								node.parentNode.removeChild(node);
								Ext.Ajax.request({url:'index.php?action=removeNewsletter&id=' + id, scope:this, success:function(r,o){
									if (p) p.select();
									this.fireEvent('delete', node.id);								
								}});								
							} else Ext.MessageBox.alert('Nieuwsbrief verwijderen', 'Deze nieuwsbrief is momenteel geopend en kan derhalve niet worden verwijderd.');
						}	
					}, this);					
				}
			},
		scope: this });

		dlg.getLayout().add('west', new Ext.ContentPanel(treePanel, {tree: tree, toolbar:tb, fitToFrame:true, resizeEl: treeCt, autoScroll:true, title:'Nieuwsbrieven'}));

		var innerLayout = new Ext.BorderLayout(Ext.DomHelper.append(dlg.getLayout().getEl(), {tag:'div'}, true), {
			center : {
				titlebar: false
			},
			south: {
				titlebar: true,
				initialSize: 130,
				collapsible:true,
				closable:false
			}
		});	 	

		var previewPanel = dlg.getLayout().getEl().createChild({tag:'iframe', id:'xsn-dlg-preview-open', style:'padding:5px', frameborder:0});
		innerLayout.add('center', new Ext.ContentPanel(previewPanel, {fitToFrame:true, title: 'Voorbeeld'}));				
		var infoPanel = Ext.DomHelper.append(dlg.getLayout().getEl(), {tag:'div'}, true);
		innerLayout.add('south', new Ext.ContentPanel(infoPanel, {fitToFrame:true, title: 'Info'}));				
		dlg.getLayout().add('center', new Ext.NestedLayoutPanel(innerLayout, {fitToFrame:true}));				
		 
		var openNewsletter = function(){
			var n = this.tree.getSelectionModel().getSelectedNode();
         	this.fireEvent('open', n.id, n.text);
		}
        btn = dlg.addButton({text:'Openen', handler: openNewsletter, scope:this});
        tree.on('dblclick', openNewsletter, this);				           
        dlg.addButton('Sluiten', dlg.hide, dlg);		
		
		this.btn = btn;
        this.tree = tree;
		this.dlg = dlg;	
	},
	
	previewNewsletter : function (node){
		if (node && node.isLeaf()){
		 	Ext.Ajax.request({url:'index.php?action=previewExistingNewsletter&id=' + node.id, scope:this, success: function (r,o){
				var ret = eval('(' + r.responseText + ')');  
				var layout = this.dlg.getLayout().getRegion('center').getActivePanel().getLayout();
         		setIFrameContent(layout.getRegion('center').getActivePanel().getEl().id, ret.preview);								
				var ct = layout.getRegion('south').getActivePanel().getEl();
				ct.dom.innerHTML = '';

				var t = new Ext.MasterTemplate([
					'<div id="xsn-info-bd"><div class="xsn-info-col xsn-info-col-first">',		
						'<tpl name="items"><div class="xsn-info-item"><h4>{text}</h4><span>{value}</span></div></tpl>',			
					'</div><div class="xsn-info-col">',	
					'<div class="xsn-info-item"><h4>Laatste mailing</h4><span>',
						'<tpl name="mailing-items"><strong>{text}</strong>: {value}<br></tpl>',
						'<tpl name="mailing-empty"><strong>{value}<br></tpl>',						
					'</span></div>',
					'</div></div>'
				]);
				t.addAll('items', ret['info']['props']);
				
				if (ret['info']['mailing'].length > 0) t.addAll('mailing-items', ret['info']['mailing']);
				else t.add('mailing-empty', {value:'Nog niet eerder verstuurd.'});
				t.append(ct);
				
				this.fireEvent('ready', this);
			}});                         				 
		}
	},
	
	selectFirstNode : function(){
		if (this.tree.root.childNodes.length < 1) {
			this.btn.disable();
			this.fireEvent('ready', this);										
		} else {
			this.btn.enable();			 
		    this.tree.getSelectionModel().select(this.tree.root.firstChild.firstChild);
		}
	},
	
	isEmpty : function(){
		return this.tree.root.childNodes.length == 0;
	},
	
	refresh : function(){
		this.tree.root.reload();	
	},
	
	show : function(){
		this.dlg.show();			
	},
	
	hide : function(){
		this.dlg.hide();
	}

});