// global variable for the project

// default initial width and heigth for the target
var TARGET_WIDTH = 40;
var TARGET_HEIGHT = 40;

// chrono management
// value of time in tenth of seconds
var time = 0;
// timer variable
var chronoTimer = null;


// YOUR NAME HERE

// YOUR CODE BELOW

(function()
{
    var terrain, start_time, interval_id

    function numero_aleatoir( max )
    {
        return Math.floor( Math.random() * max )
    }

    function ajouter_cible()
    {
        var cible = document.createElement('span')
        cible.className = 'target on'
        cible.addEventListener('click', supprimer_cible)

        terrain.appendChild( cible )

        // style
        var top = Math.min( terrain.scrollHeight, numero_aleatoir( terrain.scrollHeight - cible.scrollHeight ) )
        var left = Math.min( terrain.scrollWidth, numero_aleatoir( terrain.scrollWidth - cible.scrollWidth ) )

        cible.style.top = top + 'px'
        cible.style.left = left + 'px'

        calculer_nombre_cible_restants()
    }

    function supprimer_cible()
    {
        if ( ! this.classList.contains('on') )
            return

        this.classList.remove('on')
        this.style.zIndex = -1

        if ( calculer_nombre_cible_restants() === 0 ) {
            if ( start_time > 0 ) {
                arreter_le_jeu()

                setTimeout(alert, 1000, 'Gagne en ' + document.getElementById('chrono').innerText)
            }
        }
    }

    function calculer_nombre_cible_restants()
    {
        var nombre = document.querySelectorAll( '#terrain .target.on' ).length

        document.getElementById('remaining').innerText = nombre

        return nombre
    }

    function ajouter_des_cible( nombre )
    {
        for ( var i=0; i<nombre; i++ ) {
            ajouter_cible( terrain )
        }
    }

    function demarrer_jeu()
    {
        // fresh start
        terrain.innerHTML = ''

        var nbtargets = parseInt( document.getElementById('nbtargets').value )

        if ( nbtargets <= 0 ) {
            return alert( 'Veuillez sisair un nombre plus que zero' )
        }

        ajouter_des_cible( nbtargets )

        // arret
        if ( start_time > 0 )
            arreter_le_jeu()

        // start time
        start_time = Date.now()

        var chrono = document.getElementById('chrono')

        interval_id = setInterval(function()
        {
            var difference = Date.now() - start_time

            var ms = Math.floor( (difference % 1000) / 100 )
            var seconds = Math.floor( difference/1000 ) % 60
            var minutes = Math.floor( difference/1000 /60 )

            if ( seconds < 10 ) {
                seconds = '0' + seconds
            }

            chrono.innerHTML = '<span id="minutes">' + minutes + '</span>\'<span id="seconds">' + seconds + '</span>"<span id="tenth">'  + ms + '</span>'
        }, 100)
    }

    function arreter_le_jeu()
    {
        if ( interval_id > 0 ) {
            clearInterval( interval_id )
        }

        start_time = null
    }

    document.addEventListener('DOMContentLoaded', function()
    {
        terrain = document.getElementById('terrain')

        // Une cible
        document.getElementById('create').addEventListener('click', function()
        {
            ajouter_cible( 1 )
        })

        document.getElementById('start').addEventListener('click', demarrer_jeu)
    })

})()