{% extends 'layout.html.jinja2' %}
{% set menu_section = 'home' %}
{% block title %}Home{% endblock %}

{% block content %}

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">


  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Planets</span>

    <section id="orbiters_filters">
{% for planet in planets %}
      <img title="{{ planet.title }}" src="{{ static('img/planet/'~planet.slug~'_128.png') }}" width="64px" height="64px" alt="{{ planet.name }}" class="{{ 'locked' if planet.locked }}">
{% endfor %}
    </section>

    <br>
    <hr class="clear">

    <span class="mdl-layout-title">Probes</span>

    <section id="orbiters_filters">
{% for probe in probes %}
      <img title="{{ probe.title }}" src="{{ static('img/probe/'~probe.slug~'_128.png') }}" width="64px" height="64px" alt="{{ probe.name }}" class="{{ 'locked' if probe.locked }}">
{% endfor %}
    </section>

    <br>
    <hr class="clear">

    <span class="mdl-layout-title">Comets</span>

    <section id="orbiters_filters">
{% for comet in comets %}
      <img title="{{ comet.title }}" src="{{ static('img/comet/'~comet.slug~'_128.png') }}" width="64px" height="64px" alt="{{ comet.name }}" class="{{ 'locked' if comet.locked }}">
{% endfor %}
    </section>

    <br>
    <hr class="clear">

    <span class="mdl-layout-title">Parameters</span>

    <nav id="parameters" class="mdl-navigation">
      <a class="mdl-navigation__link parameter active" data-ts-slug="pdyn" href="">Dynamic Pressure</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="magn" href="">B Tangential</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="vlen" href="">Velocity</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="temp" href="">Temperature</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="dens" href="">Density</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="angl" href="">Angle Source-Sun-Earth</a>
    </nav>

  </div>
  <main class="mdl-layout__content">


    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
        <section id="orbits"></section>
      </div>
      <div class="mdl-cell mdl-cell--8-col">
        <section id="time_series"></section>
      </div>
    </div>

{#    <div class="loader"><div class="hole"></div></div>#}
  </main>
</div>


{% endblock %}


{% block styles %}
  <style>
    html, body {
{#      background-color: #322e3f;#}
{#      color: #e3e3e3;#}
    }
    .axis path, .axis line {
      fill: none;
{#      stroke: #f4f4f4;#}
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
    svg text {
{#      fill: #f4f4f4;#}
    }
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
    circle.cursor-circle {
      fill: black;
      stroke: rgba(20, 20, 20, 0.48);
    }
    text.cursor-text {
{#      font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;#}
{#      font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;#}
      font-family: "Ubuntu Mono", 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
      text-align: right;
    }
    text.cursor-text-shadow {
      stroke: white;
      stroke-width: 5px;
      opacity: 0.777
    }
    path.orbit.orbit_section {
      fill: none;
      stroke: steelblue;
      stroke-width: 3px;
    }
    ellipse.orbit.orbit_ellipse {
      fill: none;
      stroke: #a3a3a3;
      stroke-width: 1px;
      stroke-dasharray: 5px;
    }
    #orbiters_filters {
      padding-left: 17px;
    }
    #orbiters_filters img {
      float: left;
    }
    #orbiters_filters img.locked {
      -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
           -o-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
              filter: grayscale(100%);
    }

    #orbits {
{#      background-image: url('{{ static('img/orbitals_background.png') }}');#}
{#      background-repeat: repeat;#}
{#      background-size: 42%;#}
    }

    #parameters .parameter {
      outline: 0;
    }
    #parameters .parameter.active {
      background-color: #c8d3e1;
    }
  </style>
{% endblock %}


{% block scripts_footer %}
<script type="application/javascript" src="{{ static('js/vendor/d3.min.js') }}"></script>
<script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
<script type="application/javascript">

var configuration = {
  time_series_container: '#time_series',
  orbits_container: '#orbits',
  api : {
      'data_for_interval': "{{ request.url_root }}<source>/data.csv"
                           // ?started_at=<started_at>&stopped_at=<stopped_at>
  },
  sources : {
    jupiter: {
      slug: 'jupiter',
      name: 'Jupiter',
      active: true,
      minDate: '1990-01-01T01:30:00',
      maxDate: '2017-02-19T00:00:00',
      orbit: { a: 5.45516759, b: 4.95155843 },
      img: '{{ static('img/planet/jupiter_128.png') }}'
    }
  },
{# todo @Nicolas Define -somehow- error margins of each parameter #}
  parameters : [
    {
      id: 'pdyn',
      title: "Dynamic Pressure (nPa)",
      unit: "nPa"
    },
    {
      id: 'magn',
      title: "Magnetism (nT)",
      unit: "nT"
    },
    {
      id: 'vlen',
      title: "Velocity (km/s)",
      unit: "km/s"
    },
    {
      id: 'temp',
      title: "Temperature (K)",
      unit: "K"
    },
    {
      id: 'dens',
      title: "Density N (cm⁻³)",
      unit: "cm⁻³"
    },
    {
      id: 'angl',
      title: "Angle S-S-E (deg)",
      unit: "deg"
    }
  ]
};

jQuery().ready(function($){
  var timeSeries = [];
  var orbits;

  var sw = new SpaceWeather(configuration);
  sw.loadData('jupiter', '2016-01-01T00:00:00', '2023-01-01T00:00:00').then(
      function (data) { console.log('OK', data); },
      function (data) { console.log('Failed', data); }
  );

  d3.csv('{{ url_for('get_orbiter_csv', source='jupiter', started_at='2016-03-19T00:00:00', stopped_at='2022-01-01T00:00:00') }}', function(csv){
    var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
    var data = {'hci': []};
    configuration['parameters'].forEach(function(parameter){
        data[parameter['id']] = [];
    });
    csv.forEach(function (d) {
      var dtime = timeFormat(d['time']);
      configuration['parameters'].forEach(function(parameter){
        var id = parameter['id'];
        data[id].push({x: dtime, y: parseFloat(d[id])});
      });
      if (d['xhci'] && d['yhci']) {
        data['hci'].push({t: dtime, x: parseFloat(d['xhci']), y: parseFloat(d['yhci'])});
      }
    });

    var container = '#time_series';

    configuration['parameters'].forEach(function(parameter){
      var id = parameter['id'];
      var title = parameter['title'];
      timeSeries.push(new TimeSeries(id, title, data[id], container));
    });
    // move outside (after promises)
    timeSeries.forEach(function(ts){
      ts.options['onMouseOver'] = function() {
        timeSeries.forEach(function(ts2){ ts2.showCursor(); });
      };
      ts.options['onMouseOut'] = function() {
        timeSeries.forEach(function(ts2){ ts2.hideCursor(); });
      };
      ts.options['onMouseMove'] = function(t) {
        timeSeries.forEach(function(ts2){ ts2.moveCursor(t); });
        if (orbits != null) orbits.moveToDate(t);
      };
    });


    orbits = new Orbits(configuration.sources, data['hci'], configuration.orbits_container);

  });

  var toggleTimeSeries = function(slug) {
    $('#time_series .'+slug).toggleClass('hidden');
  };

  $("#parameters .parameter").click(function(e){
    $(this).toggleClass('active');
    toggleTimeSeries($(this).attr('data-ts-slug'));
    return false;
  });

  window.addEventListener('resize', function() {
    timeSeries.forEach(function(ts){ ts.resize(); });
    if (orbits) orbits.resize();
  });

});
</script>

{% endblock %}