console.clear();
gsap.registerPlugin(Draggable);

// Variable for controlling the Size transformation
var isPaper = false;

// jQuery Variable declarations
var body = $("body"),
    dragItem = $(".dragAction");

// Create Draggable Event from GSAP library/plugin
Draggable.create(dragItem, {
  bounds: body,
  edgeResistance: 1,    // I don't believe this works unless InertiaPlugin is active ???
  inertia: true,      // ^^ Same
  type: "x,y",
  onPress: function() {
    // Set a start x and y for when pointer is clicked
    this.pointerXstart = this.pointerX;
    this.pointerYstart = this.pointerY;
    
    // Call function to build an html element that will be left behind on drag
    stampImprint(this);
  },
  onDragStart: function() {
    transformItem(this);
  },
  onDragEnd: function() {
    // Return the drag item to start when dropped
    playReturnAnimation(this);
  }
});

// Function to create "ghost" element to hold place of dragged element
function stampImprint(item) {
  var bounds = item.target.getBoundingClientRect();
  var ghost = document.createElement("DIV");
  ghost.className = "ghost"
  ghost.style.left = bounds.x + "px";
  ghost.style.top = bounds.y + "px";
  ghost.style.width = bounds.width + "px";
  ghost.style.height = bounds.height + "px";
  document.body.appendChild(ghost);
}

// Remove the "ghost" elements when dragged element is returned
function removeImprints() {
  document.querySelectorAll(".ghost").forEach(e => e.parentNode.removeChild(e));
  isPaper = false;
}

// Set up Timeline and Play animation for returning item to start of drag
function playReturnAnimation(item){
  gsap.to(item.target, {duration: 0.3, x: 0, y: 0, onComplete: removeImprints});
}

function transformItem(item) {
  
  const pointerOffset = MotionPathPlugin.convertCoordinates(window, item.target, {x: item.pointerX, y: item.pointerY}), // converts the pointer's coordinates from the window to the target's local coordinate system. 
        width = item.target.offsetWidth,
        height = item.target.offsetHeight,
        xRatio = pointerOffset.x / width,
        yRatio = pointerOffset.y / height;
  
  const tween = gsap.to(item.target, {
    left: (width - 70) * xRatio,
    top: (height - 85) * yRatio,
    width: 70,
    height: 85,
    borderRadius: "10px"
  });
  
  tween.progress(1); // jump to the end so that we can update() the Draggable's bounds according to the new size
  item.update(true); // update the bounds
  tween.progress(0); // now revert and play from the beginning
  
  gsap.to(item.target.children, {
    opacity: 0,
    duration: 0.3,
    stagger: 0.2,
  });
  
  isPaper = !isPaper;
}