# 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'
mouse = [0,0]

update_path = (path, data, flags) ->
	d = ''
	for loc, i in data
		if i is 0
			d += 'M '
		else
			d += ' L '
		d += "#{loc[0]} #{loc[1]}"
	if flags?.to_mouse?
		d += "L #{mouse[0]} #{mouse[1]}"
	if flags?.close?
		d += " z"
	path.setAttribute "d", d

cancel_drawing = ->
	if selection?
		svg.removeChild selection.element
	selection = null
	return false
stop_drawing = ->
	if selection?
		update_path selection.element, selection.data
	selection = null
	return false
stop_close_drawing = ->
	if selection?
		update_path selection.element, selection.data, close: true
	selection = null
	return false
click = (x, y) ->
	unless selection?
		path = document.createElementNS svg_ns, "path"
		selection = data: [], element: path
		svg.appendChild path
	selection.data.push [x, y]
	update_path selection.element, selection.data
mousemove = (x, y) ->
	mouse[0] = x
	mouse[1] = y
	if selection?
		update_path selection.element, selection.data, 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()

# called automatically on domcontentloaded
init = ->
	$container = $ '.crayon_mockup'
	$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>'
	$tools = $ '<div class="toolbar"></div>'
	$tools.append $stop_button
	$tools.append $stop_close_button
	$tools.append $cancel_button
	$stop_button.click stop_drawing
	$stop_close_button.click stop_close_drawing
	$cancel_button.click cancel_drawing
	$container.append $tools
	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
	$svg.mousedown (e) ->
		offset = $svg.offset()
		click e.pageX - offset.left, e.pageY - offset.top
		return false
	$svg.mousemove (e) ->
		offset = $svg.offset()
		mousemove e.pageX - offset.left, e.pageY - offset.top
	($ document).keydown (e) ->
		return keydown e.keyCode

$ init