//Define vars
var pupilLeft;
var pupilTop;

//Get the eyewidth (parent div of the pupils)
var eyeWidth = document.getElementsByClassName("eye")[0].offsetWidth;
var eyeHeight = document.getElementsByClassName("eye")[0].offsetHeight;

//Get the pupils
var pupil1 = document.getElementsByClassName("pupil")[0];
var pupil2 = document.getElementsByClassName("pupil")[1];
var pupils = [pupil1, pupil2];
//Get the pupils width and height
var pupilWidth = document.getElementsByClassName("pupil")[0].offsetWidth;
var pupilHeight = document.getElementsByClassName("pupil")[0].offsetHeight;

//On mousemove execute MoveEyes
document.addEventListener("mousemove", MoveEyes);

//Make pupils follow the cursor
function MoveEyes(event){
  //Get mouse positions
  var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  var mouseY = (event.clientY / window.innerHeight) * 2 - 1;
   
  //The standard offset (margins) for the pupils and keep the pupil in the eye
  var horizontalOffset = (eyeWidth - pupilWidth) - (pupilWidth/4); 
  var verticalOffset = (eyeHeight - pupilHeight) - (pupilHeight/4);
  
  //Calculate min and max that eye can move 
  pupilLeft = clamp(eyeWidth * mouseX, -horizontalOffset, horizontalOffset);
  pupilLeft = Math.floor(pupilLeft);
  pupilTop = clamp(eyeHeight * mouseY, -verticalOffset, verticalOffset);
  pupilTop = Math.floor(pupilTop);
  
  //Get all the pupils and change the margins
  pupils.forEach(pupil => {
    pupil.style.marginLeft = pupilLeft+"px";
    pupil.style.marginTop = pupilTop+"px";
    //Make sure width and height stay the same
    pupil.style.width = pupilWidth+"px";
    pupil.style.height = pupilHeight+"px";
  });
}

//Clamp between a min and max
function clamp(x, a, b) {
  if (x < a) return a;
  if (x > b) return b;
  return x;
}