gistfile1.coffee

$(document).ready ->
  ###
  place-holder for animation loop
  ###
  animate = ""

  ###
  set canvas to a variable
  ###
  canvas = document.getElementById("canvas")
  ctx = canvas.getContext("2d")

  ###
  inital variables
    - current is box currently touched
    - level is height of the flag (in pixels)
  ###
  current = 0
  level = 0
  ###
  function for working out if the flag should go up or down..
  (i.e. clockwise spin or anticlockwise spin?)
  ###
  upOrDown = (boxnum) ->
    ###
    ignore if current box is the same
    ###
    if boxnum == current
      return false;
    else
      value = (current - boxnum)
      current = boxnum
      if value == -3 
        value = 1
      if value == 3 
        value = -1
      return value
  ###
    Animation for reaching goal.
  ###
  flash = ->
    canvas.width = 201
    canvas.width = 202
    red = 200 + Math.floor(Math.random()*20)
    blue =  70 + Math.floor(Math.random()*180)
    green =  70 + Math.floor(Math.random()*180)
    ctx.fillStyle = "rgb("+red+","+green+","+blue+")"
    ctx.beginPath()
    ctx.rect(0,0,202,300)
    ctx.fill()
    startpoint = 240+level+10
    ctx.beginPath()
    ctx.fillStyle="rgb(184,220,244)"
    ctx.moveTo(48,startpoint)
    ctx.lineTo(140,startpoint+30)
    ctx.lineTo(48,startpoint+60)
    ctx.fill()   
  
  ###
    Move flag if not already at top level, otherwise animate.
  ###
  renderLevel = (level) ->
    if level < -210
      animate = setInterval flash, 100
    else
      clearInterval(animate)
      canvas.width = 201
      canvas.width = 202
      startpoint = 240+level
      ctx.beginPath()
      ctx.fillStyle="rgb(184,220,244)"
      ctx.moveTo(48,startpoint)
      ctx.lineTo(140,startpoint+30)
      ctx.lineTo(48,startpoint+60)
      ctx.fill()
  ###
  Register movement
  Gets position of finger within bottom box, then maps it to one of 4 quaters.
  i.e.
  ---------------
  |   0  |  1   |
  |      |      |
  |------|------|
  |   4  |  2   |
  |      |      |
  --------------- 
  ###
  $("#boxes").bind "touchmove", (e) -> 
    ###
     get x / y post of finger move
    ###
    e.preventDefault()
    touch = e.originalEvent.changedTouches[0]
    xpos = touch.pageX - $(this).position().left
    ypos = touch.pageY - $(this).position().top
    ### 
      Sanity checks for xpos/ypos
    ###
    boxheight = 140
    boxwidth = 200
    if xpos > boxheight
      xpos = boxheight
    if xpos < 0
       xpos = 0
    if ypos > boxheight
       ypos = boxheight
    if ypos < 0
       xpos = 0
    ###
      Which box are we at?
    ###
    if(xpos > 0 && xpos < boxwidth/2)
      if(ypos > 0 && ypos < boxheight/2)
        boxnow = 1
      else
        boxnow = 4
    else
      if(ypos > 0 && ypos < boxheight/2)
        boxnow = 2
      else
        boxnow = 3
    value = upOrDown(boxnow)
    if ((level > -211 && value < 0) || (level <   0 && value > 0 ))
      level = level + (value * 10)
      renderLevel(level)
  ###
    Initial flag render.
  ###
  renderLevel(level)
  ###
  Canvas touch - drop flag
  ###
  $("#pole").bind "touchstart", (e) -> 
    level = 0
    renderLevel(level)