knitkit 2.1.15 → 3.0.0

data/public/javascripts/erp_app/desktop/applications/knitkit/center_region.js

@@ -1,7 +1,9 @@
 Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
-    extend:"Ext.panel.Panel",
-    alias:'widget.knitkit_centerregion',
-    ckEditorToolbar:[
+    extend: "Ext.panel.Panel",
+    id: 'knitkitCenterRegion',
+    alias: 'widget.knitkit_centerregion',
+    ckEditorExtraPlugins: 'codemirror,syntaxhighlight',
+    ckEditorToolbar: [
         ['Source', '-', 'Preview', 'Print'],
         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
         ['Undo', 'Redo'],
@@ -9,34 +11,35 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         ['SpellChecker', '-', 'SelectAll'],
         ['TextColor', 'BGColor'],
         ['Bold', 'Italic', 'Underline', 'Strike'],
-        ['Subscript', 'Superscript', '-', 'jwplayer'],
-        ['Table', 'NumberedList', 'BulletedList'],
+        ['Subscript', 'Superscript', '-'],
+        ['Image', 'Table', 'NumberedList', 'BulletedList'],
         ['Outdent', 'Indent', 'Blockquote'],
         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
         ['BidiLtr', 'BidiRtl'],
         ['Link', 'Unlink', 'Anchor'],
         ['HorizontalRule', 'SpecialChar', 'PageBreak'],
         ['ShowBlocks', 'RemoveFormat'],
-        ['KnitkitThemes', 'Format', 'Font', 'FontSize' ],
-        ['Maximize', '-', 'About']
+        ['Format', 'Font', 'FontSize'],
+        ['Maximize', '-', 'About'],
+        ['Syntaxhighlight']
     ],
 
-    setWindowStatus:function (status) {
+    setWindowStatus: function (status) {
         this.findParentByType('statuswindow').setStatus(status);
     },
 
-    clearWindowStatus:function () {
+    clearWindowStatus: function () {
         this.findParentByType('statuswindow').clearStatus();
     },
 
-    viewSectionLayout:function (title, template) {
+    viewSectionLayout: function (title, template) {
         this.workArea.add({
-            title:title + ' - Layout',
-            disableToolbar:true,
-            xtype:'codemirror',
-            parser:'rhtml',
-            sourceCode:template,
-            closable:true
+            title: title + ' - Layout',
+            disableToolbar: true,
+            xtype: 'codemirror',
+            mode: 'rhtml',
+            sourceCode: template,
+            closable: true
         });
         this.workArea.setActiveTab(this.workArea.items.length - 1);
         return false;
@@ -44,17 +47,18 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* sections */
 
-    saveSectionLayout:function (sectionId, content) {
+    saveSectionLayout: function (id, comp, content) {
+        jcomp = comp;
         var self = this;
         this.setWindowStatus('Saving...');
         Ext.Ajax.request({
-            url:'/knitkit/erp_app/desktop/section/save_layout',
-            method:'POST',
-            params:{
-                id:sectionId,
-                content:content
+            url: '/knitkit/erp_app/desktop/section/save_layout',
+            method: 'POST',
+            params: {
+                id: id,
+                content: content
             },
-            success:function (response) {
+            success: function (response) {
                 self.clearWindowStatus();
                 var obj = Ext.decode(response.responseText);
                 if (obj.success) {
@@ -67,59 +71,55 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                 else {
                     Ext.Msg.alert('Error', obj.message);
                 }
+                comp.codeMirrorInstance.focus();
             },
-            failure:function (response) {
+            failure: function (response) {
                 self.clearWindowStatus();
                 Ext.Msg.alert('Error', 'Error saving layout');
             }
         });
     },
 
-    editSectionLayout:function (sectionName, websiteId, websiteSectionId, content, tbarItems) {
+    editSectionLayout: function (sectionName, websiteId, websiteSectionId, content, tbarItems) {
         var self = this;
         var itemId = 'section-' + websiteSectionId;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             item = Ext.create("Ext.panel.Panel", {
-                layout:'border',
-                title:sectionName,
-                save:function (comp) {
+                layout: 'border',
+                title: sectionName,
+                save: function (comp) {
                     var content = comp.down('codemirror').getValue();
-                    self.saveSectionLayout(websiteSectionId, content);
+                    self.saveSectionLayout(websiteSectionId, comp, content);
                 },
-                closable:true,
-                itemId:itemId,
-                items:[
+                closable: true,
+                itemId: itemId,
+                items: [
                     {
-                        title:sectionName + ' - Layout',
-                        tbarItems:tbarItems,
-                        disableSave:true,
-                        listeners:{
-                            save:function (comp, content) {
-                                self.saveSectionLayout(websiteSectionId, content);
+                        title: sectionName + ' - Layout',
+                        tbarItems: tbarItems,
+                        disableSave: true,
+                        listeners: {
+                            save: function (comp, content) {
+                                self.saveSectionLayout(websiteSectionId, comp, content);
                             }
                         },
-                        xtype:'codemirror',
-                        parser:'erb',
-                        region:'center',
-                        sourceCode:content
+                        xtype: 'codemirror',
+                        mode: 'rhtml',
+                        region: 'center',
+                        sourceCode: content
                     },
                     {
-                        xtype:'knitkit_versionswebsitesectiongridpanel',
-                        websiteSectionId:websiteSectionId,
-                        region:'south',
-                        height:150,
-                        collapsible:true,
-                        centerRegion:self,
-                        siteId:websiteId
+                        xtype: 'knitkit_versionswebsitesectiongridpanel',
+                        websiteSectionId: websiteSectionId,
+                        region: 'south',
+                        height: 150,
+                        collapsible: true,
+                        centerRegion: self,
+                        siteId: websiteId
                     }
-                ],
-                listeners:{
-                    'show':function (panel) {
-                        Ext.getCmp('knitkitWestRegion').selectWebsite(websiteId);
-                    }
-                }
+                ]
             });
 
             this.workArea.add(item);
@@ -131,22 +131,21 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* documentation using markdown */
 
-    saveDocumentationMarkdown:function (id, siteId, content) {
+    saveDocumentationMarkdown: function (id, comp, content, siteId) {
         var self = this;
         this.setWindowStatus('Saving...');
         Ext.Ajax.request({
-            url:'/knitkit/erp_app/desktop/content/update',
-            method:'POST',
-            params:{
-                id:id,
-                html:content,
-                site_id:siteId
+            url: '/knitkit/erp_app/desktop/content/update',
+            method: 'POST',
+            params: {
+                id: id,
+                html: content,
+                site_id: siteId
             },
-            success:function (response) {
+            success: function (response) {
                 var obj = Ext.decode(response.responseText);
                 if (obj.success) {
                     self.clearWindowStatus();
-                    Ext.getStore('knitkit_articlesgridpanelStore').load();
                     var activeTab = self.workArea.getActiveTab();
                     var versionsGrid = activeTab.down('knitkit_versionsarticlegridpanel');
                     versionsGrid.getStore().load();
@@ -155,59 +154,55 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                     Ext.Msg.alert('Error', 'Error saving contents');
                     self.clearWindowStatus();
                 }
+                comp.ckEditorInstance.focus();
             },
-            failure:function (response) {
+            failure: function (response) {
                 self.clearWindowStatus();
                 Ext.Msg.alert('Error', 'Error saving contents');
             }
         });
     },
 
-    editDocumentationMarkdown:function (sectionName, websiteId, contentId, content, tbarItems) {
+    editDocumentationMarkdown: function (sectionName, websiteId, contentId, content, tbarItems) {
         var self = this;
         var itemId = 'markdown-' + contentId;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             item = Ext.create("Ext.panel.Panel", {
-                layout:'border',
-                title:sectionName,
-                save:function (comp) {
+                layout: 'border',
+                title: sectionName,
+                save: function (comp) {
                     var content = comp.down('codemirror').getValue();
-                    self.saveDocumentationMarkdown(contentId, websiteId, content);
+                    self.saveDocumentationMarkdown(contentId, comp, content, websiteId);
                 },
-                closable:true,
-                itemId:itemId,
-                items:[
+                closable: true,
+                itemId: itemId,
+                items: [
                     {
-                        title:sectionName + ' - Markdown',
-                        tbarItems:tbarItems,
-                        disableSave:true,
-                        listeners:{
-                            save:function (comp, content) {
-                                self.saveDocumentationMarkdown(contentId, websiteId, content);
+                        title: sectionName + ' - Markdown',
+                        tbarItems: tbarItems,
+                        disableSave: true,
+                        listeners: {
+                            save: function (comp, content) {
+                                self.saveDocumentationMarkdown(contentId, comp, content, websiteId);
                             }
                         },
-                        xtype:'codemirror',
-                        parser:'erb',
-                        region:'center',
-                        sourceCode:content
+                        xtype: 'codemirror',
+                        mode: 'rhtml',
+                        region: 'center',
+                        sourceCode: content
                     },
                     {
-                        xtype:'knitkit_versionsarticlegridpanel',
-                        contentId:contentId,
-                        region:'south',
-                        height:150,
-                        collapsible:true,
-                        centerRegion:self,
-                        siteId:websiteId
-                    }
-                ],
-                listeners:{
-                    'show':function (panel) {
-                        Ext.getCmp('knitkitWestRegion').selectWebsite(websiteId);
+                        xtype: 'knitkit_versionsarticlegridpanel',
+                        contentId: contentId,
+                        region: 'south',
+                        height: 150,
+                        collapsible: true,
+                        centerRegion: self,
+                        siteId: websiteId
                     }
-                }
+                ]
             });
 
             this.workArea.add(item);
@@ -219,77 +214,80 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* templates */
 
-    saveTemplateFile:function (path, content) {
+    saveTemplateFile: function (path, comp, content) {
         var self = this;
         this.setWindowStatus('Saving...');
         Ext.Ajax.request({
-            url:'/knitkit/erp_app/desktop/theme/update_file',
-            method:'POST',
-            params:{
-                node:path,
-                content:content
+            url: '/knitkit/erp_app/desktop/theme/update_file',
+            method: 'POST',
+            params: {
+                node: path,
+                content: content
             },
-            success:function (response) {
+            success: function (response) {
                 var obj = Ext.decode(response.responseText);
                 self.clearWindowStatus();
                 if (!obj.success) {
                     Ext.Msg.alert('Error', obj.message);
                 }
+                comp.codeMirrorInstance.focus();
             },
-            failure:function (response) {
+            failure: function (response) {
                 self.clearWindowStatus();
                 Ext.Msg.alert('Error', 'Error saving contents');
             }
         });
     },
 
-    editTemplateFile:function (node, content, tbarItems, themeId) {
+    editTemplateFile: function (node, content, tbarItems, themeId) {
         var self = this,
             pathArr = node.data.id.split('/'),
-            containerDir = pathArr[pathArr.length-2],
+            containerDir = pathArr[pathArr.length - 2],
             fileName = pathArr.pop(),
             baseName = fileName.split('.')[0],
             fileType = node.data.id.split('.').pop(),
             filePathHash = Compass.ErpApp.Utility.Encryption.MD5(node.data.id),
-			templatePath = node.data.id.replace(new RegExp("/public/sites/.+/themes/"), ""),
-			
+            templatePath = node.data.id.replace(new RegExp("/public/sites/.+/themes/"), ""),
+
             itemId = baseName + "_" + filePathHash, // Using a hash will allow files with same name to be opened concurrently
             item = this.workArea.query('#' + itemId).first();
 
+        mode = Compass.ErpApp.Shared.CodeMirror.determineCodeMirrorMode(node.data.id);
+
         // If this file isn't already an existing tab, let's open it
         if (Compass.ErpApp.Utility.isBlank(item)) {
-			item = Ext.create('Ext.panel.Panel', {
-				closable:true,
+            item = Ext.create('Ext.panel.Panel', {
+                closable: true,
                 title: baseName,
                 baseName: baseName,
                 fileName: fileName,
                 containerDir: containerDir,
                 filePathHash: filePathHash,
-                itemId:itemId,
-                layout:'fit',
-                save:function (comp) {
+                itemId: itemId,
+                layout: 'fit',
+                save: function (comp) {
                     var content = comp.down('codemirror').getValue();
-                    self.saveTemplateFile(node.data.id, content);
+                    self.saveTemplateFile(node.data.id, comp, content);
                 },
-                items:[
+                items: [
                     {
-                        tbarItems:tbarItems,
-                        disableSave:true,
-                        xtype:'codemirror',
-                        listeners:{
-                            save:function (comp, content) {
-                                self.saveTemplateFile(node.data.id, content);
+                        tbarItems: tbarItems,
+                        disableSave: true,
+                        xtype: 'codemirror',
+                        listeners: {
+                            save: function (comp, content) {
+                                self.saveTemplateFile(node.data.id, comp, content);
                             }
                         },
-                        parser:fileType,
-                        sourceCode:content
+                        mode: mode,
+                        sourceCode: content
                     }
                 ],
-				bbar:{
-					items:[
-						templatePath
-					]
-				}
+                bbar: {
+                    items: [
+                        templatePath
+                    ]
+                }
             });
 
             this.workArea.add(item);
@@ -301,117 +299,169 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* excerpts */
 
-    saveExcerpt:function (id, content, siteId) {
+    saveExcerpt: function (id, comp, content, siteId) {
         var self = this;
         this.setWindowStatus('Saving...');
         Ext.Ajax.request({
-            url:'/knitkit/erp_app/desktop/content/save_excerpt',
-            method:'POST',
-            params:{
-                id:id,
-                html:content,
-                site_id:siteId
+            url: '/knitkit/erp_app/desktop/content/save_excerpt',
+            method: 'POST',
+            params: {
+                id: id,
+                html: content,
+                site_id: siteId
             },
-            success:function (response) {
+            success: function (response) {
                 var obj = Ext.decode(response.responseText);
                 if (obj.success) {
                     self.clearWindowStatus();
-                    Ext.getStore('knitkit_articlesgridpanelStore').load();
                     var activeTab = self.workArea.getActiveTab();
                     var panel = activeTab.query('knitkit_versionsbloggridpanel');
                     if (panel.length === 0) {
                         panel = activeTab.query('knitkit_nonpublishedversionswebsitesectiongridpanel');
                     }
                     panel[0].getStore().load();
+                    comp.ckEditorInstance.focus();
                 }
                 else {
                     Ext.Msg.alert('Error', 'Error saving excerpt');
                     self.clearWindowStatus();
                 }
             },
-            failure:function (response) {
+            failure: function (response) {
                 self.clearWindowStatus();
                 Ext.Msg.alert('Error', 'Error saving excerpt');
             }
         });
     },
 
-    editExcerpt:function (title, id, content, siteId, contentGridStore) {
+    editExcerpt: function (title, id, content, siteId, contentGridStore) {
         var self = this;
         var itemId = 'editExcerpt-' + id;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             var ckEditor = Ext.create("Compass.ErpApp.Shared.CKeditor", {
-                autoHeight:true,
-                value:content,
-                ckEditorConfig:{
-                    extraPlugins:'jwplayer,knitkitthemes',
-                    toolbar:self.ckEditorToolbar
+                autoHeight: true,
+                //value:content,
+                ckEditorConfig: {
+                    extraPlugins: self.ckEditorExtraPlugins,
+                    toolbar: self.ckEditorToolbar
                 },
-                listeners:{
-                    save:function (comp, content) {
-                        self.saveExcerpt(id, content, siteId);
+                listeners: {
+                    save: function (comp, content) {
+                        self.saveExcerpt(id, comp, content, siteId);
                         if (!Ext.isEmpty(contentGridStore)) contentGridStore.load();
+                    },
+                    ckeditordrop: function (ckeditorPanel, dropEvent) {
+                        var dataTransfer = dropEvent.dataTransfer;
+                        var files = dataTransfer.files;
+                        for (var i = 0; i < files.length; i++) {
+                            var loadMask = new Ext.LoadMask(ckeditorPanel, {msg:"Please wait..."});
+                            loadMask.show();
+
+                            var file = files[i];
+                            var reader = new FileReader();
+
+                            Compass.ErpApp.Utility.addEventHandler(reader, 'loadend', function (e, file) {
+                                var bin = this.result;
+
+                                Ext.Ajax.request({
+                                    headers: {'Content-Type': file.type},
+                                    url: '/knitkit/erp_app/desktop/image_assets/shared/upload_file',
+                                    jsonData: bin,
+                                    params:{
+                                        name: file.name,
+                                        directory: 'root_node',
+                                        is_drag_drop: true
+                                    },
+                                    success: function(result){
+                                        loadMask.hide();
+                                        resultObj = Ext.JSON.decode(result.responseText);
+                                        if(resultObj.success){
+                                            ckeditorPanel.insertHtml('<img src='+resultObj.url+' height="200" width="200" />');
+                                            var sharedImageAssetsDataView = self.up('#knitkit').down('knitkit_ImageAssetsPanel').sharedImageAssetsDataView,
+                                                sharedImageAssetsTreePanel = self.up('#knitkit').down('knitkit_ImageAssetsPanel').sharedImageAssetsTreePanel;
+
+                                            sharedImageAssetsDataView.getStore().load({
+                                                params:{
+                                                    directory: sharedImageAssetsDataView.directory
+                                                }
+                                            });
+                                            sharedImageAssetsTreePanel.getStore().load({
+                                                callback:function(){
+                                                    sharedImageAssetsTreePanel.getView().refresh();
+                                                }
+                                            });
+                                        }
+                                        else{
+                                            Ext.Msg.alert('Error', 'Could not upload image');
+                                        }
+                                    },
+                                    failure: function(result){
+                                        loadMask.hide();
+                                        Ext.Msg.alert('Error', 'Could not upload image');
+                                    }
+                                });
+                            }.bindToEventHandler(file));
+
+                            reader.readAsDataURL(file);
+                        }
                     }
                 }
             });
 
+            ckEditor.setValue(content);
+
             var items = [
                 {
-                    xtype:'panel',
-                    layout:'fit',
-                    split:true,
-                    region:'center',
-                    items:ckEditor,
-                    autoDestroy:true
+                    xtype: 'panel',
+                    layout: 'fit',
+                    split: true,
+                    region: 'center',
+                    items: ckEditor,
+                    autoDestroy: true
                 }
             ];
 
             if (!Compass.ErpApp.Utility.isBlank(siteId)) {
                 items.push({
-                    xtype:'knitkit_versionsbloggridpanel',
-                    contentId:id,
-                    region:'south',
-                    height:150,
-                    collapsible:true,
-                    centerRegion:self,
-                    siteId:siteId
+                    xtype: 'knitkit_versionsbloggridpanel',
+                    contentId: id,
+                    region: 'south',
+                    height: 150,
+                    collapsible: true,
+                    collapsed: true,
+                    centerRegion: self,
+                    siteId: siteId
                 });
             }
             else {
                 items.push({
-                    xtype:'knitkit_nonpublishedversionswebsitesectiongridpanel',
-                    contentId:id,
-                    region:'south',
-                    height:150,
-                    collapsible:true,
-                    centerRegion:self
+                    xtype: 'knitkit_nonpublishedversionswebsitesectiongridpanel',
+                    contentId: id,
+                    region: 'south',
+                    height: 150,
+                    collapsible: true,
+                    collapsed: true,
+                    centerRegion: self
                 });
             }
 
             item = Ext.create("Ext.panel.Panel", {
-                layout:'border',
-                title:title,
-                closable:true,
-                items:items,
-                save:function (comp) {
+                layout: 'border',
+                title: title,
+                closable: true,
+                items: items,
+                save: function (comp) {
                     if (currentUser.hasCapability('edit_html', 'Content')) {
                         var content = comp.down('ckeditor').getValue();
-                        self.saveExcerpt(id, content, siteId);
+                        self.saveExcerpt(id, comp, content, siteId);
                         if (!Ext.isEmpty(contentGridStore)) contentGridStore.load();
                     } else {
                         currentUser.showInvalidAccess();
                     }
                 },
-                itemId:itemId,
-                listeners:{
-                    'show':function (panel) {
-                        if (!Compass.ErpApp.Utility.isBlank(siteId)) {
-                            Ext.getCmp('knitkitWestRegion').selectWebsite(siteId);
-                        }
-                    }
-                }
+                itemId: itemId
             });
 
             this.workArea.add(item);
@@ -422,7 +472,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* image */
 
-    showImage:function (node, themeId) {
+    showImage: function (node, themeId) {
         var self = this;
         var fileName = node.data.id.split('/').pop().split('.')[0];
         var fileType = node.data.id.split('.').pop();
@@ -431,11 +481,11 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             item = Ext.create('Ext.panel.Panel', {
-                closable:true,
-                title:fileName + '.' + fileType,
-                itemId:itemId,
-                layout:'fit',
-                html:'<img src="' + node.data.url + '" />'
+                closable: true,
+                title: fileName + '.' + fileType,
+                itemId: itemId,
+                layout: 'fit',
+                html: '<img src="' + node.data.url + '" />'
             });
 
             this.workArea.add(item);
@@ -447,22 +497,21 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
     /* content */
 
-    saveContent:function (id, content, contentType, siteId) {
+    saveContent: function (id, comp, content, contentType, siteId) {
         var self = this;
         this.setWindowStatus('Saving...');
         Ext.Ajax.request({
-            url:'/knitkit/erp_app/desktop/content/update',
-            method:'POST',
-            params:{
-                id:id,
-                html:content,
-                site_id:siteId
+            url: '/knitkit/erp_app/desktop/content/update',
+            method: 'POST',
+            params: {
+                id: id,
+                html: content,
+                site_id: siteId
             },
-            success:function (response) {
+            success: function (response) {
                 var obj = Ext.decode(response.responseText);
                 if (obj.success) {
                     self.clearWindowStatus();
-                    Ext.getStore('knitkit_articlesgridpanelStore').load();
                     if (!Compass.ErpApp.Utility.isBlank(contentType)) {
                         var activeTab = self.workArea.getActiveTab();
                         var versionsGrid = activeTab.down('knitkit_versions' + contentType + 'gridpanel');
@@ -473,62 +522,131 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                         if (!Ext.isEmpty(versionsGrid)) {
                             versionsGrid.getStore().load();
                         }
-
                     }
+                    //comp.ckEditorInstance.focus();
                 }
                 else {
                     Ext.Msg.alert('Error', 'Error saving contents');
                     self.clearWindowStatus();
                 }
             },
-            failure:function (response) {
+            failure: function (response) {
                 self.clearWindowStatus();
                 Ext.Msg.alert('Error', 'Error saving contents');
             }
         });
     },
 
-    viewContent:function (title, content) {
+    viewContent: function (title, content) {
         var ckEditor = Ext.create("Compass.ErpApp.Shared.CKeditor", {
-            autoHeight:true,
-            value:content,
-            ckEditorConfig:{
-                toolbar:[
+            autoHeight: true,
+            value: content,
+            ckEditorConfig: {
+                toolbar: [
                     ['Preview']
                 ]
             }
         });
 
         var item = Ext.create('Ext.panel.Panel', {
-            closable:true,
-            layout:'fit',
-            title:title,
-            split:true,
-            items:ckEditor,
-            autoDestroy:true
+            closable: true,
+            layout: 'fit',
+            title: title,
+            split: true,
+            items: ckEditor,
+            autoDestroy: true
+        });
+
+        this.workArea.add(item);
+        this.workArea.setActiveTab(item);
+    },
+
+    openIframeInTab : function( title, url ) {
+
+        var item = Ext.create('Ext.panel.Panel', {
+            iframeId:'themes_iframe',
+            closable: true,
+            layout: 'fit',
+            title: title,
+            html:'<iframe height="100%" width="100%" frameBorder="0" src="'+url+'"></iframe>'
         });
 
         this.workArea.add(item);
         this.workArea.setActiveTab(item);
     },
 
-    editContent:function (title, id, content, siteId, contentType, contentGridStore) {
+    editContent: function (title, id, content, siteId, contentType, contentGridStore) {
         var self = this;
         var itemId = 'editContent-' + id;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             var ckEditor = Ext.create("Compass.ErpApp.Shared.CKeditor", {
-                autoHeight:true,
+                autoHeight: true,
                 //value:content,
-                ckEditorConfig:{
-                    extraPlugins:'jwplayer,knitkitthemes',
-                    toolbar:self.ckEditorToolbar
+                ckEditorConfig: {
+                    extraPlugins: self.ckEditorExtraPlugins,
+                    toolbar: self.ckEditorToolbar
                 },
-                listeners:{
-                    save:function (comp, content) {
-                        self.saveContent(id, content, contentType, siteId);
+                listeners: {
+                    save: function (comp, content) {
+                        self.saveContent(id, comp, content, contentType, siteId);
                         if (!Ext.isEmpty(contentGridStore)) contentGridStore.load();
+                    },
+                    ckeditordrop: function (ckeditorPanel, dropEvent) {
+                        var dataTransfer = dropEvent.dataTransfer;
+                        var files = dataTransfer.files;
+                        for (var i = 0; i < files.length; i++) {
+                            var loadMask = new Ext.LoadMask(ckeditorPanel, {msg:"Please wait..."});
+                            loadMask.show();
+
+                            var file = files[i];
+                            var reader = new FileReader();
+
+                            Compass.ErpApp.Utility.addEventHandler(reader, 'loadend', function (e, file) {
+                                var bin = this.result;
+
+                                Ext.Ajax.request({
+                                    headers: {'Content-Type': file.type},
+                                    url: '/knitkit/erp_app/desktop/image_assets/shared/upload_file',
+                                    jsonData: bin,
+                                    params:{
+                                        name: file.name,
+                                        directory: 'root_node',
+                                        is_drag_drop: true
+                                    },
+                                    success: function(result){
+                                        loadMask.hide();
+                                        resultObj = Ext.JSON.decode(result.responseText);
+                                        if(resultObj.success){
+                                            ckeditorPanel.insertHtml('<img src='+resultObj.url+' height="200" width="200" />');
+                                            var sharedImageAssetsDataView = self.up('#knitkit').down('knitkit_ImageAssetsPanel').sharedImageAssetsDataView,
+                                                sharedImageAssetsTreePanel = self.up('#knitkit').down('knitkit_ImageAssetsPanel').sharedImageAssetsTreePanel;
+
+                                            sharedImageAssetsDataView.getStore().load({
+                                                params:{
+                                                    directory: sharedImageAssetsDataView.directory
+                                                }
+                                            });
+                                            sharedImageAssetsTreePanel.getStore().load({
+                                                callback:function(){
+                                                    sharedImageAssetsTreePanel.getView().refresh();
+                                                }
+                                            });
+                                        }
+                                        else{
+                                            Ext.Msg.alert('Error', 'Could not upload image');
+                                        }
+                                    },
+                                    failure: function(result){
+                                        loadMask.hide();
+                                        Ext.Msg.alert('Error', 'Could not upload image');
+                                    }
+                                });
+                            }.bindToEventHandler(file));
+
+                            reader.readAsDataURL(file);
+                        }
                     }
                 }
             });
@@ -537,48 +655,50 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
 
             var items = [
                 {
-                    xtype:'panel',
-                    layout:'fit',
-                    split:true,
-                    region:'center',
-                    items:ckEditor,
-                    autoDestroy:true
+                    xtype: 'panel',
+                    layout: 'fit',
+                    split: true,
+                    region: 'center',
+                    items: ckEditor,
+                    autoDestroy: true
                 }
             ];
 
             if (!Compass.ErpApp.Utility.isBlank(siteId)) {
                 items.push({
-                    xtype:'knitkit_versions' + contentType + 'gridpanel',
-                    contentId:id,
-                    region:'south',
-                    height:150,
-                    collapsible:true,
-                    centerRegion:self,
-                    siteId:siteId
+                    xtype: 'knitkit_versions' + contentType + 'gridpanel',
+                    contentId: id,
+                    region: 'south',
+                    height: 200,
+                    collapsible: true,
+                    collapsed: true,
+                    centerRegion: self,
+                    siteId: siteId
                 });
             }
             else {
                 items.push({
-                    xtype:'knitkit_nonpublishedversionswebsitesectiongridpanel',
-                    contentId:id,
-                    region:'south',
-                    height:150,
-                    collapsible:true,
-                    centerRegion:self
+                    xtype: 'knitkit_nonpublishedversionswebsitesectiongridpanel',
+                    contentId: id,
+                    region: 'south',
+                    height: 200,
+                    collapsible: true,
+                    collapsed: true,
+                    centerRegion: self
                 });
             }
 
             item = Ext.create('Ext.panel.Panel', {
-                xtype:'panel',
-                layout:'border',
-                title:title,
-                itemId:itemId,
-                closable:true,
-                items:items,
-                save:function (comp) {
+                xtype: 'panel',
+                layout: 'border',
+                title: title,
+                itemId: itemId,
+                closable: true,
+                items: items,
+                save: function (comp) {
                     if (currentUser.hasCapability('edit_html', 'Content')) {
                         var content = comp.down('ckeditor').getValue();
-                        self.saveContent(id, content, contentType, siteId);
+                        self.saveContent(id, comp, content, contentType, siteId);
                         if (contentGridStore) {
                             contentGridStore.load();
                         }
@@ -586,62 +706,51 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                     } else {
                         currentUser.showInvalidAccess();
                     }
-                },
-                listeners:{
-                    'show':function (panel) {
-                        if (!Compass.ErpApp.Utility.isBlank(siteId)) {
-                            Ext.getCmp('knitkitWestRegion').selectWebsite(siteId);
-                        }
-                    }
                 }
             });
-
             this.workArea.add(item);
         }
-
         this.workArea.setActiveTab(item);
     },
 
-    /* comment */
-
-    showComment:function (comment) {
+    showComment: function (comment) {
         var activeTab = this.workArea.getActiveTab();
         var cardPanel = activeTab.query('panel')[0];
         cardPanel.removeAll(true);
         cardPanel.add({
-            xtype:'panel',
-            html:comment
+            xtype: 'panel',
+            html: comment
         });
         cardPanel.getLayout().setActiveItem(0);
     },
 
-    viewContentComments:function (contentId, title) {
+    viewContentComments: function (contentId, title) {
         var self = this;
         var itemId = 'contentComments-' + contentId;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             item = Ext.create("Ext.panel.Panel", {
-                layout:'border',
-                itemId:itemId,
-                title:title,
-                closable:true,
-                items:[
+                layout: 'border',
+                itemId: itemId,
+                title: title,
+                closable: true,
+                items: [
                     {
-                        xtype:'panel',
-                        layout:'card',
-                        split:true,
-                        region:'center',
-                        items:[],
-                        autoDestroy:true
+                        xtype: 'panel',
+                        layout: 'card',
+                        split: true,
+                        region: 'center',
+                        items: [],
+                        autoDestroy: true
                     },
                     {
-                        xtype:'knitkit_commentsgridpanel',
-                        contentId:contentId,
-                        region:'south',
-                        height:300,
-                        collapsible:true,
-                        centerRegion:self
+                        xtype: 'knitkit_commentsgridpanel',
+                        contentId: contentId,
+                        region: 'south',
+                        height: 300,
+                        collapsible: true,
+                        centerRegion: self
                     }
                 ]
             });
@@ -651,40 +760,35 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         this.workArea.setActiveTab(item);
     },
 
-    viewWebsiteInquiries:function (websiteId, title) {
+    viewWebsiteInquiries: function (websiteId, title) {
         var self = this;
         var itemId = 'websiteInqueries-' + websiteId;
         var item = this.workArea.query('#' + itemId).first();
 
         if (Compass.ErpApp.Utility.isBlank(item)) {
             item = Ext.create("Ext.panel.Panel", {
-                layout:'border',
-                title:title + " Inquiries",
-                itemId:itemId,
-                closable:true,
-                items:[
+                layout: 'border',
+                title: title + " Inquiries",
+                itemId: itemId,
+                closable: true,
+                items: [
                     {
-                        xtype:'panel',
-                        layout:'card',
-                        split:true,
-                        region:'center',
-                        items:[],
-                        autoDestroy:true
+                        xtype: 'panel',
+                        layout: 'card',
+                        split: true,
+                        region: 'center',
+                        items: [],
+                        autoDestroy: true
                     },
                     {
-                        xtype:'knitkit_inquiriesgridpanel',
-                        websiteId:websiteId,
-                        region:'south',
-                        height:300,
-                        collapsible:true,
-                        centerRegion:self
-                    }
-                ],
-                listeners:{
-                    'show':function (panel) {
-                        Ext.getCmp('knitkitWestRegion').selectWebsite(websiteId);
+                        xtype: 'knitkit_inquiriesgridpanel',
+                        websiteId: websiteId,
+                        region: 'south',
+                        height: 300,
+                        collapsible: true,
+                        centerRegion: self
                     }
-                }
+                ]
             });
 
             this.workArea.add(item);
@@ -693,7 +797,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         this.workArea.setActiveTab(item);
     },
 
-    insertHtmlIntoActiveCkEditor:function (html) {
+    insertHtmlIntoActiveCkEditor: function (html) {
         var activeTab = this.workArea.getActiveTab();
         if (Compass.ErpApp.Utility.isBlank(activeTab)) {
             Ext.Msg.alert('Error', 'No editor');
@@ -709,7 +813,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         return false;
     },
 
-    replaceHtmlInActiveCkEditor:function (html) {
+    replaceHtmlInActiveCkEditor: function (html) {
         var activeTab = this.workArea.getActiveTab();
         if (Compass.ErpApp.Utility.isBlank(activeTab)) {
             Ext.Msg.alert('Error', 'No editor');
@@ -725,7 +829,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         return false;
     },
 
-    replaceContentInActiveCodeMirror:function (content) {
+    replaceContentInActiveCodeMirror: function (content) {
         var activeTab = this.workArea.getActiveTab();
         if (Compass.ErpApp.Utility.isBlank(activeTab)) {
             Ext.Msg.alert('Error', 'No editor');
@@ -741,7 +845,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         return false;
     },
 
-    addContentToActiveCodeMirror:function (content) {
+    addContentToActiveCodeMirror: function (content) {
         var activeTab = this.workArea.getActiveTab();
         if (Compass.ErpApp.Utility.isBlank(activeTab)) {
             Ext.Msg.alert('Error', 'No editor');
@@ -760,17 +864,17 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         this.workArea.setActiveTab(item);
     },
 
-    insertHtmlIntoActiveCkEditorOrCodemirror:function (html) {
+    insertHtmlIntoActiveCkEditorOrCodemirror: function (html) {
         var activeTab = this.workArea.getActiveTab();
         if (Compass.ErpApp.Utility.isBlank(activeTab)) {
             Ext.Msg.alert('Error', 'No editor');
         }
         else {
-            if (activeTab.query('ckeditor').length > 0) {
-                activeTab.query('ckeditor')[0].insertHtml(html);
+            if (activeTab.down('ckeditor')) {
+                activeTab.down('ckeditor').insertHtml(html);
             }
-            else if (activeTab.query('codemirror').length > 0) {
-                activeTab.query('codemirror')[0].insertContent(html);
+            else if (activeTab.down('codemirror')) {
+                activeTab.down('codemirror').insertContent(html);
             }
             else {
                 Ext.Msg.alert('Error', 'No ckeditor or codemirror found');
@@ -779,14 +883,14 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         return false;
     },
 
-    saveCurrent:function () {
+    saveCurrent: function () {
         var activeTab = this.workArea.getActiveTab();
         if (!Ext.isEmpty(activeTab) && !Ext.isEmpty(activeTab.initialConfig.save)) {
             activeTab.initialConfig.save(activeTab);
         }
     },
 
-    saveAll:function () {
+    saveAll: function () {
         this.workArea.items.each(function (comp) {
             if (!Ext.isEmpty(comp) && !Ext.isEmpty(comp.initialConfig.save)) {
                 comp.initialConfig.save(comp);
@@ -794,28 +898,28 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
         });
     },
 
-    constructor:function (config) {
+    constructor: function (config) {
         region = this;
         this.workArea = Ext.createWidget('tabpanel', {
-            autoDestroy:true,
-            region:'center',
-            plugins:Ext.create('Ext.ux.TabCloseMenu', {
-                extraItemsTail:[
+            autoDestroy: true,
+            region: 'center',
+            plugins: Ext.create('Ext.ux.TabCloseMenu', {
+                extraItemsTail: [
                     '-',
                     {
-                        text:'Closable',
-                        checked:true,
-                        hideOnClick:true,
-                        handler:function (item) {
+                        text: 'Closable',
+                        checked: true,
+                        hideOnClick: true,
+                        handler: function (item) {
                             currentItem.tab.setClosable(item.checked);
                         }
                     }
                 ],
-                listeners:{
-                    aftermenu:function () {
+                listeners: {
+                    aftermenu: function () {
                         currentItem = null;
                     },
-                    beforemenu:function (menu, item) {
+                    beforemenu: function (menu, item) {
                         var menuitem = menu.child('*[text="Closable"]');
                         currentItem = item;
                         menuitem.setChecked(item.closable);
@@ -823,16 +927,16 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                 }
             }),
             listeners: {
-                add:function() {
+                add: function () {
                     this.smartRenameTabs();
                 },
-                remove:function() {
+                remove: function () {
                     this.smartRenameTabs();
                 }
             },
 
             smartRenameTabs: function () {
-                var tabs = this.queryBy(function(record) {
+                var tabs = this.queryBy(function (record) {
                         // If no filePathHash is found, this item is not an actual tab element, don't collect it into tabs array
                         if (record.filePathHash != undefined) {
                             return true;
@@ -844,7 +948,7 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                     fileNames = {};
 
                 // Collect counts for each unique baseName and fileName
-                Ext.each(tabs, function(tab) {
+                Ext.each(tabs, function (tab) {
                     if (!baseNames[tab.baseName]) {
                         baseNames[tab.baseName] = 1;
                     } else {
@@ -859,11 +963,11 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
                 });
 
                 // Rename each tab as needed
-                Ext.each(tabs, function(tab) {
+                Ext.each(tabs, function (tab) {
                     if (baseNames[tab.baseName] > 1) {
                         // Duplicate fileName, use fileName + container directory in title
                         if (fileNames[tab.fileName] > 1) {
-                           tab.setTitle(tab.fileName+" ("+tab.containerDir+")");
+                            tab.setTitle(tab.fileName + " (" + tab.containerDir + ")");
                         } else { // Duplicate baseName but unique fileName, use fileName for title
                             tab.setTitle(tab.fileName);
                         }
@@ -874,13 +978,20 @@ Ext.define("Compass.ErpApp.Desktop.Applications.Knitkit.CenterRegion", {
             }
         });
 
+        startupPanel = Ext.createWidget('knitkit_splash_screen', {
+            closable: true,
+            centerRegion: region
+        });
+        this.workArea.add(startupPanel);
+        this.workArea.setActiveTab(startupPanel);
+
         config = Ext.apply({
-            id:'knitkitCenterRegion',
-            autoDestroy:true,
-            layout:'border',
-            region:'center',
+            id: 'knitkitCenterRegion',
+            autoDestroy: true,
+            layout: 'border',
+            region: 'center',
             //split:true,
-            items:[this.workArea]
+            items: [this.workArea]
         }, config);
 
         this.callParent([config]);