/*******************************************************************************
 * A visual chord quiz. Gives the player the name of a chord. The
 * player must pick the notes, or vice versa.
 *
 * Required HTML elements:
 * - viqQuestion: The question.
 * - viqChoices: The multiple choice options.
 * - viqScoreBox: Place for scores.
 ******************************************************************************/


// ES: This shares an awful lot in common with the interval quiz. Try
// to consolidate!

var vcq = new VisualChordQuiz(4);

function VisualChordQuiz(nChoices)
{
  this.nChordTypes = 4; // When there are more than 4 types defined,
			// this can be parameterized.
  this.nChoices = 4;
  this.answer = null;
  this.nTries = 0;
  this.nCorrect = 0;
  this.chordName = null;

  this.MakeQuestion = function () {
    var accidental = RandomChoice(['#', 'b']);
    var rootNum = RandomInt(0, 12);
    var rootName = NoteNumToName(rootNum, accidental);
    var chordType = chordTypes[RandomInt(0, this.nChordTypes)];
    this.chordName = rootName + chordType[0];
    var chordFirst = RandomChoice([true, false])

    if (chordFirst) {// ES: Temp
      return this.MakeChordFirstQuestion(rootName, rootNum, chordType, accidental);
    }

    this.answer = this.chordName;

    var questionText = 'What chord contains the notes ' + rootName;
    for (var i = 0; i < chordType[1].length; i++) {
      questionText += ', ';
      if (i == chordType[1].length - 1) {
	questionText += 'and ';
      }
      questionText += NoteNumToName(rootNum + chordType[1][i], accidental);
    }
    questionText += '?';
    document.getElementById('vcqQuestion').innerHTML = questionText;

    var choicesText = '<ul class="vcqChoicesList">';
    for (var i = 0; i < this.nChordTypes; i++) {
      choicesText += '<li><a href="#" onClick="return vcq.Guess(this)">' + rootName +
	chordTypes[i][0] +
	'</a></li>';
    }
    choicesText += '</ul>';
    document.getElementById('vcqChoices').innerHTML = choicesText;
  }

  this.MakeChordFirstQuestion = function(rootName, rootNum, chordType, accidental) {
    var questionText = 'What notes are in the chord ' + rootName + chordType[0] + '?' ;
    document.getElementById('vcqQuestion').innerHTML = questionText;

    var choicesText = '<ul class="vcqChoicesList">';

    // Clone chordTypes:
    randomChords = chordTypes.slice(0, this.nChordTypes);
    // Shuffle:
    for (var i = 0; i < this.nChordTypes; i++) {
      var temp = randomChords[i];
      var j = RandomInt(0, this.nChordTypes);
      randomChords[i] = randomChords[j];
      randomChords[j] = temp;
    }
    for (var i = 0; i < this.nChordTypes; i++) {
      var oneChoiceText = rootName;
      for (var j = 0; j < randomChords[i][1].length; j++) {
	var noteName = NoteNumToName(rootNum + randomChords[i][1][j], accidental);
	if (j == chordType[1].length - 1) {
	  oneChoiceText += ', and ';
	} else {
	  oneChoiceText += ', ';
	}
	oneChoiceText += NoteNumToName(rootNum + randomChords[i][1][j], accidental);
      }
      if (randomChords[i] == chordType) this.answer = oneChoiceText;
      choicesText += '<li><a href="#" onClick="return vcq.Guess(this)">' + oneChoiceText + '</a></li>';
    }
    choicesText += '</ul>';
    document.getElementById('vcqChoices').innerHTML = choicesText;
  }

  this.Guess = function(el) {
    if (el.innerHTML == this.answer) {
      document.getElementById('vcqLastResult').innerHTML = ['Correct!', 'Good job!', 'That\'s right!',
							    'Nice one!', 'Yup!', 'You got it!'][this.nCorrect % 6];
      document.getElementById('vcqLastResult').style.color = 'blue';
      this.nCorrect++;
    } else {
      document.getElementById('vcqLastResult').innerHTML = 'Incorrect. Correct answer was ' + this.answer + '.';
      document.getElementById('vcqLastResult').style.color = 'red';
    }
    this.nTries++;
    percentage = Math.round(this.nCorrect / this.nTries * 100);
    document.getElementById('vcqScore').innerHTML = this.nCorrect + ' out of ' + this.nTries + ' (' + percentage + '%)';
    document.getElementById('vcqScore').style.display = 'block';
    this.MakeQuestion();
    return false;
  }

  this.GetHtml = function() {
    return '<div id="vcq">' +
    '<div id="vcqLastResult"></div>' +
    '<div id="vcqQuestion"></div>' +
    '<div id="vcqChoices"></div>' +
    '<div id="vcqScore"></div>' +
    '</div>';
  }

  this.GetCss = function() {
    return '<style type="text/css">' +
    '#vcq {' +
    '   border-style:solid;' +
    '   border-width:1px;' +
    '   border-color:black;' +
    '   width:30em;' +
    '   margin:2px;' +
    '}' +
    '#vcqScore {' +
    '   border-top-style:solid;' +
    '   border-top-width:1px;' +
    '   border-color:black;' +
    '   background:#dddddd;' +
    '   text-align:center;' +
    '   display:none;' +
    '}' +
    '#vcqChoices a {' +
    '   width:10em;' +
    '   background:#FFFFFF;' +
    '   margin-bottom:2px;' +
    '}' +
    '</style>';
  }

  this.EmbedMe = function() {
    document.write(this.GetCss());
    document.write('<p>This quiz tests your understanding of how chords are constructed. Choose the correct response to the question below.</p>');
    document.write(this.GetHtml());
    this.MakeQuestion();
    return false;
  }
}