<% include header %>
<script>
<%- js.appear %>
appear({
  // function to get all elements to track
  elements: function elements(){
    return [document.getElementById('message')];
  },
  disappear: function disappear(el){
    el.style.display = 'none';
  }
});

appear((function(){
  var trick, hat, rabbit = true, count = 0;
  return {
  init: function(){
    trick = document.getElementsByClassName('trick')[0];
    hat = document.getElementsByClassName('hat')[0];
  },
  // function to get all elements to track
  elements: function elements(){
    return document.getElementsByClassName('hat');
  },
  // function to run when an element is in view
  appear: function appear(el){
    trick.style.display = 'none';
  },
  disappear: function disappear(el){
    trick.style.display = 'block';
    if(++count > 1 && rabbit && Math.floor((Math.random() * 5) + 1) === 1) {
      hat.setAttribute('src', '<%- img.hatEmpty %>');
      rabbit = false;
    } else if (!rabbit)  {
      rabbit = true;
      hat.setAttribute('src', '<%- img.hat %>');
    }
  },
  deltaSpeed: 100,
  deltaTimeout: 250,
  reappear: true,
  bounds: 0
  };
}()));
<% include js/prismjs %>
</script>
</head>
<body>
<% locals.message = 'scroll down'; %>
<% include cover %>
<div class="content">
<%- readme %>
</div>

<div class="bar"><img src="<%- img.hat %>" class="hat"></div>
<div class="trick"></div>
</body>
</html>
