# settings
width = 500
height = 500

# globals
$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>&nbsp;</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

# called automatically on domcontentloaded
init = ->
	$container = $ '.crayon_mockup'
	$toolbar = $ '<div class="toolbar">Tools: </div>'
	$draw_tool_button = $ '<span class="button">draw</span>'
	$edit_tool_button = $ '<span class="button">edit (coming soon)</span>'
	$delete_tool_button = $ '<span class="button">delete (coming soon)</span>'
	$toolbar.append $draw_tool_button
	$toolbar.append $edit_tool_button
	$toolbar.append $delete_tool_button
	$draw_tool_button.click ->
		if cur_tool?
			cur_tool.disable()
		cur_tool = new DrawTool $tool_extra
	$edit_tool_button.click ->
		if cur_tool?
			cur_tool.disable()
		cur_tool = new EditTool $tool_extra
	$delete_tool_button.click ->
		if cur_tool?
			cur_tool.disable()
		cur_tool = new DeleteTool $tool_extra
	$tool_extra = $ '<div class="tool_extra"></div>'
	$container.append $toolbar
	$container.append $tool_extra
	svg = document.createElementNS svg_ns, 'svg'
	svg.setAttribute 'width', width
	svg.setAttribute 'height', height
	svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
	$svg = $ svg
	$container.append $svg
	cur_tool = new TutorialTool $tool_extra
	$svg.mousedown (e) ->
		offset = $svg.offset()
		if cur_tool?
			return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
	$svg.mousemove (e) ->
		offset = $svg.offset()
		if cur_tool?
			return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
	($ document).keydown (e) ->
		if cur_tool?
			return cur_tool.keydown e.keyCode

$ init