.debug 0deg
.circle
  .dot

*, *:before, *:after {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background-color: #ecf0f1;
}

.debug {
  color: #9b59b6;
  font-family: monospace;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 100;
  font-size: 3vw;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #9b59b6;
  border-radius: 50%;
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px rgba(#000, 0.5);
  &:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: #ecf0f1;
    border-radius: 50%;
    top: 5%;
    left: 5%;
    box-shadow: inset 0 0 10px rgba(#000, 0.5);
  }
  .dot {
    position: absolute;
    //background-color: green;
    width: 5%;
    height: 50%;
    left: 47.5%;
    top: 0;
    transform: rotate(0deg);
    transform-origin: center bottom;
    &:before {
      content: "";
      position: absolute;
      background-color: #fff;
      box-shadow: 0 0 10px #000;
      width: 200%;
      transform: translate3d(-25%, -25%, 0);
      height: 0;
      padding-bottom: 200%;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}

$(document).ready ->
  is_dragging = false
  
  $(document).on "mousedown touchstart", ".circle", (e) ->
    is_dragging = true
  
  $(document).on "mouseup touchend", (e) ->
    is_dragging = false
    
  $(window).on "mousemove touchmove", (e) ->
    if is_dragging
      circle = $(".circle")
      touch = undefined
      if e.originalEvent.touches
        touch = e.originalEvent.touches[0]
      center_x = ($(circle).outerWidth() / 2) + $(circle).offset().left
      center_y = ($(circle).outerHeight() / 2) + $(circle).offset().top
      pos_x = e.pageX or touch.pageX
      pos_y = e.pageY or touch.pageY
      delta_y =  center_y - pos_y
      delta_x = center_x - pos_x
      angle = Math.atan2(delta_y, delta_x) * (180 / Math.PI) # Calculate Angle between circle center and mouse pos
      angle -= 90
      if angle < 0
        angle = 360 + angle # Always show angle positive
      angle = Math.round(angle)
      $(".dot").css("transform", "rotate("+angle+"deg)")
      $(".debug").html(angle + "deg")