     showButtons: false
     color: options.fg
     move: refreshForeground
-    dragstop: updateUrlWithForeground
-  }).on("dragstop.spectrum", updateUrlWithForeground)
+  }).on("dragstop.spectrum", (_, value) -> updateUrlQuery("fg", value))
 
   $("#bg-color-picker").spectrum({
     flat: true

    allowEmpty: true
    move: refreshBackground
    change: refreshBackground
  }).on("dragstop.spectrum", updateUrlWithBackground)

  refreshForeground($("#fg-color-picker").spectrum("get"))
  refreshBackground($("#bg-color-picker").spectrum("get"))

  $innerRadius.rangeslider {
    polyfill: false
    onSlide: updateRadiusSlider
    onSlideEnd: updateUrlWithRadius
  }
  $innerRadius.val(options.r).change()

  $straightPercentage.rangeslider {
    polyfill: false
    onSlide: updatePercentageSlider
    onSlideEnd: updateUrlWithStraightPercentage
  }
  $straightPercentage.val(options.l).change()

  $controlPercentage.rangeslider {
    polyfill: false
    onSlide: updatePercentageSlider
    onSlideEnd: updateUrlWithControlPercentage
  }
  $controlPercentage.val(options.c).change()

    drawStarFunction()


updateSlider = (sliderElement, value) ->
  $(".rangeslider__handle", sliderElement.$range).text(value)
  refreshStarPath()


updateUrlQuery = (key, value) ->
  uri.search (queryParams) ->
    queryParams[key] = value
    return
  history.replaceState(null, "", uri.resource())


initializeOptions = () ->
  uri = new URI()
