class MoireView

  prefs:

    fill: "#000"

    lineSize: 17

    breakSize: 2.45

  init: ->

    @.getElements()

    @.addListeners()

    @.render()

  getElements: ->

    @.el = document.getElementsByTagName("canvas")[0]

    @.stage = @.el.getContext("2d")

    @.stage.fillStyle = @.prefs.fill

    @.height = @.el.offsetHeight

    @.width = @.el.offsetWidth

  addListeners: ->

    @.el.addEventListener "mousemove" , ( e ) =>

      @.x = @.width - e.offsetX

  render: ->

    setInterval =>

      @.drawLines()

    , 1000 / 60

  drawLines: ->

    i = -@.x

    @.el.setAttribute( "width" , @.width )

    @.el.setAttribute( "height" , @.height )

    while i < @.width

      @.stage.moveTo( i , 0 )

      @.stage.beginPath()

      @.stage.lineTo( i , @.height )

      @.stage.lineTo( i + @.prefs.lineSize , @.height )

      @.stage.lineTo( i + @.prefs.lineSize , 0 )

      @.stage.lineTo( i , 0 )

      @.stage.fill()

      i += @.prefs.lineSize + @.prefs.breakSize

Scanimation = new MoireView

do Scanimation.init