         height: @state.frameDimensions.height,
         x: 0,
         y: 0
-
-
-  toggleZoom: ->
-    @setState zooming: !@state.zooming
 
   togglePanOn: ->
     unless @state.panEnabled

              </div>
            </div>
            <div>
              <button title={"zoom out"} className={"zoom-out fa fa-minus" + if @canZoomOut() then " disabled" else "" } onMouseDown={ @continuousZoom.bind(this, 1.1 ) } />
            </div>
            <div>
              <button title={"zoom in"} className="zoom-in fa fa-plus" onMouseDown={@continuousZoom.bind(this, .9)} onMouseUp={@toggleZoom} />
            </div>
            <div>
              <button title={"rest zoom levels"} className={"reset fa fa-refresh" + if @canZoomOut() then " disabled" else ""} onClick={ this.zoomReset } ></button>


  continuousZoom: (change) ->
    return if change == 0
    @setState zooming: true, =>
      zoomNow = =>
        # if !@state.zooming, we don't want to continuously call setTimeout
        return if !@state.zooming
        @zoom(change)
        clearTimeout @state.zoomingTimeoutId
        @setState zoomingTimeoutId: setTimeout(zoomNow, 200)
      
      zoomNow()

  zoom: (change) ->
    return if !@state.zooming
    clearTimeout @state.zoomingTimeoutId
    newNaturalWidth = @state.viewBoxDimensions.width * change
    newNaturalHeight = @state.viewBoxDimensions.height * change
