# globals
$svg = null #jquery object for svg element
selected = null

stop_drawing = ->
	selected = null
click = (x, y) ->
	unless selected?
		selected = []
	if selected.length > 0
		last = selected[selected.length - 1]
		obj = document.createElementNS("http://www.w3.org/2000/svg", "path")
		obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}")
		$svg[0].appendChild(obj)
	selected.push [x, y]
	console.log selected

# called automatically on domcontentloaded
init = ->
	$container = $ '.crayon_mockup'
	$stop_button = $ '<div class="button">[end current polyline]</div>'
	$tools = $ '<div class="toolbar"></div>'
	$tools.append $stop_button
	$stop_button.click stop_drawing
	$container.append $tools
	$svg = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
	#$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
	#$svg.append $test_path
	$container.append $svg
	console.log 'hi'
	$svg.mousedown (e) ->
		console.log 'hi'
		offset = $svg.offset()
		click e.pageX - offset.left, e.pageY - offset.top

$ init