(function () {

  var aNotes = [], //gather the note names that will be used to build the dom elements;
  aChords = [], //gather the chord names that will be used to build the dom elements;
  aQuizzes = [], //holds the permutations;
  
  oNotes = {
    "A": ["F♯", "C♯", "G♯"],
    "B": ["F♯", "C♯", "G♯", "D♯", "A♯"],
    "C": ["No ♯s or ♭s"],
    "D": ["F♯", "C♯"],
    "E": ["F♯", "C♯", "G♯", "D♯"],
    "F": ["B♭"],
    "G": ["F♯"],
    "A♭": ["B♭", "E♭", "A♭", "D♭"],
    "B♭": ["B♭", "E♭"],
    "C♭": ["B♭", "E♭", "A♭", "D♭", "G♭", "C♭", "F♭"],
    "D♭": ["B♭", "E♭", "A♭", "D♭", "G♭"],
    "E♭": ["B♭", "E♭", "A♭"],
    "G♭": ["B♭", "E♭", "A♭", "D♭", "G♭", "C♭"],
    "C♯": ["F♯", "C♯", "G♯", "D♯", "A♯", "E♯", "B♯"],
    "F♯": ["F♯", "C♯", "G♯", "D♯", "A♯", "E♯"]
  },
  
  fnRandom = function () {
    return (Math.round(Math.random()) - 0.5);
  },
  
  fnGetArrays = function () { //collect all of the arrays from within the oNotes object;
    var arr = [];
  
    for (var prop in oNotes) {
      if (oNotes.hasOwnProperty(prop)) {
        aNotes.push(prop); //get each note to use later when we build the dom elements;
        aQuizzes.push(oNotes[prop]);
      }
        aQuizzes.sort(fnRandom);
    }
    //aNotes.sort(fnRandom); //randomize them;
  },
  
  n = 0,
  fnGetChord = function () { //get the current chord to display to the user;
    if (n === aNotes.length) {
      n = 0;
    }
    //$("currentKeySignature").innerHTML = "<span>" + oNotes[aNotes[n]].join("</span><span>");
    //$("currentKeySignature").currentKeySignature = oNotes[aNotes[n]]; //we need to attach the array to an expando property since we need another way of comparing than the value of the currentChord dom element (since the browser converts the entity when displaying it and it no longer matches the entity when comparing the values in the event handler);
    $("currentKeySignature").innerHTML = "<span>" + aQuizzes[n].join("</span><span>");
    $("currentKeySignature").currentKeySignature = aQuizzes[n]; //we need to attach the array to an expando property since we need another way of comparing than the value of the currentChord dom element (since the browser converts the entity when displaying it and it no longer matches the entity when comparing the values in the event handler);
    n++;
  };
  
  fnGetArrays();
  
  JSLITE.ready(function () {
  
    var i,
      len;
  
    for (i = 0, len = aNotes.length; i < len; i++) {
      JSLITE.dom.create({tag: "a",
        attr: {
          href: "#"
        },
        children: [
          JSLITE.dom.create({tag: "span",
            attr: {
              innerHTML: aNotes[i],
              note: aNotes[i] //bind an expando property for when comparing values in the event handler;
            }
          })
        ],
        parent: $("keySignatures")
      });
    }
  
    JSLITE.dom.fly("keySignatures").on("click", function (e) { //note we're only binding one event listener for the entire page (because of this make sure each <span> entirely covers each <a>);
      var oTarget = e.target,
        sNote;
  
      if (oTarget.nodeName === "SPAN") {
        sNote = oTarget.note;
        if (oNotes[sNote] === $("currentKeySignature").currentKeySignature) {
          alert("Correct");
          fnGetChord();
        } else {
          alert("Incorrect");
        }
      }
      e.preventDefault();
    });
  
    fnGetChord(); //initialize;
  
  });

}());