var pattern = [];
var player = [];
var possibilities = ['red', 'green', 'blue', 'yellow'];
var addOne;
var i = 0;
var redAudio = document.createElement('audio');
redAudio.setAttribute('src', 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
var blueAudio = document.createElement('audio');
blueAudio.setAttribute('src', 'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
var greenAudio = document.createElement('audio');
greenAudio.setAttribute('src', 'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
var yellowAudio = document.createElement('audio');
yellowAudio.setAttribute('src', 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
    

$('#start').on('click', function() {
  addCount();
  $('#start').off('click');
})

$('#reset').on('click', function() {
  $('.button').off('click');
  player = [];
  pattern = [];
  $('#totalCount').html(pattern.length);
  $('#start').on('click', function() {
    addCount();
    $('#start').off('click');
  })
})

function addCount() {
  addOne = Math.floor(Math.random() * 4);
  pattern.push(possibilities[addOne]);
  $('#totalCount').html(pattern.length);
  playPattern();
}

function playPattern() {
  setTimeout(function() {
    $('#' + pattern[i]).removeClass('dark');
    if (pattern[i] == 'red'){
      redAudio.play();
    } else if (pattern[i] == 'green'){
      greenAudio.play();
    } else if (pattern[i] == 'blue'){
      blueAudio.play();
    } else if (pattern[i] == 'yellow'){
      yellowAudio.play();
    } 
    setTimeout(button.bind(null, pattern[i]),400);
    i++;
    if (i < pattern.length) {
      playPattern();
    } else if (i == pattern.length) {
      i = 0;
      player = [];
      playerTurn();
    }
  },700);
}

function button(color, delay) {
  $('#' + color).addClass('dark');
}

function playerTurn () {
  $('.button').on('click', function(){
    player.push(this.id);
    if (player.length < pattern.length && 
        player[player.length-1] == pattern[player.length-1]) {
      playButton(this.id);
    } else if (player.length == pattern.length && 
        player[player.length-1] == pattern[player.length-1] &&
        pattern.length < 20) {
      $('.button').off('click');
      playButton(this.id);
      setTimeout(addCount,500);
    } else if (player.length == pattern.length && 
        player[player.length-1] == pattern[player.length-1] &&
        pattern.length == 20) {
      $('#yay').removeClass('hidden');
      $('.button').off('click');
      setTimeout(function(){$('#yay').addClass('hidden');},2000);
      setTimeout(strictLoss,2500);
    } else if (player[player.length-1] != pattern[player.length-1]) {
      $('#wrong').removeClass('hidden');
      $('.button').off('click');
      setTimeout(function(){$('#wrong').addClass('hidden');},1000);
      if (document.getElementById('strict').checked) {
        $('#strictLoss').removeClass('hidden');
        setTimeout(function(){$('#strictLoss').addClass('hidden');},1000);
        setTimeout(strictLoss,1500);
      } else {
        setTimeout(playPattern,1500);
      }
    }
  })
}

function strictLoss() {
  player = [];
  pattern = [];
  $('#totalCount').html(pattern.length);
  addCount();
}

function playButton(box) {
  $('#' + box).removeClass('dark');
  if (box == 'red'){
      redAudio.play();
    } else if (box == 'green'){
      greenAudio.play();
    } else if (box == 'blue'){
      blueAudio.play();
    } else if (box == 'yellow'){
      yellowAudio.play();
    } 
  setTimeout(button.bind(null, box),300);
}