showLoginForm = function(){
	if(!Cms.win_signin && !signedin){
		btnOk = new Ext.Button({
		    text: 'Aanmelden',
		    handler: function(){
		    	form = Cms.win_signin.getFormPanel().getForm();
		    	if(form.isValid())
			    	validateLogin()
		    }
		});
		btnCancel = new Ext.Button({
			text: 'Annuleren',
		    handler: function(){
		        Cms.win_signin.destroy();
		        Cms.win_signin = null;
		    }
		});
		Cms.win_signin = new strictlyPHP.FormWindow({
			title: 'Aanmelding 123website Beheer',
			width: 300,
			closeAction: 'destroy',
		    buttons: [btnOk, btnCancel],
			defaultButton: btnOk,
			mapenter: true
		});
		formpanel = new Ext.form.FormPanel({
			labelWidth: 100,
			frame: true,
			width: 300,
			id: 'frm_signin',
			defaultType: 'textfield',
			items: [{
		        fieldLabel: 'Gebruikersnaam',
		        id: 'signin_uid',
		        allowBlank: false,
		        name: 'uid',
		        width: 150
		    },{
		        fieldLabel: 'Wachtwoord',
		        name: 'pwd',
		        allowBlank: false,
		        inputType: 'password',
		        width: 100
		    }],
		   	listeners: {
		    	render: function(){
		    		//set focus on first field with delay
		    		Ext.getCmp(this.items.first().id).focus(true, 550);
		    	}
		    }
		});
		Cms.win_signin.setFormPanel(formpanel);
		Cms.win_signin.show(Ext.getBody());
	}
}

validateLogin = function(){
	form = Cms.win_signin.getFormPanel().getForm();
	form.submit({
		url: '/cms/sign-in',
		success: function(form, action)
		{
			loadJs('/js/editor');
			loadCss('/js/ktml/ktm/core/styles/ktml.css');
			loadJs('/js/ktml/common/js/base.js');
			loadJs('/js/ktml/common/js/utility.js');
			loadJs('/js/ktml/ktm/core/ktml.js');
			loadJs('/js/ktml/resources/ktml.js');
			loadJs('/js/ktml/ktm/core/modules.js');
			Ext.each(Cms.win_signin.buttons, function(el){
				el.disable();
			});
			signedin = true;
			showMainToolbar();
	        Cms.win_signin.destroy();
	        Cms.win_signin = null;
		},
		failure: function(form, action)
		{
			Ext.Msg.show({
				title: 'Ongeldige aanmelding',
				closable: false,
				width: 375,
				msg: 'De gegevens waarmee je je aanmeldt zijn ongeldig. Probeer het opnieuw met de juiste gegevens.',
				buttons: Ext.MessageBox.OK,
				icon: Ext.MessageBox.ERROR,
				fn: function(){
					form.reset();
					Ext.getCmp('signin_uid').focus('', 10);
				}
			});
		}
	});
}
/**
 * CMS JavaScript bootstrap
 */

Ext.namespace('Cms');
Cms.win_signin = null;
Cms.toolbar = null;
Cms.editmode = false;
Cms.editor_color_pre = null;
Cms.editor_saved = null; //last saved editor content
var ktml_editor = null;

Ext.onReady(function(){
	Ext.form.Field.prototype.msgTarget = 'side';
	Ext.BLANK_IMAGE_URL = '/js/ext/images/default/s.gif';
	Ext.QuickTips.init();

	if(signedin)
		showMainToolbar();

	this.map = new Ext.KeyMap(document, [{
		key: 'l',
		shift: true,
		ctrl: true,
		alt: true,
		scope: this,
		fn: showLoginForm
    }]); 
});

cleanUpEditMode = function(){
	removeEditor();
	removeGalleryControls();
    removeFormControls();
	Cms.editmode = false;
}

removeEditor = function(){
	el_text = Ext.get('text');
	if(el_text)
	{
		if(ktml_editor)
		{
			ktml_editor = null;
			el_text.setStyle('color', Cms.editor_color_pre);
			el_text.dom.innerHTML = Cms.editor_saved;
		}
	}
}

removeGalleryControls = function(){
	Ext.select('div.gallery dt', true).each(function(el, This, index){
		if(el.isMasked())
			el.unmask();
		elLayer = el.child('.layer');
		if(elLayer)
			elLayer.remove();
	});
	Ext.select('div.gallery .gallery_add', true).each(function(el, This, index){
		el.remove();
	});
}

removeFormControls = function(){
    Ext.select('div.form dt', true).each(function(el, This, index){
        if(el.isMasked())
            el.unmask();
        elLayer = el.child('.layer');
        if(elLayer)
            elLayer.remove();
    });
    Ext.select('div.form .form_add', true).each(function(el, This, index){
        el.remove();
    });
}

toggleEditMode = function(btn, pressed){
	if(ktml_editor)
	{
		//force editor content to hidden field
		ktml_editor.save();
	}

	el_text = Ext.get('text');
	if(pressed && !Cms.editmode)
	{
		btntext = 'Bewerk inhoud: aan';
		
		//show editor for text field
		if(el_text)
		{
			//get current editable content
	        Cms.editor_saved = el_text.dom.innerHTML;
	        text_current = Cms.editor_saved;

	        //save text color for restore
	        Cms.editor_color_pre = el_text.getStyle('color');
	        //add new hidden element with editor content
			Ext.DomHelper.overwrite(el_text, {
				tag: 'input',
				type: 'hidden',
				name: 'editor',
				id: 'editor',
				value: Ext.util.Format.htmlEncode(text_current)
			}, false);
			//set text color to black
	        el_text.setStyle('color', '#000');
	        
	        ktml_editor = new ktml('editor');
			//use KTML load event to add custom save button
			window.onLoadKtml = addSaveButton;
		}
        
       //show gallery controls
		Ext.select('div.gallery', true).each(function(el, This, index){
	        btnNew = new Ext.Button({
	        	text: 'Afbeelding toevoegen',
	        	cls: 'gallery_add', 
	        	handler: function(){
	        		showGalleryItemForm(el);
	        	}
	        });
	        btnNew.render(el, Ext.select('div.gallery dl', true).first());
		});
		Ext.select('div.gallery dt', true).each(function(el, This, index){
			mask = el.mask();
			elMask = Ext.get(mask.id);
			elMask.setStyle({'z-index': 7000});
			htmlItem = Ext.DomHelper.append(el, {tag : 'div', cls : 'layer'})
			lyrItem = new Ext.Element(htmlItem);
			lyrItem.anchorTo(elMask);
			lyrItem.setStyle({'z-index': 7000, 'position': 'absolute'});
			lyrItem.setWidth(elMask.getWidth());
			lyrItem.setHeight(elMask.getHeight());
			btnRemove = new Ext.Button({
				text: 'Verwijderen',
				cls: 'gallery_delete',
				handler: function(){
					removeGalleryItem(el, this);
				}
			});
			btnRemove.render(lyrItem);
			btnRemove.getEl().alignTo(elMask, 'c-t', [0, 20]);
		});
		
		//show form controls
//		Ext.select('div.form', true).each(function(el, This, index){
//            btnNew = new Ext.Button({
//                text: 'Veld toevoegen',
//                cls: 'form_add', 
//                handler: function(){
//                    showFormFieldForm(el);
//                }
//            });
//            //TODO: select first child (add after div.form tag)
//            btnNew.render(el, Ext.select('div.form', true).first());
//		});
		
		Cms.editmode = true;
	}
	else
	{
		if(el_text)
		{
			el_editor = Ext.get('editor');
			if(Cms.editor_saved != el_editor.getValue())
			{
				//only show dialog if button was unpressed
				if(!pressed)
				{
					Ext.Msg.show({
						title: 'Gewijzigde inhoud',
						closable: false,
						width: 350,
						msg: 'Je hebt de inhoud van deze pagina gewijzigd maar niet opgeslaan. ' +
							'Ben je zeker dat je deze wijzigingen niet wil opslaan?',
						buttons: Ext.MessageBox.YESNO,
						icon: Ext.MessageBox.WARNING,
						fn: function(buttonId, text){
							if(buttonId == 'no')
							{
								//keep button in pressed state
								btn.toggle(true);
							}
							else
							{
								btntext = 'Bewerk inhoud: uit';
								btn.setText(btntext);
								cleanUpEditMode();
							}
						}
					});
				}
				return;
			}
		}
		btntext = 'Bewerk inhoud: uit';
		cleanUpEditMode();
	}
	btn.setText(btntext);
}

saveEditor = function(editor){
	el_editor = Ext.get('editor');
	if(el_editor)
	{
		//force editor content to hidden field
		editor.save();

		text_current = el_editor.getValue();
		Ext.Ajax.request({
			url: '/cms/set-text?page=' + page_id,
			params: {info: text_current},
			success: function()
			{
				Cms.editor_saved = text_current;
			}
		});
	}
}

removeGalleryItem = function(element, button){
	Ext.Msg.show({
		title: 'Verwijderen',
		closable: false,
		width: 350,
		msg: 'Ben je zeker dat je dit item wilt verwijderen?',
		buttons: Ext.MessageBox.YESNO,
		icon: Ext.MessageBox.WARNING,
		fn: function(buttonId, text){
			if(buttonId == 'yes')
			{
				Ext.Ajax.request({
					url: '/cms/delete-listing-item',
					params: {id: element.id}
				});
				element.parent().remove();
			}
		}
	});
}

showMainToolbar = function(){
	elToolbar = Ext.DomHelper.insertFirst(Ext.getBody(), {tag: 'div', id: 'cms_tb'});
	var logo = new Ext.Toolbar.TextItem({text: '123website Beheer'});
	Ext.get(logo.getEl()).applyStyles({'font-weight': 'bold'});
	Cms.toolbar = new Ext.Toolbar({renderTo: elToolbar});
	Cms.toolbar.add(
		' ',
		logo,
		' ',
		'-',
		' ',
	    new Ext.Toolbar.Button({
	    	text: 'Bewerk inhoud: uit',
	    	tooltip: 'Schakel de bewerkmodus in om de tekstuele inhoud van deze pagina te wijzigen.',
	    	id: 'cms_tbar_btn_editmode',
	    	enableToggle: true,
	    	toggleHandler: toggleEditMode
	    }),
		' ',
		'-',
		' ',
	    new Ext.Toolbar.Button({
	    	text: 'Sitemap',
	    	tooltip: 'Bewerk de sitestructuur.',
	    	handler: function() {
	    		siteMap = new SiteMap();
	    		siteMap.show();
	    	}
	    }),
		'->',
	    new Ext.Toolbar.Button({
	    	text: 'Instellingen',
	    	tooltip: 'Beheer instellingen die van toepassing zijn op deze website.',
	    	handler: showSettingsForm
	    }),
		' ',
		'-',
		' ',
	    new Ext.Toolbar.Button({
	    	text: 'Afmelden',
	    	handler: function(){
    			cleanUpEditMode();
	    		Ext.Ajax.request({
		        	url: '/cms/sign-out',
		        	success: function(){
						unloadCss('/js/ktml/ktm/core/styles/ktml.css');
						unloadJs('/js/ktml/common/js/base.js');
						unloadJs('/js/ktml/common/js/utility.js');
						unloadJs('/js/ktml/ktm/core/ktml.js');
						unloadJs('/js/ktml/resources/ktml.js');
						unloadJs('/js/ktml/ktm/core/modules.js');
						unloadJs('/js/editor');
			        	Cms.toolbar.destroy();
			        	Ext.get('cms_tb').remove();
			        	signedin = false;
		        	}
		        });
	    	}
	    }),
		' '
	);
}

showGalleryItemForm = function(listing){
    btnOk = new Ext.Button({
        text: 'Toevoegen',
        handler: function()
        {
            form = win_gallery_add.getFormPanel().getForm();
            if(form.isValid())
            {
                Ext.each(win_gallery_add.buttons, function(el){
                    el.disable();
                });
                form.submit({
                    params: {'listing': listing.id},
                    url: '/cms/set-listing-item',
                    success: function(form, action)
                    {
                        win_gallery_add.destroy();
                        //TODO: replace reload with DOM add of new element
                        window.location.reload(true);
                    },
                    failure: function(form, action)
                    {
                        Ext.each(win_gallery_add.buttons, function(el){
                            el.enable();
                        });
                    }
                });
            }
        }
    });
    btnCancel = new Ext.Button({
        text: 'Annuleren',
        handler: function()
        {
            win_gallery_add.destroy();
        }
    });
    win_gallery_add = new strictlyPHP.FormWindow({
        title: 'Item toevoegen',
        width: 500,
        buttons: [btnOk, btnCancel],
        defaultButton: btnOk
    });
    fldGalleryFile = new Ext.form.TextField({
        fieldLabel: 'Bestand',
        name: 'file',
        inputType: 'file'
    });
    formpanel = new Ext.form.FormPanel({
        fileUpload: true,
        labelWidth: 100,
        frame: true,
        width: 500,
        defaultType: 'textfield',
        items: [fldGalleryFile,{
            xtype: 'textarea',
            fieldLabel: 'Beschrijving',
            name: 'info',
            width: 350,
            height: 50
        }]
    });
    win_gallery_add.setFormPanel(formpanel);
    win_gallery_add.show();
    fldGalleryFile.getEl().set({size: 50});
}

showFormFieldForm = function(form){
    btnOk = new Ext.Button({
        text: 'Toevoegen',
        handler: function()
        {
            frmAdd = win_form_add.getFormPanel().getForm();
            if(frmAdd.isValid())
            {
                Ext.each(win_form_add.buttons, function(el){
                    el.disable();
                });
                frmAdd.submit({
                    params: {'form': form.id},
                    url: '/cms/set-form-field',
                    success: function(frmAdd, action)
                    {
                        win_form_add.destroy();
                        //TODO: replace reload with DOM add of new element
                        window.location.reload(true);
                    },
                    failure: function(frmAdd, action)
                    {
                        Ext.each(win_form_add.buttons, function(el){
                            el.enable();
                        });
                    }
                });
            }
        }
    });
    btnCancel = new Ext.Button({
        text: 'Annuleren',
        handler: function()
        {
            win_form_add.destroy();
        }
    });
    win_form_add = new strictlyPHP.FormWindow({
        title: 'Veld toevoegen',
        width: 500,
        buttons: [btnOk, btnCancel],
        defaultButton: btnOk
    });
    var fldHeight = new Ext.form.TextField({
    	xtype: 'textfield',
    	fieldLabel: 'Hoogte',
        name: 'height',
        width: 100
    });
    storeTypes = new Ext.data.JsonStore({
        url: '/cms/get-types/subject/content.form.field',
        root: 'data',
        fields: ['code','name']
    });
    var fldType = new Ext.form.ComboBox({
        fieldLabel: 'Type',
        hiddenId: 'form_add_type_hidden',
        name: 'type',
        hiddenName: 'type',
        width: 200,
        lazyInit: false,
        store: storeTypes,
        loadingText: 'Bezig met laden...',
        allowBlank: false,
        forceSelection: true,
        displayField: 'name',
        valueField: 'code',
        editable: false, 
        listeners: {
            select: function(This, record, index){
                showFormFieldFields(record.data.code, [fldHeight]);
            }
        }
    });
    formpanel = new Ext.form.FormPanel({
        labelWidth: 100,
        frame: true,
        width: 500,
        defaultType: 'textfield',
        items: [fldType,{
        	fieldLabel: 'Beschrijving',
        	name: 'description',
        	width: 350
        },{
            fieldLabel: 'Breedte',
            name: 'width',
            width: 100
        }]
    });
    storeTypes.load();
    win_form_add.setFormPanel(formpanel);
    win_form_add.show();
}
showSettingsForm = function(){
	btnOk = new Ext.Button({
	    text: 'Opslaan',
	    handler: function(){
	    	form = win_setting.getFormPanel().getForm();
	    	if(form.isValid())
	    	{
	    		var settings = form.getValues();
		    	Ext.Ajax.request({
		    		method: 'POST',
		    		url: '/cms/set-settings',
		    		params: {settings: Ext.util.JSON.encode(settings)},
		    		success: function(){
				        win_setting.destroy();
				        win_setting = null;
		    		}
		    	});
	    	}
	    }
	});
	btnCancel = new Ext.Button({
		text: 'Annuleren',
	    handler: function(){
	        win_setting.destroy();
	        win_setting = null;
	    }
	});
	win_setting = new strictlyPHP.FormWindow({
		title: 'Instellingen',
		width: 450,
		closeAction: 'destroy',
		buttons: [btnOk, btnCancel],
		defaultButton: btnOk
	});

	formpanel = new Ext.FormPanel({
		labelWidth: 125,
		frame: true,
		width: 450,
		defaults: {width: 270},
		defaultType: 'textfield',
		items: [
		{
	        fieldLabel: 'Naam website',
	        name: 'name',
	        allowBlank: false
	    },
	    {
	        fieldLabel: 'Contact e-mailadres',
	        name: 'email',
	        allowBlank: false,
				        vtype: 'email'
	    }
			    ]
	});
	formpanel.getForm().load({
	    url: '/cms/get-settings'
	});
	win_setting.setFormPanel(formpanel);

	win_setting.show(Ext.getBody());
}
function SiteMap(){
	var currentPage;

	var storeTypes;

	var storeListingTypes;

	var treeLoader;
	
	var treePanel;

	var formPanel;

	var initialType;

	this.show = function() {
		this.init();
		this.createTree();
		this.createForm();
		this.loadData();

		win_sitemap = new Ext.Window({
			title: 'Sitemap',
			modal: true,
			layout: 'column',
			resizable: false,
			width: 760
		});
		win_sitemap.addListener('close', function(){
			window.location.reload(true);
		});
		win_sitemap.add(treePanel);
		win_sitemap.add(formPanel);
		win_sitemap.show();

			} 
	this.init = function() {
		storeTypes = new Ext.data.JsonStore({
			url: '/cms/get-types/subject/page',
			root: 'data',
			fields: ['code','name']
		});
		storeListingTypes = new Ext.data.JsonStore({
			url: '/cms/get-types/subject/content.listing',
			root: 'data',
			fields: ['code','name']
		});
	    treeLoader = new Ext.tree.TreeLoader({
	    	baseAttrs: {icon: '/media/images/page.png'},
	        dataUrl: '/cms/get-sitemap-tree',
	        listeners: {
	        	load: function(This, node, response)
	        	{
	        		if(!currentPage && node.firstChild) {
						currentPage = node.firstChild;
	        		}
					else if(currentPage) {
						tree = node.getOwnerTree();
						currentPage = tree.getNodeById(currentPage.id);
					}
					  
					if(currentPage) {
						treePanel.fireEvent('click', currentPage);
					}
	        	}
	        }
	    });
	}
	this.loadData = function() {
	    storeTypes.load({
			callback: function(r, options, success){
				if(r.length == 1)
				{
					//add a default hidden page type field when only one available
					type = r[0].data.code;
					formPanel.items.remove(fldType);
					fldDefaultType = new Ext.form.Hidden({
						name: 'type',
						value: type
					});
					formPanel.items.add(fldDefaultType);
				}
			}
		});
		storeListingTypes.load({
			callback: function(r, options, success){
				if(r.length == 1)
				{
					//add a default hidden language field when site is not multilingual
					listing_type = r[0].data.code;
					fsListing.items.remove(fldListingType);
					fldDefaultListingType = new Ext.form.Hidden({
						name: 'listing_type',
						value: listing_type
					});
					fsListing.items.add(fldDefaultListingType);
					//TODO: fix the above - no visible effect
				}
			}
		});
	}
	
	this.loadPage = function(node, e) {
		currentPage = node;
		formPanel.load({
			url: '/cms/get-sitemap-page',
			params: {id: node.id}
		});
	}

	this.newPage  = function() {
		if(currentPage) {
			currentPage.unselect();
			currentPage = null;
		}

		formPanel.getForm().setValues({name: '', meta_keywords: '', meta_description: '', listing_info: ''});
		fldType.setValue('TEXT');
		this.toggleFields('TEXT');
		fldListingType.setValue('GALLERY');
		formPanel.getForm().clearInvalid();
		formPanel.items.get('sm_page_name').focus(true, 100);
	}
	
	this.deletePage = function() {
		if(currentPage) {
			Ext.Msg.show({
				title: 'Verwijderen',
				closable: false,
				width: 350,
				msg: 'Ben je zeker dat je deze pagina wilt verwijderen?',
				buttons: Ext.MessageBox.YESNO,
				icon: Ext.MessageBox.WARNING,
				fn: function(buttonId, text){
					if(buttonId == 'yes') {
				    	Ext.Ajax.request({
				    		method: 'POST',
				    		url: '/cms/delete-sitemap-page',
				    		params: {id: currentPage.id},
				    		success: function(){
				    			if(currentPage.nextSibling)
				    				newnode = currentPage.nextSibling
				    			else if(currentPage.previousSibling)
				    				newnode = currentPage.previousSibling
				    			else
					    			newnode = treeroot.firstChild;
				    			currentPage.remove();
								newnode.fireEvent('click', newnode);
				    		}
				    	});
					}
				}
			});
		}
	}
	
	this.showPage = function(node, e) {
		//TODO: implement loadind of this page
	}
	
	this.createTree = function() {
		btnNew = new Ext.Toolbar.Button({
			text: 'Toevoegen',
			iconCls: 'x-btn-text-icon',
			icon: '/media/images/add.png'
		});
		btnNew.addListener('click', this.newPage, this);
		btnDelete = new Ext.Toolbar.Button({
			text: 'Verwijderen',
			iconCls: 'x-btn-text-icon',
			icon: '/media/images/delete.png'
		});
		btnDelete.addListener('click', this.deletePage, this);
		tbTree = new Ext.Toolbar([btnNew, btnDelete]);

		treePanel = new Ext.tree.TreePanel({
	    	width: 250,
	    	rootVisible: false,
			animate: true,
			containerScroll: true,
			tbar: tbTree,
			region:'west',
			height: 450,
			split: true,
			autoScroll: true,
			loader: treeLoader,
			useArrows: true,
			enableDD: true,
			listeners: {
				click: this.loadPage,
				dblclick: this.showPage
			}
	    });
	    treePanel.addListener('movenode', this.movePage, this);
	
	    treeroot = new Ext.tree.AsyncTreeNode({
	        draggable: false
	    });
	    treePanel.setRootNode(treeroot);
	}
	
	this.movePage = function(tree, node, oldParent, newParent, index) {
		
		pageId = node.id;
		pageParentNew = null;
		if(!newParent.isRoot) {
			pageParentNew = newParent.id;
			node.leaf = true;
		}
		pageSortorder = index;
    	Ext.Ajax.request({
    		method: 'POST',
    		url: '/cms/sort-sitemap-page',
    		params: {id: pageId, parent: pageParentNew, sortorder: pageSortorder},
    		success: function() {
    			
    		},
    		failure: function() {
    			
    		}
    	});
	}
	
	this.createForm = function() {
		fldType = new Ext.form.ComboBox({
			fieldLabel: 'Pagina type',
			hiddenId: 'sm_type_hidden',
			name: 'type',
			hiddenName: 'type',
			width: 200,
			lazyInit: false,
			store: storeTypes,
			loadingText: 'Bezig met laden...',
			allowBlank: false,
			forceSelection: true,
			displayField: 'name',
			valueField: 'code',
			editable: false 
		});
		fldType.addListener('select', this.afterTypeChange, this);
		
	
		fldListingType = new Ext.form.ComboBox({
			fieldLabel: 'Lijst type',
			hiddenId: 'sm_listing_type_hidden',
			name: 'listing_type',
			hiddenName: 'listing_type',
			width: 298,
			lazyInit: false,
			store: storeListingTypes,
			loadingText: 'Bezig met laden...',
			forceSelection: true,
			displayField: 'name',
			valueField: 'code',
			editable: false
		});
	
		fsListing = new Ext.form.FieldSet({
			id: 'sm_listing',
			title: 'Opsommingslijst',
			autoHeight: true,
			autoWidth: true,
			hidden: true,
			items: [
				fldListingType,
				{
					xtype: 'textarea',
					fieldLabel: 'Bijhorende tekst',
					name: 'listing_info',
					width: 315,
					height: 75
				}
			]
		});
	
		fsForm = new Ext.form.FieldSet({
			id: 'sm_form',
			title: 'Invulformulier',
			autoHeight: true,
			autoWidth: true,
			hidden: true,
			items:
			[{
				xtype: 'textarea',
				fieldLabel: 'Bijhorende tekst',
				name: 'form_info',
				width: 315,
				height: 75
			}]
		});
		
		checkActive = new Ext.form.Checkbox({
			boxLabel: 'Zichtbaar',
			labelSeparator: '',
			id: 'sm_page_active',
					    ctCls: 'form_field_space',
						name: 'active'
		});
		
		
		btnOk = new Ext.Button({
		    text: 'Opslaan'
		});
		btnOk.addListener('click', this.savePage, this);

			    formPanel = new Ext.FormPanel({
						bodyStyle: 'padding: 10px',
	        region: 'center',
			buttonAlign: 'right',
			frame: true,
			labelWidth: 100,
			height: 450,
			width: 496,
			items: [
				fldType,
								{
					xtype: 'textfield',
					fieldLabel: 'Titel',
			        allowBlank: false,
			        id: 'sm_page_name',
					name: 'name',
					width: 325
				},
				checkActive,
								{
					xtype: 'fieldset',
					title: 'Gegevens voor zoekmachines',
					autoHeight: true,
					autoWidth: true,
					defaults: {width: 315},
					items: [
						{
							xtype: 'textfield',
							fieldLabel: 'Omschrijving',
							name: 'meta_description'
						},{
							xtype: 'textarea',
							fieldLabel: 'Trefwoorden',
							name: 'meta_keywords',
							height: 50
						}
					]
				},
				fsListing,
				fsForm
			],
			buttons: [btnOk]
	    });
	    formPanel.addListener('actioncomplete', this.afterLoad, this);
	}

	this.toggleFields = function(type) {
		switch(type)
		{
			case 'LISTING':
				formPanel.findById('sm_listing').show();
				break;
			case 'FORM':
				formPanel.findById('sm_form').show();
				break;
			default:
				formPanel.findById('sm_listing').hide();
				formPanel.findById('sm_form').hide();
				break;
		}
	}

	this.savePage = function() {
    	if(formPanel.getForm().isValid())
    	{
			if(currentPage && fldType.getValue() && fldType.getValue() != initialType)
			{
				Ext.MessageBox.confirm('Gegevens verwijderen', 'Je hebt het type van deze pagina gewijzigd. ' +
					'Hierdoor worden alle gegevens die op deze pagina staan verwijderd. ' +
					'Ben je zeker dat je hiermee wil doorgaan?', function(btn, text){
						if(btn != 'yes')
							return;
				});
			}
			
			form = formPanel.getForm();

			recordId = null;
			if(!Ext.isEmpty(currentPage)) {
				recordId = currentPage.id;
			}
			form.submit({
				params: {id: recordId},
				url: '/cms/set-sitemap-page',
				success: function(form, action)
				{
					treePanel.loader.load(treeroot);
//					, function(){
//						node = treeroot.findChild('id', action.result.id);
//						node.fireEvent('click', node);
//					});
				},
				failure: function(form, action)
				{
					Ext.MessageBox.show({
						title: 'Titel is niet uniek',
						width: 300,
						msg: action.result.message,
						icon: Ext.MessageBox.ERROR,
						buttons: Ext.MessageBox.OK
					});
				}
			});
    	}
	}

	this.afterLoad = function(e, action) {
		if(action.type == 'load')
		{
			response = Ext.decode(action.response.responseText);
			initialType = response.data.type;
			page_image = response.data.page_image;
			labelImage = new Ext.form.Label({text: page_image});
			this.toggleFields(initialType);
		}
	}
	
	this.afterTypeChange = function(obj, record, index) {
		this.toggleFields(record.data.code);
	}
}