 (def h-box-style {:border-right  "dashed 1px blue" :overflow "hidden"})
 (def v-box-style {:border-bottom "dashed 1px blue" :overflow "hidden"})
 
-(defn panel
+(def size-options
+  [{:id :inital :label "initial"}
+   {:id :auto   :label "auto"}
+   {:id :none   :label "none"}
+   {:id :px     :label "px"}
+   {:id :%      :label "%"}])
+
+(def box1-db (reagent/atom {:size :%  :px 100 :% 60 :show? true}))
+(def box2-db (reagent/atom {:size :px :px 100 :% 50 :show? true}))
+(def box3-db (reagent/atom {:size :%  :px 100 :% 40 :show? true}))
+
+(defn box-controls
+  [box-name control]
+  [h-box
+   :align    :center
+   :width    "630px"
+   :gap      "8px"
+   :padding  "4px"
+   :style    {:background-color "#f8f8f8"}
+   :children [[box :align :start :child [:span box-name " " [:code ":size"]]]
+              [checkbox
+               :model     (:show? @control)
+               :on-change #(swap! control assoc :show? %)]
+              [horizontal-bar-tabs
+               :model     (:size @control)
+               :tabs      size-options
+               :on-change #(swap! control assoc :size %)]
+              (when (= (:size @control) :%)
+                [h-box
+                 :gap "5px"
+                 :children [[slider
+                             :model     (:% @control)
+                             :min       0
+                             :max       100
+                             :width     "200px"
+                             :on-change #(swap! control assoc :% %)]
+                            [:span (str (:% @control) "%")]]])
+              (when (= (:size @control) :px)
+                [h-box
+                 :gap "5px"
+                 :children [[slider
+                             :model     (:px @control)
+                             :min       0
+                             :max       500
+                             :width     "200px"
+                             :on-change #(swap! control assoc :px %)]
+                            [:span (str (:px @control) "px")]]])]])
+
+(defn box-size
+  "Works out what to pass to :size from a map like: {:size :%  :px 100 :% 60 :show? true}"
+  [control]
+  (cond (= (:size control) :%)  (str (:% control) "%")
+        (= (:size control) :px) (str (:px control) "px")
+        :else                   (name (:size control))))
+
+  (defn panel
   []
   (let [container-size (reagent/atom 500)
-        gap-size       (reagent/atom 0)
-        box1-size      (reagent/atom 60)
-        box2-size      (reagent/atom 100)]
+        gap-size       (reagent/atom 0)]
     (fn
       []
       [v-box

                                           :height   (px @container-size)
                                           :gap      (px @gap-size)
                                           :style    {:border "dashed 1px red"}
                                           :children [[box
                                                       :size  (str @box1-size "%")
                                                       :style v-box-style
                                                       :child [:div {:style rounded-panel} "Box 1" [:br] ":size " (str @box1-size "%")]]
                                                      ;[line :size "0px" :color "initial" :style {:border-top "dashed 1px red"}]
                                                      [box
                                                       :size  (px @box2-size)
                                                       :style v-box-style
                                                       :child [:div {:style rounded-panel} "Box 2" [:br] ":size " (px @box2-size)]]
                                                      ;[line :size "0px" :color "initial" :style {:border-top "dashed 1px red"}]
                                                      [box
                                                       :size  (str (- 100 @box1-size) "%")
                                                       :style v-box-style
                                                       :child [:div {:style rounded-panel} "Box 3" [:br] ":size " (str (- 100 @box1-size) "%")]]]]]]]]
                  [gap :size "30px"]]])))

(ns re-demo.h-box
  (:require [re-com.core     :refer [h-box v-box box gap line scroller border label title button checkbox hyperlink-href slider horizontal-bar-tabs]]
            [re-com.box      :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]]
            [re-com.util     :refer [px]]
            [re-demo.utils   :refer [panel-title component-title args-table github-hyperlink status-text paragraphs]]
