Index: /Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 316)
+++ /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 316)
@@ -0,0 +1,142 @@
+<!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/TitleGroup',
+                'dojo/domReady!'
+            ],function(parser){
+                parser.parse();
+            });
+        </script>
+        <style>
+            .dijitTab {
+                width: 120px;
+                white-space: normal;
+            }
+
+            .rftLineWithButtons {
+                display: table;
+                width: 100%;
+                border: 1px gray solid;
+                margin: 2px;
+            }
+            .rftLineWithButtons.includedQuestion {
+                background-color: lightgreen;
+            }
+            .rftLineWithButtons.conflictedQuestion {
+                background-color: lightcoral;
+            }
+            .rftLineWithButtons.dijitSelected {
+                background-color: lightblue;
+            }
+            .rftLineWithButtonsTitle {
+                display: table-cell;
+                padding-left: 4px;
+            }
+            .rftLineWithButtonsButtons {
+                display: table-cell;
+                text-align: right;
+            }
+        </style>
+    </head>
+    <body class="dijitReset claro">
+        <div class="header">
+            <div data-dojo-type="dijit.MenuBar">
+                <div data-dojo-type="dijit.MenuBarItem">Research tool</div>
+                <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">Home > Sessions > Session A > Survey 123 [Editing]</div>
+        </div>
+        <div class="content" data-dojo-type="dijit.layout.ContentPane">
+            <div class="title">
+                <span class="titleIcon"></span><span class="titleText">Survey 123 [Editing]</span>
+            </div>
+            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; 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.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
+                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
+                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></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="iconClass:'dijitIconConfigure'">Properties</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
+                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/questions.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/questions.js	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/questions.js	(revision 316)
@@ -10,8 +10,8 @@
                 this._store = store.getStore('Question');
                 this._list = new AccordionList({
-                    store: this._store,
                     actions: {
                         'Edit': lang.hitch(this,'_editQuestion')
                     },
+                    idProperty: this._store.idProperty,
                     categoryProperty: 'category',
                     titleProperty: 'title'
@@ -21,5 +21,8 @@
             },
             _refresh: function() {
-                this._list.refresh();
+                Deferred.when(this._store.query())
+                .then(lang.hitch(this,function(items){
+                    this._list.setItems(items);
+                }));
             },
             onNewQuestion: function() {
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/survey.html	(revision 316)
@@ -1,5 +1,5 @@
 <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>
+    <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;">
@@ -11,4 +11,8 @@
         <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>
     </form>
 </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/survey.js	(revision 316)
@@ -1,13 +1,16 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','dojo/_base/Deferred','rft/store','rft/ui/_Page','rft/api'],
-    function(declare,lang,event,Deferred,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'],
+    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
         return declare('rft.pages.survey',[_Page],{
             object: null,
             postCreate: function() {
                 this.inherited(arguments);
-                this._store = store.getStore('Survey');
+                this._surveyStore = store.getStore('Survey');
+                this._questionStore = store.getStore('Question');
             },
             onVisit: function() {
                 if ( this.pageArgs.uid ) {
-                    Deferred.when(this._store.get(this.pageArgs.uid))
+                    Deferred.when(this._surveyStore.get(this.pageArgs.uid))
                     .then(lang.hitch(this,function(obj){
                         this.object = obj;
@@ -17,4 +20,18 @@
                     .then(lang.hitch(this,function(obj){
                         this.creator.innerHTML = (obj && obj.email) || 'unknown';
+                    }));
+                    Deferred.when(this._questionStore.query())
+                    .then(lang.hitch(this,function(items){
+                        this._questionList = new AccordionList({
+                            store: this._surveyStore,
+                            actions: {
+                                'Add': lang.hitch(this,'_addQuestion')
+                            },
+                            idProperty: this._questionStore.idProperty,
+                            categoryProperty: 'category',
+                            titleProperty: 'title'
+                        },this.allQuestions);
+                        this._questionList.startup();
+                        this._questionList.setItems(items);
                     }));
                 } else {
@@ -42,4 +59,18 @@
                 this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
                 obj && this.form.set('value',obj);
+            },
+            _addQuestion: function(obj) {
+                var d = {};
+                d.widget = new LineWithActionsWidget({
+                    title:obj.title,
+                    userObj: obj,
+                    actions:{
+                        "Remove": lang.hitch(this,'_removeQuestion',d)
+                    }
+                });
+                d.widget.placeAt(this.surveyQuestions);
+            },
+            _removeQuestion: function(data,obj) {
+                data.widget.destroy();
             }
         });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/AccordionList.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/AccordionList.js	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/AccordionList.js	(revision 316)
@@ -9,5 +9,4 @@
         return declare('rft.ui.AccordionList',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: template,
-            store: null,
             idProperty: null,
             categoryProperty: null,
@@ -18,31 +17,33 @@
                 this._widgets = {};
             },
-            postCreate: function() {
-                this.idProperty = this.idProperty || this.store.idProperty;
-                this.refresh(true);
-            },
-            refresh: function(initial) {
-                Deferred.when( this.store.query() )
-                .then(lang.hitch(this,'_addItems',initial));
-            },
-            _addItems: function(initial,items) {
-                var newWidgets = {};
-                array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
-                array.forEach(items,lang.hitch(this,function(item){
-                    var widget = this._getWidgetForItem(item);
-                    var id = this._getItemProperty(this.idProperty,item);
-                    var container = this._getContainerForItem(item);
-                    widget.placeAt(container.containerNode);
-                    newWidgets[id] = widget;
-                }));
-                var oldWidgets = array.filter(this.items,function(widget){
-                    return array.indexOf(newWidgets,widget) < 0;
+            setItems: function(items) {
+                var obsoleteWidgets = array.filter(this.widgets,function(item){
+                    return array.indexOf(items,item) < 0;
                 });
-                array.forEach(oldWidgets,function(widget){
+                array.forEach(obsoleteWidgets,function(widget){
                     widget.destroy();
                 });
-                this._widgets = newWidgets; // overwrite, releasing any non-existing items
-                initial && this.accordion.selectChild(true);
+                array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
+                array.forEach(items,lang.hitch(this,"_addItem"));
                 this._cleanupEmptyContainers();
+            },
+            addItems: function(items) {
+                array.forEach(items,lang.hitch(this,"_addItem"));
+                this._cleanupEmptyContainers();
+            },
+            addItem: function(item) {
+                this._addItem(item);
+                this._cleanupEmptyContainers();
+            },
+            _addItem: function(item) {
+                var widget = this._getWidgetForItem(item);
+                var container = this._getContainerForItem(item);
+                widget.placeAt(container.containerNode);
+            },
+            removeItem: function(item) {
+                var id = this._getItemProperty(this.idProperty,item);
+                var widget = this._getWidgetForItem(item);
+                widget && widget.destroy();
+                delete this._widgets[id];
             },
             _getWidgetForItem: function(item) {
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js	(revision 316)
@@ -1,11 +1,16 @@
-define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button',
+define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
     'dojo/text!./templates/LineWithActionsWidget.html'],
-    function(declare,lang,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
+            baseClass: 'rftLineWithButtons',
             title: '',
             userObject: null,
             actions: {},
+            postCreate: function() {
+                dom.setSelectable(this.domNode, false);
+                on(this.titleNode,'click',lang.hitch(this,'_onClick'));
+            },
             startup: function() {
                 this.inherited(arguments);
@@ -17,13 +22,23 @@
                     new Button({
                         label: action,
+                        //iconClass: 'dijitIconSearch',
+                        //showLabel: false,
                         onClick: lang.hitch(this,function(){
                             this.actions[action](this.userObject);
                         })
-                    }).placeAt(this.actionBar);
+                    }).placeAt(this.buttonsNode);
                 }
             },
             refresh: function() {
                 this.titleNode.innerHTML = this.title;
-            }
+            },
+            _onClick: function(e){
+                var preventDefault = this.onClick(e) === false;
+                if(preventDefault){
+                    e.preventDefault();
+                }
+                return !preventDefault;
+            },
+            onClick: function(e) {}
         });
     });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/List.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/List.js	(revision 316)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/List.js	(revision 316)
@@ -0,0 +1,20 @@
+define([
+    'dojo/_base/declare',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'dijit/_Container',
+    'dojo/text!./templates/List.html'
+    ],function(
+        declare,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        _Container,
+        templateString
+        ){
+        return declare('rft.ui.List',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+            templateString: templateString,
+            baseClass: 'rftList'
+        });
+    });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 316)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 316)
@@ -0,0 +1,84 @@
+define([
+    'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/fx',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'dijit/_Container',
+    './LineWithActionsWidget',
+    'dojo/text!./templates/Selector.html'
+    ],function(
+        declare,
+        lang,
+        fx,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        _Container,
+        LineWithActionsWidget,
+        templateString
+        ){
+        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+            templateString: templateString,
+            title: "The professional as a participant",
+            baseClass: 'rftSelector',
+            postCreate: function() {
+                var infoFunction = function() {
+                    alert("Show info here");
+                }
+                new LineWithActionsWidget({
+                    title: this.title,
+                    actions: {
+                        "Select" : function(){}
+                    }
+                },this.titleNode);
+                new LineWithActionsWidget({
+                    title: 'None',
+                    actions: {
+                        "V" : 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 ) {
+                                    show.play();
+                                    folded = false;
+                                } else {
+                                    hide.play();
+                                    folded = true;
+                            
+                                }
+                                e.preventDefault();
+                                e.stopPropagation();
+                            };
+                        })()
+                    }
+                },this.selectedItemNode);
+                new LineWithActionsWidget({
+                    title: 'Are there direct colleagues among the other participants?',
+                    actions: {
+                        "i" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+                new LineWithActionsWidget({
+                    title: 'Do you personally know ithers present at the current session?',
+                    actions: {
+                        "i" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+                new LineWithActionsWidget({
+                    title: 'Have you worked with other participants before?',
+                    actions: {
+                        "i" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+            }
+        });
+    });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidget.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidget.html	(revision 315)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidget.html	(revision 316)
@@ -1,4 +1,4 @@
-<div>
-    <span data-dojo-attach-point="actionBar"></span>
-    <span data-dojo-attach-point="titleNode"></span>
+<div class="${baseClass}">
+    <span class="${baseClass}Title" data-dojo-attach-point="titleNode"></span>
+    <span class="${baseClass}Buttons" data-dojo-attach-point="buttonsNode"></span>
 </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/List.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/List.html	(revision 316)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/List.html	(revision 316)
@@ -0,0 +1,8 @@
+<div>
+    <div data-dojo-attach-point="containerNode"></div>
+    <div>
+        <span>Move selected</span>
+        <button data-dojo-type="dijit.form.Button">Up</button>
+        <button data-dojo-type="dijit.form.Button">Down</button>
+    </div>
+</div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/Selector.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/Selector.html	(revision 316)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/Selector.html	(revision 316)
@@ -0,0 +1,8 @@
+<div>
+    <div class="${baseClass}Title" data-dojo-attach-point="titleNode"></div>
+    <div class="${baseClass}Selected">
+        <div class="${baseClass}Color" data-dojo-attach-point="selectedColorNode"></div>
+        <div class="${baseClass}Item" data-dojo-attach-point="selectedItemNode"></div>
+    </div>
+    <div class="${baseClass}Options" data-dojo-attach-point="optionsNode"></div>
+</div>
