[LADYX]

У меня есть такой скрипт:

<style>
#rotate {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: linear-gradient(0deg, red, green);
}
.active {
border-radius: 100%;
}
</style>

<div id="rotate"></div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>
(function() {
  var init, rotate, start, stop,
    active = false,
    angle = 0,
    rotation = 0,
    startAngle = 0,
    center = {
      x: 0,
      y: 0
    },
    R2D = 180 / Math.PI,
    rot = document.getElementById('rotate');

  init = function() {
    rot.addEventListener("mousedown", start, false);
    $(document).bind('mousemove', function(event) {
      if (active === true) {
        event.preventDefault();
        rotate(event);
      }
    });
    $(document).bind('mouseup', function(event) {
      event.preventDefault();
      stop(event);
    });
  };

  start = function(e) {
    e.preventDefault();
    var bb = this.getBoundingClientRect(),
      t = bb.top,
      l = bb.left,
      h = bb.height,
      w = bb.width,
      x, y;
    center = {
      x: l + (w / 2),
      y: t + (h / 2)
    };
    x = e.clientX - center.x;
    y = e.clientY - center.y;
    startAngle = R2D * Math.atan2(y, x);
    return active = true;
  };

  rotate = function(e) {
    e.preventDefault();
    var x = e.clientX - center.x,
      y = e.clientY - center.y,
      d = R2D * Math.atan2(y, x);
    rotation = d - startAngle;
    return rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)";
  };

  stop = function() {
    angle += rotation;
    alert(angle);
    return active = false;
  };

  init();

}).call(this);
</script>

С помощью него я мышкой поворачиваю элемент.

Помогите, пожалуйста, сделать следующее. Мне нужно, чтобы я мог повернуть элемент только на 180deg. При этом:

- Если начинаешь поворачивать, и если повернул меньше, чем на 90deg и отпустил элемент, то он возвращается на место;

- Если начинаешь поворачивать, и если повернул больше, чем на 90deg и отпустил элемент, то он поворачивается до конца (до 180deg). В этом случае элементу добавляется дополнительный класс (.active). И сразу после этого ближайшие, скажем 60сек, элемент поворачивать мы не можем. А спустя 60сек этот дополнительный класс удаляется, и мы снова можем поворачивать элемент.

Как можно такое сделать, прошу помощи. Спасибо!