Index: lams_central/web/main.jsp
===================================================================
diff -u -r481d8af8e0dfa898a103943c6088b753f36e6e36 -rc33d82bf97152099b7a309a156ec2707239b622c
--- lams_central/web/main.jsp	(.../main.jsp)	(revision 481d8af8e0dfa898a103943c6088b753f36e6e36)
+++ lams_central/web/main.jsp	(.../main.jsp)	(revision c33d82bf97152099b7a309a156ec2707239b622c)
@@ -11,267 +11,384 @@
 <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: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 href="/lams/includes/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
-	<link href="/lams/css/defaultHTML_learner.css" rel="stylesheet" type="text/css">
-	
 	<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/index.css" type="text/css" media="screen">
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<lams:css style="main"/>
+	<link rel="stylesheet" href="/lams/includes/font-awesome/css/font-awesome.css" type="text/css">
+	<link rel="stylesheet" href="/lams/css/jquery.tablesorter.theme.bootstrap.css">
+	<link rel="stylesheet" href="/lams/css/defaultHTML_learner.css" type="text/css">
+	<link rel="stylesheet" href="/lams/css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/lams/css/index.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/lams/css/main.css" type="text/css" media="screen">
 
 	<script type="text/javascript" src="includes/javascript/getSysInfo.js"></script>
 	<script type="text/javascript" src="loadVars.jsp"></script>
 	<script type="text/javascript" src="includes/javascript/openUrls.js"></script>
 	<script type="text/javascript" src="includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="includes/javascript/jquery.tablesorter.js"></script>
+	<script type="text/javascript" src="includes/javascript/jquery.tablesorter-pager.js"></script>
+	<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="/lams/includes/javascript/bootstrap.min.js"></script>
-	<script type="text/javascript" src="/lams/includes/javascript/jquery.ui.touch-punch.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>
+	<script type="text/javascript" src="includes/javascript/main.js"></script>
 	<script type="text/javascript">
-			var LAMS_URL = '<lams:LAMSURL/>',
-			
-				decoderDiv = $('<div />'),
-				LABELS = {
-					<fmt:message key="index.emailnotifications" var="EMAIL_NOTIFICATIONS_TITLE_VAR"/>
-					EMAIL_NOTIFICATIONS_TITLE : '<c:out value="${EMAIL_NOTIFICATIONS_TITLE_VAR}" />',
-					<fmt:message key="index.remove.lesson.confirm1" var="REMOVE_LESSON_CONFIRM1_VAR"/>
-					REMOVE_LESSON_CONFIRM1 : decoderDiv.html('<c:out value="${REMOVE_LESSON_CONFIRM1_VAR}" />').text(),
-					<fmt:message key="index.remove.lesson.confirm2" var="REMOVE_LESSON_CONFIRM2_VAR"/>
-					REMOVE_LESSON_CONFIRM2 : decoderDiv.html('<c:out value="${REMOVE_LESSON_CONFIRM2_VAR}" />').text(),
-					<fmt:message key="label.enable.lesson.sorting" var="SORTING_ENABLE_VAR"/>
-					SORTING_ENABLE : '<c:out value="${SORTING_ENABLE_VAR}" />',
-					<fmt:message key="label.disable.lesson.sorting" var="SORTING_DISABLE_VAR"/>
-					SORTING_DISABLE : '<c:out value="${SORTING_DISABLE_VAR}" />',
-					<fmt:message key="index.addlesson" var="ADD_LESSON_TITLE_VAR"/>
-					ADD_LESSON_TITLE : '<c:out value="${ADD_LESSON_TITLE_VAR}" />',
-					<fmt:message key="index.single.activity.lesson.title" var="SINGLE_ACTIVITY_LESSON_TITLE_VAR"/>
-					SINGLE_ACTIVITY_LESSON_TITLE : '<c:out value="${SINGLE_ACTIVITY_LESSON_TITLE_VAR}" />',
-					<fmt:message key="index.gradebook.course.title" var="GRADEBOOK_COURSE_TITLE_VAR"/>
-					GRADEBOOK_COURSE_TITLE : '<c:out value="${GRADEBOOK_COURSE_TITLE_VAR}" />',
-					<fmt:message key="index.gradebook.lesson.title" var="GRADEBOOK_LESSON_TITLE_VAR"/>
-					GRADEBOOK_LESSON_TITLE : '<c:out value="${GRADEBOOK_LESSON_TITLE_VAR}" />',
-					<fmt:message key="index.gradebook.learner.title" var="GRADEBOOK_LEARNER_TITLE_VAR"/>
-					GRADEBOOK_LEARNER_TITLE : '<c:out value="${GRADEBOOK_LEARNER_TITLE_VAR}" />',
-					<fmt:message key="index.conditions.title" var="CONDITIONS_TITLE_VAR"/>
-					CONDITIONS_TITLE : '<c:out value="${CONDITIONS_TITLE_VAR}" />',
-					<fmt:message key="index.search.lesson.title" var="SEARCH_LESSON_TITLE_VAR"/>
-					SEARCH_LESSON_TITLE : '<c:out value="${SEARCH_LESSON_TITLE_VAR}" />',
-					<fmt:message key="index.course.groups.title" var="COURSE_GROUPS_TITLE_VAR"/>
-					COURSE_GROUPS_TITLE : '<c:out value="${COURSE_GROUPS_TITLE_VAR}" />',
-					<fmt:message key="authoring.fla.navigate.away.confirm" var="NAVIGATE_AWAY_CONFIRM_VAR"/>
-					NAVIGATE_AWAY_CONFIRM : decoderDiv.html('<c:out value="${NAVIGATE_AWAY_CONFIRM_VAR}" />').text(),
-					<fmt:message key="index.monitoring.title" var="MONITORING_TITLE_VAR"/>
-					MONITORING_TITLE : '<c:out value="${MONITORING_TITLE_VAR}" />',
-					<fmt:message key="label.private.notifications.title" var="PRIVATE_NOTIFICATIONS_TITLE_VAR"/>
-					PRIVATE_NOTIFICATIONS_TITLE : '<c:out value="${PRIVATE_NOTIFICATIONS_TITLE_VAR}" />',
-					<fmt:message key="label.private.notifications.messages" var="PRIVATE_NOTIFICATIONS_MESSAGES_VAR"/>
-					PRIVATE_NOTIFICATIONS_MESSAGES : '<c:out value="${PRIVATE_NOTIFICATIONS_MESSAGES_VAR}" />',
-					<fmt:message key="label.private.notifications.read" var="PRIVATE_NOTIFICATIONS_READ_VAR"/>
-					PRIVATE_NOTIFICATIONS_READ : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_VAR}" />',
-					<fmt:message key="label.private.notifications.read.hint" var="PRIVATE_NOTIFICATIONS_READ_HINT_VAR"/>
-					PRIVATE_NOTIFICATIONS_READ_HINT : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_HINT_VAR}" />',
-					<fmt:message key="label.private.notifications.read.all.hint" var="PRIVATE_NOTIFICATIONS_READ_ALL_HINT_VAR"/>
-					PRIVATE_NOTIFICATIONS_READ_ALL_HINT : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_ALL_HINT_VAR}" />',
-				},
-				
-				tabName = '${tab}',
-				stateId = tabName == 'profile' ? 3 : 1;
+		var LAMS_URL = '<lams:LAMSURL/>',	
+			decoderDiv = $('<div />'),
+			LABELS = {
+				<fmt:message key="index.emailnotifications" var="EMAIL_NOTIFICATIONS_TITLE_VAR"/>
+				EMAIL_NOTIFICATIONS_TITLE : '<c:out value="${EMAIL_NOTIFICATIONS_TITLE_VAR}" />',
+				<fmt:message key="index.remove.lesson.confirm1" var="REMOVE_LESSON_CONFIRM1_VAR"/>
+				REMOVE_LESSON_CONFIRM1 : decoderDiv.html('<c:out value="${REMOVE_LESSON_CONFIRM1_VAR}" />').text(),
+				<fmt:message key="index.remove.lesson.confirm2" var="REMOVE_LESSON_CONFIRM2_VAR"/>
+				REMOVE_LESSON_CONFIRM2 : decoderDiv.html('<c:out value="${REMOVE_LESSON_CONFIRM2_VAR}" />').text(),
+				<fmt:message key="label.enable.lesson.sorting" var="SORTING_ENABLE_VAR"/>
+				SORTING_ENABLE : '<c:out value="${SORTING_ENABLE_VAR}" />',
+				<fmt:message key="label.disable.lesson.sorting" var="SORTING_DISABLE_VAR"/>
+				SORTING_DISABLE : '<c:out value="${SORTING_DISABLE_VAR}" />',
+				<fmt:message key="index.addlesson" var="ADD_LESSON_TITLE_VAR"/>
+				ADD_LESSON_TITLE : '<c:out value="${ADD_LESSON_TITLE_VAR}" />',
+				<fmt:message key="index.single.activity.lesson.title" var="SINGLE_ACTIVITY_LESSON_TITLE_VAR"/>
+				SINGLE_ACTIVITY_LESSON_TITLE : '<c:out value="${SINGLE_ACTIVITY_LESSON_TITLE_VAR}" />',
+				<fmt:message key="index.gradebook.course.title" var="GRADEBOOK_COURSE_TITLE_VAR"/>
+				GRADEBOOK_COURSE_TITLE : '<c:out value="${GRADEBOOK_COURSE_TITLE_VAR}" />',
+				<fmt:message key="index.gradebook.lesson.title" var="GRADEBOOK_LESSON_TITLE_VAR"/>
+				GRADEBOOK_LESSON_TITLE : '<c:out value="${GRADEBOOK_LESSON_TITLE_VAR}" />',
+				<fmt:message key="index.gradebook.learner.title" var="GRADEBOOK_LEARNER_TITLE_VAR"/>
+				GRADEBOOK_LEARNER_TITLE : '<c:out value="${GRADEBOOK_LEARNER_TITLE_VAR}" />',
+				<fmt:message key="index.conditions.title" var="CONDITIONS_TITLE_VAR"/>
+				CONDITIONS_TITLE : '<c:out value="${CONDITIONS_TITLE_VAR}" />',
+				<fmt:message key="index.search.lesson.title" var="SEARCH_LESSON_TITLE_VAR"/>
+				SEARCH_LESSON_TITLE : '<c:out value="${SEARCH_LESSON_TITLE_VAR}" />',
+				<fmt:message key="index.course.groups.title" var="COURSE_GROUPS_TITLE_VAR"/>
+				COURSE_GROUPS_TITLE : '<c:out value="${COURSE_GROUPS_TITLE_VAR}" />',
+				<fmt:message key="authoring.fla.navigate.away.confirm" var="NAVIGATE_AWAY_CONFIRM_VAR"/>
+				NAVIGATE_AWAY_CONFIRM : decoderDiv.html('<c:out value="${NAVIGATE_AWAY_CONFIRM_VAR}" />').text(),
+				<fmt:message key="index.monitoring.title" var="MONITORING_TITLE_VAR"/>
+				MONITORING_TITLE : '<c:out value="${MONITORING_TITLE_VAR}" />',
+				<fmt:message key="label.private.notifications.title" var="PRIVATE_NOTIFICATIONS_TITLE_VAR"/>
+				PRIVATE_NOTIFICATIONS_TITLE : '<c:out value="${PRIVATE_NOTIFICATIONS_TITLE_VAR}" />',
+				<fmt:message key="label.private.notifications.messages" var="PRIVATE_NOTIFICATIONS_MESSAGES_VAR"/>
+				PRIVATE_NOTIFICATIONS_MESSAGES : '<c:out value="${PRIVATE_NOTIFICATIONS_MESSAGES_VAR}" />',
+				<fmt:message key="label.private.notifications.read" var="PRIVATE_NOTIFICATIONS_READ_VAR"/>
+				PRIVATE_NOTIFICATIONS_READ : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_VAR}" />',
+				<fmt:message key="label.private.notifications.read.hint" var="PRIVATE_NOTIFICATIONS_READ_HINT_VAR"/>
+				PRIVATE_NOTIFICATIONS_READ_HINT : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_HINT_VAR}" />',
+				<fmt:message key="label.private.notifications.read.all.hint" var="PRIVATE_NOTIFICATIONS_READ_ALL_HINT_VAR"/>
+				PRIVATE_NOTIFICATIONS_READ_ALL_HINT : '<c:out value="${PRIVATE_NOTIFICATIONS_READ_ALL_HINT_VAR}" />',
+				MY_PROFILE : '<fmt:message key="index.myprofile" />',
+			},
+			stateId = 1, // TODO Figure out when stateId is required to be equal 3. Old version code: stateId = tabName == 'profile' ? 3 : 1;
+			activeOrgId = -1; //not set for now
 
-			$(document).ready(function(){
-				initMainPage();
+		$(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}");
+			<%-- 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>
+
+			var $tablesorter = $(".tablesorter").tablesorter({
+				theme: 'bootstrap',
+				headerTemplate : '{content} {icon}',
+				widgets: ["filter"],
+			    widgetOptions : {
+			        filter_columnFilters: false
+			    },
+			    widthFixed: true,
+			    sortInitialOrder: 'desc',
+	            sortList: [[1]],
+	            headers: { 0: { sorter: false, filter: false} }
+			});
+
+			$.tablesorter.filter.bindSearch($tablesorter, $('#offcanvas-search-input') );
+
+			$(".tablesorter").each(function() {
+				$(this).tablesorterPager({
+					savePages: false,
+	                container: $(this).find(".ts-pager"),
+	                output: '{startRow} to {endRow} ({totalRows})',
+	                cssPageDisplay: '.pagedisplay',
+	                cssPageSize: '.pagesize',
+	                cssDisabled: 'disabled',
+	                ajaxUrl : "<c:url value='/index.do'/>?dispatch=getOrgs&page={page}&size={size}&{sortList:column}&{filterList:fcol}",
+					ajaxProcessing: function (data, table) {
+				    	if (data && data.hasOwnProperty('rows')) {
+				    		var rows = [],
+				            json = {};
+				    		
+							for (i = 0; i < data.rows.length; i++){
+								var orgData = data.rows[i];
+								var orgId = orgData["id"];
+								
+								rows += '<tr>';
+
+								rows += '<td style="display: none;">';
+								rows += '</td>';
+								
+								rows += '<td id="org-row-' + orgId +'">';
+								rows += 	'<a data-id="' + orgId + '" href="#" onClick="javascript:selectOrganisation(' + orgId + ')">';
+								rows += 		orgData["name"];
+								rows += 	'</a>';
+								rows += '</td>';
+								
+								rows += '</tr>';
+							}
+				            
+							json.total = data.total_rows;
+							json.rows = $(rows);
+							return json;
+				    	}
 					}
-				</c:if>
+				})
 			});
 
+			$('.tablesorter').bind('filterEnd pagerComplete', function(event, data){
+				
+				//hide pager if total amount of courses is less than 10
+	    		if (data.totalRows < 10) {
+	    			$(".tablesorter-pager").hide();
+		    	} else {
+		    		$(".tablesorter-pager").show();
+			    }
+
+	    		//in case active course is not yet chosen by user, select the fist one from the list
+			    if ((activeOrgId < 0) && (event.type == "pagerComplete") && (data.totalRows > 0)) {
+			    	var firstOrgId = $('.tablesorter a').first().data("id");
+					selectOrganisation(firstOrgId);
+				}
+			});
+
+		});
 	</script>
 </lams:head>
-<body>
+<body > <!-- class="offcanvas-hidden" -->
 
-<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}">
+<!-- Offcanvas Bar -->
+    <nav id="offcanvas" role="navigation">
+        <div class="offcanvas-scroll-area">
+        
+        <div class="offcanvas-collapse">
+            <ul class="nav" id="offcanvas-menu">
+                <li class="offcanvas-logo">
+                    <div class="logo-element">
+                        <img alt="image" class="img-circle" src="images/css/lams_login.gif">
+                    </div>
+        			<i class="icon-remove fa fa-close fa-lg offcanvas-toggle"></i>
+                </li>
+                <li class="offcanvas-header">
+            	    <span class="courses-title "><i class="fa fa-table"></i>&nbsp;&nbsp;Courses</span>
+        		</li> 
+                <li>
+                    <a href="#nogo">
+                    	<span class="nav-label">Previous course asdadljl oijoiu s 1</span>
+                    	<span class="label label-warning2 pull-right"><i class="fa fa-star"></i></span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#nogo">
+                    	<span class="nav-label">Previous course 2</span> 
+                    	<span class="label label-warning2 pull-right"><i class="fa fa-star"></i></span>
+                    </a>
+                </li> 
+                <li>
+                    <a href="#nogo">
+                    	<span class="nav-label">Previous course 3</span> 
+                    	<span class="label label-warning2 pull-right"><i class="fa fa-star"></i></span>
+                    </a>
+                </li>
+                
+                <li class="form-group offcanvas-search">
+						<input type="text" id="offcanvas-search-input" class="form-control" placeholder="Search for courses..."
+								data-column="1" type="search">
+                </li>
+<!-- 
+                <li class="active">
+                    <a href="#"> Course B  </a>
+                </li>
+ -->
+
+            </ul>
+            
+			<lams:TSTable numColumns="2">
+			</lams:TSTable>
+
+        </div>
+
+        </div>
+    </nav>
+<!-- /Offcanvas Bar -->
+
+<div id="page-wrapper">
+
+	<!-- header -->
+	<div class="top_nav">
+		<div class="nav_menu">
+			<nav>
+				<div class="nav offcanvas-toggle-wrapper">
+					<a class="offcanvas-toggle"><i class="fa fa-bars"></i></a>
+				</div>
+
+				<ul class="nav navbar-nav navbar-right">
+					<li>
+						<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+	                  		<c:choose>
+	                  			<c:when test="${not empty portraitUuid}">
+	                  				<c:set var="portraitSrc">download/?uuid=${portraitUuid}&preferDownload=false</c:set>
+	                  			</c:when>
+	                  			<c:otherwise>
+	                  				<c:set var="portraitSrc">images/css/john-doe-portrait.jpg</c:set>
+	                  			</c:otherwise>
+	                  		</c:choose>
+			                <img src="${portraitSrc}" alt="">
+			                  
+							<c:set var="firstName">
+								<lams:user property="firstName" />
+							</c:set>
+							<c:set var="lastName">
+								 <lams:user property="lastName" />
+							</c:set>
+							<span class="xs-hidden">
+								<c:out value="${firstName}" escapeXml="true"/>&nbsp;<c:out value="${lastName}" escapeXml="true"/>								
+							</span>
+							<span class=" fa fa-angle-down"></span>
+						</a>
+						
+						<ul class="dropdown-menu dropdown-usermenu pull-right">
+							<li>
+								<a href="#" onclick="javascript:showMyProfileDialog(); return false;">
+									<i class="fa fa-user"></i> <fmt:message key="index.myprofile"/>
+								</a>
+							</li>
+							
+							<c:forEach var="adminlink" items="${adminLinks}">
+								
+								<c:choose>
+			                		<c:when test="${adminlink.name == 'index.courseman'}">
+			                			<c:set var="iconClass">fa-users</c:set>
+			                		</c:when>
+			                		<c:when test="${adminlink.name == 'index.sysadmin'}">
+			                			<c:set var="iconClass">fa-gear</c:set>
+			                		</c:when>
+			                	</c:choose>
+									
+								<li>
+									<a href="javascript:;" onclick="<c:out value="${adminlink.url}"/>">
+										<span><i class="fa ${iconClass}"></i> <fmt:message key="${adminlink.name}"/></span>
+									</a>
+								</li>
+							</c:forEach>
+							                  
+							<li>
+								<a href="#nogo" onclick="javascript:closeAllChildren(); document.location.href='home.do?method=logout'">
+									<i class="fa fa-sign-out"></i> <fmt:message key="index.logout" />
+								</a>
+							</li>
+						</ul>
+					</li>
+					
+					<c:forEach var="headerlink" items="${headerLinks}">
 						<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 test="${fn:startsWith(headerlink.name, 'index')}">
+								<c:set var="headerLinkName"><fmt:message key="${headerlink.name}" /></c:set>
+								<c:set var="headerLinkIcon">fa-edit</c:set>
 							</c:when>
+							
+							<c:otherwise>							
+								<c:set var="headerLinkName"><c:out value="${headerlink.name}" /></c:set>
+								<c:set var="headerLinkIcon">fa-at</c:set>
+							</c:otherwise>
+						</c:choose>
+						
+						<c:choose>
+							<c:when test="${fn:length(headerLinkName) > 12}">
+								<c:set var="headerLinkTitle" value="${headerLinkName}"/>
+								<c:set var="headerLinkName" value="${fn:substring(headerLinkName, 0, 12-2)}..."/>
+							</c:when>
 							<c:otherwise>
-								<lams:TabName url="${headerlink.url}" highlight="${highlight}"><c:out value="${headerlink.name}" /></lams:TabName>						
+								<c:set var="headerLinkName" value="${headerLinkName}"/>
 							</c:otherwise>
 						</c:choose>
-				</div>
-				<div class="${tabRight}"></div>
-			</div>
-			</c:forEach>
+						
+						<li role="presentation">       
+							<a href="<c:out value='${headerlink.url}' />" title="${headerLinkTitle}">
+								<i class="fa ${headerLinkIcon}"></i> 
+								<span class="xs-hidden"><c:out value='${headerLinkName}'/></span>
+							</a>
+						</li>
+					</c:forEach>
+					
+					<li role="presentation" class="dropdown">       
+						<a href="javascript:;" onclick="javascript:showPrivateNotificationsDialog();" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
+							<i class="fa fa-envelope-o"></i>
+                    		<span id="notificationsPendingCount"></span>
+                    		
+							<span class="xs-hidden">&nbsp;&nbsp;&nbsp;Notifications</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
 		</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" />
-					<c:set var="firstName">
-						<lams:user property="firstName" />
-					</c:set>
-					<c:out value="${firstName}" escapeXml="true"/>
-				</td>
-				
-				<td id="messageCell">
-				<%--
-					<div id="message">Important annoucements might be posted here...</div>
-				--%>
-				</td>
-				
-				<td class="linksCell">
-					<c:if test="${not empty adminLinks}">
-						<c:forEach var="adminlink" items="${adminLinks}">
-							<div class="ui-button" id="<fmt:message key="${adminlink.name}"/>" 
-							     onClick='<c:out value="${adminlink.url}"/>'>
-									<fmt:message key="${adminlink.name}"/>
-							</div> 
-						</c:forEach>
-					</c:if>
-				</td>
-				<td class="linksCell">
-					<div id="refreshButton" class="ui-button" title="<fmt:message key="index.refresh.hint"/>"
-						 onClick="javascript:refreshPrivateNotificationCount();loadOrgTab(null, true)">
-							<fmt:message key="index.refresh" />
-					</div>
-					<div id="notificationsButton" class="ui-button" onClick="javascript:showPrivateNotificationsDialog()">
-						Notifications <span id="notificationsPendingCount"></span>
-					</div>
-					<div id="logoutButton" class="ui-button" onClick="javascript:closeAllChildren();document.location.href='home.do?method=logout'">
-							<fmt:message key="index.logout" />
-					</div>
-				</td>
-			</tr>
-		</table>
-		<c:if test="${empty tab}">
-			<table id="mainContentTable" cellpadding="0" cellspacing="0">
-				<tr>
-					<td>
-						<c:if test="${not empty orgDTOs}">
-							<table id="orgTabs" cellpadding="0" cellspacing="0">
-								<tr>
-									<td>
-										<ul>
-											<c:forEach items="${orgDTOs}" var="dto" varStatus="status">
-												<li class="orgTabsHeader">
-													<a href="#orgTab-${status.index}-org-${dto.orgId}"><c:out value="${dto.orgName}" /></a>
-												</li>
-											</c:forEach>
-										</ul>
-									</td>
-								</tr>
-							</table>
-                                        </td>
-                                </tr>
-                        </table>
-						</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>
+	<!-- /header -->
+
+	<!-- content -->      
+	<div class="content">
+		<div id="messageCell">
+			<%--
+				<div id="message">Important annoucements might be posted here...</div>
+			--%>
+		</div>
+		
+		<div class="row no-gutter">
+			<div class="col-xs-12">
+		    	<div class="container-turned-off-lams">
+		        	<div id="org-container" class="orgTab"></div>
+		     	</div>
+		  	</div>
+		</div>
+	
+	<!-- TODO ADD this button	<div id="refreshButton" class="btn btn-default btn-sm pull-right" title="<fmt:message key="index.refresh.hint"/>"
+				 onClick="javascript:refreshPrivateNotificationCount();loadOrganisation()">
+				<fmt:message key="index.refresh" />
+		</div>
+	 -->
 	</div>
-	<div id="footer">
-		<p>
-			<fmt:message key="msg.LAMS.version" /> <%=Configuration.get(ConfigurationKeys.VERSION)%>
-			<a href="<lams:LAMSURL/>/www/copyright.jsp" target='copyright' onClick="openCopyRight()">
-				&copy; <fmt:message key="msg.LAMS.copyright.short" /> 
-			</a>
-		</p>
-	</div>
+	<!-- /content -->
+	        
+	<!-- footer -->
+	<footer>
+		<div class="">
+			<p class="text-muted text-center">
+				<fmt:message key="msg.LAMS.version" /> <%=Configuration.get(ConfigurationKeys.VERSION)%>
+				<a href="<lams:LAMSURL/>/www/copyright.jsp" target='copyright' onClick="openCopyRight()">
+					&copy; <fmt:message key="msg.LAMS.copyright.short" /> 
+				</a>
+			</p>
+		</div>
+		<div class="clearfix"></div>
+	</footer>
+	<!-- /footer -->
+
 </div>
-<hr>
-<div class="row no-gutter">
-  <div class="col-xs-12">
-    <div class="container">
-      <c:forEach items="${orgDTOs}" var="dto" varStatus="status">
-        <div id="orgTab-${status.index}-org-${dto.orgId}" class="orgTab"></div>
-      </c:forEach>
-     </div>
-  </div>
-</div>
 
 </body>
 </lams:html>