namespace Demo {
  
  console.clear();
  var log = console.log.bind(console);
  
  const dpr = window.devicePixelRatio || 1;
   
  const epsilon = 1e-6;
   
  const canvas  = document.querySelector("#canvas");
  const context = canvas.getContext("2d");
  
  var vw = canvas.width  = window.innerWidth; 
  var vh = canvas.height = window.innerHeight; 
      
  var ratio = ratio = vw / vh;
     
  var normalized = { x: 0, y: 0 };  
  var nextPoint  = { x: 0, y: 0 };  
  var prevPoint  = { x: 0, y: 0 };
        
  var pen = null;
  
  QuickSettings.useExtStyleSheet();
  var settings = QuickSettings.create(10, 10, "Settings");
    
  const minMass = 1;
  const maxMass = 160;
  
  const minFriction = 0;
  const maxFriction = 0.4;
  
  var mass = 0.5;
  var friction = 0.35;
  var fixedAngle = false;
  
  var stroke = {
    visible: true,
    // color: "#8080c0",
    color: "#8080ff",
    width: 2
  };
  
  var ribs = {
    visible: false,
    color: "#8080ff",
    width: 2
  };
  
  var fill = {
    visible: true,
    color: "#000000"
  };
  
  //
  // INIT
  // ===========================================================================
  function init() {
    
    context.lineCap = "round";
    context.lineJoin = "round";
    
    TweenLite.set("#pen", {
      alpha: 0,
      scale: 0,
      xPercent: -50,
      yPercent: -50
    });
        
    pen = new Pen();
        
    settings
      .addRange("Mass", 0.1, 1, mass, 0.1, value => pen.mass = value)
      .addRange("Friction", 0.1, 1, friction, 0.1, value => pen.friction = value)
      .addRange("Brush Width", 0.1, 2, pen.width, 0.1, value => pen.width = value)    
      .addBoolean("Fixed Angle", fixedAngle, value => fixedAngle = value)
      .addBoolean("Fill", fill.visible, value => {
        (fill.visible = value)
          ? settings.showControl("Fill Color")
          : settings.hideControl("Fill Color");
      })
      .addColor("Fill Color", fill.color, value => fill.color = value)
    
      .addBoolean("Outline", stroke.visible, value => {
        (stroke.visible = value)
          ? settings.showControl("Outline Color").showControl("Outline Width")
          : settings.hideControl("Outline Color").hideControl("Outline Width");
      })
      .addColor("Outline Color", stroke.color, value => stroke.color = value)
      .addRange("Outline Width", 1, 5, stroke.width, 1, value => stroke.width = value)    
      .addBoolean("Ribs", ribs.visible, value => {
        (ribs.visible = value)
          ? settings.showControl("Rib Color").showControl("Rib Width")
          : settings.hideControl("Rib Color").hideControl("Rib Width");
      })
      .addColor("Rib Color", ribs.color, value => ribs.color = value)
      .addRange("Rib Width", 1, 5, ribs.width, 1, value => ribs.width = value)    
      .addButton("Clear", clearCanvas)    
      .setBoolean("Ribs", ribs.visible)
    
    window.addEventListener("resize", resize);
    
    setInterval(queueRender, 4);    
  }
  
  //
  // PEN
  // ===========================================================================
  class Pen {
    
    _mass = 0;
    _friction = 0;
    
    x = 0;
    y = 0;  
    lastX = 0;
    lastY = 0;  
  
    ax = 0;
    ay = 0;  
    accel = 0;
  
    vx = 0;
    vy = 0;
    vel = 0;  
  
    perpX = 0;
    perpY = 0;  
  
    width = 0.5;
  
    started = false;
  
    element = document.querySelector("#pen");
  
    dragger = new Draggable(this.element, {
      cursor: "crosshair",
      bounds: window,
      trigger: canvas,
      throwProps: true,
      edgeResistance: 0.5,
      onPress: this.setPosition,      
      onRelease: this.checkDrag,
      onDrag: this.moveAction,
      onDragStart: this.startDrag,      
      onThrowUpdate: this.moveAction,
      onThrowComplete: this.hideCursor,
      callbackScope: this
    });
  
    transform = this.element._gsTransform;
  
    tween = TweenLite.to(this.element, 0.15, { alpha: 1, scale: 1, paused: true });
  
    constructor() {
            
      this.mass = mass;
      this.friction = friction;
    }
      
    get isActive() { return this.dragger.isPressed || this.dragger.isThrowing; }
  
    get mass() { return this._mass; }
    set mass(value) { this._mass = lerp(minMass, maxMass, value); }
  
    get friction() { return this._friction; }
    set friction(value) { this._friction = lerp(minFriction, maxFriction, value * value); }
  
    moveAction(event) {      
      normalized.x = ratio * this.transform.x / vw;
      normalized.y = this.transform.y / vh;      
    }
    
    startDrag() {
      this.started = true;
    }
  
    checkDrag(event) {
      if (!this.started) {
        this.hideCursor();
      }      
    }
  
    hideCursor() {
      this.tween.reverse();
    }
  
    setPosition(event) {
      
      var x = event.clientX;
      var y = event.clientY;
      
      if (event.targetTouches && event.targetTouches[0]) {
        x = event.targetTouches[0].clientX;
        y = event.targetTouches[0].clientY;
      }
      
      this.started = false;
      
      normalized.x = ratio * x / vw;
      normalized.y = y / vh;
            
      prevPoint.x = 0;
      prevPoint.y = 0;
      
      this.x = normalized.x;
      this.y = normalized.y;
      this.lastX = normalized.x;
      this.lastY = normalized.y;
      this.vx = 0;
      this.vy = 0;
      this.ax = 0;
      this.ay = 0;
            
      TweenLite.set(this.element, { x, y });
      
      this.dragger.update();     
      this.tween.play();
    }
  
    refresh() {
            
      var fx = normalized.x - this.x;
      var fy = normalized.y - this.y;
            
      this.accel = Math.sqrt(fx ** 2 + fy ** 2);
      
      if (this.accel < epsilon) {
        return false;
      }
            
      this.ax = fx / this.mass;
      this.ay = fy / this.mass;

      this.vx += this.ax;
      this.vy += this.ay;
      this.vel = Math.sqrt(this.vx ** 2 + this.vy ** 2);
      
      if (this.vel < epsilon) {
        return false;
      }
            
      // Perpendicular points
      this.perpX = -this.vy;
      this.perpY =  this.vx;
      this.perpX /= this.vel;
      this.perpY /= this.vel;
                  
      if (fixedAngle) {
        this.perpX = 0.6;
        this.perpY = 0.2;
      }
      
      this.vx = this.vx * (1 - this.friction);
      this.vy = this.vy * (1 - this.friction);

      // Update position
      this.lastX = this.x;
      this.lastY = this.y;
      this.x = this.x + this.vx;
      this.y = this.y + this.vy;
      
      return true;
    }
  } 

  //
  // RENDER
  // ===========================================================================
  function render() {
    
    var width = (0.04 - pen.vel) * pen.width;
    
    if (width < epsilon) width = epsilon;
        
    nextPoint.x = lerp(prevPoint.x, pen.perpX * width, 0.25);
    nextPoint.y = lerp(prevPoint.y, pen.perpY * width, 0.25);
        
    var px = pen.lastX;
    var py = pen.lastY;
    var nx = pen.x;
    var ny = pen.y;
        
    var x1 = vw * (px + prevPoint.x) / ratio;
    var x2 = vw * (px - prevPoint.x) / ratio;
    
    var y1 = vh * (py + prevPoint.y);
    var y2 = vh * (py - prevPoint.y);
    
    var x3 = vw * (nx - nextPoint.x) / ratio;
    var x4 = vw * (nx + nextPoint.x) / ratio;
    
    var y3 = vh * (ny - nextPoint.y);
    var y4 = vh * (ny + nextPoint.y);
        
    context.beginPath();    
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);    
    context.lineTo(x3, y3);
    context.lineTo(x4, y4);        
    context.closePath();
    
    if (fill.visible) {
            
      context.lineWidth = 1;
      context.fillStyle = fill.color;      
      context.strokeStyle = fill.color;      
      context.fill();
      context.stroke();
    }
    
    if (ribs.visible) {
      
      context.lineWidth = ribs.width;
      context.strokeStyle = ribs.color;      
      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x2, y2);      
      context.moveTo(x3, y3);
      context.lineTo(x4, y4);      
      context.stroke();
    }
    
    if (stroke.visible) {
            
      context.lineWidth = stroke.width;
      context.strokeStyle = stroke.color;      
      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x4, y4);
      context.moveTo(x2, y2);
      context.lineTo(x3, y3);      
      context.stroke();      
      context.restore();
    }   
    
    prevPoint.x = nextPoint.x;
    prevPoint.y = nextPoint.y;
  }
  
  function queueRender() {    
    if (pen.isActive && pen.refresh()) {
      render();
    }
  }

  function resize() {      
  
    
    vw = canvas.width  = window.innerWidth; 
    vh = canvas.height = window.innerHeight; 
    
    ratio = vw / vh;
    
    clearCanvas();
  }

  function clearCanvas() {
    context.clearRect(0, 0, vw, vh);
    context.lineCap = "round";
    context.lineJoin = "round";
  }

  function lerp(min, max, t) {
    return min + (max - min) * t;
  }  

  init();
}