         x: 0,
         y: 0
 
-  enableKeyPan: ->
-    @setState
-      keyPanZoomEnabled: true
-
-  disableKeyPan: ->
-    @setState 
-      keyPanZoomEnabled: false
-
-
-  togglePan: ->
-    @setState panEnabled: !@state.panEnabled, => 
-      @toggleKeyPanZoom()
-
+
+  toggleZoom: ->
+    console.log "toggleZoom"
+    @setState zooming: !@state.zooming
+
+  togglePanOn: ->
+    unless @state.panEnabled == true
+      @setState panEnabled: true, =>
+        if @state.panEnabled then this.refs.subjectImage.focus()
+  
+  togglePanOff: ->
+    @setState panEnabled: false
+  
   toggleKeyPanZoom: ->
     @setState keyPanZoomEnabled: !@state.keyPanZoomEnabled, =>
       if @state.panEnabled then this.refs.subjectImage.focus()
 
   panByDrag: (e, d) ->
     return if @state.panEnabled == false
-
-    @setState
-      viewBoxDimensions:
-        x: @state.viewBoxDimensions.x -= d.x
-        y: @state.viewBoxDimensions.y -= d.y
+    minX = @state.frameDimensions.width - @state.viewBoxDimensions.width
+    minY = @state.frameDimensions.height - @state.viewBoxDimensions.height
+
+    @setState
+      viewBoxDimensions:
+        x: Math.max(0, Math.min(@state.viewBoxDimensions.x -= d.x, minX))
+        y: Math.max(0, Math.min(@state.viewBoxDimensions.y -= d.y, minY))
         width: @state.viewBoxDimensions.width
         height: @state.viewBoxDimensions.height
 
   frameKeyPan: (e)->
-    return if @state.keyPanZoomEnabled == false
+    console.log "frameKeyPan()"
+    console.log "---> keypress", e.which
+    console.log "---> @state.panEnabled", @state.panEnabled
+    return if @state.panEnabled == false
     keypress = e.which
     switch keypress
       # left

    frameDisplay = switch type
      when 'image'
        <div className="subject-image-frame" >
          <img ref="subjectImage" className={"subject pan-active"} src={src} style={SUBJECT_STYLE} onLoad={@handleLoad} tabIndex={0} onFocus={@enableKeyPan} onBlur={@disableKeyPan} />

          {if @state.loading
            <div className="loading-cover" style={@constructor.overlayStyle} >

        e.preventDefault()
        @panVertical(20) 
      # zoom out
      when 61 #187 
        e.preventDefault()
        @zoom(.9) 
      # zoom in 
      when 45 #189 
        @setState zooming: true
        e.preventDefault()
        @zoom(1.1) 

