// processing IDE 3.5.3
// button tutorial 
// http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166
// compare https://editor.p5js.org/kll/sketches/1rngamTLO    p5js version

// we have a class for ONE Button.
// now we make a array of them ( and only the LAST can be SELECTED ( option group thinking ))

int many = 30; //_______________________________________ number of buttons needed
Button[] myButtons=new Button[many]; //_________________ button array
int mysel = -1; //______________________________________ a global to remember last selected ( for option group )

void init_array() {
  int x0 = 15, y0 = 50, w = 55, h = 50, off = 8, grid = 6;
  for (int i = 0; i < many; i++) {
    int xi = x0 + (i % grid) * (w + off);
    int yi = y0 + (floor(i / grid)) * (h + off);
    int wi = w;
    int hi = h;
    boolean seli = false;
    String texti = " " + ((1 + floor(i / grid)) * 200);
    int idi = i;
    myButtons[i] = new Button(xi, yi, wi, hi, seli, texti, idi); // make buttons and save to array
    // handing parameter  Button( x , y , w , h , initial ONOFF , description test , serial id );
  }
}

void draw_buttons() {
  for (int i = 0; i < many; i++) {
    if (i != mysel) myButtons[i].sel = false;           // only one ( last ) can be selected ( optionsgroup thinking )
    myButtons[i].draw();
  }
}

void setup() {
  size(400, 400);
  init_array();
}

void draw() {
  background(200, 200, 0);
  draw_buttons();
}

class Button { //________________________________________ begin class
  int x, y, w, h, id;
  boolean click=false, sel;
  String atext;

  Button(int _x, int _y, int _w, int _h, boolean _sel, String _atext, int _id) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;
    sel = _sel;
    atext = _atext;
    id = _id;
  }

  void  draw() {
    mouse(); //__________________________________________ check on operation
    if (sel)       fill(0, 200, 0); //___________________ ON OFF fill color
    else           fill(0, 0, 200);
    if (over())    stroke(200, 0, 200); //_______________ hover stroke color
    else           stroke(0, 200, 200);
    strokeWeight(3);
    rect(x, y, w, h); //_________________________________ button area as rectangle
    noStroke(); //_______________________________________ button text ( here only one )
    fill(200);
    strokeWeight(3);
    textSize(18);
    text(atext, x + 3, y + h/2 +8);
  }

  boolean  over() {
    return (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h);
  }

  void  mouse() {
    if ( over() && mousePressed && !click) { //__________ operation
      click = true; //___________________________________ just clicked
      sel = true; //_____________________________________ set
      mysel = id; //_____________________________________ remember as global for option group LAST SET
    }
    if ( over() && !mousePressed )  click = false; //____ reset
  }
} //_____________________________________________________ end class