(function () {
  var width; var height; var largeHeader; var canvas; var ctx; var circles; var target; var animateHeader = true
  // Main
  initHeader()
  addListeners()
  function initHeader() {
    width = window.innerWidth
    height = window.innerHeight
    target = { x: 0, y: height }
    largeHeader = document.getElementById('large-header')
    largeHeader.style.height = height + 'px'
    canvas = document.getElementById('demo-canvas')
    canvas.width = width
    canvas.height = height
    ctx = canvas.getContext('2d')

    // create particles
    circles = []
    for (var x = 0; x < width * 0.5; x++) {
      var c = new Circle()
      circles.push(c)
    }
    animate()
  }
  // Event handling
  function addListeners() {
    window.addEventListener('scroll', scrollCheck)
    window.addEventListener('resize', resize)
  }

  function scrollCheck() {
    if (document.body.scrollTop > height) animateHeader = false
    else animateHeader = true
  }

  function resize() {
    width = window.innerWidth
    height = window.innerHeight
    largeHeader.style.height = height + 'px'
    canvas.width = width
    canvas.height = height
  }

  function animate() {
    if (animateHeader) {
      ctx.clearRect(0, 0, width, height)
      for (var i in circles) {
        circles[i].draw()
      }
    }
    requestAnimationFrame(animate)
  }

  // Canvas manipulation
  function Circle() {
    var _this = this;

    // constructor
    (function () {
      _this.pos = {}
      init()
    })()

    function init() {
      _this.pos.x = Math.random() * width
      _this.pos.y = height + Math.random() * 100
      _this.alpha = 0.1 + Math.random() * 0.3
      _this.scale = 0.1 + Math.random() * 0.3
      _this.velocity = Math.random()
    }

    this.draw = function () {
      if (_this.alpha <= 0) {
        init()
      }
      _this.pos.y -= _this.velocity
      _this.alpha -= 0.0005
      ctx.beginPath()
      ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 20, 0, 2.5 * Math.PI, false)
      ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')'
      ctx.fill()
    }
  }
})()