Index: lams_central/web/portrait.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/portrait.jsp,v
diff -u -r1.6 -r1.6.8.1
--- lams_central/web/portrait.jsp	28 Jan 2009 00:12:15 -0000	1.6
+++ lams_central/web/portrait.jsp	6 Apr 2011 17:04:54 -0000	1.6.8.1
@@ -5,54 +5,118 @@
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<html:form action="/saveportrait.do" method="post"
-	enctype="multipart/form-data">
-	<html:hidden name="PortraitActionForm" property="portraitUuid" />
+<script language="JavaScript" type="text/javascript" src="includes/javascript/jquery.blockUI.js"></script>
+<script language="JavaScript" type="text/javascript" src="includes/javascript/webcam.js"></script>	
+<script language="JavaScript">
+	webcam.set_swf_url( "includes/flash/webcam.swf" );
+	webcam.set_shutter_sound( true, "includes/sounds/shutter.mp3" ); // play shutter click sound
+	webcam.set_api_url( '<c:url value="/saveportrait.do"/>?method=saveWebcamPortrait' );
+	webcam.set_quality( 100 ); // JPEG quality (1 - 100)
+	//set onComplete callback
+	webcam.set_hook( 'onComplete', 'onCompleteWebcam' );
+	function onCompleteWebcam(response) {
+		window.location.href = '<c:url value="/index.do"/>?tab=profile';
+	}	
 
+    $(document).ready(function() { 
+        $('#takeSnapshot').click(function() { 
+    		webcam.freeze();
+    		$('#takeSnapshotArea').hide();
+    		$('#uploadToServerArea').show();
+        }); 
+        
+        $('#uploadWebcam').click(function() { 
+	   		$.blockUI({ message: '<h1><img src="images/loading.gif" style="padding-right:25px;"> <fmt:message key="label.portrait.please.wait" /> </h1>' });
+	 		webcam.upload();
+	 		$('#takeSnapshotArea').show();
+	 		$('#uploadToServerArea').hide();
+        });
+        
+        $('#resetWebcam').click(function() { 
+    		webcam.reset();
+    		$('#takeSnapshotArea').show();
+    		$('#uploadToServerArea').hide();
+        });        
+    });
+	
+</script>
 
+<html:form action="/saveportrait.do" method="post" enctype="multipart/form-data">
+	<html:hidden name="PortraitActionForm" property="portraitUuid" />
+
 	<div style="clear:both"></div>
 
-	<h2 class="small-space-top"><fmt:message
-		key="title.portrait.change.screen" /></h2>
+	<h2 class="small-space-top">
+		<fmt:message key="title.portrait.change.screen" />
+	</h2>
 
-	<div class="shading-bg"><logic:messagesPresent>
-		<p class="warning"><html:errors /></p>
-	</logic:messagesPresent>
+	<div class="shading-bg">
+		<logic:messagesPresent>
+			<p class="warning"><html:errors /></p>
+		</logic:messagesPresent>
 
 	<table>
 		<tr>
-			<td class="align-right" valign="top" width="50%"><fmt:message
-				key="label.portrait.current" />:</td>
-			<td width="50%"><logic:notEqual name="PortraitActionForm"
-				property="portraitUuid" value="0">
-				<img class="img-border"
-					src="/lams/download/?uuid=<bean:write name="PortraitActionForm" property="portraitUuid" />&preferDownload=false" />
-			</logic:notEqual> <logic:equal name="PortraitActionForm" property="portraitUuid"
-				value="0">
-				<c:set var="lams">
-					<lams:LAMSURL />
-				</c:set>
-				<em><fmt:message key="msg.portrait.none" /></em>
+			<td class="align-right" valign="top" width="35%">
+				<fmt:message key="label.portrait.current" />:
+			</td>
+			
+			<td>
+				<logic:notEqual name="PortraitActionForm" property="portraitUuid" value="0">
+					<img class="img-border" src="/lams/download/?uuid=<bean:write name="PortraitActionForm" property="portraitUuid" />&preferDownload=false" />
+				</logic:notEqual> 
 				
-			</logic:equal></td>
+				<logic:equal name="PortraitActionForm" property="portraitUuid" value="0">
+					<c:set var="lams">
+						<lams:LAMSURL />
+					</c:set>
+					<em><fmt:message key="msg.portrait.none" /></em>
+				</logic:equal>
+			</td>
+			
 		</tr>
+		
 		<tr>
-			<td class="align-right"><fmt:message key="label.portrait.upload" />:</td>
-			<td><html:file property="file" /></td>
+			<td class="align-right" valign="top" width="35%">
+				<fmt:message key="label.portrait.upload" />
+			</td>
+			<td>
+				<html:file property="file" />
+				<br/><br/>
+				<html:submit styleClass="button"><fmt:message key="button.save" /></html:submit>  
+				<html:cancel styleClass="button"><fmt:message key="button.cancel" /></html:cancel>
+				<div style=" padding-top: 10px; padding-bottom: 10px;"> 
+					<fmt:message key="msg.portrait.resized" />  
+				</div>
+			</td>	
 		</tr>
+		
 		<tr>
-		<td>&nbsp;</td>
-			<td>
-			<html:submit styleClass="button"><fmt:message key="button.save" />	
-			</html:submit>  
-			<html:cancel styleClass="button"><fmt:message key="button.cancel" />
-			</html:cancel>
-			
+			<td class="align-right" valign="top" width="30%">
+				<fmt:message key="label.portrait.take.snapshot.from.webcamera" /> 
 			</td>
+			<td>	    
+				<!-- write the movie to the page at 320x240 -->
+				<script language="JavaScript">
+					document.write(webcam.get_html(320, 240, 120, 90)  );
+				</script>
+						
+				<!-- Some buttons for controlling things -->
+				<br/><br/>
+				<div id="takeSnapshotArea">			
+					<input type="button" class="button" value="<fmt:message key='label.portrait.configure' />" onClick="webcam.configure()">
+					<input type="button" class="button" value="<fmt:message key='label.portrait.take.snapshot' />" id="takeSnapshot">
+				</div>	
+				<div id="uploadToServerArea" style="display: none;">		
+					<div style="padding-bottom: 7px;"><fmt:message key='label.portrait.do.you.like.results' /></div>
+				
+					<input type="button" class="button" value="<fmt:message key='label.portrait.yes.set.it.as.portrait' />" id="uploadWebcam">
+					<input type="button" class="button" value="<fmt:message key='label.portrait.no.take.another.one' />" id="resetWebcam">
+				</div>					
+				    
+			</td>
 		</tr>
-	</table>
 
+	</table>
 	</div>
-
-	<p align="center"> <fmt:message key="msg.portrait.resized" />  </p>
 </html:form>