{% load i18n %}{% load url from future %}
{% if not is_ajax %}
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/css/mediatheque.css">
    <script>
    $(function() {
      $('.pagination a').live('click', function(e) {
        try {
          e.preventDefault();
          $.ajax({
            url: "{{ media_url }}"+$(this).attr('href'),
            success: function(data) {
              $("#media_slide_content").html(data["html"]);
            }
          });  
        } catch(err) {
          if (!console) console = {log:function(){}}; //no error but no log in IE
          console.log(err)
        }
        return false;
      });
      
      $("img.library-thumbnail").bind('dragstart', 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"]);
            }
          });
        if (!$(this).hasClass('active')){ $(".media-selector a").toggleClass('active'); }

      });
      
      active_link('{{media_type}}');

    });
    </script>
  </head>
  <body>
  {% 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 %}
          <a class="image-sel" href="{{images_url}}?page=1">{% trans "Images" %}</a>
          <a class="document-sel" href="{{docs_url}}?page=1">{% trans "Documents" %}</a>
        </div>
        <div id="media_slide_content">
        {% include media_slide_template %}
        </div>
      </div>
    {% endif %}
{% if not is_ajax %}
  </body>
</html>
{% endif %}