Xsn.EditElementDialog = function(){
	this.el = Ext.get(document.body).createChild({tag:'form'});
 	this.addEvents({'save':true});
	this.init();
}

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

	hide : function(){
		this.dlg.hide();
	},
	
	destroy : function(){
		if (this.colordlg) this.colordlg.destroy(true);
		this.dlg.destroy(true);	
	},

	show : function(node, colors){
		Xsn.BbEditor.initColors(colors);
	 	
		this.dlg.setTitle('Element bewerken: ' + node.text);		
		if (!this.elementId || this.elementId != node.id){
			this.elementId = node.id;
			this.clearEditPanel();
			this.clearPreview();

		    Ext.Ajax.request({url:'index.php?action=loadEditDlgTabs&element_id='+ this.elementId, scope:this, success: this.initEditPanel});
		    Ext.Ajax.request({url:'index.php?action=previewElement&element_id='+ this.elementId, scope:this, success: this.previewElement});
		}
		this.dlg.show();
	},

	addListeners : function(el){
	 	var a = el.query('div.vraag');
	 	for (var x=0;x<a.length;x++){
	 		var v = Ext.get(a[x]);
	
			var b = v.child('textarea') || v.child("input[type!='file']");
			if (b){
				b.on('focus', function(e){
					Xsn.BbEditor.setTarget(e.getTarget());	
				}, this);
				b.on('keyup', this.updateElement, this, {buffer:200});							
			};

			var b = v.child('select');
			if (b){
				b.on('change', this.updateElement, this, {buffer:200});							
			};
	
			var b = v.child("input[type='file']");
			if (b){
				b.on('focus', function(e){
					Xsn.BbEditor.setTarget();	
				}, this);
			};
	
			var b = v.child('span.btn-paste');
			if (b){
				b.on('click', function(e){
				 	var el = Ext.get(e.getTarget().id.substr(10)); 
				 	this.pasteDlg.setHtml(el.dom.value.replace(new RegExp("[\\n\\r]", "g" ),"<br>"), this.getCSS());
					this.pasteDlg.show(function(v){
						el.dom.value = v.replace(new RegExp("[\r\n]", "g"),"");
						el.dom.value = el.dom.value.replace(new RegExp("<br>", "g" ),"\r\n");
						this.updateElement();
					}.createDelegate(this));
				}, this);
			};
			
			var b = v.child('span.btn-image-default');
			if (b) {
				b.on('click', function(e){
					Ext.Ajax.request({url:'index.php?action=setDefaultImage&element_id=' + this.elementId + '&vraag_handle=' + e.getTarget().id.substr(12), scope:this, success: this.updateElement});
				}, this);
			}
	
			/*
			var b = v.child('span.btn-image-upload');
			if (b){
				b.on('click', function(e){
				 	this.savebtn.disable();
					YAHOO.util.Connect.setForm(this.dlg.getEl().dom, true);         	
			        YAHOO.util.Connect.asyncRequest('POST', 'index.php?action=uploadImage&element_id=' + this.elementId + '&vraag_handle=' + e.getTarget().id.substr(12), {upload: function (o,b){
			         	this.savebtn.enable();
			         	this.previewElement(o,b);
					}.createDelegate(this), failure: submitFailure});         
				}, this);
			}*/
		}
		
	},

	initEditPanel : function(o,b){
		var tabs = eval('(' + o.responseText + ')');

		var l = this.dlg.getLayout();
		var r = l.getRegion('center');
		var editPanel = l.getEl().createChild({tag:'div'});	                
		
		if (tabs.length > 0){
			for (var i=0;i<tabs.length;i++){
				var tabCt = editPanel.createChild({tag:'div'});
				var tabTb = tabCt.createChild({tag:'div'});
				var tabContent = tabCt.createChild({tag:'div'});
				r.add(new Ext.ContentPanel(tabCt, {resizeEl:tabContent, fitToFrame:true, autoScroll:true, toolbar: this.getToolbar(tabTb), title: tabs[i]}));					
			}
			
			var tabPanel = r.getTabs();
			for (var i=0;i<tabPanel.getCount();i++){
				var t = tabPanel.getTab(i);	
				var cp = Ext.get(t.bodyEl.dom.lastChild);
				cp.getUpdateManager().update('index.php','action=loadEditDlgTab&tab_id=' + tabs[i], this.addListeners.createDelegate(this, [cp], 0));								
			}			
		} else {
			var tbp = editPanel.createChild({tag:'div'});
			var cp = editPanel.createChild({tag:'div'});
			r.add(new Ext.ContentPanel(editPanel, {resizeEl:cp, fitToFrame:true, autoScroll:true, toolbar:this.getToolbar(tbp), titlebar: false}));					
			cp.getUpdateManager().update('index.php','action=loadEditDlgTab&tab_id=', this.addListeners.createDelegate(this, [cp],0));								
		}
	},
	
    init: function(){
	 	var dlg = new Ext.LayoutDialog('edit-element-dlg', { 
                autoTabs:true,
                modal:true,
				autoCreate: {
	                tag:'form',
	                cls: 'ydlg',
	                method:'post',
	                enctype:'multipart/form-data',
	                id: 'edit-element-dlg',
	                onsubmit:'return false;'
	            }, 		                    
                title: 'Element bewerken',
                width:950,
                height:550,
                shadow:true,
                closable:false,
                draggable:true,
                collapsible:false,
                animateTarget:null,
                resizable:false,				                
                north: {
                    initialSize: 200,
                    minSize: 100,
                    maxSize: 500,	                     
                    split:true,
                    useShim:true,			                    
                    autoScroll:false,
                    collapsible:true,
                    titlebar:false
                },
                center: {
                 	tabPosition: 'top',
                 	autoScroll:false,
                 	titlebar: false
                }
        });
        dlg.addKeyListener(27, dlg.hide, dlg);
            		            
        this.savebtn = dlg.addButton('Opslaan', this.onSaveElement, this);		            
        dlg.addButton('Annuleren', dlg.hide, dlg);
           
        var layout = dlg.getLayout();
		//var tbPanel = layout.getEl().createChild({tag:'div', cls:'color-dlg-toolbar'});	                										
		this.iframe = layout.getEl().createChild({tag:'iframe', frameborder:0,style:'padding:5px'});					
		
		this.pasteDlg = new Xsn.PasteDialog({title:'Html plakhulp'});
		
		dlg.getLayout().beginUpdate();
        dlg.getLayout().add('north', new Ext.ContentPanel(this.iframe, {fitToFrame:true}));	                
        //dlg.getLayout().add('south', new Ext.ContentPanel(tbPanel, {toolbar:etb, fitToFrame:true}));
		dlg.getLayout().endUpdate();

		this.dlg = dlg;

    },
	
	getToolbar: function(el){
	    var etb = new Ext.Toolbar(el);
	    
        etb.addButton({cls: 'x-btn-icon text-bold-btn', tooltip:'Geselecteerde tekst vet maken.', handler: function(){
		 	if (Xsn.BbEditor.formatText('bold')) this.updateElement();
		}, scope:this});
        etb.addButton({cls: 'x-btn-icon text-italic-btn', tooltip:'Geselecteerde tekst schuin maken.', handler: function(){
		 	if (Xsn.BbEditor.formatText('italic')) this.updateElement();
		}, scope:this});
		
        etb.addButton({cls: 'x-btn-icon text-underline-btn', tooltip:'Geselecteerde tekst onderstrepen.', handler: function(){
		 	if (Xsn.BbEditor.formatText('underline')) this.updateElement();
		}, scope:this});
							
        etb.addButton({cls: 'x-btn-icon text-color-btn', tooltip: 'Geselecteerde tekst kleuren.', handler: function(){
		 	Xsn.BbEditor.chooseColor(this.updateElement.createDelegate(this));
		}, scope:this});  
		                                      
        etb.addButton({cls: 'x-btn-icon text-link-btn', handler: function(){
		 	Xsn.BbEditor.inputLink(this.updateElement.createDelegate(this));         
		}, scope:this}); 

        etb.addButton({cls: 'x-btn-icon text-mailto-btn', handler: function(){
		 	Xsn.BbEditor.inputMailtoLink(this.updateElement.createDelegate(this));         
		}, scope:this}); 

		return etb;		
	},
    
    clearEditPanel : function(){
		var r = this.dlg.getLayout().getRegion('center');
		while (r.getActivePanel()){
			r.remove(r.getActivePanel());
		}
	},
    
    updateElement : function(){
     	Ext.Ajax.request({method:'POST', url:'index.php?action=updateElement&element_id=' + this.elementId + '&' + Ext.Ajax.serializeForm(this.dlg.getEl().dom), scope:this, success: function(){
			Ext.Ajax.request({url:'index.php?action=previewElement', scope:this, success: this.previewElement});			
		}});

		/*
		YAHOO.util.Connect.setForm(this.dlg.getEl().dom);     		 
	    YAHOO.util.Connect.asyncRequest('POST', 'index.php?action=updateElement&element_id=' + this.elementId, {success: function(r,o){
			Ext.Ajax.request({url:'index.php?action=previewElement', scope:this, success: this.previewElement});			
		}.createDelegate(this), failure: submitFailure});         				

        Ext.Ajax.request({url:'index.php?action=updateElement', form:this.dlg.getEl().id, scope:this, success: function(r,o){
		    Ext.Ajax.request({url:'index.php?action=previewElement', scope:this, success: this.previewElement});
		}});*/
	},

    onSaveElement : function(){
	 	this.savebtn.disable();
	 	Ext.Ajax.request({method:'POST', url:'index.php?action=saveElement&element_id=' + this.elementId, form:this.dlg.getEl().id, isUpload:true, scope:this, success:function(r,o){
         	this.savebtn.enable();
	     	this.fireEvent('save', this.elementId);
		 	this.elementId = null;				     	
		}});
		
	 	/*
		YAHOO.util.Connect.setForm(this.dlg.getEl().dom, true);         	
        YAHOO.util.Connect.asyncRequest('POST', 'index.php?action=saveElement&element_id=' + this.elementId, {upload: function (o,b){
         	this.savebtn.enable();
	     	this.fireEvent('save', this.elementId);
		 	this.elementId = null;				     	
		}.createDelegate(this)});         

        Ext.Ajax.request({url:'index.php?action=saveElement&element_id=' + this.elementId, scope:this, form:this.dlg.getEl().id, success: function (r,o){
         	this.savebtn.enable();
	     	this.fireEvent('save', this.elementId);
		 	this.elementId = null;
		}});*/
	},

   	previewElement : function(r,o){
        setIFrameContent(this.iframe.id, r.responseText);
	},
	
	clearPreview : function(){
        setIFrameContent(this.iframe.id, '');	
	},
	
	getCSS : function(){
		var doc = getIFrameDocument(this.iframe.id);
		return '';	
	}
        
});