Index: lams_central/web/author2.jsp
===================================================================
diff -u -ra3d8ca871cecdad8f45756fdcae6d697bd0e8499 -r874c54709961f76c4ca248e7f9dec90d79d6f30a
--- lams_central/web/author2.jsp	(.../author2.jsp)	(revision a3d8ca871cecdad8f45756fdcae6d697bd0e8499)
+++ lams_central/web/author2.jsp	(.../author2.jsp)	(revision 874c54709961f76c4ca248e7f9dec90d79d6f30a)
@@ -106,5 +106,41 @@
 	
 	<div id="infoDialog" class="dialogContainer">
 	</div>
+	
+	
+	<div id="propertiesContentTool" class="dialogContainer">
+		<table>
+			<tr>
+				<td>
+					Title:
+				</td>
+				<td>
+					 <input class="title" type="text"></input>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					Grouping:
+				</td>
+				<td>
+					  <select class="grouping"></select>
+				</td>
+			</tr>
+		</table>
+	</div>
+	
+	<div id="propertiesContentGrouping" class="dialogContainer">
+		<table>
+			<tr>
+				<td>
+					Title:
+				</td>
+				<td>
+					 <input class="title" type="text"></input>
+				</td>
+			</tr>
+		</table>
+	</div>
+	
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_central/web/includes/javascript/authoring/authoringActivity.js
===================================================================
diff -u -ra3d8ca871cecdad8f45756fdcae6d697bd0e8499 -r874c54709961f76c4ca248e7f9dec90d79d6f30a
--- lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision a3d8ca871cecdad8f45756fdcae6d697bd0e8499)
+++ lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 874c54709961f76c4ca248e7f9dec90d79d6f30a)
@@ -7,15 +7,112 @@
 	/**
 	 * Constructor for a Tool Activity.
 	 */
-	ToolActivity: function(id, toolID, x, y, label) {
+	ToolActivity: function(id, toolID, x, y, title) {
 		this.id = id;
+		this.toolID = toolID;
+		this.title = title;
 		this.type = 'tool';
 		this.transitions = {
 			'from' : [],
 			'to'   : []
 		};
-		this.toolID = toolID;
-		this.draw = function(x, y) {
+		
+		this.loadPropertiesDialogContent = ActivityLib.loadPropertiesDialogContent.tool;
+		
+		this.draw = ActivityLib.draw.tool;
+		this.draw(x, y);
+	},
+
+	/**
+	 * Constructor for a Grouping Activity.
+	 */
+	GroupingActivity : function(id, x, y, title) {
+		this.id = id;
+		this.type = 'grouping';
+		this.title = title;
+		this.transitions = {
+			'from' : [],
+			'to'   : []
+		};
+		
+		this.loadPropertiesDialogContent = ActivityLib.loadPropertiesDialogContent.grouping;
+
+		this.draw = ActivityLib.draw.grouping;		
+		this.draw(x, y);
+	},
+
+	/**
+	 * Constructor for a Gate Activity.
+	 */
+	GateActivity : function(id, x, y) {
+		this.id = id;
+		this.type = 'gate';
+		this.transitions = {
+			'from' : [],
+			'to'   : []
+		};
+		
+		this.draw = ActivityLib.draw.gate;
+		this.draw(x, y);
+	},
+	
+	
+	/**
+	 * Either branching or converge point.
+	 */
+	BranchingEdgeActivity : function(id, x, y, branchingActivity) {
+		this.type = 'branchingEdge';
+		this.transitions = {
+			'from' : [],
+			'to'   : []
+		};
+		
+		if (branchingActivity) {
+			// branchingActivity already exists, so this is the converge point
+			this.isStart = false;
+			branchingActivity.end = this;
+		} else {
+			// this is the branching point
+			this.isStart = true;
+			branchingActivity = new ActivityLib.BranchingActivity(id, this);
+		}
+		this.branchingActivity = branchingActivity;
+		
+		this.draw = ActivityLib.draw.branching;
+		this.draw(x, y);
+	},
+	
+	
+	/**
+	 * Represents a set of branches. It is not displayed on canvas.
+	 */
+	BranchingActivity : function(id, branchingEdgeStart) {
+		this.id = id;
+		this.start = branchingEdgeStart;
+		this.branches = [];
+	},
+	
+	
+	/**
+	 * Represents a subsequence of activities. It is not displayed on canvas.
+	 */
+	BranchActivity : function(id, branchingActivity, transitionFrom) {
+		this.id = id;
+		this.transitionFrom = transitionFrom;
+		this.branchingActivity = branchingActivity;
+	},
+	
+	
+	/**
+	 * Mehtods for drawing various kinds of activities.
+	 */
+	draw : {
+		tool : function(x, y) {
+			if (x == undefined || y == undefined) {
+				x = this.items.shape.getBBox().x;
+				y = this.items.shape.getBBox().y;
+			}
+			
 			if (this.items) {
 				this.items.remove();
 			}
@@ -26,35 +123,29 @@
 							 .attr({
 								'fill' : layout.colors.activity
 							 });
-			paper.image(layout.toolIcons[toolID], x + 47, y + 2, 30, 30);
-			paper.text(x + 62, y + 40, label);
+			paper.image(layout.toolIcons[this.toolID], x + 47, y + 2, 30, 30);
+			paper.text(x + 62, y + 40, ActivityLib.shortenActivityTitle(this.title));
 			
 			this.items = paper.setFinish();
 			this.items.shape = shape;
 			
-			ActivityLib.initActivity(this);
-		};
+			if (this.grouping) {
+				ActivityLib.addGroupingEffect(this);
+			}
+			
+			ActivityLib.activityHandlersInit(this);
+		},
 		
-		this.draw(x, y);
-	},
+		
+		grouping : function(x, y) {
+			if (x == undefined || y == undefined) {
+				x = this.items.shape.getBBox().x;
+				y = this.items.shape.getBBox().y;
+			}
 
-	/**
-	 * Constructor for a Grouping Activity.
-	 */
-	GroupingActivity : function(id, x, y) {
-		this.id = id;
-		this.type = 'group';
-		this.transitions = {
-			'from' : [],
-			'to'   : []
-		};
-		this.draw = function(x, y) {
 			if (this.items) {
 				this.items.remove();
 			}
-				
-			x-=47;
-			y-=2;
 			
 			// create activity SVG elements
 			paper.setStart();
@@ -64,28 +155,21 @@
 								 });
 			
 			paper.image('../images/grouping.gif', x + 47, y + 2, 30, 30);
-			paper.text(x + 62, y + 40, 'Grouping');
+			paper.text(x + 62, y + 40, ActivityLib.shortenActivityTitle(this.title));
 			
 			this.items = paper.setFinish();
 			this.items.shape = shape;
 			
-			ActivityLib.initActivity(this);
-		};
+			ActivityLib.activityHandlersInit(this);
+		},
 		
-		this.draw(x, y);
-	},
+		
+		gate : function(x, y) {
+			if (x == undefined || y == undefined) {
+				x = this.items.shape.getBBox().x;
+				y = this.items.shape.getBBox().y;
+			}
 
-	/**
-	 * Constructor for a Gate Activity.
-	 */
-	GateActivity : function(id, x, y) {
-		this.id = id;
-		this.type = 'gate';
-		this.transitions = {
-			'from' : [],
-			'to'   : []
-		};
-		this.draw = function(x, y) {
 			if (this.items) {
 				this.items.remove();
 			}
@@ -107,42 +191,25 @@
 			this.items = paper.setFinish();
 			this.items.shape = shape;
 			
-			ActivityLib.initActivity(this);
-		};
+			ActivityLib.activityHandlersInit(this);
+		},
 		
-		this.draw(x, y);
-	},
-	
-	
-	/**
-	 * Either branching or converge point.
-	 */
-	BranchingEdgeActivity : function(id, x, y, branchingActivity) {
-		this.type = 'branchingEdge';
-		this.transitions = {
-			'from' : [],
-			'to'   : []
-		};
 		
-		if (branchingActivity) {
-			// branchingActivity already exists, so this is the converge point
-			this.isStart = false;
-			branchingActivity.end = this;
-		} else {
-			// this is the branching point
-			this.isStart = true;
-			branchingActivity = new ActivityLib.BranchingActivity(id, this);
-		}
-		this.branchingActivity = branchingActivity;
-		this.draw = function(x, y) {
+		branching : function(x, y) {
+			if (x == undefined || y == undefined) {
+				x = this.items.shape.getBBox().x;
+				y = this.items.shape.getBBox().y;
+			}
+			
 			if (this.items) {
 				this.items.remove();
 			}
 			
 			// create activity SVG elements
 			paper.setStart();
-			var shape = paper.path('M ' + x + ' ' + y +
-				(this.isStart ? layout.defs.branchingEdgeStart : layout.defs.branchingEdgeEnd))
+			var shape = paper.path(Raphael.format('M {0} {1}'
+								                  + (this.isStart ? layout.defs.branchingEdgeStart : layout.defs.branchingEdgeEnd),
+								                  x, y))
 							 .attr({
 								 'fill' : this.isStart ? layout.colors.branchingEdgeStart
 							                           : layout.colors.branchingEdgeEnd
@@ -158,37 +225,75 @@
 			this.items = paper.setFinish();
 			this.items.shape = shape;
 			
-			ActivityLib.initActivity(this);
-		};
-		
-		this.draw(x, y);
+			ActivityLib.activityHandlersInit(this);
+		}
 	},
 	
 	
 	/**
-	 * Represents a set of branches. It is not displayed on canvas.
+	 * Methods initialising and refreshing properties dialog for various kinds of activities.
 	 */
-	BranchingActivity : function(id, branchingEdgeStart) {
-		this.id = id;
-		this.start = branchingEdgeStart;
-		this.branches = [];
+	loadPropertiesDialogContent : {
+		tool : function() {
+			var activity = this;
+			var content = activity.propertiesContent;
+			if (!content) {
+				// first run, create the content
+				content = activity.propertiesContent = $('#propertiesContentTool').clone().show();
+				$('.title', content).val(activity.title);
+				
+				$('input, select', content).change(function(){
+					// extract changed properties and redraw the activity
+					activity.title = $('.title', activity.propertiesContent).val();
+					activity.grouping = $('.grouping option:selected', activity.propertiesContent)
+										.data('grouping');
+					activity.draw();
+				});
+			}
+			
+			// find all groupings on canvas and fill dropdown menu with their titles
+			var emptyOption = $('<option />'),
+				groupingDropdown = $('.grouping', content).empty().append(emptyOption);
+			$.each(layout.activities, function(){
+				if (this.type == 'grouping') {
+					var option = $('<option />').text(this.title)
+												.appendTo(groupingDropdown)
+												// store reference to grouping object
+												.data('grouping', this);
+					if (this == activity.grouping) {
+						option.attr('selected', 'selected');
+					}
+				}
+			});
+			if (!activity.grouping) {
+				// no grouping selected
+				emptyOption.attr('selected', 'selected');
+			}
+		},
+		
+		
+		grouping : function(title) {
+			var activity = this;
+			var content = activity.propertiesContent;
+			if (!content) {
+				// first run, create the content
+				content = activity.propertiesContent = $('#propertiesContentGrouping').clone().show();
+				$('.title', content).val(activity.title);
+
+				$('input, select', content).change(function(){
+					// extract changed properties and redraw the activity
+					activity.title = $('.title', activity.propertiesContent).val();
+					activity.draw();
+				});
+			}
+		}
 	},
 	
 	
 	/**
-	 * Represents a subsequence of activities. It is not displayed on canvas.
-	 */
-	BranchActivity : function(id, branchingActivity, transitionFrom) {
-		this.id = id;
-		this.transitionFrom = transitionFrom;
-		this.branchingActivity = branchingActivity;
-	},
-	
-	
-	/**
 	 * Make a new activity fully functional on canvas.
 	 */
-	initActivity : function(activity) {
+	activityHandlersInit : function(activity) {
 		// set all the handlers
 		activity.items
 			.data('activity', activity)
@@ -227,7 +332,7 @@
 		// remove the transitions
 		$.each(activity.transitions.from.slice(), function() {
 			// if grouping activity is gone, remove the grouping effect
-			if (activity.type == 'group' && this.toActivity.items.groupingEffect) {
+			if (activity.type == 'grouping' && this.toActivity.items.groupingEffect) {
 				this.toActivity.items.groupingEffect.remove();
 				this.toActivity.items.groupingEffect = null;
 			}
@@ -238,8 +343,8 @@
 			ActivityLib.removeTransition(this);
 		});
 		
-		// remove the activity from activities table
-		activities.splice(activities.indexOf(activity), 1);
+		// remove the activity from reference tables
+		layout.activities.splice(layout.activities.indexOf(activity), 1);
 		// visually remove the activity
 		activity.items.remove();
 	},
@@ -314,11 +419,6 @@
 			fromActivity.branchingActivity.branches.push(branch);
 			transition.data('branch', branch);
 		}
-		
-		// add grouping effect if previous activity is of grouping type
-		if (fromActivity.type == 'group' && toActivity.type != 'gate') {
-			ActivityLib.addGroupingEffect(toActivity);
-		}
 	},
 	
 	
@@ -379,7 +479,7 @@
 			    branchEdgeStartY = branchPoints1.middleY + (branchPoints2.middleY - branchPoints1.middleY)/2,
 			    branchingEdgeStart = new ActivityLib.BranchingEdgeActivity(null, branchEdgeStartX,
 			    		branchEdgeStartY, null);
-			activities.push(branchingEdgeStart);
+			layout.activities.push(branchingEdgeStart);
 			
 			// find last activities in subsequences and make an converge point between them
 			while (convergeActivity2.transitions.from.length > 0) {
@@ -389,7 +489,7 @@
 			var convergePoints = ActivityLib.findTransitionPoints(convergeActivity1, convergeActivity2),
 				branchingEdgeEnd = new ActivityLib.BranchingEdgeActivity(null, convergePoints.middleX,
 					convergePoints.middleY, branchingEdgeStart.branchingActivity);
-			activities.push(branchingEdgeEnd);
+			layout.activities.push(branchingEdgeEnd);
 			
 			// draw all required transitions
 			ActivityLib.drawTransition(fromActivity, branchingEdgeStart);
@@ -421,10 +521,17 @@
 					'stroke-dasharray' : '-'
 				});
 			activity.items.push(activity.items.selectEffect);
+			layout.items.selectedActivity = activity;
 			
 			// show the properties dialog for the selected activity
-			layout.items.selectedActivity = activity;
-			layout.items.propertiesDialog.dialog('open');
+			if (activity.loadPropertiesDialogContent) {
+				activity.loadPropertiesDialogContent();
+				var dialog = layout.items.propertiesDialog;
+				dialog.children().detach();
+				dialog.append(activity.propertiesContent);
+				dialog.dialog('open');
+				dialog.find('input').blur();
+			}
 		}
 	},
 	
@@ -450,13 +557,14 @@
 	 */
 	addGroupingEffect : function(activity) {
 		if (!activity.items.groupingEffect) {
-			var shape = activity.items.shape;
+			var shape = activity.items.shape,
+				activityBox = shape.getBBox();
 			
 			activity.items.groupingEffect = paper.rect(
-					shape.attr('x') + 5,
-					shape.attr('y') + 5,
-					layout.conf.activityWidth,
-					layout.conf.activityHeight)
+					activityBox.x + 5,
+					activityBox.y + 5,
+					activityBox.width,
+					activityBox.height)
 				.attr({
 					'fill' : shape.attr('fill')
 				})
@@ -609,5 +717,16 @@
 		});
 		
 		branchingActivity.longestBranchLength = longestBranchLength;
+	},
+	
+	
+	/**
+	 * Reduce length of activity's title so it fits in its SVG shape.
+	 */
+	shortenActivityTitle : function(title) {
+		if (title.length > 18) {
+			title = title.substring(0, 17) + '...';
+		}
+		return title;
 	}
 };
\ No newline at end of file
Index: lams_central/web/includes/javascript/authoring/authoringGeneral.js
===================================================================
diff -u -ra3d8ca871cecdad8f45756fdcae6d697bd0e8499 -r874c54709961f76c4ca248e7f9dec90d79d6f30a
--- lams_central/web/includes/javascript/authoring/authoringGeneral.js	(.../authoringGeneral.js)	(revision a3d8ca871cecdad8f45756fdcae6d697bd0e8499)
+++ lams_central/web/includes/javascript/authoring/authoringGeneral.js	(.../authoringGeneral.js)	(revision 874c54709961f76c4ca248e7f9dec90d79d6f30a)
@@ -4,11 +4,16 @@
 
 // few publicly visible variables 
 var paper = null,
-	canvas = null,
-	activities = null;
+	canvas = null;
 
 // configuration and storage of various elements
 var layout = {
+	'activities' : null,
+	'items' : {
+		'bin'              : null,
+		'selectedActivity' : null,
+		'propertiesDialog' : null
+	},
 	'toolIcons': {},
 	'conf' : {
 		'propertiesDialogDimOpacity'   : 0.3,
@@ -39,11 +44,6 @@
 		'branchingEdgeEnd'   : 'red',
 		'branchingEdgeMatch' : 'blue'
 	},
-	'items' : {
-		'bin'              : null,
-		'selectedActivity' : null,
-		'propertiesDialog' : null
-	}
 };
 
 
@@ -114,7 +114,7 @@
 				var y = draggable.offset.top - canvasOffset.top;
 				var label = $('div', draggable.draggable).text();
 				
-				activities.push(new ActivityLib.ToolActivity(null, toolID, x, y, label));
+				layout.activities.push(new ActivityLib.ToolActivity(null, toolID, x, y, label));
 		   }
 	});
 }
@@ -160,7 +160,7 @@
 	
 	// initialise the properties dialog singleton
 	var propertiesDialog = layout.items.propertiesDialog =
-		$('<div>Properties go here</div>')
+		$('<div />')
 			.appendTo('body')
 			.dialog({
 				'autoOpen'      : false,
@@ -271,20 +271,33 @@
 			MenuLib.newLearningDesign(true);
 			// create visual representation of the loaded activities
 			$.each(ld.activities, function() {
-				var activity = this;
-				activities.push(new ActivityLib.ToolActivity(activity.activityID,
-						activity.toolID, activity.xCoord, activity.yCoord,
-						activity.activityTitle));
+				var activityData = this,
+					activity = null;
+				
+				if (activityData.toolID) {
+					activity = new ActivityLib.ToolActivity(activityData.activityID,
+							activityData.toolID, activityData.xCoord, activityData.yCoord,
+							activityData.activityTitle);
+				} else if (activity.groupingType) {
+					activity = new ActivityLib.GroupingActivity(activityData.activityID,
+							activityData.xCoord, activityData.yCoord,
+							activityData.activityTitle);
+				} else if (activity.gateOpen) {
+					activity = new ActivityLib.GroupingActivity(activityData.activityID,
+							activityData.xCoord, activityData.yCoord);
+				}
+				
+				layout.activities.push(activity);
 			});
 			
 			// draw transitions
 			$.each(ld.transitions, function(){
-				var transition = this;
-				var fromActivity = null
-				var toActivity = null;
+				var transition = this,
+					fromActivity = null,
+					toActivity = null;
 				
 				// find which activities the transition belongs to
-				$.each(activities, function(){
+				$.each(layout.activities, function(){
 					var activity = this;
 					if (activity.id == transition.fromActivityID) {
 						fromActivity = activity;
Index: lams_central/web/includes/javascript/authoring/authoringHandler.js
===================================================================
diff -u -ra3d8ca871cecdad8f45756fdcae6d697bd0e8499 -r874c54709961f76c4ca248e7f9dec90d79d6f30a
--- lams_central/web/includes/javascript/authoring/authoringHandler.js	(.../authoringHandler.js)	(revision a3d8ca871cecdad8f45756fdcae6d697bd0e8499)
+++ lams_central/web/includes/javascript/authoring/authoringHandler.js	(.../authoringHandler.js)	(revision 874c54709961f76c4ca248e7f9dec90d79d6f30a)
@@ -120,8 +120,9 @@
 	 * Moves dragged elements on the canvas.
 	 */
 	dragItemsMoveHandler : function(items, event, startX, startY) {
-		var dx = event.pageX - startX;
-		var dy = event.pageY - startY;
+		var dx = event.pageX - startX,
+			dy = event.pageY - startY;
+		
 		items.transform('t' + dx + ' ' + dy);
 		
 		if (items.groupingEffect) {
@@ -145,8 +146,8 @@
 			return;
 		}
 		
-		var startX = x - canvas.offset().left;
-		var startY = y - canvas.offset().top;
+		var startX = x - canvas.offset().left,
+			startY = y - canvas.offset().top;
 		
 		canvas.mousemove(function(event){
 			HandlerLib.drawTransitionMoveHandler(activity, event, startX, startY);
@@ -172,8 +173,8 @@
 			return;
 		}
 		
-		var endX = event.pageX - canvas.offset().left;
-		var endY = event.pageY - canvas.offset().top;
+		var endX = event.pageX - canvas.offset().left,
+			endY = event.pageY - canvas.offset().top;
 		
 		// draw a temporary transition so user sees what he is doing
 		activity.tempTransition = paper.set();
@@ -216,9 +217,9 @@
 	 * Lighthens up branching edges in the same colour for identifictation.
 	 */
 	branchingEdgeMouseoverHandler : function() {
-		var branchingActivity = this.data('activity').branchingActivity;
-		var startItems = branchingActivity.start.items;
-		var endItems = branchingActivity.end.items;
+		var branchingActivity = this.data('activity').branchingActivity,
+			startItems = branchingActivity.start.items,
+			endItems = branchingActivity.end.items;
 		if (!startItems.isDragged && !endItems.isDragged) {
 			startItems.shape.attr('fill', layout.colors.branchingEdgeMatch);
 			endItems.shape.attr('fill', layout.colors.branchingEdgeMatch);
@@ -230,9 +231,10 @@
 	 * Return branching edges to their normal colours.
 	 */
 	branchingEdgeMouseoutHandler : function() {
-		var branchingActivity = this.data('activity').branchingActivity;
-		var startItems = branchingActivity.start.items;
-		var endItems = branchingActivity.end.items;
+		var branchingActivity = this.data('activity').branchingActivity,
+			startItems = branchingActivity.start.items,
+			endItems = branchingActivity.end.items;
+		
 		if (!startItems.isDragged && !endItems.isDragged) {
 			startItems.shape.attr('fill', layout.colors.branchingEdgeStart);
 			endItems.shape.attr('fill', layout.colors.branchingEdgeEnd);
@@ -313,8 +315,8 @@
 	 * Checks whether activity or transition is over rubbish bin.
 	 */
 	isElemenentBinned : function(event) {
-		var canvasX = event.pageX - canvas.offset().left;
-		var canvasY = event.pageY - canvas.offset().top;
+		var canvasX = event.pageX + canvas.scrollLeft() - canvas.offset().left,
+			canvasY = event.pageY + canvas.scrollTop()  - canvas.offset().top;
 		
 		// highlight rubbish bin if dragged elements are over it
 		return Raphael.isPointInsideBBox(layout.items.bin.getBBox(), canvasX, canvasY); 
Index: lams_central/web/includes/javascript/authoring/authoringMenu.js
===================================================================
diff -u -ra3d8ca871cecdad8f45756fdcae6d697bd0e8499 -r874c54709961f76c4ca248e7f9dec90d79d6f30a
--- lams_central/web/includes/javascript/authoring/authoringMenu.js	(.../authoringMenu.js)	(revision a3d8ca871cecdad8f45756fdcae6d697bd0e8499)
+++ lams_central/web/includes/javascript/authoring/authoringMenu.js	(.../authoringMenu.js)	(revision 874c54709961f76c4ca248e7f9dec90d79d6f30a)
@@ -3,7 +3,10 @@
  */
 
 var MenuLib = {
-		
+	
+	/**
+	 * Run when branching is selected from menu. Allows placing branching and converge points on canvas.
+	 */
 	addBranching : function(){
 		var dialog = $('#infoDialog').text('Place the branching point');
 		dialog.dialog('open');
@@ -12,18 +15,21 @@
 		canvas.css('cursor', 'pointer').click(function(event){
 			// pageX and pageY tell event coordinates relative to the whole page
 			// we need relative to canvas
-			var x = event.pageX - canvas.offset().left;
-			var y = event.pageY - canvas.offset().top;
+			var x = event.pageX - canvas.offset().left,
+				y = event.pageY - canvas.offset().top;
 			
+			// if it is start point, branchingActivity is null and constructor acts accordingly
 			var branchingEdge = new ActivityLib.BranchingEdgeActivity(null, x, y, branchingActivity);
-			activities.push(branchingEdge);
+			layout.activities.push(branchingEdge);
 			
 			if (branchingActivity) {
+				// converge point was just place, end of function
 				HandlerLib.resetCanvasMode();
 				
 				dialog.text('');
 				dialog.dialog('close');
 			} else {
+				// extract main branchingActivity structure from created start point
 				branchingActivity = branchingEdge.branchingActivity;
 				dialog.text('Place the converge point');
 			}
@@ -39,10 +45,10 @@
 			
 			// pageX and pageY tell event coordinates relative to the whole page
 			// we need relative to canvas
-			var x = event.pageX - canvas.offset().left;
-			var y = event.pageY - canvas.offset().top;
-			
-			activities.push(new ActivityLib.GroupingActivity(null, x, y));
+			var x = event.pageX - canvas.offset().left - 47,
+				y = event.pageY - canvas.offset().top - 2;
+
+			layout.activities.push(new ActivityLib.GroupingActivity(null, x, y, 'Grouping'));
 		});
 	},
 	
@@ -56,10 +62,10 @@
 			
 			// pageX and pageY tell event coordinates relative to the whole page
 			// we need relative to canvas
-			var x = event.pageX - canvas.offset().left;
-			var y = event.pageY - canvas.offset().top;
+			var x = event.pageX - canvas.offset().left,
+				y = event.pageY - canvas.offset().top;
 			
-			activities.push(new ActivityLib.GateActivity(null, x, y));
+			layout.activities.push(new ActivityLib.GateActivity(null, x, y));
 		});
 	},
 	
@@ -172,7 +178,7 @@
 		// just to refresh the state of canvas
 		HandlerLib.resetCanvasMode();
 
-		if (activities.length == 0) {
+		if (layout.activities.length == 0) {
 			// no activities, nothing to do
 			return;
 		}
@@ -189,13 +195,13 @@
 			maxRows = Math.floor((paper.height - layout.conf.arrangeVerticalPadding)
 	                 			  / layout.conf.arrangeVerticalSpace),
 	        // make a shallow copy of activities array
-			activitiesCopy = activities.slice(),
+			activitiesCopy = layout.activities.slice(),
 			// just to speed up processing when there are only activities with no transitions left
 			onlyDetachedLeft = false;
 		
 		// branches will not be broken into few rows; if they are long, paper will be resized
 		// find the longes branch to find the new paper size
-		$.each(activities, function(){
+		$.each(layout.activities, function(){
 			if (this.type == 'branchingEdge' && this.isStart) {
 				// refresh branching metadata
 				ActivityLib.updateBranchesLength(this.branchingActivity);
@@ -293,6 +299,12 @@
 					var x = layout.conf.arrangeHorizontalPadding + column * layout.conf.arrangeHorizontalSpace,
 						y = layout.conf.arrangeVerticalPadding + row * layout.conf.arrangeVerticalSpace;
 					
+					if (activity.type == 'gate') {
+						// adjust placement for gate activity, so it's in the middle of its cell
+						x += 57;
+						y += 10;
+					}
+					
 					activity.draw(x, y);
 					// remove the activity so we do not process it twice
 					activitiesCopy.splice(activitiesCopy.indexOf(activity), 1);
@@ -341,7 +353,7 @@
 		};
 		
 		// redraw transitions one by one
-		$.each(activities, function(){
+		$.each(layout.activities, function(){
 			$.each(this.transitions.from.slice(), function(){
 				ActivityLib.drawTransition(this.fromActivity, this.toActivity, true);
 			});
@@ -353,11 +365,11 @@
 	 * Removes existing activities and prepares canvas for a new sequence.
 	 */
 	newLearningDesign : function(force){
-		if (!force && activities.length > 0 && !confirm('Are you sure you want to remove all existing activities?')){
+		if (!force && layout.activities.length > 0 && !confirm('Are you sure you want to remove all existing activities?')){
 			return;
 		}
 		
-		activities = [];
+		layout.activities = [];
 		if (paper) {
 			paper.clear();
 		} else {