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

{# This is the main template file, along with the layout. #}
{# The engine is Jinja2, close to Twig (yet not as good) #}

{% block content %}

{% macro target_button(target) -%}
    <div class="target {{ target.slug }} {{ 'locked' if target.locked else ('active' if target.default) }}"
         data-target-slug="{{ target.slug }}">
      <img width="64px" height="64px"
           src="{{ static('img/target/'~target.slug~'_256.png') }}"
           title="{{ target.title }}"
           alt="{{ target.name }}">
      <img width="64px" height="64px"
           src="{{ static('img/target/empty_128.png') }}"
           title="No data at specified interval for {{ target.title }}."
           alt="NO DATA"
           class="decorator empty">
      <img width="64px" height="64px"
           src="{{ static('img/target/error_128.png') }}"
           title="There was an error with {{ target.title }}."
           alt="ERROR"
           class="decorator error">
      <div class="decorator loading" title="Loading data for {{ target.title }}…">
        <div class="small-loader-container">
          <div class="small-loader-circle-1">
            <div class="small-loader-circle-2">
              <div class="small-loader-circle-3">
                <div class="small-loader-circle-4">
                  <div class="small-loader-circle-5">
                    <div class="small-loader-circle-6">
                      <div class="small-loader-circle-7">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
{%- endmacro %}

{#############################################################################}

{% macro icon(name,solid=false) %}<i class="fa{{ 's' if solid }} fa-{{ name }}" aria-hidden="true"></i>{% endmacro %}

{#############################################################################}

<div id="plots_loader">
  <p class="loader-text">Loading Heliopropa&hellip;<br>This might take a while.</p>
  <div id="plots_loader_img1" class="img"></div>
  <div id="plots_loader_img2" class="img"></div>
  <div id="plots_loader_img3" class="img"></div>
  <div id="plots_loader_img4" class="img"></div>
  <div id="plots_loader_img5" class="img"></div>
</div>

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

  <div class="mdl-layout__drawer">

    <details open>
      <summary>
        <span class="mdl-layout-title" title="Two years maximum.">{{ icon('calendar') }} Time Interval</span>
      </summary>

      <form id="form_time_interval" action="#">
        <div class="mdl-textfield mdl-js-textfield">
          <input type="date" id="started_at" name="started_at" title="The UTC date of the beginning of the interval to observe." class="mdl-textfield__input">
          <input type="date" id="stopped_at" name="stopped_at" title="The UTC date of the end of the interval to observe. (exclusive)" class="mdl-textfield__input">
        </div>
        <input type="submit" id="apply_new_interval" value="Load new interval" title="Two years maximum. This may take a while. UTC." class="mdl-button mdl-js-button mdl-js-ripple-effect">
      </form>
    </details>

    <hr class="clear">

    <details open>
      <summary>
        <span class="mdl-layout-title">{{ icon('globe-africa') }} Planets</span>
      </summary>

      <section class="targets-filters">
        {% for target in planets %}
          {{ target_button(target) }}
        {% endfor %}
      </section>
    </details>

    <hr class="clear">

{# The probes and comets are not displayed in the ESA version. #}
{% if not is_esa %}
    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('rocket') }} Probes &amp; Comets</span>
      </summary>

      <section class="targets-filters">
        {% for target in probes %}
          {{ target_button(target) }}
        {% endfor %}
        {% for target in comets %}
          {{ target_button(target) }}
        {% endfor %}
      </section>
    </details>

    <hr class="clear">
{% endif %}

    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('flask') }} Parameters</span>
      </summary>

      <nav id="parameters" class="mdl-navigation">
        {% for p in parameters %}
          <a class="mdl-navigation__link parameter{{ ' active' if p.active }}" data-ts-slug="{{ p.slug }}" href="#" title="{{ p.title }} ({{ p.units }})">{{ p.name }}</a>
        {% endfor %}
      </nav>
    </details>

    <hr class="clear">

{# The following sections are not displayed in the ESA version. #}
{% if not is_esa %}

    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('database') }} Inputs</span>
      </summary>

      <section class="section-drawer">
{% for input in config.inputs %}
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-input-{{ input.slug }}" title="{{ input.desc }}">
          <input type="radio" id="option-input-{{ input.slug }}" class="mdl-radio__button" name="input_slug" value="{{ input.slug }}" {{ 'checked' if input.slug == input_slug }}>
          <span class="mdl-radio__label">{{ input.name }}</span>
        </label>
        <br />
{% endfor %}
        <br />
        <input disabled type="button" id="apply_new_input" value="Reload for input" title="[COMING SOON] Reloading may take a while." class="mdl-button mdl-js-button mdl-js-ripple-effect">
      </section>
    </details>

    <hr class="clear">

    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('chart-area') }} Models</span>
      </summary>

      <section class="section-drawer">
        {% for layer in config.layers.models %}
          <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
            <input type="checkbox" id="option-layer-{{ layer.slug }}" class="mdl-radio__button option-layer" name="option-layer-{{ layer.slug }}" value="{{ layer.slug }}" {{ 'disabled' if not layer.data }}>
            <span class="mdl-radio__label">{{ layer.name }}</span>
          </label>
          <br />
        {% endfor %}
      </section>
    </details>


    <hr class="clear">

    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('align-right') }} Campaigns</span>
      </summary>

      <section class="section-drawer">
        {% for layer in config.layers.campaigns %}
          <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
            <input type="checkbox" id="option-layer-{{ layer.slug }}" class="mdl-radio__button option-layer option-layer-campaign" name="option-layer-{{ layer.slug }}" value="{{ layer.slug }}" {{ 'disabled' if not layer.live }}>
            <span class="mdl-radio__label">{{ layer.name }}</span>
          </label>
          <br />
        {% endfor %}
      </section>
    </details>


    <hr class="clear">

    <details>
      <summary>
        <span class="mdl-layout-title">{{ icon('atlas', true) }} Catalogs</span>
      </summary>

      <section class="section-drawer">
        {% for layer in config.layers.catalogs %}
          <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
            <input type="checkbox" id="option-layer-{{ layer.slug }}" class="mdl-radio__button option-layer option-layer-catalog" name="option-layer-{{ layer.slug }}" value="{{ layer.slug }}" {{ 'disabled' if not layer.data }}>
            <span class="mdl-radio__label">{{ layer.name }}</span>
          </label>
          <br />
        {% endfor %}
      </section>
    </details>

{% endif %}{# not is_esa #}

    <div class="mdl-layout-spacer"></div>

  </div>

{#############################################################################}

  <main id="plots_wrapper" class="mdl-layout__content">

    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
        <section id="orbits"></section>
        <div class="plots-actions plots-buttons">
          <button id="zoom_inner_heliosphere"
                  class="mdl-button mdl-button--raised mdl-button--primary"
                  title="Zoom to the inner heliosphere.">
            Zoom in
          </button>
          <button id="zoom_outer_heliosphere"
                  class="mdl-button mdl-button--raised mdl-button--primary"
                  title="Zoom to the outer heliosphere.">
            Zoom out
          </button>
        </div>
        <div class="plots-actions plots-buttons">
          <button id="download"
                  class="mdl-button mdl-button--raised mdl-button--primary"
                  title="Download the raw data for each selected target and parameters.">
            Download
            <div id="download_spinner" class="mdl-spinner mdl-js-spinner is-active"></div>
          </button>
{% if not is_esa %}
          <button id="samp"
                  class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
                  title="Send the data to a connected SAMP hub, such as TOPCAT.">
            SAMP
          </button>
          <button id="email_alert"
                  class="mdl-button mdl-button--raised mdl-button--primary"
                  title="Set an alert to receive an email when the data validates pre-defined conditions."
                  data-href="http://alerts-psws.irap.omp.eu/tao">
            Alert
          </button>
{% endif %}

        </div>
        <div>
          <div id="time_series_cursor_morebox" class="hidden">
            <a
                id="time_series_cursor_image_link"
                target="_blank"
                href="#">
              <img
                  id="time_series_cursor_image"
  {#                src=""#}
                  src="http://voparis-srv.obspm.fr/vo/planeto/apis/dataset/Bastet/Saturn_-_2017_14_Feb-09_Sept/od9u09rgq_proc_small.jpg"
                  alt="Image Capture of Aurorae"
              >
            </a>
            <div id="time_series_cursor_image_extra">
              <a id="time_series_cursor_link" target="_blank">
                View details on APIS.
              </a>
              <p id="time_series_cursor_image_comment">
                Nothing to comment.
              </p>
            </div>
          </div>
        </div>

      </div>
      <div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
        <section id="time_series">
          <p id="zoom_controls_help" class="help mdl-cell--8-col">Drag to zoom in, double click to zoom out.</p>
        </section>
      </div>
    </div>

  </main>
</div>
{% endblock %}


{#### CSS ####################################################################}

{% block styles %}
  <link rel="stylesheet" type="text/css" href="{{ static('css/home.css') }}">
{#  <style>#}
{#  </style>#}
{% endblock %}


{#### JAVASCRIPT #############################################################}

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

var sw_configuration = {
  time_series_container: '#time_series',
  orbits_container: '#orbits',
  api: {
      'root':              "{{ request.url_root }}",
      'data_for_interval': "{{ request.url_root }}<target>_{{ input_slug }}_<started_at>_<stopped_at>.csv",
      'download':          "{{ request.url_root }}<targets>_{{ input_slug }}_<started_at>_<stopped_at>.cdf",
      'samp':              "{{ request.url_root }}<targets>_{{ input_slug }}_<started_at>_<stopped_at>.cdf"
  },
  sun: {
    img: '{{ static('img/sun_128.png') }}'
  },
  targets: {
{% for target in targets %}
    '{{ target.slug }}': {
      slug: "{{ target.slug | escapejs }}",
      name: "{{ target.name | escapejs }}",
      active: {{ 'true' if target.default else 'false' }},
      orbit: { a: {{ target.orbit.semimajor or 0 }}, b: {{ target.orbit.semiminor or 0 }} },
      img: '{{ static('img/target/'~target.slug~'_128.png') }}',
      layers: {
{% for catalog_slug, catalog_intervals in target.catalog_layers.iteritems() %}
        "{{ catalog_slug }}": [
{% for interval in catalog_intervals %}
{#        { start: "2018-03-28T00:00:00Z", stop: "2018-03-29T00:00:00Z" },   #}
          {# /!. All datetimes here MUST be suffixed by Z #}
          { start: "{{ interval.start }}", stop: "{{ interval.stop }}" }{{ ',' if not loop.last }}
{% endfor %}
        ]
{% endfor %}
      }
    }{{ ',' if not loop.last }}
{% endfor %}
  },
  parameters: [
{% for p in parameters %}
    {
      id: "{{ p.slug | escapejs }}",
      title: "{{ p.name | escapejs }} ({{ p.units | escapejs }})",
      active: {{ 'true' if p.active else 'false' }},
      unit: "{{ p.units | escapejs }}"
    }{{ ',' if not loop.last }}
{% endfor %}
  ]
{#    ,#}
{#  layers: [#}
{#{% for layer in config.layers %}#}
{#    {#}
{#      id: "{{ layer.slug | escapejs }}",#}
{#      data: [#}
{#        { start: "2018-03-08T00:00:00Z", end: "2018-03-20T17:00:00Z" },#}
{#        { start: "2018-03-28T00:00:00", end: "2018-03-29T00:00:00" }#}
{#      ]#}
{#    }{{ ',' if not loop.last }}#}
{#{% endfor %}#}
{#  ]#}
};

var sw;
jQuery().ready(function($){
  // Space Weather app itself, handling data downloads and plot draws.
  sw = new SpaceWeather(sw_configuration);
  sw.init("{{ started_at }}Z", "{{ stopped_at }}Z");

  // User Interface (except plots' interactivity, such as mouse hovers)
  var parameters = $('#parameters');
  var isLastParameterEnabled = function(parameter_id) {
    var s = 0;
    parameters.find('.parameter[data-ts-slug]').each(function(i,p) {
      if ($(p).hasClass('active')) s++;
    });
    return s < 2;
  };
  var isLastTargetEnabled = function(target_slug) {
    var s = 0;
    $(".targets-filters .target:not(.locked)").each(function(i,p) {
      if ($(p).hasClass('active')
          && ! $(p).hasClass('loading')
          && ! $(p).hasClass('empty')
          && ! $(p).hasClass('failed')
      ) { s++; }
    });
    return s < 2;
  };
  $(".targets-filters .target:not(.locked)").on("click", function(e){
    if ($(this).hasClass('loading')) return false;
    var switch_on = ! $(this).hasClass('active');
    var target_slug = $(this).attr('data-target-slug');
    if (switch_on) {
      sw.enableTarget(target_slug);
      $(this).addClass('active');
    } else if ( ! isLastTargetEnabled(target_slug)) {
      sw.disableTarget(target_slug);
      $(this).removeClass('active');
    }
    return false;
  });
  parameters.find(".parameter").click(function(e){
    var switch_on = ! $(this).hasClass('active');
    var parameter_slug = $(this).attr('data-ts-slug');
    if (switch_on) {
      sw.enableParameter(parameter_slug);
      $(this).addClass('active');
    } else if ( ! isLastParameterEnabled(parameter_slug)) {
      sw.disableParameter(parameter_slug);
      $(this).removeClass('active');
    }
    return false;
  });
  $('#apply_new_interval').on("click", function(e){
    var started_at = moment($("#started_at").val());
    var stopped_at = moment($("#stopped_at").val());
    sw.resizeDomain(started_at, stopped_at);
    return false;
  });
  $('#apply_new_input').on("click", function(e){
    var new_input_slug = $("input[name='input_slug']:checked").val();
    window.location = "?input_slug="+new_input_slug;
    return false;
  });

  $('.option-layer-catalog').on("click", function(e){
    var catalog_slug = $(this).attr('value');
    var checked = $(this).prop('checked');
    if (checked) { sw.showCatalogLayer(catalog_slug); }
    else         { sw.hideCatalogLayer(catalog_slug); }
  });

  $('#option-layer-hstsaturnobservations').on("click", function(e){
    var that = $(this);
    var catalog_slug = $(this).attr('value');
    var checked = $(this).prop('checked');
    if (checked) {
      $(this).addClass('loading');
      sw.showImagePreviewLayer("saturn", catalog_slug).finally( function(){
        that.removeClass('loading');
      });
    } else {
      sw.hideImagePreviewLayer("saturn", catalog_slug);
    }
  });

  var download_spinner = $('#download_spinner');
  var waiting_for_download = false;

  $('#download').on("click", function(e){
    if (waiting_for_download) return;
    download_spinner.css('display', 'inline-block');
    waiting_for_download = true;
    var url = sw.buildDownloadUrl();
    console.info("Downloading " + url);
    $.ajax({
      type: 'GET',
      url: url,
      processData: false,
      success: function (data) {
        download_spinner.css('display', 'none');
        waiting_for_download = false;
        window.location = url;
      },
      error: function (xhr) {
        download_spinner.css('display', 'none');
        waiting_for_download = false;
        console.error('Cannot download.', xhr);
        alert("Our apologies, there was an error while downloading.");
      }
    });
    return false;
  });
  $('#zoom_inner_heliosphere').on("click", function(e){
    console.info("Zooming to inner heliosphere…");
    sw.orbits.zoomToTarget('mars');
    return false;
  });
  $('#zoom_outer_heliosphere').on("click", function(e){
    console.info("Zooming to outer heliosphere…");
    sw.orbits.resize(true);
    return false;
  });
  $('#email_alert').on("click", function(e){
    console.info("Setting an alert…");
    var href = $(this).attr("data-href");
    window.open(href);
    return false;
  });

});
</script>

{#### SAMP ###################################################################}
<script type="application/javascript">
  jQuery().ready(function ($) {
    // Flag to know when a hub is connected or not
    var isConnected = false;

    // Show SAMP button(s) depending on whether the hub is available or not.
    var onHubAvailability = function (isHubRunning) {
      $(".samp").each(function (index, element) {
        if (isHubRunning) {
          isConnected = true;
          $(element).removeClass('disabled mdl-button--disabled');
        } else {
          isConnected = false;
          $(element).addClass('disabled mdl-button--disabled');
        }
      });
    };

    // Update the document about the presence of any SAMP hub every 7 sec.
    var connector = new samp.Connector("Sender", {
        "samp.name": "Heliopropa",
        "samp.description.text": "{{ config.meta.description }}",
        // {{ request.url_root }} <- use this instead ?
        "samp.icon.url": "http://heliopropa.irap.omp.eu/static/img/target/earth_128.png",
    });
    connector.onHubAvailability(onHubAvailability, 7000);
    window.onunload = function () {
      connector.unregister();
    };

    // Clicking on a SAMP button sends the CDF file to the connected hub.
    $("#samp").click(function (event) {
      event.stopPropagation();
      if ($(this).hasClass('disabled')) { return; }
      // pitfall : connector.connection is ALWAYS undefined here
      if ( ! isConnected) {  // so we use a bool flag instead
        alert("We do not detect any connected SAMP hub.\n" +
              "Wait some more, or try refreshing this page?");
        return;
      }
      var name = sw.buildSampName();
      var url = sw.buildSampUrl();
      console.info("Trying to activate SAMP…", name, url);
      connector.runWithConnection(function (connection) {
        var msg = new samp.Message("table.load.cdf", {
          "name": name,
          "url": url // absolute URL required
        });
        connection.notifyAll([msg]);
      }, function (error) {
        var msg = 'Error: ' + error;
        console.error(msg);
        alert(msg);  // let's yell at the user as well
      });
    });
  });
</script>
{% endblock %}