console.clear();
const log = console.log.bind(console);

const kappa = 0.551915024494;

const canvas  = document.querySelector("#canvas");
const context = canvas.getContext("2d");
const resolution = window.devicePixelRatio || 1;

const circleContainer = document.querySelector(".circle-container");
const rippleContainer = document.querySelector(".ripple-container");
const circle = document.querySelector(".circle");
const ripple = document.querySelector(".ripple");
const card = document.querySelector(".card");
const root = document.documentElement;
const body = document.body;

const p0 = { x: 0, y: 0 };
const p1 = { x: 0, y: 0 };
const p2 = { x: 0, y: 0 };
const p3 = { x: 0, y: 0 };

const cursor = { x: 0, y: 0 };
const bezier = { 
  values: [p0, p1, p2, p3], 
  type: "cubic" 
};

let circleBounds = getBounds(circleContainer);
let rippleBounds = getBounds(card);

let triggerX = 0;
let triggerY = 0;
let radius   = circleBounds.w2;
let padding  = radius;

let bezierPath = new Path2D();  
let circlePath = new Path2D();
circlePath.arc(0, 0, 5, 0, Math.PI * 2);

TweenLite.defaultEase = Linear.easeNone;

TweenLite.set([circle, ripple], { 
  xPercent: -50, 
  yPercent: -50 
});

const slowEase = SlowMo.ease.config(0.5, 0.4, false);
const fastEase = Power1.easeIn;
const duration = 1.2;

const baseTimeline = new TimelineMax({ paused: true });

const mainTimeline = new TimelineMax({ onUpdate: render, paused: true })
  .to(baseTimeline, duration * 5, { progress: 1, ease: slowEase })
  .set(baseTimeline, { progress: 0 }, "+=2")
  .to(baseTimeline, duration, { progress: 1, ease: fastEase }, "+=1")
  .set(baseTimeline, { progress: 0 }, "+=2")
  .to(baseTimeline, duration, { progress: 1, ease: fastEase }, "+=1")
  .set(baseTimeline, { progress: 0 }, "+=2")

let requestId = null;
let vw, vh;

update();
window.addEventListener("resize", requestUpdate);
TweenLite.set("main", { autoAlpha: 1 });

const gsDev = GSDevTools.create({
  loop: true,
  paused: false
});

//
//  UPDATE
// =========================================================================== 
function update() {
      
  const progress = mainTimeline.totalProgress() || 0;  
  mainTimeline.pause(0);
  baseTimeline.clear();
    
  circleBounds = getBounds(circleContainer);
  rippleBounds = getBounds(card);
  
  updateBezier();
  resizeCanvas();
  
  const delay = getDelay()
  const dt = duration - delay;
  const dx = rippleBounds.w2;
  const dy = rippleBounds.h2;
  const tx = dx - radius - p3.x;
  const ty = dy - radius - p3.y;
  
  const size = Math.sqrt(dx * dx + dy * dy) * 2;
   
  TweenLite.set(rippleContainer, { x: tx, y: ty });
  
  baseTimeline
    .to([circle, ripple], duration, { bezier }, 0)
    .to(cursor, duration, { bezier }, 0)  
    .set(circle, { border: "2px solid #37474f" }, delay)
    .to(circle, dt, { backgroundColor: "rgba(0,150,136,1)" }, delay)
    .to(ripple, dt, { backgroundColor: "#009688" }, delay)  
    .to(ripple, dt, { width: size, height: size }, delay)
  
  mainTimeline
    .progress(1).progress(0)  
    .totalProgress(progress)
    .resume()
  
  requestId = null;
  
  render()
}

//
//  UPDATE BEZIER
// =========================================================================== 
function updateBezier() {
  
  p3.x = rippleBounds.cx - circleBounds.cx;
  p3.y = rippleBounds.cy - circleBounds.cy;
  
  const dx = p3.x - p0.x;
  const dy = p3.y - p0.y;

  if (p3.y > p0.y) {

    p1.x = p0.x;
    p1.y = p0.y + (dy * kappa);  
    p2.x = p3.x - (dx * kappa);
    p2.y = p3.y;

  } else {

    p1.x = p0.x + (dx * kappa);
    p1.y = p0.y;  
    p2.x = p3.x;
    p2.y = p3.y - (dy * kappa);
  }
}

//
// GET DELAY
// =========================================================================== 
function getDelay() {
  
  cursor.x = p0.x;
  cursor.y = p0.y;
   
  const k = 0.0001; // Tolerance. Smaller value is more precise, but takes more time
  
  const cx = circleBounds.cx;
  const cy = circleBounds.cy;
  
  const rx = rippleBounds.x + padding;
  const ry = rippleBounds.x + padding;
  const rw = rippleBounds.w - padding * 2;
  const rh = rippleBounds.h - padding * 2;  
  
  let delay = 0;
  
  const tween = TweenLite.to(cursor, duration, { bezier, paused: true });
  
  for (let i = 0; i <= 1; i += k) {
    tween.progress(i);
    
    const x = cx + cursor.x;
    const y = cy + cursor.y;
    
    if (pointInRect(x, y, rx, ry, rw, rh)) {
      delay = tween.time();      
      triggerX = cursor.x;
      triggerY = cursor.y;
      break;
    }
  }
  
  return delay;
}

//
// GET BOUNDS
// =========================================================================== 
function getBounds(element) {
  
  const rect = element.getBoundingClientRect();
    
  const scrollTop  = window.pageYOffset || root.scrollTop  || body.scrollTop  || 0;
  const scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;

  const clientTop  = root.clientTop  || body.clientTop  || 0;
  const clientLeft = root.clientLeft || body.clientLeft || 0;
    
  const x = Math.round(rect.left + scrollLeft - clientLeft);
  const y = Math.round(rect.top  + scrollTop  - clientTop);
  
  const w = rect.width;
  const h = rect.height;
  const w2 = w / 2;
  const h2 = h / 2;
  const cx = x + w2;
  const cy = y + h2;  
  
  return { x, y, w, h, w2, h2, cx, cy };
}

//
//  RENDER
// =========================================================================== 
function render() {  
    
  let x = circleBounds.cx + 0;
  let y = circleBounds.cy + 0;
  
  context.setTransform(resolution, 0, 0, resolution, 0, 0);
  context.clearRect(0, 0, vw, vh);  
  
  context.lineWidth = 2;  
  context.setTransform(resolution, 0, 0, resolution, x, y);
  context.stroke(bezierPath);
      
  context.setTransform(resolution, 0, 0, resolution, x + triggerX, y + triggerY);
  context.fill(circlePath);
  context.stroke(circlePath);
  
  context.setTransform(resolution, 0, 0, resolution, x + cursor.x, y + cursor.y);
  context.fill(circlePath);
  context.stroke(circlePath); 
}

//
//  RESIZE CANVAS
// =========================================================================== 
function resizeCanvas() {
    
  vw = window.innerWidth;
  vh = window.innerHeight;
  
  canvas.width = vw * resolution;
  canvas.height = vh * resolution;
  canvas.style.width = vw + "px";
  canvas.style.height = vh + "px";  
  
  context.lineCap = "round";
  context.lineJoin = "round";
  context.lineWidth = 2;
  context.strokeStyle = "#37474f";
  context.fillStyle = "#ff9800";
  context.scale(resolution, resolution);
  
  bezierPath = new Path2D();  
  bezierPath.moveTo(p0.x, p0.y);  
  bezierPath.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);  
}

function requestUpdate() {
  if (!requestId) {
    requestId = requestAnimationFrame(update);
  }
}

function pointInRect(px, py, rx, ry, rw, rh) {
  return px >= rx && py >= ry && px <= rx + rw && py <= ry + rh;
}