<script>

        var currentTime = (new Date()).getTime();       //This line SHOULD be the actual code when the site is online
        //var currentTime = 1541408502000;                 //This line is a temporary line for debug purposes
        var time = currentTime;
        var interval;
        var intervalTime = 20;
        var si = 1;             //si stands for 'Speed Index'
        var speed = 1;
        // var speeds = [0,1, 30, 60, 300, 900, 1800, 3600, 21600, 43200, 86400];
        var speeds = [0,1, 30, 60, 300, 900, 1800, 3600, 21600, 64800, 86400];
        var speedsT = ["paused","1 sec/sec", "30 sec/sec", "1 min/sec", "5 min/sec", "15 min/sec", "30 min/sec", "1 hour/sec", "6 hours/sec", "12 hours/sec", "1 day/sec"]
        var pause = true;
        var loading = 0;

        let launchingTime, landingTime;


        if (Detector.webgl) {
            var visualizer = new SpaceI.Visualize(document.getElementById('image'), currentTime);         //This objects handles everything related to the 3D environment directly. See Space.js for more details.
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "data/man.txt",
                    dataType: "text",
                    success: function (data) { visualizer.addMan(data); loadMore(); }
                });
                $.ajax({
                    type: "GET",
                    url: "data/data_m.txt",
                    dataType: "text",
                    success: function (data) { visualizer.addRouteM(data); loadMore();}
                });
                $.ajax({
                    type: "GET",
                    url: "data/data_s1.txt",
                    dataType: "text",
                    success: function (data) { visualizer.addRoute(data, 0); loadMore(); }
                });
                $.ajax({
                    type: "GET",
                    url: "data/data_s2.txt",
                    dataType: "text",
                    success: function (data) { visualizer.addRoute(data, 1); loadMore(); }
                });
            });
        
            animate();
        }
        else {
            document.getElementById("load").innerHTML = "Unfortunately your browser doesn't seem to support WebGL.";
            document.getElementById("orbitviewer").style.height = "0px";
        }

        function loadMore() {   //this function removes the loading screen and starts the simulation only when all the important files have been loaded.
            loading++;          //4 out of 5 calls for this function are a few lines above this one (in the ajax), the 5th is called after the WebGL scene has been established (see Space.js)
            $('#loadingStatus').html(`RECEIVING DATA - ${loading}/5`);
            if (loading == 5) {
                $('#load').hide();
                setSpeed();
                visualizer.cameraSetup(currentTime);
                pause = false;
                document.dispatchEvent(new Event('loadingFinished'));
            }
        }

        function animate() {
            requestAnimationFrame(animate);
            visualizer.render();
            visualizer.onWindowResize();    //it's important that this function is called whenever the window dimensions change.
        }

        function realTime() {
            time = (new Date()).getTime();            //This line will be used when the site is actually online
            // time = currentTime;
            // time = landingTime;
            si = 1;
            setSpeed();
            visualizer.setTime(time);
            visualizer.cameraSetup(time);
        }
        function changeSpeed() {
            var s = document.getElementById("speed").value;
            si = s - 0;         //converts string to int
            speed = Math.sign(speed) * speeds[si];
            $("#speedT").text(speedsT[si]);
        }
        function setupLine(t, n) {      //called from the visualizer object to set the beginning and end of the timeline
            if(n==0) {
                launchingTime = t;
                $('#line').attr('min', t);
            }
            else if (n == 1) {
                landingTime = t;
                $('#line').attr('max', t);
            }
        }
        
        function setSpeed() {
            speed = Math.sign(si) * speeds[Math.abs(si)];                   //if 'si' is negative just take the negative speed.
            $("#speedT").text(((si < 0) ? "-" : "") + speedsT[Math.abs(si)]);   
        }
        
        function timeC() {
            var t = document.getElementById("line").value;
            time = t - 0;   //Converts string to number. If it's stupid and it works it ain't stupid.
            update();
        }

    </script>

<div id="live_data_title">Live Data: </div>
                <table class="more_info_container">
                    <tbody>
                        <tr>
                            <td id="time_since_launch_label">Time since launch:</td><td id="time_since_launch_number">-</td></tr>
                        <tr>
                            <td id="distance_moon_label">Distance to the Moon:</td><td id="distance_moon_number">-</td></tr>
                        <tr>
                            <td id="altitude_label">Current altitude:</td><td id="altitude_number">-</td></tr>
                        <tr>
                            <td id="current_velocity_label">Current velocity:</td><td id="current_velocity_number">-</td></tr>
                    </tbody>
                </table>