var canvas = current_canvas = (function(){

  var cols = 100
  var rows = 30

  var exports = new Matrix (cols, rows, function(x,y){
    var lex = new Lex (x,y)
    lex.build()
    return lex
  })

  exports.bind = function(){

    exports.forEach(function(lex, x, y){

      if (lex.bound) return
      lex.bound = true
      var point = [x,y]
      lex.span.addEventListener('contextmenu', function(e){
        e.preventDefault()
      })
      lex.span.addEventListener('mousedown', function(e){
        if (is_mobile) return
        e.preventDefault()
        dragging = true
        current_canvas = canvas
        if (e.altKey) {
          if (e.shiftKey) {
            blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2))
            draw.set_last_point(e, point)
          }
          else {
            brush.load(lex)
            brush.generate()
            dragging = false
          }
          return
        }
        else if (drawing) {
          draw.down(e, lex, point)
        }
        else if (selecting) {
          selection.down(e, lex, point)
        }
        else if (filling) {
          draw.fill(brush, x, y)
        }
        lex.focus()
      })

      lex.span.addEventListener("mousemove", function(e){
        if (is_mobile) return
        if (! dragging) return
        if (drawing) {
          draw.move(e, lex, point)
        }
        else if (selecting) {
          selection.move(e, lex, point)
        }
        lex.focus()
      })

    })

    if (is_mobile) {
      exports.rapper.addEventListener('touchstart', function(e){
        e.preventDefault()
        var x, y, point, lex
        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
        x = ~~clamp(x, 0, exports.aa[0].length-1)
        y = ~~clamp(y, 0, exports.aa.length-1)
        point = [x,y]
        lex = exports.aa[y][x]
        dragging = true
        if (drawing) {
          draw.down(e, lex, point)
        }
        else if (filling) {
          draw.fill(brush, x, y)
        }
        lex.focus()
      })
      exports.rapper.addEventListener("touchmove", function(e){
        e.preventDefault()
        var x, y, point, lex
        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
        x = ~~clamp(x, 0, exports.aa[0].length-1)
        y = ~~clamp(y, 0, exports.aa.length-1)
        point = [x,y]
        lex = exports.aa[y][x]
        if (! dragging) return
        shader_el.innerHTML = point.join(",")
        if (drawing) {
          draw.move(e, lex, point)
        }
        lex.focus()
      })
    }

  }

  return exports

})()