PImage upper;
PImage lower;

int imgHeight = 1334;
int imgWidth = 750;
float keyboardHeight = 432;
float upperTop, lowerTop;
float upperOffset, lowerOffset;
float keySep = 108;
boolean upperOnTop = true;

void setup() { 
  size(750, 864); //keyboardHeight * 2

  upper = loadImage("IMG_9381.PNG");
  lower = loadImage("IMG_9380.PNG");
  upperOffset = 0;
  lowerOffset = height * .5;
}

void draw() {
 // println(mouseX+":"+mouseY);
  upperOnTop = !mousePressed;
  if (upperOnTop) {
    upperTop = (height * .5) - imgHeight;
    lowerTop = height - imgHeight;
  } 
  else {
    lowerTop = (height * .5) - imgHeight;
    upperTop = height - imgHeight;
  }
  
  if (upperOnTop) {
    image(lower, 0, lowerTop);  
    image(upper, 0, upperTop);
  }
  else {
    image(upper, 0, upperTop);
    image(lower, 0, lowerTop);
  }
  strokeWeight(1);
  stroke(255, 0, 0, 128);
  addLinesUpper(upperOffset);
  addLinesUpper(lowerOffset);
  stroke(0, 0, 255, 128);
  addLinesLower(upperOffset);
  addLinesLower(lowerOffset);
  
  
}
void keyPressed(){
  saveFrame();
}

void addLinesUpper(float offset) {
  pushMatrix();
  translate(0, offset);
  //baselines and toplines
  for (int i = 0; i < 3; i++) {  
    vertLine(45 + (keySep * i));
    vertLine(78+ (keySep * i));
  }
  //toprow
  for(int j = 0; j < 10; j++){
    horizLine(21 + (j * 75.5),30);
    horizLine(21+26 + (j * 75.5),30);
  }
  for(int j = 0; j < 9; j++){
    horizLine(61 + (j * 75.5),30+keySep);
    horizLine(61+26 + (j * 75.5),30+keySep);
    //horizLine(47 + (j * 75.5),30);
  }
  for(int j = 0; j < 7; j++){
    horizLine(135 + (j * 75.5),30+keySep*2);
    horizLine(135+26 + (j * 75.5),30+keySep*2);
    //horizLine(47 + (j * 75.5),30);
  }
  
  popMatrix();
}

void horizLine(float x,float top){
  line(x,top,x,top+60);
}
void addLinesLower(float offset) {
  pushMatrix();
  translate(0, offset);
  //baselines and toplines
  for (int i = 0; i < 3; i++) {  
    vertLine(48 + (keySep * i));
    vertLine(75 + (keySep * i));
  }

  
  
  popMatrix();
}
void vertLine(float y) {
  line(0, y, width, y);
}