chalk.js.coffee

window.addEventListener "DOMContentLoaded", ->
  body        = $ "body"
  canvas      = $ "#canvas"
  chalkboard  = $ "#chalkboard"
  close       = $ "#close"
  ledge       = $ "#ledge"
  lightswitch = $ "#lightswitch"
  output      = $ "#output"
  shade       = $ "#shade"
  share       = $ "#share"

  canvas.attr "width", chalkboard.width()
  canvas.attr "height", chalkboard.height()
  xOffset = yOffset = 0

  context = canvas.get(0).getContext "2d"
  context.lineWidth = 8
  context.lineCap = "round"
  context.lineJoin = "miter"

  background = new Image
  background.src = "/images/background.jpg"
  background.onload = ->
    context.drawImage background, -128, -129

  updateOffsets = ->
    offsets = chalkboard.offset()
    xOffset = offsets.left
    yOffset = offsets.top

  window.addEventListener "orientationchange", updateOffsets
  updateOffsets()

  window.addEventListener "touchmove", (event) ->
    event.preventDefault()



  ### Tools ###

  createPattern = (name, callback) ->
    image = new Image
    image.src = "/images/chalk-tile-#{name}"
    image.onload = -> callback context.createPattern image, "repeat"

  setStroke = (pattern, width) ->
    context.strokeStyle = pattern
    context.lineWidth = width

  whitePattern = redPattern = erasePattern = null
  createPattern "white.png", (p) -> setStroke whitePattern = p, 8
  createPattern "red.png",   (p) -> redPattern = p
  createPattern "erase.jpg", (p) -> erasePattern = p

  tools = ["eraser", "red_chalk", "white_chalk"]
  activeTool = ""

  activateTool = (tool) ->
    return if tool is activeTool

    tools.splice tools.indexOf(tool), 1
    tools.push activeTool = tool
    $("##{id}, ##{id}_tool").css("z-index", index) for id, index in tools
    $("#tools div.tool").removeClass "active"
    $("##{id}_tool").addClass "active"

    switch tool
      when "red_chalk"   then context.strokeStyle = setStroke redPattern, 8
      when "white_chalk" then context.strokeStyle = setStroke whitePattern, 8
      when "eraser"      then context.strokeStyle = setStroke erasePattern, 32

  activateTool "white_chalk"

  ledge.delegate "a", "click", (target) ->
    activateTool $(target).attr "id"



  ### Drawing ###

  skip = false
  count = 0
  points = [null]
  x = y = null

  draw = (point) ->
    if point
      if skip
        skip = false
      else
        context.moveTo x, y
        [x, y] = point
        context.lineTo x, y
    else
      skip = true

  canvas.bind "touchstart", (event) ->
    touch = event.touches[0]
    [x, y] = [touch.pageX - xOffset, touch.pageY - yOffset]
    event.preventDefault()

  canvas.bind "touchmove", (event) ->
    touch = event.touches[0]
    points.push [touch.pageX - xOffset, touch.pageY - yOffset]

  canvas.bind "touchend", (event) ->
    points.push [x, y], [x, y], null

  setInterval ->
    return unless points.length
    start = new Date
    context.beginPath()
    draw points.shift() while points.length and new Date - start < 10
    context.stroke()
  , 30



  ### Shade ###

  lightswitch.bind "click", (event) ->
    if body.hasClass "shade"
      body.removeClass "shade"
    else
      body.addClass "shade"
    event.preventDefault()



  ### Share ###

  openShareWindow = ->
    share.addClass "active"
    setTimeout ->
      output.attr "src", canvas.get(0).toDataURL()
      output.get(0).onload = ->
        body.addClass "share"
    , 10

  closeShareWindow = ->
    share.removeClass "active"
    body.removeClass "share"
    output.get(0).onload = null
    output.attr "src", "/images/chalk-sprites.png"

  share.bind "touchstart", ->
    openShareWindow()

  close.bind "click", (event) ->
    closeShareWindow()
    event.preventDefault()

  output.bind "touchcancel", ->
    setTimeout closeShareWindow, 50