var img, imgMask;
var earthVideo;
var levelSound;
var continueBut;
var frameSize;
var label = "Click to save the earth.";
var f = 0;
var bg = 0;
var nullifyFill = 1;
var rotator = 0;
var clicked = false;

function preload() {
  levelSound = loadSound('sound.ogg');
  img = loadImage('Golden-Round-Frame-PNG.png');
  imgMask = loadImage('mask.png');
  earthVideo = createVideo(['video.webm']);
}

function mouseClicked() {
  if(!clicked){
    clicked = true;
    levelSound.play();
    label = "Earth saved.";
    earthVideo.loop();
  }
}

function setup() {
  frameSize = min(window.innerWidth, window.innerHeight);
  //createCanvas(window.innerWidth,window.innerHeight);
  createCanvas(frameSize,frameSize);
  frameRate(30);
  textSize(frameSize/14);
  textStyle(BOLD);
  textAlign(CENTER);
  imageMode(CENTER);
  stroke(77);
  strokeWeight(1);
  earthVideo.hide();
  earthVideo.loop();
}


function draw() {
  clear();
  earthVideo.mask(imgMask);
  image(earthVideo,frameSize/2,frameSize/2,frameSize/1.777,frameSize/1.777);
  if(clicked){
    push();
    translate(frameSize/2,frameSize/2);
    rotate(rotator);
    image(img,0,0,frameSize,frameSize);
    pop()
    fill(250,230,80);
    rotator+=0.01;
  } else {
    fill(255);
  }
  text(label, frameSize/2,frameSize/2);
}