Index: lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupAction.java
===================================================================
diff -u -r4f284603a74199f14d9eb0d5e1cc04b89755ba31 -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupAction.java	(.../DisplayGroupAction.java)	(revision 4f284603a74199f14d9eb0d5e1cc04b89755ba31)
+++ lams_central/src/java/org/lamsfoundation/lams/web/DisplayGroupAction.java	(.../DisplayGroupAction.java)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -393,6 +393,12 @@
 		lessonLinks.add(new IndexLinkBean("index.remove.lesson", removeLessonLink, null,
 			"mycourses-removelesson-img", "index.remove.lesson.tooltip"));
 	    }
+	    
+	    if ((isGroupManagerOrMonitor && stateId.equals(OrganisationState.ACTIVE))
+		    || (stateId.equals(OrganisationState.ARCHIVED) && contains(roles, Role.ROLE_GROUP_MANAGER))) {
+		lessonLinks.add(new IndexLinkBean("index.monitor",
+			"javascript:showMonitorLessonDialog(" + bean.getId() + ")", null, "mycourses-monitor-img", null));
+	    }
 
 	    if (lessonLinks.size() > 0) {
 		bean.setLinks(lessonLinks);
Index: lams_central/src/java/org/lamsfoundation/lams/web/HomeAction.java
===================================================================
diff -u -r4f284603a74199f14d9eb0d5e1cc04b89755ba31 -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_central/src/java/org/lamsfoundation/lams/web/HomeAction.java	(.../HomeAction.java)	(revision 4f284603a74199f14d9eb0d5e1cc04b89755ba31)
+++ lams_central/src/java/org/lamsfoundation/lams/web/HomeAction.java	(.../HomeAction.java)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -392,10 +392,12 @@
     public ActionForward createLearningDesignThumbnail(ActionMapping mapping, ActionForm form, HttpServletRequest req,
 	    HttpServletResponse res) throws JDOMException, IOException, TranscoderException {
 	Long learningDesignId = WebUtil.readLongParam(req, CentralConstants.PARAM_LEARNING_DESIGN_ID);
-	String imagePath = getLearningDesignService().createLearningDesignSVG(learningDesignId,
-		SVGGenerator.OUTPUT_FORMAT_PNG);
+	Integer format = WebUtil.readIntParam(req, CentralConstants.PARAM_SVG_FORMAT, true);
+	format = format == null ? SVGGenerator.OUTPUT_FORMAT_PNG : format;
 
-	res.setContentType("image/png");
+	String imagePath = getLearningDesignService().createLearningDesignSVG(learningDesignId, format);
+
+	res.setContentType(format == SVGGenerator.OUTPUT_FORMAT_PNG ? "image/png" : "image/svg+xml");
 	OutputStream output = res.getOutputStream();
 	FileInputStream input = new FileInputStream(imagePath);
 	IOUtils.copy(input, output);
Index: lams_central/web/images/icons/door_open.png
===================================================================
diff -u -r38d257ae9ba914964511a4a8fa1f51d5ace5af2e -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
Binary files differ
Index: lams_central/web/main.jsp
===================================================================
diff -u -r4f284603a74199f14d9eb0d5e1cc04b89755ba31 -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 4f284603a74199f14d9eb0d5e1cc04b89755ba31)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -31,11 +31,11 @@
 	<link rel="stylesheet" href="<lams:LAMSURL/>/css/thickbox.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-redmond-theme.css" type="text/css" media="screen">
 	<style type="text/css">
-		div#addLessonDialog {
+		.dialogContainer {
 			display: none;
 		}
 		
-		#addLessonFrame {
+		.dialogContainer iframe {
 			width: 100%;
 			height: 100%;
 			border: none;
@@ -51,6 +51,11 @@
 		<script language="JavaScript" type="text/javascript" src="includes/javascript/groupDisplay.js"></script>	
 	</c:if>
 	<script language="javascript" type="text/javascript">
+		function showMonitorLessonDialog(lessonID){
+			$("#monitorDialog").dialog('option', 'lessonID', lessonID)
+								 .dialog('open');
+		}
+		
 		function showAddLessonDialog(orgID){
 			$("#addLessonDialog").dialog('option', 'orgID', orgID)
 								 .dialog('open');
@@ -63,6 +68,13 @@
 								 .dialog('close');
 		}
 	
+		function closeMonitorLessonDialog(refresh) {
+			$('#monitorFrame').attr('src', null);
+			// was the dialog just closed or a new lesson really added? if latter, refresh the list
+			$("#monitorDialog").dialog('option', 'refresh', refresh ? true : false)
+								 .dialog('close');
+		}
+		
 		<!--
 			jQuery(document).ready(function(){
 				<c:if test="${not empty collapsedOrgDTOs}">
@@ -100,7 +112,7 @@
 				
 		       
 		        // initialise lesson dialog
-				var dialog = $('#addLessonDialog').dialog({
+				$('#addLessonDialog').dialog({
  					'autoOpen'  : false,
  					'height'    : 600,
  					'width'     : 800,
@@ -121,6 +133,28 @@
  					}
  				// tabs are the title bar, so remove dialog's one
  				}).closest('.ui-dialog').children('.ui-dialog-titlebar').remove();
+		        
+				// initialise monitor dialog
+				$('#monitorDialog').dialog({
+ 					'autoOpen'  : false,
+ 					'height'    : 600,
+ 					'width'     : 800,
+ 					'modal'     : true,
+ 					'resizable' : false,
+ 					'show'      : 'fold',
+ 					'hide'      : 'fold',
+ 					'open'      : function(){
+ 						// load contents after opening the dialog
+ 						$('#monitorFrame').attr('src', '<lams:LAMSURL/>monitoring/monitoring.do?method=monitorLesson&lessonID='
+ 								                         + $(this).dialog('option', 'lessonID'));
+ 					},
+ 					'close' : function() {
+ 						// refresh if lesson was added
+ 						if($(this).dialog('option', 'refresh')){
+ 							refresh();
+ 						}
+ 					}
+ 				}).closest('.ui-dialog').children('.ui-dialog-titlebar').remove();
 			});
 		
 			function removeLesson(lessonID) {
@@ -303,9 +337,12 @@
 	</div>
 </div>
 
-<div id="addLessonDialog">
+<div id="addLessonDialog" class="dialogContainer">
 	<iframe id="addLessonFrame"></iframe>
 </div>
+<div id="monitorDialog" class="dialogContainer">
+	<iframe id="monitorFrame"></iframe>
+</div>
 
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_common/.classpath
===================================================================
diff -u -rd7c291bd9f76db5630b5533afde1a24c649e7cae -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_common/.classpath	(.../.classpath)	(revision d7c291bd9f76db5630b5533afde1a24c649e7cae)
+++ lams_common/.classpath	(.../.classpath)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -4,7 +4,7 @@
 	<classpathentry kind="src" path="conf/hibernate/mappings"/>
 	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
 	<classpathentry kind="con" path="org.eclipse.jdt.USER_LIBRARY/3rdParty"/>
-	<classpathentry kind="lib" path="/lams_build/lib/lams/lams-central.jar"/>
+	<classpathentry kind="lib" path="/lams_build/lib/lams/lams-central.jar" sourcepath="/lams_central"/>
 	<classpathentry kind="lib" path="/lams_build/lib/lams/lams-contentrepository.jar"/>
 	<classpathentry kind="var" path="JBOSS_HOME/common/lib/servlet-api.jar" sourcepath="/3RDPARTY_SOURCES_PROJECT/jbossweb">
 		<attributes>
Index: lams_common/src/java/org/lamsfoundation/lams/util/svg/SVGGenerator.java
===================================================================
diff -u -rb39efd5c6520b4b01b290758076acaf8923b8c7d -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_common/src/java/org/lamsfoundation/lams/util/svg/SVGGenerator.java	(.../SVGGenerator.java)	(revision b39efd5c6520b4b01b290758076acaf8923b8c7d)
+++ lams_common/src/java/org/lamsfoundation/lams/util/svg/SVGGenerator.java	(.../SVGGenerator.java)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -692,9 +692,8 @@
 	}
 	
 	Element rectangle = doc.createElementNS(SVG_NAMESPACE, "rect");
-	if (activity.getActivityTypeID().equals(Activity.TOOL_ACTIVITY_TYPE)) {	
-	    rectangle.setAttributeNS(null, "id", "act" + activity.getActivityID());
-	}
+	
+	rectangle.setAttributeNS(null, "id", "act" + activity.getActivityID());
 	rectangle.setAttributeNS(null, "x", Double.toString(x));
 	rectangle.setAttributeNS(null, "y", Double.toString(y));
 	rectangle.setAttributeNS(null, "width", Double.toString(dimension.width));
Index: lams_monitoring/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -re9f3814b6b6ca31db204710d2eed84d6339807da -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_monitoring/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision e9f3814b6b6ca31db204710d2eed84d6339807da)
+++ lams_monitoring/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -203,5 +203,27 @@
 advanced.tab.enable.lesson.intro  =Enable lesson intro
 advanced.tab.display.design.image  =Display design image
 
-
+tab.lesson =Lesson
+tab.sequence =Sequence
+tab.learners =Learners
+force.complete.click =Click on an activity to force complete learner "[0]" or outside any activity to cancel.
+force.complete.end.lesson.confirm =Are you sure you want to force complete learner "[0]" to the end of lesson?
+force.complete.activity.confirm =Are you sure you want to force complete learner "[0]" to activity "[1]"?
+force.complete.drop.fail =You have dropped the learner "[0]" on either its current or on its completed activity "[1]".
+force.complete.end.lesson.tooltip =To force complete a learner to the end of lesson, drag the learner icon over to this bar.
+button.force.complete =Force complete
+button.view.learner =View learner
+button.close =Close
+learner.group.list.title =Learners:
+learner.group.count = learners in total.
+learner.group.show =Double-click to see the full list.
+learner.finished.count =Finished Learners: [0] of [1]
+learner.finished.dialog.title =End of lesson
+learner.group.sort.button =Sort
+button.help =Help
+button.help.tooltip =Open page with help on this tab
+button.refresh =Refresh
+button.refresh.tooltip =Reload the latest progress data for the learners
+button.export =Export Portfolio
+button.export.tooltip =Export the class portfolio and save it on your computer for future reference
 #======= End labels: Exported 196 labels for en AU =====
Index: lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringAction.java
===================================================================
diff -u -rc779234c258051081ddde2b4e85524eb334fb89e -r76aaa4283f0c9c4b95cae2104bdf453c02ee7721
--- lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringAction.java	(.../MonitoringAction.java)	(revision c779234c258051081ddde2b4e85524eb334fb89e)
+++ lams_monitoring/src/java/org/lamsfoundation/lams/monitoring/web/MonitoringAction.java	(.../MonitoringAction.java)	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -32,7 +32,9 @@
 import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
+import java.util.Map;
 import java.util.Set;
+import java.util.TreeMap;
 import java.util.TreeSet;
 
 import javax.servlet.ServletException;
@@ -44,7 +46,13 @@
 import org.apache.struts.action.ActionForm;
 import org.apache.struts.action.ActionForward;
 import org.apache.struts.action.ActionMapping;
+import org.apache.tomcat.util.json.JSONArray;
+import org.apache.tomcat.util.json.JSONException;
+import org.apache.tomcat.util.json.JSONObject;
+import org.lamsfoundation.lams.learningdesign.Activity;
+import org.lamsfoundation.lams.lesson.LearnerProgress;
 import org.lamsfoundation.lams.lesson.Lesson;
+import org.lamsfoundation.lams.lesson.service.ILessonService;
 import org.lamsfoundation.lams.lesson.util.LessonComparator;
 import org.lamsfoundation.lams.monitoring.MonitoringConstants;
 import org.lamsfoundation.lams.monitoring.service.IMonitoringService;
@@ -56,6 +64,7 @@
 import org.lamsfoundation.lams.usermanagement.dto.UserDTO;
 import org.lamsfoundation.lams.usermanagement.exception.UserAccessDeniedException;
 import org.lamsfoundation.lams.usermanagement.service.IUserManagementService;
+import org.lamsfoundation.lams.util.CentralConstants;
 import org.lamsfoundation.lams.util.DateUtil;
 import org.lamsfoundation.lams.util.MessageService;
 import org.lamsfoundation.lams.util.WebUtil;
@@ -66,8 +75,6 @@
 import org.lamsfoundation.lams.web.util.AttributeNames;
 import org.springframework.web.context.WebApplicationContext;
 import org.springframework.web.context.support.WebApplicationContextUtils;
-import org.apache.tomcat.util.json.JSONException;
-import org.apache.tomcat.util.json.JSONObject;
 
 /**
  * <p>
@@ -85,6 +92,7 @@
  * @struts.action-forward name = "previewdeleted" path = "/previewdeleted.jsp"
  * @struts.action-forward name = "notsupported" path = ".notsupported"
  * @struts.action-forward name = "timeChart" path = "/timeChart.jsp"
+ * @struts.action-forward name = "monitorLesson" path = "/monitor.jsp"
  * 
  *                        ----------------XDoclet Tags--------------------
  */
@@ -110,6 +118,8 @@
 
     private static ITimezoneService timezoneService;
 
+    private static ILessonService lessonService;
+
     private Integer getUserId() {
 	HttpSession ss = SessionManager.getSession();
 	UserDTO user = (UserDTO) ss.getAttribute(AttributeNames.USER);
@@ -215,7 +225,8 @@
 		.getParameter("schedulingDatetime")) : null;
 
 	boolean precedingLessonEnable = WebUtil.readBooleanParam(request, "precedingLessonEnable", false);
-	Long precedingLessonId = precedingLessonEnable ? WebUtil.readLongParam(request, "precedingLessonId", true) : null;
+	Long precedingLessonId = precedingLessonEnable ? WebUtil.readLongParam(request, "precedingLessonId", true)
+		: null;
 	boolean timeLimitEnableField = WebUtil.readBooleanParam(request, "timeLimitEnableField", false);
 	Integer timeLimitDaysField = WebUtil.readIntParam(request, "timeLimitDaysField", true);
 	boolean timeLimitIndividualField = WebUtil.readBooleanParam(request, "timeLimitIndividualField", false);
@@ -1001,6 +1012,72 @@
 	return null;
     }
 
+    public ActionForward monitorLesson(ActionMapping mapping, ActionForm form, HttpServletRequest request,
+	    HttpServletResponse response) throws IOException, ServletException {
+	Long lessonId = WebUtil.readLongParam(request, AttributeNames.PARAM_LESSON_ID);
+	Lesson lesson = getLessonService().getLesson(lessonId);
+	request.setAttribute(CentralConstants.PARAM_LEARNING_DESIGN_ID, lesson.getLearningDesign()
+		.getLearningDesignId());
+
+	return mapping.findForward("monitorLesson");
+    }
+
+    @SuppressWarnings("unchecked")
+    public ActionForward getLessonProgressJSON(ActionMapping mapping, ActionForm form, HttpServletRequest request,
+	    HttpServletResponse response) throws JSONException, IOException {
+	Long lessonId = WebUtil.readLongParam(request, AttributeNames.PARAM_LESSON_ID);
+	Lesson lesson = getLessonService().getLesson(lessonId);
+	String contentFolderId = lesson.getLessonDetails().getContentFolderID();
+	IMonitoringService monitoringService = MonitoringServiceProxy.getMonitoringService(getServlet()
+		.getServletContext());
+	Integer monitorUserId = getUserId();
+	JSONObject responseJSON = new JSONObject();
+
+	// few details for each activity
+	Map<Long, JSONObject> activitiesMap = new TreeMap<Long, JSONObject>();
+	for (Activity activity : (Set<Activity>) lesson.getLearningDesign().getActivities()) {
+	    JSONObject activityJSON = new JSONObject();
+	    Long activityId = activity.getActivityId();
+	    activityJSON.put("id", activityId);
+	    String monitorUrl = monitoringService.getActivityMonitorURL(lessonId, activityId, contentFolderId,
+		    monitorUserId);
+	    if (monitorUrl != null) { 
+		activityJSON.put("url", monitorUrl);
+	    }
+	    activitiesMap.put(activityId, activityJSON);
+	}
+
+	for (LearnerProgress learnerProgress : (Set<LearnerProgress>) lesson.getLearnerProgresses()) {
+	    JSONObject learnerJSON = new JSONObject();
+	    User learner = learnerProgress.getUser();
+	    learnerJSON.put("id", learner.getUserId());
+	    learnerJSON.put("firstName", learner.getFirstName());
+	    learnerJSON.put("lastName", learner.getLastName());
+	    learnerJSON.put("login", learner.getLogin());
+	    if (learnerProgress.isComplete()) {
+		// no more details are needed for learners who completed the lesson
+		responseJSON.append("completedLearners", learnerJSON);
+	    } else {
+		Activity currentActivity = learnerProgress.getCurrentActivity();
+		if (currentActivity != null) {
+		    Long activityId = currentActivity.getActivityId();
+		    // monitoring URL for the given learner
+		    String learnerUrl = monitoringService.getLearnerActivityURL(lessonId, activityId,
+			    learner.getUserId(), monitorUserId);
+		    learnerJSON.put("url", learnerUrl);
+
+		    JSONObject currentActivityJSON = activitiesMap.get(currentActivity.getActivityId());
+		    currentActivityJSON.append("learners", learnerJSON);
+		}
+	    }
+	}
+
+	responseJSON.put("activities", new JSONArray(activitiesMap.values()));
+	response.getWriter().write(responseJSON.toString());
+
+	return null;
+    }
+
     public ActionForward renameLesson(ActionMapping mapping, ActionForm form, HttpServletRequest request,
 	    HttpServletResponse response) throws IOException {
 	IMonitoringService monitoringService = MonitoringServiceProxy.getMonitoringService(getServlet()
@@ -1135,6 +1212,15 @@
 	return MonitoringAction.timezoneService;
     }
 
+    private ILessonService getLessonService() {
+	if (MonitoringAction.lessonService == null) {
+	    WebApplicationContext ctx = WebApplicationContextUtils.getRequiredWebApplicationContext(getServlet()
+		    .getServletContext());
+	    MonitoringAction.lessonService = (ILessonService) ctx.getBean("lessonService");
+	}
+	return MonitoringAction.lessonService;
+    }
+
     /**
      * Set whether or not the export portfolio button is available in learner. Expects parameters lessonID and
      * learnerExportPortfolio.
Index: lams_monitoring/web/css/monitorLesson.css
===================================================================
diff -u
--- lams_monitoring/web/css/monitorLesson.css	(revision 0)
+++ lams_monitoring/web/css/monitorLesson.css	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -0,0 +1,114 @@
+div#tabs {
+	width: 768px;
+	height: 574px;
+}
+
+.ui-tabs .ui-tabs-panel {
+	padding: 0px;
+}
+
+div#tabs ul li a, a#closeButton {
+	border-bottom: none;
+}
+
+a#closeButton {
+	position: absolute;
+	right: 10px;
+	top: 11px;
+	width: 19px;
+	height: 18px;
+}
+
+a#closeButton span {
+	background-color: #D0E5F5;
+}
+
+div.tabTitle {
+	padding: 5px 0px 5px 0px;
+	font-size: small;
+	font-weight: bold;
+	text-align: center;
+}
+
+.errorMessage {
+	font-weight: bold;
+	color: red;
+}
+
+.errorField {
+	border: thick solid red;
+}
+
+input[type="checkbox"] {
+	margin: 10px 5px 0px 0px;
+	border: none;
+}
+
+div.dialogContainer {
+	display: none;
+}
+
+div.topButtonsContainer {
+	height: 30px;
+}
+
+div.topButtonsContainer a {
+	float: right;
+	margin: 5px 5px 0 0;
+}
+
+div#sequenceCanvas {
+	text-align: center;
+	height: 483px;
+	width: 768px;
+	overflow: auto;
+}
+
+div#sequenceCanvas svg {
+	display: block;
+	overflow: hidden;
+}
+
+div#completedLearnersContainer {
+	padding: 4px 0px 3px 5px;
+	border-top: thin dotted #2E6E9E;
+}
+
+div#completedLearnersContainer span {
+	font-family: Verdana;
+	font-size: 10px;
+	cursor: default;
+	vertical-align: top;
+	margin-right: 5px;
+}
+
+div#learnerGroupList {
+	overflow: auto;
+	border: thin solid black;
+	padding : 5px;
+}
+
+div.learnerGroupListItem {
+	padding: 3px 0px 3px 0px;
+	cursor: pointer;
+}
+
+div.learnerGroupListItemSelected {
+	background-color: #5c9ccc !important;
+	color: white !important;
+}
+
+#learnerGroupListTitle {
+	padding: 0px 0px 5px 0px;
+	height: 15px;
+	font-size: small;
+	font-weight: bold;
+	text-align: center;
+}
+
+#sortLearnerGroupListButton {
+	text-align: right;
+	padding-right: 3px;
+	float: right;
+	cursor: pointer;
+}
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(revision 0)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(revision 76aaa4283f0c9c4b95cae2104bdf453c02ee7721)
@@ -0,0 +1,506 @@
+// ********** MAIN FUNCTIONS **********
+// copy of lesson SVG so it does no need to be fetched every t
+var originalSequenceCanvas = null;
+// DIV container for lesson SVG
+var sequenceCanvas = null;
+// how learners in pop up are currently sorted
+var learnerGroupListAscending = false;
+
+function initLessonTab(){
+	refreshSequenceCanvas();
+	
+    // initialise lesson dialog
+	$('#learnerGroupDialog').dialog({
+			'autoOpen'  : false,
+			'height'    : 360,
+			'width'     : 330,
+			'minWidth'  : 330,
+			'modal'     : true,
+			'resizable' : true,
+			'show'      : 'fold',
+			'hide'      : 'fold',
+			'open'      : function(){
+				// reset sort order
+				learnerGroupListAscending = false;
+				sortLearnerGroupList();
+				$('div.learnerGroupListItem', this).each(function(learnerIndex, learnerDiv){
+					// every odd learner has different background
+					$(learnerDiv).css('background-color', learnerIndex % 2 ? '#dfeffc' : 'inherit');
+				});
+				// until user selects an user, buttons remain disabled
+				$('button.learnerGroupDialogSelectableButton').blur().removeClass('ui-state-hover')
+					.attr('disabled', 'disabled');
+			},
+			'buttons' : [
+			             {
+			            	'text'   : FORCE_COMPLETE_BUTTON_LABEL,
+			            	'id'     : 'learnerGroupDialogForceCompleteButton',
+			            	'class'  : 'learnerGroupDialogSelectableButton',
+			            	'click'  : function() {
+			            		var selectedLearner = $('#learnerGroupList div.learnerGroupListItemSelected');
+			            		// make sure there is only one selected learner
+			            		if (selectedLearner.length == 1) {
+			            			// go to "force complete" mode, similar to draggin user to an activity
+			            			var activityId = $(this).dialog('option', 'activityId');
+			            			var dropArea = sequenceCanvas.add('#completedLearnersContainer');
+			            			dropArea.css('cursor', 'url('
+			            					+ LAMS_URL + 'images/icons/user.png),pointer')
+			            				.one('click', function(event) {
+			            					dropArea.off('click').css('cursor', 'default');
+			            					forceComplete(activityId, selectedLearner.attr('learnerId'), 
+			            							selectedLearner.text(), event.pageX, event.pageY);
+			            				});
+				            		$(this).dialog('close');
+				            		alert(FORCE_COMPLETE_CLICK_LABEL.replace('[0]', selectedLearner.text()));
+			            		}
+							}
+			             },
+			             {
+			            	'text'   : VIEW_LEARNER_BUTTON_LABEL,
+			            	'id'     : 'learnerGroupDialogViewButton',
+			            	'class'  : 'learnerGroupDialogSelectableButton',
+			            	'click'  : function() {
+			            		var selectedLearner = $('#learnerGroupList div.learnerGroupListItemSelected');
+			            		if (selectedLearner.length == 1) {
+			            			openWindow(LAMS_URL + selectedLearner.attr('viewUrl'), "LearnActivity", 800, 600);
+			            		}
+							}
+			             },
+			             {
+			            	'text'   : CLOSE_BUTTON_LABEL,
+			            	'id'     : 'learnerGroupDialogCloseButton',
+			            	'click'  : function() {
+								$(this).dialog('close');
+							} 
+			             }
+			]
+		});
+	
+	$('#sortLearnerGroupListButton').click(sortLearnerGroupList);
+}
+
+function initSequenceTab(){
+	
+}
+
+function initLearnersTab(){
+	
+}
+
+/**
+ * Reloads Learning Design SVG and adds learner progress information.
+ */
+function refreshSequenceCanvas(){
+	if (originalSequenceCanvas) {
+		// put bottom layer, LD SVG
+		sequenceCanvas.html(originalSequenceCanvas);
+	} else {
+		// fetch SVG just once, since it is immutable
+		$.ajax( {
+			type : 'GET',
+			dataType : 'text',
+			url : LAMS_URL + 'home.do',
+			async : false,
+			cache : false,
+			data : {
+				'method'    : 'createLearningDesignThumbnail',
+				'svgFormat' : 1,
+				'ldId'      : ldId
+			},
+			success : function(response) {
+				originalSequenceCanvas = response;
+				sequenceCanvas = $('#sequenceCanvas').html(originalSequenceCanvas);
+				
+				var canvasHeight = sequenceCanvas.height();
+				var canvasWidth = sequenceCanvas.width();
+				var svg = $('svg', sequenceCanvas);
+				var canvasPaddingTop = canvasHeight/2 - svg.attr('height')/2;
+				var canvasPaddingLeft = canvasWidth/2 - svg.attr('width')/2;
+
+				if (canvasPaddingTop > 0) {
+					sequenceCanvas.css({
+						'padding-top' : canvasPaddingTop,
+						'height'      : canvasHeight - canvasPaddingTop		
+					});
+				}
+				if (canvasPaddingLeft > 0) {
+					sequenceCanvas.css({
+						'padding-left' : canvasPaddingLeft,
+						'width'        : canvasWidth - canvasPaddingLeft		
+					});
+				}
+			}
+		});
+	}
+	
+	// get progress data
+	$.ajax({
+		type : 'GET',
+		dataType : 'json',
+		url : LAMS_URL + 'monitoring/monitoring.do',
+		cache : false,
+		data : {
+			'method'    : 'getLessonProgressJSON',
+			'lessonID'  : lessonId
+		},
+		success : function(response) {
+			var learnerCount = 0;
+			$.each(response.activities, function(){
+				if (this.learners) {
+					// are there any learners in this or any activity?
+					learnerCount += this.learners.length;
+					// put learner icons on each activity shape
+					addLearnerIcons(this);
+				}
+			});
+			
+			if (learnerCount > 0) {
+				// IMPORTANT! Reload SVG, otherwise added icons will not get displayed
+				sequenceCanvas.html(sequenceCanvas.html());
+			}
+			
+			addCompletedLearnerIcons(response.completedLearners, learnerCount);
+			
+			$.each(response.activities, function(activityIndex, activity){
+				addLearnerIconsHandlers(activity);
+				
+				if (activity.url) {
+					var activityGroup = $('rect[id="act' + activity.id + '"]', sequenceCanvas).parent();
+					activityGroup.css('cursor', 'pointer').dblclick(function(){
+						// double click on activity shape to open Monitoring for this activity
+						openWindow(LAMS_URL + activity.url, "MonitorActivity", 900, 720);
+					});
+				}
+			});
+		}
+	});
+}
+
+/**
+ * Forces given learner to move to activity indicated on SVG by coordinated (drag-drop)
+ */
+function forceComplete(currentActivityId, learnerId, learnerName, x, y) {
+	// check all activities and "users who finished lesson" bar
+	$('rect[id^="act"]', sequenceCanvas).add('#completedLearnersContainer').each(function(){
+		// find which activity learner was dropped on
+		var act = $(this);
+		var actX = act.offset().left;
+		var actY = act.offset().top;
+		var actEndX = actX + (act.width() ? act.width() : +act.attr('width'));
+		var actEndY = actY + (act.height() ? act.height() : +act.attr('height'));
+		if (x >= actX && x<= actEndX && y>= actY && y<=actEndY) {
+			var previousActivityId = null;
+			var executeForceComplete = false;
+			
+			if (act.attr('id') == 'completedLearnersContainer') {
+				executeForceComplete = confirm(FORCE_COMPLETE_END_LESSON_CONFIRM_LABEL
+						.replace('[0]',learnerName));
+			} else {
+				var targetActivityId = act.parent().attr('id');
+				var targetActivityName = act.siblings('text[id^="TextElement"]').text();
+				
+				// find if it is not already completed/current activity - it is forbidden
+				var precedingActivityId = targetActivityId;
+				// move step by step to the sequence beginning
+				// if current activity is found, it is a activity still in front, so it's OK
+				do {
+					// find transition line and extract activity IDs from them
+					var transitionLine = $('line[id$="to_' 
+							+ precedingActivityId + '"]:not([id^="arrow"])'
+							, sequenceCanvas);
+					precedingActivityId = transitionLine.length == 1 ? 
+							transitionLine.attr('id').split('_')[0] : null;
+					if (previousActivityId == null) {
+						previousActivityId = precedingActivityId;
+					}
+					if (precedingActivityId == currentActivityId) {
+						break;
+					}
+				} while (precedingActivityId);
+				
+				if (precedingActivityId) {
+					executeForceComplete = confirm(FORCE_COMPLETE_ACTIVITY_CONFIRM_LABEL
+							.replace('[0]', learnerName).replace('[1]', targetActivityName));
+				} else {
+					alert(FORCE_COMPLETE_DROP_FAIL_LABEL
+							.replace('[0]', learnerName).replace('[1]', targetActivityName));
+				}
+			}
+			
+			if (executeForceComplete) {
+				// tell server to force complete the learner
+				$.ajax({
+					type : 'GET',
+					dataType : 'xml',
+					url : LAMS_URL + 'monitoring/monitoring.do',
+					cache : false,
+					data : {
+						'method'     : 'forceComplete',
+						'lessonID'   : lessonId,
+						'learnerID'  : learnerId,
+						'activityID' : previousActivityId
+					},
+					success : function(response) {
+						// inform user of result
+						var messageElem = $(response).find('var[name="messageValue"]');
+						if (messageElem.length > 0){
+							alert(messageElem.text());
+						}
+						
+						// progress changed, show it to monitor
+						refreshSequenceCanvas();
+					}
+				});
+			}
+			// we found our target, stop iteration
+			return false;
+		}
+	});
+}
+
+/**
+ * Draw user icons on top of activities.
+ */
+function addLearnerIcons(activity) {
+	var activityRect = $('rect[id="act' + activity.id + '"]', sequenceCanvas);
+	var activityGroup = activityRect.parent();
+	var actX = +activityRect.attr('x') + 1;
+	var actY = +activityRect.attr('y') + 1;
+	var actTooltip = LEARNER_GROUP_LIST_TITLE_LABEL;
+	
+	$.each(activity.learners, function(learnerIndex, learner){
+		if (activity.learners.length > 8 && learnerIndex == 7) {
+			// maximum 8 icons fit in an activity 
+			var actRightBorder = actX + +activityRect.attr('width');
+			var groupTitle = activity.learners.length + ' ' + LEARNER_GROUP_COUNT_LABEL
+				+ ' ' + LEARNER_GROUP_SHOW_LABEL;
+			// if icons do not fit in shape anymore, show a group icon
+			var element = appendXMLElement('image', {
+				'id'         : 'act' + activity.id + 'learnerGroup',
+				'x'          : actRightBorder - 19,
+				'y'          : actY + 1,
+				'height'     : 16,
+				'width'      : 16,
+				'xlink:href' : LAMS_URL + 'images/icons/group.png'
+			}, null, activityGroup[0]);
+			appendXMLElement('title', null, groupTitle, element);
+			// add a small number telling how many learners are in the group
+			element = appendXMLElement('text', {
+				'id'         : 'act' + activity.id + 'learnerGroupText',
+				'x'          : actRightBorder - 10,
+				'y'          : actY + 24,
+				'text-anchor': 'middle',
+				'font-family': 'Verdana',
+				'font-size'  : 8
+			}, activity.learners.length, activityGroup[0]);
+			appendXMLElement('title', null, groupTitle, element);
+			// stop processing learners
+			return false;
+		} else {
+			/* make an icon for each learner */
+			var element = appendXMLElement('image', {
+				'id'         : 'act' + activity.id + 'learner' + learner.id,
+				'x'          :  actX + learnerIndex*15,
+				'y'          :  actY,
+				'height'     : 16,
+				'width'      : 16,
+				'xlink:href' : LAMS_URL + 'images/icons/user.png'
+			}, null, activityGroup[0]);
+			var learnerDisplayName = getLearnerDisplayName(learner);
+			appendXMLElement('title', null, learnerDisplayName, element);
+			actTooltip += '\n' + learnerDisplayName;
+		}
+	});
+	
+	appendXMLElement('title', null, actTooltip, activityGroup[0]);
+}
+
+/**
+ * After SVG refresh, add click/dblclick/drag handlers to user icons.
+ */
+function addLearnerIconsHandlers(activity) {
+	if (activity.learners) {
+		var activityGroup = $('rect[id="act' + activity.id + '"]', sequenceCanvas).parent();
+		
+		$.each(activity.learners, function(learnerIndex, learner){	
+			$('image[id="act' + activity.id + 'learner' + learner.id + '"]', activityGroup)
+			 .dblclick(function(event){
+				 // double click on learner icon to see activity from his perspective
+				event.stopPropagation();
+				openWindow(LAMS_URL + learner.url, "LearnActivity", 800, 600);
+			})
+			// drag learners to force complete activities
+			.draggable({
+				'appendTo'    : '#tabSequence',
+				'containment' : '#tabSequence',
+			    'distance'    : 20,
+			    'scroll'      : false,
+			    'cursorAt'	  : {'left' : 10, 'top' : 15},
+				'helper'      : function(event){
+					// copy of the icon for dragging
+					return $('<img />').attr('src', LAMS_URL + 'images/icons/user.png');
+				},
+				'stop' : function(event, ui) {
+					// jQuery droppable does not work for SVG, so this is a workaround
+					forceComplete(activity.id, learner.id, getLearnerDisplayName(learner),
+							      ui.offset.left, ui.offset.top);
+				}
+			});
+		});
+
+		var learnerGroupIcon = $('*[id^="act' + activity.id + 'learnerGroup"]', activityGroup);
+		// 0 is for no group icon, 2 is for icon + digits
+		if (learnerGroupIcon.length == 2) {
+			var activityName = $('text[id^="TextElement"]', activityGroup).text();
+			learnerGroupIcon.dblclick(function(event){
+				 // double click on learner icon to see activity from his perspective
+				event.stopPropagation();
+				showLearnerGroupDialog(activity.id, activityName, activity.learners);
+			})
+		}
+	}
+}
+
+/**
+ * Add learner icons in "finished lesson" bar.
+ */
+function addCompletedLearnerIcons(learners, activitiesLearnerCount) {
+	var iconsContainer = $('#completedLearnersContainer');
+	// clear all icons except the door
+	iconsContainer.children(':not(img#completedLearnersDoorIcon)').remove();
+	var completedLearnerCount = (learners ? learners.length : 0 );
+	var learnerTotalCount = completedLearnerCount + activitiesLearnerCount;
+	// show (current/total) label
+	$('<span />').attr({
+		'title' : LEARNER_FINISHED_COUNT_LABEL
+			.replace('[0]', completedLearnerCount).replace('[1]', learnerTotalCount)
+	}).text('(' + completedLearnerCount + '/' + learnerTotalCount + ')')
+	  .appendTo(iconsContainer);
+	
+	if (learners) {
+		// create learner icons, along with handlers
+		$.each(learners, function(learnerIndex, learner){
+			// maximum 41 icons in the bar
+			if (learners.length > 43 && learnerIndex == 42) {
+				// if icons do not fit in cell anymore, show a group icon
+				$('<img />').attr({
+					'src' : LAMS_URL + 'images/icons/group.png',
+					'title'      : LEARNER_GROUP_SHOW_LABEL
+				}).css('cursor', 'pointer')
+				  .dblclick(function(){
+					showLearnerGroupDialog(null, LEARNER_FINISHED_DIALOG_TITLE_LABEL, learners);
+				}).appendTo(iconsContainer);
+				// stop processing learners
+				return false;
+			} else {
+				// make an icon for each learner
+				$('<img />').attr({
+					'src' : LAMS_URL + 'images/icons/user.png',
+					'title'      : getLearnerDisplayName(learner)
+				}).appendTo(iconsContainer);
+			}
+		});
+	}
+}
+
+/**
+ * Show a dialog with learner list and optional Force Complete and View Learner buttons.
+ */
+function showLearnerGroupDialog(activityId, dialogTitle, learners) {
+	var learnerGroupList = $('#learnerGroupList').empty();
+	var learnerGroupDialog = $('#learnerGroupDialog');
+	$.each(learners, function(learnerIndex, learner) {
+		$(learnerGroupList).append($('<div />').attr({
+										'learnerId'  : learner.id,
+										'sortKey'    : learner.lastName + learner.firstName,
+										'viewUrl'    : learner.url
+										})
+				                      .addClass('learnerGroupListItem')
+        						      .text(getLearnerDisplayName(learner))
+        						      .click(function(){
+        						    	  // select a learner
+        						    	  $(this).addClass('learnerGroupListItemSelected')
+        						    	  	.siblings('div.learnerGroupListItem')
+        						    	  	.removeClass('learnerGroupListItemSelected');
+        						    	  // enable buttons
+        						    	  $('button.learnerGroupDialogSelectableButton')
+        						    	  	.attr('disabled', null);
+        						      })
+        						      .dblclick(function(){
+        						    	  // same as clicking View Learner button
+        						    	  openWindow(LAMS_URL + learner.url, "LearnActivity", 800, 600);
+        						      })
+        						   );
+	});
+	
+	// no activity ID, i.e. showing finshed learners, so no buttons
+	$('button.learnerGroupDialogSelectableButton').css('display', activityId ? 'inline' : 'none');
+	
+	learnerGroupDialog
+		.dialog('option', 
+			{
+			 'title' : dialogTitle,
+			 'activityId' : activityId,
+			  
+			})
+		.dialog('open');	
+}
+
+/**
+ * Format learner name.
+ */
+function getLearnerDisplayName(learner) {
+	return learner.firstName + ' ' + learner.lastName + ' (' + learner.login + ')';
+}
+
+/**
+ * Change order of learner sorting in group dialog.
+ */
+function sortLearnerGroupList() {
+	var learnerGroupList = $('#learnerGroupList');
+	var learners = learnerGroupList.children('div.learnerGroupListItem');
+	if (learners.length > 1) {
+		learners.each(function(){
+			$(this).detach();
+		}).sort(function(a, b){
+			var keyA = $(a).attr('sortKey');
+			var keyB = $(b).attr('sortKey');
+			var result = keyA > keyB ? 1 : keyA < keyB ? -1 : 0;
+			return learnerGroupListAscending ? -result : result;
+		}).each(function(){
+			$(this).appendTo(learnerGroupList);
+		});
+		
+		var button = $('#sortLearnerGroupListButton');
+		if (learnerGroupListAscending) {
+			button.html('▼');
+			learnerGroupListAscending = false;
+		} else {
+			button.html('▲');
+			learnerGroupListAscending = true;
+		}
+	}
+}
+
+function openWindow(url, title, width, height) {
+	window.open(url, title, "width=" + width + ",height=" + height
+			+ ",resizable=yes,scrollbars=yes,status=yes,menubar=no,toolbar=no");
+}
+
+/**
+ * Makes a XML element with given attributes.
+ * jQuery does not work well with SVG in Chrome, so all this manipulation need to be done manually. 
+ */
+function appendXMLElement(tagName, attributesObject, content, target) {
+	var elementText = '<' + tagName + (content ? '>' + content + '</' + tagName + '>'
+											   : ' />');
+	var element = $.parseXML(elementText).firstChild;
+	if (attributesObject) {
+		for (attrKey in attributesObject) {
+			element.setAttribute(attrKey, attributesObject[attrKey]);
+		}
+	}
+
+	target.appendChild(element);
+	return element;
+}
\ No newline at end of file
Fisheye: Tag 440554bb4a9a414c6e3e676a93de72de3298951c refers to a dead (removed) revision in file `lams_monitoring/web/monitor.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?