Index: Dev/branches/rest-dojo-ui/client/mSurvey.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mSurvey.html	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/mSurvey.html	(revision 349)
@@ -1,128 +1,128 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <title>Research Facilitator Tool</title>
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
-        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
-        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
-        <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
-        <script type="text/javascript">
-            require([
-                'dojo/parser',
-                'dijit/DropDownMenu',
-                'dijit/layout/AccordionContainer',
-                'dijit/layout/BorderContainer',
-                'dijit/layout/ContentPane',
-                'dijit/layout/TabContainer',
-                'dijit/layout/SplitContainer',
-                'dijit/MenuBar',
-                'dijit/MenuBarItem',
-                'dijit/form/Button',
-                'dijit/form/ComboBox',
-                'dijit/form/Form',
-                'dijit/form/Select',
-                'dijit/form/SimpleTextarea',
-                'dijit/form/TextBox',
-                'dijit/form/Textarea',
-                'dijit/PopupMenuBarItem',
-                'dijit/TitlePane',
-                'dojox/grid/DataGrid',
-                'dojox/widget/TitleGroup',
-                'rft/ui/List',
-                'rft/ui/MainMenu',
-                'rft/ui/MenuBarLink',
-                'rft/ui/MenuLink',
-                'rft/ui/Notifications',
-                'rft/ui/LineWithActionsWidget',
-                'rft/ui/QuestionWidget',
-                'rft/ui/Selector',
-                'rft/ui/SelectorThijs',
-                'rft/ui/LineWithActionsWidgetThijs',
-                'rft/ui/TitleGroup',
-                'dojo/domReady!'
-            ],function(parser){
-                parser.parse();
-            });
-        </script>
-        <script>
-            function goToPage(name) {
-                window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
-            }
-        </script>
-    </head>
-    <body class="dijitReset claro">
-        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-            <!-- Top menu bar -->
-            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                <h1>ResearchTool</h1>
-                <div data-dojo-type="rft.ui.MainMenu"></div>
-                <div class="breadcrumbs">
-                    <span class="breadcrumb">User > </span>
-                    <span class="breadcrumb">Session > </span>
-                    <span class="breadcrumbCurrent">Survey A [editing]</span>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Research Facilitator Tool</title>
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
+    <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
+    <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
+    <script type="text/javascript">
+    require([
+        'dojo/parser',
+        'dijit/DropDownMenu',
+        'dijit/layout/AccordionContainer',
+        'dijit/layout/BorderContainer',
+        'dijit/layout/ContentPane',
+        'dijit/layout/TabContainer',
+        'dijit/layout/SplitContainer',
+        'dijit/MenuBar',
+        'dijit/MenuBarItem',
+        'dijit/form/Button',
+        'dijit/form/ComboBox',
+        'dijit/form/Form',
+        'dijit/form/Select',
+        'dijit/form/SimpleTextarea',
+        'dijit/form/TextBox',
+        'dijit/form/Textarea',
+        'dijit/PopupMenuBarItem',
+        'dijit/TitlePane',
+        'dojox/grid/DataGrid',
+        'dojox/widget/TitleGroup',
+        'rft/ui/List',
+        'rft/ui/MainMenu',
+        'rft/ui/MenuBarLink',
+        'rft/ui/MenuLink',
+        'rft/ui/Notifications',
+        'rft/ui/LineWithActionsWidget',
+        'rft/ui/QuestionWidget',
+        'rft/ui/Selector',
+        'rft/ui/SelectorThijs',
+        'rft/ui/LineWithActionsWidgetThijs',
+        'rft/ui/TitleGroup',
+        'dojo/domReady!'
+        ],function(parser){
+            parser.parse();
+        });
+</script>
+<script>
+function goToPage(name) {
+    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
+}
+</script>
+</head>
+<body class="dijitReset claro">
+    <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+        <!-- Top menu bar -->
+        <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h1>ResearchTool</h1>
+            <div data-dojo-type="rft.ui.MainMenu"></div>
+            <div class="breadcrumbs">
+                <span class="breadcrumb">User > </span>
+                <span class="breadcrumb">Session > </span>
+                <span class="breadcrumbCurrent">Survey A [editing]</span>
+            </div>
+        </div>
+        <!-- Main content window -->
+        <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <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>
+                    </h2>
                 </div>
-            </div>
-            <!-- Main content window -->
-            <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
+                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
                     <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>
-                        </h2>
+                        Presets
                     </div>
-                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
-                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                            Presets
+                    <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.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
                         </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.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
-                            </div>
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
-                            </div>
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                            </div>
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
-                            </div>
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
-                            </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
                         </div>
                     </div>
-                    <!-- "Shopping cart" -->
-                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
-                        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
-                            <h3>Included questions</h3>
-                        </div>
-                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
-                            <!-- These would have to be dynamically generated instead of declared here! -->
-                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
-                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
-                        </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 rftIconSettings'">Settings</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>
+                </div>
+                <!-- "Shopping cart" -->
+                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
+                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
+                        <h3>Included questions</h3>
+                    </div>
+                    <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
+                        <!-- These would have to be dynamically generated instead of declared here! -->
+                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                    </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'">Design</button>
 
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </body>
+    </div>
+</body>
 </html>
Index: Dev/branches/rest-dojo-ui/client/mSurvey2.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mSurvey2.html	(revision 349)
+++ Dev/branches/rest-dojo-ui/client/mSurvey2.html	(revision 349)
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Research Facilitator Tool</title>
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
+    <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
+    <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
+    <script type="text/javascript">
+    require([
+        'dojo/parser',
+        'dijit/DropDownMenu',
+        'dijit/layout/AccordionContainer',
+        'dijit/layout/BorderContainer',
+        'dijit/layout/ContentPane',
+        'dijit/layout/TabContainer',
+        'dijit/layout/SplitContainer',
+        'dijit/MenuBar',
+        'dijit/MenuBarItem',
+        'dijit/form/Button',
+        'dijit/form/ComboBox',
+        'dijit/form/Form',
+        'dijit/form/Select',
+        'dijit/form/SimpleTextarea',
+        'dijit/form/TextBox',
+        'dijit/form/Textarea',
+        'dijit/PopupMenuBarItem',
+        'dijit/TitlePane',
+        'dojox/grid/DataGrid',
+        'dojox/widget/TitleGroup',
+        'rft/ui/List',
+        'rft/ui/MainMenu',
+        'rft/ui/MenuBarLink',
+        'rft/ui/MenuLink',
+        'rft/ui/Notifications',
+        'rft/ui/LineWithActionsWidget',
+        'rft/ui/QuestionWidget',
+        'rft/ui/Selector',
+        'rft/ui/SelectorThijs',
+        'rft/ui/LineWithActionsWidgetThijs',
+        'rft/ui/TitleGroup',
+        'dojo/domReady!'
+        ],function(parser){
+            parser.parse();
+        });
+</script>
+<script>
+function goToPage(name) {
+    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
+}
+</script>
+</head>
+<body class="dijitReset claro">
+    <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+        <!-- Top menu bar -->
+        <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h1>ResearchTool</h1>
+            <div data-dojo-type="rft.ui.MainMenu"></div>
+            <div class="breadcrumbs">
+                <span class="breadcrumb">User > </span>
+                <span class="breadcrumb">Session > </span>
+                <span class="breadcrumbCurrent">Survey A [editing]</span>
+            </div>
+        </div>
+        <!-- Main content window -->
+        <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <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>
+                    </h2>
+                </div>
+                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+                        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.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
+                        </div>
+                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- "Shopping cart" -->
+                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
+                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
+                        <h3>Included questions</h3>
+                    </div>
+                    <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
+                        <!-- These would have to be dynamically generated instead of declared here! -->
+                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                    </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 rftIconSettings'">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'">Design</button>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
Index: Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html	(revision 349)
+++ Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html	(revision 349)
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Research Facilitator Tool</title>
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/claro/claro.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
+    <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
+    <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
+    <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
+    <script type="text/javascript">
+    require([
+        'dojo/parser',
+        'dijit/DropDownMenu',
+        'dijit/layout/AccordionContainer',
+        'dijit/layout/BorderContainer',
+        'dijit/layout/ContentPane',
+        'dijit/layout/TabContainer',
+        'dijit/layout/SplitContainer',
+        'dijit/MenuBar',
+        'dijit/MenuBarItem',
+        'dijit/form/Button',
+        'dijit/form/ComboBox',
+        'dijit/form/Form',
+        'dijit/form/Select',
+        'dijit/form/SimpleTextarea',
+        'dijit/form/TextBox',
+        'dijit/form/Textarea',
+        'dijit/PopupMenuBarItem',
+        'dijit/TitlePane',
+        'dojox/grid/DataGrid',
+        'dojox/widget/TitleGroup',
+        'rft/ui/List',
+        'rft/ui/MainMenu',
+        'rft/ui/MenuBarLink',
+        'rft/ui/MenuLink',
+        'rft/ui/Notifications',
+        'rft/ui/LineWithActionsWidget',
+        'rft/ui/QuestionWidget',
+        'rft/ui/Selector',
+        'rft/ui/SelectorThijs',
+        'rft/ui/LineWithActionsWidgetThijs',
+        'rft/ui/TitleGroup',
+        'dojo/domReady!'
+        ],function(parser){
+            parser.parse();
+        });
+
+function goToPage(name) {
+    window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
+}
+</script>
+</head>
+
+<body class="dijitReset claro">
+    <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+        <!-- Top menu bar -->
+        <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h1>ResearchTool</h1>
+            <div data-dojo-type="rft.ui.MainMenu"></div>
+            <div class="breadcrumbs">
+                <span class="breadcrumb">User > </span>
+                <span class="breadcrumb">Session > </span>
+                <span class="breadcrumbCurrent">Survey A [Design]</span>
+            </div>
+        </div>
+        <!-- Main content window -->
+        <div class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <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 [Design]</span>
+                    </h2>
+                </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>
+                            </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>
+
+                <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>
+            </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 348)
+++ Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 349)
@@ -275,2 +275,172 @@
     width: 100px !important;
 }
+
+
+/* Question editor/Survey Advanced editor */
+.claro .QuestionEditor .PreviewWindow {
+    /* 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! */
+}
+.claro .dijitAccordionInnerContainer {
+    /* This contains a title and a childWrapper. The two of these make up one "item" in the Accordion element */
+    border: none;
+    border-color: #333333;
+    background-color: #0072bc;
+    margin-bottom: 0;
+}
+.claro .dijitAccordionInnerContainer {
+    background-color: transparent;
+}
+.claro .dijitAccordionTitle, .claro .dijitAccordionTitleSelected {
+    background-color: #0072bc;
+    background-image: none;
+    color: #ffffff;
+}
+.claro .dijitAccordionTitle .rftIcon {
+    width: 16px;
+    height: 16px;
+    background-image: url('images/icons/rftIcons16b.png');
+    margin: 0 4px 2px 0;
+}
+.claro .dijitAccordionTitleSelected .rftIcon {
+    background-image: url('images/icons/rftIcons16.png');
+}
+.claro .dijitAccordionContainer.blue .dijitAccordionTitle, .claro .dijitAccordionContainer.blue .dijitAccordionTitleSelected {
+    background-color: #0072bc;
+}
+.claro .dijitAccordionContainer.blue .dijitAccordionTitleHover {
+    background-color: #0794d1;
+}
+.claro .dijitAccordionContainer.orange .dijitAccordionTitle, .claro .dijitAccordionContainer.orange .dijitAccordionTitleSelected {
+    background-color: #ff5b12;
+}
+.claro .dijitAccordionContainer.orange .dijitAccordionTitleHover {
+    background-color: #ff9140;
+}
+.claro .dijitAccordionText {
+    color: #ffffff;
+}
+.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
+    background-color: #444444;
+    border: none !important;
+    padding: 0;
+    margin: 0;
+}
+.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
+.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
+    border: none;
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    /* Override the box shadow and offset on hover */
+}
+
+
+/* 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 {
+    background-color: #0794d1;
+}
+.claro div.orange.objectBgColor,
+.claro .orange .objectBgColor {
+    background-color: #ff5b12;
+}
+.claro div.lorange.objectBgColor,
+.claro .lorange .objectBgColor {
+    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 {
+    background-color: #993dec;
+}
+.claro div.red.objectBgColor,
+.claro .red .objectBgColor {
+    background-color: #8c0310;
+}
+.claro div.lred.objectBgColor,
+.claro .lred .objectBgColor {
+    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*/
+.claro .dijitMenuPopup {
+
+}
+.claro .dijitMenuPopup .dijitMenu {
+border: none;
+background-color: #333333;
+background-image: none;
+color: #999999;   
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
+    color: #999999;
+    background-image: none;
+    background-color: transparent;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.blue,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.blue {
+    background-color: #0072bc;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.orange,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.orange {
+    background-color: #ff5b12;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.purple,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.purple {
+    background-color: #6529b7;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.green,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.green {
+    background-color: #3aa605;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.red,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.red {
+    background-color: #8c0310;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover .dijitMenuItemLabel,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .dijitMenuItemLabel,
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel {
+    color: #ffffff;
+}
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
+    height: 16px;
+    width: 16px;
+    margin: 0;
+    margin-right: 4px;
+    background-image: url('images/icons/rftIcons16.png');
+} 
+.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .rftIcon {
+    background-image: url('images/icons/rftIcons16b.png');
+}
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css	(revision 349)
@@ -22,4 +22,7 @@
     background-image: url('images/icons/rftIcons24.png');
 }
+.claro .rftLargeButton.black .rftIcon {
+    background-image: url('images/icons/rftIcons24b.png');
+}
 .claro .rftLargeButton .dijitButtonText {
     line-height: 24px;
@@ -66,8 +69,10 @@
     width: 16px !important;
     background-image: url('images/icons/rftIcons16.png') !important;
-    margin-right: 4px !important;
+}
+.claro .rftBlockButton .rftIcon.black {
+    background-image: url('images/icons/rftIcons16b.png') !important;
 }
 .claro .rftBlockButton.rftBlockButtonHover .rftIcon {
-    background-image: url('images/icons/rftIcons16black.png') !important;
+    background-image: url('images/icons/rftIcons16b.png') !important;
 }
 .claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
@@ -145,5 +150,11 @@
 }
 .claro .rftInlineButton.black .rftIcon {
-    background-image: url('images/icons/rftIcons16black.png');
+    background-image: url('images/icons/rftIcons16b.png');
+}
+.claro .rftInlineButton .rftIcon.black {
+    background-image: url('images/icons/rftIcons16b.png');
+}
+.claro .rftInlineButton .rftIcon.white {
+    background-image: url('images/icons/rftIcons16.png');
 }
 .claro .rftInlineButton.rftInlineButtonHover .rftIcon {
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftIcons.css	(revision 349)
@@ -1,3 +1,3 @@
-/*  
+\/*  
     The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
     The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), 
@@ -25,4 +25,6 @@
     Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
 */
+
+/* Types */
 .rftIconApplication {
     background-position: 0px 0px;
@@ -64,4 +66,5 @@
     background-position: -384px 0px;
 }
+/* Actions */
 .rftIconAccept {
     background-position: -416px 0px;
@@ -97,5 +100,5 @@
     background-position: -736px 0px;
 }
-.rftIconSettings {
+.rftIconProperties {
     background-position: -768px 0px;
 }
@@ -121,27 +124,62 @@
     background-position: -992px 0px;
 }
-.rftIconFullArrowUp {
+.rftIconTag {
     background-position: -1024px 0px;
 }
-.rftIconFullArrowDown {
+.rftIconImage {
     background-position: -1056px 0px;
 }
-.rftIconFullArrowLeft {
+.rftIconEdit {
     background-position: -1088px 0px;
 }
-.rftIconFullArrowRight {
+.rftIconLock {
     background-position: -1120px 0px;
 }
-.rftIconHalfArrowUp {
+.rftIconUnlock {
     background-position: -1152px 0px;
 }
-.rftIconHalfArrowDown {
+.rftIconPreset {
     background-position: -1184px 0px;
 }
-.rftIconHalfArrowLeft {
+.rftIconTextBlock {
     background-position: -1216px 0px;
 }
+.rftIconPageBreak {
+    background-position: -1248px 0px;
+}
+.rftIconExternal {
+    background-position: -1280px 0px;
+}
+.rftIconInput {
+    background-position: -1312px 0px;
+}
+.rftIconPublish {
+    background-position: -1344px 0px;
+}
+
+/* Arrows */
+.rftIconFullArrowUp {
+    background-position: -1696px 0px;
+}
+.rftIconFullArrowDown {
+    background-position: -1728px 0px;
+}
+.rftIconFullArrowLeft {
+    background-position: -1760px 0px;
+}
+.rftIconFullArrowRight {
+    background-position: -1792px 0px;
+}
+.rftIconHalfArrowUp {
+    background-position: -1824px 0px;
+}
+.rftIconHalfArrowDown {
+    background-position: -1856px 0px;
+}
+.rftIconHalfArrowLeft {
+    background-position: -1888px 0px;
+}
 .rftIconHalfArrowRight {
-    background-position: -1248px 0px;
+    background-position: -1920px 0px;
 }
 
Index: Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css	(revision 349)
@@ -44,5 +44,5 @@
 }
 .claro div.orange.rftLineWithButtons,
-.claro .orange .ftLineWithButtons {
+.claro *.orange .rftLineWithButtons {
     background-color: #ff5b12;
     color: #ffffff;
Index: Dev/branches/rest-dojo-ui/client/rft/pages/survey.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 349)
@@ -47,5 +47,5 @@
             </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 rftIconSettings'">Settings</button>
+                <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>
Index: Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 349)
@@ -1,14 +1,34 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
-    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
+define([
+    'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/on',
+    'dojo/dom', 
+    'dojo/dom-class', 
+    'dijit/form/Button',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
     'dojo/text!./templates/LineWithActionsWidget.html'
     ],
-    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+    function(
+        declare,
+        lang,
+        on,
+        dom,
+        domClass,
+        Button,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        templateString) {
         return declare('rft.ui.LineWithActionsWidgetThijs',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
+
             templateString: templateString,
             baseClass: 'rftLineWithButtons',
             title: '',
-            modifiers: "blue",
+            modifiers: "",
             userObject: null,
             actions: {},
+            
             postCreate: function() {
                 dom.setSelectable(this.domNode, false);
@@ -23,5 +43,5 @@
             _setupActions: function() {
                 for (var action in this.actions) {
-                    
+
                     if (this.actions[action].properties.blockButton == true) {  // BlockButton
                         var properties = lang.mixin({
@@ -51,4 +71,5 @@
             },
             refresh: function() {
+
                 this.titleNode.innerHTML = this.title;
             },
@@ -66,3 +87,3 @@
             }
         });
-    });
+});
Index: Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/ObjectBox.js	(revision 349)
@@ -60,5 +60,5 @@
                             label: "Edit/View",
                             modifiers: "trans",
-                            icon: "Settings"
+                            icon: "Edit"
                         }
                     };
@@ -93,12 +93,12 @@
             _setObjectReference: function(identifier) {
             // TODO: Set this ObjectBox to refer to a certain database object
-            },
-            _getObjectInfo: function() {
+        },
+        _getObjectInfo: function() {
             // TODO: Query the database and retrieve a JSON array of object properties
-            },
-            _inspectObject: function() {
+        },
+        _inspectObject: function() {
             // TODO: Get object information (or retrieve from cache), then display in popup
-            },
-            _editObject: function(customFunction) {
+        },
+        _editObject: function(customFunction) {
                 // TODO: Pass an edit call to the page script, along with reference to the object contained in this ObjectBox
                 alert("Default edit code");
@@ -138,5 +138,5 @@
              * TODO: Check with Hendrik if I should do this or not!
              * */
-            CreateNew: function(arguments, reference, location) {
+             CreateNew: function(arguments, reference, location) {
                 var newBox = new rft.ui.ObjectBox(arguments);
                 newBox.startup();
@@ -144,3 +144,3 @@
             }
         });
-    });
+});
Index: Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 348)
+++ Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html	(revision 349)
@@ -5,8 +5,8 @@
             <span>Content</span>
             <div data-dojo-type="dijit.DropDownMenu">
-                <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'surveys'">Surveys</div>
-                <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'questions'">Questions</div>
-                <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'applications'">Applications</div>
-                <div data-dojo-type="rft.ui.MenuLink" data-dojo-props="pageId:'dashboards'">Dashboards</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="blue" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="orange" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="purple" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
+                <div data-dojo-type="rft.ui.MenuLink" class="red" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
             </div>
         </div>
