{% if not is_ajax %}<html>{% load i18n static %}
  <head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/mediatheque.css' %}">
    <script>
    {% include "coop_cms/_pagination_js.html" %}
    $(function() {

     $(document).on('change', "li.paginate-form input", function() {
        try {
          var media_url = $("#media_url").text();
          var href = media_url + '?page=' + $(this).val()

          $.ajax({
            url: href,
            success: function(data) {
              $("#media_slide_content").html(data["html"]);
              $("#media_url").text(data["media_url"]);
            }
          });
        } catch(err) {
          if (!console) console = {log:function(){}}; //no error but no log in IE
          console.log(err)
        }
        return false;
      });

      $(document).on('click', '.pagination a', function(e) {
        try {
          var media_url = $("#media_url").text();
          e.preventDefault();

          var href = media_url;
          var hrefArgs = getUrlVars($(this).attr('href'));
          var page = hrefArgs.page;

          if (page && href && (href !== '#')) {
            href = patchUrl(page, media_url);
            //return false;
          }

          $.ajax({
            url: href,
            success: function(data) {
              $("#media_slide_content").html(data["html"]);
              $("#media_url").text(data["media_url"]);
            }
          });  
        } catch(err) {
          if (!console) console = {log:function(){}}; //no error but no log in IE
          console.log(err)
        }
        return false;
      });
      
      $(document).on('dragstart', "img.library-thumbnail, img.library-document", function(event) {
          $("a.pageslide-close").click();
      });

      var active_link = function(media_type) {
        $(".media-selector a." + media_type + "-sel").addClass('active');
      };
      
      $('.media-selector a').click( function(e) {
        e.preventDefault();
        e.stopPropagation();
        $.ajax({
          url: $(this).attr('href'),
          dataType: 'json',
          success: function(data) {
            $("#media_slide_content").html(data["html"]);
            $("#media_url").text(data["media_url"]);
          }
        });
        if (!$(this).hasClass('active')){ $(".media-selector a").toggleClass('active'); }
      });
      $(document).on('click', '.media-filters a', function(e) {
        e.preventDefault();
        e.stopPropagation();

        var href = $(this).attr('href');
        var page = 1;

        if (page && href && (href !== '#')) {
          href = patchUrl(page, href);
          //return false;
        }

        $.ajax({
          url: href,
          dataType: 'json',
          success: function(data) {
            $("#media_slide_content").html(data["html"]);
            $("#media_url").text(data["media_url"]);
          }
        });
      });
      
      active_link('{{media_type}}');

      $(document).on('click', "a.hide-media-filters", function() {
          $(".media-filters, .hide-media-filters").hide();
          $(".show-media-filters").show();
          return false;
      });

       $(document).on('click', "a.show-media-filters", function() {
          $(".media-filters, .hide-media-filters").show();
          $(".show-media-filters").hide();
          return false;
      });

    });
    </script>
  </head>
  <body>
  <div id="media_url" style="display: none">{{ media_url }}</div>
  {% endif %}
    {% if is_ajax %}
      {% include media_slide_template %}
    {% else %}
      <div class="library">
        <div class="close-slider"><a href="" class="pageslide-close"></a></div>
        <div class="media-selector">
          {% url "coop_cms_media_images" as images_url %}
          {% url "coop_cms_media_documents" as docs_url %}
          {% url "coop_cms_media_photologue" as photologue_url %}
          {% if can_view_image %}
          <a class="image-sel" href="{{images_url}}?page=1">{% trans "Images" %}</a>
          {% endif %}
          {% if allow_photologue %}
              <a class="document-sel" href="{{photologue_url}}?page=1">{% trans "Galleries" %}</a>
          {% endif %}
          {% if can_view_document %}
            <a class="document-sel" href="{{docs_url}}?page=1">{% trans "Documents" %}</a>
          {% endif %}
        </div>
        <div id="media_slide_content">
        {% include media_slide_template %}
        </div>
      </div>
    {% endif %}
{% if not is_ajax %}
  </body>
</html>{% endif %}