-- Slider for Mice!

-- Example which shows how to make a slider

myShapes model =
   -- highlighted slider
   [ rect model.value 10 |> filled (rgb 0 0 255) |> move (-50 + 0.5 * model.value, 0)
   -- whole slider, drawn on top so it catches the clicks/moves
   , rect 100 10 |> filled (rgba 0 0 0 0.01)
       |> addOutline (solid 0.5) red
       -- clicking on the slider starts the adjustment
       |> notifyMouseDownAt StartSlider
       -- moving over the slider sends a message, but the update only accepts it if we are editing
       |> notifyMouseMoveAt Slider
       -- both lifting the mouse, and mousing outside the slider stops the adjustment
       |> notifyMouseUp EndSlider
       |> notifyLeave EndSlider
   -- current value of the slider
   , text (String.fromFloat model.value |> String.left 6)
        |> filled black
        |> move (40,-50)
   ]

type Msg = Tick Float GetKeyState
         | Slider (Float,Float)
         | StartSlider (Float,Float)
         | EndSlider

update msg model = case msg of
                     Tick t _ ->
                       { model | time = t }
                     Slider (x,_) ->
                       if model.editing then
                           { model | value = if x < -50
                                              then 0
                                              else if x > 50
                                                    then 100
                                                    else x + 50
                           }
                       else
                           model
                     StartSlider (x,_) ->
                           { model | value = if x < -50
                                              then 0
                                              else if x > 50
                                                    then 100
                                                    else x + 50
                                   , editing = True
                           }
                     EndSlider -> { model | editing = False }


init : { time : Float, value : Float, editing : Bool }
init = { time = 0, value = 0, editing = False }