function httpGetAsync(theUrl, callback) {
    var xhr = new XMLHttpRequest();
    var argsToCallback = Array.prototype.slice.call(arguments, 2);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var args = [JSON.parse(xhr.responseText)];
            args = args.concat(argsToCallback);
            callback.apply(this, args);
        } else {
            console.log("Status de la r�ponse:" + this.status, this.statusText);
        }
    }
    xhr.open("GET", theUrl, true);
    xhr.send(null);
};

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM totalement charg�");

    var map = {
        arrayStation: [],
        map: null,
        UrlGetAll: "https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey=ec961bfa3da07a83f9e495a167f9a34b79f2fa5a",
        init: function() {
            this.map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: {lat: 48.8566, lng: 2.3522}
            });

            httpGetAsync(this.UrlGetAll, this.marqueurs, this.map);
        },

        nomDesStations: function(resultat) {
            var nomCompletStation = donneesJson[i].name;
            var resultat = nomCompletStation.split('-')[1].trim();
        },

        marqueurs: function(donneesJson, map) {
            var markers = [];

            function infosBulleMarker(i) {
                document.getElementById("nomStation").textContent = donneesJson[i].name;
                document.getElementById("adresse").textContent = donneesJson[i].address;
                document.getElementById("statut").textContent = donneesJson[i].status;
                document.getElementById("place_dispo").textContent = donneesJson[i].available_bike_stands;
                document.getElementById("velo_dispo").textContent = donneesJson[i].available_bikes;
                map.panTo(donneesJson[i].position);
            };

            for (var i = 0; i < donneesJson.length; i++) {
                var myLatLng = donneesJson[i].position;
                var marker = new google.maps.Marker({
                    numero: i,
                    position: myLatLng,
                    title: donneesJson[i].name
                });

                marker.addListener('click', function() {
                    infosBulleMarker(this.numero);
                });

                markers.push(marker);
            };

            var markerCluster = new MarkerClusterer(map, markers, {
                imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            });
        },
    };

    map.init();
});










// Objet de la signature
var signature = {
    canvas: document.getElementById('canvas'), // Cr�ation d'un canvas
    ctx: canvas.getContext('2d'), // Context du canvas (2 dimensions)
    pos: { x: 0, y: 0 }, // Derni�re position connue
    rect: canvas.getBoundingClientRect(), // Renvoie les dimensions du canvas et sa position dans le viewport
    nom: document.getElementById("nom"), // Valeur entr� pour le nom
    prenom: document.getElementById("prenom"), // Valeur entr� pour le pr�nom
    station: document.getElementById("nomStation"), // Nom de la station s�lectionn�
    // Initialise
    init: function() {
        var canvas = this.canvas;
        var pos = this.pos;
        var ctx = this.ctx;
        // Nouvelle position de l'�v�nement souris
        function setPosition(e) {
            // Renvoie les dimensions du canvas et sa position dans le viewport
            var rect = canvas.getBoundingClientRect();

            pos.x = (e.clientX - rect.left) * (canvas.width / rect.width);
            pos.y = (e.clientY - rect.top) * (canvas.height / rect.height);
        };
        // Permet de dessiner
        function draw(e) {
            // Le bouton gauche de la souris doit �tre press�
            if (e.buttons !== 1) return;
            ctx.beginPath(); // commencer
            ctx.lineWidth = 4;
            ctx.lineCap = 'round';
            ctx.strokeStyle = 'black';
            ctx.moveTo(pos.x, pos.y); // de
            setPosition(e);
            ctx.lineTo(pos.x, pos.y); // �
            ctx.stroke(); // dessin
        };
        // Cr�ation d'un espace pour dessiner la signature (rattach� � l'�v�nement)
        this.canvas.addEventListener('mousemove', draw);
        this.canvas.addEventListener('mousedown', setPosition);
        this.canvas.addEventListener('mouseenter', setPosition);
    },

    // Efface la signature
    erase: function() {
        // Nettoie enti�rement le canvas
        signature.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    // Sauvegarde la signature
    save: function() {
        /*if ( === ); {
            alert("Veuillez signer avant de confirmer votre r�servation."); }*/
        if ((this.nom.value === "") && (this.prenom.value === "")) {
            alert("Veuillez renseigner votre Nom et Pr�nom.");
            return;
        }
        document.getElementById("canvasimg").src = this.canvas.toDataURL();
        document.getElementById("canvasimg").style.display = "inline";


    // Nettoie enti�rement le canvas une fois sauvegard�
    this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    // Gestion de la r�servation
    stockage: function() {
        // Stockage des valeurs
        sessionStorage.setItem("nom", this.nom.value);
        sessionStorage.setItem("prenom", this.prenom.value);
        sessionStorage.setItem("nomStation", this.station.textContent);
        // D�tection
        if (typeof(sessionStorage) !== "undefined") {
            sessionStorage.setItem(this.nom.value, this.prenom.value, this.station.textContent)
            // Affichage dans la page
            document.getElementById('message').innerHTML = this.nom.value.toUpperCase() + " " + this.prenom.value.toUpperCase() + ", votre v�lo est r�serv� � la station " + this.station.textContent + " pour ";
        } else {
            console.log("sessionStorage n'est pas support�");
        }
    }
};
signature.init();












// Objet du compte � rebours
var timer = {
    count: 60 * 20, // 20 minutes
    display: document.getElementById('time'),
    intervalID: null,

    // G�n�re le compte � rebours
    update: function() {
        var minutes, seconds;
         // Calcule les unit�s, en nombre entier
        minutes = parseInt(this.count / 60);
        seconds = parseInt(this.count % 60);
        // D�termine si il y a besoin d'un 0
        // Condition           If       True   : False
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        // Affichage de mise � jour
        this.display.textContent = minutes + " min " + seconds + " sec";
    },

    // Lance le compte � rebours
    start: function() {
        this.intervalID = setInterval(function(self) {
            self.update();
            // Affichage quand la r�servation � expir�
            if (--self.count < 0) {
                // Effacer le compte � rebours une fois fini
                clearInterval(self.intervalID);
                document.getElementById('message').innerHTML ="Votre r�servation � expir� ";
            }
        }, 1000, this);
    },
    // Fais recommencer le compte � rebours
    reset: function() {
        this.count = 60 * 20;
    },

    // Arr�te le compte � rebours
    stop: function() {
        clearInterval(this.intervalID);
    },
    // Remet � jour le compte � rebours � chaque nouvelle r�servation
    countdown: function() {
        minutes = this.count / 60;
        seconds = this.count % 60;
        if ((minutes > 0) && (seconds > 0)) {
            this.reset();
        } else {
            this.start();
        }
    }
};






// Mise en place du onclick sur le bouton Confirmer
function saveStockageCountdown() {
signature.save();
signature.stockage();
timer.countdown();
};










// Fen�tre modale en JS

// Affichage correct du nom de la station        split + trim

// Rendre obligatoire de selectionner une station pour reserver m�me quand page refraichit
// Mise a jour nbre velo quand clique sur un marqueur                      refaire appel a l'API cibl�
// Supprimer lancement timer quand pas de nom / prenom
// Bloquer reservation si pas de signature

// Creer objet pour la carte
// Creer objet pour la fen�tre modale