let blueArray = [];
let yellowArray = [];
let pinkArray = [];
let greenArray = [];

let squareArray = [];
let circleArray = [];
let rectangleArray = [];
let ovalArray = [];


function checkColorAndAddToArray(index, classOfElement) { //adds the element to the array corresponding to the colour of the element.
  classOfElement = document.getElementById(index).className;
  if (classOfElement == "blueSquare" || classOfElement == "blueCircle"
    || classOfElement == "blueOval" || classOfElement == "blueRectangle") {
      blueArray.push(index);
    }
  else if (classOfElement == "yellowSquare" || classOfElement == "yellowCircle"
    || classOfElement == "yellowOval" || classOfElement == "yellowRectangle") {
      yellowArray.push(index);
  }
  else if (classOfElement == "pinkSquare" || classOfElement == "pinkCircle"
    || classOfElement == "pinkOval" || classOfElement == "pinkRectangle") {
      pinkArray.push(index);
  }
  else if (classOfElement == "greenSquare" || classOfElement == "greenCircle"
    || classOfElement == "greenOval" || classOfElement == "greenRectangle") {
      greenArray.push(index);
  }
}

function iterateBlueArray() { //Moves all the blue divs to row one.
  blueArray.forEach(element => document.getElementById(element).style.gridRow = "1")
}

function iterateYellowArray() { //Moves all the yellow divs to row two.
  yellowArray.forEach(element => document.getElementById(element).style.gridRow = "2")
}

function iteratePinkArray() { //Moves all the pink divs to row three.
  pinkArray.forEach(element => document.getElementById(element).style.gridRow = "3")
}

function iterateGreenArray() { //Moves all the green divs to row four.
  greenArray.forEach(element => document.getElementById(element).style.gridRow = "4")
}

function sortByColor() { //Initiates the moving of divs when they are to be sorted by colour.
  iterateBlueArray();
  iterateYellowArray();
  iteratePinkArray();
  iterateGreenArray();
}

function checkShapeAndAddToArray(index, classOfElement) { //adds the element to the array corresponding to the shape of the element.
  if (classOfElement == "blueSquare" || classOfElement == "yellowSquare"
    || classOfElement == "pinkSquare" || classOfElement == "greenSquare") {
      squareArray.push(index);
  }
  else if (classOfElement == "blueCircle" || classOfElement == "yellowCircle"
    || classOfElement == "pinkCircle" || classOfElement == "greenCircle") {
      circleArray.push(index);
  }
  else if (classOfElement == "blueRectangle" || classOfElement == "yellowRectangle"
    || classOfElement == "pinkRectangle" || classOfElement == "greenRectangle") {
      rectangleArray.push(index);
  }
  else if (classOfElement == "blueOval" || classOfElement == "yellowOval"
    || classOfElement == "pinkOval" || classOfElement == "greenOval") {
      ovalArray.push(index);
  }
}

function iterateSquareArray() { //Moves all the square divs to row one.
  squareArray.forEach(element => document.getElementById(element).style.gridRow = "1")
}

function iterateCircleArray() { //Moves all the circular divs to row two.
  circleArray.forEach(element => document.getElementById(element).style.gridRow = "2")
}

function iterateRectangleArray() { //Moves all the rectangular divs to row three.
  rectangleArray.forEach(element => document.getElementById(element).style.gridRow = "3")
}

function iterateOvalArray() { //Moves all the oval divs to row four.
  ovalArray.forEach(element => document.getElementById(element).style.gridRow = "4")
}

function sortByShape() { //Initiates the moving of divs when they are to be sorted by shape.
  iterateSquareArray();
  iterateCircleArray();
  iterateRectangleArray();
  iterateOvalArray();
}

function colorSort() {
  for (let i = 1; i <= 40; i++) { //assign each div to array by color
    const classOfElement = document.getElementById(i).className
    checkColorAndAddToArray(i, classOfElement)
  }
  sortByColor()
}

function shapeSort() {
  for (let i = 1; i <= 40; i++) { //assign each div to array by shape
    const classOfElement = document.getElementById(i).className
    checkShapeAndAddToArray(i, classOfElement)
  }
  sortByShape()
}

document.getElementById("sortByColor").addEventListener("click", colorSort, false);
document.getElementById("sortByShape").addEventListener("click", shapeSort, false);