$ ->
  document.querySelector(".form").classList.remove("hidden")
  
  input =
    rating: 80
    
  mouth =
    eyes:
      width: 30
      height: 30
    sides: 350
    middle:
      top: 450
      bottom: 550
    
      

  render = ->

    $("#mouth").attr("d", "M100,#{mouth.sides} Q300,#{mouth.middle.top} 500,#{mouth.sides} Q300,#{mouth.middle.bottom} 100,#{mouth.sides} z")

    $("#face").attr("fill", "hsl(#{Math.round(input.rating)}, 60%, 74%)")
    
    $(".eye--left").attr("d", "M185 200 a #{mouth.eyes.height} #{mouth.eyes.width} 0 1 0 -1 0 z")
    $(".eye--right").attr("d", "M415 200 a #{mouth.eyes.height} #{mouth.eyes.width} 0 1 0 -1 0 z")
    
  update = ->
    position = input.rating
    
    keyframes =
      0:
        eyes:
          width: 20
          height: 35
        sides: 444
        middle:
          top: 184
          bottom: 390
      25:
        eyes:
          width: 23
          height: 32
        sides: 423
        middle:
          top: 217
          bottom: 217
        eyes:
          width: 30
          height: 30
      50:
        eyes:
          width: 30
          height: 30
          
        sides: 400
        middle:
          top: 400
          bottom: 400
      75:
        eyes:
          width: 40
          height: 30
        sides: 350
        middle:
          top: 450
          bottom: 596
      100:
        eyes:
          width: 50
          height: 30
        sides: 360
        middle:
          top: 360
          bottom: 680
          
    
    for index in [0..Object.keys(keyframes).length-1]
      startKeyframePosition = parseFloat(Object.keys(keyframes)[index])
      endKeyframePosition = parseFloat(Object.keys(keyframes)[index+1])
      startKeyframeValue = keyframes[startKeyframePosition]
      endKeyframeValue = keyframes[endKeyframePosition]
      
      
      if startKeyframePosition <= position <= endKeyframePosition
        
        relativePosition =  (position - startKeyframePosition)/(endKeyframePosition - startKeyframePosition)
        setObjectKeyframe(relativePosition, mouth, startKeyframeValue, endKeyframeValue)
      
      render()

  setObjectKeyframe = (position, object, startKeyframeObject, endKeyframeObject)->
    for key in Object.keys(startKeyframeObject)
      startValue = startKeyframeObject[key]
      endValue = endKeyframeObject[key]
      if typeof startKeyframeObject[key] is "number"
        object[key] = (endValue - startValue) * position + startValue
      else if typeof startKeyframeObject[key] is "object"
        setObjectKeyframe(position, object[key], startValue, endValue)


        
  gui = new dat.GUI()
  gui.close()
  gui.add(mouth, "sides", 0, 500).onChange(render)
  gui.add(mouth.middle, "top", 0, 1000).onChange(render)
  gui.add(mouth.middle, "bottom", 0, 1000).onChange(render)
  gui.add(mouth.eyes, "height", 1, 50).onChange(render)
  gui.add(mouth.eyes, "width", 1, 50).onChange(render)
  gui.add(input, "rating", 0, 100).onChange(update)

  
    
  window.updateSlider = (value)->
    input.rating = value
    update()
    listIndex = ~~(value/10)
    document.querySelector(".sliding-list ul").style.transform = "translateY(#{-listIndex*1.5}em)"
    
  render()
  updateSlider(80)