class KeysButtons{
  float r;
  float g;
  float blu;
  float r2;
  float g2;
  float blu2;
  boolean playKeys = true;
  boolean mouseOverTopBtn;
  boolean mouseOverBottomBtn;
  float x = ((width/2) - (GRID_SPACE * 1.5));
  float y = (GRID_SPACE/5);
  float btnWidth = (GRID_SPACE * 3);
  float btnHeight = ((GRID_SPACE * 2)/3);

  //constructor
  KeysButtons(){
  }

  void display(){
    if(playKeys){
      rollOverColor();
      fill(r,g,blu);
      stroke(255);
      strokeWeight(3);
      rect(x,y,(GRID_SPACE * 3),((GRID_SPACE * 2)/3));
      noStroke();
      fill(r2,g2,blu2);
      rect(x,(GRID_SPACE + 3),(GRID_SPACE * 3),((GRID_SPACE * 2)/3));
      showText();
    }
    if(playKeys == false){
      rollOverColor();
      fill(r,g,blu);
      stroke(255);
      noStroke();
      rect(x,y,(GRID_SPACE * 3),((GRID_SPACE * 2)/3));
      stroke(255);
      strokeWeight(3);
      fill(r2,g2,blu2);
      rect(x,(GRID_SPACE + 3),(GRID_SPACE * 3),((GRID_SPACE * 2)/3));
      showText();
    }
  }

  void rollOverColor(){
    if(mouseOverTopBtn()){
      r = 255;
      g = 143;
      blu = 5;
      r2 = 34;
      g2 = 48;
      blu2 = 188;
    } 
    else if(mouseOverBottomBtn()){
      r = 34;
      g = 48;
      blu = 188;
      r2 = 255;
      g2 = 143;
      blu2 = 5;
    }
    else{
      r = 34;
      g = 48;
      blu = 188;
      r2 = 34;
      g2 = 48;
      blu2 = 188;
    }
  }

  boolean mouseOverTopBtn(){
    if((mouseX > x) && (mouseX < (x + btnWidth)) && (mouseY > y) && (mouseY < (y + btnHeight))){
      return true;
    }
    else {
      return false;
    }
  }

  boolean mouseOverBottomBtn(){
    if((mouseX > x) && (mouseX < (x + btnWidth)) && (mouseY > (GRID_SPACE + 3)) && (mouseY < ((GRID_SPACE + 3) + btnHeight))){ 
      return true;
    }
    else {
      return false;
    }
  }
  
  void mousePressed(){
    if((mouseX > x) && (mouseX < (x + btnWidth)) && (mouseY > y) && (mouseY < (y + btnHeight))){
      playKeys = true;
    }
    if ((mouseX > x) && (mouseX < (x + btnWidth)) && (mouseY > (GRID_SPACE + 3)) && (mouseY < ((GRID_SPACE + 3) + btnHeight))){
      playKeys = false;
    }
  }
  
  void showText(){
    textFont(OCR);
    fill(255);
    textAlign(CENTER);
    text("Rhodes", (x + (GRID_SPACE * 1.5)), (y +GRID_SPACE/2));
    text("Bass", (x + (GRID_SPACE * 1.5)), ((GRID_SPACE + 3) + (GRID_SPACE/2)));
  }
}