<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JPEGCam Test Page</title>
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script>
    function save_snapshot(){
		take_snapshot();
	}
    </script>
<style type="text/css">

	.btn{
		border-radius: 8px 8px;
		background: crimson;
		padding: 7px 10px 7px 10px;
		color: white;
		font-weight: bold;
	}
</style>

	<!-- Date: 2008-03-15 -->
</head>
<body>
	<center><table><tr><td valign=top>
	<script type="text/javascript" src="webcam.js"></script>
	
	<!-- Configure a few settings -->
	<script language="JavaScript">
		webcam.set_api_url( 'ajax.php' );
		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		webcam.set_shutter_sound( true ); // play shutter click sound
	</script>
	
	<!-- Next, write the movie to the page at 320x240 -->
	<script language="JavaScript">
		document.write( webcam.get_html(320, 240) );
	</script>
	
	<!-- Some buttons for controlling things -->
	<br/>
    <form id="sameme">
		<input type=button class="btn" value="Configure..." onClick="webcam.configure()">
		&nbsp;&nbsp;
		<input type=button class="btn" value="Take Snapshot" onClick="save_snapshot()">
	</form>
	
	<!-- Code to handle the server response (see test.php) -->
	<script language="JavaScript">
		webcam.set_hook( 'onComplete', 'my_completion_handler' );
		
		function take_snapshot() {
			// take snapshot and upload to server
			document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
			webcam.snap();
		}
		
		function my_completion_handler(msg) {
			document.getElementById('upload_results').innerHTML=msg
			 document.getElementById('sameme').style.display = 'none';
			/* extract URL out of PHP output
			if (msg.match(/(http\:\/\/\S+)/)) {
				var image_url = RegExp.$1;
				// show JPEG image in page
				 = 
					'<h1>Upload Successful!</h1>' + 
					'<h3>JPEG URL: ' + image_url + '</h3>' + 
					'<img src="' + image_url + '">';
				
				// reset camera for another shot
				webcam.reset();
			}
			else alert("PHP Error: " + );*/
		}
		function changeStudent(id){
			$.post( "ajax.php", { type: "student" ,cls: id } , function( data ) {
				$("#studentList").html(data);
			});
		}
	</script>
	
	</td><td width=50>&nbsp;</td><td valign=top>
		<div id="upload_results" style="background-color: teal;padding: 2px 15px 0px 15px;"><h1 style="color:yellowgreen;">Please take a Photo..</h1></div>
        
	</td></tr></table></center>
</body>
</html>
