         $('#map_holder').on("dblclick", () ->
           $scope.zoomOut()
         )
-      width = 960
+
+      $scope.map_width = 960
       height = 500
       path = d3.geo.path()
-      svg = d3.select("#map_holder").append("svg").attr("width", width).attr("height", height)
+      svg = d3.select("#map_holder").append("svg").attr("width", $scope.map_width).attr("height", height)
       $scope.usMap = svg.append("g").attr("id", "map_with_districts")
-      tooltip = d3.select("#map_holder")
+      tooltip = $scope.makeTooltip()
+      dialog = d3.select("#map_dialog")
+        .style("opacity", 1e-6)
+        .style("z-index", "15")
+      $scope.makeMapGradients()
+      $scope.makeMapGradients()      
+      queue().defer(d3.json, "data/us.json").defer(d3.json, "data/us-congress-113.json").await ready
+
+    $scope.makeTooltip = () ->
+      return d3.select("#map_holder")
         .append("div")
         .attr("class", "map_tooltip")
         .style("z-index", "10")
         .style("visibility", "hidden")
-      dialog = d3.select("#map_dialog")
-        .style("opacity", 1e-6)
-        .style("z-index", "15")
-
-      $scope.makeMapGradients()
-      queue().defer(d3.json, "data/us.json").defer(d3.json, "data/us-congress-113.json").await ready
 
     $scope.makeMapGradients = () ->
       d3.select("#map_holder").select("svg")

          .attr("stop-color", (d)->  return d.color)

    $scope.zoomIn = (d) ->
      element = d.node()
      bbox = element.getBBox()
      x = bbox.x + bbox.width/2

      $scope.state_district = {state: null, district: null}
      $scope.district_reps = []
      d3.select('#map_dialog').transition().duration(750).style("opacity", 1e-6)
      if $scope.map_width is 960 then $scope.usMap.transition().duration(750).attr("transform", "translate(0,0)scale(1)").style "stroke-width", 1 + "px"

    $scope.showDistrictDialog = () ->
      $('#map_dialog').html($compile("<sub-view template='partials/district_reps'></sub-view>")($scope))
