Index: lams_central/web/portrait.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_central/web/portrait.jsp,v
diff -u -r1.6.8.1 -r1.6.8.2
--- lams_central/web/portrait.jsp	6 Apr 2011 17:04:54 -0000	1.6.8.1
+++ lams_central/web/portrait.jsp	8 Apr 2011 17:39:46 -0000	1.6.8.2
@@ -5,7 +5,24 @@
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
+<link type="text/css" href="css/jquery-ui-1.8.11.redmont-theme.css" rel="stylesheet">
+<style media="screen,projection" type="text/css">
+	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited, .ui-state-active a:hover  {
+	    color: #47bc23 !important;
+	    background-image: none;
+	    background-color: transparent ;
+	}
+	
+	.button {font-size:11px; font-family: verdana, arial, helvetica, sans-serif;}
+	.tableCaptions {text-align: right; vertical-align: top; width: 30%;}
+	#accordion h3 a {border-bottom: 0;}
+	#accordion div {text-align: center;}
+	#accordion p {text-align: center; padding-bottom: 0px; margin-bottom: 0xp;}
+	#webcam {padding-bottom: 17px;}
+</style>
+
 <script language="JavaScript" type="text/javascript" src="includes/javascript/jquery.blockUI.js"></script>
+<script language="JavaScript" type="text/javascript" src="includes/javascript/jquery-ui-1.8.11.custom.min.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" );
@@ -17,31 +34,63 @@
 	function onCompleteWebcam(response) {
 		window.location.href = '<c:url value="/index.do"/>?tab=profile';
 	}	
-
-    $(document).ready(function() { 
+	//set onError callback
+	webcam.set_hook( 'onError', 'onErrorWebcam' );
+	function onErrorWebcam(msg) {
+		var activeHeader = $( "#accordion" ).accordion( "option", "active" );
+		if (activeHeader == "0") {
+			alert($( "#webcam" ).attr("height") + "JPEGCam Flash Error: " + msg);
+		}
+		return true;
+	}
+	
+	jQuery(document).ready(function(){
+		//initialize webcam
+		$( "#accordion" ).accordion({
+			autoHeight: false,
+			create: function(event, ui) {
+				$( "#webcam" ).html(webcam.get_html(320, 240, 120, 90));
+			},
+			change: function(event, ui) {
+				if (ui.newHeader[0].id == "webcamHeader") {
+					hideConfirmationButtons();
+					$( "#webcam" ).html(webcam.get_html(320, 240, 120, 90));
+				} else {
+					$( "#webcam" ).html("");
+				}
+			}
+		});
+		
         $('#takeSnapshot').click(function() { 
     		webcam.freeze();
-    		$('#takeSnapshotArea').hide();
-    		$('#uploadToServerArea').show();
+    		showConfirmationButtons();
         }); 
         
         $('#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();
+	 		hideConfirmationButtons();
         });
         
         $('#resetWebcam').click(function() { 
     		webcam.reset();
+    		hideConfirmationButtons();
+        });
+        
+        function hideConfirmationButtons() {
     		$('#takeSnapshotArea').show();
-    		$('#uploadToServerArea').hide();
-        });        
-    });
+    		$('#uploadToServerArea').hide();	
+        }
+        
+        function showConfirmationButtons() {
+    		$('#takeSnapshotArea').hide();
+    		$('#uploadToServerArea').show();	
+        }
+	});
 	
 </script>
 
-<html:form action="/saveportrait.do" method="post" enctype="multipart/form-data">
+<html:form action="/saveportrait.do" method="post" enctype="multipart/form-data" >
 	<html:hidden name="PortraitActionForm" property="portraitUuid" />
 
 	<div style="clear:both"></div>
@@ -57,10 +106,9 @@
 
 	<table>
 		<tr>
-			<td class="align-right" valign="top" width="35%">
+			<td class="tableCaptions">
 				<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" />
@@ -73,50 +121,49 @@
 					<em><fmt:message key="msg.portrait.none" /></em>
 				</logic:equal>
 			</td>
-			
 		</tr>
 		
 		<tr>
-			<td class="align-right" valign="top" width="35%">
-				<fmt:message key="label.portrait.upload" />
+			<td class="tableCaptions">
+				<fmt:message key="label.portrait.create.new.portrait" />
 			</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 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>
+				<div id="accordion">
+				    <h3 id="webcamHeader"><a href="#"><fmt:message key="label.portrait.take.snapshot.from.webcamera" /></a></h3>
+				    <div>
+						<div id="webcam"></div>
 						
-				<!-- 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>					
+						<!-- Some buttons for controlling things -->
+						<div id="takeSnapshotArea">	
+							<a href="javascript:webcam.configure();" class="button"><fmt:message key='label.portrait.configure' /></a>	
+							<a id="takeSnapshot" class="button" href="javascript:return false;"><fmt:message key='label.portrait.take.snapshot' /></a>		
+						</div>	
+						<div id="uploadToServerArea" style="display: none;">		
+							<div style="padding-bottom: 13px;"><fmt:message key='label.portrait.do.you.like.results' /></div>
+						
+							<a class="button" id="uploadWebcam" href="javascript:return false;"><fmt:message key='label.portrait.yes.set.it.as.portrait' /></a>
+							<a class="button" id="resetWebcam" href="javascript:return false;"><fmt:message key='label.portrait.no.take.another.one' /></a>
+						</div>
+				    </div>
 				    
+				    <h3><a href="#"><fmt:message key="label.portrait.upload" /></a></h3>
+				    <div>
+				   		<html:file property="file" />
+						<br/><br/>
+						<a class="button" href="javascript:document.PortraitActionForm.submit();"><fmt:message key="button.save" /></a>
+						<a class="button" href="<c:url value='/index.do'/>?tab=profile"><fmt:message key="button.cancel" /></a>
+
+						<p> 
+							<fmt:message key="msg.portrait.resized" />  
+						</p>
+				    </div>
+				</div>
+			
 			</td>
 		</tr>
-
 	</table>
+
 	</div>
+
+	
 </html:form>