           (recur (inc i) cur-val)
           (recur (inc i) max-val))))))
 
-(defn draw-select-rect! [canvas-width canvas-height canvas-context x mouse-down?]
+(defn draw-select-rect! [canvas-width canvas-height canvas-context mouse-down? mouse-over?]
   (.clearRect canvas-context 0 0 canvas-width canvas-height)
-  (.fillRect canvas-context x 0 100 100)
-  (when mouse-down?
+  (.fillRect canvas-context 0 0 100 100)
+  (cond
+    mouse-down?
+    (do
       (aset canvas-context "strokeStyle" "aliceblue")
       (aset canvas-context "lineWidth" 6)
-      (.strokeRect canvas-context x 2 100 96)))
+      (.strokeRect canvas-context 0 2 100 96))
+    mouse-over?
+    (do
+      (aset canvas-context "strokeStyle" "aliceblue")
+      (aset canvas-context "lineWidth" 2)
+      (.strokeRect canvas-context 0 0 100 100))))
 
 (defn draw-buffer! [width height canvas-context data]
   (let [step (.ceil js/Math (/ (.-length data) width))

(ns ^:figwheel-always web-audio-cljs.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [goog.dom :as googdom]
            [goog.events :as events]
            [web-audio-cljs.audio :as audio]
            [web-audio-cljs.utils :refer [l]]
            [cljs.core.async :refer [put! chan timeout sliding-buffer <! >!]])

      (let [{:keys [canvas-width canvas-height left-x x-offset]} (om/get-state owner)
            canvas (om/get-node owner "canvas-ref")
            canvas-context (.getContext canvas "2d")
            mouse-move-chan (listen js/document (.-MOUSEMOVE EventType))
            mouse-up-chan (listen js/document (.-MOUSEUP EventType))]
        ;;;
        ;;; On any mouse up on the document, set mouse-down to false.
        (go
          (while true
            (let [e (<! mouse-move-chan)
                  x (.-clientX e)
                  {:keys [mouse-down x-offset mouse-down-pos]} (om/get-state owner)
                  [old-x old-y] mouse-down-pos
                  new-x (+ x-offset (- x old-x))
                  clamp-x (.clamp goog.math new-x 0 (- 400 canvas-width))]
              (when mouse-down
                (om/update-state! owner #(assoc % :x-offset clamp-x :mouse-down-pos [x old-y]))))))
        (om/update-state! owner #(assoc % :canvas-context canvas-context :canvas canvas))))

    om/IDidUpdate
    (did-update [_ _ _]
      (let [{:keys [canvas-width canvas-height canvas-context
                    x-offset mouse-down mouse-over]} (om/get-state owner)]
        (if canvas-context
          (draw-select-rect! canvas-width canvas-height canvas-context mouse-down mouse-over)
          (om/refresh! owner))))

    om/IRenderState
    (render-state [_ {:keys [canvas-width canvas-height mouse-down x-offset]}]
      (dom/canvas #js {:width       canvas-width
                       :height      canvas-height
                       :style       #js {:opacity 0.3 :position "absolute" :left x-offset}
                       :ref         "canvas-ref"
                       :onMouseDown (fn [e] (om/set-state! owner :mouse-down true) (om/set-state! owner :mouse-down-pos [(.-clientX e) (.-clientY e)]))
                       :onMouseUp   #(om/set-state! owner :mouse-down false)
                       :onMouseOver #(om/set-state! owner :mouse-over true)
                       :onMouseOut  #(om/set-state! owner :mouse-over false)}
                  "no canvas"))))

(defn buffer-view [data owner]
