class Viewport {
  PGraphics renderer;
  int movW;
  int movH;
  Viewport() {
  }
  void reload() {
    scaleFactor = 1;
    translateX = 0;
    translateY = 0;
  }
  void update() {
    renderer = createGraphics(width, height);
    if (mov.width > mov.height) {
      movW = width;
      movH = int(map(mov.height, 0, mov.width, 0, width));
    } else {
      movH = height;
      movW = int(map(mov.width, 0, mov.height, 0, height));
    }
    renderer.beginDraw();
    renderer.background(0);
    renderer.pushMatrix();
    renderer.translate(translateX, translateY);
    renderer.scale(scaleFactor);
    renderer.imageMode(CENTER);
    renderer.image(mov, width/2, height/2, movW, movH);
    renderer.popMatrix();
    renderer.endDraw();
  }
  void display() {
    image(renderer, 0, 0, width, height-timeline.h);
  }
}

class Timeline {
  int x, y, w, h;
  int playPos;
  boolean clicked;
  Timeline(int _x, int _y, int _w, int _h) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;
  }
  void update() {
    y = height-20;
    w = width;
    playPos = int(map(mov.time(), 0, mov.duration(), 0, w));
  }
  void display() {
    noStroke();
    fill(127);
    rect(x, y, w, h);
    fill(255);
    rect(x, y, playPos, h);
  }
  boolean hover() {
    if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h)
      return true;
    else
      return false;
  }
  void clicked() {
    clicked = true;
    jump();
  }
  void jump() {
    float f = map(mouseX-x, x, w, 0, 1);
    float t = mov.duration() * f;
    mov.jump(t);
  }
}