{{ block title }}
<Strong>Clues</Strong>
{{ endblock }}
{{ block content }}

<div class="container">
  <h1>You have 7 seconds to review a clue before the next clue is displayed</h1>
</div>

<script>
    // define words array
    var words = [
      "Clue 1/12:\n" + "The gang likes to work under the cover of dark, so the deal won't happen before 830pm",
      "Clue 2/12: \n" + "I've heard from a source I trust that the deal might be at 11pm",
      "Clue 3/12:\n" + "The gang is very familiar with both the Docks and the Warehouse. They feel comfortable operating there",
      "Clue 4/12:\n" + "There's a big event finishing at 9pm and the roads will be too busy for a quick getaway.",
      "Clue 5/12:\n" + "The gang is known to dislike German cars, they never drive Mercedes",
      "Clue 6/12:\n" + "Lamborghinis are rare and stand out too much to be a good getaway car - the gang won't use them",
      "Clue 7/12:\n" + "The warehouse is on the edge of the city, and is a private location for a drug deal",
      "Clue 8/12:\n" + "A reliable informant is telling us that the deal could be at 10pm",
      "Clue 9/12:\n" + "Gangs in this area never drive Fords, although I'm not sure why  ",
      "Clue 10/12:\n" + "The gang is known to dislike German cars, they never drive Mercedes",
      "Clue 11/12:\n" + "The restaurant is known to be in an area with no security cameras, and is an attractive location for the deal",
      "Clue 12/12:\n" + "The bar is on a busy road near a police station. Getting away quickly would be difficult. It's a bad location.",
      "  "
    ], i = -1;  // define words index one step back

    var timesRun = 0;


    // fire it up..!
    $(document).ready(function() {
        var interval = setInterval(function(){
            timesRun += 1;
            if(timesRun === 13){
                clearInterval(interval);
            }
        $('.container').find('h1').fadeOut(function(){
            $(this).html(words[i = (i + 1) % words.length]).fadeIn();
        });
    }, 7000);
    });

    window.onload = function () {
        setTimeout(function () {document.querySelector("#Next").style.visibility = "visible";}, 7000*12);
    }
</script>


    <button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>

{{ endblock }}