int numRows = 10;  // number of rows in the grid
int numCols = 10;  // number of columns in the grid
int gutter = 5;    // space in between the items
int margin = 10;   // margin around the grid
int boxWidth;      // declare an int for width of the items
int boxHeight;     // declare an int for the height of the items
int rolledOver = -1;  // this int will keep track of which item the mouse is currently over. -1 means none of them


void setup(){
  frameRate(60);  // set the framerate
  size(480,360);  // set the size of the window
  boxWidth = (width-margin*2-gutter*(numCols-1))/numCols;  // assign the boxWidth variable (this changes based on the size of the window)
  boxHeight = (height-margin*2-gutter*(numRows-1))/numCols;  // assign the boxHeight variable (this changes based on the size of the window)
}

void draw(){

  checkRollOvers();   // call the function that checks to see if any of the elements are rolled over
  drawGrid();         //  call the function that draws the grid of elements

}

// the function that draws the grid
void drawGrid(){

  int myCounter = 0;  // local counter variable to see what number you are currently drawing
  
  for(int y=0;y<numRows;y++){  // run through the columns
    for(int x=0;x<numCols;x++){  // run through each row
      
      int myX = (x*boxWidth+margin+(x*gutter));  // calculate where the X of this particular box will be drawn
      int myY = (y*boxHeight+margin+(y*gutter)); // calculate where the Y of this particular box will be drawn
       
      if(rolledOver==myCounter){    // if the rolledOver variable is equal to this particular element...
        fill(255,0,0);   // draw it really red
      } else {  // otherwise...
        fill(128,0,0);  // draw it dark red
      }
      
      rect(myX,myY,boxWidth,boxHeight); // draw the rectangle
      myCounter++;  // increment the counter. This number will go from 0 to (numRows*numCols)-1 
    }
  } 
}

// the function that checks the rollovers
void checkRollOvers(){
  
  int myCounter = 0;  // local counter variable to see what number of element you are currently checking for a rollover on
  rolledOver = -1;  // set the rolledOver number to -1 to start (remember, this means nothing is currently rolled over)
  for(int y=0;y<numRows;y++){  // iterate through the rows
    for(int x=0;x<numCols;x++){  // iterate through the columns
      int myX = (x*boxWidth+margin+(x*gutter));  // get the x position of this element 
      int myY = (y*boxHeight+margin+(y*gutter)); // get the y position of this element
      if(mouseX>myX && mouseX<(myX+boxWidth) && mouseY>myY && mouseY<(myY+boxWidth)){  // if the mouse is over this particular element
        rolledOver = myCounter; // assign rolledOver the ID number (myCounter) of this element
      }
      myCounter++;  // increment the ID number (myCounter)
    } 
  }
}