Index: lams_tool_images/web/pages/learning/learning.jsp
===================================================================
diff -u -r8a7c47632a6a93892f015f068d12adb376c0ae2d -rfd6a44adca1e0d4ee031b0b8b442de4ee8974d74
--- lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 8a7c47632a6a93892f015f068d12adb376c0ae2d)
+++ lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision fd6a44adca1e0d4ee031b0b8b442de4ee8974d74)
@@ -12,37 +12,108 @@
 	<c:if test="${not empty param.sessionMapID}">
 		<c:set var="sessionMapID" value="${param.sessionMapID}" />
 	</c:if>
-
 	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-
 	<c:set var="mode" value="${sessionMap.mode}" />
 	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
 	<c:set var="imageGallery" value="${sessionMap.imageGallery}" />
 	<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
 
+	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/jquery.jcarousel.css'/>" />
+	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/jquery.jcarousel.skin.css'/>" />
+	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/galleria.css'/>" >
+	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/jquery.rating.css'/>"/>
+	<style media="screen,projection" type="text/css">
+		#content{width:1000;}
+		body{width:1000;}
+		.stripes{width:1000;}
+	
+		.galleria_container{position:relative;margin-top:2em;}
+		.gallery_demo{width:702px;margin:0 auto 0 0;}
+		.gallery_demo li{width:100px;height:100px;border:3px double #111;margin: 0 2px;background:#000;}
+		.gallery_demo li div{left:240px}
+		.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
+		
+		.caption{position:absolute;top:0px;left:0px;width:150px;font-size:12px;color:#0087e5;}
+		#description{position:absolute; top:1000px; left:1000px; width:150px; font-style:italic;}
+		.rating_stars{position: absolute; top: 1000px; left: 1000px; margin-top: 10}		
+		
+		#main_image{margin: 0 auto 20 0; height: 500px; width: 640px;}
+		#main_image img{margin-bottom: 10px; border: 1px solid #111;}
+		
+		.check_for_new{position: relative; top: -123px; left: 660px;}
+		.add_new_image{position: relative; top: -90px; left: 660px;}
+		
+		.after_main_image{text-align: left; margin: 30px 0; padding-top: 30px; clear:both;}
+    </style>
+
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery-1.2.6.pack.js'/>" ></script>
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery.galleria.js'/>" ></script>
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery.jcarousel.pack.js'/>"></script>
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery.MetaData.js'/>"></script>
+ 	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery.rating.pack.js'/>"></script>
+ 	
 	<script type="text/javascript">
+	$(document).ready(function(){
+
+		$('ul.gallery_demo').galleria({
+			history   : true, // activates the history object for bookmarking, back-button etc.
+			clickNext : true, // helper for making the image clickable
+			insert    : '#main_image', // the containing selector for our main image
+			onImage   : function(image,caption,thumb) {
+
+				// fetch the thumbnail container
+				var _li = thumb.parents('li');
+				// fade out inactive thumbnail
+				_li.siblings().children('img.selected').fadeTo(500,0.3);
+				// fade in active thumbnail
+				thumb.fadeTo('fast',1).addClass('selected');
+				// add a title for the clickable image
+				image.attr('title','Next image >>');
+
+				//positioning image title, description and rating
+				caption.css('left',image.width() + 20);
+				$("#description").css('left', image.width() + 20);
+				$("#description").css('top', caption.height() + 10);
+				$(".rating_stars").css('left', image.width() + 20);
+				//adjust .rating_stars top position to description height 
+				var newTopPosition = (image.height() > caption.height() + $("#description").height() + 60) 
+					? image.height() - 40 
+					: caption.height() + $("#description").height() + 20;
+				$(".rating_stars").css('top', newTopPosition);
+				
+				//adjust #main_image height to real image size
+				var newHeight = (image.height() >= 480) ? 640 : 480;
+			    $('#main_image').css('height', newHeight + 20);
+
+
+			    showComments(thumb.attr('id'));
+
+			},
+			onThumb : function(thumb) { // thumbnail effects goes here
+				
+				// fetch the thumbnail container
+				var _li = thumb.parents('li');
+				// if thumbnail is active, fade all the way.
+				var _fadeTo = _li.is('.active') ? '1' : '0.3';
+				// fade in the thumbnail when finnished loading
+				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
+				// hover effects
+				thumb.hover(
+					function() { thumb.fadeTo('fast',1); },
+					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
+				)
+			}
+		});
+		
+		$('#mycarousel').jcarousel();
+	});
+
 	<!--
-		function gotoURL(){
- 		    var reqIDVar = new Date();
-			var gurl = "<c:url value="/learning/addurl.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&reqID="+reqIDVar.getTime();
-	      	showMessage(gurl);
-	      	return false;
-		}
-		function gotoFile(){
- 		    var reqIDVar = new Date();
- 		    var gurl = "<c:url value="/learning/addfile.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&reqID="+reqIDVar.getTime();
-	      	showMessage(gurl);
-	      	return false;
-		}
 		function checkNew(){
  		    var reqIDVar = new Date();
 			document.location.href = "<c:url value="/learning/start.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}&reqID="+reqIDVar.getTime();
  		    return false;
 		}
-		function viewItem(itemUid){
-			var myUrl = "<c:url value="/reviewItem.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}&itemUid=" + itemUid;
-			launchPopup(myUrl,"LearnerView");
-		}
 		function finishSession(){
 			document.getElementById("finishButton").disabled = true;
 			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}"/>';
@@ -51,24 +122,43 @@
 		function continueReflect(){
 			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
-		function showMessage(url) {
-			var area=document.getElementById("reourceInputArea");
-			if(area != null){
-				area.style.width="100%";
-				area.style.height="100%";
-				area.src=url;
-				area.style.display="block";
-			}
+
+		//The panel of imageGallery list panel
+		var commentsAreaTargetDiv = "#commentsArea";
+		function showComments(imageUid){
+			var url = "<c:url value="/learning/showComments.do"/>";
+			$(commentsAreaTargetDiv).load(
+				url,
+				{
+					imageUid: imageUid, 
+					sessionMapID: "${sessionMapID}"
+				}
+			);
 		}
+		function addNewComment(currentImageUid, comment){
+			var url = "<c:url value="/learning/addNewComment.do"/>";
+			var param = "currentImageUid=" + currentImageUid + "&comment=" + comment + "&sessionMapID=${sessionMapID}";
+
+			$(commentsAreaTargetDiv).load(
+				url,
+				{
+					currentImageUid: currentImageUid, 
+					comment: comment,
+					sessionMapID: "${sessionMapID}"
+				}
+			);
+		}
+		
+				
 	-->        
     </script>
+   
 </lams:head>
 <body class="stripes">
 
 
-	<div id="content">
-		<h1>
+	<div id="content" width="1000" style="width:1000;">
+		<h1  width="1000" style="width:1000;">
 			${imageGallery.title}
 		</h1>
 
@@ -90,127 +180,118 @@
 		</c:if>
 
 		<%@ include file="/common/messages.jsp"%>
+		
+		
+	
 
-		<table cellspacing="0" class="alternative-color">
-			<tr>
-				<th width="70%">
-					<fmt:message key="label.resoruce.to.review" />
-				</th>
-				<th align="center">
-					<fmt:message key="label.completed" />
-				</th>
-			</tr>
-			<c:forEach var="item" items="${sessionMap.imageGalleryList}">
-				<tr>
-					<td>
-						<a href="javascript:;" onclick="viewItem(${item.uid})">
-							${item.title} </a>
+		
 
-						<c:if test="${!item.createByAuthor && item.createBy != null}">
-								[${item.createBy.loginName}]
-							</c:if>
-					</td>
-					<td align="center">
-						<c:choose>
-							<c:when test="${item.complete}">
-								<img src="<html:rewrite page='/includes/images/tick.gif'/>"
-									border="0">
-							</c:when>
-							<c:otherwise>
-								-
-							</c:otherwise>
-						</c:choose>
-					</td>
-				</tr>
-			</c:forEach>
-
-			<c:if test="${imageGallery.miniViewImageGalleryNumber > 0}">
-				<tr>
-					<td colspan="3" align="left">
-						<b>${imageGallery.miniViewNumberStr}</b>
-					</td>
-				</tr>
+		<div class="galleria_container">
+			<div id="description">
+				Description
+			</div>		
+			<div id="main_image"></div>
+			
+			<div class="rating_stars">
+				<input class="star {required: true}" type="radio" name="test-2-rating-4" value="1" title="" checked="checked"/>
+				<input class="star" type="radio" name="test-2-rating-4" value="2" title=""/>
+				<input class="star" type="radio" name="test-2-rating-4" value="3" title=""/>
+				<input class="star" type="radio" name="test-2-rating-4" value="4" title=""/>
+				<input class="star" type="radio" name="test-2-rating-4" value="5" title=""/>
+				<br>
+				<p>
+					15 <fmt:message key="label.learning.ratings" />
+				</p>
+			</div>			
+			
+			<ul class="gallery_demo jcarousel-skin-tango" id="mycarousel">
+				<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">
+					<c:choose>
+						<c:when test="${status.index == 0}">
+							<li class="active">
+						</c:when>
+						<c:otherwise>
+							<li>
+						</c:otherwise>
+					</c:choose>
+				
+						<a href="<html:rewrite page='/download/?uuid='/>${image.mediumFileUuid}&preferDownload=false" title="${image.title}" id="${image.uid}">
+							<img src="<html:rewrite page='/download/?uuid='/>${image.thumbnailFileUuid}&preferDownload=false" alt="${image.title}" id="${image.uid}">
+						</a>
+					</li>
+				</c:forEach>
+			</ul>
+			
+			<c:if test="${(mode != 'teacher') }"> <!--&& imageGallery.allowShareImages-->
+					<a href="#" onclick="return checkNew()" class="button check_for_new"> 
+						<fmt:message key="label.check.for.new" /> 
+					</a>
 			</c:if>
-		</table>
+			<c:if test="${mode != 'teacher' && (not finishedLock)}"> <!--&& imageGallery.allowShareImages-->
+				<br>
+					<a href="#" onclick="return checkNew()" class="button add_new_image"> 
+						<fmt:message key="label.learning.add.new.image" />
+					</a>
+			</c:if>		
+			
+		</div>
+		<div class="after_main_image"></div>
 
+	
 
-		<c:if test="${mode != 'teacher'}">
-			<p>
-				<a href="#" onclick="return checkNew()" class="button"> <fmt:message
-						key="label.check.for.new" /> </a>
-			</p>
-		</c:if>
 
-		<c:if test="${mode != 'teacher' && (not finishedLock)}">
-			<c:if test="${imageGallery.allowAddFiles || imageGallery.allowAddUrls}">
+	
+		
+		
 
-				<h2>
-					<fmt:message key="label.suggest.new" />
-				</h2>
 
-				<div class="small-space-top">
-					<c:choose>
-						<c:when test="${imageGallery.allowAddFiles && imageGallery.allowAddUrls}">
-							<input type="radio" name="suggest" value="url" checked="true"
-								onclick="gotoURL()" class="noBorder">
-							<fmt:message key="label.authoring.basic.resource.url.input" /> |
-										<input type="radio" name="suggest" value="file"
-								onclick="gotoFile()" class="noBorder">
-							<fmt:message key="label.authoring.basic.resource.file.input" />
-						</c:when>
 
-						<c:when test="${imageGallery.allowAddFiles && !imageGallery.allowAddUrls}">
-							<input type="radio" name="suggest" value="file" checked="true"
-								onclick="gotoFile()" class="noBorder">
-							<fmt:message key="label.authoring.basic.resource.file.input" />
-						</c:when>
 
-						<c:when test="${!imageGallery.allowAddFiles && imageGallery.allowAddUrls}">
-							<input type="radio" name="suggest" value="url" checked="true"
-								onclick="gotoURL()" class="noBorder">
-							<fmt:message key="label.authoring.basic.resource.url.input" />
-						</c:when>
-					</c:choose>
-				</div>
 
-				<iframe
-					onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-					id="reourceInputArea" name="reourceInputArea"
-					style="width: 0px; height: 0px; border: 0px; display: none"
-					frameborder="no" scrolling="no">
-				</iframe>
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+			
+		
+		
 
 
+		
+		
+		
+ 		
+<div id="commentsArea">
+	<%@ include file="/pages/learning/parts/commentsarea.jsp"%> 
+</div>
+ 
+		
+		
+		
 
-			</c:if>
 
-			<c:choose>
-				<c:when test="${imageGallery.allowAddFiles && imageGallery.allowAddUrls}">
-					<script type="text/javascript">
-					<!--
-						showMessage("<c:url value='/learning/addurl.do'/>?sessionMapID=${sessionMapID}&mode=${mode}");
-					-->
-				</script>
-				</c:when>
-				<c:when test="${imageGallery.allowAddFiles && !imageGallery.allowAddUrls}">
-					<script type="text/javascript">
-					<!--
-						showMessage("<c:url value='/learning/addfile.do'/>?sessionMapID=${sessionMapID}&mode=${mode}");
-					-->
-				</script>
-				</c:when>
-				<c:when test="${!imageGallery.allowAddFiles && imageGallery.allowAddUrls}">
-					<script type="text/javascript">
-					<!--
-						showMessage("<c:url value='/learning/addurl.do'/>?sessionMapID=${sessionMapID}&mode=${mode}");
-					-->
-				</script>
-				</c:when>
-			</c:choose>
-			<%-- end mode != teacher --%>
-		</c:if>
-
-
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
 			<div class="small-space-top">
 				<h2>
@@ -241,18 +322,18 @@
 		</c:if>
 
 		<c:if test="${mode != 'teacher'}">
-			<div class="space-bottom-top align-right">
+			<div class="space-bottom-top align-right" >
 				<c:choose>
 					<c:when
 						test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
 						<html:button property="FinishButton"
-							onclick="return continueReflect()" styleClass="button">
+							onclick="return continueReflect()" styleClass="button" >
 							<fmt:message key="label.continue" />
 						</html:button>
 					</c:when>
 					<c:otherwise>
 						<html:button property="FinishButton" styleId="finishButton"
-							onclick="return finishSession()" styleClass="button">
+							onclick="return finishSession()" styleClass="button" >
 							<fmt:message key="label.finished" />
 						</html:button>
 					</c:otherwise>
@@ -269,3 +350,4 @@
 
 </body>
 </lams:html>
+