Index: lams_monitoring/web/monitor.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_monitoring/web/monitor.jsp,v
diff -u -r1.27.2.29 -r1.27.2.30
--- lams_monitoring/web/monitor.jsp	28 Oct 2016 02:50:48 -0000	1.27.2.29
+++ lams_monitoring/web/monitor.jsp	1 Nov 2016 12:19:16 -0000	1.27.2.30
@@ -11,11 +11,11 @@
 <lams:head>
 
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui.timepicker.css" type="text/css" media="screen" />
-
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/progressBar.css" type="text/css" />
-	<link rel="stylesheet" href="css/monitorLesson.css" type="text/css" media="screen" />
 	<link href="/lams/css/defaultHTML_learner.css" rel="stylesheet" type="text/css">
   	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/progressBar.css" type="text/css" />
+	<link rel="stylesheet" href="css/monitorLesson.css" type="text/css" media="screen" />
+
   
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" >
@@ -58,8 +58,6 @@
 			LABELS = {
 				<fmt:message key="force.complete.click" var="FORCE_COMPLETE_CLICK_VAR"/>
 				FORCE_COMPLETE_CLICK : decoderDiv.html('<c:out value="${FORCE_COMPLETE_CLICK_VAR}" />').text(),
-				<fmt:message key="button.force.complete" var="FORCE_COMPLETE_BUTTON_VAR"/>
-				FORCE_COMPLETE_BUTTON : '<c:out value="${FORCE_COMPLETE_BUTTON_VAR}" />',
 				<fmt:message key="force.complete.end.lesson.confirm" var="FORCE_COMPLETE_END_LESSON_CONFIRM_VAR"/>
 				FORCE_COMPLETE_END_LESSON_CONFIRM : decoderDiv.html('<c:out value="${FORCE_COMPLETE_END_LESSON_CONFIRM_VAR}" />').text(),
 				<fmt:message key="force.complete.activity.confirm" var="FORCE_COMPLETE_ACTIVITY_CONFIRM_VAR"/>
@@ -78,12 +76,6 @@
 				LEARNER_GROUP_SHOW : '<c:out value="${LEARNER_GROUP_SHOW_VAR}" />',
 				<fmt:message key="learner.group.remove.progress" var="LEARNER_GROUP_REMOVE_PROGRESS_VAR"/>
 				LEARNER_GROUP_REMOVE_PROGRESS : decoderDiv.html('<c:out value="${LEARNER_GROUP_REMOVE_PROGRESS_VAR}" />').text(),
-				<fmt:message key="button.view.learner" var="VIEW_LEARNER_BUTTON_VAR"/>
-				VIEW_LEARNER_BUTTON : '<c:out value="${VIEW_LEARNER_BUTTON_VAR}" />',
-				<fmt:message key="button.email" var="EMAIL_BUTTON_VAR"/>
-				EMAIL_BUTTON : '<c:out value="${EMAIL_BUTTON_VAR}" />',
-				<fmt:message key="button.close" var="CLOSE_BUTTON_VAR"/>
-				CLOSE_BUTTON : '<c:out value="${CLOSE_BUTTON_VAR}" />',
 				<fmt:message key="email.notifications" var="NOTIFCATIONS_VAR"/>
 				NOTIFCATIONS : '<c:out value="${NOTIFCATIONS_VAR}" />',
 				<fmt:message key="button.save" var="SAVE_BUTTON_VAR"/>
@@ -169,7 +161,6 @@
 			}
 	    
 		$(document).ready(function(){
-			initTabs();
 			initLessonTab();
 			initSequenceTab();
 			initLearnersTab();
@@ -498,7 +489,7 @@
 	 
 	<!-- Inner dialog placeholders -->
 	
-	<div id="learnerGroupDialog" class="dialogContainer">
+	<div id="learnerGroupDialogContents" class="dialogContainer">
 		<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
 		<table>
 			<tr id="learnerGroupSearchRow">
@@ -551,9 +542,23 @@
 				<td colspan="6" class="dialogList"></td>
 			</tr>
 		</table>
+		<div class="btn-group pull-right">
+			<button id="learnerGroupDialogForceCompleteButton" class="learnerGroupDialogSelectableButton btn btn-default">
+				<span><fmt:message key="button.force.complete" /></span>
+			</button>
+			<button id="learnerGroupDialogViewButton" class="learnerGroupDialogSelectableButton btn btn-default">
+				<span><fmt:message key="button.view.learner" /></span>
+			</button>
+			<button id="learnerGroupDialogEmailButton" class="learnerGroupDialogSelectableButton btn btn-default">
+				<span><fmt:message key="button.email" /></span>
+			</button>
+			<button id="learnerGroupDialogCloseButton" class="btn btn-default">
+				<span><fmt:message key="button.close" /></span>
+			</button>
+		</div>
 	</div>
 		
-	<div id="classDialog" class="dialogContainer">
+	<div id="classDialogContents" class="dialogContainer">
 		<table id="classDialogTable">
 			<tr>
 				<td>
Index: lams_monitoring/web/css/monitorLesson.css
===================================================================
RCS file: /usr/local/cvsroot/lams_monitoring/web/css/monitorLesson.css,v
diff -u -r1.15.2.14 -r1.15.2.15
--- lams_monitoring/web/css/monitorLesson.css	21 Oct 2016 09:03:44 -0000	1.15.2.14
+++ lams_monitoring/web/css/monitorLesson.css	1 Nov 2016 12:19:16 -0000	1.15.2.15
@@ -51,8 +51,16 @@
 	border: none;
 }
 
-.dialogContainer,
-.dialog-no-title .ui-dialog-titlebar {
+.modal-header button .fa {
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+.ui-front {
+	z-index: 1100;
+}
+
+.dialogContainer {
 	display: none;
 	-webkit-overflow-scrolling: touch !important;
 }
@@ -115,6 +123,11 @@
 span#learnerGroupMultiSelectLabel {
 	font-size: 10px;
 }
+
+#learnerGroupDialogContents .btn-group {
+	margin-top: 10px;
+}
+
 /********** LESSON TAB STYLES **********/
 div#tabLesson {
 /*	height: 540px;*/
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
RCS file: /usr/local/cvsroot/lams_monitoring/web/includes/javascript/monitorLesson.js,v
diff -u -r1.44.2.41 -r1.44.2.42
--- lams_monitoring/web/includes/javascript/monitorLesson.js	28 Oct 2016 02:50:49 -0000	1.44.2.41
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	1 Nov 2016 12:19:16 -0000	1.44.2.42
@@ -32,67 +32,7 @@
 	lastTapTime = 0,
 	lastTapTarget = null;
 
-// ********* GENERAL TABS FUNCTIONS *********
 
-function initTabs(){
-	$('#tabs').tabs({
-		'activate' : function(event, ui) {
-			var sequenceInfoDialog = $('#sequenceInfoDialog');
-			if (ui.newPanel.attr('id') == 'tabSequence') {
-				if (sequenceTabShowInfo && !sequenceInfoDialog.dialog('option', 'showed')) {
-					sequenceInfoDialog.dialog('open');
-				}
-			} else if (sequenceInfoDialog.dialog('isOpen')) {
-				sequenceInfoDialog.dialog('close');
-			}
-		}
-	}).draggable({
-		// scroll plugin has to be disabled here as it throws errors
-		// when dragging helper appended to parent document
-		'scroll' : false,
-		'handle' : $('#tabs>ul'),
-		'helper' : function(){
-			// since this code is inside an iframe, the helper is
-			// a transparent div with black borders attached to parent document
-			var dialogName = "dialogMonitorLesson" + lessonId,
-				dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog'),	
-				helper = $('<div />').attr('id', 'dragHelper').css({
-					'width'  : dialog.width(),
-					'height' : dialog.height()
-				});
-			return helper;
-		},
-		'appendTo' : window.parent.document.body,
-		'start' : function(){
-			$(window.parent.document.body).mouseup(function(){
-				// IE sometimes does not trigger drag stop, so we need to help it
-				$('#tabs').trigger('mouseup');
-			});
-		},
-		'drag' : function(event, ui) {
-			// adjust position to be relative to parent document, not iframe contents
-			var dialogName = "dialogMonitorLesson" + lessonId,
-				dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog');
-			ui.position.top += dialog.position().top;
-			ui.position.left += dialog.position().left;
-		},
-		'stop' : function(event, ui) {
-			$(window.parent.document.body).off('mouseup');
-			var dialogName = "dialogMonitorLesson" + lessonId,
-				dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog');
-			dialog.offset({
-				'top' : ui.offset.top,
-				'left' : ui.offset.left
-			});
-		}
-	}).mousedown(function(){
-		// bring clicked Monitor window to front
-		var dialogName = "dialogMonitorLesson" + lessonId;
-		window.parent.moveDialogToTop(dialogName);
-	});
-}
-
-
 //********** LESSON TAB FUNCTIONS **********
 
 /**
@@ -155,35 +95,22 @@
 	});
 	
 	// sets up dialog for editing class
-	var classDialog = $('#classDialog').dialog({
+	var classDialog = showDialog('classDialog',{
 		'autoOpen'  : false,
-		'height'    : 435,
 		'width'     : 700,
-		'minWidth'  : 700,
-		'modal'     : true,
+		'title' 	: LABELS.LESSON_EDIT_CLASS,
 		'resizable' : true,
-		'show'      : 'fold',
-		'hide'      : 'fold',
 		'open'      : function(){
 			autoRefreshBlocked = true;
 		},
 		'close' : function(){
 			autoRefreshBlocked = false;
 			refreshMonitor();
-		},
-		'buttons' : [
-		             {
-		            	'text'   : LABELS.CLOSE_BUTTON,
-		            	'id'     : 'classDialogCancelButton',
-		            	'class'  : 'btn btn-sm btn-default', 
-		            	'click'  : function() {
-							$(this).dialog('close');
-						} 
-		            			}
-		]
-		            		});
-		            		
+		}
+	}, false);
 	
+	$('.modal-body', classDialog).empty().append($('#classDialogContents').show());
+	
 	// search for users in the organisation with the term the Monitor entered
 	$('.dialogSearchPhrase', classDialog).autocomplete({
 			'source' : LAMS_URL + "monitoring/monitoring.do?method=autocomplete&scope=organisation&lessonID=" + lessonId,
@@ -196,10 +123,10 @@
 				// show the "clear search phrase" button
 				$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
 				// reset to page 1
-				dialog.dialog('option','LearnerAjaxProperties').pageNumber = 1;
+				dialog.data('LearnerAjaxProperties').data.pageNumber = 1;
 				showClassDialog('Learner');
 				return false;
-		            		}
+		   }
 		})
 		// run the real search when the Monitor presses Enter
 		.keypress(function(e){
@@ -210,12 +137,12 @@
 				phraseField.autocomplete("close");
 				if (phraseField.val()) {
 					$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
-		            				}
+		        }
 				// reset to page 1
-				dialog.dialog('option','LearnerAjaxProperties').pageNumber = 1;
+				dialog.data('LearnerAjaxProperties').pageNumber = 1;
 				showClassDialog('Learner');
-		            			}
-		            		});
+			}
+		});
 
 }
 
@@ -533,95 +460,77 @@
  * Sets up the sequence tab.
  */
 function initSequenceTab(){
+	var learnerGroupDialogContents = $('#learnerGroupDialogContents');
+	$('#learnerGroupDialogForceCompleteButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			selectedLearners = $('.dialogList div.dialogListItemSelected', dialog),
+			// go to "force complete" mode, similar to draggin user to an activity
+			activityId = dialog.data('ajaxProperties').data.activityID,
+			dropArea = sequenceCanvas.add('#completedLearnersContainer');
+		dropArea.css('cursor', 'url('
+						+ LAMS_URL + 'images/icons/' 
+						+ (selectedLearners.length > 1 ? 'group' : 'user')
+						+ '.png),pointer')
+				.one('click', function(event) {
+					var learners = [];
+					selectedLearners.each(function(){
+						var learner = $(this);
+						learners.push({
+							'id'     : learner.attr('userId'),
+							'name'   : learner.text()
+						});
+					});
+					dropArea.off('click').css('cursor', 'default');
+					forceComplete(activityId, learners, event.pageX, event.pageY);
+				});
+		dialog.modal('hide');
+		
+		var learnerNames = '';
+		selectedLearners.each(function(){
+			learnerNames += $(this).text() + ', ';
+		});
+		learnerNames = learnerNames.slice(0, -2);
+		alert(LABELS.FORCE_COMPLETE_CLICK.replace('[0]',learnerNames));
+	});
+	
+	$('#learnerGroupDialogViewButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+		if (selectedLearner.length == 1) {
+			// open pop up with user progress in the given activity
+			openPopUp(selectedLearner.attr('viewUrl'), "LearnActivity", 600, 800, true);
+		}
+	});
+	
+	$('#learnerGroupDialogEmailButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+		if (selectedLearner.length == 1) {
+			showEmailDialog(selectedLearner.attr('userId'));
+		}
+	});
+	
+	$('#learnerGroupDialogCloseButton', learnerGroupDialogContents).click(function(){
+		$('#learnerGroupDialog').modal('hide');
+	});
     // initialise lesson dialog
-	var learnerGroupDialog = $('#learnerGroupDialog').dialog({
+	var learnerGroupDialog = showDialog('learnerGroupDialog',{
 			'autoOpen'  : false,
-			'height'    : 390,
 			'width'     : 400,
-			'minWidth'  : 400,
-			'modal'     : true,
+			'height'	: 400,
 			'resizable' : true,
-			'show'      : 'fold',
-			'hide'      : 'fold',
 			'open'      : function(){
 				autoRefreshBlocked = true;
 				// until operator selects an user, buttons remain disabled
-				$('button.learnerGroupDialogSelectableButton').blur().removeClass('ui-state-hover')
-					.attr('disabled', 'disabled');
+				$('button.learnerGroupDialogSelectableButton').blur().prop('disabled', true);
 			},
 			'close' 	: function(){
 				autoRefreshBlocked = false;
-			},
-			'buttons' : [
-			             {
-			            	'text'   : LABELS.FORCE_COMPLETE_BUTTON,
-			            	'id'     : 'learnerGroupDialogForceCompleteButton',
-			            	'class'  : 'learnerGroupDialogSelectableButton',
-			            	'click'  : function() {
-			            		var selectedLearners = $('.dialogList div.dialogListItemSelected', this),
-			            			// go to "force complete" mode, similar to draggin user to an activity
-		            				activityId = $(this).dialog('option', 'ajaxProperties').data.activityID,
-			            			dropArea = sequenceCanvas.add('#completedLearnersContainer');
-		            			dropArea.css('cursor', 'url('
-				            					+ LAMS_URL + 'images/icons/' 
-				            					+ (selectedLearners.length > 1 ? 'group' : 'user')
-				            					+ '.png),pointer')
-				            			.one('click', function(event) {
-			            					var learners = [];
-			            					selectedLearners.each(function(){
-			            						var learner = $(this);
-			            						learners.push({
-			            							'id'     : learner.attr('userId'),
-			            							'name'   : learner.text()
-			            						});
-			            					});
-				            				dropArea.off('click').css('cursor', 'default');
-			            					forceComplete(activityId, learners, event.pageX, event.pageY);
-				            			});
-				            	$(this).dialog('close');
-				            	
-				            	var learnerNames = '';
-				            	selectedLearners.each(function(){
-				            		learnerNames += $(this).text() + ', ';
-				            	});
-				            	learnerNames = learnerNames.slice(0, -2);
-			            		alert(LABELS.FORCE_COMPLETE_CLICK.replace('[0]',learnerNames));
-							}
-			             },
-			             {
-			            	'text'   : LABELS.VIEW_LEARNER_BUTTON,
-			            	'id'     : 'learnerGroupDialogViewButton',
-			            	'class'  : 'learnerGroupDialogSelectableButton btn btn-sm btn-default',
-			            	'click'  : function() {
-			            		var selectedLearner = $('.dialogList div.dialogListItemSelected', this);
-			            		if (selectedLearner.length == 1) {
-			            			// open pop up with user progress in the given activity
-			            			openPopUp(selectedLearner.attr('viewUrl'), "LearnActivity", 600, 800, true);
-			            		}
-							}
-			             },
-			             {
-			            	'text'   : LABELS.EMAIL_BUTTON,
-			            	'id'     : 'learnerGroupDialogEmailButton',
-			            	'class'  : 'learnerGroupDialogSelectableButton btn btn-sm btn-default',
-			            	'click'  : function() {
-			            		var selectedLearner = $('.dialogList div.dialogListItemSelected', this);
-			            		if (selectedLearner.length == 1) {
-			            			showEmailDialog(selectedLearner.attr('userId'));
-			            		}
-			            	}	
-			             },
-			             {
-			            	'text'   : LABELS.CLOSE_BUTTON,
-			            	'id'     : 'learnerGroupDialogCloseButton',
-			            	'class'  : 'btn btn-sm btn-default',
-			            	'click'  : function() {
-								$(this).dialog('close');
-							} 
-			             }
-			]
-		});
+			}
+		}, false);
 	
+	$('.modal-body', learnerGroupDialog).empty().append(learnerGroupDialogContents.show());
+	
 	// search for users with the term the Monitor entered
 	$('.dialogSearchPhrase', learnerGroupDialog).autocomplete({
 			'source' : LAMS_URL + "monitoring/monitoring.do?method=autocomplete&scope=lesson&lessonID=" + lessonId,
@@ -633,7 +542,7 @@
 				phraseField.val(ui.item.label);
 				$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
 				// reset to page 1
-				dialog.dialog('option','ajaxProperties').pageNumber = 1;
+				dialog.data('ajaxProperties').data.pageNumber = 1;
 				showLearnerGroupDialog();
 				return false;
 			}
@@ -649,7 +558,7 @@
 					$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
 				}
 				// reset to page 1
-				dialog.dialog('option','ajaxProperties').pageNumber = 1;
+				dialog.data('ajaxProperties').data.pageNumber = 1;
 				showLearnerGroupDialog();
 			}
 		});
@@ -1212,7 +1121,7 @@
 		$('*[id^="act' + activity.id + 'attention"]', sequenceCanvas).click(function(event){
 			event.stopPropagation();
 			// switch to first tab where attention prompts are listed
-			$('#tabs').tabs('option', 'active', 0);     
+			doSelectTab(1); 
 		});
 	}
 }
@@ -1393,17 +1302,12 @@
 		fillClassList('Learner', false);
 		fillClassList('Monitor', true);
 	
-		$('#classDialog')
-			.dialog('option',
-				{
-				 'title' : LABELS.LESSON_EDIT_CLASS
-				})
-			.dialog('open');
+		$('#classDialog').modal('show');
 	} else {
 		// refresh after page shift or search
 		fillClassList(role, role.toLowerCase() == 'monitor');
 	}
-		}
+}
 
 
 /**
@@ -1414,7 +1318,7 @@
 		table = $('#class' + role + 'Table', dialog),
 		list = $('.dialogList', table).empty(),
 		searchPhrase = role == 'Learner' ? $('.dialogSearchPhrase', table).val().trim() : null,
-		ajaxProperties = dialog.dialog('option', role + 'AjaxProperties'),
+		ajaxProperties = dialog.data(role + 'AjaxProperties'),
 		users = null,
 		userCount = null;
 	
@@ -1434,7 +1338,7 @@
 		}
 			};
 	
-		dialog.dialog('option', role + 'AjaxProperties', ajaxProperties);
+		dialog.data(role + 'AjaxProperties', ajaxProperties);
 	}
 
 	// add properties for this call only
@@ -1783,7 +1687,7 @@
 function classClearSearchPhrase(){
 	var dialog = $('#classDialog');
 	$('.dialogSearchPhrase', dialog).val('').autocomplete("close");
-	dialog.dialog('option', 'LearnerAjaxProperties').data.pageNumber = 1;
+	dialog.data('LearnerAjaxProperties').data.pageNumber = 1;
 	showClassDialog('Learner');
 	$('.dialogSearchPhraseClear', dialog).css('visibility', 'hidden');
 }
@@ -1795,7 +1699,7 @@
 function learnerGroupClearSearchPhrase(){
 	var dialog = $('#learnerGroupDialog');
 	$('.dialogSearchPhrase', dialog).val('').autocomplete("close");
-	dialog.dialog('option', 'ajaxProperties').data.pageNumber = 1;
+	dialog.data('ajaxProperties').data.pageNumber = 1;
 	showLearnerGroupDialog();
 	$('.dialogSearchPhraseClear', dialog).css('visibility', 'hidden');
 }
@@ -1852,7 +1756,6 @@
  */
 function showLearnerGroupDialog(ajaxProperties, dialogTitle, allowSearch, allowForceComplete, allowView, allowEmail) {
 	var learnerGroupDialog = $('#learnerGroupDialog'),
-		learnerGroupDialogParent = learnerGroupDialog.parent(),
 		learnerGroupList = $('.dialogList', learnerGroupDialog).empty(),
 		// no parameters provided? just work on what we saved
 		isRefresh = ajaxProperties == null,
@@ -1861,10 +1764,10 @@
 	
 	if (isRefresh) {
 		// ajax and other properties were saved when the dialog was opened
-		ajaxProperties = learnerGroupDialog.dialog('option', 'ajaxProperties');
-		allowForceComplete = learnerGroupDialog.dialog('option', 'allowForceComplete');
-		allowView = learnerGroupDialog.dialog('option', 'allowView');
-		allowEmail = learnerGroupDialog.dialog('option', 'allowEmail');
+		ajaxProperties = learnerGroupDialog.data('ajaxProperties');
+		allowForceComplete = learnerGroupDialog.data('allowForceComplete');
+		allowView = learnerGroupDialog.data('allowView');
+		allowEmail = learnerGroupDialog.data('allowEmail');
 		allowSearch = $('#learnerGroupSearchRow', learnerGroupDialog).is(':visible');
 	} else {
 		// add few standard properties to ones provided by method calls
@@ -1899,7 +1802,7 @@
 	// close the dialog and refresh the main screen
 	if (!learnerCount && !searchPhrase) {
 		if (isRefresh) {
-			 learnerGroupDialog.dialog('close');
+			 learnerGroupDialog.modal('hide');
 		}
 		updateSequenceTab();
 		return;
@@ -1934,8 +1837,8 @@
 				var learnerDiv = $(this),
 					selectedSiblings = learnerDiv.siblings('div.dialogListItem.dialogListItemSelected');
 				    	// enable buttons
-			    $('button.learnerGroupDialogSelectableButton', learnerGroupDialogParent).prop('disabled', false)
-			    																		.removeClass('ui-state-disabled');
+			    $('button.learnerGroupDialogSelectableButton', learnerGroupDialog).prop('disabled', false);
+			    
 				if (allowForceComplete && (event.metaKey || event.ctrlKey)) {
 					var isSelected = learnerDiv.hasClass('dialogListItemSelected');
 					if (isSelected) {
@@ -1948,8 +1851,7 @@
 					}
 					if (selectedSiblings.length + (isSelected ? 0 : 1) > 1) {
 						// disable view button - only one learner can be viewed and multiple are selected
-						$('button#learnerGroupDialogViewButton', learnerGroupDialogParent).prop('disabled', true)
-																						  .addClass('ui-state-disabled');
+						$('button#learnerGroupDialogViewButton', learnerGroupDialog).prop('disabled', true);
 					}
 				} else {
 					learnerDiv.addClass('dialogListItemSelected');
@@ -1970,38 +1872,22 @@
 	
 	if (!isRefresh) {
 		// show buttons and labels depending on parameters
-		$('span#learnerGroupMultiSelectLabel, button#learnerGroupDialogForceCompleteButton', learnerGroupDialogParent)
+		$('span#learnerGroupMultiSelectLabel, button#learnerGroupDialogForceCompleteButton', learnerGroupDialog)
 		.css('display', allowForceComplete ? 'inline' : 'none');
-		$('button#learnerGroupDialogViewButton', learnerGroupDialogParent)
+		$('button#learnerGroupDialogViewButton', learnerGroupDialog)
 		.css('display', allowView ? 'inline' : 'none');
-		$('button#learnerGroupDialogEmailButton', learnerGroupDialogParent)
+		$('button#learnerGroupDialogEmailButton', learnerGroupDialog)
 		.css('display', allowEmail ? 'inline' : 'none');
-//
-//	showDialog('learnerGroupDialog', {
-//		'data' : {
-//			
-//		},
-//		'height' : 650,
-//		'width' : 850,
-//		'title' : dialogTitle,
-//		'open' : function() {
-//			$('.modal-body', this).empty().append($('#learnerGroupDialogContents'));
-//		},
-//		'beforeClose' : function(){
-//			$('#learnerGroupDialogContents').appendTo('body')
-//		}
-//	}, false);
 	
-	learnerGroupDialog.dialog('option', 
-			{
-			 'title' : dialogTitle,
-				 // save properties for refresh
-				 'ajaxProperties' : ajaxProperties,
-				 'allowForceComplete' : allowForceComplete,
-				 'allowView' : allowView,
-				 'allowEmail' : allowEmail
-			})
-		.dialog('open');	
+	$('.modal-title', learnerGroupDialog).text(dialogTitle);
+	learnerGroupDialog.data({
+		 // save properties for refresh
+		 'ajaxProperties' : ajaxProperties,
+		 'allowForceComplete' : allowForceComplete,
+		 'allowView' : allowView,
+		 'allowEmail' : allowEmail
+		})
+		.modal('show');	
 	}
 }
 
@@ -2038,7 +1924,7 @@
 function sortLearnerGroupList() {
 	var learnerGroupDialog = $('#learnerGroupDialog'),
 		sortIcon = $('td.sortCell span', learnerGroupDialog),
-		ajaxProperties = learnerGroupDialog.dialog('option', 'ajaxProperties'),
+		ajaxProperties = learnerGroupDialog.data('ajaxProperties'),
 		// reverse current order after click
 		orderAscending = !ajaxProperties.data.orderAscending;
 		
@@ -2060,7 +1946,7 @@
 	var classDialog = $('#classDialog'),
 		table = $('#class' + role + 'Table', classDialog),
 		sortIcon = $('td.sortCell span', table),
-		ajaxProperties = classDialog.dialog('option', role + 'AjaxProperties'),
+		ajaxProperties = classDialog.data(role + 'AjaxProperties'),
 		// reverse current order after click
 		orderAscending = !ajaxProperties.data.orderAscending;
 
@@ -2090,7 +1976,7 @@
 */
 function shiftLearnerGroupList(shift) {
 	var learnerGroupDialog = $('#learnerGroupDialog'),
-		ajaxProperties = learnerGroupDialog.dialog('option', 'ajaxProperties'),
+		ajaxProperties = learnerGroupDialog.data('ajaxProperties'),
 		pageNumber = ajaxProperties.data.pageNumber + shift;
 	if (pageNumber < 0) {
 		pageNumber = 1;
@@ -2105,7 +1991,7 @@
 */
 function shiftClassList(role, shift) {
 	var classDialog = $('#classDialog'),
-		ajaxProperties = classDialog.dialog('option', role + 'AjaxProperties'),
+		ajaxProperties = classDialog.data(role + 'AjaxProperties'),
 		pageNumber = ajaxProperties.data.pageNumber + shift;
 	if (pageNumber < 0) {
 		pageNumber = 1;