<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>{{{title}}}</title>
    <link rel="stylesheet" href="{{{base}}}dist/reveal.css" />
    <link rel="stylesheet" href="{{{base}}}{{{themeUrl}}}" id="theme" />
    <link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />
	<link rel="stylesheet" href="{{{base}}}css/layout.css" />
	{{#enableCustomControls}}
	<link rel="stylesheet" href="{{{base}}}plugin/customcontrols/style.css">
	{{/enableCustomControls}}
	{{#enableChalkboard}}
	<link rel="stylesheet" href="{{{base}}}plugin/chalkboard/style.css">
	{{/enableChalkboard}}

	{{#enablePointer}}
	<link rel="stylesheet" href="{{{base}}}plugin/reveal-pointer/pointer.css" />
	{{/enablePointer}}

	{{#cssPaths}}
    <link rel="stylesheet" href="{{{base}}}{{{.}}}" />
    {{/cssPaths}}

    <script defer src="{{{base}}}dist/fontawesome/all.min.js"></script>

	<script type="text/javascript">
		var forgetPop = true;
		function onPopState(event) {
			if(forgetPop){
				forgetPop = false;
			} else {
				parent.postMessage(event.target.location.href, "app://obsidian.md");
			}
        }
		window.onpopstate = onPopState;
		window.onmessage = event => {
			if(event.data == "reload"){
				window.document.location.reload();
			}
			forgetPop = true;
		}

		function fitElements(){
			const itemsToFit = document.getElementsByClassName('fitText');
			for (const item in itemsToFit) {
				if (Object.hasOwnProperty.call(itemsToFit, item)) {
					var element = itemsToFit[item];
					fitElement(element,1, 1000);
					element.classList.remove('fitText');
				}
			}
		}

		function fitElement(element, start, end){

			let size = (end + start) / 2;
			element.style.fontSize = `${size}px`;

			if(Math.abs(start - end) < 1){
				while(element.scrollHeight > element.offsetHeight){
					size--;
					element.style.fontSize = `${size}px`;
				}
				return;
			}

			if(element.scrollHeight > element.offsetHeight){
				fitElement(element, start, size);
			} else {
				fitElement(element, size, end);
			}		
		}


		document.onreadystatechange = () => {
			fitElements();
			if (document.readyState === 'complete') {
				if (window.location.href.indexOf("?export") != -1){
					parent.postMessage(event.target.location.href, "app://obsidian.md");
				}
				if (window.location.href.indexOf("print-pdf") != -1){
					let stateCheck = setInterval(() => {
						clearInterval(stateCheck);
						window.print();
					}, 250);
				}
			}
	};


        </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">{{{slides}}}</div>
    </div>

    <script src="{{{base}}}dist/reveal.js"></script>

    <script src="{{{base}}}plugin/markdown/markdown.js"></script>
    <script src="{{{base}}}plugin/highlight/highlight.js"></script>
    <script src="{{{base}}}plugin/zoom/zoom.js"></script>
    <script src="{{{base}}}plugin/notes/notes.js"></script>
    <script src="{{{base}}}plugin/math/math.js"></script>
	<script src="{{{base}}}plugin/mermaid/mermaid.js"></script>
	<script src="{{{base}}}plugin/chart/chart.min.js"></script>
	<script src="{{{base}}}plugin/chart/plugin.js"></script>
	{{#enableMenu}}
	<script src="{{{base}}}plugin/menu/menu.js"></script>
	{{/enableMenu}}
	{{#enableCustomControls}}
	<script src="{{{base}}}plugin/customcontrols/plugin.js"></script>
	{{/enableCustomControls}}
	{{#enableChalkboard}}
	<script src="{{{base}}}plugin/chalkboard/plugin.js"></script>
	{{/enableChalkboard}}
	{{#enablePointer}}
	<script src="{{{base}}}plugin/reveal-pointer/pointer.js"></script>
	{{/enablePointer}}
	{{#timeForPresentation}}
	{{#enableTimeBar}}
	<script src="{{{base}}}plugin/elapsed-time-bar/elapsed-time-bar.js"></script>
	{{/enableTimeBar}}
	{{/timeForPresentation}}

    <script>
      function extend() {
        var target = {};
        for (var i = 0; i < arguments.length; i++) {
          var source = arguments[i];
          for (var key in source) {
            if (source.hasOwnProperty(key)) {
              target[key] = source[key];
            }
          }
        }
        return target;
      }

	  function isLight(color) {
		let hex = color.replace('#', '');

		// convert #fff => #ffffff
		if(hex.length == 3){
			hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
		}

		const c_r = parseInt(hex.substr(0, 2), 16);
		const c_g = parseInt(hex.substr(2, 2), 16);
		const c_b = parseInt(hex.substr(4, 2), 16);
		const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
		return brightness > 155;
	}

	var bgColor = getComputedStyle(document.documentElement).getPropertyValue('--r-background-color').trim();
	var isLight = isLight(bgColor);

	if(isLight){
		document.body.classList.add('has-light-background');
	} else {
		document.body.classList.add('has-dark-background');
	}

      // default options to init reveal.js
      var defaultOptions = {
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'default', // none/fade/slide/convex/concave/zoom
        plugins: [
          RevealMarkdown,
          RevealHighlight,
          RevealZoom,
          RevealNotes,
          RevealMath.MathJax3,
		  RevealMermaid,
		  RevealChart,
		  {{#enableCustomControls}}
		  RevealCustomControls,
	      {{/enableCustomControls}}
		  {{#enableMenu}}
		  RevealMenu,
		  {{/enableMenu}}
		  {{#enablePointer}}
	      RevealPointer,
	      {{/enablePointer}}
		  {{#enableChalkboard}}
		  RevealChalkboard, 
		  {{/enableChalkboard}}
		  {{#timeForPresentation}}
		  {{#enableTimeBar}}
		  ElapsedTimeBar
		  {{/enableTimeBar}}
		  {{/timeForPresentation}}
        ],


		{{#timeForPresentation}}
    	allottedTime: {{{.}}} * 1000,
    	{{/timeForPresentation}}

		mathjax3: {
			mathjax: '{{{base}}}plugin/math/mathjax/tex-mml-chtml.js',
		},
		markdown: {
		  gfm: true,
		  mangle: true,
		  pedantic: false,
		  smartLists: false,
		  smartypants: false,
		},

		mermaid: {
			theme: isLight ? 'default' : 'dark',
		},

		{{#enableCustomControls}}
		customcontrols: {
			controls: [
				{{#enableOverview}}
				{id: 'toggle-overview',
				title: 'Toggle overview (O)',
				icon: '<i class="fa fa-th"></i>',
				action: 'Reveal.toggleOverview();'
				},
				{{/enableOverview}}
				{{#enableChalkboard}}
				{ icon: '<i class="fa fa-pen-square"></i>',
				title: 'Toggle chalkboard (B)',
				action: 'RevealChalkboard.toggleChalkboard();'
				},
				{ icon: '<i class="fa fa-pen"></i>',
				title: 'Toggle notes canvas (C)',
				action: 'RevealChalkboard.toggleNotesCanvas();'
				},
				{{/enableChalkboard}}
			]
		},
		{{/enableCustomControls}}
		{{#enableMenu}}
		menu: {
			loadIcons: false
		}
		{{/enableMenu}}
      };

      // options from URL query string
      var queryOptions = Reveal().getQueryHash() || {};

      var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
    </script>

    <script>
      Reveal.initialize(options);
    </script>
  </body>

  <!-- created with {{! ignore me }}Advanced Slides -->
</html>
