Xsn.NewNewsletterDialog = function(config) {
    Ext.apply(this, config);
    this.addEvents({'new':true});
    this.init();
} 

Ext.extend(Xsn.NewNewsletterDialog, Ext.util.Observable, {
	
	init : function(){
	 	dlg = new Ext.LayoutDialog("xsn-dlg-new", { 
            autoTabs:true,
            modal:true,
			autoCreate: true,
            title: 'Nieuwsbrief aanmaken',
            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: true,
				autoscroll:false
			}
        });
        dlg.addKeyListener(27, dlg.hide, dlg);

		var treePanel = dlg.getLayout().getEl().createChild({tag:"div", id:"xsn-dlg-tree-new"})
		var previewPanel = dlg.getLayout().getEl().createChild({tag:'iframe', id:'xsn-dlg-preview-new', style:'padding:5px', frameborder:0});

		tree = new Ext.tree.TreePanel(treePanel, {
            animate:true, 
            loader: new Ext.tree.TreeLoader({dataUrl:'index.php?action=getXsnNodes'}),
            enableDD:false,
            rootVisible:false,                
            containerScroll: true
        });

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

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

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

		dlg.getLayout().add('west', new Ext.ContentPanel(treePanel, {tree: this.tree, fitToFrame:true, autoScroll:true, title:'Nieuwsbrief templates'}));

		dlg.getLayout().add('center', new Ext.ContentPanel(previewPanel, {fitToFrame:true, title: 'Template voorbeeld'}));				
		setIFrameContent(dlg.getLayout().getRegion('center').getActivePanel().getEl().id, '');									

		var newNewsletter = function(){
         	this.fireEvent('new', this.tree.getSelectionModel().getSelectedNode().id);
		}
        btn = dlg.addButton({text:'Aanmaken', handler: newNewsletter, scope:this});
        tree.on('dblclick', newNewsletter, this);				           
        dlg.addButton('Sluiten', dlg.hide, dlg);		
		
		this.btn = btn;
        this.tree = tree;
		this.dlg = dlg;	
				
	},
	
	previewTemplate : function (node){
		if (node && node.isLeaf()){
			Ext.Ajax.request({url:'index.php?action=previewTemplate&parent=' + node.attributes.parent + '&id=' + node.id, scope:this, success: function (r,o){
         		setIFrameContent(this.dlg.getLayout().getRegion('center').getActivePanel().getEl().id, r.responseText);								
			}});                         				 
		}
	},
	
	selectFirstNode : function(){
		if (this.tree.root.childNodes.length < 1) this.btn.disable();
		else {
			this.btn.enable();			 
		    this.tree.getSelectionModel().select(this.tree.root.firstChild);
		}
	},
	
	refresh : function(){
		this.tree.root.reload();	
	},
	
	show : function(){
		this.dlg.show();			
	},
	
	hide : function(){
		this.dlg.hide();
	}

});