Index: /Dev/branches/rest-dojo-ui/client/mockup.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 332)
+++ /Dev/branches/rest-dojo-ui/client/mockup.html	(revision 333)
@@ -40,7 +40,10 @@
                 'rft/ui/QuestionWidget',
                 'rft/ui/Selector',
+                'rft/ui/SelectorThijs',
+                'rft/ui/LineWithActionsWidgetThijs',
                 'rft/ui/TitleGroup',
                 'rft/ui/LargeButton',
                 'rft/ui/BlockButton',
+                'rft/ui/InlineButton',
                 'dojo/domReady!'
             ],function(parser){
@@ -83,9 +86,9 @@
                         <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" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Experience with games'"></div>
-                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Participant context'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Experience with games'"></div>
+                            <div data-dojo-type="rft.ui.SelectorThijs" class="survey" data-dojo-props="title:'Participant context'"></div>
                         </div>
                         <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
@@ -98,8 +101,11 @@
                         <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>
-                        --BUTTON TESTS--
+                        
                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
                         <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
-                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: null">Add to survey</button>
+                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Accept'">Add to survey</button>
+                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: 'Cancel'">Cancel</button>
+                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Help', label:'Help?'">Add to survey</button>
+                        <button data-dojo-type="rft.ui.InlineButton" data-dojo-props="highlightColor: 'White', iconType: 'Inspect', label:'See more details'">Add to survey</button>
                     </div>
                 </div>
@@ -114,7 +120,8 @@
                     </div>
                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
-                        Nothing here! yet....
-
-                        //sooooooon......
+                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Settings'">Properties</button>
+                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Preview'">Preview</button>
+                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Undo'">Discard</button>
+                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Accept'">Accept changes</button>
 
                     </div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js	(revision 332)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/BlockButton.js	(revision 333)
@@ -7,4 +7,5 @@
             showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
             highlightColor: 'blue', // Use the CSS class "highlightBlue" this adds to style active/hover transitions.
+            baseClass: "rftBlockButton",
             postMixInProperties: function(){
                 if (this.iconType == "none" || this.iconType == null) {
@@ -17,5 +18,5 @@
             postCreate: function(){
                 var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "rftBlockButton highlight"+capitalizedHighlightColor);
+                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
                 this.inherited(arguments);
             }
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/InlineButton.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/InlineButton.js	(revision 333)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/InlineButton.js	(revision 333)
@@ -0,0 +1,37 @@
+define([
+    'dojo/_base/declare',
+    'dijit/form/Button',
+    'dojo/dom-class'
+    ], function(declare, Button, domClass){
+        return declare("rft.ui.InlineButton", [Button], {
+            showLabel: false,
+            highlightColor: "blue",
+            baseClass: "rftInlineButton",
+            postMixInProperties: function(){
+                this.iconClass = "rftIcon rftIcon"+this.iconType;
+                this.inherited(arguments);
+            },
+            postCreate: function(){
+                this.label = this.containerNode.innerHTML;
+                this.containerNode.innerHTML = "";
+                var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
+                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
+                // Set up hover event
+                dojo.connect(this.domNode, "onmouseenter", this, "_toggleHover");
+                dojo.connect(this.domNode, "onmouseleave", this, "_toggleHover");
+                this.inherited(arguments);
+            },
+            _toggleHover: function(evt){
+                // This does nothing yet, but was wired up in case we want to change icon colour or something on hover!
+                // domClass.toggle(this.domNode, "hovering");
+            }
+        });
+    });
+    
+/*  DESCRIPTION:
+ *  
+ *  A configuration preset for dijit.form.Button. Automatically sets certain properties on the instantiation instead of having to manually do that in declaration markup
+ *  InlineButton has a 16x16px icon (rftIcon.css) and NO label by default
+ *  Transparent background, no border, 24px height
+ *  Perhaps a drop shadow or outline on hover/click? If not, add a class that highlights the icon red or something.
+ */
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js	(revision 332)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/LargeButton.js	(revision 333)
@@ -7,4 +7,5 @@
             showLabel: true,    // Or false? Documentation is retarded about this boolean... true = no label???
             highlightColor: "blue", // Use the CSS class "highlightBlue" this adds to style active/hover transitions
+            baseClass: "rftLargeButton",
             postMixInProperties: function(){
                 this.iconClass = "rftIcon rftIcon"+this.iconType;
@@ -13,5 +14,5 @@
             postCreate: function(){
                 var capitalizedHighlightColor = this.highlightColor.charAt(0).toUpperCase() + this.highlightColor.slice(1);
-                domClass.add(this.domNode, "rftLargeButton highlight"+capitalizedHighlightColor);
+                domClass.add(this.domNode, "highlight"+capitalizedHighlightColor);
                 this.inherited(arguments);
             }
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 333)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidgetThijs.js	(revision 333)
@@ -0,0 +1,45 @@
+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',
+    'rft/ui/InlineButton', 'rft/ui/BlockButton'],
+    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString, InlineButton, BlockButton){
+        return declare('rft.ui.LineWithActionsWidgetThijs',[_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);
+                this._setupActions();
+                this.refresh();
+            },
+            _setupActions: function() {
+                for (var action in this.actions) {
+                    new InlineButton({
+                        label: action,
+                        iconType: action,
+                        highlightColor: "White",
+                        onClick: lang.hitch(this, function(){
+                            this.actions[action](this.userObject);
+                        })
+                    }).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/SelectorThijs.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js	(revision 333)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/SelectorThijs.js	(revision 333)
@@ -0,0 +1,96 @@
+define([
+    'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/fx',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'dijit/_Container',
+    './LineWithActionsWidgetThijs',
+    'dojo/text!./templates/Selector.html',
+    'dojo/dom-class'
+    ],function(
+        declare,
+        lang,
+        fx,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        _Container,
+        LineWithActionsWidget,
+        templateString,
+        domClass
+        ){
+        return declare('rft.ui.SelectorThijs',[_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: {
+                        "Accept" : function(){}
+                    }
+                },this.titleNode);
+                var selectorLine = new LineWithActionsWidget({
+                    title: 'None',
+                    actions: {
+                        "HalfArrowDown" : lang.hitch(this,function(){
+                            var node = this.optionsNode;
+                            var show = fx.wipeIn({
+                                node: node
+                            });
+                            var hide = fx.wipeOut({
+                                node: node
+                            });
+                            hide.play();
+                            var folded = true;
+                            return function(e) {
+                                if ( folded ) {
+                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                    var downArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
+                                    if (downArrowIcon){
+                                        domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
+                                    }
+                                    show.play();
+                                    folded = false;
+                                } else {
+                                    // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
+                                    var upArrowIcon = dojo.query(".rftInlineButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
+                                    if (upArrowIcon){
+                                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
+                                    }
+                                    hide.play();
+                                    folded = true;
+                            
+                                }
+                                e.preventDefault();
+                                e.stopPropagation();
+                            };
+                        })()
+                    }
+                },this.selectedItemNode);
+                new LineWithActionsWidget({
+                    title: 'Are there direct colleagues among the other participants?',
+                    actions: {
+                        "Inspect" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+                new LineWithActionsWidget({
+                    title: 'Do you personally know ithers present at the current session?',
+                    actions: {
+                        "Inspect" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+                new LineWithActionsWidget({
+                    title: 'Have you worked with other participants before?',
+                    actions: {
+                        "Inspect" : infoFunction
+                    }
+                }).placeAt(this.optionsNode);
+            }
+        });
+    });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidgetThijs.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidgetThijs.html	(revision 333)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidgetThijs.html	(revision 333)
@@ -0,0 +1,4 @@
+<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/SelectorThijs.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/SelectorThijs.html	(revision 333)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/SelectorThijs.html	(revision 333)
@@ -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>
