Index: lams_central/src/java/org/lamsfoundation/lams/web/IndexAction.java
===================================================================
RCS file: /usr/local/cvsroot/lams_central/src/java/org/lamsfoundation/lams/web/IndexAction.java,v
diff -u -r1.51 -r1.52
--- lams_central/src/java/org/lamsfoundation/lams/web/IndexAction.java	28 Mar 2012 16:22:54 -0000	1.51
+++ lams_central/src/java/org/lamsfoundation/lams/web/IndexAction.java	8 Jul 2013 13:29:40 -0000	1.52
@@ -69,6 +69,7 @@
  * @struts.action path="/index" validate="false"
  * 
  * @struts.action-forward name="main" path="/main.jsp"
+ * @struts.action-forward name="main2" path="/main2.jsp"
  * @struts.action-forward name="community" path=".community"
  * @struts.action-forward name="profile" path="/profile.do?method=view"
  * @struts.action-forward name="editprofile" path="/profile.do?method=edit"
@@ -159,7 +160,12 @@
 	List collapsedOrgDTOs = getUserManagementService().getActiveCourseIdsByUser(loggedInUser.getUserId(),
 		request.isUserInRole(Role.SYSADMIN));
 	request.setAttribute("collapsedOrgDTOs", collapsedOrgDTOs);
-
+	boolean newLayout = WebUtil.readBooleanParam(request, "newLayout", false);
+	if (newLayout) {
+	    User user = getUserManagementService().getUserByLogin(userDTO.getLogin());
+	    request.setAttribute("portraitUuid", user.getPortraitUuid());
+	    return mapping.findForward("main2");
+	} 
 	return mapping.findForward("main");
     }
 
Index: lams_central/web/main.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/main.jsp,v
diff -u -r1.62 -r1.63
--- lams_central/web/main.jsp	4 Jul 2013 14:10:16 -0000	1.62
+++ lams_central/web/main.jsp	8 Jul 2013 13:29:40 -0000	1.63
@@ -51,6 +51,18 @@
 		<script language="JavaScript" type="text/javascript" src="includes/javascript/groupDisplay.js"></script>	
 	</c:if>
 	<script language="javascript" type="text/javascript">
+		var LAMS_URL = '<lams:LAMSURL/>';
+		var LABELS = {
+				EMAIL_NOTIFICATIONS_TITLE : '<fmt:message key="index.emailnotifications" />',
+				REMOVE_LESSON_CONFIRM1 : '<fmt:message key="index.remove.lesson.confirm1"/>',
+				REMOVE_LESSON_CONFIRM2 : '<fmt:message key="index.remove.lesson.confirm2"/>',
+				SORTING_ENABLE : '<fmt:message key="label.enable.lesson.sorting"/>',
+				SORTING_DISABLE : '<fmt:message key="label.disable.lesson.sorting"/>'
+		}
+		
+		var orgsStateId = '<c:if test="${empty tab}">1</c:if><c:if test="${tab eq 'profile'}">3</c:if>';
+		
+	
 		<!--
 			jQuery(document).ready(function(){
 				<c:if test="${not empty collapsedOrgDTOs}">
@@ -329,7 +341,9 @@
 	</div>
 	<div id="footer">
 		<p>
-			<fmt:message key="msg.LAMS.version" /> <%=Configuration.get(ConfigurationKeys.VERSION)%>
+			<a style="color: #999999; text-decoration: none; border: none;" href="index.do?newLayout=true">
+				<fmt:message key="msg.LAMS.version" /> <%=Configuration.get(ConfigurationKeys.VERSION)%>
+			</a>
 			<a href="<lams:LAMSURL/>/www/copyright.jsp" target='copyright' onClick="openCopyRight()">
 				&copy; <fmt:message key="msg.LAMS.copyright.short" /> 
 			</a>
Index: lams_central/web/main2.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/Attic/main2.jsp,v
diff -u
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ lams_central/web/main2.jsp	8 Jul 2013 13:29:40 -0000	1.1
@@ -0,0 +1,354 @@
+<%@ page contentType="text/html; charset=utf-8" language="java"%>
+<%@ page import="org.lamsfoundation.lams.security.JspRedirectStrategy"%>
+<%@ page import="org.lamsfoundation.lams.web.util.HttpSessionManager"%>
+<%@ page import="org.lamsfoundation.lams.util.Configuration"%>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn"%>
+<%@ taglib uri="tags-tiles" prefix="tiles" %>
+
+<%-- If you change this file, remember to update the copy made for CNG-21 --%>
+
+<%JspRedirectStrategy.welcomePageStatusUpdate(request, response);%>
+<%HttpSessionManager.getInstance().updateHttpSessionByLogin(request.getSession(),request.getRemoteUser());%>
+<!DOCTYPE HTML>
+<lams:html>
+<lams:head>
+	<c:choose>
+	<c:when test="${page_direction == 'RTL'}">
+		<title><fmt:message key="index.welcome" /> :: <fmt:message key="title.lams"/></title>
+	</c:when>
+	<c:otherwise>
+		<title><fmt:message key="title.lams"/> :: <fmt:message key="index.welcome" /></title>
+	</c:otherwise>
+	</c:choose>
+	
+	<lams:css style="main" />
+	<link rel="icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<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">
+		#content-main {
+			padding: 10px;
+		}
+		
+		td#messageCell {
+			width: 100%;
+		}
+		
+		#message {
+			padding:8px 10px 10px 40px;
+			text-align: left;
+			background: url('images/css/edit.gif') no-repeat #d8e4f1 10px 8px;
+			border: 1px solid #3c78b5;
+		}
+		
+		#linksCell div {
+			margin: 0 5px 15px 0;
+		}
+		
+		.dialogContainer {
+			display: none;
+		}
+		
+		.dialogContainer iframe {
+			width: 100%;
+			height: 100%;
+			border: none;
+		}
+		
+		#mainContentTable td {
+			vertical-align: top;
+			padding: 0;
+		}
+		
+		#orgTabs {
+			padding-right: 10px;
+		}
+		
+		#orgTabs td {
+			padding: 0;
+			vertical-align: top;
+			font-family: verdana,arial,helvetica,sans-serif;
+		}
+		
+		#orgTabsPanelCell {
+			width: 100%;
+			border-left: none;
+		}
+		
+		.ui-tabs-vertical {
+			border: none;
+		}
+		
+		.ui-tabs-vertical .ui-tabs-nav {
+			background: none;
+			border: none;
+		}
+		
+		.ui-tabs-vertical .ui-tabs-nav li {
+			width: 100%;
+			margin-bottom: 7px;
+			border: 1px solid #C5DBEC;
+			padding: 3px 0 3px 0 !important;
+			
+		}
+		
+		.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
+			border: 1px solid #79B7E7;
+			border-right-width: 0px;
+			margin-bottom: 7px;
+			padding: 3px 0 3px 0 !important;
+		}	
+			
+		.ui-tabs-vertical .ui-tabs-nav li a {
+			display: block;
+			float: none;
+			border: none;
+		}
+		
+		td#actionAccord {
+			width: 20%;
+			padding-top: 1px;
+		}
+	</style>
+	<script language="JavaScript" type="text/javascript" src="includes/javascript/getSysInfo.js"></script>
+	<script language="javascript" type="text/javascript" src="loadVars.jsp"></script>
+	<script language="JavaScript" type="text/javascript" src="includes/javascript/openUrls.js"></script>
+	<script language="JavaScript" type="text/javascript" src="includes/javascript/jquery.js"></script>
+	<script language="JavaScript" type="text/javascript" src="includes/javascript/jquery-ui.js"></script>
+    <script language="JavaScript" type="text/javascript" src="includes/javascript/thickbox.js"></script>
+	<c:if test="${empty tab}">
+		<script language="JavaScript" type="text/javascript" src="includes/javascript/groupDisplay.js"></script>	
+	</c:if>
+	<script language="javascript" type="text/javascript">
+			var LAMS_URL = '<lams:LAMSURL/>';
+			var LABELS = {
+					EMAIL_NOTIFICATIONS_TITLE : '<fmt:message key="index.emailnotifications" />',
+					REMOVE_LESSON_CONFIRM1 : '<fmt:message key="index.remove.lesson.confirm1"/>',
+					REMOVE_LESSON_CONFIRM2 : '<fmt:message key="index.remove.lesson.confirm2"/>',
+					SORTING_ENABLE : '<fmt:message key="label.enable.lesson.sorting"/>',
+					SORTING_DISABLE : '<fmt:message key="label.disable.lesson.sorting"/>'
+			}
+			
+			var tabName = '${tab}';
+
+			$(document).ready(function(){
+				initMainPage();
+				
+				<%-- If it's the user's first login, display a dialog asking if tutorial videos should be shown --%>
+				<c:if test="${firstLogin}">
+					<c:url var="disableAllTutorialVideosUrl" value="tutorial.do">
+						<c:param name="method" value="disableAllTutorialVideos" />
+					</c:url>
+					if (!confirm("<fmt:message key='label.tutorial.disable.all' />")){
+				 		$.get("${disableAllTutorialVideosUrl}");
+					}
+				</c:if>
+			});
+
+	</script>
+</lams:head>
+<body class="my-courses">
+<div id="page-mycourses">
+	<div id="header-my-courses">
+		<div id="nav-right">
+			<div class="nav-box-right">
+				<c:choose>
+					<c:when test="${empty tab}">
+						<div class="tab-left-selected"></div>
+						<div class="tab-middle-selected"><a class="tab-middle-link-selected" style="border:0;" href="index.do"><fmt:message key="index.mycourses"/> </a></div>
+						<div class="tab-right-selected"></div>
+					</c:when>
+					<c:otherwise>
+						<div class="tab-left"></div>
+						<div class="tab-middle"><a class="tab-middle-link" style="border:0;" href="index.do"><fmt:message key="index.mycourses"/> </a></div>
+						<div class="tab-right"></div>
+					</c:otherwise>
+				</c:choose>
+			</div>
+			<c:forEach var="headerlink" items="${headerLinks}">
+			<div class="nav-box-right">
+				
+				<c:set var="tabLeft" value="tab-left"/>
+				<c:set var="tabMiddle" value="tab-middle"/>
+				<c:set var="tabRight" value="tab-right"/>	
+				<c:set var="highlight" value="false" />
+				<c:if test="${tab eq 'profile'}">
+					<c:if test="${headerlink.name eq 'index.myprofile'}">
+						<c:set var="tabLeft" value="tab-left-selected"/>
+						<c:set var="tabMiddle" value="tab-middle-selected"/>
+						<c:set var="tabRight" value="tab-right-selected"/>	
+						<c:set var="highlight" value="false" />
+					</c:if>
+				</c:if>
+				<c:if test="${tab eq 'community'}">
+					<c:if test="${headerlink.name eq 'index.community'}">
+						<c:set var="tabLeft" value="tab-left-selected"/>
+						<c:set var="tabMiddle" value="tab-middle-selected"/>
+						<c:set var="tabRight" value="tab-right-selected"/>	
+						<c:set var="highlight" value="false" />
+					</c:if>
+				</c:if>
+				<c:if test="${headerlink.name eq 'index.author'}">
+					<c:set var="tabLeft" value="tab-left-highlight"/>
+					<c:set var="tabMiddle" value="tab-middle-highlight"/>
+					<c:set var="tabRight" value="tab-right-highlight"/>	
+					<c:set var="highlight" value="true" />					
+				</c:if>
+				<c:if test="${headerlink.name eq 'index.planner'}">
+					<c:set var="tabLeft" value="tab-left-highlight"/>
+					<c:set var="tabMiddle" value="tab-middle-highlight"/>
+					<c:set var="tabRight" value="tab-right-highlight"/>	
+					<c:set var="highlight" value="true" />					
+				</c:if>
+	
+				<div class="${tabLeft}"></div>
+				<div class="${tabMiddle}">
+						<c:choose>
+						<c:when test="${fn:startsWith(headerlink.name,'index')}">
+							<lams:TabName url="${headerlink.url}" highlight="${highlight}"><fmt:message key="${headerlink.name}" /></lams:TabName>
+						</c:when>
+						<c:otherwise>
+							<lams:TabName url="${headerlink.url}" highlight="${highlight}"><c:out value="${headerlink.name}" /></lams:TabName>						
+						</c:otherwise>
+						</c:choose>
+				</div>
+				<div class="${tabRight}"></div>
+			</div>
+			</c:forEach>
+		</div>
+	</div>
+	<div id="content-main">
+		<table>
+			<tr>
+				<c:if test="${not empty portraitUuid}">
+					<td>
+						<img class="img-border" src="download/?uuid=${portraitUuid}&preferDownload=false" />
+					</td>
+				</c:if>
+				<td>
+					<fmt:message key="index.welcome" />
+					<lams:user property="firstName" />
+				</td>
+				<td id="messageCell">
+					<div id="message">Important annoucements might be posted here...</div>
+				</td>
+				<td id="linksCell">
+					<c:if test="${not empty adminLinks}">
+						<c:forEach var="adminlink" items="${adminLinks}">
+							<div>
+								<a title="<fmt:message key="${adminlink.name}"/>" href='<c:out value="${adminlink.url}"/>' class="button">
+									<fmt:message key="${adminlink.name}"/>
+								</a>
+							</div> 
+						</c:forEach>
+					</c:if>
+					<div>
+						<a title="<fmt:message key="index.refresh.hint"/>" href="javascript:refresh()" class="button">
+							<fmt:message key="index.refresh" />
+						</a>
+					</div>
+					<div>
+						<a href="home.do?method=logout" onClick="closeAllChildren()" class="button">
+							<fmt:message key="index.logout" />
+						</a>
+					</div>
+				</td>
+			</tr>
+		</table>
+		<c:if test="${empty tab}">
+			<table id="mainContentTable" cellpadding="0" cellspacing="0">
+				<tr>
+					<td>
+						<table id="orgTabs" cellpadding="0" cellspacing="0">
+							<tr>
+								<td>
+									<ul>
+										<c:forEach items="${collapsedOrgDTOs}" var="dto">
+											<li id="orgTabHeader-${dto.orgId}" class="orgTabHeader">
+												<a href="#orgTab-${dto.orgId}"></a>
+											</li>
+										</c:forEach>
+									</ul>
+								</td>
+								<td id="orgTabsPanelCell" class="ui-widget-content ui-corner-all">
+									<c:forEach items="${collapsedOrgDTOs}" var="dto">
+										<div id="orgTab-${dto.orgId}" class="orgTab"></div>
+									</c:forEach>
+								</td>
+							</tr>
+						</table>
+					</td>
+					<td id="actionAccord">
+							<h3>New lessons</h3>
+							<div>New lessons content panel<br />
+							TEXT TEXT TEXT TEXT<br />
+							TEXT TEXT TEXT TEXT<br />
+							TEXT TEXT TEXT TEXT<br />
+							TEXT TEXT TEXT TEXT<br />
+							TEXT TEXT TEXT TEXT<br />
+							</div>
+							<h3>Recent activity</h3>
+							<div>Recent activity content panel</div>
+							<h3>Gradebooks</h3>
+							<div>Gradebooks content panel</div>
+							<h3>Announcements</h3>
+							<div>Announcements content panel</div>
+						
+					</td>
+				</tr>
+			</table>
+			
+			<%--
+			<c:forEach items="${collapsedOrgDTOs}" var="dto">
+				<div id="<c:out value="${dto.orgId}"/>" style="display:none" class="course-bg">
+					<c:if test="${dto.collapsed}">header</c:if><c:if test="${!dto.collapsed}">group</c:if>
+				</div>
+			</c:forEach>
+			<c:if test="${empty collapsedOrgDTOs}">
+				<c:if test="${not empty showGroups}">
+					<div class="course-bg"><div class="row"><div class="mycourses-right-buttons">
+						<a class="show-all-groups-button" onclick="document.location.href='index.do?groups=show';"><fmt:message key="label.show.groups"/></a>
+					</div></div></div>
+				</c:if>
+				<c:if test="${empty showGroups}">
+					<p class="align-left"><fmt:message key="msg.groups.empty" /></p>
+				</c:if>
+			</c:if>
+			 --%>
+		</c:if>
+		<c:if test="${tab eq 'profile'}">
+			<tiles:insert attribute="profile" />
+		</c:if>
+		<c:if test="${tab eq 'community'}">
+			<tiles:insert attribute="community" />
+		</c:if>
+	</div>
+	<div id="footer">
+		<p>
+			<a style="color: #999999; text-decoration: none; border: none;" href="index.do?newLayout=false">
+				<fmt:message key="msg.LAMS.version" /> <%=Configuration.get(ConfigurationKeys.VERSION)%>
+			</a>
+			<a href="<lams:LAMSURL/>/www/copyright.jsp" target='copyright' onClick="openCopyRight()">
+				&copy; <fmt:message key="msg.LAMS.copyright.short" /> 
+			</a>
+		</p>
+	</div>
+</div>
+
+<div id="addLessonDialog" class="dialogContainer">
+	<iframe id="addLessonFrame"></iframe>
+</div>
+<div id="monitorDialog" class="dialogContainer">
+	<iframe id="monitorFrame"></iframe>
+</div>
+<div id="notificationsDialog" class="dialogContainer">
+	<iframe id="notificationsFrame"></iframe>
+</div>
+
+</body>
+</lams:html>
\ No newline at end of file
Index: lams_central/web/includes/javascript/groupDisplay.js
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/groupDisplay.js,v
diff -u -r1.18 -r1.19
--- lams_central/web/includes/javascript/groupDisplay.js	4 Jul 2013 14:10:16 -0000	1.18
+++ lams_central/web/includes/javascript/groupDisplay.js	8 Jul 2013 13:29:40 -0000	1.19
@@ -1,207 +1,404 @@
-	<!--				
-				function initLoadGroup(element, stateId, display) {
-					jQuery(element).load(
-						"displayGroup.do",
-						{
-							display: display,
-							stateId: stateId, 
-							orgId: jQuery(element).attr("id")
+function initMainPage() {
+	$('#orgTabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix')
+		.find('li').removeClass('ui-corner-top').addClass('ui-corner-left');
+	
+	var stateId = tabName == 'profile' ? 3 : 1; 
+	$("div.orgTab").each(function() {
+		var orgTab = $(this);
+		var orgId = orgTab.attr("id").split('-')[1];
+		
+		orgTab.load(
+			"displayGroup.do",
+			{
+				display : 'group',
+				stateId : stateId,
+				orgId   : orgId
+			},
+			function() {
+				$('#orgTabHeader-' + orgId + ' a').text($('.j-group-header', orgTab).text());
+				$('.mycourses-left-buttons', orgTab).remove();
+				toggleGroupContents(orgTab, stateId);
+				$("a[class*='thickbox']", orgTab).each(function() {
+					tb_init(this);
+				});
+				initMoreActions(orgTab);
+			});
+	});
+	
+	$("#actionAccord").accordion({
+		'heightStyle' : 'content'
+	});
+	
+	$(".split-menu-button li em")
+			.live(
+					"click",
+					function(event) {
+						var hidden = $(this).parents("li").children("ul").is(
+								":hidden");
+						$(this).parents("li").children("ul").hide();
+						$(this).parents("li").children("a").removeClass(
+								"zoneCur");
+
+						if (hidden) {
+							$(this).parents("li").children("ul").toggle()
+									.parents("li").children("a").addClass(
+											"zoneCur");
+						}
+
+						event.stopPropagation();
+					});
+
+	$("html").click(function() {
+		$(".split-menu-button>ul>li>ul").hide();
+	});
+
+	// initialise lesson dialog
+	$('#addLessonDialog')
+			.dialog(
+					{
+						'autoOpen' : false,
+						'height' : 600,
+						'width' : 800,
+						'modal' : true,
+						'resizable' : false,
+						'hide' : 'fold',
+						'open' : function() {
+							// load contents after opening the dialog
+							$('#addLessonFrame')
+									.attr(
+											'src',
+											LAMS_URL
+													+ 'home.do?method=addLesson&organisationID='
+													+ $(this).dialog('option',
+															'orgID'));
 						},
-						function() {
-							if (display == 'header') {
-								jQuery("span.j-group-icon", element).html("<img src='images/tree_closed.gif'/>");
-							} else if (display == 'group') {
-								jQuery("span.j-group-icon", element).html("<img src='images/tree_open.gif'/>");
+						'close' : function() {
+							// refresh if lesson was added
+							if ($(this).dialog('option', 'refresh')) {
+								refresh();
 							}
-							toggleGroupContents(element, stateId);
-							jQuery(element).css("display", "block");
-							jQuery("a[class*='thickbox']",element).each(function(){
-								tb_init(this);
-							});
-							initMoreActions(element);
 						}
-					);
-				}
-			
-				function toggleGroupContents(element, stateId) {
-					jQuery("a.j-group-header, span.j-group-icon", element).click(function() {
-						var row = jQuery("div.row", element);
-						var courseBg = jQuery(row).parent("div.course-bg");
-						var orgId = jQuery(courseBg).attr("id");
-						var course = jQuery(row).nextAll("div.j-course-contents");
-						var groupIcon = jQuery("span.j-group-icon", element);
-						if (jQuery(course).html() == null) {
-							loadGroupContents(courseBg, stateId);
-							saveCollapsed(orgId, "false");
-							jQuery(groupIcon).html("<img src='images/tree_open.gif'/>");
-						} else {
-							var display = course.css("display");
-							if (jQuery.browser.msie && jQuery.browser.version == '6.0') {
-								course.slideToggle("fast");
+					// 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,
+						'hide' : 'fold',
+						'open' : function() {
+							// load contents after opening the dialog
+							$('#monitorFrame')
+									.attr(
+											'src',
+											LAMS_URL
+													+ '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();
+
+	// initialise notifications dialog
+	$('#notificationsDialog')
+			.dialog(
+					{
+						'autoOpen' : false,
+						'height' : 600,
+						'width' : 850,
+						'modal' : true,
+						'resizable' : false,
+						'hide' : 'fold',
+						'title' : LABELS.EMAIL_NOTIFICATIONS_TITLE,
+						'open' : function() {
+							var lessonID = $(this).dialog('option', 'lessonID');
+							// if lesson ID is given, use lesson view; otherwise
+							// use course view
+							if (lessonID) {
+								// load contents after opening the dialog
+								$('#notificationsFrame')
+										.attr(
+												'src',
+												LAMS_URL
+														+ 'monitoring/emailNotifications.do?method=getLessonView&lessonID='
+														+ lessonID);
 							} else {
-								course.toggle("fast");
+								var orgID = $(this).dialog('option', 'orgID');
+								$('#notificationsFrame')
+										.attr(
+												'src',
+												LAMS_URL
+														+ 'monitoring/emailNotifications.do?method=getCourseView&organisationID='
+														+ orgID);
 							}
-							if (display == "none") {
-								saveCollapsed(orgId, "false");
-								jQuery(groupIcon).html("<img src='images/tree_open.gif'/>");
-							} else if (display == "block") {
-								saveCollapsed(orgId, "true");
-								jQuery(groupIcon).html("<img src='images/tree_closed.gif'/>");
-							}
+						},
+						'close' : function() {
+							$('#notificationsFrame').attr('src', null);
 						}
 					});
+}
+
+function initLoadGroup(element, stateId, display) {
+	jQuery(element).load(
+			"displayGroup.do",
+			{
+				display : display,
+				stateId : stateId,
+				orgId : jQuery(element).attr("id")
+			},
+			function() {
+				if (display == 'header') {
+					jQuery("span.j-group-icon", element).html(
+							"<img src='images/tree_closed.gif'/>");
+				} else if (display == 'group') {
+					jQuery("span.j-group-icon", element).html(
+							"<img src='images/tree_open.gif'/>");
 				}
-				
-				function saveCollapsed(orgId, collapsed) {
-					jQuery.ajax({
-						url: "servlet/updateCollapsedGroup",
-						data: {
-							orgId: orgId, 
-							collapsed: collapsed
-						}
+				toggleGroupContents(element, stateId);
+				jQuery(element).css("display", "block");
+				jQuery("a[class*='thickbox']", element).each(function() {
+					tb_init(this);
+				});
+				initMoreActions(element);
+			});
+}
+
+function toggleGroupContents(element, stateId) {
+	jQuery("a.j-group-header, span.j-group-icon", element).click(function() {
+		var row = jQuery("div.row", element);
+		var courseBg = jQuery(row).parent("div.course-bg");
+		var orgId = jQuery(courseBg).attr("id");
+		var course = jQuery(row).nextAll("div.j-course-contents");
+		var groupIcon = jQuery("span.j-group-icon", element);
+		if (jQuery(course).html() == null) {
+			loadGroupContents(courseBg, stateId);
+			saveCollapsed(orgId, "false");
+			jQuery(groupIcon).html("<img src='images/tree_open.gif'/>");
+		} else {
+			var display = course.css("display");
+			if (jQuery.browser.msie && jQuery.browser.version == '6.0') {
+				course.slideToggle("fast");
+			} else {
+				course.toggle("fast");
+			}
+			if (display == "none") {
+				saveCollapsed(orgId, "false");
+				jQuery(groupIcon).html("<img src='images/tree_open.gif'/>");
+			} else if (display == "block") {
+				saveCollapsed(orgId, "true");
+				jQuery(groupIcon).html("<img src='images/tree_closed.gif'/>");
+			}
+		}
+	});
+}
+
+function saveCollapsed(orgId, collapsed) {
+	jQuery.ajax({
+		url : "servlet/updateCollapsedGroup",
+		data : {
+			orgId : orgId,
+			collapsed : collapsed
+		}
+	});
+}
+
+function loadGroupContents(courseBg, stateId) {
+	var orgId = jQuery(courseBg).attr("id");
+	jQuery.ajax({
+		url : "displayGroup.do",
+		data : {
+			orgId : orgId,
+			stateId : stateId,
+			display : 'contents'
+		},
+		success : function(html) {
+			jQuery(courseBg).append(html);
+			// unregister and re-register thickbox for this
+			// group in order to avoid double
+			// registration of thickbox for existing elements
+			// (i.e. group 'add lesson' link)
+			$('a.thickbox' + jQuery(courseBg).attr("id")).unbind("click");
+			tb_init('a.thickbox' + jQuery(courseBg).attr("id"));
+		}
+	});
+}
+
+function initMoreActions(element) {
+
+	var id = jQuery(element).attr("id");
+	var menuSelector = "a#more-actions-button-" + id;
+	var ulSelector = "ul#more-actions-list-" + id;
+
+	$(menuSelector).click(
+			function() {
+				// slide up all other menus
+				$("ul[id^=more-actions-list-]:visible:not(" + ulSelector + ")")
+						.slideUp("fast");
+
+				// show this menu
+				$(ulSelector).css("top",
+						$(this).position().top + this.offsetHeight);
+				$(ulSelector).css("left", $(this).position().left);
+				$(ulSelector).slideToggle("fast");
+				return false;
+			});
+
+	$(window).resize(
+			function() {
+				if ($(menuSelector).length == 0)
+					return;
+
+				$(ulSelector).css(
+						"top",
+						$(menuSelector).position().top
+								+ $(menuSelector).offsetHeight);
+				$(ulSelector).css("left", $(menuSelector).position().left);
+			});
+
+}
+
+function makeOrgSortable(orgId) {
+	var org = jQuery("div.course-bg#" + orgId);
+	if (jQuery("div.j-lessons", org).size() > 0) {
+		var jLessons = jQuery("div.j-lessons#" + orgId + "-lessons");
+		var jLessonsTable = jQuery("table.lesson-table tbody", jLessons);
+		makeSortable(jLessonsTable);
+		jQuery("div.j-subgroup-lessons>table.lesson-table tbody", org).each(
+				function() {
+					makeSortable(jQuery(this));
+				});
+		jQuery("div.mycourses-right-buttons", jLessons).html(
+				"<a class=\"sorting\" onclick=\"makeOrgUnsortable(" + orgId
+						+ ")\" title=\"" + LABELS.SORTING_DISABLE
+						+ "\"><img src=\"images/sorting_enabled.gif\"></a>");
+	}
+}
+
+function makeOrgUnsortable(orgId) {
+	var org = jQuery("div.course-bg#" + orgId);
+	var jLessons = jQuery("div.j-lessons#" + orgId + "-lessons");
+	var jLessonsTable = jQuery("table.lesson-table tbody", jLessons);
+	jLessonsTable.sortable("destroy");
+	jQuery("div.j-subgroup-lessons>table.lesson-table tbody", org).each(
+			function() {
+				jQuery(this).sortable("destroy");
+			});
+	jQuery("div.mycourses-right-buttons", jLessons).html(
+			"<a class=\"sorting\" onclick=\"makeOrgSortable(" + orgId
+					+ ")\" title=\"" + LABELS.SORTING_ENABLE
+					+ "\"><img src=\"images/sorting_disabled.gif\"></a>");
+}
+
+function makeSortable(element) {
+	jQuery(element).sortable(
+			{
+				axis : "y",
+				delay : 100,
+				tolerance : 'pointer',
+				helper : function(e, tr) {
+					var $originals = tr.children();
+					var $helper = tr.clone();
+					$helper.children().each(function(index) {
+						// Set helper cell sizes to match the original
+						// sizes
+						$(this).width($originals.eq(index).width())
 					});
-				}
-				
-				function loadGroupContents(courseBg, stateId) {
-					var orgId = jQuery(courseBg).attr("id");
+					return $helper;
+				},
+				forceHelperSize : true,
+				forcePlaceholderSize : true,
+				containment : 'parent',
+				stop : function() {
+					var ids = jQuery(this).sortable('toArray');
+
+					var jLessonsId = jQuery(this).parents(
+							"div[class$='lessons']").attr("id");
+					var dashIndex = jLessonsId.indexOf("-");
+					var orgId = (dashIndex > 0 ? jLessonsId.substring(0,
+							dashIndex) : jLessonsId);
+
 					jQuery.ajax({
-						url: "displayGroup.do",
-						data: {
-							orgId: orgId, 
-							stateId: stateId,
-							display: 'contents'
+						url : "servlet/saveLessonOrder",
+						data : {
+							orgId : orgId,
+							ids : ids.join(",")
 						},
-						success: function(html) {
-							jQuery(courseBg).append(html);
-							// unregister and re-register thickbox for this
-							// group in order to avoid double
-							// registration of thickbox for existing elements
-							// (i.e. group 'add lesson' link)
-							$('a.thickbox'+jQuery(courseBg).attr("id")).unbind("click");
-							tb_init('a.thickbox'+jQuery(courseBg).attr("id"));
+						error : function(a, b) {
+							refresh();
 						}
 					});
 				}
-				
-				function initMoreActions(element) {
-				    
-					var id = jQuery(element).attr("id");
-					var menuSelector = "a#more-actions-button-" + id;
-					var ulSelector = "ul#more-actions-list-" + id;
-				    
-				    $(menuSelector).click( function() {
-				    	// slide up all other menus
-		    		    $("ul[id^=more-actions-list-]:visible:not(" + ulSelector + ")").slideUp("fast");
-		    		    				    	
-				    	// show this menu
-		    		    $(ulSelector).css("top", $(this).position().top + this.offsetHeight);
-		    		    $(ulSelector).css("left", $(this).position().left);
-				    	$(ulSelector).slideToggle("fast"); return false;
-				    });
-				    
-				    $(window).resize(function(){
-				    	if ($(menuSelector).length == 0) return;
-				    	
-				    	$(ulSelector).css("top", $(menuSelector).position().top + $(menuSelector).offsetHeight);
-				    	$(ulSelector).css("left", $(menuSelector).position().left);
-			    	});
+			}).disableSelection();
+}
 
-				}
-				
-				function makeOrgSortable(orgId) {
-					var org = jQuery("div.course-bg#"+orgId);
-					if (jQuery("div.j-lessons", org).size() > 0) {
-						var jLessons = jQuery("div.j-lessons#"+orgId+"-lessons");
-						var jLessonsTable = jQuery("table.lesson-table tbody",jLessons);
-						makeSortable(jLessonsTable);
-						jQuery("div.j-subgroup-lessons>table.lesson-table tbody", org).each(function() {
-							makeSortable(jQuery(this));
-						});
-						jQuery("div.mycourses-right-buttons", jLessons).html("<a class=\"sorting\" onclick=\"makeOrgUnsortable(" + orgId + ")\" title=\""+getDisableSortingText()+"\"><img src=\"images/sorting_enabled.gif\"></a>");
+function showMonitorLessonDialog(lessonID) {
+	$("#monitorDialog").dialog('option', 'lessonID', lessonID).dialog('open');
+}
+
+function showAddLessonDialog(orgID) {
+	$("#addLessonDialog").dialog('option', 'orgID', orgID).dialog('open');
+}
+
+function showNotificationsDialog(organisationID, lessonID) {
+	$("#notificationsDialog").dialog('option', {
+		'orgID' : organisationID,
+		'lessonID' : lessonID
+	}).dialog('open');
+}
+
+function closeAddLessonDialog(refresh) {
+	$('#addLessonFrame').attr('src', null);
+	// was the dialog just closed or a new lesson really added?
+	// if latter, refresh the list
+	$("#addLessonDialog").dialog('option', 'refresh', refresh ? true : false)
+			.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');
+}
+
+function removeLesson(lessonID) {
+	if (confirm(LABELS.REMOVE_LESSON_CONFIRM1)) {
+		if (confirm(LABELS.REMOVE_LESSON_CONFIRM2)) {
+			$.ajax({
+				async : false,
+				url : LAMS_URL + "monitoring/monitoring.do",
+				data : "method=removeLessonJson&lessonID=" + lessonID,
+				type : "post",
+				success : function(json) {
+					if (json.removeLesson == "true") {
+						refresh();
+					} else {
+						alert(json.removeLesson);
 					}
 				}
-				
-				function makeOrgUnsortable(orgId) {
-					var org = jQuery("div.course-bg#"+orgId);
-					var jLessons = jQuery("div.j-lessons#"+orgId+"-lessons");
-					var jLessonsTable = jQuery("table.lesson-table tbody",jLessons);
-					jLessonsTable.sortable("destroy");
-					jQuery("div.j-subgroup-lessons>table.lesson-table tbody", org).each(function() {
-						jQuery(this).sortable("destroy");
-					});
-					jQuery("div.mycourses-right-buttons", jLessons).html("<a class=\"sorting\" onclick=\"makeOrgSortable(" + orgId + ")\" title=\""+getEnableSortingText()+"\"><img src=\"images/sorting_disabled.gif\"></a>");
-				}
-				
-				function makeSortable(element) {
-					jQuery(element).sortable({
-						axis: "y",
-						delay: 100,
-						tolerance: 'pointer',
-						helper: function(e, tr) {
-						    var $originals = tr.children();
-						    var $helper = tr.clone();
-						    $helper.children().each(function(index) {
-						      // Set helper cell sizes to match the original
-								// sizes
-						      $(this).width($originals.eq(index).width())
-						    });
-						    return $helper;
-						},
-						forceHelperSize: true,
-						forcePlaceholderSize: true,
-						containment: 'parent',
-						stop: function() {
-							var ids = jQuery(this).sortable('toArray');
-							
-							var jLessonsId = jQuery(this).parents("div[class$='lessons']").attr("id");
-							var dashIndex = jLessonsId.indexOf("-");
-							var orgId = (dashIndex>0 ? jLessonsId.substring(0, dashIndex) : jLessonsId);
-							
-							jQuery.ajax({
-								url: "servlet/saveLessonOrder",
-								data: {
-									orgId: orgId, 
-									ids: ids.join(",")
-								},
-								error: function(a,b) {
-									refresh();
-								}
-							});
-						}
-					}).disableSelection();;
-				}
-				
-				function showMonitorLessonDialog(lessonID){
-					$("#monitorDialog").dialog('option', 'lessonID', lessonID)
-										 .dialog('open');
-				}
-				
-				function showAddLessonDialog(orgID){
-					$("#addLessonDialog").dialog('option', 'orgID', orgID)
-										 .dialog('open');
-				}
-				
-				function showNotificationsDialog(organisationID, lessonID){
-					$("#notificationsDialog").dialog('option', {
-							'orgID' : organisationID,
-							'lessonID': lessonID
-						}).dialog('open');
-				}
-				
-				function closeAddLessonDialog(refresh) {
-					$('#addLessonFrame').attr('src', null);
-					// was the dialog just closed or a new lesson really added?
-					// if latter, refresh the list
-					$("#addLessonDialog").dialog('option', 'refresh', refresh ? true : false)
-										 .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');
-				}
-				
-	// -->
+			});
+		}
+	}
+}
+
+function refresh() {
+	document.location.reload();
+}
+
+function closeWizard() {
+	setTimeout(refresh, 1000);
+	tb_remove();
+}
\ No newline at end of file