/**
 * Sketch: Color Mixer for CSS and HTML
 * Description: Allows mixing colors and picking safe colors
 * 8/4/2020
 * author: James Brink
 */

let width = 530;  // Width of canvas
let height = 600; // Height of canvas

let r, g, b;
let w, h, x, y;
let r1, r2, r3;
let msg = "";

// Define constants for the location and size of the color rectangles
const LEFT_X = 10;
const RIGHT_X = LEFT_X + 130;
const TOP_Y = 200;
const RED_SPACING_Y = 130;
const REC_WIDTH = 20;
const REC_HEIGHT = 20;
const NAME_X = RIGHT_X + 10 + 6 * REC_WIDTH;

// Define constants for determining colors in the rectanges
const COLOR_INCR = 0x33;
const SECOND_HALF_COLOR = 0x99;


let colors = [
  "AliceBlue",  "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige",   "Bisque",  "Black",
  "BlanchedAlmond", "Blue",
  "BlueViolet", "Brown",    "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue",
  "Cornsilk", "Crimson",    "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGreen", "DarkGray",
  "DarkKhaki",
  "DarkMagenta", "DarkOliveGreen", "DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen",
  "DarkSlateBlue", "DarkSlateGray", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DodgerBlue",
  "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod",
  "Green", "GreenYellow",
  "Gray", "HoneyDew", "HotPink", "IndianRed", "Indigo",     "Ivory",    "Khaki",       "Lavender",
  "LavenderBlush",
  "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan","LightGoldenRodYellow", "LightGray", "LightGreen",
  "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen",
  "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen",
  "MediumSlateBlue", "MediumSpringGreen",
  "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy",
  "OldLace", "Olive",
  "OliveDrab", "Orange","OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed",
  "PapayaWhip", "PeachPuff",   "Peru",     "Pink",   "Plum",   "PowderBlue", "Purple",  "Red",
  "RosyBrown", "RoyalBlue",
  "SaddleBrown", "Salmon", "SandyBrown",
  "SeaGreen",   "SeaShell", "Sienna", "Silver", "SkyBlue","SlateBlue",  "SlateGray", "Snow",
  "SpringGreen", "SteelBlue",  "Tan",  "Teal",    "Thistle","Tomato", "Turquoise",  "Violet",    "Wheat",
  "White", "WhiteSmoke",  "Yellow", "YellowGreen"
   ];

let colorsNum = [
  "#F0F8FF", "#FAEBD7", "#00FFFF", "#7FFFD4", "#F0FFFF", "#F5F5DC", "#FFE4C4", "#000000",
  "#FFEBCD", "#0000FF",
  "#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#7FFF00", "#D2691E", "#FF7F50", "#6495ED",
  "#FFF8DC", "#DC143C", "#00FFFF", "#00008B", "#008B8B", "#B8860B", "#006400", "#A9A9A9",
  "#BDB76B",
  "#8B008B", "#556B2F",
  "#FF8C00", "#9932CC", "#8B0000", "#E9967A", "#8FBC8F",
  "#483D8B", "#2F4F4F", "#00CED1", "#9400D3", "#FF1493", "#00BFFF", "#696969", "#00BFFF",
  "#B22222", "#FFFAF0", "#228B22", "#FF00FF", "#DCDCDC", "#F8F8FF", "#FFD700", "#DAA520",
  "#008000", "#ADFF2F",
  "#808080", "#F0FFF0", "#FF69B4", "#CD5C5C", "#4B0082", "#FFFFF0", "#F0E68C", "#E6E6FA",
  "#FFF0F5",
  "#7CFC00", "#FFFACD", "#ADD8E6", "#F08080", "#E0FFFF", "#FAFAD2", "#D3D3D3", "#90EE90",
  "#FFB6C1", "#FFA07A", "#20B2AA", "#87CEFA", "#778899", "#B0C4DE", "#FFFFE0", "#00FF00",
  "#32CD32",
  "#FAF0E6", "#FF00FF", "#800000", "#66CDAA", "#0000CD", "#BA55D3", "#9370DB", "#3CB371",
  "#7B68EE", "#00FA9A",
  "#48D1CC", "#C71585", "#191970", "#F5FFFA", "#FFE4E1", "#FFE4B5", "#FFDEAD", "#000080",
  "#FDF5E6", "#808000",
  "#6B8E23", "#FFA500", "#FF4500", "#DA70D6", "#EEE8AA", "#98FB98", "#AFEEEE", "#DB7093",
  "#FFEFD5", "#FFDAB9", "#CD853F", "#FFC0CB", "#DDA0DD", "#B0E0E6", "#800080", "#FF0000",
  "#BC8F8F", "#4169E1",
  "#8B4513", "#FA8072", "#F4A460",
  "#2E8B57", "#FFF5EE", "#A0522D", "#C0C0C0", "#87CEEB", "#6A5ACD",
  "#708090", "#FFFAFA",
  "#00FF7F", "#4682B4", "#D2B48C", "#008080", "#D8BFD8", "#FF6347", "#40E0D0", "#EE82EE", "#F5DEB3",
  "#FFFFFF", "#F5F5F5", "#FFFF00", "#9ACD32"
   ];
let htmlColors = [
  "aqua",   "black",   "blue",  "fuchsia", "gray",   "green",   "lime",  "maroon",
  "navy",   "olive",   "purple","red",     "silver", "teal",    "white", "yellow"
  ];
let htmlNums = [
  "#00FFFF",   "#000000",  "#0000FF", "#FF00FF",   "#808080",  "#008000",   "#00FF00",  "#800000",
  "#000080",   "#808000",  "#800080", "#FF0000",   "#C0C0C0",  "#008080",   "#FFFFFF",  "#FFFF00"
  ];
let htmlSelections = [
  2,         7,        9,       45,        52,       50,        76,       80,
  95,        97,       112,     113,       122,      130,       136,      138
  ];

let count;

///////////PFont monospaceFont = loadFont("bold Courier");
let colorSquare;
let namedSquare;
let htmlSquare;
let lastSlideR = 0;
let lastSlideG = 0;
let lastSlideB = 0;
let sliderChange;

let rSlide, gSlide, bSlide;

function setup() {
  can = createCanvas(width, height);
  can.parent(colorMixer);
  let i, j, k;
  smooth();
  frameRate(20);
  r = 178;
  g = 255;
  b = 192;
  w = 60;
  h = round(w*1.732);
  x = 420;
  y = 40;
  r1 = 37;
  r2 = 13;
  r3 = 37;
  rSlide = createSlider(0, 255, 0);
  rSlide.position(75, 135);
  gSlide = createSlider(0, 255, 0);
  gSlide.position(75, 175);
  bSlide = createSlider(0, 255, 0);
  bSlide.position(75, 215);

  colorSquare = new Square(216);
  namedSquare = new Square(colors.length);
  htmlSquare = new Square(htmlColors.length);

  count = 0;
  for (i = 0; i < 3; i++)  // red left side
    for (j = 0; j < 6; j++)  // green
      for (k = 0; k < 6; k++) { // blue
        colorSquare[count]
           = new Square(LEFT_X + REC_WIDTH * k,
                        TOP_Y + REC_HEIGHT * j + RED_SPACING_Y * i + 10,
                        REC_WIDTH, REC_HEIGHT,
                        color(COLOR_INCR * i,
                              COLOR_INCR * j,
                              COLOR_INCR * k));

        count++;
        colorSquare[count]
           = new Square(LEFT_X + RED_SPACING_Y + REC_WIDTH * k,
                        TOP_Y + REC_HEIGHT * j + RED_SPACING_Y * i + 10,
                        REC_WIDTH, REC_HEIGHT,
                        color(COLOR_INCR * (i + 3),
                              COLOR_INCR * j,
                              COLOR_INCR * k));

        count++;
      }
  for (i = 0; i < colors.length; i++) {
    j = floor(i/10);  // row
    k = i - j * 10;   //column
    namedSquare[i] = new Square(NAME_X + REC_WIDTH * k + 45,
                             TOP_Y + REC_HEIGHT * j + 10,
                             REC_WIDTH, REC_HEIGHT,
                             colorsNum[i]);
  }
  for (i = 0; i < htmlColors.length; i++) {
    j = floor(i/8);  // row
    k = i - j * 8;   //column
    htmlSquare[i] = new Square(NAME_X + REC_WIDTH * k + 65,
                             TOP_Y + REC_HEIGHT * j + 310,
                             REC_WIDTH, REC_HEIGHT,
                             htmlNums[i]);
  }

} // setup

function draw() {
  let i;
  let currentColor;
  background("#FFFFDD");   // background color
  stroke("#000000");
  // the color mixer display
  fill("#DDDDDD");
  rect(x-w-r1, y-r1+5, 2*(w + r1), h+2*r1-10);
  line(x, y, x+w, y+h);
  line(x-w, y+h, x+w, y+h);
  line(x, y, x-w, y+h);
  line(x, y+2*h/3, x-w, y+h);
  line(x, y+2*h/3, x+w, y+h);
  line(x, y+2*h/3, x, y);

  fill(r, 0, 0);
  ellipse(x, y, r1, r1);
  fill(0, 0, b);
  ellipse(x+w, y+h, r1, r1);
  fill(0, g, 0);
  ellipse(x-w, y+h, r1, r1);
  fill(r, g, 0);
  ellipse(x-w/2, y+h/2, r2, r2);
  fill(r, 0, b);
  ellipse(x+w/2, y+h/2, r2, r2);
  fill(0, g, b);
  ellipse(x, y+h, r2, r2);
  fill(r, g, b);
  ellipse(x, y+2*h/3, r3, r3);

  // the sliders
  sliderChange = false;
  let rVal = rSlide.value();
  r = round(rVal);
  if (r != lastSlideR) sliderChange = true;
  lastSlideR = r;
  fill ("#FF0000");
  text("Red:    " + hex(r, 2), 20, 30);
  let gVal = gSlide.value();
  g = round(gVal);
  if (g != lastSlideG) sliderChange = true;
  lastSlideG = g;
  fill("#00FF00");
  text("Green:  " + hex(g,2), 20, 70);
  let bVal = bSlide.value();
  b = round(bVal);
  if (b != lastSlideB) sliderChange = true;
  lastSlideB = b;
  fill("#0000FF");
  text("Blue:   " + hex(b,2), 20, 110);
  currentColor = color(r,g,b);
  if (sliderChange) msg = "";

  // the current color number
  fill("#CCCCCC");
  rect(28.0, 140.0, 235.0, 50.0, 7.0, 7.0);
  fill("#000000");
  textFont("Courier", 16);
  let hexR = hex(r,2);
  let hexG = hex(g,2);
  let hexB = hex(b,2);
  fill("#000000");
  text("Color:web(#       )", 49, 160);
  fill("#FF0000");
  text(hexR, 156, 160);
  fill("#008000");
  text(hexG, 177, 160);
  fill("#0000FF");
  text(hexB, 198, 160);
  text("Decimal:(            )", 44, 180); 
  fill("#FF0000");
  text(round(r) + ",", 130, 180);
  fill("#008000");
  text(round(g) + ",", 172, 180);
  fill("#0000FF");
  text(round(b), 214, 180);
  // display safe colors
  textFont("Courier", 14);
  fill("#000000");
  text("Safe Colors",10, TOP_Y + 2);
  for (i = 0; i < count; i++){
    // Note:  The hex values may be equal even though the values
    // currentColor and colorSquare[i].getColor different because they
    // were created in different ways.
    if (colorEqual(currentColor, colorSquare[i].getColor())) {
      fill("#FF0000");
      rect(colorSquare[i].getLeft()-3, colorSquare[i].getTop()-3, 23, 23);
    }
    colorSquare[i].draw();
  }
  // display the CSS named colors
  fill("#000000");
  text("CSS Colors", NAME_X + 45, TOP_Y + 2);
  for (i = 0; i < colors.length; i++) {
    if (colorEqual(currentColor, namedSquare[i].getColor())) {
      fill("#FF0000");
      rect(namedSquare[i].getLeft()-3, namedSquare[i].getTop()-3, 23, 23);
      msg = "Color name: " + colors[i];
    }
    namedSquare[i].draw();
  }
  // display the HTML named colors
  fill("#000000");
  text("HTML Colors", NAME_X + 45, TOP_Y + 302);
  for (i = 0; i < htmlColors.length; i++) {
    if (colorEqual(currentColor, htmlSquare[i].getColor())) {
      fill("#FF0000");
      rect(htmlSquare[i].getLeft()-3, htmlSquare[i].getTop()-3, 23, 23);
    }
    htmlSquare[i].draw();
  }
  // statements giving HTML color names
  fill("#DDDDDD");
  rect(NAME_X + 5, TOP_Y + 355, 250, 35, 9);
  fill("#000000");
  text(msg, NAME_X + 10, TOP_Y + 375);
}  // draw

function colorEqual(c1, c2) {
  return (red(c1)== red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2))
}

function mouseClicked() {
  // Mouse clicked event processing
  let i;

  for (i = 0; i < count; i++) {
    if (colorSquare[i].isOver()) {
      changeColor(colorSquare[i].getColor());
      currentColor = i;
      msg = "";
      return;
    }
  }
  for (i = 0; i < colors.length; i++) {
    if (namedSquare[i].isOver()) {
      changeColor(namedSquare[i].getColor());
      currentColor = 1000 + i;
      fill("#000000");
      msg = "Color name: " + colors[i];
    }
  }
  for (i = 0; i < htmlColors.length; i++) {
    if (htmlSquare[i].isOver()) {
      changeColor(htmlSquare[i].getColor());
      currentColor = 1000 + htmlSelections[i];
      fill("#000000");
      msg = "Color name: " + htmlColors[i];
      return;
    }
  }
}

function changeColor(c) {  // sets sliders
  r = floor(red(c));
  setSliderValue(rSlide, r);
  g = floor(green(c));
  setSliderValue(gSlide, g);
  b = floor(blue(c));
  setSliderValue(bSlide, b);
}

function setSliderValue(slider, _v) {
  slider.value(_v);
}

/**
 * class Square
 */
class Square {
//  let x, y, w, h;
//  color c;

  constructor(_x, _y, _w, _h, _c) {
    this.x = _x;
    this.y = _y;
    this.w = _w - 4;
    this.h = _h - 4;
    this.c = _c;

    this.isOver = function () {
      return mouseX >= this.x && mouseX <= this.x + this.w 
          && mouseY >= this.y && mouseY <= this.y + this.h;
    }  // isOver;

    this.draw = function() {
      fill(this.c);
      rect(this.x, this.y, this.w, this.h);
    } // draw

    this.getLeft = function() { return this.x; }
    this.getTop = function() { return this.y; }
    this.getColor = function() { return this.c; }
  }  // constructor Square

}