var orden = [], hardmode = false, called = "",strict = false,pause = true, o = 0,inputUsuario = [];

//hide stop button so they dot overlap
$(document).ready(function() {
  document.getElementById("counter").value = "--";
  $("#stop").hide();
});

//tecla is the strict buton
$("#strict-button").click(function() {
  if (strict === false) {
    strict = true;
    $(this).css({
      "background-color": "red"
    });
  } else {
    strict = false;
    $(this).css({
      "background-color": "#212121"
    });
  }  
});

//tecla2 is the blind mode
$("#blind-button").click(function() {
  if (hardmode === false) {
    hardmode = true;
    $("#blind-button").css({
      "background-color": "red"
    });
    $("#place1,#place2,#place3,#place4").addClass("hardmode");
  } else {
    $("#place1,#place2,#place3,#place4").removeClass("hardmode");
    hardmode = false;
    $("#blind-button").css({
      "background-color": "#212121"
    });
  }
});

//start button, hides itself after click 
$("#start").click(function() {
   o=0;
  write();
  $("#start").hide();
  $("#stop").show();
});

//button that calls the stop function that resets the game
$("#stop").click(function() {
  stop();
  document.getElementById("counter").value = "--";
  $("#stop").hide();
});


//color fills the user array, also checks if the sequence is the same as ai, and check if the user won after doing 20 sequences
$(".color").click(function() {

  if (pause === false && orden.length > 0) {
    value = parseInt($(this).attr("value"));
    inputUsuario.push(value);
    var audio = document.getElementById("audio" + value);
    audio.play();

    if (orden[o] !== inputUsuario[o]) {
      if (strict !== true) {
        document.getElementById("counter").value = "mistake";
        inputUsuario = [];
        pause = true;
       $('#place1,#place2,#place3,#place4').prop('disabled', true);
        startTimer(0);
      } else {
        document.getElementById("counter").value = "game over";
        stop();
      }
    } else {

      if (inputUsuario.length === orden.length) {
        if (o != 14) {
          inputUsuario = [];
          pause = true;
      $('#place1,#place2,#place3,#place4').prop('disabled', true);
          write(0);
        } else {
          audio.src = "http://66.90.93.122/ost/pokemon-ten-years-of-pokemon/lcmjyyaprv/1-pokemon-theme-season-theme-.mp3";
          audio.play();
          $("#place1,#place2").css("background-color", "red");
          $("#place3,#place4").css("background-color", "white");
          $("#counter").css("width", "80px")
          document.getElementById("counter").value = "Catch'Em All";
          alert("YOU WON");
          stop();
        }
      }
    }
    o++;
  }
});

//write is the function that push the new color and calls the timer

function write(i) {
  if (pause === true) {
    o=0;
    pos = Math.floor((Math.random() * 4) + 1);
    orden.push(pos);
    document.getElementById("counter").value = orden.length;
    startTimer(0);
  }
}

//timer is the one that repeats all the color after a new input or if someone made a mistake
function startTimer(i) {
  timer = setInterval(function() {
    audio = document.getElementById("audio" + orden[i]);
    audio.play();
    switch (orden[i]) {
      case 1:
        called = "redcalled";
        break;
      case 2:
        called = "bluecalled";
        break;
      case 3:
        called = "yellowcalled";
        break;
      case 4:
        called = "greencalled";
    }
    $("#place" + orden[i]).addClass(called);
    setTimeout(function() {      
      //the 400-orden.length*9, its so the game is faster the longer you are, before i had it too fast
      $("#place1,#place2,#place3,#place4").removeClass(called);
    }, 400-orden.length*10);
    document.getElementById("counter").value = orden.length;
    
    //honestly i have no idea why i must put -2 and no -1, but it just worked
    if (i > orden.length - 2) {
      pause = false;
      $('#place1,#place2,#place3,#place4').prop('disabled', false);
      clearInterval(timer);
      o = 0;
    }
    i++;
  }, 1000-orden.length*20);
}

//stop is going to be a button that will stop the game so you can start again

function stop() {
  $("#place1,#place2,#place3,#place4").removeClass(called);
  $('#place1,#place2,#place3,#place4').prop('disabled', false);
  clearInterval(timer);
  pause = true;
  $("#stop").hide();
  $("#start").show();
  orden = [];
  inputUsuario = [];
}