{% load assets %}
<div class="carrousel-content">
 {% for menuitem in menuitems %}
  <input type="radio" name="carrousel-{{cell.id}}"
     class="carrousel-radio-{{forloop.counter}}"
     id="carrousel-{{cell.id}}-{{forloop.counter}}"
     {% if forloop.first %}checked{% endif %}>
  <div class="slide">
     {% block carrousel-item %}
     <div class="carrousel-item"
          style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
      <div class="carrousel-item-content">
       {% block carrousel-item-content %}
       <a href="{{menuitem.page.get_online_url}}">
       <strong class="carrousel-item-title">{{ menuitem.page.title }}</strong>
       {% if menuitem.page.description %}<p class="carrousel-item-description">{{ menuitem.page.description }}</p>{% endif %}
       </a>
       {% endblock %}
      </div>
     </div>
     {% endblock %}
  </div>
 {% endfor %}
 <a class="carrousel-previous"></a>
 {% block carrousel-navigation %}
 <div class="carrousel-nav">
 {% for menuitem in menuitems %}
 <label class="carrousel-label-{{forloop.counter}}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label>
 {% endfor %}
 </div>
 {% endblock %}
 <a class="carrousel-next"></a>
</div>
<script>
$(function() {
  function next() {
    if ($('.carrousel-content input:checked ~ input').length) {
      $('.carrousel-content input:checked ~ input').first().click();
    } else {
      $('.carrousel-content input').first().click();
    }
  }
  function previous() {
    if ($('.carrousel-content input ~ input:checked').length) {
      $('.carrousel-content input:checked').prev().prev().click();
    } else {
      $('.carrousel-content input').last().click();
    }
  }
  var timeout_id = setInterval(next, 5000);
  $('.carrousel-content label').on('click', function() {
    clearInterval(timeout_id);
  });
  $('a.carrousel-previous').on('click', function() {
    clearInterval(timeout_id);
    previous();
  });
  $('a.carrousel-next').on('click', function() {
    clearInterval(timeout_id);
    next();
  });

  var touch_start = null;
  $('.carrousel-item').on('touchstart', function(ev) {
    touch_start = ev.originalEvent.touches[0].pageX;
  });
  $('.carrousel-item').on('touchend', function(ev) {
    var touch_end = ev.originalEvent.changedTouches[0].pageX;
    var diff = touch_start - touch_end;
    touch_start = null;
    clearInterval(timeout_id);
    var width = $('body').width();
    if (diff*2 > width) {
      previous();
    }
    if (diff*2 < -width) {
      next();
    }
  });
});
</script>
