window.onload = function () {

        var checkmark = 0,
            /* these 2 variables are used when we need to get the time displaying on-screen, for instance, when the timer is paused and we click 'play' again.
            */
            minutes = 0,
            seconds = 0,
            timerId = 0,
            /* initiates the variables with a standard pomodoro and standard breaks. These variables are used to "save" the settings.
            */
            pomodoroMinutes = "25",
            pomodoroSeconds = "00",
            shortBreakMinutes = "5",
            shortBreakSeconds = "00",
            longBreakMinutes = "15",
            longBreakSeconds = "00",


            ticking = false,
            fadeAudio,
            sound,
            firstTimeButtonClick = true,
            lastIntervalWasAPomodoro = true;

        var p = document.getElementById("timerButton");


            /*Avoid setInterval; use setTimeout instead. http://zetafleet.com/blog/why-i-consider-setinterval-harmful (requestAnimationFrame may be another alternative)
            https://gist.github.com/jkantr/22880fd3bdcdcd741c4f25fb3d379d35*/

        p.onclick = timerButtonClicked;



        function timerButtonClicked(event) {


            if (firstTimeButtonClick) { //if starting the timer for the first time

                firstTimeButtonClick = false;
            }


            if (ticking) { //if timer is already ticking: ticking = true

                console.log("if ticking true");

              /*  var danger = document.getElementsByClassName('btn-danger');
                console.log(danger[0]);
                danger[0].className = 'btn-success';*/

                document.getElementById("timerButton").classList.remove("btn-warning");
                document.getElementById("timerButton").classList.add("btn-success");

                document.getElementById("fa").classList.remove("fa-pause");
                document.getElementById("fa").classList.add("fa-play");


                text = document.getElementById('buttontext');
                text.innerHTML = 'Play';

                ticking = false;
                clearInterval(timerId);
                sound.pause();




            } else { //if timer is stopped: ticking = false


                playTickingSound();

                document.getElementById("timerButton").classList.remove("btn-success");
                document.getElementById("timerButton").classList.add("btn-warning");

                document.getElementById("fa").classList.remove("fa-play");
                document.getElementById("fa").classList.add("fa-pause");

                text = document.getElementById('buttontext');
                text.innerHTML = 'Pause';

                ticking = true;
                seconds = document.getElementById("seconds").innerHTML;
                minutes = document.getElementById("minutes").innerHTML;

                timerId = setInterval(decrementTimer, 1000);

            }

        }

        function playTickingSound() {

            sound = new Audio('ticking.wav');
            sound.play();

            fadeAudio = setInterval(function () {


                // Set the point in playback that fadeout begins.
                var fadePoint = sound.duration - 9;  //=2


                // Only fade if past the fade out point or not at zero already
                if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {

                    if(sound.volume <= 0.12) {
                        sound.volume = 0;
                        clearInterval(fadeAudio);
                    } else {
                        sound.volume = sound.volume - 0.1;
                    }
                }
            }, 1000);

        }

        function decrementTimer() {

            console.log("Entered decrementTimer()");
            minutes = document.getElementById("minutes").innerHTML;
            seconds = document.getElementById("seconds").innerHTML;

            if(minutes>0 || seconds>0) {

                if(seconds>0) {

                    seconds = seconds - 1;

                    if((seconds+"").length === 1){
                        seconds = "0"+seconds;
                    }

                    document.getElementById("seconds").innerHTML = seconds;



                } else { //if minutes > 0

                    minutes = minutes - 1;
                    seconds = 59;

                    //adds a zero on the left if needed
                    if((minutes+"").length === 1){
                        minutes = "0"+minutes;
                    }

                    document.getElementById("minutes").innerHTML = minutes;
                    document.getElementById("seconds").innerHTML = seconds;

                }
            }

            if(minutes==0 && seconds==0) {

                clearInterval(timerId); //CHECK
                zeroTimer();
            }


            //console.log("decrement timer function 2");

        }

        function zeroTimer() {



                //Everytime a pomodoro ends, add 1 to var checkmark
                if(lastIntervalWasAPomodoro === true) {
                    checkmark = checkmark + 1;
                }

                if(checkmark > 4) {
                    checkmark = 0;
                }

                console.log("checkmark", checkmark);

                //If we're in the 3rd short break
                if(checkmark === 3) {

                    //CHECK IF IT'S WORKING
                    document.getElementById("nextBreak").innerHTML = "Next break is a: long break";

                }


                if(checkmark < 4 && lastIntervalWasAPomodoro == true ) {
                    shortBreak();
                    return;
                }

                if((checkmark == 4) && (lastIntervalWasAPomodoro == true)) {
                    longBreak();
                    return;
                }

                if(checkmark < 4 && lastIntervalWasAPomodoro == false ) {
                    console.log("STARTING A POMODORO");
                    spawnNotification("Back to work!", "Your break is over!");
                    //alertify.alert("Your break is up! Time to go back to work!");

                    if((lastIntervalWasAPomodoro) == false && (checkmark != 3)) {
                        document.getElementById("nextBreak").innerHTML = "Next break is a: short break";
                    }

                    document.getElementById("minutes").innerHTML = pomodoroMinutes;
                    document.getElementById("seconds").innerHTML = pomodoroSeconds;
                    lastIntervalWasAPomodoro = true;
                    timerId = setInterval(decrementTimer, 1000);
                    return; //DO I NEED THIS?
                }
        }

        function shortBreak() {


            console.log("short break");

            document.getElementById("nextBreak").innerHTML = "On a short break";

            lastIntervalWasAPomodoro = false;

            document.getElementById("minutes").innerHTML = shortBreakMinutes;
            document.getElementById("seconds").innerHTML = shortBreakSeconds;

            timerId = setInterval(decrementTimer, 1000);


        }

        function longBreak() {


            console.log("long break");

            document.getElementById("nextBreak").innerHTML = "On a long break";

            lastIntervalWasAPomodoro = false;

            checkmark = 0;

            document.getElementById("minutes").innerHTML = longBreakMinutes;
            document.getElementById("seconds").innerHTML = longBreakSeconds;

            timerId = setInterval(decrementTimer, 1000);

        }

        //Make number double-digit if single-digit
        function addLeftZeroIfNeeded(number) {

            console.log(number);
            if((number+"").length === 1){
                number = "0"+number;
            }

            return number;

        }



        var m = document.getElementById("closeModal");
        m.onclick = closeModalButtonClicked;

        function closeModalButtonClicked(event) {

            if ( document.getElementById("inputPomodoro").value !== "") {

                pomodoroMinutes = document.getElementById("inputPomodoro").value;         pomodoroMinutes = addLeftZeroIfNeeded(pomodoroMinutes);

                document.getElementById("minutes").innerHTML = pomodoroMinutes;
                document.getElementById("seconds").innerHTML = pomodoroSeconds;

            }

            if ( document.getElementById("inputShortBreak").value !== "") {

                shortBreakMinutes = document.getElementById("inputShortBreak").value;
                shortBreakMinutes = addLeftZeroIfNeeded(shortBreakMinutes);

            }

            if ( document.getElementById("inputLongBreak").value !== "") {

                longBreakMinutes = document.getElementById("inputLongBreak").value;
                longBreakMinutes = addLeftZeroIfNeeded(longBreakMinutes);


            }

        }

        function spawnNotification(body, title) {

          var options = {
              body: body,
          };

        var n = new Notification(title, options);
        }


        //function pomodoroEndNotification





        } //closing bracket from window.onload = function ()