(deflisten nowplaying_imgpath :initial ""
                               'scripts/home/nowplayingart.sh')
;(deflisten nowplaying_title :initial ""
;                               'scripts/home/nowplaying-title.sh')
;(deflisten nowplaying_artist :initial ""
;                               'scripts/home/nowplaying-artist.sh')
(deflisten nowplaying_info :initial '{"status":"","artist":"","title":""}'
                               'scripts/home/nowplaying.sh')


(defvar large_album_art false)
(defvar small_art_overlay false)
(defvar large_art_overlay false)
(defwidget nowplayingbar []
;  (centerbox
  (box
;    :visible true
    :visible {jq(nowplaying_info,'.title','r') != ""}
    :orientation 'v'
    :class "nowplayingbar"
    :space-evenly false
    (box
      :orientation "h"
      :space-evenly false
      :halign "center"
      :width 300
      :height 100
;      (nowplaying_revealer :visible {!large_album_art}
;                           :width 100
;                           :height 100)
      (revealer
        :transition "slideright"
;        :transition "slideleft"
        :duration "300ms"
        :reveal {!large_album_art}
        (eventbox
          :onclick '${EWW_CMD} update large_album_art=true'
          :onhover '${EWW_CMD} update small_art_overlay=true'
          :onhoverlost '${EWW_CMD} update small_art_overlay=false'
          (button
            :height 100
            :width 100
            :valign "fill"
            :halign "fill"
            :hexpand false
            :vexpand false
            :onclick '${EWW_CMD} update large_album_art=true'
            (overlay
              (nowplayingart :size 'small')
              (revealer
                :transition "crossfade"
                :duration "300ms"
                :reveal {small_art_overlay}
                (label :class "art-button-overlay small"
                       :justify "center"
                       :xalign 0.5
                       :yalign 0.5
                       :height 80
                       :width 80
                       :text ""))))))
      (box
        :class "mediadetails ${large_album_art ? 'fullwidth' : ''}"
        :orientation "v"
         :space-evenly true
        :halign "fill"
        :hexpand true
        (label 
          :justify "center"
          :text "󰎇 ${jq(nowplaying_info,'.title','r')}
󰠃 ${jq(nowplaying_info,'.artist','r')}")
        (box
          :orientation "h"
          :space-evenly true
          :halign "fill"
          :hexpand true
;          :width 130
;          :spacing 15
          :height 50
          (button
            :class "mediabutton"
            :valign "center"
            :halign "center"
            :height 25
            :width 25
            :onclick "playerctl previous"
            "")
          (button
            :class "mediabutton"
            :valign "center"
            :halign "center"
            :height 25
            :width 25
            :onclick "playerctl play-pause"
            {(jq(nowplaying_info,'.status','r') == 'playing') ? "" : ""})
          (button
            :class "mediabutton"
            :valign "center"
            :halign "center"
            :height 25
            :width 25
            :onclick "playerctl next"
            ""))))
;;    (nowplaying_revealer :visible false)))
    (revealer
;        :transition "slideup"
        :transition "slidedown"
        :duration "300ms"
        :reveal {large_album_art}
        (eventbox
;          :visible {large_album_art}
          :onclick '${EWW_CMD} update large_album_art=false'
          :onhover '${EWW_CMD} update large_art_overlay=true'
          :onhoverlost '${EWW_CMD} update large_art_overlay=false'
          (button
            :height 100
            :width 100
            :valign "fill"
            :halign "fill"
            :hexpand false
            :vexpand false
            :onclick '${EWW_CMD} update large_album_art=false'
            (overlay
              (nowplayingart :size 'big')
; :css 'margin: 20px;')
              (revealer
                :transition "crossfade"
                :duration "300ms"
                :reveal {large_art_overlay}
                (label :class "art-button-overlay big"
                       :height 100
                       :width 100
                       :visible {large_art_overlay}
                       :text ""))))))))

(defwidget nowplayingart [size]
  (box
    :class "nowplayingart ${size}"
    :hexpand false
;    :width 100
;    :height 100
;    :path '${nowplaying_imgpath}'))
    :style "background-image: url('${nowplaying_imgpath}');"))