// This example shows how to read an analog
// value from an serial port
// and draw circle with size mapped to that value

// Declare a "SerialPort" object
var serial;

// Variable for size
var switchState = 0;

//zoe and renata var
var words1 = ["banana", "coffee", "computer"];
var words2 = ["pb+J", "foosball", "plants"];
var words3= ["moon", "lockers", "Midori"];

var verb = ["has", "wants", "eats"]
var prep = ["with", "on", "under"]

var index = 0;

function preload(){
  //images1
  banana = loadImage("images/banana.jpg");
  coffee = loadImage("images/coffee.jpg");
  computer = loadImage("images/computer.jpg");

   //images2
  pbj = loadImage("images/pbj.jpg")
  foosball = loadImage("images/foosball.jpg");
  plant = loadImage("images/plant.jpg");

  //images3
  moon = loadImage("images/moon.jpg")
  midori = loadImage("images/midori.jpg");
  locker = loadImage("images/locker.jpg");

}

function setup() {
  createCanvas(700,700);
  fill(0);
  textSize(32);

  // Instantiate our SerialPort object
  serial = new p5.SerialPort();

  // Assuming our Arduino is connected, let's open the connection to it
  // Change this to the name of your arduino's serial port
  serial.open("/dev/cu.usbmodem1421");

  // if you need to see the list
  // serial.onList(gotList);

  // This is a new concept!
  // Whenever there is new data, the "gotData" function happens.
  // This is called a *CALLBACK*
  serial.onData(gotData);
}

// This happens when there is data
function gotData() {
  // Read the data as text (a string)!
  var data = serial.readLine();
  // Check to make sure something really came in
  if (data.length > 0); {
    // Get the 0 or 1
    switchState = Number(data);
  }
}

function draw() {

  // Do something based on whether
  // switch is on or off!
  if (switchState === 0) {

    background(0);
    fill(255);
    textAlign(CENTER);
    textSize(24);
    text('PRESS THE BUTTON', width / 2, height -12);
  } else if (switchState === 1) {
    index = index + 1;
  if (index == words1.length) {
    index = 0;
  }

    if (index == images1.length) {
    index = 0;
  }


  //verb
   index = index + 1;
  if (index == verb.length) {
    index = 0;
  }


  //set2
   if (index == words2.length) {
    index = 0;
  }

     if (index == images2.length) {
    index = 0;
  }

  //prep
   index = index + 1;
  if (index == prep.length) {
    index = 0;
  }

  //set3
   if (index == words3.length) {
    index = 0;
  }

     if (index == images3.length) {
    index = 0;
  }

    background(255);
  textAlign(CENTER);
  text(words1[index], 100, 400);
  text(verb[index], 200, 400);
  text(words2[index], 300, 400);
  text(prep[index], 400, 400);
  text(words3[index], 500, 400);

  var images1 = [banana, coffee, computer];
  image(images1[index], 100, 100, 100, 100);
  //image(image,[x=0],[y=0],[width],[height])

  var images2 = [pbj, foosball, plant];
  image(images2[index], 300, 100, 100, 100);

  var images3 = [moon, locker, midori];
  image(images3[index], 500, 100, 100, 100);
  }
}


/*
// Got the list of ports
function gotList(thelist) {
  println("List of Serial Ports:");
  // theList is an array of their names
  for (var i = 0; i < thelist.length; i++) {
    // Display in the console
    println(i + " " + thelist[i]);
  }
}*/