Index: Dev/branches/rest-dojo-ui/client/index.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/index.html	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/index.html	(revision 347)
@@ -12,10 +12,15 @@
         <script type="text/javascript" src="rft/run.js"></script>
     </head>
-    <body class="claro">
-        <div id="header" class="mainHeader">
-            <div id="menu" class="mainMenu"  data-dojo-type="rft.ui.MainMenu">
+    <body class="dijitReset claro">
+        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <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">Some</span> &gt; <span class="breadcrumb">Sample</span> &gt; <span class="breadcrumbCurrent">Breadcrumb [visiting]</span>
+                </div>
             </div>
-        </div>
-        <div id="content" data-dojo-type="dijit.layout.ContentPane" style="width: 100%; height: 100%;">
+            <div id="content" class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            </div>
         </div>
         <div id="toaster" data-dojo-type="rft.ui.Notifications">
Index: Dev/branches/rest-dojo-ui/client/rft/content.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/content.js	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/content.js	(revision 347)
@@ -95,4 +95,21 @@
                 }
                 
+                function getFirstNode(html) {
+                    var nodeOrFragment = domConstruct.toDom(html);
+                    if (nodeOrFragment instanceof Element) {
+                        return nodeOrFragment;
+                    }
+                    if (nodeOrFragment instanceof DocumentFragment) {
+                        console.warn("Fragment found, will only use first Element");
+                        for (i in nodeOrFragment.childNodes) {
+                            var node = nodeOrFragment.childNodes[i];
+                            if (node instanceof Element) {
+                                return node;
+                            }
+                        }
+                    }
+                    return domConstruct.toDom('<div>No Element found in template.</div>');
+                }
+
                 function mixinArgs(node) {
                     var props = {};
@@ -118,5 +135,5 @@
                 // initialize page or create error message
                 .then(function(html){
-                    var rootNode = domConstruct.toDom(html);
+                    var rootNode = getFirstNode(html);
                     mixinArgs(rootNode);
                     contentPane.set('content',rootNode);
Index: Dev/branches/rest-dojo-ui/client/rft/pages/index.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/index.html	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/index.html	(revision 347)
@@ -1,3 +1,36 @@
 <div>
-    <h1>Index pagina</h1>
+    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 600px;">
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h2>
+                <span class="rftIcon rftIconUser"></span>
+                <span class="headerText">Main Menu</span>
+            </h2>
+        </div>
+
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+
+            <div class="rftIndexMenuBlock">
+                <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>
+            </div>
+
+            <div class="rftIndexMenuBlock">
+                <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>
+
+            </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>
+        </div>
+    </div>
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/pages/session.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/session.html	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/session.html	(revision 347)
@@ -1,23 +1,58 @@
 <div>
-    <script type="dojo/method" data-dojo-event="onVisit">
-        var that = this;
-        debugger;
-        require(['dojo/_base/json','dojo/dom','dojo/store/JsonRest','dojo/domReady!'],
-            function(json,dom,JsonRest){
-                var store = new JsonRest({
-                    target:"../server/api.php/data/Session/",
-                    idProperty: 'uid'
-                });
-                store.get(that.args.uid).then(function(obj){
-                    that.page_session_form.innerHTML = json.toJson(obj);
-                });
-            });
-    </script>
-    <div class="largeFrame" style="width: 400px;">
-        <div class="largeTitle">Session</div>
-        <div class="content">
-            <div data-rft-attach-point="page_session_form"></div>
+    <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">Teamup Session 15-5-2012 [editing]</span>
+            </h2>
+        </div>
+        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+            <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
+                <div data-dojo-type="dijit.layout.ContentPane" title="Properties">
+                    <!--PROPERTIES-->
+                    <h3>Basic</h3>
+                    <fieldset class="align">
+                        <label for="titleInput">Title:</label>
+                        <input type="text" id="titleInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter title here'" />
+                        <br/>
+                        <label for="descriptionInput">Description:</label>
+                        <textarea id="descriptionInput" rows="3" cols="54" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props="selectOnClick: true">This is the description in the info popups!</textarea>
+                        <br/>
+                        <label for="dateInput">Planned date:</label>
+                        <input type="text" id="dateInput" data-dojo-type="dijit.form.DateTextBox" required="true" />
+                    </fieldset>
+
+                    <h3>Accounts</h3>
+                    <fieldset class="align">
+                        <label for="accountsInput">Add new</label>
+                        <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter email address here...'" />
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
+                        <br/><br/>
+                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'" style="width: 500px;">
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'a.bezuijen@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
+                        </div>
+                    </fieldset>
+
+                    <button id="btnPropertiesDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
+                    <button id="btnPropertiesSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save changes</button>
+
+
+                </div>
+                <div data-dojo-type="dijit.layout.ContentPane" title="Design">
+                    <!--DESIGN-->
+
+                    <div class="rftSessionObject green">
+                        <div class="rftIcon rftIconSurvey"></div>
+                        <label>Survey name</label>
+                    </div>
+                    <div class="rftSessionObject green">
+                        <div class="rftIcon rftIconSurvey"></div>
+                        <label>Survey name, this one is really long.</label>
+                    </div>
+
+                </div>
+            </div>
         </div>
     </div>
-
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/pages/sessions.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/sessions.html	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/sessions.html	(revision 347)
@@ -1,57 +1,69 @@
 <div>
-    <script type="rft/method" data-rft-method="onVisit">
-        var that = this;
-        require(['dojo/_base/lang','dojo/_base/event','dojo/store/JsonRest','dojox/grid/DataGrid',
-        Â Â Â Â 'dojo/data/ObjectStore','rft/content','dojo/domReady!'],
-        function(lang,event,JsonRest,DataGrid,ObjectStore,content){
-            var store = new JsonRest({
-                target:"../server/api.php/data/Session/",
-                idProperty: 'uid'
+    <script>
+        function createNew(){
+            var newBox = new rft.ui.ObjectBox({
+                title: 'TeamUp Basic Template',
+                subTitle: '',
+                lowerTitle: '',
+                objectType: 'SessionTemplate',
+                actions: {
+                    "edit": function() {},
+                    "delete": function() {}
+                }
             });
+            newBox.startup();
+            newBox.placeAt("containerTemplates", "last");
+        }
+        
+        function createInstance(args) {
+            // Create a template instance in the "Sessions" tab
+            var args;
+            args.objectType = "Session";
+            var d = new Date();
+            var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
+            var creator = "Igor Mayer"; // Use currently logged in profile instead!
+            args.subTitle = "Created on "+dateString+" by "+creator;
+        
+            args.actions = {
+                "edit": function() {},
+                "delete": function() {}
+            }
+            var newBox = new rft.ui.ObjectBox(args);
+            newBox.startup();
+            newBox.placeAt("containerSessions", "last");
 
-            that.grid.setStore(ObjectStore({objectStore: store}));
-        
-            that.grid.on('rowclick',lang.hitch(that,function(evt){
-                var obj = evt.grid.getItem(evt.rowIndex);
-                this.form.set('value', obj);
-            }));
+            // TODO: Then switch tabs to the Sessions tab!
+            var sess = dijit.byId("dijit_layout_ContentPane_5");
+            dijit.byId("tabs").selectChild(sess);
+        }
+    </script>
+    <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 rftIconSession"></span>
+                <span class="headerText">Sessions</span>
+            </h2>
+        </div>
+        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+            <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'" id="tabs">
+                <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
+                    <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
+                        <!--TODO: These don't allow for custom icon settings yet! -->
+                        <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'delete':function(){}, 'Custom function': function(){alert('newCommand');}, 'publish': createInstance}"></div>
+                    </div>
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                        <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate', onClick: createNew">Create new template</div>
+                    </div>
+                </div>
+                <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
+                    <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
 
-            that.grid.on('rowdblclick',lang.hitch(that,function(evt){
-                var obj = evt.grid.getItem(evt.rowIndex);
-                content.goTo('/session',{uid:obj.uid});
-            }));
-
-            var submitHandler = lang.hitch(that,function(evt){
-                var newObj = this.form.get('value');
-                // mixin newObj in obj.
-                // store.put(newObj);
-                event.stop(evt);
-                return false;
-            });
-            that.btnSave.on('click',submitHandler);
-            that.form.on('submit',submitHandler);
-        
-        });
-    </script>
-    <div class="largeFrame" style="width: 400px;">
-        <div class="largeTitle">Sessions</div>
-        <div class="content">
-            <div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="autoWidth:true,autoHeight:true,structure:[{name:'Title',field:'title'}]" data-dojo-attach-point="grid"></div>
-        </div>
-
-    </div>
-
-    <div class="largeFrame" style="width: 400px;">
-        <div class="largeTitle">Details</div>
-        <div>
-            <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form">
-                <fieldset>
-                    <label for="title" class="loginLabel">Title</label>
-                    <input data-dojo-type="dijit.form.TextBox" name="title" type="text" class="loginInput" />
-                </fieldset>
-                <button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSave">Save</button>
-            </form>
+                    </div>
+                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
+                        <!-- Buttons? -->
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/pages/survey.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 347)
@@ -1,18 +1,56 @@
 <div data-dojo-type="rft.pages.survey">
-    <h1 data-rft-attach-point="header">(default)</h1>
-    <div>Created by <span data-rft-attach-point="creator"></span></div>
-    <form data-dojo-type="dijit.form.Form" data-rft-attach-point="form" data-rft-attach-event="onSubmit:onSave">
-        <div style="display: block; clear: both;">
-            <button type="submit" data-dojo-type="dijit.form.Button">Save</button>
-            <button type="button" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onReset">Reset</button>
+    <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>
-        <label for="title" class="loginLabel">Title</label>
-        <input type="text" name="title" data-dojo-type="dijit.form.TextBox" class="loginInput"/>
-        <label for="description" class="loginLabel">Description</label>
-        <textarea name="description" data-dojo-type="dijit.form.SimpleTextarea" class="loginInput"></textarea>
-        <div>
-            <div style="width: 45%; float: left; clear: left;"><div data-rft-attach-point="allQuestions"></div></div>
-            <div style="width: 45%; float: left;"><div data-rft-attach-point="surveyQuestions"></div></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>
-    </form>
+        <!-- "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>
+        </div>
+    </div>
 </div>
Index: Dev/branches/rest-dojo-ui/client/rft/run.js
===================================================================
--- Dev/branches/rest-dojo-ui/client/rft/run.js	(revision 346)
+++ Dev/branches/rest-dojo-ui/client/rft/run.js	(revision 347)
@@ -8,4 +8,5 @@
     'dojo/data/ObjectStore',
     'dojo/store/JsonRest',
+    'dijit/InlineEditBox',
     'dijit/MenuBar',
     'dijit/MenuBarItem',
@@ -13,7 +14,9 @@
     'dijit/DropDownMenu',
     'dijit/TitlePane',
+    'dijit/layout/BorderContainer',
     'dijit/layout/ContentPane',
     'dijit/layout/TabContainer',
     'dijit/layout/AccordionContainer',
+    'dijit/form/DateTextBox',
     'dijit/form/Form',
     'dijit/form/TextBox',
@@ -25,4 +28,5 @@
     'dojox/grid/DataGrid',
     'dojox/widget/TitleGroup',
+    'rft/ui/List',
     'rft/ui/MainMenu',
     'rft/ui/MenuBarLink',
@@ -32,4 +36,8 @@
     'rft/ui/QuestionWidget',
     'rft/ui/TitleGroup',
+    
+    // Thijs mods, to be merged
+    'rft/ui/SelectorThijs',
+    'rft/ui/LineWithActionsWidgetThijs',
     
     // pages -> load dynamically?
@@ -56,2 +64,6 @@
 
     });
+
+function goToPage(page) {
+    throw "Obsolete navigation to "+page;
+}
