{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}

{% endblock %}

{% block content %}
<center>
<canvas id="the-canvas"></canvas>
</center>


    <div>
        <div id="url">{{ url }}</div>

        <input id="shang" type="button" value="Previous" onclick="onPrevPage()">

        <input id="xia" type="button" value="Next" onclick="onNextPage()">

        <input type="hidden" name="timestamps" value="" id="timestamps"/>
        <input type="hidden" name="pagenums" value="" id="pagenums"/>

{#        <input type="button" value="submit" onclick="submitform()"/>#}


{#        <input type="submit" id="submit_button" onclick="submitFormOkay = true; stopCount();">#}

      &nbsp; &nbsp;
      <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
        <button class="btn btn-danger" onclick="stopCount(); submitFormOkay = true;">Leave</button>


    </div>

{% endblock %}

{% block global_scripts %}

    <script>
        document.getElementById("url").style.display = "none";

    </script>

    <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

    <script>
        // If absolute URL from the remote server is provided, configure the CORS
        // header on that server.
        var node = document.getElementById('url');
        var url = node.textContent;

        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];

        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1.25,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d'),
            timestamps = [],
            pagenums = [];

        /**
         * Get page info from document, resize canvas accordingly, and render page.
         * @param num Page number.
         */
        function renderPage(num) {
          pageRendering = true;
          // Using promise to fetch the page
          pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport({scale: scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
              pageRendering = false;
              if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
              }
            });
          });


          // Update page counters
          document.getElementById('page_num').textContent = num;
        }

        var StartTime = new Date().getTime();

        /**
         * If another page rendering in progress, waits until the rendering is
         * finised. Otherwise, executes rendering immediately.
         */
        function queueRenderPage(num) {
          if (pageRendering) {
            pageNumPending = num;
          } else {
            renderPage(num);
          }
        }

        /**
         * Displays previous page.
         */
        function onPrevPage() {
          if (pageNum <= 1) {
            return;
          }
          pageNum--;
          queueRenderPage(pageNum);
          var EndTime = new Date().getTime();
          timestamps.push((EndTime - StartTime)/1000);
          pagenums.push(pageNum);
          console.log("previouspage");
        }
        //document.getElementById('shang').addEventListener('click', onPrevPage);

        /**
         * Displays next page.
         */
        function onNextPage() {
          if (pageNum >= pdfDoc.numPages) {
            return;
          }
          pageNum++;
          queueRenderPage(pageNum);
          var EndTime = new Date().getTime();
          timestamps.push((EndTime - StartTime)/1000);
          pagenums.push(pageNum);
          console.log("nextpage");
        }
        //document.getElementById('xia').addEventListener('click', onNextPage);

        /**
         * Asynchronously downloads PDF.
         */
        pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
          pdfDoc = pdfDoc_;
          document.getElementById('page_count').textContent = pdfDoc.numPages;

          // Initial/first page rendering
          renderPage(pageNum);
        });

        function stopCount()
		{

		    document.getElementById('timestamps').value = timestamps.join();
		    document.getElementById('pagenums').value = pagenums.join();
		}

{#    // Create a variable that can be set upon form submission#}
    var submitFormOkay = false;
{##}
{#        window.onbeforeunload = function () {#}
{#    if (!submitFormOkay) {#}
{#        setTimeout(function() {#}
{#            setTimeout(function() {#}
{#                stopCount();#}
{##}
{#                $("#form").submit();#}
{#            }, 1000);#}
{#        },1);#}
{#        return "You are about to leave this order form. You will lose any information...";#}
{#    }#}
    var saveBeforeUnload = false;
    setInterval(function() {
      if (saveBeforeUnload) {
        saveBeforeUnload = false;
        stopCount();
        console.log();
        submitform();
      }
    }, 500);

    function submitform()
    {
        console.log("submitted");
        stopCount();
        document.getElementById("form").submit();
    }

    window.onbeforeunload = function() {
      {#if (submitFormOkay === false) {#}
      {#  saveBeforeUnload = true;#}
        stopCount();
        {#submitform();#}
        window.location='http://google.com';
        return true
    }
    </script>

{% endblock %}