<?php
// Author: Sergi Diaz Planas

session_start();
?>

<html lang="en">
<head>
  <title>WebFace - Register with your webcam!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Import Bootstrap and jQuery -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Link client styles -->
  <link rel="stylesheet" href="./../styles/client.css">
  <!-- Utilities scripts -->
  <script src="./../scripts/camera.js"></script>
  <script src="./../scripts/network.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>WebFace</h1>
  <p>An easy way to make a register</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-8">
        <div>
        <video id="video" width="600" height="480"></video>
        </div>    
    </div>
    <div class="col-sm-4" id="right_col">
      <p>Press the play button and look to the camera for verification.
         </p>
      <button id="btnVideo">Play</button>
      
      <form type="submit" action="./private.php">
      <ul>
      	<li><label for="txtName">Name</label><input id="txtName" type="text" value="<?php echo $_POST['name'];?>"/></li>
        <li><label for="txtSurname">Surnames</label><input id="txtSurname" type="text" value="<?php echo $_POST['surname'];?>" /></li>
        <li><label for="txtDni">DNI</label><input id="txtDni" type="text" value="<?php echo $_POST['dni'];?>" /></li>
        <li><input id="btnFinish" type="submit" value="Finish"/></li>
      </ul>
      </form>
      
      <p id="txtDebug"></p>
    </div>
  </div>
</div>

<div class="jumbotron text-center footer">
  <p>WebFace 2017 - Sergi Diaz Planas</p> 
</div>
</body>

<!-- Bindings and js management -->
<script src="./../scripts/config.js"></script>
<script src="./../scripts/client.js"></script>

<script>
// Call after DOM has been loaded.
$('document').ready( function() 
{
    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var btnVideo = document.getElementById("btnVideo");
    var btnCancel = document.getElementById("btnCancel");

    // Disable finish button
    document.getElementById("btnFinish").disabled = true;

    // Bindings for video button
    btnVideo.onclick = function() 
    {
        // A canvas overlays the video, serving as a container where the rectangles for the
        // document and its regions of interest.
        var canvas = document.getElementById("canvas");

        // On click, start recording if video is not already playing. Stop if video 
        // is playing. Change button's text to indicate current functcionality.
        if(video.paused || video.ended) 
        {
            startRecording(video);
            // Bind timeupdate event handler
            $('#video').bind('timeupdate', function(){
                onVideoUpdate(true);
            });
        } 
        else 
        {
            stopRecording(video);
            // Unbind timeupdate event handler
            $('#video').unbind('timeupdate');
        }
    }
    // Bindings for cancel button
    btnCancel.onclick = function()
    {
        // Go back on click
        window.history.back();
    }

    // Update video controls when video is paused or is put on play
    video.onpause = function()
    {
        var btnVideo = document.getElementById("btnVideo");
        btnVideo.textContent = "Play";
    }
    video.onplay = function()
    {
        var btnVideo = document.getElementById("btnVideo");
        btnVideo.textContent = "Stop";
    }
});
</script>
</html>