{% extends host_template %}

{% load i18n cyclope_utils fb_versions %}

{% block extra_head %}
<script type="text/javascript" src="{{ CYCLOPE_STATIC_URL }}js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
    // jCarousel documentation http://sorgalla.com/projects/jcarousel/

  {% if view_options.auto_pause %}
      function CarouselAutopause(carousel)
      {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });
        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
      };
  {% endif %}

  jQuery(document).ready(function() {
      jQuery("#slideshow{% if region_name %}-{{region_name}}{% endif %}-{{category_slug}}").jcarousel({
         scroll: {{view_options.scroll_by}},
         wrap: {{view_options.navigation|safe}},
         auto: {% if view_options.auto_play %}{{view_options.delay}}{% else %}0{% endif %},
         animation: {{view_options.speed}},
         initCallback: {% if view_options.auto_pause %}CarouselAutopause{% else %}null{% endif %}
      });
  });
</script>
<link rel="stylesheet/less" type="text/css" href="{{ CYCLOPE_THEME_MEDIA_URL }}css/jcarousel.less" />
{% endblock %}

{% block content %}
    {% comment %}TODO: review the ID definition{% endcomment %}
    <div class="{{view_options.visualization_mode}}">
    <ul id="slideshow{% if region_name %}-{{region_name}}{% endif %}-{{category_slug}}" class="jcarousel-skin-cyclope">
    {% for categorization in categorizations %}
      {% spaceless %}
      {% join categorization.content_type.app_label  "/" categorization.content_type.model "_" inline_view_name ".html" as template_path %}

      {% comment %}
        we alias the actual object with the model name so the included template
        is reusable and can access the content object using an explicit name
        we also alias as 'media' because some medialibrary templates expect this name
      {% endcomment %}

      {% alias categorization.content_object as categorization.content_type.model %}
      {% alias categorization.content_object as 'media' %}
      {% endspaceless %}
      <li>{% include template_path with current_object=categorization.content_object %}</li>
    {% endfor %}
    </ul>
    </div>
{% endblock %}
