                 # TODO compute the 20px translation
                 .tickSize(-@options.height+20, 0, 0)
 
+        @root.append('g')
+            .attr('class', 'grid')
+            .attr('width', @options.width)
+            # TODO compute the 20px translation
+            .attr('transform', "translate(0, #{@options.height - 20})")
+            .call(@grid.x)
+
         # brush
         element.dispatch = d3.dispatch('brushStart', 'brushEnd')
         @brush = d3.svg.brush()
             .x(@scales.x)
             .on('brushstart', => element.dispatch.brushStart(@brush.extent()))
             .on('brushend', => element.dispatch.brushEnd(@brush.extent()))
-            .extent([@options.brush.start.getTime(),@options.brush.end.getTime()])
-
-        draw = =>
-            # compute the area to show
-            #@scale.x.domain([ @options.start, @options.end ])
-
-            # x axis
-            @root.select('g.axis').remove()
-            @root.append('g')
-                .attr('class', 'axis')
-                # TODO compute the 20px translation
-                .attr('transform', "translate(0, #{@options.height - 20})")
-                .call(@axis.x)
-
-            # x axis grid
-            @root.select('g.grid').remove()
-            @root.append('g')
-                .attr('class', 'grid')
-                .attr('width', @options.width)
-                # TODO compute the 20px translation
-                .attr('transform', "translate(0, #{@options.height - 20})")
-                .call(@grid.x)
-
-            # brush
-            @root.select('g.brush').remove()
-            @root.append('g')
-                .attr('class', 'brush')
-                .call(@brush)
-                .selectAll('rect')
-                    # TODO remove hardcoded height
-                    .attr('height', "#{@options.height - 20 - 2}px")
-                    .attr('y', 0)
-
-        # call the repaint method to seupt the axis, grid, brush
-        draw()
+            .extent([@options.brush.start, @options.brush.end])
+
+        @root.append('g')
+            .attr('class', 'brush')
+            .call(@brush)
+            .selectAll('rect')
+                # TODO remove hardcoded height
+                .attr('height', "#{@options.height - 20 - 2}px")
+                .attr('y', 0)
 
         # dragging
         drag = =>

        end = new Date(params[1])
        end = @options.end if end > @options.end

        d3.select(@element).select('.brush').call(@brush.extent([start, end]))
        true
    
# Export the TimeSlider object for use in the browser

            @brush.x(@scales.x).extent(@brush.extent())

            # repaint the scales and axis
            d3.select(@element).select('g.axis').call(@axis.x)
            d3.select(@element).select('g.grid').call(@grid.x)
            d3.select(@element).select('g.brush').call(@brush)

            if @debug
                console.log("Done zooming, took #{new Date().getTime() - time.start.getTime()} milliseconds.")
