// Initialize button(s) on load

window.onload = function() {
  var sketchyBtns = document.querySelectorAll('[data-sketchy="button"]')

  for (var i = 0; i < sketchyBtns.length; i++) {
    var btn = sketchyBtns[i]
    var btnBG = new SketchySVG(btn)
    btn.appendChild(btnBG.svg)
  }
  
  // Add class for retina
  if(isRetina()) {
    document.documentElement.classList.add('hi-dpi');
  }
}

// Detect Hi-DPI screens
function isRetina() {
  if(window.devicePixelRatio > 1) {
    return true;
  }

  if(window.matchMedia && window.matchMedia('(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)').matches) {
    return true;
  }

  return false;
}

// Global variables

var svgNS = 'http://www.w3.org/2000/svg' // SVG namespace
var svgID = 0 // Iterates to to allow each instance to have a unique ID

// Constructor

function SketchySVG(element) {
  this.el = element

  var filterID = 'SketchyFilter' + svgID
  svgID++

  var svg = document.createElementNS(svgNS, 'svg')
  var defs = document.createElementNS(svgNS, 'defs')

  var filter = document.createElementNS(svgNS, 'filter')
  filter.setAttribute('id', filterID)

  // Turbulence filter
  // Generates a randomized pattern to use for displacement
  var turbulence = document.createElementNS(svgNS, 'feTurbulence')
  turbulence.setAttribute('baseFrequency', '0.009')
  turbulence.setAttribute('numOctaves', '10')
  turbulence.setAttribute('type', 'turbulence')
  var seed = Math.round(Math.random() * 1000)
  turbulence.setAttribute('seed', seed)
  turbulence.setAttribute('result', 'turbulenceResult')

  // Displacement filter
  // Offsets pixels according to turbulence output
  var displacement = document.createElementNS(svgNS, 'feDisplacementMap')
  displacement.setAttribute('in', 'SourceGraphic')
  displacement.setAttribute('in2', 'turbulenceResult')
  displacement.setAttribute('xChannelSelector', 'R')
  displacement.setAttribute('scale', '7')
  displacement.setAttribute('result', 'displacementResult')

  // Create a rectangle and apply the filter
  var rect = document.createElementNS(svgNS, 'rect')
  rect.setAttribute('fill', '#000000')
  rect.setAttribute('filter', 'url(#' + filterID + ')')

  // Add text within the SVG and apply the same filter
  var text = document.createElementNS(svgNS, 'text')
  text.setAttribute('text-anchor', 'middle')
  text.setAttribute('fill', '#ffffff')
  text.appendChild(document.createTextNode('So Sketchy'))
  text.setAttribute('filter', 'url(#' + filterID + ')')

  // Add everything to the SVG DOM object
  filter.appendChild(turbulence)
  filter.appendChild(displacement)
  defs.appendChild(filter)
  svg.appendChild(defs)
  svg.appendChild(rect)
  svg.appendChild(text)

  // Save references to SVG elements
  this.svg = svg
  this.rect = rect
  this.text = text
  this.turbFilter = turbulence

  this.resize()

  window.addEventListener('resize', this.resize.bind(this))

  // Animation properties
  this.isSketching = false
  this.sketchingTicks = 0
  this.sketchingTimeout = 0
  this.seed = seed
  this.fps = 12

  this.startSketching()
}

// Resize to fit container

SketchySVG.prototype.resize = function() {
  var w = this.el.offsetWidth
  var h = this.el.offsetHeight

  this.svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
  this.rect.setAttribute('width', (w - 8))
  this.rect.setAttribute('height', (h - 8))
  this.rect.setAttribute('x', '4')
  this.rect.setAttribute('y', '4')

  this.text.setAttribute('x', w / 2)
  this.text.setAttribute('y', h * 7 / 11)
}

SketchySVG.prototype.startSketching = function() {
  clearTimeout(this.sketchingTimeout)

  this.isSketching = true
  this.sketchingTicks = 0

  setTimeout(this.tickSketching.bind(this), (1000 / this.fps))
}

SketchySVG.prototype.tickSketching = function() {
  clearTimeout(this.sketchingTimeout)

  this.sketchingTicks++

  // Reset seed every few frames to "loop" the animation
  if (this.sketchingTicks % 25 === 0) {
    this.seed -= 24
  } else {
    this.seed++
  }

  this.turbFilter.setAttribute('seed', this.seed)

  if (this.isSketching) {
    this.sketchingTimeout = setTimeout(this.tickSketching.bind(this), (1000 / this.fps))
  }
}

SketchySVG.prototype.stopSketching = function() {
  clearTimeout(this.sketchingTimeout)

  this.isSketching = false
}