{% extends "layout.html" %}
  
{% block title %}Project Description {% endblock %} 
{% block lead %} {% endblock %}

{% block page_content %}

<div class="pagecontainer">
  <div class="title2">
    <span>Education and Outreach</span>
  </div>
  <div class="pagebody">
    <div class="pagenav">
        <div onclick="goTo(document.getElementById('one'))"><span id="subtitle1" style="color: #62D881;">Introduction</span></div>
        <div onclick="goTo(document.getElementById('two'))"><span id="subtitle2" style="color: #62D881;">High School Lectures</span></div>
        <div onclick="goTo(document.getElementById('three'))"><span id="subtitle3" style="color: #62D881;">Kinderboerderij Tanthof </span></div>
        <div onclick="goTo(document.getElementById('four'))"><span id="subtitle4" style="color: #62D881;">Social Media</span></div>
        <div onclick="goTo(document.getElementById('five'))"><span id="subtitle5" style="color: #62D881;">Outreach</span></div>
    </div>
    <div class="pagecontent">
        <!-- 1 -->
        <div class="h" id="one">
            <div class="h1">Introduction</div>
            <p> bla</p>
            </div>
        <!-- 2 -->
        <div class="h" id="two" style="margin-top: -100px">
          <div class="h1">High School Lectures</div>
          <p> bla</p>
          </div>
        <!-- 3 -->
        <div class="h" id="three">
          <div class="h1">Inspiring Future Scientists at Kinderboerderij Tanthof</div>
          <p> bla</p>
         </div>
        <div class="h" id="four">
          <div class="h1">Learning Through Social Media</div>
          <p> bla</p>
        </div>

           <div class="h" id="five">
            <div class="h1">Outreach</div>
            <p> bla</p>
            <div class="h2">SynBIONL</div>
            <p> bla</p>
            <div class="h2">Dutch iGEM Meetup</div>
            <p> bla</p>
            <div class="h2">OWee/IP</div>
            <p> bla</p>
          </div>

</div>
<script>
  var TopDistance = 120;
  let elements = [document.getElementById('one'),
  document.getElementById('two'), 
  document.getElementById('three'), 
  document.getElementById('four'), 
  document.getElementById('five')];
  window.goTo = function(el){
    document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
  }
  function Highlight(el, subtitle){
    if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
        subtitle.style.color = "#62D881";
    }
    else{
        subtitle.style.color = "#185A4F";
    }
  }
  function HighlightCheck(){
    Highlight(elements[0], document.getElementById('subtitle1'));
    Highlight(elements[1], document.getElementById('subtitle2'));
    Highlight(elements[2], document.getElementById('subtitle3'));
    Highlight(elements[3], document.getElementById('subtitle4'));
    Highlight(elements[4], document.getElementById('subtitle5'));
  }
  window.addEventListener("scroll", HighlightCheck);
</script>


{% endblock %}