{% extends 'mpl/base.html' %}



{% block before-content %}
<div id="operations">
  <div id="showme" class="hideme"></div>
  <div id="command">
    {% if ajax == '/mpl/ajax' %}
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-secondary active">
        <input type="radio" name="options" id="show" autocomplete="off" checked> Show
      </label>
      <label class="btn btn-secondary">
        <input type="radio" name="options" id="hide" autocomplete="off"> Hide
      </label>
      <label class="btn btn-secondary">
        <input type="radio" name="options" id="delete" autocomplete="off"> Delete
      </label>
      &nbsp;&nbsp;
      {% endif %}

      <input type="text" id="term" name="term" size="50">
    </div>
  </div>
</div>
{% endblock before-content %}

{% block content %}
<div id="graphs">
  <h2>Graphs</h2>
  <div class="row">
    {% for graph in graphs %}
      <div class="col-lg-2 col-md-4 col-sm-6 pic" {% if ajax %}id="{{ graph.id }}">
       {% else %}><a href="/mpl/graph/{{ graph.id }}/">{% endif %}{{ graph.html }}
      {% if not ajax %}</a>{% endif %}</div>
    {% endfor %}
  </div>
</div>

<div id="tips">
  <h2>Tips</h2>
  <div class="row">
    <div class="col-lg-3 col-md-4">
      <ol class="tiplist">
        {% for tip in tips %}
        <li class="tipname" tip="{{ tip.id }}"><a href="/mpl/tip/{{ tip.id }}/">{{ tip.name }}</a></li>
        {% endfor %}
      </ol>
    </div>
    <div class="col-lg-9 col-md-8" id="display">
    </div>
  </div>
</div>
{% endblock content %}

{% block extrajs %}
var select_mode = 'show';

function showtip(obj, state) {
  var tip = $(obj);
  if (state) {tip.addClass('highlight');} else
    {tip.removeClass('highlight');}
  var id = tip.attr('tip');
  ajax_call('views.description', {id:id}, (args) => {
    $('div#display').html(args.description);
  })
}

$('li.tipname').hover(function () {showtip(this, true)},
  function() {showtip(this, false)} );

function slide(obj, state) {
  var div = $(obj);
  var img = div.find('img');
  var disp = $('div#showme');
  if (state) {
    disp.removeClass('hideme');
    var load='<p class="idlabel float-end">ID = ' + div.attr('id') + '</p>\n<img src="'+img.attr('src')+'">';
    disp.html(load);
  } else {
    disp.addClass("hideme");
  }
}

function mark(obj) {
  var div = $(obj);
  var id = div.attr('id');
  if (select_mode == 'show') {
    document.location = "/mpl/graph/" + id + "/";
  }
  {% if ajax == 'mpl' %}
  else {
    ajax_call('image', {pk: id, action: select_mode}, (args) => {
      switch(args.action) {
        case 'delete':
        case 'hide':
          $('div.pic#' + id).remove();
          break;
      }
    })
  } {% endif %}
}
$('div.pic').click(function() {mark(this)});


$('div.pic').hover(function() {slide(this, true)},
  function() {slide(this, false)} );
//$('tr.hoverer').click( function() {
//    slide($(this), ! $(this).hasClass('highlight'))});




$('input#term').change((ev) => {
  var me = $(ev.target);
  document.location = "/mpl/graphs/?term=" +me.val();
})


$('div#operations input').click((ev) => {
  var me = $(ev.target);
  select_mode = me.attr('id');
})

{% endblock extrajs %}