Index: lams_tool_images/web/pages/learning/learning.jsp
===================================================================
diff -u -rbf49caa03b4d5d074f8c7dcfb3b761e66c57d58d -r9d14ce6a68469c1cd7f0522a2d39387016e35f1e
--- lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bf49caa03b4d5d074f8c7dcfb3b761e66c57d58d)
+++ lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 9d14ce6a68469c1cd7f0522a2d39387016e35f1e)
@@ -20,7 +20,6 @@
 	<c:set var="mediumImageDimensions" value="${sessionMap.mediumImageDimensions}" />
 	<c:set var="thumbnailImageDimensions" value="${empty sessionMap.thumbnailImageDimensions ? 100 : sessionMap.thumbnailImageDimensions}" />
 
-	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/jquery.rating.css'/>"/>
 	<link rel="stylesheet" type="text/css" href="<lams:LAMSURL/>css/thickbox.css">
 	<link rel="stylesheet" type="text/css" href="<html:rewrite page='/includes/css/fotorama.css'/>"/>
 	<style media="screen,projection" type="text/css">
@@ -31,26 +30,18 @@
 		    	position: static;
 		  	}
 		}
-		#check-for-new-button, #add-new-image-button, #delete-button, #rating-stars {
-			float: right;
-			clear: both;
+		#check-for-new-button {
+			margin-top: 20px;
 		}
-		#add-new-image-button, #delete-button {
-			margin-top: 8px;
+		#check-for-new-button, #add-new-image-button, #delete-button {
 		}
-		#delete-button{
-			display:none;
+		.extra-controls-inner {
+			width: 60%;
+			margin: 0px auto;
 		}
-		#rating-stars {
-			padding-top: 20px;
-			width: 85px;
+		.extra-controls-inner2 {
 			text-align: center;
-			margin-right: 20px;
 		}
-		#rating-stars-text {
-			margin-bottom: 10px;
-			margin-top:5px;
-		}
 		.caption{
 			color:#0087e5; 
 			font:italic 14px georgia,serif;
@@ -59,9 +50,13 @@
 			font-style:italic; 
 			font-size:11px;
 		}
-		.extra-controls {
-			padding-bottom: 100px;
+		#extra-controls {
+			display: table-cell;
 		}
+		#comments-area {
+			display: table-cell;
+			min-width: 68%;
+		}
 		#comment-textarea {
 			margin-right:10px; 
 			width:99%;
@@ -71,10 +66,6 @@
 			float: right;
 			margin-top: 10px;
 		}
-		#comments-area {
-			margin-bottom: 50px;
-			padding-top: 50px;
-		}
 		table.forum {
 			border-bottom: none;
 			margin-bottom: 0;
@@ -92,12 +83,18 @@
 			text-align: center;
 			padding-top: 10px;
 		}
+		#image-info {
+			display: table; 
+			width: 100%;
+		}
+		
+		.space-bottom-top {
+			padding-top: 40px;
+		}
     </style>
     
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
- 	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/jquery.rating.1.1.js'/>"></script>
  	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.form.js"></script>
- 	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/thickbox.js'/>"></script>	
  	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/fotorama.js'/>"></script>
 	<script type="text/javascript">
 	
@@ -145,14 +142,6 @@
 				}
 			);
 	
-			$('#votingForm_vote').click(function() {
-				
-				$('#votingForm').ajaxSubmit( {
-					success: afterRatingSubmit  // post-submit callback
-				});
-				return false;
-			});
-	
 		});
 
 		function checkNew(){
@@ -164,23 +153,23 @@
 			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}"/>';
 			return false;
 		}
-		function continueReflect(){
+		function continueReflect() {
 			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
 		
-		function deleteImage(){
+		function deleteImage(imageUid) {
 			var	deletionConfirmed = confirm("<fmt:message key="warning.msg.authoring.do.you.want.to.delete"></fmt:message>");
 			
 			if (deletionConfirmed) {
-				var imageUid = $('#commentsArea_imageUid').val();
 				document.location.href = "<c:url value="/learning/deleteImage.do"/>?sessionMapID=${sessionMapID}&imageUid=" + imageUid;
 			}
 			return false;
 		}
 
-		function addNewComment(currentImageUid, comment){
+		var imageInfoTargetDiv = "#image-info";
+		function addNewComment(currentImageUid, comment) {
 			var url = "<c:url value="/learning/addNewComment.do"/>";
-			$(commentsAreaTargetDiv).load(
+			$(imageInfoTargetDiv).load(
 				url,
 				{
 					currentImageUid: currentImageUid, 
@@ -190,95 +179,16 @@
 			);
 		}
 
-		//The panel of imageGallery list panel
-		var commentsAreaTargetDiv = "#comments-area";
-		function loadImageData(imageUid){
-			var url = "<c:url value="/learning/loadImageData.do"/>";
-			$(commentsAreaTargetDiv).load(
-				url,
+		function loadImageData(imageUid) {
+			
+			$(imageInfoTargetDiv).load(
+				"<c:url value="/learning/loadImageData.do"/>",
 				{
 					imageUid: imageUid, 
 					sessionMapID: "${sessionMapID}"
-				},
-				afterImageDataLoaded
-			);
-		}
-
-		function afterImageDataLoaded() {
-
-			var title = $('#commentsArea_title').val();
-			
-			var imageUid = $('#commentsArea_imageUid').val();
-			if (${imageGallery.allowRank && (mode != 'teacher')}) {
-
-				var numberRatings = $('#commentsArea_numberRatings').val();
-				$('#numberRatings').html(numberRatings);
-				
-				var currentRating = $('#commentsArea_currentRating').val();
-				setStarRatingChecked(currentRating);
-
-				var title = "<fmt:message key='label.learning.average.rating'/> " + $('#commentsArea_averageRating').val();
-				$('.star a').attr('title', title);
-
-				$('#ratingForm_imageUid').attr('value', imageUid);
-			}
-
-			if (${imageGallery.allowVote && (mode != 'teacher') && (not finishedLock)}) {	
-				var isVoted = $('#commentsArea_isVoted').val();
-				var votingFormLabel;
-				if (isVoted == "true") {
-
-					$('#votingForm_vote').attr('disabled', false);
-					$('#votingForm_vote').attr('checked', true);
-					votingFormLabel = "<fmt:message key='label.learning.unvote'/>";					
-					 
-				} else {
-					
-					$('#votingForm_vote').attr('disabled', false);
-					$('#votingForm_vote').attr('checked', false);
-					votingFormLabel = "<fmt:message key='label.learning.vote.here'/>";
-										
 				}
-				$('#votingForm_label').text(votingFormLabel);
-				$('#votingForm_imageUid').attr('value', imageUid);
-			} else if (${finishedLock}) {
-				var isVoted = $('#commentsArea_isVoted').val();
-				if (isVoted == "true") {
-					$('#votingForm_vote').attr('checked', true);
-				} else {
-					$('#votingForm_vote').attr('checked', false);
-				}
-			}
-			
-			//set visibility of "Delete image" button 
-			var isAuthor = $('#commentsArea_isAuthor').val()  == "true";
-			$("#delete-button").toggle(isAuthor);
-			
-		}
-		function setStarRatingChecked(currentRating){
-			$('#rating-stars-inputs').empty();
-			for (var i = 1; i <= 5; i = i + 1) {
-				var checked = (currentRating == i) ? "checked = 'checked' " : "";
-				$('#rating-stars-inputs').append('<input class="star" type="radio" name="rating" value="' + i + '"' + checked + '/>');
-			}
-			$('input[type=radio].star').rating({
-				readOnly: ${finishedLock},
-				callback: function() {
-			    	var options = { 
-			    		success: afterRatingSubmit  // post-submit callback
-			        }; 				
-			    				
-					$('#ratingForm').ajaxSubmit(options);
-					return false;
-				}
-			});
-		}		
-
-		// post-submit callback 
-		function afterRatingSubmit(responseText, statusText)  { 
-			var imageUid = $('#commentsArea_imageUid').val();
-			loadImageData(imageUid);
-		}     
+			);
+		}  
     </script>
    
 </lams:head>
@@ -314,75 +224,14 @@
 		<div class="fotorama-container">
 			<div class="fotorama"></div>
 		</div>
-		
-		<c:if test="${(mode != 'teacher') && (imageGallery.allowRank || imageGallery.allowVote || imageGallery.allowShareImages)}">	
-			<div class="extra-controls">
-				
-				<%--Ranking/Voting area---------------------------------------%>
-	
-				<c:if test="${not empty sessionMap.imageGalleryList}">				
-					<div id="rating-stars">
-						<c:if test="${imageGallery.allowRank}">
-							<html:form action="learning/saveOrUpdateRating" method="post" styleId="ratingForm">
-								<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-								<input type="hidden" name="imageUid" id="ratingForm_imageUid"/>
-								
-								<div id="rating-stars-inputs"> 
-									<input class="star" type="radio" name="rating" value="1" />
-									<input class="star" type="radio" name="rating" value="2" />
-									<input class="star" type="radio" name="rating" value="3" />
-									<input class="star" type="radio" name="rating" value="4" />
-									<input class="star" type="radio" name="rating" value="5" />						
-								</div>
-								
-								<br>
-								<div id="rating-stars-text">
-									<span id="numberRatings"></span>
-									<fmt:message key="label.learning.ratings" />
-								</div>
-							</html:form>
-						</c:if>
-						
-						<c:if test="${imageGallery.allowVote}">
-							<html:form action="learning/vote" method="post" styleId="votingForm">
-								<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
-								<input type="hidden" name="imageUid" id="votingForm_imageUid"/>
-								
-								<p class="small-space-top" style="margin-right: 0px">
-									<html:checkbox property="vote" styleClass="noBorder" styleId="votingForm_vote" />
-									<label for="votingForm_vote" id="votingForm_label"></label>
-								</p>
-								
-							</html:form>							
-						</c:if> 			
-					</div>
-				</c:if>
-				
-				<%--"Check for new", "Add new image" and "Delete" buttons---------------%>
-				
-				<c:if test="${imageGallery.allowShareImages}">
-					<a href="#nogo" onclick="return checkNew()" class="button" id="check-for-new-button"> 
-						<fmt:message key="label.check.for.new" /> 
-					</a>
-						
-					<c:if test="${not finishedLock}">
-						<a href="<html:rewrite page='/learning/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" class="button thickbox" id="add-new-image-button">  
-							<fmt:message key="label.learning.add.new.image" />
-						</a>
-					</c:if>
-						
-					<a href="#nogo" onclick="return deleteImage();" class="button" id="delete-button"> 
-						<fmt:message key="label.learning.delete.image" /> 
-					</a>
-				</c:if>
-			</div>
-		</c:if>
 			
-		<%--Comments area----------------------------------------------%>	
-	 		
-		<div id="comments-area">
-			<%@ include file="/pages/learning/parts/commentsarea.jsp"%> 
-		</div>	
+		<%--Comments & Ranking/Voting area----------------------------------------------%>	
+	 	
+	 	<c:if test="${not empty sessionMap.imageGalleryList}">
+			<div id="image-info">
+				<%@ include file="/pages/learning/parts/commentsarea.jsp"%> 
+			</div>
+		</c:if>	
  
 		<%--Reflection--------------------------------------------------%>