var uniqueId;
var assessmentType;
var assessmentUuid;
var assessmentName;
var conn = new Ext.data.Connection();
var categoryAddloadingMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Adding category - Please wait..."
});
var uploadingloadingMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Uploading assessment - Please wait..."
});
var emptyTrashMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Emptying trash - Please wait..."
});
var categoryRemoveloadingMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Removing category - Please wait..."
});
var categoryUpdateloadingMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Updating category - Please wait..."
});
var htmlUpdateLoadingMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Updating header/footer - Please wait..."
});
var userTokenUpdate = new Ext.LoadMask(Ext.getBody(), {
    msg: "Updating user tokens - Please wait..."
});


var categoryField = new Ext.form.TextField({
    fieldLabel: 'Category name',
    name: 'category',
    allowBlank: false,
    disabled: true
});

var newCategoryField = new Ext.form.TextField({
    fieldLabel: 'New category name',
    name: 'newcategory',
    allowBlank: false,
});

var userPermissionPanel = new Ext.Panel({
    border: false,
    bodyBorder: false
});
var userGroupId;
//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.UsersTreeLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes: function(attr){
        if (attr.userId && attr.userId != null) {
            attr.href = attr.modelid;
            attr.text = attr.firstname + ' ' + attr.lastname + ' [' + attr.login + ']';
            attr.leaf = true;
            attr.loaded = true;
            attr.allowDrag = true;
            attr.allowDrop = false;
            attr.iconCls = attr.idclass;
            attr.userId = attr.userId;
            attr.id = attr.login;
        }
    }
});

//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.UserGroupsTreeLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes: function(attr){
        if (attr.idclass == 'UserGroup') {
            attr.href = attr.modelid;
            attr.text = attr.name;
            attr.iconCls = attr.idclass;
            attr.leaf = false;
            attr.loaded = true;
            attr.allowDrag = false;
            attr.allowDrop = true;
            attr.groupId = attr.id;
        }
        else 
            if (attr.idclass == 'User') {
                attr.text = attr.firstname + ' ' + attr.lastname + ' [' + attr.login + ']';
                attr.leaf = true;
                attr.loaded = true;
                attr.iconCls = attr.idclass;
                attr.allowDrag = true;
                attr.allowDrop = false;
                attr.userId = attr.userId;
                
            }
    }
});


UsersPanel = function(){
    UsersPanel.superclass.constructor.call(this, {
        id: 'usersPanel-tree',
        title: 'Available users',
        columnWidth: .5,
        split: true,
        height: 200,
        cmargins: '0 0 0 0',
        rootVisible: false,
        lines: false,
        autoScroll: true,
        margins: '0 0 0 0',
        bodyBorder: false,
        border: false,
        animate: true,
        collapseMode: 'mini',
        animCollapse: true,
        collapsible: false,
        enableDD: true,
        useArrows: true,
        preloadChildren: true,
        ddAppendOnly: true,
        loader: new Ext.app.UsersTreeLoader({
            dataUrl: 'getAllUsers.do?userId=' + currentUserId
        }),
        root: new Ext.tree.AsyncTreeNode({
            text: 'Models',
            id: 'root',
            expanded: true,
            loaded: false,
            allowDrag: false,
            allowDrop: false
        })
    });
    this.getSelectionModel().on('selectionchange', function(sm, node){
    
    });
};

Ext.extend(UsersPanel, Ext.tree.TreePanel, { //additional methods if needed
});
//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.UserGroupsTreeLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes: function(attr){
        if (attr.idclass == 'UserGroup') {
            attr.href = attr.modelid;
            attr.text = attr.name;
            attr.iconCls = attr.idclass;
            attr.leaf = false;
            attr.loaded = true;
            attr.allowDrag = false;
            attr.allowDrop = true;
            attr.groupId = attr.id;
        }
        else 
            if (attr.idclass == 'User') {
                attr.text = attr.firstname + ' ' + attr.lastname + ' [' + attr.login + ']';
                attr.leaf = true;
                attr.loaded = true;
                attr.iconCls = attr.idclass;
                attr.allowDrag = true;
                attr.allowDrop = false;
                attr.userId = attr.userId;
                
            }
    }
});
UserGroupsPanel = function(userGroupId){
    UserGroupsPanel.superclass.constructor.call(this, {
        id: 'usergroupsPanel-tree',
        title: 'Assigned users',
        columnWidth: .5,
        split: true,
        height: 200,
        cmargins: '0 0 0 0',
        rootVisible: true,
        lines: false,
        autoScroll: true,
        margins: '0 0 0 0',
        bodyBorder: false,
        border: false,
        animate: true,
        collapseMode: 'mini',
        animCollapse: true,
        collapsible: false,
        enableDD: true,
        useArrows: true,
        preloadChildren: true,
        ddAppendOnly: true,
        loader: new Ext.app.UserGroupsTreeLoader({
            dataUrl: 'getUserGroupOfId.do?userId=' + currentUserId + '&userGroupId=' + userGroupId
        }),
        root: new Ext.tree.AsyncTreeNode({
            text: 'Assigned users',
            id: 'root',
            iconCls: 'UserGroup',
            expanded: true,
            loaded: false,
            allowDrag: false,
            allowDrop: true
        }),
        contextMenu: new Ext.menu.Menu({
            items: [{
                id: 'delete-node',
                text: 'Detach user from usergroup'
            }, {
                id: 'email-notification',
                text: 'Email notification'
            }],
            listeners: {
                itemclick: function(item){
                    switch (item.id) {
                        case 'delete-node':
                            var n = item.parentMenu.contextNode;
                            if (n.parentNode) {
                                conn.request({
                                    url: 'detachUser.do',
                                    method: 'GET',
                                    params: {
                                        'userId': currentUserId,
                                        'userGroupId': userGroupId,
                                        'detachuserId': item.parentMenu.contextNode.attributes.userId
                                    },
                                    success: function(responseObject){
                                        n.remove();
                                    //userGroupsPanel.getLoader().load(userGroupsPanel.getRootNode());
                                    },
                                    failure: function(){
                                        //Undo move!
                                        Ext.Msg.alert('Status', 'Unable to update tree in data directory - the update is only shown on the user interface and will be lost after refresh!');
                                        n.remove();
                                    }
                                });
                                
                            }
                            break;
                        case 'email-notification':
                            var n = item.parentMenu.contextNode;
                            var emailWindow = new Ext.form.TextArea({
                                xtype: 'textarea',
                                id: 'assessmentEmail',
                            });
                            var win = new Ext.Window({
                                width: 500,
                                height: 400,
                                layout: 'fit',
                                bbar: new Ext.Toolbar({
                                    id: 'send-email',
                                    items: ['->', {
                                        text: 'Copy into mail client',
                                        handler: function(){
                                            window.open('mailto:' + item.parentMenu.contextNode.attributes.email + '?subject=' + encodeURIComponent('Participation request: ' + assessmentName) + '&body=' + encodeURIComponent(Ext.getCmp('assessmentEmail').getValue()));
                                        }
                                    }]
                                }),
                                items: [emailWindow]
                            });
                            
                            switch (assessmentType) {
                                case 'Named user - allow reassessment':
                                    win.setTitle('Email notification for ' + item.parentMenu.contextNode.attributes.firstname + ' ' + item.parentMenu.contextNode.attributes.lastname + ' [' + item.parentMenu.contextNode.attributes.email + ']');
                                    emailWindow.setValue('You are invited to participate in the assessment: ' + assessmentName + '.\n\n\nTo participate in the assessment please click here: \n\n' + basePath + '?' + assessmentUuid + ' \n\nPlease use the user credentials provided to access the assessment. You can restart the assessment at any point in time. Input provided during previous runs are stored and presented to you.\n\nThank you for your participation!\n\n');
                                    break;
                                case 'Named user - no reassessment':
                                    win.setTitle('Email notification for ' + item.parentMenu.contextNode.attributes.firstname + ' ' + item.parentMenu.contextNode.attributes.lastname + ' [' + item.parentMenu.contextNode.attributes.email + ']');
                                    emailWindow.setValue('You are invited to participate in the assessment: ' + assessmentName + '.\n\n\nTo participate in the assessment please click here: \n\n' + basePath + '?' + assessmentUuid + ' \n\nPlease use the user credentials provided to access the assessment. The results are stored on the server as soon as you finalize the assessment.\n\nThank you for your participation!\n\n');
                                    break;
                                case 'Anonymous user - multiple usage':
                                    win.setTitle('Email notification');
                                    emailWindow.setValue('You are invited to participate in the assessment: ' + assessmentName + '.\n\n\nTo participate in the assessment please click here: \n\n' + basePath + '?' + assessmentUuid + ' \n\nPlease use the token below to access the assessment. The results are stored on the server anonymously.\nToken: ' + item.parentMenu.contextNode.attributes.login + '\n\nThank you for your participation!\n\n');
                                    break;
                                case 'Anonymous user - single usage':
                                    win.setTitle('Email notification');
                                    emailWindow.setValue('You are invited to participate in the assessment: ' + assessmentName + '.\n\n\nTo participate in the assessment please click here: \n\n' + basePath + '?' + assessmentUuid + ' \n\nPlease use the token below to access the assessment. The results are stored on the server anonymously.\nToken: ' + item.parentMenu.contextNode.attributes.login + '\n\nThank you for your participation!\n\n');
                                    break;
                            }
                            
                            win.show();
                            break;
                    }
                }
            }
        }),
        listeners: {
            contextmenu: function(node, e){
                //          Register the context node with the menu so that a Menu Item's handler function can access
                //          it via its parentMenu property.
                node.select();
                var c = node.getOwnerTree().contextMenu;
                c.contextNode = node;
                if (node.attributes.idclass == 'User') {
                    c.showAt(e.getXY());
                }
                
            }
        }
    
    });
    this.getSelectionModel().on('selectionchange', function(sm, node){
    
    });
    
    this.on('beforenodedrop', function(dropEvent){
        var dropUserGroup = this.getNodeById(dropEvent.target.id);
        if (!dropUserGroup.findChild('userId', dropEvent.dropNode.attributes.userId)) {
            var n = dropEvent.dropNode;
            var copy = new Ext.tree.TreeNode(Ext.apply({}, n.attributes));
            dropEvent.dropNode = copy;
            conn.request({
                url: 'attachUser.do',
                method: 'GET',
                params: {
                    'userId': currentUserId,
                    'userGroupId': userGroupId,
                    'newUserId': dropEvent.dropNode.attributes.userId
                },
                success: function(responseObject){
                
                    //userGroupsPanel.getLoader().load(userGroupsPanel.getRootNode());
                },
                failure: function(){
                    dropEvent.cancel = false;
                    //Undo move!
                    Ext.Msg.alert('Status', 'Unable to update tree in data directory - the update is only shown on the user interface and will be lost after refresh!');
                }
            });
        }
        else {
            dropEvent.cancel = true;
        }
    });
    
    
};

Ext.extend(UserGroupsPanel, Ext.tree.TreePanel, { //additional methods if needed
});
Ext.BLANK_IMAGE_URL = 'static/ext-2.2/resources/images/default/s.gif';
//update for ext-js 2.2
Ext.override(Ext.Container, {
    render: function(){
        Ext.Container.superclass.render.apply(this, arguments);
        if (this.layout) {
            if (typeof this.layout == 'string') {
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }
            this.setLayout(this.layout);
            if (this.activeItem !== undefined) {
                var item = this.activeItem;
                delete this.activeItem;
                this.layout.setActiveItem(item);
                //return;
            }
        }
        if (!this.ownerCt) {
            this.doLayout();
        }
        if (this.monitorResize === true) {
            Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
        }
    }
});
Ext.override(Ext.layout.Accordion, {
    setActiveItem: function(c){
        c = this.container.getComponent(c);
        if (this.activeItem != c) {
            if (c.rendered && c.collapsed) {
                c.expand();
            }
            else {
                this.activeItem = c;
            }
        }
    },
    renderItem: function(c){
        if (this.animate === false) {
            c.animCollapse = false;
        }
        c.collapsible = true;
        if (this.autoWidth) {
            c.autoWidth = true;
        }
        if (this.titleCollapse) {
            c.titleCollapse = true;
        }
        if (this.hideCollapseTool) {
            c.hideCollapseTool = true;
        }
        if (this.collapseFirst !== undefined) {
            c.collapseFirst = this.collapseFirst;
        }
        if (!this.activeItem && !c.collapsed) {
            this.activeItem = c;
        }
        else 
            if (this.activeItem) {
                c.collapsed = this.activeItem != c;
            }
        Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
        c.header.addClass('x-accordion-hd');
        c.on('beforeexpand', this.beforeExpand, this);
    }
});
/**
 * @author wutz
 */
//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.ModelTreeLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes: function(attr){
        if (attr.idclass == 'Assessment model') {
            attr.href = attr.modelid;
            attr.text = attr.name + ' ' + attr.version;
            attr.leaf = true;
            attr.loaded = true;
            attr.allowDrag = true;
            attr.allowDrop = false;
            attr.id = attr.name + '@' + attr.version;
            attr.uniqueId = attr.uuid;
        }
        else 
            if (attr.idclass == 'Trash') {
                attr.text = attr.name;
                attr.leaf = false;
                attr.loaded = true;
                attr.iconCls = 'trash';
                attr.allowDrag = false;
                attr.allowDrop = true;
                attr.id = attr.name;
            }
            else 
                if (attr.idclass == 'Category') {
                    attr.text = attr.name;
                    attr.leaf = false;
                    attr.loaded = true;
                    attr.iconCls = 'category';
                    attr.allowDrag = false;
                    attr.allowDrop = true;
                    attr.id = attr.name;
                }
    }
});



NavigationPanel = function(){
    NavigationPanel.superclass.constructor.call(this, {
        id: 'navigationPanel-tree',
        region: 'center',
        split: true,
        cmargins: '0 0 0 0',
        rootVisible: false,
        lines: false,
        autoScroll: true,
        margins: '0 0 0 0',
        bodyBorder: false,
        border: false,
        animate: true,
        collapseMode: 'mini',
        animCollapse: true,
        collapsible: true,
        enableDD: true,
        useArrows: true,
        preloadChildren: true,
        ddAppendOnly: true,
        loader: new Ext.app.ModelTreeLoader({
            dataUrl: 'processlist.do?userId=' + currentUserId
        }),
        root: new Ext.tree.AsyncTreeNode({
            text: 'Models',
            id: 'root',
            expanded: true,
            loaded: false,
            allowDrag: false,
            allowDrop: false
        })
    });
    this.on('dblclick', function(node, e){
        //alert (node.isLeaf());
        if (node && node.isLeaf()) {
            update.form.reset();
            //set assessment type to field and add the respective configuration options
            assessmentType = node.attributes.type;
            assessmentUuid = node.attributes.uuid;
            assessmentName = node.attributes.name;
            userGroupId = node.attributes.userGroupId;
            if (userPermissionPanel.items) {
                userPermissionPanel.items.each(function(item){
                    userPermissionPanel.remove(item);
                });
            }
            Ext.getCmp('assessmenttype').setText('<br>Assessment type: <b>' + assessmentType + '</b><br><hr noshade style="color:#99BBE8;" size="1">', false);
            //initialize the user groups
            userPermissionPanel.add({
                xtype: 'label',
                fieldLabel: 'foo',
                name: 'foo',
                html: '<br><hr noshade style="color:#99BBE8;" size="1"><br>User permissions and distribution<br><br>'
            })
            var userGroupsPanel = new UserGroupsPanel(userGroupId);
            var usersPanel = new UsersPanel();
            
            switch (assessmentType) {
                case 'Anonymous user - multiple usage':
                    userPermissionPanel.add(new Ext.Panel({
                        layout: 'column',
                        items: [userGroupsPanel, new Ext.Panel({
                            title: 'Create user\'s token',
                            bodyBorder: false,
                            border: false,
                            bodyStyle: 'padding:5px 5px 0;',
                            columnWidth: .5,
                            items: [{
                                html: 'Create a user token for the assessment that can be used by multiple participants at the same time. The assessment can be used with the token as long as available in the usergroup.<br><br> By clicking on the button below, a unique token is created and assigned to the user group. Multiple tokens can be created if needed.<br><br> ',
                                border: false,
                                bodyBorder: false
                            }, {
                                xtype: 'button',
                                fieldLabel: 'foo',
                                name: 'foo',
                                text: 'Create token',
                                handler: function(){
                                    //FIXME: Update function
                                    userTokenUpdate.show();
                                    conn.request({
                                        url: 'createUserTokenInUserGroup.do',
                                        method: 'POST',
                                        params: 'userId=' + currentUserId + '&numberOfTokens=1&userGroupId=' + userGroupId,
                                        success: function(responseObject){
                                            userGroupsPanel.getLoader().load(userGroupsPanel.getRootNode());
                                            userGroupsPanel.getRootNode().expand();
                                            userTokenUpdate.hide();
                                        },
                                        failure: function(){
                                            userTokenUpdate.hide();
                                        }
                                    });
                                }
                            }]
                        })]
                    }));
                    break;
                case 'Anonymous user - single usage':
                    userPermissionPanel.add(new Ext.Panel({
                        layout: 'column',
                        items: [userGroupsPanel, new Ext.Panel({
                            title: 'Create users\' tokens',
                            bodyBorder: false,
                            border: false,
                            bodyStyle: 'padding:5px 5px 0;',
                            columnWidth: .5,
                            items: [{
                                html: 'Create user tokens for the assessment that are valid for a single assessment runthrough.<br><br> By entering the number of unique token and clicking on the button below, user tokens are created and assigned to the user group.<br><br> ',
                                border: false,
                                bodyBorder: false
                            }, {
                                xtype: 'numberfield',
                                id: 'nooftoken'
                            }, {
                                xtype: 'button',
                                fieldLabel: 'foo',
                                name: 'foo',
                                text: 'Create tokens',
                                handler: function(){
                                    //FIXME: Update function
                                    userTokenUpdate.show();
                                    conn.request({
                                        url: 'createUserTokenInUserGroup.do',
                                        method: 'POST',
                                        params: 'userId=' + currentUserId + '&numberOfTokens=' + Ext.getCmp('nooftoken').getValue() + '&userGroupId=' + userGroupId,
                                        success: function(responseObject){
                                            userGroupsPanel.getLoader().load(userGroupsPanel.getRootNode());
                                            userGroupsPanel.getRootNode().expand();
                                            userTokenUpdate.hide();
                                        },
                                        failure: function(){
                                            userTokenUpdate.hide();
                                        }
                                    });
                                }
                            }]
                        })]
                    }));
                    break;
                case 'Named user - allow reassessment':
                    userPermissionPanel.add(new Ext.Panel({
                        layout: 'column',
                        items: [userGroupsPanel, usersPanel]
                    }));
                    break;
                case 'Named user - no reassessment':
                    userPermissionPanel.add(new Ext.Panel({
                        layout: 'column',
                        items: [userGroupsPanel, usersPanel]
                    }));
                    break;
                    
            }
            userPermissionPanel.doLayout();
            //update/layout and activate
            east.getLayout().setActiveItem('quest-update');
            //loading header and footer
            conn.request({
                url: 'headerfooterreader.do',
                method: 'POST',
                params: 'uniqueId=' + node.attributes.uuid,
                success: function(responseObject){
                    uniqueId = node.attributes.uuid;
                    temp = responseObject.responseText.split('@');
                    headerHTML = temp[0];
                    footerHTML = temp[1];
                    Ext.getCmp('htmlheader').setValue(headerHTML);
                    Ext.getCmp('htmlfooter').setValue(footerHTML);
                },
                failure: function(){
                    //ignore this problem
                }
            });
            
        }
        if (node && !node.isLeaf() && node.attributes.name != 'Uncategorized' && node.attributes.name != 'Trash') {
            east.getLayout().setActiveItem('cat-update');
            categoryField.setValue(node.attributes.name);
        }
        //return node.isLeaf();
    });
    this.on('beforenodedrop', function(dropEvent){
        if (dropEvent.dropNode.attributes.idclass == 'User') {
            dropEvent.cancel = true;
        }
        else {
            conn.request({
                url: 'movequestionnaire.do?userId=' + currentUserId,
                method: 'GET',
                params: {
                    'nodeId': dropEvent.dropNode.attributes.uniqueId,
                    'newParentId': dropEvent.target.id
                },
                success: function(responseObject){
                },
                failure: function(){
                    dropEvent.cancel = false;
                    //Undo move!
                    Ext.Msg.alert('Status', 'Unable to update category tree in data directory - the update is only shown on the user interface and will be lost after refresh!');
                }
            });
        }
    });
    
    
};

Ext.extend(NavigationPanel, Ext.tree.TreePanel, { //additional methods if needed
});

var upload = new Ext.FormPanel({
    bodyBorder: false,
    border: false,
    labelWidth: 130, // label settings here cascade unless overridden
    url: 'upload.do?userId=' + currentUserId,
    frame: false,
    title: 'Upload assessment',
    bodyStyle: 'padding:5px 5px 0;',
    width: 350,
    method: 'POST',
    fileUpload: true,
    defaults: {
        width: 230
    },
    defaultType: 'textfield',
    
    items: [{
        fieldLabel: 'Assessment name',
        name: 'identifier',
        allowBlank: false
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: 'Please specify a name for the assessment to be uploaded to the system. The current date and time in format \"[YYYYMMDD HHmm\]\" is automatically appended as the version of the upload. This information is only made available to the administrators of the system.<br><br>The assessment is automatically stored in the category \"Uncategorized\" and can be moved to the correct area after creation and upload.<br><br>&nbsp;<br><br>ATTENTION: Do not use any special characters when naming the assessment!<br><br>'
    }, {
        inputType: 'file',
        fieldLabel: 'Package',
        name: 'file',
        allowBlank: false
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        text: 'Please locate the exported package in the locale file system. During the upload of the file, the validity will be checked and returns a status message.'
    }],
    
    buttons: [{
        text: 'Upload',
        handler: function(){
        
            uploadingloadingMask.show();
            upload.form.submit({
            
                success: function(form, action){
                
                
                    uploadingloadingMask.hide();
                    upload.form.reset();
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                },
                failure: function(form, action){
                    uploadingloadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Upload',
                        msg: 'Upload error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            upload.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }, {
        text: 'Clear',
        handler: function(){
            upload.form.reset();
        }
    }]
});
var category = new Ext.FormPanel({
    bodyBorder: false,
    border: false,
    labelWidth: 130, // label settings here cascade unless overridden
    url: 'addcategory.do?userId=' + currentUserId,
    frame: false,
    title: 'Create new category',
    bodyStyle: 'padding:5px 5px 0;',
    width: 350,
    defaults: {
        width: 230
    },
    defaultType: 'textfield',
    
    items: [{
        fieldLabel: 'Category name',
        name: 'category',
        allowBlank: false,
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: 'Please specify the name of the new category to be added as a root category. After creation existing assessments can be moved to the category.<br><br>ATTENTION: Do not use any special characters when naming the category!'
    }],
    
    buttons: [{
        text: 'Add',
        handler: function(){
        
            categoryAddloadingMask.show();
            category.form.submit({
            
                success: function(form, action){
                    categoryAddloadingMask.hide();
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                    category.form.reset();
                },
                failure: function(form, action){
                    categoryAddloadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Adding category',
                        msg: 'Adding category error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            category.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }, {
        text: 'Clear',
        handler: function(){
            category.form.reset();
        }
    }]
});


var modifycategory = new Ext.FormPanel({
    bodyBorder: false,
    border: false,
    labelWidth: 130, // label settings here cascade unless overridden
    url: 'updatecategory.do?userId=' + currentUserId,
    frame: false,
    title: 'Update category',
    id: 'cat-update',
    bodyStyle: 'padding:5px 5px 0;',
    width: 350,
    defaults: {
        width: 230
    },
    defaultType: 'textfield',
    
    items: [categoryField, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: 'Please select a category from the left and start modifying the category. The category \'Uncategorized\' as well as \'Trash\' are locked and can not be modified<br><br>'
    }, newCategoryField],
    
    buttons: [{
        text: 'Delete category',
        handler: function(){
        
            categoryRemoveloadingMask.show();
            conn.request({
                url: 'removecategory.do?userId=' + currentUserId,
                method: 'GET',
                params: {
                    'category': categoryField.getValue()
                },
                success: function(responseObject){
                    categoryRemoveloadingMask.hide();
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                    modifycategory.form.reset();
                },
                failure: function(){
                    categoryRemoveloadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Deleting category',
                        msg: 'Deleting category error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            modifycategory.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
            });
            
        }
    }, {
        text: 'Update category',
        handler: function(){
            categoryUpdateloadingMask.show();
            conn.request({
                url: 'updatecategory.do?userId=' + currentUserId,
                method: 'GET',
                params: {
                    'category': categoryField.getValue(),
                    'newcategory': newCategoryField.getValue()
                },
                success: function(responseObject){
                    categoryUpdateloadingMask.hide();
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                    modifycategory.form.reset();
                },
                failure: function(){
                    categoryUpdateloadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Updating category',
                        msg: 'Updating category error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            modifycategory.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
            });
            category.form.reset();
        }
    }, {
        text: 'Clear',
        handler: function(){
            category.form.reset();
        }
    }]
});

var trash = new Ext.FormPanel({
    bodyBorder: false,
    border: false,
    labelWidth: 75, // label settings here cascade unless overridden
    url: 'emptytrash.do?userId=' + currentUserId,
    frame: false,
    title: 'Empty trash',
    bodyStyle: 'padding:5px 5px 0;',
    width: 350,
    defaults: {
        width: 230
    },
    defaultType: 'textfield',
    
    items: [{
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: 'By clicking on \'Empty trash\' all assessments currently in the Trash folder are deleted from the system!<br><br>'
    }, {
        xtype: 'button',
        fieldLabel: 'foo',
        name: 'foo',
        text: 'Empty trash',
        handler: function(){
            emptyTrashMask.show();
            trash.form.submit({
            
                success: function(form, action){
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                    emptyTrashMask.hide();
                },
                failure: function(form, action){
                    emptyTrashMask.hide();
                    Ext.MessageBox.show({
                        title: 'Emptying trash',
                        msg: 'Emptying trash error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            trash.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }]
});
var update = new Ext.FormPanel({
    bodyBorder: false,
    border: false,
    id: 'quest-update',
    url: 'updatequestionnaire.do',
    labelWidth: 75, // label settings here cascade unless overridden
    frame: false,
    title: 'Update assessment',
    bodyStyle: 'padding:5px 5px 0;',
    defaultType: 'textfield',
    autoScroll: true,
    fileUpload: true,
    
    items: [{
        xtype: 'hidden',
        name: 'userId',
        value: currentUserId
    }, {
        xtype: 'hidden',
        name: 'uniqueId',
        value: uniqueId
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        id: 'assessmenttype',
        name: 'foo',
        html: ''
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: '<br>Header content (displayed at the top right of the assessment)<br><br>'
    }, new Ext.form.HtmlEditor({
        width: 600,
        height: 100,
        hideLabel: true,
        name: 'htmlheader',
        id: 'htmlheader'
    
    }), {
        xtype: 'button',
        fieldLabel: 'foo',
        name: 'foo',
        text: 'Update header',
        handler: function(){
            htmlUpdateLoadingMask.show();
            conn.request({
                url: 'headerfooterwriter.do',
                params: 'uniqueId=' + uniqueId + '&content=' + Ext.getCmp('htmlheader').getValue() + '&identifier=header',
                success: function(responseObject){
                    htmlUpdateLoadingMask.hide();
                },
                failure: function(form, action){
                    htmlUpdateLoadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Updating header/footer',
                        msg: 'Updating header/footer error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: '<br><hr noshade style="color:#99BBE8;" size="1"><br>Footer content (displayed at the bottom of the assessment)<br><br>'
    }, new Ext.form.HtmlEditor({
        width: 600,
        height: 100,
        hideLabel: true,
        name: 'htmlfooter',
        id: 'htmlfooter'
    
    }), {
        xtype: 'button',
        fieldLabel: 'foo',
        name: 'foo',
        text: 'Update footer',
        handler: function(){
            htmlUpdateLoadingMask.show();
            conn.request({
                url: 'headerfooterwriter.do',
                params: 'uniqueId=' + uniqueId + '&content=' + Ext.getCmp('htmlfooter').getValue() + '&identifier=footer',
                success: function(responseObject){
                    htmlUpdateLoadingMask.hide();
                },
                failure: function(form, action){
                    htmlUpdateLoadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Updating header/footer',
                        msg: 'Updating header/footer error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }, {
        xtype: 'label',
        fieldLabel: 'foo',
        name: 'foo',
        html: '<br><hr noshade style="color:#99BBE8;" size="1"><br>'
    }, {
        inputType: 'file',
        fieldLabel: 'Logo file',
        name: 'logofile',
        allowBlank: false
    }, {
        xtype: 'button',
        fieldLabel: 'foo',
        name: 'foo',
        text: 'Upload logo',
        
        handler: function(){
            update.form.submit({
            
                success: function(form, action){
                
                
                    uploadingloadingMask.hide();
                    upload.form.reset();
                    navigationPanel.getLoader().load(navigationPanel.getRootNode());
                },
                failure: function(form, action){
                    uploadingloadingMask.hide();
                    Ext.MessageBox.show({
                        title: 'Upload',
                        msg: 'Upload error - try again!',
                        buttons: Ext.Msg.OK,
                        fn: function(){
                            upload.form.reset();
                        },
                        icon: Ext.MessageBox.ERROR
                    });
                }
                
            });
        }
    }, userPermissionPanel]
});


var east = new Ext.Panel({
    title: 'Administration actions',
    bodyBorder: false,
    border: false,
    width: 700,
    region: 'east',
    layout: 'accordion',
    renderHidden: true,
    collapseFirst: false,
    bodyStyle: 'border-left: solid #99BBE8 1px;',
    items: [upload, update, category, modifycategory, trash]

});


var navigationPanel = new NavigationPanel();
var myBorderPanel = new Ext.Panel({
    bodyBorder: false,
    border: false,
    renderTo: document.getElementById('mainPanel'),
    layout: 'border',
    height: document.getElementById('mainPanel').offsetHeight,
    items: [east, {
        title: 'Available assessments',
        region: 'center', // center region is required, no width/height specified
        cmargins: '0 0 0 0',
        autoScroll: true,
        containerScroll: true,
        bodyBorder: false,
        border: false,
        items: [navigationPanel]
    }]
});