   refreshForeground($("#fg-color-picker").spectrum("get"))
   refreshBackground($("#bg-color-picker").spectrum("get"))
 
-  innerRadiusElement.rangeslider {
+  $innerRadius.rangeslider {
     polyfill: false
     onSlide: updateInnerRadius
   }
-  innerRadiusElement.val(0.5).change()
+  $innerRadius.val(0.5).change()



starPoints = () ->
  innerRadius = innerRadiusElement.val()
  outerRadius = 1;
  innerAngles = [-7*Math.PI/10, -3*Math.PI/10,   Math.PI/10, 5*Math.PI/10,  9*Math.PI/10]
  outerAngles = [-5*Math.PI/10,   -Math.PI/10, 3*Math.PI/10, 7*Math.PI/10, -9*Math.PI/10]



updateInnerRadius = () ->
  $(".rangeslider__handle", $innerRadius.$range).text($innerRadius.val())
  refreshStarPath()


$(document).ready () ->
  $innerRadius = $("#inner-radius")

  $("#straight").change(setShapeToLinear)
  $("#quadratic").change(setShapeToQuadratic)
