Index: Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- Dev/branches/rest-dojo-ui/client/mockup.html	(revision 336)
+++ Dev/branches/rest-dojo-ui/client/mockup.html	(revision 337)
@@ -51,116 +51,71 @@
     </head>
     <body class="dijitReset gamelab">
-        <div class="header">
-            <div class="mainLogo">Research Tool</div>
+        <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>
+                <!-- And now the menu! -->
+                <div data-dojo-type="dijit.MenuBar">
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Sessions</div>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Content</div>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Results</div>
+                    <div data-dojo-type="dijit.MenuBarItem" class="rftMainMenuButton">Log out</div>
+                </div>
+                <div class="breadcrumbs">
+                    <span class="breadcrumb">User > </span>
+                    <span class="breadcrumb">Session > </span>
+                    <span class="breadcrumbCurrent">Survey A [editing]</span>
+                </div>
+            </div>
 
-            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
-                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
-                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
-            </div>
-            <div class="breadcrumbs">
-                <span class="breadcrumb">Home > </span>
-                <span class="breadcrumb">Sessions > </span>
-                <span class="breadcrumb">Session A > </span>
-                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
-            </div>
-        </div>  <!-- HEADER -->
-        <div class="content" data-dojo-type="dijit.layout.ContentPane">
-            <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'">
-                    Title and icon
-                </div>
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
+            <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'">
-                        Presets
+                        <h2>
+                            <span class="rftIcon rftIconSurvey"></span>
+                            <span class="headerText">Survey A [editing]</span>
+                        </h2>
                     </div>
-                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></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.ContentPane" title="Category Two">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'orange'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'orange'"></div>
+                        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition:'left-h',region:'center'">
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></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', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></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', color: 'blue'"></div>
+                            </div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'blue'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'blue'"></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', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
+
+                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconAccept'">Properties</button>
+                                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconPreview'">Preview</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 rftIconAccept'">Accept changes</button>
+                            </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', color: 'green'"></div>
-                        </div>
-                        <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', color: 'red'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'red'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'red'"></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', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three', color: 'purple'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four', color: 'purple'"></div>
-
+                    </div>
+                    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
+                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
+                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
                         </div>
                     </div>
                 </div>
-                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
-                    <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
-                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
-                        <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, class:'black'}}}"></div>
-                    </div>
-                </div>
             </div>
-
-            <!--
-            <div class="title">
-                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
-            </div>
-            <div data-dojo-type="dijit.layout.BorderContainer" 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'">
-                        <span>Load preset</span>
-                        <select data-dojo-type="dijit.form.ComboBox">
-                            <option>Preset A</option>
-                            <option>Preset B</option>
-                        </select>
-                    </div>
-                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
-                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
-                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Intrinsic motivation', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Extrinsic motivation', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Motivation to participate', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Experience with games', color: 'blue'"></div>
-                            <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="title:'Participant context', color: 'blue'"></div>
-                        </div>
-                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
-                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
-                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
-                    </div>
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        <div>Legend</div>
-                        <div>Selected question is included in survey.</div>
-                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
-                        <div>Selected question conflicts with an included question. You can only swap these.</div>
-                        
-
-                    </div>
-                </div>
-                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
-                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
-                        <span>Included questions</span>
-                        <div data-dojo-type="rft.ui.List">
-                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                            <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
-                        </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 rftIconPreview'">Preview</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 rftIconAccept'">Accept changes</button>
-                    </div>
-                </div>
-            </div>
-            -->
         </div>
     </body>
