+$svg = null # jquery object for svg element
+svg = null # dom object for svg element
+selection = null
+svg_ns = 'http://www.w3.org/2000/svg'
+cur_tool = null
+mouse = x: 0, y: 0, buttons: [0,0,0]
+
+class Tool
+ constructor: (name) ->
+ @name = name
+ click: (x, y) ->
+ button_click: (button) ->
+ mousemove: (x, y) ->
+ keydown: (keycode) ->
+ disable: ->
+
+class TutorialTool extends Tool
+ constructor: (toolbar) ->
+ super 'tutorial'
+ @paths = []
+ choose = [
+ [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
+ [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
+ [[173,107],[169,159],[180,137],[189,133],[193,160]],
+ [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
+ [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
+ [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
+ [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
+ [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
+ [[160,207],[191,205]],
+ [[176,184],[174,228],[180,238]],
+ [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
+ [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
+ [[247,187],[249,241],[254,243]]
+ ]
+ for c in choose
+ path = data: c, element: document.createElementNS svg_ns, "path"
+ update_path path, close: c[c.length - 1][2] is 'z'
+ svg.appendChild path.element
+ @paths.push path
+ @tip = $ "<span> </span>"
+ toolbar.append @tip
+ disable: ->
+ @tip.remove()
+ for p in @paths
+ svg.removeChild p.element
+
+class DrawTool extends Tool
+ constructor: (toolbar) ->
+ super 'draw'
+ @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
+ @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
+ @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
+ toolbar.append @stop_button
+ toolbar.append @stop_close_button
+ toolbar.append @cancel_button
+ @stop_button.click @stop_drawing.bind @
+ @stop_close_button.click @stop_close_drawing.bind @
+ @cancel_button.click @cancel_drawing.bind @
+ click: (x, y) ->
+ if selection? and not selection.drawing?
+ selection = null
+ unless selection?
+ path = document.createElementNS svg_ns, "path"
+ selection = data: [], element: path, drawing: true
+ svg.appendChild path
+ selection.data.push [x, y]
+ update_path selection
+ button_click: (button) ->
+ if @[button]
+ return @[button]()
+ cancel_drawing: ->
+ if selection?
+ console.log selection.element
+ svg.removeChild selection.element
+ selection = null
+ return false
+ stop_drawing: ->
+ if selection?
+ update_path selection
+ selection = null
+ return false
+ stop_close_drawing: ->
+ if selection?
+ update_path selection, close: true
+ selection = null
+ return false
+ mousemove: (x, y) ->
+ mouse.x = x
+ mouse.y = y
+ if selection?
+ update_path selection, to_mouse: true
+ keydown: (keycode) ->
+ switch keycode
+ when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
+ return @stop_close_drawing()
+ when (' '.charCodeAt 0), 13, 10
+ return @stop_drawing()
+ when 27
+ return @cancel_drawing()
+ disable: ->
+ if selection?.drawing?
+ delete selection.drawing
+ @stop_button.remove()
+ @stop_close_button.remove()
+ @cancel_button.remove()
+
+class EditTool extends Tool
+ constructor: (toolbar) ->
+ super 'draw'
+ @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
+ toolbar.append @oops
+ disable: ->
+ @oops.remove()
+
+class DeleteTool extends Tool
+ constructor: (toolbar) ->
+ super 'draw'
+ @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
+ toolbar.append @oops
+ disable: ->
+ @oops.remove()
+
+update_path = (path, flags) ->
+ d = ''
+ sep = 'M'
+ for loc, i in path.data
+ d += "#{sep} #{loc[0]} #{loc[1]}"
+ sep = ' L'
+ if flags?.to_mouse?
+ d += "#{sep} #{mouse.x} #{mouse.y}"
+ if flags?.close
+ d += " z"
+ path.element.setAttribute "d", d