 
   pause: () =>
     @$timer.toggle()
-    if @$switcherStopper.hasClass('fa-pause')
-      @$switcherStopper.removeClass('fa-pause').addClass('fa-play')
+    if @isRunning()
+      @dashboardSwitcher.stopLoop()
+      @$switcherStopper.removeClass('fa-pause').addClass('fa-play').html(@startTimerContent)
     else
-      @$switcherStopper.removeClass('fa-play').addClass('fa-pause')
+      @dashboardSwitcher.startLoop @currentTime
+      @$switcherStopper.removeClass('fa-play').addClass('fa-pause').html(@stopTimerContent)
+
+  isRunning: () =>
+    @$switcherStopper.hasClass('fa-pause')
 
   resetCountdown: () ->
     # Get time from form


# Dashboard loaded and ready
Dashing.on 'ready', ->
  window.SwitcherControls = SwitcherControls
  # If multiple widgets per list item, switch them periodically
  $('.gridster li').each (index, listItem) ->
    $listItem = $(listItem)

# TODO:
#   - show the name of the next dashboard
#   - add controls for manually cycling through dashboards
class DashboardSwitcherControls
  arrowContent = "&#65515;"
  stopTimerContent = "stop timer"
  startTimerContent = "start timer"

  constructor: (interval=60000, dashboardSwitcher) ->
    @currentTime = parseInt(interval, 10)
    @interval = parseInt(interval, 10)
    @$elements = $('#dc-switcher-controls')
    @dashboardSwitcher = dashboardSwitcher
    @incrementTime = 1000 # refresh every 1000 milliseconds
    @arrowContent = @$elements.data('next-dashboard-content') || DashboardSwitcherControls.arrowContent
    @stopTimerContent = @$elements.data('stop-timer-content') || DashboardSwitcherControls.stopTimerContent
    @startTimerContent = @$elements.data('start-timer-content') || DashboardSwitcherControls.startTimerContent
    @

  present: () ->
