//  James Brink      @/2/2020//  HowToArrangeRowsHTMLComponents
/**
 * This function simplifies creating a component with a parent and optional
 * style.  It is an advanced version of p5.js createElement function.
 * tag     String:  tag for the new element.
 *         The created element has the form  <tag>content</tag>.  Hence
 *         it should not be used for more complicated tags like <a href ... >
 *         that require information not suitable for  </tag>
 * content: String:  html content to be inserted into the element.
 *         The content should not contain tags for HTML components.
 * parent:  String|p5.Element|Object: the ID, DOM node, or p5.Element
 *         of desired parent element.  (Optional)
 * style:   String:  css style description.  Allows setting multiple styles (optional)
 *         For example:  "color: red; width:120px; height:40px;"
 */
function myCreateElement(tag, content, itsParent, itsStyle) {
  let comp = createElement(tag, content);
  if (itsParent != null) {
     comp.parent(parent);
  }
  if (style != null) {
    comp.style(style);
  }
  return comp;
}  // end myCreateElement

/* This function creates a special span with optional parent, color,
 * and fixed width.
 * parent  String|p5.Element|Object: the ID, DOM node, or p5.Element
 *         of desired parent element.  (Optional)
 * color:  Color of text.  Use CSS colors like red or #FF0000.
 *        (Optional)
 * width:  Width of span.  If specified, the span is displayed as an
 *        inline-block.  "px" is added.  (Optional)
 */
function myCreateSpan(content, parent, itsColor, itsWidth) {
  let span = createSpan(content);
  span.parent(parent)
  if (itsColor != null) {
     span.style("color: " + itsColor);
  }
  if (itsWidth != null) {
     span.style("width: " + itsWidth + "px; display: inline-block" );
  }
}  // myCreateSpan

/**
 * Produces a random Color
 * aMin:   number:  the min value allowed for each of the color numbers.
 *    Optional, default: 0, constraint 0 <= aMin <= 255)
 * aMax:   number:  the max value allowed for each of the color numbers.
 *    Optional, default: 255),  constaint aMin <= aMax <= 255
*/
function randomColor(aMin, aMax) {
  if (aMin == null) {
    aMin = 0;
  } else {
    aMin = constrain(aMin, 0, 255);
  }
  if (aMax == null) {
    aMax = 255;
  } else {
    aMax = constrain(aMax, aMin, 255);
  }
  let red = random(aMin, aMax);
  let green = random(aMin, aMax);
  let blue = random(aMin, aMax);
  return color(red, green, blue);
}  // end randomColor

/**
 * Returns a string that contains CSS that can set the size of an
 * object randomly.  The parameters apply to both the width and height.
 * aMin  number:  the minimum size of the object.  (Optional, default 20.
 *                constraint: aMin >= 0
 * aMax  number:  the maximum size of the object.  (Optional, default = aMin
 *                so the component is square if the aMax is omitted.  constraint:
 *                aMax >= 10
 *      Example:
 * randomSize(40, 80) might equal "width: 54px; height: 72px"
 */
function randomSize(aMin, aMax) {
  if (aMin == null) {
    aMin = 20;
  } else {
    aMin = max(10, aMin);
  }
  if (aMax == null) {
    aMax = aMin;
  } else {
    aMax = max(10, aMax);
  }
  return "width: " + random(aMin, aMax)
         + "px; height: " + random(aMin, aMax) + "px;";
} // end randomSize