-- Edit me!
on mousedown(clientX, clientY)
	call event.preventDefault()

log "drag start"

measure my x, y
	set xoff to clientX - x
	set yoff to clientY - y

transition margin-top to '-10px'
	           box-shadow to '8px 8px 2px 1px rgba(0, 0, 0, .2)'
	           over 50ms

repeat until event mouseup from document
		wait for mousemove(pageX, pageY) or
			mouseup(pageX, pageY) from document
		add { left: `${pageX - xoff}px`, top: `${pageY - yoff}px` }
	end

`i am a ${template + 1 or 0}`

transition margin-top to 0
	           box-shadow to '0 0 0 0'
	           over 50ms

add .disabled to #myDiv
	for tab in .tabs
		add .highlight to tab
	end

set arr to ["a", "ab", "abc"]
	set lengths to arr.map( \ str -> str.length )

tell #debug-demo
		transition 'background-color' to red
		transition 'background-color' to green
		transition 'background-color' to blue
		transition 'background-color' to initial
	end

get event.clientX

wait 1s
	wait 1ms
	wait n s
	wait n ms
	wait n seconds
	wait n milliseconds

on click toggle between .enabled and .disabled