<!doctype html>
<%include modules/brahma.tt%>

		<link rel="stylesheet" href="/css/baumhaus.css">
		<link rel="stylesheet" href="/css/modal.css">
		<link rel="stylesheet" href="/css/reveal.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
		<script>
			var converter = new showdown.Converter();
		</script>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
	<style>
	<%if knot.background_color%>
	body {
		background-color: <%knot.background_color%>; 
	}
	img {background-color:white;}
	<%end%>
	<%if knot.color%>
	.reveal h1,.reveal *,.fragment {
		color: <%knot.color%>; 
	}
	<%end%>
				      .slide[data-background-iframe] {
    filter: invert(1);
    background-color: black;
}
 
	<%if knot.font%>
	* {font-family: '<%knot.font%>'};
	<%end%>
	section: {z-index:-1000}
	</style>
	<body>
		<%if knot.presentation_timeline and knot.ogg_url%>
			<%include modules/presentation_player.tt%>
		<%end%>

		<%#include modules/header.tt%>
		<img style="z-index:23; left: 1vw; position:fixed;bottom:1vh;background-color:transparent;max-height:100px;filter: brightness(100%) contrast(61%);" src="<%if knot.logo%><%knot.logo%><%else%>/images/udk_logo.svg<%end%>"/>

		<%if login%>
			<%#include "modules/presentation_recorder.tt"%>
		<%end%>

		<%if knot.qr_url%>
		<img class="slide_img" style="z-index:23; left: 1vw; height:5vw; position:fixed;top:1vh;" src="<%knot.qr_url%>"/>
		<%end%>
		<img class="slide_img" style="z-index:23; right: 1vw; height:5vw; position:fixed;top:1vh;" src="/ukraine.png"/>
		<%path=knot.knot_name.split('/')%>
		<div class="hide-on-mobile" style="position:absolute;bottom:1vh;color:<%knot.color%>;left: 30vw;width:40vw;"><%path.last%> <br> Licensed under <%knot.licence%> :: <%if knot.doi%>DOI: <a style="color:<%knot.color%>" href=https://dx.doi.org/<%knot.doi%>><%knot.doi%></a><%end%> <br>by <%knot.author%> (<%knot.contact%>) <br>@ <%knot.conference%> </div>
	
		<%#include modules/modal.tt%>

		<div class="reveal">
			<div class="slides">
				<%unless knot.no_arbre%>
				<section id="folio-<%knot.knot_id%>" data-background-iframe="/<%knot.knot_id%>/arbre" data-background-interactive>
					<%knot.author%><br/>
					<%if knot.affiliation%><%knot.affiliation%><br/><%end%>
					<%if knot.contact%><%knot.contact%><br/><%end%><%if knot.conference%><br/>presented at<br/><br/><%end%>
					<%knot.conference%><br/>
					<%knot.licence%>
				</section>
				<%end%>
				<%slide=knot%>
				<%unless knot.no_intro%>
				<%include modules/baumhaus_slide.tt%>
				<%end%>
				<% slides = knot.knot_id.get_3generations %>
				<% FOREACH slide IN slides %>
					<%include modules/baumhaus_slide.tt%>
				<%end%>

			</div>
		</div>
		<script src="/js/reveal.js"></script>
		<script src="/js/head.min.js"></script>
		<div id="disp"><canvas id="comp"></canvas></div>
		<video id="video" autoplay width="300" style="display:none"></video>
		<canvas id="canvas" style="width:300px;display:none;"></canvas>
		<!--		<script src="/js/reveal_gesture.js"></script>-->
		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
     controls: true,
        progress: true,
        history: true,
	width:<%if a.reveal_width%><%a.reveal_width%><%else%>1920<%end%>,
	height:<%if a.reveal_height%><%a.reveal_height%><%else%>1300<%end%>,
	margin: 0,
        transition: 'fade', // none/fade/slide/convex/concave/zoom
        slideNumber: 'c/t',
        showSlideNumber : 'speaker',
				dependencies: [
/*					{ src: '/reveal.js/plugin/markdown/marked.js' },
					{ src: '/reveal.js/plugin/markdown/markdown.js' },
					{ src: '/reveal.js/plugin/notes/notes.js', async: true },
					{ src: '/reveal.js/plugin/highlight/highlight.js', async: true }
*/
				]
			});
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

Reveal.addEventListener( 'ready', function( event ) {
  //Reveal.slide(0, 0);
  $( ".slide_img" ).on('click', function () {
	  modal.style.display = "block";
	  modalImg.src = this.src;
	  captionText.innerHTML = unescape(this.alt);
  });
  $( ".close" ).on('click', function () {
	modal.style="none";
  });
} )

Reveal.on( 'slidechanged', event => {
	slide=$(event.currentSlide);
	content=slide.find('.slide_content');
	image=slide.find('.image');
	//console.log(slide.find('.fragment').length);
	fragment_length=content.find('.fragment').length;
	if (image) {
		console.log("IMAGE FOUND");
		console.log(image);
		if (!fragment_length && image.width>0 && Math.random() < 0.5) {
			image.css('float','left');		
			content.css('float','right');
			content.css('left','40vw');

		} else {
			image.css('float','right');	
			image.css('right','0%');
			content.css('float','left');
			content.css('left','4vw');

		}
	}
	if (!fragment_length) {
		textFit(content,{maxFontSize:200});
	}

});
//window.addEventListener("mousedown", handleClick, false);
//window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

function handleClick(e) {
	e.preventDefault();
	if(e.button === 0) Reveal.next(); 
	if(e.button === 2) Reveal.prev(); 
}

</script>

	</script>
	</body>
</html>
