<div class="content">

      <h1 class="text-primary text-upper" id="loe-wrapper" style="z-index: 1;">

        Linux <br />

        <span id="of">of</span><br />

        <span id="word" style="color: #ccd5c5;"></span>

      </h1>

      <canvas id="hero" style="z-index: -1;" width="0" height="0"></canvas>

      <div>

          <h1 id="things-heading" class="text-primary text-upper">Things</h1>

      </div>

      <div class="text-primary" id="bottom-wrapper" style="z-index: 1;">

        <h2>21-25<br/>Jan 19<br/></h2>

        <h4><small>University of Canterbury<br/>Christchurch, New Zealand</small></h4>

      </div>

      <a id="register-link" class="btn btn-secondary border-primary text-primary" href="/dashboard/">Register</a>

    </div>

<script src="{% static 'js/lot_word.js' %}" type="text/javascript"></script>

<script src="{% static 'js/lot_hero.js' %}" type="text/javascript"></script>

function hero() {

  var timeouts = new Array(3);

  let green = "#0F7C11";

  let radius = 7;

  let windowWidth;

  let breakPoint = 768;

  var loeWrapper = document.getElementById("loe-wrapper");

  var loeOf = document.getElementById("of");

  var canvas = document.getElementById("hero");

  var bottomWrapper = document.getElementById("bottom-wrapper");

  var registerLink = document.getElementById("register-link");

  var thingsHeading = document.getElementById("things-heading");

  var ctx = canvas.getContext("2d");

  var canvasPadding = 10;

  function positionRegisterLink() {

    registerLink.style.position = 'static';

    registerLink.style.float = 'none'; 

    var offset = registerLink.offsetTop - loeOf.offsetTop - 0.25 * loeOf.offsetHeight;

    if (window.innerWidth >= breakPoint) {

      registerLink.style.top = -1 * offset + 'px';

      registerLink.style.position = 'relative';

      registerLink.style.float = 'right'; 

    }

  }

  function getCanvasPos() {

    var canvasRatio = window.innerWidth < 576 ? 1.1 : 2.5;

    var width = loeWrapper.offsetWidth - loeOf.offsetWidth - (2 * canvasPadding);

    var minHeight = 180;

    if (window.innerWidth >= breakPoint) {

      width -= registerLink.offsetWidth;

      minHeight = 260;

    }

    return {

      width: width,

      height: Math.max(width / canvasRatio, minHeight),

      left: loeOf.offsetWidth + canvasPadding,

      top: -1.25 * loeOf.offsetHeight,

    }

  }

  function sizeCanvas(pos) {

    var c = canvas;

    c.width = pos.width;

    c.height = pos.height;

    c.style.width = pos.width + 'px';

    c.style.height = pos.height + 'px';

    c.style.position = 'relative';

    c.style.left = pos.left + 'px';

    c.style.top = pos.top + 'px';

    c.style.marginBottom = c.style.top;

  }

  function positionThingsHeading() {

    thingsHeading.style.position = 'relative';

    thingsHeading.style.display = 'inline-block';

    var left = canvas.offsetWidth - thingsHeading.offsetWidth

    if(window.innerWidth >= breakPoint) {

      left += registerLink.offsetWidth;

    }

    thingsHeading.style.left = left + 'px';

    thingsHeading.style.top = -0.7 * thingsHeading.offsetHeight + 'px';

    thingsHeading.style.marginBottom = thingsHeading.style.top;

  }

  function positionDate() {

    bottomWrapper.style.position = 'static';

    bottomWrapper.style.marginBottom = 0;

    var offs = -0.7 * thingsHeading.offsetHeight;

    offs -= bottomWrapper.offsetHeight * 0.8;

    if (window.innerWidth >= 576) {

      bottomWrapper.style.position = 'relative';

      bottomWrapper.style.top = offs + 'px';

      bottomWrapper.style.marginBottom = offs + 20 + 'px';

    }

  }

  let drawLine = (ind, context, startX, startY, endX, endY, color) => {

    let dx = startX - endX;

    let dy = startY - endY;

    let theta = Math.atan2(dy, dx);

    var x = startX - 15 * Math.cos(theta);

    var y = startY - 15 * Math.sin(theta);

    endX = endX + 30 * Math.cos(theta);

    endY = endY + 30 * Math.sin(theta)

    let delay = 8;

    let increments = 2080 / delay;

    let xAdjust = (endX - startX) / increments;

    let yAdjust = (endY - startY) / increments;

    let counter = 1;

    let line = () => {

      context.beginPath();

      context.lineWidth = 1.9;

      context.moveTo(x, y);

      x = x + xAdjust;

      y = y + yAdjust;

      context.lineTo(x, y);

      context.strokeStyle = color;

      context.stroke();

      counter++;

      if (counter <= increments) {

        timeouts[ind] = window.setTimeout(line, delay);

      }

    };

    timeouts[ind] = window.setTimeout(line, delay);

  }

  let drawCircle = (context, x, y, radius, color) => {

    context.beginPath();

    context.fillStyle = color;

    context.arc(x, y, radius, 0, 2 * Math.PI);

    context.fill();

  }

  function windowResize() {

    if(window.innerWidth === windowWidth) {

      // Catch mobile scroll event, as this can hide/unhide the address

      // bar and fire a resize event.

      return;

    } else {

      windowWidth = window.innerWidth;

    }

    for(var i = 0; i < 3; i++) {

      window.clearTimeout(timeouts[i]);

    }

    var canvasPos = getCanvasPos();

    sizeCanvas(canvasPos)

    positionThingsHeading();

    positionDate();

    function getLowestPoint() {

      var pos = thingsHeading.offsetLeft - canvas.offsetLeft - 20;

      if(pos < 10) {

        pos = thingsHeading.offsetLeft + 0.5 * thingsHeading.offsetWidth;

      }

      return pos

    }

    let points = [

      [10, 10],

      [canvasPos.width - 10, 10],

      [

        getLowestPoint(),

        canvasPos.height -10

      ]

    ];

    positionRegisterLink();

    drawCircle(ctx, points[0][0], points[0][1], radius, green);

    drawCircle(ctx, points[1][0], points[1][1], radius, green);

    drawCircle(ctx, points[2][0], points[2][1], radius, green);

    drawLine(0, ctx, points[0][0], points[0][1], points[2][0], points[2][1], green);

    drawLine(1, ctx, points[2][0], points[2][1], points[1][0], points[1][1], green);

    drawLine(2, ctx, points[1][0], points[1][1], points[0][0], points[0][1], green);

  }

  windowResize();

  window.addEventListener('resize', windowResize, false);

}

hero();

function loeWord() {

  var wordlist = ["health", "environment", "security", "communication", "people",];

  var target = document.getElementById("word");

  function getRandomInt(max) {

    return Math.floor(Math.random() * Math.floor(max));

  }

  function setWord() {

    target.innerText = wordlist[i%wordlist.length]

    i += 1;

  }

  var i = getRandomInt(wordlist.length);

  setWord()

  setInterval(setWord, 5000)

};

loeWord();

@import "nav.scss";

@import "bootstrap.scss";

h1 {

    @include media-breakpoint-down(md) {

        font-size: 3rem;

    }

}

.navbar-brand {

    @include media-breakpoint-up(md) {

        width: 200px;

        img {

            max-width: 100%;

            height: auto;

        }

    }

    img {

        padding-left: $padding-left-default / 3;

    }

}

    padding-left: $padding-left-default / 3 !important;

    font-size: 0.81rem;

    @include media-breakpoint-up(md) {

        padding-left: $padding-left-default !important;

    }

nav.navbar {

    margin-bottom: 0;

}