const DisplaySurface = function(client) {
  classExtends(this, Surface, client)

  this._canvas = document.createElement('canvas')
  this._canvas.id = 'surface'
  this._guide = document.createElement('canvas')
  this._guide.id = 'guide'
  this._guide.setAttribute('tabindex', '1') // focus is necessary to capture keyboard events
  this.ratio = window.devicePixelRatio
  this.context = this._canvas.getContext('2d')
  this.guide = this._guide.getContext('2d')

  this.createCanvas = () =>
    document.createElement('canvas')

  this.install = function (host) {
    host.appendChild(this._canvas)
    host.appendChild(this._guide)
    window.addEventListener('resize', (e) => { this.onResize() }, false)
    this._guide.addEventListener('mousedown', client.onMouseDown, false)
    this._guide.addEventListener('mousemove', client.onMouseMove, false)
    this._guide.addEventListener('mouseup', client.onMouseUp, false)
    this._guide.addEventListener('mouseover', client.onMouseOver, false)
    this._guide.addEventListener('mouseout', client.onMouseOut, false)
    this._guide.addEventListener('keydown', client.onKeyDown, false)
    this._guide.addEventListener('keyup', client.onKeyUp, false)
    this._guide.addEventListener('keypress', client.onKeyPress, false)
  }

  // Clone the method
  const genericResize = this.resize.bind(this)
  this.resize = (size, fit) => {
    genericResize(size, fit)
    this._guide.width = size.w
    this._guide.height = size.h
    this._canvas.style.width = (size.w / this.ratio) + 'px'
    this._canvas.style.height = (size.h / this.ratio) + 'px'
    this._guide.style.width = (size.w / this.ratio) + 'px'
    this._guide.style.height = (size.h / this.ratio) + 'px'
  }

  this.toggleGuides = function () {
    this._guide.className = this._guide.className === 'hidden' ? '' : 'hidden'
  }

  this.toDataURL = () => {
    return this._canvas.toDataURL()
  }
}