// LOAD SOUND FILES
var audio1 = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
var audio2 = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
var audio3 = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
var audio4 = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
// GLOBALS FOR START, STOP AND TIMING OF GAME
var strictButtonAtStart = false;
var gameList = [];
var game = null;
var counter = 0;
var playID = null;
var playing = false;
var buttonCounter = 0;
var gameState = false;

// MAKE SOUND FUNCTIONS NOW TO CUT DOWN ON TIMING CODE
function playSound1(){
    audio1.play();
}
function playSound2(){
    audio2.play();
}
function playSound3(){
    audio3.play();
}
function playSound4(){
    audio4.play();
}

// STRICT BUTTON FUNCTION
function strictButton(){
    strictButtonAtStart = !strictButtonAtStart;
    console.log('STRICT BUTTON: ', strictButtonAtStart);
    if (strictButtonAtStart){
        this.style.background = 'yellow';
    } else { this.style.background = '#D3D3D3';}
}

// START BUTTON FUNCTION; BECOMES A STOP BUTTON FOR STOPPING AND RESETTING GAME
function startNewGame(){
    if (!gameState){
        gameState=true;
        gameList.unshift(new SimonGame);
        game = gameList[0];
        if (gameList.length>1){
            gameList.pop();
        }
        this.innerHTML = 'STOP';
        game.init();
    } else {
        gameState=false;
        this.innerHTML = 'START';
        document.getElementById('strict-button').addEventListener('click', strictButton);
    }
}
// TIME CODE FOR PLAYING A SINGLE BUTTON
function playThisButton(){
    if (counter<game.aiSequence.length){
        if (!gameState){
            clearInterval(playID);
        }
        game.lightSoundAnimate(game.aiSequence[counter]);
        counter++;
        game.progressCount();
    } else {
        clearInterval(playID);
        playing = false;
        game.setButtons();
        game.aiWaitClick();
    }
}
// INITIALIZATION CODE FOR PLAYING BUTTON SEQUENCE
function playAllButtons(){
    if (!playing && gameState){
        playing = true;
        game.stopButtons();
        window.setTimeout(function(){

            counter = 0;
            playID = setInterval(playThisButton, 900);
        }, 500);

    }

}
// PENALIZE PLAYER FOR TAKING TOO LONG
function timeOutPenalty(){
    game.stopButtons();
    console.log('TIME EXPIRED');
    game.uxSequence.splice(0);
    game.failNotify();
    if (game.strict){
        game.aiSequence.splice(0);
        game.aiAddButton();
    }
    playAllButtons();
}
// ORDER OF CHECKS FOR SELECTED BUTTON; DON'T ALLOW BUTTON SELECTION WHILE PLAYING THE SEQUENCE
function playerTurnPress(){
    if (!playing && gameState){
        window.clearTimeout(game.clickClock);
        game.lightSoundAnimate(this.id);
        if (this.id != game.aiSequence[game.uxSequence.length]){
            game.failNotify();
            game.uxSequence.splice(0);
            if (!game.strict){
                playAllButtons();
            } else {
                game.aiSequence.splice(0);
                game.aiAddButton();
                playAllButtons();
            }
        } else {
            game.uxSequence.push(this.id);
            if (game.uxSequence.length == game.aiSequence.length){
                if (game.aiSequence.length === 20){
                    game.winNotify();
                    document.getElementById('start-text').click();
                }
                game.aiAddButton();
                playAllButtons();
                game.uxSequence.splice(0);
            } else {
                game.aiWaitClick();
            }
        }
    }
}

// CLASS FOR GAME; CONTAINS GAME VARIABLES AND FUNCTIONS
class SimonGame{
    constructor(){
      // MAKE A LIBRARY/ OBJECT CONTAINING ATTRIBUTES UNIQUE FOR EACH BUTTON
        this.quadLib = {
            'box1': ['#00FF00', '#008000', '-3px -3px 10px #00FF00', audio1],
            'box2': ['#FF0000', '#CC0000', '3px -3px 10px #FF0000', audio2],
            'box3': ['#FFFF00', '#DDDD00', '-3px 3px 10px #FFFF00', audio3],
            'box4': ['#0000FF', '#0000AA', '3px 3px 10px #0000FF', audio4]
        };
      // SET UP GAME VARIABLES
        this.quadrants = null;
        this.strict = null;
        this.clickClock = null;
        this.allowMouseClick = null;
        this.aiSequence = [];
        this.uxSequence = [];
        this.t=-1;
    }
// EVENTS FOR EACH BUTTON ANIMATION
    lightSoundAnimate(quadrant){
        document.getElementById(quadrant).style.background = this.quadLib[quadrant][0];
        document.getElementById('control-box').style.boxShadow = this.quadLib[quadrant][2];
        this.quadLib[quadrant][3].play();
        var shadow = this.quadLib[quadrant][1];
        window.setTimeout(function(){
            document.getElementById(quadrant).style.background = shadow;
            document.getElementById('control-box').style.boxShadow = 'none';
        }, 750);
    }
  // START LISTENING FOR CLICKS
    setButtons(){
        this.quadrants.forEach(function(e){
            e.addEventListener('click', playerTurnPress);
        });
    }
  // STOP LISTENING FOR CLICKS
    stopButtons(){
        this.quadrants.forEach(function(e){
            e.removeEventListener('click', playerTurnPress, false);
        });
    }
  // TIME LIMIT FOR PLAYER BUTTON CHOICE
    aiWaitClick(){
        if (gameState){
            this.clickClock = window.setTimeout(timeOutPenalty, 5000);
        }
    }
  // ADD A BUTTON TO SEQUENCE
    aiAddButton(){
        this.aiSequence.push(this.quadrants[Math.floor(Math.random()*4)].id);
    }
  // ADVANCE THE COUNTER
    progressCount(){
        document.getElementById('count-box').innerHTML = this.aiSequence.length;
    }
  // NOTIFY THE PLAYER OF A WIN
    winNotify(){
        document.getElementById('count-box').innerHTML = ": D";
        window.setTimeout(playSound3, 200);
        window.setTimeout(playSound2, 350);
        window.setTimeout(playSound1, 700);
    }
  // NOTIFY THE PLAYER OF INCORRECT BUTTON CHOICE
    failNotify(){
        document.getElementById('count-box').innerHTML = ": (";
        window.setTimeout(playSound4, 200)
        window.setTimeout(playSound3, 450);
    }
// INITIALIZE GAME 
    init(){
        this.strict = strictButtonAtStart;
        document.getElementById('strict-button').removeEventListener('click', strictButton, false);
        this.quadrants = [
            document.getElementById('box1'),
            document.getElementById('box2'),
            document.getElementById('box3'),
            document.getElementById('box4')
        ];
        this.aiAddButton();
        playAllButtons();
        this.allowMouseClick = true;
        this.setButtons();
    }
}

// SET UP GAME AFTER DOM LOADED
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('strict-button').addEventListener('click', strictButton);
    document.getElementById('start-text').addEventListener('click', startNewGame);
});