Index: /Dev/branches/rest-dojo-ui/client/rft/css/layout.css
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 363)
+++ /Dev/branches/rest-dojo-ui/client/rft/css/layout.css	(revision 364)
@@ -484,2 +484,12 @@
     overflow: hidden;
 }
+
+/* Generic list with lines */
+.claro .rftLineListView {
+    width: 400px;
+    max-height: 500px;
+}
+.claro .rftLineListView .rftLineListViewContent {
+    max-width: 400px;
+    overflow: auto;
+}
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/session.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/session.html	(revision 363)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/session.html	(revision 364)
@@ -27,11 +27,16 @@
                         <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>
+                            <input type="text" data-rft-attach-point="emailBox" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter email address here...'" />
+                            <button data-rft-attach-point="btnInvite" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onInvite" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
                             <br/><br/>
+                            
+                            <div data-rft-attach-point="listViewNode" class="rftLineListView">
+                            </div>
+                            <!--
                             <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'" style="width: 500px;">
                                 <div data-dojo-type="rft.ui.LineWithActionsWidget" 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.LineWithActionsWidget" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
                             </div>
+                            -->
                         </fieldset>
 
Index: /Dev/branches/rest-dojo-ui/client/rft/pages/session.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/pages/session.js	(revision 363)
+++ /Dev/branches/rest-dojo-ui/client/rft/pages/session.js	(revision 364)
@@ -5,8 +5,11 @@
 	'rft/store',
 	'rft/ui/_Page',
-	'rft/content'],
-	function(declare,lang,event,Deferred,store,_Page,content){
+	'rft/content',
+    'rft/ui/AccountListView'
+    ],
+	function(declare,lang,event,Deferred,store,_Page,content,AccountListView){
 		return declare('rft.pages.session',[_Page],{
 			session: null,
+			listView: null,
 			onVisit: function() {
 				if ( this.pageArgs.uid ) {
@@ -16,6 +19,7 @@
                         this._refresh();
 					}));
+                    this._setupListView();
 				} else {
-					throw "No valid uid or survey passed!";
+					throw "No valid uid or session passed!";
 				}
 			},
@@ -26,4 +30,8 @@
                 this.titleNode.innerHTML = this.session.title || '';
                 this.propertiesForm.set('value',this.session);
+            },
+            onInvite: function() {
+                this._addAccount({ title : this.emailBox.get('value') });
+                this.emailBox.set('value', "");
             },
             onSave: function(evt) {
@@ -41,5 +49,15 @@
                 content.goTo('sessions');
                 return false;
+            },
+            _addAccount: function(item) {
+                this.listView.insertItem(item);
+            },
+            _setupListView: function() {
+                this.listView = new AccountListView( {
+                    controller: this
+                }).placeAt(this.listViewNode);
+                this.listView.startup();
             }
+
 		});
 });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/AccountListView.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/AccountListView.js	(revision 364)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/AccountListView.js	(revision 364)
@@ -0,0 +1,65 @@
+define([
+    'dojo/_base/declare',
+   	'dojo/_base/lang',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'dijit/_Container',
+    'rft/ui/LineWithActionsWidget',
+    'rft/ui/ListView',
+    'dojo/text!./templates/AccountListView.html'
+	],function(
+        declare,
+        lang,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        _Container,
+        LineWithActionsWidget,
+        ListView,
+        templateString
+		) {
+        return declare('rft.ui.AccountListView',[ListView,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+            templateString: templateString,
+            baseClass: 'rftLineListView',
+            region: 'center',
+
+            creatorMethod: function(item, hint) {
+            	var node;
+
+            	if (hint == "avatar") {
+            		node = document.createElement("div");
+            		node.className = "dragAvatar";
+            		node.innerHTML = item.title;
+            	} else {
+            		var w = new LineWithActionsWidget({
+            			title: item.title,
+            			'class': "green",
+            			actions: {
+            				"Remove" : {
+            					callback: lang.hitch(this, function() {
+            						this.removeItem(item, w);
+            					}),
+            					properties: {
+            						blockButton: false,
+            						icon: "Delete",
+            						modifiers: "white"
+            					}
+            				}
+            			}
+            		});
+            		w.startup();
+            		node = w.domNode;
+            	}
+            	var fullItem = {
+            		node: node,
+            		data: item,
+            		type: "ListViewItem"
+            	};
+            	return fullItem;
+        	},
+
+           
+
+        });
+});
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/ListView.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/ListView.js	(revision 364)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/ListView.js	(revision 364)
@@ -0,0 +1,101 @@
+define([
+    'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_WidgetsInTemplateMixin',
+    'dijit/_Container',
+    'dojo/text!./templates/List.html'
+    ],function(
+        declare,
+        lang,
+        _WidgetBase,
+        _TemplatedMixin,
+        _WidgetsInTemplateMixin,
+        _Container,
+        templateString
+        ){
+        return declare('rft.ui.List',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+            templateString: templateString,
+            baseClass: 'rftList',
+
+            postCreate: function() {
+                if (this.title) {
+                    this.titleNode.innerHTML = this.title;
+                } else {
+                    this.domNode.removeChild(this.titleNode);
+                }
+
+                this.source = new dojo.dnd.Source(this.sourceNode, {
+                    isSource: true,
+                    accept: ["LineListViewItem"],
+                    horizontal: false,
+                    withHandles: false,
+                    copyOnly: false,
+                    selfCopy: false,
+                    selfAccept: true,
+                    delay: 0,
+                    singular: true,
+                    creator: lang.hitch(this, this.creatorMethod)
+                });
+
+                new dijit.form.Button({
+                    label: "Move up",
+                    showLabel: false,
+                    iconClass: "rftIcon rftIconFullArrowUp",
+                    baseClass: "rftBlockButton",
+                    'class': "trans",
+                    onClick: lang.hitch(this, function() {
+                        this.moveItem("up");
+                    })
+                }, this.btnListMoveUp);
+
+                new dijit.form.Button({
+                    label: "Move down",
+                    showLabel: false,
+                    iconClass: "rftIcon rftIconFullArrowDown",
+                    baseClass: "rftBlockButton",
+                    'class': "trans",
+                    onClick: lang.hitch(this, function() {
+                        this.moveItem("down");
+                    })
+                }, this.btnListMoveDown); 
+            },
+
+            moveItem: function(dir) {
+                var node = this.source.getSelectedNodes()[0];
+                if (node) {
+                    if (dir == "up") {
+                        if (node.previousSibling) {
+                            return node.parentNode.insertBefore(node, node.previousSibling);
+                        } else {
+                            return false;
+                        }
+
+                    } else if (dir == "down") {
+                        if (node.nextSibling) {
+                            return node.parentNode.insertBefore(node.nextSibling, node);
+                        } else {
+                            return false;
+                        }
+                    } else {
+                        throw "Invalid move direction passed!";
+                    }
+                } else {
+                    return false;
+                }
+            },
+
+            insertItem: function(item) {
+                var anchor = this.source.getSelectedNodes()[0];
+                if (anchor) {
+                    this.source.insertNodes(false, [item], false, anchor);
+                } else {
+                    this.source.insertNodes(false, [item]);
+                }
+            },
+            removeItem: function(item, widget) {
+                widget.destroy();
+            }
+        });
+    });
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 363)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js	(revision 364)
@@ -12,5 +12,5 @@
     './LineWithActionsWidget',
     'dojo/text!./templates/Selector.html',
-    'dojo/dom-class'
+    'dojo/dom-class',
     ],function(
         declare,
@@ -102,4 +102,5 @@
                 }
             },
+
             onToggle: function(evt) {
                 if (this._folded) {
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/AccountListView.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/AccountListView.html	(revision 364)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/AccountListView.html	(revision 364)
@@ -0,0 +1,9 @@
+<div>
+	<h3 data-dojo-attach-point="titleNode"></h3>
+	<div data-dojo-attach-point="sourceNode" id="source" class="${baseClass}Content"></div>
+	<div data-dojo-attach-point="buttonsNode" class="floatRight">
+		<span>Move selected: </span>
+		<button data-dojo-attach-point="btnListMoveUp" ></button>
+		<button data-dojo-attach-point="btnListMoveDown"></button>
+	</div>
+</div>
Index: /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ListView.html
===================================================================
--- /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ListView.html	(revision 364)
+++ /Dev/branches/rest-dojo-ui/client/rft/ui/templates/ListView.html	(revision 364)
@@ -0,0 +1,9 @@
+<div>
+	<h3 data-dojo-attach-point="titleNode"></h3>
+	<div data-dojo-attach-point="sourceNode" id="source" class="${baseClass}Content"></div>
+	<div data-dojo-attach-point="buttonsNode" class="floatRight">
+		<span>Move selected: </span>
+		<button data-dojo-attach-point="btnListMoveUp" ></button>
+		<button data-dojo-attach-point="btnListMoveDown"></button>
+	</div>
+</div>
