Index: lams_central/web/addLesson.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/addLesson.jsp,v
diff -u -r1.16.2.14 -r1.16.2.15
--- lams_central/web/addLesson.jsp	1 Nov 2016 03:27:14 -0000	1.16.2.14
+++ lams_central/web/addLesson.jsp	2 Nov 2016 06:34:30 -0000	1.16.2.15
@@ -86,7 +86,7 @@
 						<tr>
 							<td id="canvasCell" >
 						    	<div id="canvasDiv">
-						    		<img id="ldScreenshotAuthor" class="ldChoiceDependentCanvasElement" />
+						    		<div id="ldScreenshotAuthor" class="ldChoiceDependentCanvasElement"></div>
 					    			<i id="ldScreenshotLoading" class="ldChoiceDependentCanvasElement fa fa-refresh fa-spin fa-2x fa-fw"></i>
 					    			<div id="ldNotChosenError" class="ldChoiceDependentCanvasElement errorMessage" ><fmt:message key="error.tab.lesson.sequence" /></div>
 					    			<div id="ldCannotLoadSVG" class="ldChoiceDependentCanvasElement" ><fmt:message key="error.cannot.load.thumbnail" /></div>
Index: lams_central/web/main.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/main.jsp,v
diff -u -r1.77.2.31 -r1.77.2.32
--- lams_central/web/main.jsp	30 Oct 2016 23:26:05 -0000	1.77.2.31
+++ lams_central/web/main.jsp	2 Nov 2016 06:34:30 -0000	1.77.2.32
@@ -31,7 +31,7 @@
 	<script type="text/javascript" src="includes/javascript/jquery.tablesorter-widgets.js"></script> 	
 	<script type="text/javascript" src="includes/javascript/jquery.dialogextend.js"></script>	
 	<script type="text/javascript" src="includes/javascript/dialog.js"></script>
-	<script type="text/javascript" src="includes/javascript/groupDisplay.js"></script>	
+	<!-- <script type="text/javascript" src="includes/javascript/groupDisplay.js"></script>	 -->
 	<script type="text/javascript" src="includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript" src="includes/javascript/jquery.ui.touch-punch.js"></script>
 	<script type="text/javascript" src="includes/javascript/jquery.slimscroll.js"></script>
Index: lams_central/web/css/addLesson.css
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/css/addLesson.css,v
diff -u -r1.3.2.6 -r1.3.2.7
--- lams_central/web/css/addLesson.css	25 Oct 2016 12:29:39 -0000	1.3.2.6
+++ lams_central/web/css/addLesson.css	2 Nov 2016 06:34:30 -0000	1.3.2.7
@@ -25,8 +25,8 @@
 }
 
 #content .panel-monitor-page, #content .panel-monitor-body  {
-	margin-bottom: 0;
-	padding-bottom: 0;
+	margin: 0;
+	padding: 0;
 }
 
 #content .navbar-collapse {
Index: lams_central/web/includes/javascript/addLesson.js
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/addLesson.js,v
diff -u -r1.7.2.7 -r1.7.2.8
--- lams_central/web/includes/javascript/addLesson.js	1 Nov 2016 03:26:49 -0000	1.7.2.7
+++ lams_central/web/includes/javascript/addLesson.js	2 Nov 2016 06:34:30 -0000	1.7.2.8
@@ -3,7 +3,9 @@
 	lastSelectedUsers = {},
 	sortOrderAscending = {},
 	generatingLearningDesign = false;
-	submitInProgress = false;
+	submitInProgress = false,
+	originalThumbnailWidth = 0,
+	originalThumbnailHeight = 0,
 
 
 /**
@@ -17,43 +19,6 @@
  * Sets up widgets on the main.jsp page
  */
 function initLessonTab(){
-	$('#ldScreenshotAuthor').load(function(){
-		generatingLearningDesign = false;
-		// hide "loading" animation
-		$('.ldChoiceDependentCanvasElement').css('display', 'none');
-		// show the thumbnail
-		$('#ldScreenshotAuthor').css('display', 'inline');
-		// resize if needed
-		var resized = resizeImage('ldScreenshotAuthor', 477);
-		toggleCanvasResize(resized ? CANVAS_RESIZE_OPTION_FIT
-				: CANVAS_RESIZE_OPTION_NONE);
-	}).error(function(event){
-
-		// the LD SVG is missing, try to re-generate it
-		// check first though that we haven't tried already to do that!
-		if ( generatingLearningDesign ) {
-			generatingLearningDesign = false;
-			$('.ldChoiceDependentCanvasElement').css('display', 'none');
-			$('#ldCannotLoadSVG').css('display', 'inline');
-		} else {
-			var image = $(this),
-				learningDesignID = $(this).data('learningDesignID');
-			
-			// iframe just to load Authoring for a single purpose, generate the SVG
-			$('<iframe />').appendTo('body').load(function(){
-				// call svgGenerator.jsp code to store LD SVG on the server
-				generatingLearningDesign = true;
-				var frame = $(this),
-					win = frame[0].contentWindow || frame[0].contentDocument;
-				win.GeneralLib.saveLearningDesignImage();
-				frame.remove();
-				// load the image again, avoid caching
-				image.attr('src', LD_THUMBNAIL_URL_BASE + learningDesignID + '&_t=' + new Date().getTime());
-			}).attr('src', LAMS_URL 
-						   + 'authoring/author.do?method=generateSVG&selectable=false&learningDesignID='
-						   + learningDesignID);
-		}
-	});
 	
 	// generate LD initial tree; folderContents is declared in newLesson.jsp
 	var treeNodes = parseFolderContents(folderContents);
@@ -96,12 +61,7 @@
 		// display "loading" animation and finally LD thumbnail
 		$('.ldChoiceDependentCanvasElement').css('display', 'none');
 		if (event.node.highlightState == 0) {
-			$('#ldScreenshotLoading').css('display', 'inline');
-			$('#ldScreenshotAuthor').data('learningDesignID', event.node.data.learningDesignId)
-									.attr('src', LD_THUMBNAIL_URL_BASE + event.node.data.learningDesignId 
-																	   + '&_t=' + new Date().getTime())
-									.css('width', 'auto')
-									.css('height', 'auto');
+			loadLearningDesignSVG(event.node.data.learningDesignId);
 		} else {
 			toggleCanvasResize(CANVAS_RESIZE_OPTION_NONE);
 		}
@@ -356,26 +316,96 @@
 
 // ********** LESSON TAB FUNCTIONS **********
 
-function resizeImage(id, width) {
-	var elem = $('#' + id),
-		elemWidth = elem.width();
+function loadLearningDesignSVG(ldId) {
 	
-	if (width != null && elemWidth > width) {
-		elem.css({
-			'width'  : width,
-			// compute ratio same as width change
-			'height' : Math.round(elem.height() * (width / elemWidth))
-		});
-		return true;
+	$.ajax({
+		dataType : 'text',
+		url : LAMS_URL + 'home.do',
+		async : false,
+		cache : false,
+		data : {
+			'method'    : 'getLearningDesignThumbnail',
+			'ldId'      : ldId,
+			'_t'		: new Date().getTime()
+			
+		},
+		success : function(response) {
+			// hide "loading" animation
+			$('.ldChoiceDependentCanvasElement').css('display', 'none');
+			generatingLearningDesign = false;
+			
+			// show the thumbnail
+			$('#ldScreenshotAuthor').html(response);
+			$('#ldScreenshotAuthor').css('display', 'block').css('width', 'auto').css('height', 'auto');
+
+			originalThumbnailWidth = $('svg','#ldScreenshotAuthor').attr('width');
+			originalThumbnailHeight = $('svg','#ldScreenshotAuthor').attr('height');
+
+			// resize if needed
+			var resized = resizeSequenceThumbnail();
+			toggleCanvasResize(resized ? CANVAS_RESIZE_OPTION_FIT
+					: CANVAS_RESIZE_OPTION_NONE);
+		},
+		error : function(error) {
+
+			// the LD SVG is missing, try to re-generate it; if it is an another error, fail
+			if (error.status != 404 || generatingLearningDesign ) {
+				$('.ldChoiceDependentCanvasElement').css('display', 'none');
+				$('#ldCannotLoadSVG').css('display', 'inline');
+				generatingLearningDesign = false;
+				return;
+			}
+
+			generatingLearningDesign = true;
+			// iframe just to load Authoring for a single purpose, generate the SVG
+			$('<iframe />').appendTo('body').load(function(){
+				// call svgGenerator.jsp code to store LD SVG on the server
+				var frame = $(this),
+					win = frame[0].contentWindow || frame[0].contentDocument;
+				win.GeneralLib.saveLearningDesignImage();
+				frame.remove();
+				// load the image again, avoid caching
+				loadLearningDesignSVG(ldId);
+			}).attr('src', LAMS_URL 
+						   + 'authoring/author.do?method=generateSVG&selectable=false&learningDesignID='
+						   + ldId);
+		}
+	});
+	
+}
+
+function resizeSequenceThumbnail(reset) {
+
+	var returnValue = false;
+	var svg = $('svg','#ldScreenshotAuthor');
+	if ( svg ) {
+		if ( reset ) {
+			svg.attr('width',originalThumbnailWidth);
+			svg.attr('height',originalThumbnailHeight);
+			if ( originalThumbnailWidth > 550 ) {
+				$('#ldScreenshotAuthor').css('width', 550).css('height', originalThumbnailHeight);
+			}
+		} else { 
+			var svgWidth = svg.attr('width'),
+				svgHeight = svg.attr('height');
+			if ( svgWidth > 550 ) {
+				svg.attr('width', 550);
+				svg.attr('height', Math.ceil(svgHeight * (550 / svgWidth)));
+				returnValue = true;
+			} 
+			$('#ldScreenshotAuthor').css('width', 'auto').css('height', 'auto');
+		}
 	}
-	return false;
+	
+	return returnValue;
 }
 
 
 /**
  * Chooses whether LD thumbnail will be shrinked or full size.
  */
 function toggleCanvasResize(mode) {
+
 	var toggleCanvasResizeLink = $('#toggleCanvasResizeLink');
 	switch (mode) {
 	case CANVAS_RESIZE_OPTION_NONE:
@@ -387,15 +417,15 @@
 					toggleCanvasResize(CANVAS_RESIZE_OPTION_FULL)
 				});
 		toggleCanvasResizeLink.css('display', 'inline');
-		resizeImage('ldScreenshotAuthor', 477);
+		resizeSequenceThumbnail();
 		break;
 	case CANVAS_RESIZE_OPTION_FULL:
 		toggleCanvasResizeLink.html(CANVAS_RESIZE_LABEL_FIT).one('click',
 				function() {
 					toggleCanvasResize(CANVAS_RESIZE_OPTION_FIT)
 				});
 		toggleCanvasResizeLink.css('display', 'inline');
-		$('#ldScreenshotAuthor').css('width', 'auto').css('height', 'auto');
+		resizeSequenceThumbnail(true);
 		break;
 	}
 }