 		.attr "r", 5
 		.style "fill", (d) -> colors(d.id)
 
-		# override to turn off force layout
-		.call force.drag().on "drag.force", () -> 
-			d3.select(this).attr "transform", "translate(" + d3.event.x + "," + d3.event.y + ")"
-		
-		.call force.drag().origin () ->
-			t = d3.transform(d3.select(this).attr("transform")).translate
-			{x:t[0], y:t[1]}
-		
 		.on "mousedown", (d) ->
 			mousedown_node = true
-			scale = zoom.scale()
-			translate = zoom.translate()
+			#scale = zoom.scale()
+			#translate = zoom.translate()
 			select this
 		.on "mouseup", (d) ->
 			mousedown_node = false
-			zoom.scale scale
-			zoom.translate translate
+			#zoom.scale scale
+			#zoom.translate translate
+
+setPanMode = (turn_on) ->
+	if turn_on
+		console.log "drag on"
+		nodes.call force.drag
+	else
+		console.log "drag off"
+		nodes
+			.on "mousedown.drag", null
+			.on "touchstart.drag", null
+
+setPanMode(true)
 
 # mark a node as selected
 select = (node) -> 

	.append "g"

# init nodes
node_data = ({id:a, reflexive:false} for a in [1..100])

#animation
tick = () ->
	nodes.attr "cx", (d) -> d.x
	nodes.attr "cy", (d) -> d.y

#force layout
force = d3.layout.force()
		.nodes node_data
		.size [width, height]
		.linkDistance 150
		.charge -500


mousedown_node = false

links = svg.selectAll ".link"
		.data link_data 
		.enter()
		.append "line"
		.attr "class", "link"
		.style "stroke", "#000" 
		.style "stroke-width", () -> 1

		# override to turn off force layout
		"""
		.call force.drag().on "drag.force", () -> 
			d3.select(this).attr "transform", "translate(" + d3.event.x + "," + d3.event.y + ")"
		
		.call force.drag().origin () ->
			t = d3.transform(d3.select(this).attr("transform")).translate
			{x:t[0], y:t[1]}
		"""
#draw data
nodes = svg
		.selectAll ".node"
