Xsn.AddElementDialog = function(){
	this.el = Ext.get(document.body).createChild({tag:'div'});
 	this.addEvents({'add':true, 'rssadd':true});
	this.init();
}

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

		rssDlg : null,

		init : function(){
	       	var dlg = new Ext.LayoutDialog(this.el, {
                modal:true,
                width:950,
                title: 'Element toevoegen',
                autoCreate: true,
                height:500,
                closable:false,
                draggable:true,
                collapsible:false,
                animateTarget:null,
                resizable:false,                
                shadow:true,
                minWidth:300,
                minHeight:300,
                west: {
                    split:true,
                    initialSize: 250,
                    minSize: 100,
                    useShim:true,                                
                    maxSize: 350,
                    titlebar: true,
                    collapsible: true,
                    autoScroll: true,
                    animate: true
                },
                center: {
                    titlebar: true,
                    autoScroll:false
                }
	        });
	        dlg.addKeyListener(27, dlg.hide, dlg);

			if (Xsn.settings['rss']){
            	dlg.addButton({text:'RSS', tooltip:'Toevoegen elementen aan de hand van externe RSS berichten', handler: this.onRss, scope:this});
			}
			           
            dlg.addButton({text:'Toevoegen', handler: this.onAddElement, scope:this});
            dlg.addButton('Sluiten', dlg.hide, dlg);                    
            dlg.on('show', dlg.layout.layout, dlg.layout, true);

            var layout = dlg.getLayout();
			var treePanel = layout.getEl().createChild({tag:'div'});                    
			var previewPanel = layout.getEl().createChild({tag:'iframe', frameborder:0, style:'padding:5px'});					

          	var tree = new Ext.tree.TreePanel(treePanel, {
                animate:true, 
                loader: new Ext.tree.TreeLoader({dataUrl:'index.php?action=getTemplateElementsTreeNodes'}),
                enableDD:false,
                rootVisible:false,                
                containerScroll: true
            });
            		            	            
            var root = new Ext.tree.AsyncTreeNode({
                text: 'xsn', 
                draggable:false, 
                id:'xsn'
            });
            tree.setRootNode(root);
		    tree.on('click', this.previewTemplateElement,this);
            tree.on('dblclick', this.onAddElement, this);				           				    
		    
			var sm = tree.getSelectionModel();
			sm.select = sm.select.createInterceptor(function(node){
			    return node.attributes.selectable !== false;
			});				    

			tree.getLoader().on('load', this.selectFirstNode,this);					
            tree.render();
						
			layout.beginUpdate();
            layout.add('west', new Ext.ContentPanel(treePanel, {tree:tree, title: 'Elementen', fitToFrame: 'true'}));
            layout.add('center', new Ext.ContentPanel(previewPanel, {title: 'Preview', fitToFrame: 'true'}));
            layout.endUpdate();					

            this.tree = tree;            
            this.dlg = dlg;
			
		},
		
		selectFirstNode : function(){
		    if (this.tree.root.firstChild){
				this.tree.getSelectionModel().select(this.tree.root.firstChild);
				this.previewTemplateElement(this.tree.root.firstChild);					    
			}
		    this.tree.getLoader().removeListener('load', this.selectFirstNode);			
		},
		
		reload : function(){
            setIFrameContent(this.dlg.getLayout().getRegion('center').getActivePanel().getEl().id, '');		 
			while(this.tree.root.firstChild){
	     		this.tree.root.removeChild(this.tree.root.firstChild);
			}
			this.tree.root.loaded = false;
			this.tree.root.expanded = false;											
			this.tree.root.expand();	
		},
		
        show : function(){
			this.reload();
           	this.dlg.show();
        },
        
        hide : function(){
			this.dlg.hide();	
		},
		
		destroy : function(){
			this.dlg.destroy(true);	
		},
		
        onAddElement: function(){
        	this.fireEvent('add', this.tree.getSelectionModel().getSelectedNode().id); 	
        },
        
        onRss: function(){
         	if (!this.rssDlg) {
				this.rssDlg = new Xsn.RssElements.Dialog();
				this.rssDlg.on('rssadd', function(url, posts){
				 	if (url != ''){
		        		Ext.Ajax.request({url:'index.php?action=addFeedElements&url=' + url + '&posts=' + posts + '&handle=' + this.tree.getSelectionModel().getSelectedNode().id, scope:this, success: function(r,o){
							this.rssDlg.hide();				 
					 		this.fireEvent('rssadd');	
					 	}});
					} else {
						this.rssDlg.hide();				 
					}
				}, this);
			}
         	this.rssDlg.show();
		},
        
        previewTemplateElement : function(node){
         	if (node.attributes.selectable != false) {
         	 	Ext.Ajax.request({url:'index.php?action=previewTemplateElement&element_handle='+ node.id, scope:this, success: function(r,o){
		             setIFrameContent(this.dlg.getLayout().getRegion('center').getActivePanel().getEl().id, r.responseText);				
				}});
			}
        }
        

});