Index: /Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html	(revision 354)
@@ -43,4 +43,5 @@
         'rft/ui/LineWithActionsWidgetThijs',
         'rft/ui/TitleGroup',
+        'rft/ui/SurveyEditorPreview',
         'dojo/domReady!'
         ],function(parser){
@@ -48,11 +49,8 @@
         });
 
-function goToPage(name) {
-    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
-}
 </script>
 </head>
 
-<body class="dijitReset claro">
+<body class="dijitReset claro blue">
     <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
         <!-- Top menu bar -->
@@ -76,39 +74,42 @@
                 </div>
 
+
+
+
                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
                     <!-- Left toolbar -->
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
                         <!--Accordion-->
-                        <div data-dojo-type="dijit.layout.AccordionContainer" class="orange">
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Included questions" data-dojo-props="iconClass: 'rftIcon rftIconQuestion'">
-                                <div data-dojo-type="rft.ui.List">
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
-                                    <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
+                        <div data-dojo-type="dijit.layout.AccordionContainer" class="blue">
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus'">
+                                <div data-dojo-type="dojo.dnd.Source" id="toolkitSource" data-dojo-props="skipForm: true, accept:[], selfAccept: false, copyOnly: true, horizontal: false, singular: true">
+                                                       
                                 </div>
-                            </div>
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus'">
-                                <!-- Content objects here -->
                             </div>
                         </div>
                     </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <!--Buttons-->
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save</button>
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
-                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconUndo'">Exit Design</button>
-                    </div>
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"
+                    >                    <!--Buttons-->
+                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save</button>
+                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
+                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconUndo'">Exit Design</button>
+                </div>
+            </div>
+
+
+
+
+
+
+            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+                <div data-dojo-type="rft.ui.SurveyEditorPreview" data-dojo-id="SurveyEditorPreview">
+                    <!-- Center preview/editor -->
                 </div>
 
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
-                    <!-- Center preview/editor -->
-                    <div class="QuestionEditor">
-                        <div class="PreviewWindow">Content here</div>
-                    </div>
-                </div>
+                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPlus', onClick: function(){SurveyEditorPreview.InsertObjects([{data:{title: 'New item', description: 'Default', code: 'QAB01F'}, type: 'editorToolkitItem'}]);}">Add new</button>
             </div>
         </div>
     </div>
+</div>
 </body>
 </html>
Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 354)
@@ -281,5 +281,4 @@
     /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
 }
-
 .claro .dijitAccordionContainer {
     /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
@@ -339,69 +338,76 @@
 }
 
-
-/* THIS IS AN EXPERIMENT !
- * This will allow to set one top colour, then all the "objectBgColor" or "objectHlColor" objects below it will inherit that colour, and apply it to the relevant CSS property.
- * Not applying these classes to an object will make it bypass the background settings.
-*/ 
-
-.claro div.blue.objectBgColor,
-.claro .blue .objectBgColor {
-    background-color: #0072bc;
-}
-.claro div.lblue.objectBgColor,
-.claro .lblue .objectBgColor {
+/* Experimental background colour inheritance */
+.claro div.blue.inheritBgColor,
+.claro .blue .inheritBgColor,
+.claro.blue .inheritBgColor {
+    background-color: #0072bc;
+}
+.claro div.green.inheritBgColor,
+.claro .green .inheritBgColor,
+.claro.green .inheritBgColor {
+    background-color: #3aa605;
+}
+.claro div.orange.inheritBgColor,
+.claro .orange .inheritBgColor,
+.claro.orange .inheritBgColor {
+    background-color: #ff5b12;
+}
+.claro div.purple.inheritBgColor,
+.claro .purple .inheritBgColor,
+.claro.purple .inheritBgColor {
+    background-color: #6529b7;
+}
+.claro div.red.inheritBgColor,
+.claro .red .inheritBgColor,
+.claro.red .inheritBgColor {
+    background-color: #8c0310;
+}
+.claro div.trans.inheritBgColor,
+.claro .trans .inheritBgColor,
+.claro.trans .inheritBgColor {
+    background-color: transparent;
+}
+.claro div.blue.inheritBgColor.light,
+.claro .blue .inheritBgColor.light,
+.claro.blue .inheritBgColor.light {
     background-color: #0794d1;
 }
-.claro div.orange.objectBgColor,
-.claro .orange .objectBgColor {
-    background-color: #ff5b12;
-}
-.claro div.lorange.objectBgColor,
-.claro .lorange .objectBgColor {
+.claro div.green.inheritBgColor.light,
+.claro .green .inheritBgColor.light,
+.claro.green .inheritBgColor.light {
+    background-color: #79ca0a;
+}
+.claro div.orange.inheritBgColor.light,
+.claro .orange .inheritBgColor.light,
+.claro.orange .inheritBgColor.light {
     background-color: #ff9140;
 }
-.claro div.green.objectBgColor,
-.claro .green .objectBgColor {
-    background-color: #3aa605;
-}
-.claro div.lgreen.objectBgColor,
-.claro .lgreen .objectBgColor {
-    background-color: #79ca0a;
-}
-.claro div.purple.objectBgColor,
-.claro .purple .objectBgColor {
-    background-color: #6529b7;
-}
-.claro div.lpurple.objectBgColor,
-.claro .lpurple .objectBgColor {
+.claro div.purple.inheritBgColor.light,
+.claro .purple .inheritBgColor.light,
+.claro.purple .inheritBgColor.light {
     background-color: #993dec;
 }
-.claro div.red.objectBgColor,
-.claro .red .objectBgColor {
-    background-color: #8c0310;
-}
-.claro div.lred.objectBgColor,
-.claro .lred .objectBgColor {
+.claro div.red.inheritBgColor.light,
+.claro .red .inheritBgColor.light,
+.claro.red .inheritBgColor.light {
     background-color: #bd0013;
 }
-/* TODO: Apply these classes to display elements that need to inherit the interface's object colour!
-    Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
-    Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
-    When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
- */
-
-
-
-
-
- /* Dropdown menu on MenuBar*/
+
+/*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
+Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
+Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
+When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
+
+
+Dropdown menu on MenuBar*/
 .claro .dijitMenuPopup {
 
 }
 .claro .dijitMenuPopup .dijitMenu {
-border: none;
-background-color: #333333;
-background-image: none;
-color: #999999;   
+    border: none;
+    background-color: #333333;
+    background-image: none;
+    color: #999999;   
 }
 .claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
@@ -445,2 +451,12 @@
     background-image: url('images/icons/rftIcons16b.png');
 }
+
+
+
+
+/* Alignment */
+.claro .floatRight {
+    float: right;
+    margin: 0;
+    padding: 0;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/css/main.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/main.css	(revision 354)
@@ -10,2 +10,3 @@
 @import url('rftObjectBox.css');
 @import url('sessionEditor.css');
+@import url('surveyEditor.css');
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/index.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/index.html	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/index.html	(revision 354)
@@ -10,27 +10,63 @@
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
 
-            <div class="rftIndexMenuBlock">
+            <div class="rftIndexMenuBlock" title="Sessions">
                 <div class="rftIndexMenuMask">
                     <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
                 </div>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'" onClick="goToPage('mSessions');">Create and edit</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'" onClick="goToPage('mSessions');">Facilitate</button>
+                <button id="btnContentCreate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</button>
+                <button id="btnContentFacilitate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</button>
             </div>
 
-            <div class="rftIndexMenuBlock">
+            <div class="rftIndexMenuBlock" title="Content">
                 <div class="rftIndexMenuMask">
                     <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
                 </div>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'" onClick="goToPage('mSurveys');">Surveys</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'" onClick="goToPage('mQuestions');">Questions</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'" onClick="goToPage('mApplications');">Applications</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'" onClick="goToPage('mDashboards');">Dashboards</button>
-
+                <button id="btnSurveys" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</button>
+                <button id="btnQuestions" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</button>
+                <button id="btnApplications" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</button>
+                <button id="btnDashboards" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</button>
             </div>
 
-            <div class="rftIndexMenuBlock">
-                <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'" onClick="goToPage('mResults')">Results</div>
+            <div class="rftIndexMenuBlock" title="results">
+                <div class="rftIndexMenuMask">
+                    <span class="rftIcon rftIconGameData"></span><span class="label">Results</span>
+                </div>
+                <button id="btnResults" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</button>
             </div>
         </div>
     </div>
+
+    <script>
+    require([
+        'dojo/on',
+        'dojo/query',
+        'dijit/registry',
+        'rft/content'
+        ], function(on, query, registry, content){
+            registry.byId("btnSessionsCreate").on("click", function(){
+                content.goTo("sessions", null);
+            });
+            registry.byId("btnSessionsFacilitate").on("click", function(){
+                content.goTo("sessions", null);
+            });
+            
+            registry.byId("btnSurveys").on("click", function(){
+                content.goTo("surveys", null);
+            });
+            registry.byId("btnQuestions").on("click", function(){
+                content.goTo("questions", null);
+            });
+            registry.byId("btnApplications").on("click", function(){
+                content.goTo("applications", null);
+            });
+            registry.byId("btnDashboards").on("click", function(){
+                content.goTo("dashboards", null);
+            });
+
+            registry.byId("btnResults").on("click", function(){
+                content.goTo("results", null);
+            });
+
+        });
+</script>
 </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 354)
@@ -1,8 +1,8 @@
-<div data-dojo-type="rft.pages.survey">
+<div data-dojo-type="rft.pages.survey" id="survey">
     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
             <h2>
                 <span class="rftIcon rftIconSurvey"></span>
-                <span class="headerText">Survey A [editing]</span>
+                <span class="headerText" data-dojo-attach-point="header">Survey A [editing]</span>
             </h2>
         </div>
@@ -11,27 +11,6 @@
                 Presets
             </div>
-            <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
-                <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Green Question Subcat one'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
-                </div>
-                <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
-                    <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat four'"></div>
-                </div>
+            <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
+                <!-- tabs go here -->
             </div>
         </div>
@@ -47,8 +26,8 @@
             </div>
             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
-                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
+                <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
+                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
+                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
+                <button id="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
             </div>
         </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js	(revision 354)
@@ -1,6 +1,16 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
-    'dojo/_base/Deferred','rft/ui/AccordionList','rft/ui/LineWithActionsWidget',
-    'rft/store','rft/ui/_Page','rft/api'],
-    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
+define(['dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/_base/event',
+    'dojo/_base/Deferred',
+    'rft/ui/AccordionList',
+    'rft/ui/LineWithActionsWidget',
+    'rft/store',
+    'rft/ui/_Page',
+    'rft/api',
+    'dijit/registry',
+    'rft/content',
+    'dojo/on',
+    'dojo/query'],
+    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api,registry,content, on, query){
         return declare('rft.pages.survey',[_Page],{
             object: null,
@@ -9,26 +19,18 @@
                     Deferred.when(store.get(this.pageArgs.uid))
                     .then(lang.hitch(this,function(obj){
-                        this.object = obj;
-                        this.setFields(obj);
-                        return Deferred.when( obj.creator && store.dereference(obj.creator) );
-                    }))
-                    .then(lang.hitch(this,function(obj){
-                        this.creator.innerHTML = (obj && obj.email) || 'unknown';
-                    }));
-                    Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
-                    .then(lang.hitch(this,function(items){
-                        this._questionList = new AccordionList({
-                            actions: {
-                                'Add': lang.hitch(this,'_addQuestion')
-                            },
-                            categoryProperty: 'category',
-                            titleProperty: 'title'
-                        },this.allQuestions);
-                        this._questionList.startup();
-                        this._questionList.setItems(items);
-                    }));
+                       this.object = obj;
+                       return Deferred.when( obj.creator && store.dereference(obj.creator) );
+                   }));
+                    this._createQuestionBrowser();
                 } else {
-                    this.header.innerHTML = "Error: no uid for survey!"
+                    //this.header.innerHTML = "Error: no uid for survey!"
                 }
+                this._setupButtons(this);
+                this._insertQuestion({title: "This is the question title!", sorting: {categories: ['CategoryOne', 'CategoryB123'], topic: 'The first question topic'}});
+                this._insertQuestion({title: "BLablabla question text!", sorting: {categories: ['CategoryOne'], topic: 'The first question topic'}});
+                this._insertQuestion({title: "Yaddayaddayaddaa ... sigh", sorting: {categories: ['CategoryThree', 'CategoryB123'], topic: 'Another topic'}});
+            },
+            onLeave: function() {
+                this.inherited(arguments);
             },
             onReset: function() {
@@ -36,5 +38,5 @@
             },
             onSave: function(evt) {
-                lang.mixin(this.object,this.form.get('value'));
+                /*lang.mixin(this.object,this.form.get('value'));
                 Deferred.when( store.put(this.object) )
                 .then(lang.hitch(this,function(obj){
@@ -48,25 +50,82 @@
                 evt.stopPropagation();
                 return false;
+                */
             },
-            setFields: function(obj) {
-                this.form.reset();
-                this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
-                obj && this.form.set('value',obj);
+            _goToPreview: function() {
+                content.goTo('surveyAdvanced', {uid: this.object._id});
+                /* 
+                * TODO: How to prevent widgets with identical id's on different pages clashing?
+                * For example: btnSave clashes when going from survey to surveyAdvanced, since both contain one. survey.btnSave is not destroyed when loading surveyAdvanced.btnSave!
+                * Since there is no page reload, only a contentPane content swap!
+                * Talk to Hendrik about this! 
+                * TEMPORARY FIX IN THIS.ONLEAVE!
+                */
             },
-            _addQuestion: function(obj) {
-                var d = {};
-                d.widget = new LineWithActionsWidget({
-                    title:obj.title,
-                    userObj: obj,
-                    actions:{
-                        "Remove": lang.hitch(this,'_removeQuestion',d)
+            _setupButtons: function() {
+                // Setup button events
+                registry.byId("btnSave").on("click", lang.hitch(this, function(){
+                    this.onSave(arguments);
+                }));
+                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
+                    this._goToPreview();
+                }));
+            },
+            _createQuestionBrowser: function() {
+                Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
+                .then(lang.hitch(this,function(questions){
+                 questions.forEach(function(question) {
+                    this._insertQuestion(question);
+                }, this);
+             }));
+            },
+            _insertQuestion: function(question) {
+                // MASSIVE TODO: The question categories cannot have spaces currently, due to the way we append them to the ID property of the container. ID's cannot have spaces.
+                // Easy fix: Replace spaces with underscores for the time being? The alternative is to make these containers have an actual "questioncategory" property in the governing widget. Not fun.
+                var tabs = registry.byId("tabList");
+                for (var c in question.sorting.categories) {
+                    var cat = question.sorting.categories[c];
+                    var catPane = query("#tab"+cat, tabs.containerNode)[0];
+                    if (catPane) {
+                        this._insertIntoCategory(question, catPane);
+                    } else {
+                        catPane = this._createCategoryTab(cat);
+                        if (catPane) {
+                            this._insertIntoCategory(question, catPane);
+                        } else {
+                            throw "Error: could not find or create category pane!";
+                        }
                     }
+                }
+            },
+            _createCategoryTab: function(category) {
+                var tabs = registry.byId("tabList");
+                var newCat = new dijit.layout.ContentPane({
+                    title: category
                 });
-                d.widget.placeAt(this.surveyQuestions);
+                newCat.domNode.id = "tab"+category;
+                tabs.addChild(newCat);
+                var pane = query("#tab"+category, tabs.containerNode)[0];
+                return (pane) ? pane : false;
             },
-            _removeQuestion: function(data,obj) {
-                data.widget.destroy();
-            }
+            _insertIntoCategory: function(question, container) {
+                debugger;
+                var selector = query(".rftSelector[title='"+question.sorting.topic+"']", container)[0];
+                var selectorWidget;
+                if (selector) {
+                    selectorWidget = registry.byNode(selector);
+                    
+                } else {
+                    selectorWidget = new rft.ui.Selector({
+                        title: question.sorting.topic
+                    });
+                    selectorWidget.placeAt(container);
+                }
+                selectorWidget.addQuestion(question);
+            },
+
+
+
+
         });
-    });
+});
 
Index: /Dev/branches/rest-dojo-ui/client/rft/run.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/run.js	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/run.js	(revision 354)
@@ -44,4 +44,5 @@
     'rft/pages/surveys',
     'rft/pages/survey',
+    'rft/pages/surveyAdvanced'
     ],
     function(win,parser,LoginDialog,dom,connect,auth,content) {
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 354)
@@ -26,11 +26,9 @@
             title: "The professional as a participant",
             baseClass: 'rftSelector',
-            modifiers: 'blue',    // Extra CSS classes
+            modifiers: 'blue',
             postCreate: function() {
                 domClass.add(this.domNode, this.modifiers);
                 domClass.add(this.selectedColorNode, "pending");
-                var infoFunction = function() {
-                    alert("Show info here");
-                }
+                
                 new LineWithActionsWidget({
                     title: this.title,
@@ -48,42 +46,11 @@
                     }
                 },this.titleNode);
-                var selectorLine = new LineWithActionsWidget({
+                
+                this.selectorLine = new LineWithActionsWidget({
                     title: 'None',
                     modifiers: this.modifiers,
                     actions: {
                         "ToggleDropdown" : {
-                            callback: lang.hitch(this,function(){
-                                var node = this.optionsNode;
-                                var show = fx.wipeIn({
-                                    node: node
-                                });
-                                var hide = fx.wipeOut({
-                                    node: node
-                                });
-                                hide.play();
-                                var folded = true;
-                                return function(e) {
-                                    if ( folded ) {
-                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
-                                        if (downArrowIcon){
-                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
-                                        }
-                                        show.play();
-                                        folded = false;
-                                    } else {
-                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
-                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
-                                        if (upArrowIcon){
-                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
-                                        }
-                                        hide.play();
-                                        folded = true;
-                            
-                                    }
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                };
-                            })(),
+                            callback: lang.hitch(this, this._toggleDropdown()),
                             properties: {
                                 blockButton: true,
@@ -95,9 +62,43 @@
                     }
                 },this.selectedItemNode);
+            },
+            _toggleDropdown: function(selectorLine) {
+                var node = this.optionsNode;
+                var show = fx.wipeIn({
+                    node: node
+                });
+                var hide = fx.wipeOut({
+                    node: node
+                });
+                hide.play();
+                var folded = true;
+                return function(e) {
+                    if ( folded ) {
+                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this.selectorLine.buttonsNode)[0];
+                        if (downArrowIcon){
+                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                        }
+                        show.play();
+                        folded = false;
+                    } else {
+                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this.selectorLine.buttonsNode)[0];
+                        if (upArrowIcon){
+                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
+                        }
+                        hide.play();
+                        folded = true;
+
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                };
+            },
+            addQuestion: function(question) {
                 new LineWithActionsWidget({
-                    title: 'Are there direct colleagues among the other participants?',
+                    title: question.title,
+                    question: question,
                     actions: {
                         "InfoHover" : {
-                            callback: infoFunction,
+                            callback: this.infoFunction,
                             properties: {
                                 blockButton: false,
@@ -108,5 +109,8 @@
                     }
                 }).placeAt(this.optionsNode);
+            },
+            infoFunction: function(){
+                alert("Some info here!");text
             }
         });
-    });
+});
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/_Page.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/_Page.js	(revision 353)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/_Page.js	(revision 354)
@@ -35,5 +35,9 @@
             onVisit: function(){},
             /** Event fired before leaving the page. Return false to prevent */
-            onLeave: function(){}
+            onLeave: function(){
+                dijit.findWidgets(this.domNode).forEach(function(w){
+                    w.destroyRecursive(false);
+                });
+            }
         });
     });
