// card highlight corner
// top-left, top-right, bottom-right, bottom-left
// default: top-left;
var cardHighlight = 'default';

// caching of the container we're building our circle in
var wheel = $('#wheel');

// number of children the container has
var wheelChildren = wheel.children().length;

// snap degree locations - circle is 360deg, wheelChildren is the number of items we have
var rotationSnap = 360/wheelChildren;
var myDraggable;

var clockwise;
var lastRotation = 0;
var overshoot = false;

TweenLite.set(wheel, {xPercent: 0, yPercent: 0});
var transform = wheel[0]._gsTransform;

// function being executed when a card has been chosen and not changed for x seconds
function executeAfterCardChosen(updateText) {
  $('#display-text').text(updateText);
}

// delay after dragging the rotatatatata before executing the defined action 
// that is supposed to happen after an element has been selected
var executionDelay = 1.5;
// the variable holding the timeout trigger made globally available
var timeOutTrigger;

var closestElem;

function activateClosestCard() {
  $('.wheel-item').removeClass('active');
  
  // save wheel width and height
  var wheelWidth  = wheel.width();
  var wheelHeight = wheel.height();
  // default offset is top left
  var cardHighlightOffset = $('#wheel').offset();
  // if another hightlighting type is chosen
  if(cardHighlight == 'top-right') {
    cardHighlightOffset = {left: wheelWidth + cardHighlightOffset.left, top: cardHighlightOffset.top};
  }
  else if(cardHighlight == 'bottom-left') {
    cardHighlightOffset = {left: cardHighlightOffset.left, top: cardHighlightOffset.top + wheelHeight};
  }
  else if(cardHighlight == 'bottom-right') {
    cardHighlightOffset = {left: wheelWidth + cardHighlightOffset.left, top: wheelHeight + cardHighlightOffset.top + 50};
  }
  
  closestElem = $('.wheel-item').closestToOffset(cardHighlightOffset);

  closestElem.addClass('active');
}

function init()
{
  myDraggable = Draggable.create(wheel, {
    type: "rotation",
    throwProps: true,
    minDuration: .5,
    maxDuration: 1,
    throwResistance: 1000,
    overshootTolerance: 1,
    snap: function(endValue) { 
      return Math.round(endValue / rotationSnap) * rotationSnap;
    },
    // after snapping is completed
    onThrowComplete: function() {
      activateClosestCard();
      
      timeOutTrigger = setTimeout(
        function() {
          executeAfterCardChosen(closestElem.prop('id'));
        },
        executionDelay * 1000
      );
    },
    // once dragging starts - not click!
    onDragStart: function() {
      $('.wheel-item.active').removeClass('active');
      
      clearTimeout(timeOutTrigger);
      timeOutTrigger = null;
    },
    // while dragging, event fires ~10 times per second
    onDrag: function() {
      activateClosestCard();
    },
    /*onDragEnd: function() {
      console.log('dragend!!!');
    },
    onRelease: function() {
      console.log('release!!!');
    },
    onLockAxis: function() {
      console.log('lockaxis');
    },
    onThrowUpdate: function() {
      console.log("update!!!");
    },
    onComplete: function() {
      console.log("complete!");
    },*/
  });
}

// initialise circle
init();

jQuery.fn.closestToOffset = function(offset) {
    var el = null,
        elOffset,
        x = offset.left,
        y = offset.top,
        distance,
        dx,
        dy,
        minDistance;
    this.each(function() {
        var $t = $(this);
        elOffset = $t.offset();
        right = elOffset.left + $t.width();
        bottom = elOffset.top + $t.height();

        if (
            x >= elOffset.left &&
            x <= right &&
            y >= elOffset.top &&
            y <= bottom
        ) {
            el = $t;
            return false;
        }

        var offsets = [
            [elOffset.left, elOffset.top],
            [right, elOffset.top],
            [elOffset.left, bottom],
            [right, bottom],
        ];
        for (var off in offsets) {
            dx = offsets[off][0] - x;
            dy = offsets[off][1] - y;
            distance = Math.sqrt(dx * dx + dy * dy);
            if (minDistance === undefined || distance < minDistance) {
                minDistance = distance;
                el = $t;
            }
        }
    });
    return el;
};

var wheelTransformArray = [
  'rotate(360deg)',
  'rotate(315deg)',
  'rotate(deg)',
  'rotate(deg)',
  'rotate(deg)',
  'rotate(135deg)',
  'rotate(deg)',
  'rotate(deg)',
];

$('.wheel-item').click(function() {
  var index = $(this).index();
  var rotateDeg = 360 - (45 * index);
  console.log(index);
  
  TweenMax.to($('#wheel'), 1, {transform: 'rotate(' + rotateDeg + 'deg)'});
});