{% extends "newbase.html" %}
{% load staticfiles %}
{% load rowerfilters %}
{% load i18n %}
{% load leaflet_tags %}



{% block title %}Workout Video{% endblock %}
{% block og_title %}{{ analysis.name }}{% endblock %}
{% block description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
{% block og_description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
{% block og_image %}
{% if analysis %}
<meta property="og:image" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
<meta property="og:image:secure_url" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
{% else %}
<meta property="og:image" content="http://rowsandall.com/static/img/logo_r.png" />
<meta property="og:image:secure_url" content="https://rowsandall.com/static/img/logo_r.png" />
{% endif %}
{% endblock %}

{% if analysis %}
{% block image_src %}
<link rel="image_src" href="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
{% endblock %}
{% endif %}

{% block meta %}
{% leaflet_js %}
{% leaflet_css %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="{% static 'js/videogauges.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(document).ready(function() {
  $('form').submit(function(e) {
    $(':disabled').each(function(e) {
        $(this).removeAttr('disabled');
    });
  });
});
</script>
<script>
function copyText() {
  var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = "https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/";
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    alert("Copied to clipboard: " + tempInput.value);
    document.body.removeChild(tempInput);
}
</script>
{% endblock %}

{% block main %}

<style>
  .slidecontainer {
    width: 100%; /* Width of the outside container */
  }

  .bold { font-weight: bold; }

  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
</style>

{% language 'en' %}
<h1>Video Analysis for {{ workout.name }}</h1>
<ul class="main-content">
  {% if user.is_authenticated and user == workout.user.user and not locked %}
  <li class="grid_2">
    <p>Paste link to you tube video below</p>
    <p>Use the slider to locate start point for video on workout map</p>
    <p>Playing the video will advance the data in synchonization.  Use the regular YouTube
      controls
      to move around in the video and play it.</p>
    <p>You can make manual adjustments to the delay to fine tune the alignment.
        Once you are finished, check "Lock Video and Data" to lock the video and the data.</p>
    <p>Once you are happy with the alignment, you can save the analysis, and
      share with other people.</p>
  </li>
  {% else %}
  <li class="grid_2">
    <p>Playing the video will advance the data in synchronization. Use the regular
      YouTube controls to move around in the video and play it.</p>
  </li>
  {% endif %}
  {% if analysis %}
  <li class="grid_2">
    <span class="fb-share-button" style="height:20px; vertical-align: top;"
    data-href="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}"
    data-layout="button" data-size="small" data-mobile-iframe="false">
      <a class="fb-xfbml-parse-ignore" target="_blank"
      href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/">
      Share</a>
    </span>
    <span>
      <a class="twitter-share-button"
      href="https://twitter.com/intent/tweet"
      data-url="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/"
      data-text="@rowsandall #rowingdata">Tweet</a>
    </span>
    <span>
      <button title="Copy Shareable Link" onclick="copyText()"
      style="color:#1c75bc;background:none;border:0;"><i class="fas fa-copy"></i></button>
    </span>
  </li>
  {% endif %}
</ul>
<ul class="main-content">
  <li class="grid_2">
    <div id="theplot" class="flexplot mapdiv">
      {{ mapdiv | safe}}

    </div>
    <div class="slidecontainer">
      <input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}"
      id="myRange">
    </div>
    <div id="dataplay"></div>
    <!-- <div id="datastop"></div> -->
  </li>
  <li class="grid_2">
    <div id="player"></div>
    <script>
      // 1. Code for the map
      {{ mapscript | safe }}


      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      var playing = false;
      var dataplaying = false;

      var videotime = 0;
      var data = JSON.parse('{{ data|safe }}');
      {% for id, metric in metrics.items %}
      var {{ id }}_values = data["{{ id }}"];
      // console.log("{{ id }}_values",{{ id }}_values);
      {% endfor %}
      // var boatspeed = data["boatspeed"];
      var latitude = data["latitude"];
      var longitude = data["longitude"];
      // var spm = data["spm"];
      // var ctch = data["catch"];

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          modestbranding: '1',
          videoId: '{{ video_id }}',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        // event.target.playVideo();


      }

      function updateTime() {
        var oldTime = videotime;
        var slider = document.getElementById("myRange");
        var lock = document.getElementById("lock");
        if(player && player.getCurrentTime) {
          videotime = player.getCurrentTime();
          var delay = document.getElementById("id_delay").value;
          if (lock.checked) {
            sliderpos = Math.round(videotime) + Math.round(delay);
            slider.value = sliderpos;
          }


          // gauge.set(catch_now);

        }
        if(videotime !== oldTime) {
          onProgress(videotime);
        }
      }

      timeupdater = setInterval(updateTime, 1000);

      // when the time changes, this will be called.
      function onProgress(currentTime) {
        var slider = document.getElementById("myRange");
        var lock = document.getElementById("lock");
        videotime = player.getCurrentTime();
        var delay = document.getElementById("id_delay").value;
        var output = document.getElementById("id_delay");
        datatime = slider.value;

        if (lock.checked) {
          if (!dataplaying) { // set data values
            sliderpos = Math.round(videotime) + Math.round(delay);
            slider.value = sliderpos;

            // Setting Data
            // velo = boatspeed[Math.round(datatime)];
            lat = latitude[Math.round(datatime)];
            lon = longitude[Math.round(datatime)];
            // strokerate = spm[Math.round(datatime)];
            // catchangle = ctch[Math.round(datatime)];
            {% for id, metric in metrics.items %}
            {{ id }}_now = {{ id }}_values[Math.round(datatime)];
            // console.log(datatime,{{ id }},{{ id }}_now, "{{ metric.name }}")
            {% endfor %}


            document.getElementById("time").innerHTML = Math.round(videotime);

            document.getElementById("datatime").innerHTML = Math.round(datatime);

            // document.getElementById("speed").innerHTML = velo;
            // document.getElementById("spm").innerHTML = strokerate;
            // document.getElementById("catch").innerHTML = catchangle;
            {% for id, metric in metrics.items %}
            document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
            document.getElementById("{{ id }}").className = 'bold';
            {% endfor %}
            {% for group in metricsgroups %}
            try {
              set_{{ group }}();
            } catch (e) {
              console.log(e);
            }
            {% endfor %}
            try {
              var newLatLng = new L.LatLng(lat, lon);
              // console.log(newLatLng);
              marker.setLatLng(newLatLng);
            } catch (e) {
            }
          }

        } else {
          if (!dataplaying) {
            output.value = Math.round(datatime)-Math.round(videotime);
            document.getElementById("time").innerHTML = Math.round(videotime);
          }
        }

      }

      function stopVideo() {
        player.pauseVideo();
        playing = false;
      }

      // call this function when player state changes
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && lock.checked) {
          var dataplay = document.getElementById("dataplay").childNodes[0];
          dataplay.value = String.fromCharCode(10074,10074);
        } else if (lock.checked) {
          var dataplay = document.getElementById("dataplay").childNodes[0];
          dataplay.value = String.fromCharCode(9658);
        }
      }
    </script>
  </li>
  {% if user.is_authenticated and user == workout.user.user %}
  <li class="grid_4">
    <input type="checkbox" name="lock" id="lock" value="Lock">Lock Data and Video
  </li>
  {% else %}
  <li class="grid_4">
    <input type="hidden" name="lock" id="lock" value="Lock">
  </li>
  {% endif %}
</ul>
<p>&nbsp;</p>
<form enctype="multipart/form-data" action="" method="post">
  <ul class="main-content">
    <li class="grid_2">


      {% if form and user.is_authenticated and user == workout.user.user %}

      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}


      <table>
        {{ metricsform.as_table }}
      </table>

      {% if not analysis.id %}
      <input type="submit" name="reload_button" value="Reload">
      {% endif %}
      <input type="submit" name="save_button" value="Save">

      {% else %}
      <input type="hidden" id="id_delay" value="{{ analysis.delay }}">
      {% endif %}







    </li>

    <li class="grid_2" >
      <ul class="main-content">
      <li class="grid_2">
        Data Time
        <span id="datatime">
        </span> seconds
      </li>
      <li class="grid_2">
        Video Time
        <span id="time">
        </span> seconds
      </li>
      {% for id, metric in metrics.items %}
      <li class="grid_2">
        {{ metric.name }}
        <span id="{{ id }}">
        </span> {{ metric.unit }}
      </li>
      {% endfor %}
      </ul>
      <ul class="main-content">
      {% if 'basic' in metricsgroups %}
      <li class="grid_1">
        <div id="basic_spm"></div>
      </li>
      <li class="grid_1">
        <div id="basic_boatspeed"></div>
      </li>
      {% endif %}
      {% if 'forcepower' in metricsgroups %}
      <li class="grid_1">
        <div id="forcepower_power"></div>
      </li>
      {% endif %}
      </ul>
    </li>
    <li class="grid_2">
      {% if analysis and user.is_authenticated and user == analysis.workout.user.user %}
      <p>
        <a href="/rowers/video/{{ analysis.id }}/delete/">Delete Analysis</a>
      </p>
      {% endif %}
    </li>
  </ul>
</form>
<p>&nbsp;</p>

  <script>
    $(document).ready( function() {
      // gauge settings
      {% if workout.workouttype != 'water' %}
        speedoptions.max = 7;
        speedoptions.redTo = 7;
        speedoptions.majorTicks = ['0','1','2','3','4','5','6','7'];
      {% endif %}
      {% if 'forcepower' in metricsgroups %}
        poweroptions.max = {{ rower.pw_an|add:100|round100 }};
        poweroptions.greenFrom = {{ rower.pw_ut2 }};
        poweroptions.greenTo = {{ rower.pw_at }};
        poweroptions.yellowFrom = {{ rower.pw_at }};
        poweroptions.yellowTo = {{ rower.pw_an }};
        poweroptions.redFrom = {{ rower.pw_an }};
        poweroptions.redTo = {{ rower.pw_an|add:200|round100 }};
      {% endif %}

      // cookie reader
      function createCookie(name,value,days) {
        if (days) {
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
  // lock
  var lock = document.getElementById("lock");
  var output = document.getElementById("id_delay");
  var cookie = readCookie("lock{{ workout.id }}");
  var delay = output.value;
  if (cookie=="true") {
    lock.checked = true;
    output.disabled = true;
  }

  // lock.onchange nog doen

  {% if locked %}
  lock.checked = true;
  output.disabled = true;
  {% endif %}


  // slider
  var slider = document.getElementById("myRange");
  {% if user.is_authenticated and user == workout.user.user %}
  document.getElementById("myRange").style.display = "block";
  {% else %}
  document.getElementById("myRange").style.display = "none";
  {% endif %}
  var output = document.getElementById("id_delay");

  // Update the current slider value (each time you drag the slider handle)
  slider.oninput = function() {
    if (!lock.checked) {
      try {

        delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
        output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
      }
      catch(err) {
        output.value = Math.round(slider.value);
        delay = Math.round(slider.value);
      }
    }
    clearInterval(timeupdater);
    var datatime = this.value
    var videotime = Math.round(player.getCurrentTime());
    if (lock.checked) {
      if (this.value-output.value > 0) {
        player.seekTo(this.value-output.value);
        videotime = this.value-output.value;
      } else {
        if (playing && !dataplaying) {
          player.seekTo(0);
          player.playVideo();
        }
        else if (!playing && !dataplaying) {
          player.seekTo(0);
          player.pauseVideo();
          playing = false;
        }
      }
    } else {
      // console.log('changing, not checked');
      output.value = this.value-Math.round(player.getCurrentTime());
    }

    // Setting Data
    // velo = boatspeed[Math.round(datatime)];
    lat = latitude[Math.round(datatime)];
    lon = longitude[Math.round(datatime)];
    // strokerate = spm[Math.round(datatime)];
    // catchangle = ctch[Math.round(datatime)];
    {% for id, metric in metrics.items %}
    {{ id }}_now = {{ id }}_values[Math.round(datatime)];
    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
    {% endfor %}

    document.getElementById("time").innerHTML = Math.round(videotime);
    document.getElementById("datatime").innerHTML = Math.round(datatime);
    // document.getElementById("speed").innerHTML = velo;
    // document.getElementById("spm").innerHTML = strokerate;
    // document.getElementById("catch").innerHTML = catchangle;
    {% for id, metric in metrics.items %}
    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
    document.getElementById("{{ id }}").className = 'bold';
    {% endfor %}
    {% for group in metricsgroups %}
    try {
      set_{{ group }}();
    } catch (e) {
    }
    {% endfor %}
    try {
      var newLatLng = new L.LatLng(lat, lon);
      // console.log(newLatLng);
      marker.setLatLng(newLatLng);
    } catch (e) {
    }
    timeupdater = setInterval(updateTime, 1000);
  }

  output.oninput = function() {
    slider.value = this.value+Math.round(player.getCurrentTime());
  }


  // Update the current slider value (each time the slider is changed)
  slider.onchange = function() {
    clearInterval(timeupdater)
    if (lock.checked) {
      if (this.value-output.value > 0) {
        player.seekTo(this.value-output.value);
        if (playing) {
          player.playVideo();
        } else {
          player.pauseVideo();
        }
      } else {
        if (playing) {
          player.seekTo(0);
          player.playVideo();
        }
        else {
          player.seekTo(0);
          player.pauseVideo();
          playing = false;
        }
      }
    } else {
      output.value = this.value-Math.round(player.getCurrentTime());
    }
    var datatime = this.value
    var videotime = Math.round(player.getCurrentTime());
    //
    // Setting Data
    // velo = boatspeed[Math.round(datatime)];
    lat = latitude[Math.round(datatime)];
    lon = longitude[Math.round(datatime)];
    // strokerate = spm[Math.round(datatime)];
    // catchangle = ctch[Math.round(datatime)];
    {% for id, metric in metrics.items %}
    {{ id }}_now = {{ id }}_values[Math.round(datatime)];
    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
    {% endfor %}

    document.getElementById("time").innerHTML = Math.round(videotime);
    document.getElementById("datatime").innerHTML = Math.round(datatime);
    // document.getElementById("speed").innerHTML = velo;
    // document.getElementById("spm").innerHTML = strokerate;
    // document.getElementById("catch").innerHTML = catchangle;
    {% for id, metric in metrics.items %}
    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
    document.getElementById("{{ id }}").className = 'bold';
    {% endfor %}
    {% for group in metricsgroups %}
    try {
      set_{{ group }}();
    } catch (e) {
      console.log(e);
    }
    {% endfor %}
    try {
      var newLatLng = new L.LatLng(lat, lon);
      // console.log(newLatLng);
      marker.setLatLng(newLatLng);
    } catch (e) {
      console.log('error')
    }
    console.log('changed all')
    timeupdater = setInterval(updateTime, 1000);
  }

  output.oninput = function() {
    slider.value = this.value+Math.round(player.getCurrentTime());
  }

  // lock delay form field if checkbox checked
  lock.oninput = function() {
    if (this.checked) {
      output.disabled = true;
      createCookie("lock{{ workout.id}}","true",0);
    } else {
      output.disabled = false;
      createCookie("lock{{ workout.id }}","false",0);
    }
}
// Slider start stop
// moet de buttons pas hieronder definieren en dan in de html
// pluggen
var timer;


function clock() {
  timer = setInterval(myClock, 1000);
  var c = parseInt(slider.value,10);
  console.log('starting clock');

  function myClock() {
    document.getElementById("datatime").innerHTML = c;
    c = c+1;
    slider.value = c;

    // update data fields
    lat = latitude[Math.round(c)];
    lon = longitude[Math.round(c)];
    {% for id, metric in metrics.items %}
    {{ id }}_now = {{ id }}_values[Math.round(c)];
    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
    {% endfor %}

    {% for id, metric in metrics.items %}
    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
    document.getElementById("{{ id }}").className = 'bold';
    {% endfor %}
    {% for group in metricsgroups %}
    try {
      set_{{ group }}();
    } catch (e) {}
    {% endfor %}
    try {
      var newLatLng = new L.LatLng(lat, lon);
      // console.log(newLatLng);
      marker.setLatLng(newLatLng);
    } catch (e) {
    }

    if (lock.checked) {
      player.seekTo(c+parseInt(output.value));
    } else {
        delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
        output.value = Math.round(slider.value)-Math.round(player.getCurrentTime());
    }

    if (c == latitude.length) {
      clearInterval(timer);
      c = 0;
    }
  }
}

// onderstaande alleen als lock.checked
var dataplay = document.createElement("input");
dataplay.type = "button";
dataplay.value = String.fromCharCode(9658);
document.getElementById("dataplay").appendChild(dataplay);

// var datastop = document.createElement("input");
// datastop.type = "button";
// datastop.value = "Stop";
// document.getElementById("datastop").appendChild(datastop)



dataplay.onclick = function() {
  if (lock.checked) {
    dataplaying = false;
    if (playing == false) {
      player.playVideo();
      dataplay.value = String.fromCharCode(10074,10074);
      playing = true;
    } else {
      player.pauseVideo();
      dataplay.value = String.fromCharCode(9658);
      playing = false;
    }
  } else {
    if (!dataplaying) {
      clock();
      dataplay.value = String.fromCharCode(10074,10074);
      dataplaying = true;
      if (lock.checked) {
        playing = true;
      }
    } else {
      clearInterval(timer);
      dataplay.value = String.fromCharCode(9658);
      dataplaying = false;
    }
  }
}

// datastop.onclick = function() {
//   console.log('stopping');
//   clearInterval(timer);
// }

});
</script>
{% endlanguage %}

{% endblock %}

{% block sidebar %}
{% include 'menu_workout.html' %}
{% endblock %}