[Sprite Test] sprite.js

function checkbox(label, value, parent){
    /* This function generates an HTMLSpanElement to act as the checkbox
     */
    function get_value(){ //..... returns the value, 1 or 0
        return this.value;
    }
    function set_value(value){ // sets value and class accordingly. Accepts 1 (true) or 0 (false)
        this.value = value;
        this.className = "check " + (value ? "" : "un") + "checked";
            //................... That's a ternary switch. It goes like this: boolean ? when true : when false
    }
    function toggle_value(){ // Self-explanatory
        if(this.value) this.set_value(0);
        else this.set_value(1);
    }
    var cb = document.createElement("span"); // creating the 'checkbox': an instance of HTMLSpanElement
    cb.get_value = get_value; //............... Exposing the above functions to cb, such that e.g. cb.toggle_value() could be called from the JS console and trigger the checkbox to toggle
    cb.set_value = set_value;
    cb.toggle_value = toggle_value;

    cb.addEventListener("click", toggle_value); // adding toggle_value() to click event
    cb.set_value(value) //........................ defaulting value to what is provided at creation
    cb.label = label; //.......................... setting label, because why not
    parent.appendChild(cb); //.................... this is the line that actually makes the checkbox appear on the webpage
    parent.appendChild((function(){ //............ generate a span containing the label, so that you can see what the checkbox does
        var lb = document.createElement("span");
        lb.innerHTML = label;
        return lb;
    })());
    parent.appendChild(document.createElement("br")); // line break so everything isn't in a single giant line
    return cb; // returning object so that it can be referenced. Otherwise, it would die here, and have to be referenced via document.querySelector()
}

var cbs = [
    checkbox("Scruff palm trees", 0, settings),
    checkbox("Save the times when raccoons attack", 1, settings),
    checkbox("when? now?", 1, settings)
];
/* Notice that I did not use document.querySelector() or document.getElementByID(), or even define "settings" at all. When the script is loaded AFTER the body,
 * the body's ID'd elements are automatically referenced by ID and provided at the window level (as global variables).
 * So, 'settings' is a reference to <div id="settings"></div> from the HTML document that calls this script.
 */

function collision(x1,y1,w1,h1,x2,y2,w2,h2){
  /* I like this function. It's simultaneously simple, elegant and complex.
   * It detects a collision between two objects by checking that they are NOT outside of each other.
   */
  return !(
    x1+w1 < x2 ||
    y1+h1 < y2 ||
    x2+w2 < x1 ||
    y2+h2 < y1
  );
}
function report_button(){
    /* Generates the "report button"
     */
    function hover(e){ //......... This toggles the button between its up and hover states.
      if(e.type == "mouseout"){ // If the mouse is leaving the button...
        this.className = "button up";
        return;
      }
      if(e.type == "mouseover"){ // entering...
        this.className = "button hover";
        return;
      }
      /* If control makes it here, then we're dealing with a "mousemove" event. No need to explicitly check,
       *   because the only three events that call this function are mouseover, mouseout, and mousemove
       * The following is to defend against weird stuff that can stop the button from receiving events,
       *   such as an alert() box, a suitably fast mouse hand, and who-knows-what.
       */
      var mx = e.clientX || e.pageX;
      var my = e.clientY || e.pageY;
      if (collision(mx, my, 0, 0, this.offsetLeft+2, this.offsetTop+2, 96-4, 24-4)){
        this.className = "button hover";
      }else{
        this.className = "button up";
      }
    }
    function report(){
      /* This is what happens when the button is clicked.
       * Normally, in a constructor function for a button,
       * I would pass this as an argument to the constructor function, which would execute this on-click
       * but since this is a one-off button for a tech demo...
       */
      var i = 0, str = "";
      while (i < cbs.length){
        str += "\n" + cbs[i].label + ":  " + (cbs[i].get_value() ? "On" : "Off");
        i++;
      }
      alert(str);
    }
    var btn = document.createElement("span"); // So now we start building our element...
    btn.className = "button up"; //............. default state
    btn.addEventListener("mouseover", hover); // a bunch of listeners
    btn.addEventListener("mouseout", hover);
    btn.addEventListener("mousemove", hover);
    btn.addEventListener("click", report); //... the on-click trigger
    document.body.appendChild(btn); //.......... Got lazy here and just shoved it into the document body.
    return btn;
}
var rbtn = report_button();