Xsn.NewsletterPanel = function(el, config){
 	this.el = el;
	this.initLayout();
	
	//Ext.apply(config, {closable:true});	
	Xsn.NewsletterPanel.superclass.constructor.call(this, this.layout, config);

	this.addEvents({'ready':true, 'load':true}); 	
 	
 	this.newsletter = new Xsn.Newsletter(config);
	this.newsletter.on('load', function(){
	 	this.render();
	}, this);
	
	this.newsletter.load();
}

Ext.extend(Xsn.NewsletterPanel, Ext.NestedLayoutPanel, {
	
	refresh : function(){
	 	this.grid.getDataSource().reload();
	 	this.tree.getSelectionModel().clearSelections();
	 	this.tree.root.reload();
		this.preview();		
	},
	
	destroy : function(){
	 	this.purgeListeners();
		this.tree.getEl().remove();
		this.editdlg.destroy(true);
		this.grid.destroy(true);
		this.adddlg.destroy(true);
		this.superclass.destroy();
	},
	
	preview : function(){
	 	Ext.Ajax.request({url:'index.php?action=previewNewsletter', scope:this, success: function (r,o){
            setIFrameContent(this.layout.getRegion('center').getActivePanel().getEl().id, r.responseText);
			this.fireEvent('ready', this);            
		}});                			
	},	
	
	addElement : function(id){
        this.adddlg.hide();
        var node = this.tree.getSelectionModel().getSelectedNode();	
        Ext.Ajax.request({url:'index.php?action=addElement&parent_id=' + (node ? node.id : 0) + '&element_handle=' + id, scope:this, success: function(r,o){
	     	var r = eval('('+r.responseText+')');
			if (!r) Ext.MessageBox.alert('Element toevoegen', 'Dit element kan niet worden toegevoegd.');
			else this.refresh();
		}});                         	
	},	
	
	rssElements : function(){
        this.adddlg.hide();
		this.refresh();		
	},

	initLayout : function(){
		var layout = new Ext.BorderLayout(this.el,{
            west: {
                initialSize: 270,
                titlebar: false,
                collapsible: false,
                split:true,
                useShim:true,
                autoScroll:true,
                alwaysShowTabs:true,
                tabPosition:'bottom',
                minSize: 120,
                maxSize: 350,
                margins: {top:5,bottom:5,right:0,left:5},
                cmargins: {top:5,bottom:5,right:5,left:5}
            },
            center: {
                useShim:true,                 
                titlebar: false,
                autoScroll:false,
                margins: {top:5,bottom:5,right:5,left:0}
            }
		});                    

		var topPanel = layout.getEl().createChild({tag:'div'});
		var navPanel = layout.getEl().createChild({tag:'div'});
		var infoPanel = layout.getEl().createChild({tag:'div'});
		var t = new Ext.MasterTemplate([
			'<div id="info-panel-bd">',
			'<div id="info-panel-bd-items"></div>',
			'<div class="xsn-info-item"><h4>Verzend geschiedenis</h4><div id="info-panel-bd-grid"></div></div>',
			'</div>'
			]
		);
		t.append(infoPanel);		
		
		var tbPanel = navPanel.createChild({tag:'div'});
		var treePanel = navPanel.createChild({tag:'div'});
		var previewPanel = layout.getEl().createChild({tag:'iframe', frameborder:0, style:'padding:5px'});

        var tb = new Ext.Toolbar(tbPanel);
        tb.addButton({cls: 'x-btn-icon add-btn', tooltip: 'Een nieuw element toevoegen.', handler: function(){
			 this.adddlg.show();	
		}, scope:this});
        tb.addButton({cls: 'x-btn-icon edit-btn', tooltip:'Het geselecteerde element bewerken.', handler: function(){
		 	var node = this.tree.getSelectionModel().getSelectedNode();		 
		 	if (node && node.attributes.editable) this.editdlg.show(node, this.newsletter.getColors());
		 	else if (node && node.id == tree.getRootNode().id) editor.triggerEdit(node);
		 	else if (node) Ext.MessageBox.alert('Element wijzigen', 'Dit element kan niet worden bewerkt.');
		}, scope:this});
        tb.addSeparator();
        tb.addButton({cls: 'x-btn-icon arrow-up-btn', tooltip:'Het geselecteerde element omhoog verplaatsen.', handler: function(){
         	var node = this.tree.getSelectionModel().getSelectedNode();
         	if (node){
				var parent = node.parentNode;
	         	if (!node.isFirst() && node.attributes.draggable){
					var node = this.tree.getSelectionModel().select(parent.insertBefore(node, node.previousSibling));
					Ext.Ajax.request({url:'index.php?action=nodeDrop&parent_id=' + node.parentNode.id + '&point=above&target=' + node.nextSibling.id + '&source=' + node.id, scope:this, success: this.preview});				
				}
			}
		}, scope:this});     
        tb.addButton({cls: 'x-btn-icon arrow-down-btn', tooltip:'Het geselecteerde element omlaag verplaatsen.', handler: function(){
         	var node = this.tree.getSelectionModel().getSelectedNode();
         	if (node){
			 	var parent = node.parentNode;
	         	if (!node.isLast() && node.attributes.draggable){
	         	 	var node = parent.insertBefore(node.nextSibling, node);
	         	 	Ext.Ajax.request({url:'index.php?action=nodeDrop&parent_id=' + node.parentNode.id + '&point=above&target=' + node.nextSibling.id + '&source=' + node.id, scope:this, success: this.preview});				             	 	
				}
			}
		}, scope:this}); 			
        tb.addSeparator();
        tb.addButton({cls: 'x-btn-icon del-btn', tooltip:'Het geselecteerde element verwijderen.',handler: function(){
	 	 	var node = this.tree.getSelectionModel().getSelectedNode();
			if (node) {
				Ext.MessageBox.confirm('Bevestigen', 'Weet u zeker dat u het geselecteerde element wilt verwijderen?', function (btn){
				 	if (btn == "yes"){
				 	 	var id = node.id;
				 	 	Ext.Ajax.request({url:'index.php?action=deleteElement&element_id='+ id, scope:this, success: function(r,o){
			 	     		var res = eval('('+r.responseText+')');
							if (!res) Ext.MessageBox.alert('Element verwijderen', 'Dit element kan niet worden verwijderd.'); 
							else {
								node.parentNode.removeChild(node);							 
								this.preview();									
							}
						}});			 	
					}
				}, this); 		 			 	
			}
		}, scope:this});

    	var tree = new Ext.tree.TreePanel(treePanel, {
            animate:true, 
            loader: new Ext.tree.TreeLoader({dataUrl:'index.php?action=getElementsTreeNodes'}),
            enableDD:true,
            ddGroup: 'nbgrp',
            rootVisible:false,                
            containerScroll: true
        });
        
        var root = new Ext.tree.AsyncTreeNode({
            text: 'nieuwsbrief', 
            draggable: false,
            expanded:true,
            removable: false,
			editable: false, 
            handle: '',
            id:'0'
        });
        
        var editor = new Ext.tree.TreeEditor(tree, {allowBlank: false});

		editor.on('beforestartedit', function(ed, node, val){
			return (node.parentNode ? true: false);
		}, this);

        editor.on('complete', function(ed, val, orival){
			if (val != '' && val != orival){
				this.newsletter.setTitle(val);			 
			}
		},this);
        
        tree.setRootNode(root);
		tree.getLoader().on('load', function(){
			if (root.childNodes.length == 0) this.adddlg.show();
			tree.getLoader().removeListener('load', this);
		}, this);

		tree.root.on('beforecollapse', function(){
			return false;
		},this);

		tree.on('click', function(node){
			var oIframe = layout.getRegion('center').getActivePanel().getEl().dom;
		    var oDoc = oIframe.contentWindow || oIframe.contentDocument;
		    if (oDoc.document) oDoc = oDoc.document;
			var el = Ext.query('.xsn-vraag-' + node.id, oDoc.body)[0]		    
		    if (el) {
			 	Ext.get(el).highlightX();
			}
		}, this);

	    tree.on('dblclick', function (node){
			if (node.attributes.editable) this.editdlg.show(node, this.newsletter.getColors());
		 	else if (node.id != tree.getRootNode().id)Ext.MessageBox.alert('Element bewerken', 'Dit element kan niet worden bewerkt.');			
		}, this);

		tree.on('nodedragover', function(e){
			if ((e.point == 'above' || e.point == 'below') && e.target.attributes.parent == e.dropNode.attributes.parent) return true;
			else if (e.point == 'append' && e.target.attributes.handle == e.dropNode.attributes.parent) return true;
			return false;			 
		}, this);
		
		tree.on('nodedrop', function(e){
		 	Ext.Ajax.request({url:'index.php?action=nodeDrop&parent_id=' + (e.point == "append" ? e.target.id : e.target.parentNode.id) + '&point=' + e.point + '&target=' + e.target.id + '&source=' + e.dropNode.id, scope:this, success: this.preview});
		}, this);

		var cm = new Ext.grid.ColumnModel([{
			header: "Datum",
			dataIndex: 'datum',
			width: 140,
			renderer : function(value, p, record){
			 	return '<span class=\'' + (record.data['klaar'] == 1 ? 'status-done' : 'status-running') +  '\'>' + value + '</span>';
			}
		},{
			header: "Onderwerp",
			dataIndex: 'subject',
			width: 70,
			sortable: false			   		       
		},{
			header: "Aantal",
			dataIndex: 'aantal',
			width: 50,
			hidden:false,
			sortable: false			   		       
		}]);
		cm.defaultSortable = true;
		
		var Mailing = Ext.data.Record.create([
	       {name: 'id'},    
	       {name: 'naam', type: 'string'},
	       {name: 'datum', type: 'string'},
	       {name: 'aantal', type: 'string'},
	       {name: 'klaar', type: 'bool'},
	       {name: 'subject', type: 'string'}	       		   	       
		]);
		
		var ds = new Ext.data.Store({
		    proxy: new Ext.data.HttpProxy({url: 'index.php?action=getMailingHistory'}),
		    reader: new Ext.data.JsonReader({
		           root: 'mailing',
		           id: 'id',			               
		           totalCount: 'TotalCount'
		       }, Mailing),
			remoteSort: false 			           
		});
		ds.setDefaultSort('datum', 'desc'); 		    
		
		gridContainer = infoPanel.createChild({tag:'div', id:'info-panel-grid'});		
		var grid = new Ext.grid.Grid(gridContainer, {
		    ds: ds,
		    cm: cm,
		    selModel: new Ext.grid.RowSelectionModel(),
		    enableColLock:false
		});

		var gridLayout = Ext.BorderLayout.create({
            center: {
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'info-panel-bd-grid');		
		
		grid.render();
		grid.getSelectionModel().lock();  

		this.grid = grid;

		layout.beginUpdate();
        layout.add('center', new Ext.ContentPanel(previewPanel, {title:'Nieuwsbrief', fitToFrame:true}));				
        layout.add('west', new Ext.ContentPanel(navPanel, {toolbar: tb, tree:tree, title: 'Structuur', resizeEl: treePanel, autoScroll:true, fitToFrame:true, closable:false}));
        layout.add('west', new Ext.ContentPanel(infoPanel, {title: 'Info', fitToFrame:true, closable:false}));
		layout.endUpdate();

		layout.getRegion('west').showPanel(0);

		this.layout = layout;
		this.tree = tree;

		this.editdlg = new Xsn.EditElementDialog();
		this.editdlg.on('save', function(id){
			this.editdlg.hide();
			this.refresh();
		}, this);
	
		this.adddlg = new Xsn.AddElementDialog();
		this.adddlg.on('add', this.addElement, this);
		this.adddlg.on('rssadd', this.rssElements, this);

	},

	render : function(){

		var t = new Ext.MasterTemplate([
			'<tpl name="items"><div class="xsn-info-item"><h4>{text}</h4><span>{value}</span></div></tpl>'
			]
		);
		t.addAll('items', this.newsletter.getInfo().props);
		t.append('info-panel-bd-items');		

		this.grid.baseParams = {id: this.newsletter.id};
		this.grid.getDataSource().load();

	 	this.tree.root.setText(this.newsletter.title);
		this.tree.render();
		this.preview();
	},
	
	getNewsletter : function(){
		return this.newsletter;
	},
	
	getHistoryGrid : function(){
		return this.grid;
	}
	
	
});