<?php 
// Author: Sergi Diaz Planas
?>

<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>
            <canvas id="canvas" width="600" height="480"></canvas> 
        </div>    
    </div>
    <div class="col-sm-4" id="right_col">
        <div class="row">
            <p>Press the play button and place your identification document in front of the camera.</p>
            <button id="btnVideo">Play</button>
            <button id=btnCancel>Cancel</button>
        </div>
        <br>
        <div class="row">
            <form type="submit" action="./validation.php" method="post">
            <ul>
                <li><label for="txtName">Name</label><input id="txtName" name="name" type="text" /></li>
                <li><label for="txtSurname">Surnames</label><input id="txtSurname" name="surname" type="text" /></li>
                <li><label for="txtDni">DNI</label><input id="txtDni" name="dni" type="text" /></li>
                <li><input id="btnContinue" type="submit" value="Continue"/></li>
            </ul>
            </form>
        </div>
    </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 continue button
    document.getElementById("btnContinue").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(false);
            });

            // Draw the document rectangles over the video           
            drawRects(canvas, "rgb(255, 0, 0)");    // Red
        } 
        else 
        {
            stopRecording(video);
            // Unbind timeupdate event handler
            $('#video').unbind('timeupdate');

            // Clear canvas
            clearCanvas(canvas);
        }
    }

    // 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>