<%use date%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title><%semester%>Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="/css/deck/core/deck.core.css">

  <!-- Extension CSS files go here. Remove or add as needed. -->

  <link rel="stylesheet" media="screen" href="/css/vk-style.css">

  <link rel="stylesheet" media="screen" href="/css/deck/extensions/goto/deck.goto.css">
  <link rel="stylesheet" media="screen" href="/css/deck/extensions/menu/deck.menu.css">
  <link rel="stylesheet" media="screen" href="/css/deck/extensions/navigation/deck.navigation.css">

    <link rel="stylesheet" type="text/css" href="https://kastalia.medienhaus.udk-berlin.de/css/rec_style.css">
  <link rel="stylesheet" media="screen" href="/css/deck/extensions/status/deck.status.css">
  <link rel="stylesheet" media="screen" href="/css/deck/extensions/scale/deck.scale.css">

  <!-- Style theme. More available in /themes/style/ or create your own. -->
  <link rel="stylesheet" media="screen" href="/css/deck/udk.css">

  <!-- Transition theme. More available in /themes/transition/ or create your own. -->
  <link rel="stylesheet" media="screen" href="/css/deck/themes/transition/horizontal-slide.css">

  <!-- Basic black and white print styles -->
  <link rel="stylesheet" media="print" href="/css/deck/core/print.css">

  <!-- Required Modernizr file -->
  <script src="/js/modernizr.custom.js"></script>
</head>
<script src="/js/jquery.min.js"></script>
<body style="overflow-y: hidden;">
  <div class="deck-container">
	<section class="slide" id="folio-<%knot.knot_id%>">
		<div style="font-family: Avenir Black; font-size: 64px; color: black; padding: 20px 50px; border-bottom: solid black 5pt; width: 100%;">
			<%knot.knot_name%>
		</div>
		<div style="color: black; margin-top: 50px; margin-left: 50px; width: 95%; font-family: Avenir Roman ; font-size: 24px;">
			<%knot.knot_content%>
		</div>

		<% if a.img_url%>
			<img src="<%a.img_url%>" style="width: 100%; max-height: 85vh; margin-top: 100px; text-indent: -10000px;">
		<%end%>
	</section>

    <!-- Begin slides. Just make elements with a class of slide. -->
<script>var words={};</script>
<% FOREACH slide IN knot.knot_id.get_2generations %>
	<%counter = 0%>
	<section class="slide" id="folio-<%slide.knot_id%>">
		<div style="font-family: Avenir Black; font-size: 64px; color: black; padding: 20px 50px; border-bottom: solid black 5pt; width: 100%;">
			<a href="/<%slide.knot_id%>/"><%slide.knot_name%></a>
		</div>
		<div style="color: black; margin-top: 50px; margin-left: 50px; width: 95%; font-family: Avenir Roman ; font-size: 36px;">
		</div>
		<% if slide.img_url%>
			<!--<img src="<%slide.img_url%>" style=" position: absolute; right: 2%; top: 10%; height: 40vh; margin-top: <%slide.img_margintop%>; text-indent: -10000px;">-->
			<img src="<%slide.img_url%>" style="min-width: 20vw; max-width: 40vw; max-height: 80vh; margin-top: <%slide.img_margintop%>; float:left; margin-left:5vw; margin-right:5vw;">
		<%end%>
		<% if slide.fulltext_url %>
			<iframe src="<%slide.fulltext_url%>" type="application/pdf" style="width:100%;height:555px;"></iframe>
		<%end%>
		<%if slide.video_url%>
			<div class="video-embed">
				<video width="61%" controls autoplay loop src="<%slide.video_url%>"/>
			</div>
		<%end%>
	<%if slide.knot_content.search(',"stop":"')%>
	     <div id="words_<%slide.knot_id%>"></div>
	     <ol id="recordingsList"></ol>

	     <div id="timestamps">
		<script>
			words['<%slide.knot_id%>']=[<%slide.knot_content%>];
			console.log(words[<%slide.knot_id%>]);
		</script>
	     </div>
	     <audio style='position:fixed; bottom:2vh; width: 10vw; left:47vw;' class='logos' phrase_id="<%slide.knot_id%>" id="logos_<%slide.knot_id%>" controls>
		     <script>var asrc="<%slide.ogg_url%>;"</script>
			<source src="<%slide.ogg_url%>" type="audio/ogg">
			<source src="<%slide.ogg_url.replace('ogg_url$','mp3')%>" type="audio/mp3">

			    Your browser does not support the audio format.
	     </audio>
	<%else%>
		<div style="color: black; margin-top: 50px; margin-left: 50px; max-width: 95%; font-family: Avenir Roman ; font-size: 48px;">
			<%slide.knot_content%>
		</div>
	  <%end%>

	</section>
<% END %>
	<script>
$(function() {
	for (phrase in words) {
		id=2;
		for (let word of words[phrase]) {
			if (word.w=='' || word.w.match(/^\s+$/)) {
			//id++;
			continue;
		    }

		    $('#words_'+phrase).append('<div class="token" id="w'+id+'_'+phrase+'">'+word.w+'</div>');
		    id++;
		}
	}
	//$('#logos')[0].play();
});

$(".logos").on('play', function() {
	$(".word").css('background-color','white');
	var i=0;
	var start=0;
	pl($(this).attr('phrase_id'));
});

function pl(phrase_id) {
	var start=0;
	var i=0;
	for (let word of words[phrase_id]) {
		setTimeout(function () {$("#"+word.id+'_'+phrase_id).css("background", "black").css('color','white');}, start);
		setTimeout(function () {$("#"+word.id+'_'+phrase_id).css("background", "white").css('color','black');}, word.stop);
		i++;
		console.log("#"+word.id+'_'+phrase_id);
		start=word.stop;
	}
};
	</script>  

    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="/css/deck/core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<!--
<script src="/css/deck/extensions/menu/deck.menu.js"></script>
<script src="/css/deck/extensions/goto/deck.goto.js"></script>
<script src="/css/deck/extensions/status/deck.status.js"></script>
<script src="/css/deck/extensions/navigation/deck.navigation.js"></script>
<script src="/css/deck/extensions/scale/deck.scale.js"></script>
-->
<script src="/css/deck/extensions/status/deck.status.js"></script>
<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>

