// var degree = 1800;
// var clicks = 0;
//
// $(document).ready(function() {
//   $('#spin').click(function() {
//     clicks ++;
//     var newDegree = degree * clicks;
//     var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
//     totalDegree = newDegree + extraDegree;
//
//     $('#wheel .sec').each(function() {
//       var t = $(this);
//       var noY = 0;
//
//       var c = 0;
//       var n = 700;
//       var interval =  setInterval(function () {
//         c++;
//         if (c === n) {
//           clearInterval(interval);
//         }
//
//         var aoY = t.offset().top;
//         $('#txt').html(aoY);
//
//         if(aoY < 23.89) {
//           $('#spin').addClass('spin');
//           setTimeout(function () {
//             $("#spin").removeClass('spin');
//           }, 100);
//         }
//       }, 10);
//
//       $('#inner-wheel').css({'transform' : 'rotate(' + totalDegree + 'deg)'});
//
//       noY = t.offset().top;
//     });
//   });
// });


// var degree = 1800;
// var clicks = 0;
//
// $(document).ready(function() {
//   $('#spin').click(function() {
//     clicks ++;
//     var newDegree = degree * clicks;
//     var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
//     totalDegree = newDegree + extraDegree;
//
//     $('#wheel .sec').each(function() {
//       var t = $(this);
//       var noY = 0;
//
//       var c = 0;
//       var n = 700;
//       var interval =  setInterval(function () {
//         c++;
//         if (c === n) {
//           clearInterval(interval);
//         }
//
//         var aoY = t.offset().top;
//         $('#txt').html(aoY);
//
//         if(aoY < 23.89) {
//           $('#spin').addClass('spin');
//           setTimeout(function () {
//             $("#spin").removeClass('spin');
//           }, 100);
//         }
//       }, 10);
//
//       $('#inner-wheel').css({'transform' : 'rotate(' + totalDegree + 'deg)'});
//
//       noY = t.offset().top;
//     });
//   });
// });






var degree = 1800;
var clicks = 0;

 function spinFunction3(draw) {
    clicks ++;
    var newDegree = degree * clicks;
    var extraDegree = Math.floor(Math.random() )* 360 + (360-draw);
    totalDegree = newDegree + extraDegree;

    $('.wheel .range3').each(function() {
      var t = $(this);
      var noY = 0;

      var c = 0;
      var n = 700;
      var interval =  setInterval(function () {
        c++;
        if (c === n) {
          clearInterval(interval);
        }

        var aoY = t.offset().top;
        $('#txt').html(aoY);

        if(aoY < 23.89) {
          $('#spin').addClass('spin');
          setTimeout(function () {
            $("#spin").removeClass('spin');
          }, 100);
        }
      }, 10);

      $('.inner-wheel').css({'transform' : 'rotate(' + totalDegree + 'deg)'});

      noY = t.offset().top;
    });
  };

var degree = 1800;
var clicks = 0;

 function spinFunction4(draw) {
    clicks ++;
    var newDegree = degree * clicks;
    var extraDegree = Math.floor(Math.random() )* 360 + (360-draw);
    totalDegree = newDegree + extraDegree;

    $('.wheel .range4').each(function() {
      var t = $(this);
      var noY = 0;

      var c = 0;
      var n = 700;
      var interval =  setInterval(function () {
        c++;
        if (c === n) {
          clearInterval(interval);
        }

        var aoY = t.offset().top;
        $('#txt').html(aoY);

        if(aoY < 23.89) {
          $('#spin').addClass('spin');
          setTimeout(function () {
            $("#spin").removeClass('spin');
          }, 100);
        }
      }, 10);

      $('.inner-wheel').css({'transform' : 'rotate(' + totalDegree + 'deg)'});

      noY = t.offset().top;
    });
  };



//spinning wheel for color decision

var position,
  lastPosition,
  canSlide = false,
  range = $(".range"),
  input = range.find("input"),
  maxPoints = input.attr("max"),
  minPoints = input.attr("min"),
  prevVal = input.attr("min");

range.on("mousedown touchstart", rangeSliderInit);
range.on("mousemove touchmove", rangeSliderUpdate);
range.on("mouseup touchend", rangeSliderStop);

function pointerEvents(e) {
  var pos = { x: 0, y: 0 };

  if (
    e.type == "touchstart" ||
    e.type == "touchmove" ||
    e.type == "touchend" ||
    e.type == "touchcancel"
  ) {
    var touch = e.changedTouches[0];
    pos.x = touch.pageX;
    pos.y = touch.pageY;
  } else if (
    e.type == "mousedown" ||
    e.type == "mouseup" ||
    e.type == "mousemove" ||
    e.type == "mouseover" ||
    e.type == "mouseout" ||
    e.type == "mouseenter" ||
    e.type == "mouseleave"
  ) {
    pos.x = e.pageX;
    pos.y = e.pageY;
  }

  return pos;
}

function rangeSliderInit() {
  canSlide = true;
  $('#check_slider_one').val(1);
}

function rangeSliderUpdate(e) {
  if (!canSlide || maxPoints == 0) return;

  var position = pointerEvents(e),
    dial = range.find(".dial"),
    dialRadius = dial.width() / 2,
    coords = {
      x: position.x - range.offset().left,
      y: position.y - range.offset().top
    },
    radius = range.width() / 2,
    atan = Math.atan2(coords.x - radius, coords.y - radius),
    deg = Math.ceil(-atan / (Math.PI / 180) + 180);

  if (prevVal <= 1 && lastPosition - position.x >= 0) deg = 0;
  if (prevVal >= 359 && lastPosition - position.x <= 0) deg = 360;

  var x =
    Math.ceil((radius - 5) * Math.sin(deg * Math.PI / 180)) + radius + "px",
    y =
      Math.ceil((radius - 5) * -Math.cos(deg * Math.PI / 180)) + radius + "px",
    points = Math.ceil(deg * maxPoints / 360),
    remaining = maxPoints - Math.ceil(deg * maxPoints / 360);

  //move dial
  dial.css({ transform: "translate(" + x + "," + y + ")" });

  //show range progress
  if (deg <= 180) {
    range.find(".right .blocker").css({ transform: "rotate(" + deg + "deg)" });
    range.find(".left .blocker").css({ transform: "rotate(0)" });
  } else {
    range.find(".right .blocker").css({ transform: "rotate(180deg" });
    range
      .find(".left .blocker")
      .css({ transform: "rotate(" + (deg - 180) + "deg)" });
  }

  //show value
  range.find(".count").text(points).val(points);
  range.find(".count2").text(remaining).val(remaining);

  prevVal = deg;
  lastPosition = position.x;
}

function rangeSliderStop() {
  canSlide = false;
}










var position2,
  lastPosition2,
  canSlide2 = false,
  range2 = $(".range2"),
  input2 = range2.find("input"),
  maxPoints2 = input.attr("max"),
  minPoints2 = input.attr("min"),
  prevVal2 = input.attr("min");

range2.on("mousedown touchstart", rangeSliderInit2);
range2.on("mousemove touchmove", rangeSliderUpdate2);
range2.on("mouseup touchend", rangeSliderStop2);

function pointerEvents2(e) {
  var pos = { x: 0, y: 0 };

  if (
    e.type == "touchstart" ||
    e.type == "touchmove" ||
    e.type == "touchend" ||
    e.type == "touchcancel"
  ) {
    var touch = e.changedTouches[0];
    pos.x = touch.pageX;
    pos.y = touch.pageY;
  } else if (
    e.type == "mousedown" ||
    e.type == "mouseup" ||
    e.type == "mousemove" ||
    e.type == "mouseover" ||
    e.type == "mouseout" ||
    e.type == "mouseenter" ||
    e.type == "mouseleave"
  ) {
    pos.x = e.pageX;
    pos.y = e.pageY;
  }

  return pos;
}

function rangeSliderInit2() {
  canSlide2 = true;
  $('#check_slider_two').val(1);
}

function rangeSliderUpdate2(e) {
  if (!canSlide2 || maxPoints2 == 0) return;

  var position2 = pointerEvents2(e),
    dial2 = range2.find(".dial2"),
    dialRadius2 = dial2.width() / 2,
    coords2 = {
      x: position2.x - range2.offset().left,
      y: position2.y - range2.offset().top
    },
    radius2 = range2.width() / 2,
    atan3 = Math.atan2(coords2.x - radius2, coords2.y - radius2),
    deg2 = Math.ceil(-atan3 / (Math.PI / 180) + 180);

  if (prevVal2 <= 1 && lastPosition2 - position2.x >= 0) deg2 = 0;
  if (prevVal2 >= 359 && lastPosition2 - position2.x <= 0) deg2 = 360;

  var x2 =
    Math.ceil((radius2 - 5) * Math.sin(deg2 * Math.PI / 180)) + radius2 + "px",
    y2 =
      Math.ceil((radius2 - 5) * -Math.cos(deg2 * Math.PI / 180)) + radius2 + "px",
    points2 = Math.ceil(deg2 * maxPoints2 / 360),
    remaining2 = maxPoints2 - Math.ceil(deg2 * maxPoints2 / 360);

  //move dial
  dial2.css({ transform: "translate(" + x2 + "," + y2 + ")" });

  //show range progress
  if (deg2 <= 180) {
    range2.find(".right .blocker2").css({ transform: "rotate(" + deg2 + "deg)" });
    range2.find(".left .blocker2").css({ transform: "rotate(0)" });
  } else {
    range2.find(".right .blocker2").css({ transform: "rotate(180deg" });
    range2
      .find(".left .blocker2")
      .css({ transform: "rotate(" + (deg2 - 180) + "deg)" });
  }

  //show value
  range2.find(".count3").text(points2).val(points2);
  range2.find(".count4").text(remaining2).val(remaining2);

  prevVal2 = deg2;
  lastPosition2 = position2.x;
}

function rangeSliderStop2() {
  canSlide2 = false;
}






/* second wheel in the instruction (Need to separately define to behave independently) */
/*
var position,
  lastPosition,
  canSlide = false,
  range = $(".range2"),
  input = range.find("input"),
  maxPoints = input.attr("max"),
  minPoints = input.attr("min"),
  prevVal = input.attr("min");

range.on("mousedown touchstart", rangeSliderInit);
range.on("mousemove touchmove", rangeSliderUpdate);
range.on("mouseup touchend", rangeSliderStop);

function pointerEvents(e) {
  var pos = { x: 0, y: 0 };

  if (
    e.type == "touchstart" ||
    e.type == "touchmove" ||
    e.type == "touchend" ||
    e.type == "touchcancel"
  ) {
    var touch = e.changedTouches[0];
    pos.x = touch.pageX;
    pos.y = touch.pageY;
  } else if (
    e.type == "mousedown" ||
    e.type == "mouseup" ||
    e.type == "mousemove" ||
    e.type == "mouseover" ||
    e.type == "mouseout" ||
    e.type == "mouseenter" ||
    e.type == "mouseleave"
  ) {
    pos.x = e.pageX;
    pos.y = e.pageY;
  }

  return pos;
}

function rangeSliderInit() {
  canSlide = true;
}

function rangeSliderUpdate(e) {
  if (!canSlide || maxPoints == 0) return;

  var position = pointerEvents(e),
    dial = range.find(".dial2"),
    dialRadius = dial.width() / 2,
    coords = {
      x: position.x - range.offset().left,
      y: position.y - range.offset().top
    },
    radius = range.width() / 2,
    atan = Math.atan2(coords.x - radius, coords.y - radius),
    deg = Math.ceil(-atan / (Math.PI / 180) + 180);

  if (prevVal <= 1 && lastPosition - position.x >= 0) deg = 0;
  if (prevVal >= 359 && lastPosition - position.x <= 0) deg = 360;

  var x =
    Math.ceil((radius - 5) * Math.sin(deg * Math.PI / 180)) + radius + "px",
    y =
      Math.ceil((radius - 5) * -Math.cos(deg * Math.PI / 180)) + radius + "px",
    points = Math.ceil(deg * maxPoints / 360),
    remaining = maxPoints - Math.ceil(deg * maxPoints / 360);

  //move dial
  dial.css({ transform: "translate(" + x + "," + y + ")" });

  //show range progress
  if (deg <= 180) {
    range.find(".right .blocker").css({ transform: "rotate(" + deg + "deg)" });
    range.find(".left .blocker").css({ transform: "rotate(0)" });
  } else {
    range.find(".right .blocker").css({ transform: "rotate(180deg" });
    range
      .find(".left .blocker")
      .css({ transform: "rotate(" + (deg - 180) + "deg)" });
  }

  //show value
  range.find(".count3").text(points).val(points);
  range.find(".count4").text(remaining).val(remaining);

  prevVal = deg;
  lastPosition = position.x;
}

function rangeSliderStop() {
  canSlide = false;
}
*/