rateHappiness = function() {

  var rateHappinessInput = $('#rate-happiness__input'),
    circleOuter = $('.circle-outer'),
    slider = $('.slider'),
    eye1 = $('.eye-1'),
    eye2 = $('.eye-2'),
    eyes = '.eye-1, .eye-2',
    mouth = '.mouth',
    rateHappinessBG = '.rate-happiness__bg',
    rateHappinessNumberLabel = $('.rate-happiness__number span'),
    revealElem = $('.rate-happiness__number, .rate-happiness .btn'),
    rateHappinessLabel = $('.rate-happiness__label')

  
  if (rateHappinessInput.length > 0) {
    TweenMax.set(rateHappinessInput, {
      visibility: 'visible',
      rotation: -90
    })
    
    TweenMax.set([circleOuter], {
      drawSVG: '1.6% 0%',
      transformOrigin: '50% 50%'
    })
       
    TweenMax.set([slider], {
      transformOrigin: '50% 50%'
    })

    TweenMax.set([eye1], {
      y: -10
    })

    TweenMax.set([eye2], {
      y: +185
    })

    MorphSVGPlugin.convertToPath(eye1);
    MorphSVGPlugin.convertToPath(eye2);
    
    var tlEyes = new TimelineMax({
      paused: true,
      repeat: -1,
      yoyo: true
    });

    tlEyes.to(eyes, 1, {
        morphSVG: 'M349,189.167 C349,207.0240228162857,334.5240228162857,221.5,316.667,221.5,298.80997718371424,221.5,284.33399999999995,207.0240228162857,284.33399999999995,189.167,284.33399999999995,171.3099771837143,298.80997718371424,156.834,316.667,156.834,334.5240228162857,156.834,349,171.3099771837143,349,189.167z'
      })
      .to(eyes, 1, {
        morphSVG: 'M294.666,225.765v-74.049c3.206-0.965,6.41-1.443,9.619-1.443c10.578,0,19.637,3.761,27.174,11.298 c7.535,7.537,11.297,16.587,11.297,27.17c0,10.578-3.762,19.639-11.297,27.168c-7.537,7.538-16.596,11.305-27.174,11.305 C301.076,227.213,297.872,226.73,294.666,225.765L294.666,225.765z'
      })

    var tlMouth = new TimelineMax({
      paused: true,
      repeat: -1,
      yoyo: true
    });

    tlMouth.to(mouth, 1, {
      morphSVG: "M226.105,395.352c-46.977-19.485-79.9-65.917-79.604-119.915 c0.292-53.432,33.031-99.099,79.438-118.428"
    });

    Draggable.create(slider, {
      type: "rotation",
      throwProps: true,
      bounds: {
        minRotation: 1,
        maxRotation: 360
      },
      throwProps: true,
      onDrag: function() {

        var rotation = Math.ceil(slider[0]._gsTransform.rotation);
        var intHSL = Math.ceil(-((rotation / (360 / 220)) + 125));
        var percentage = Math.ceil(((rotation / 360) * 100));
        var lightness = Math.ceil(70 - ((percentage / 7)));

        TweenMax.to(rateHappinessBG, 0, {
          backgroundImage: 'linear-gradient(to bottom,hsl(' + intHSL + ',80%,' + lightness + '%) 0%,hsl(' + (intHSL + 30) + ',80%,' + lightness + '%) 80%)'
        });

        animation(percentage);

        rateHappinessNumberLabel.text(percentage).css('color', 'hsl(' + (intHSL + 30) + ',80%,' + lightness + '%)');
        revealElem.show();

        tlMouth.progress((percentage / 100)).pause();
        tlEyes.progress((percentage / 100)).pause();
      }
    });

    function animation(myVar, rotation) {

      switch (true) {
        case (myVar > 75):
          rateHappinessLabel.text('Very Happy');
          break;
        case (myVar > 50):
          rateHappinessLabel.text('Happy');
          break;
        case (myVar > 25):
          rateHappinessLabel.text('Feeling OK');
          break;
        case (myVar > 10):
          rateHappinessLabel.text('Unhappy');
          break;
        default:
          rateHappinessLabel.text('Very Unhappy');
          break;
      }

      var tl = new TimelineMax({});

      tl.to(circleOuter, 0, {
        drawSVG: myVar + '% 0%',
        ease: Sine.easeInOut
      })

      return tl;

    }

    //var xStart, yStart = 0;

    //document.addEventListener('touchstart', function (e) {
    //    xStart = e.touches[0].screenX;
    //    yStart = e.touches[0].screenY;
    //});

    //document.addEventListener('touchmove', function (e) {
    //    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    //    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    //    if ((yMovement * 3) > xMovement) {
    //        e.preventDefault();
    //    }
    //});
  }
}

rateHappiness();