              :y 0
              :r 200
              :alpha 0}
+   :es-captions {:es3 {:alpha 0}
+                 :es5 {:alpha 0}
+                 :es6 {:alpha 0}
+                 :es7 {:alpha 0}
+                 :es8 {:alpha 0}}
    })
 
 ;; Current state of the application.


(def slide-actions
  "Actions to take for each slide."
  [nil ;; no action for first slide
   #(go
      (<! (multi-animate!
            {:a 900 :b 0 :duration 1} [:js-face :x]
            {:a 1 :b 0 :duration 0.4} [:title :alpha]
            )))
   #(go
      (<! (multi-animate!
            {:a 0 :b 400 :duration 2} [:cam :x]
            {:a 0 :b -600 :duration 2} [:js-face :y]
            {:a 0 :b 600 :duration 2} [:js-face :x]
            {:a 0 :b (* 2 PI) :duration 2} [:js-face :angle]
            {:a 1 :b 0 :duration 2} [:js-face :alpha]
            {:a 0 :b 1 :duration 1} [:js-core :alpha]
            {:a 1 :b 2 :duration 2} [:cam :zoom]
            )))
   ])

(def num-slides
  (count slide-actions))

  (restore!)
  )

(defn draw-es-captions!
  [{:keys [es3 es5 es6 es7 es8]}]
  (save!)
  (doseq [[i es] (map-indexed vector [es3 es5 es6 es7 es8])]
    (when-not (zero? (:alpha es))
      (save!)
      (global-alpha! (:alpha es))
      (let [angle (/ PI 4)
            dx (cos angle)
            dy (sin angle)
            r (-> @state :js-face :r)
            dr (get-core-dr r)
            cr (- (get-core-radius i r) (/ dr 2))
            y (- (* dy cr))
            x0 (* dx cr)
            x1 250
            a 10
            at (/ a 3)]

        ;; highlight the layer
        (line-width! dr)
        (circle! 0 0 cr)
        (stroke-style! "#1EA")
        (stroke!)

        ;; point at layer
        (line-width! 5)
        (line-cap! "round")
        (stroke-line! x0 y x1 y)
        (stroke!)

        ;; draw caption
        (let [layer (get core-layers i)]
          (text-baseline! "middle")
          (text-align! "left")
          (fill-style! "#EEE")
          (font! "100 40px Roboto")
          (fill-text! (:name layer) (+ 10 x1) y)
          (fill-style! "#AAA")
          (font! "100 14px Roboto")
          (fill-text! (:desc layer) (+ 15 x1) (+ 30 y)))

        )
      (restore!)
      ))
  (restore!)
  )


;;--------------------------------------------------------------------------------
;; Drawing
