{% extends "base.html" %}
{% load datagrid %}
{% load djblets_utils %}
{% load gallerytag_tags %}
{% load tagging_tags %}
{% block title %}Images tagged with {{tags|join:"+"}}{% endblock %}
{% block extrahead %}
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui/event/event-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui/dom/dom-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/yui-ext/yui-ext.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/rb/common.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}scripts/image.js"></script>
<script type="text/javascript">
  var SITE_ROOT = "/";
  var MEDIA_URL = "{{MEDIA_URL}}";
  var DELETE_REDIR_URL = "{{request.get_full_path}}";
  var IMAGES = [{% for image in image_list %}{{image.id}}{% if not forloop.last %}, {% endif %}{% endfor %}];
</script>
{% endblock %}

{% block content %}

{% if is_paginated %}
{%  paginator %}
{% endif %}

<div id="sidebar">
 <table id="taglist">
{% fortag image_list %}
  <tr>
   <td class="modsearchtags"><tt>
{% if tags|contains:tag %}
<a class="removesearchtag" href="/gallery/tag/{{tags|exclude_item:tag|join:"+"}}/">[-]</a>
{% else %}
<a class="addsearchtag" href="/gallery/tag/{{tags|join:"+"}}+{{tag}}/">[+]</a>
{% endif %}
</tt></td>
   <td class="tagname"><a href="/gallery/tag/{{tag}}">{{tag}}</a> ({{itemcount}})</td>
  </tr>
{% endfortag %}
 </table>

 <div class="expandbox">
  <h1><a href="#" onclick="javascript:toggleExpanded(this);"><img class="expander" src="{{MEDIA_URL}}images/unexpanded.png" width="11" height="11" border="0" alt="" /> Edit multiple images</a></h1>
  <div class="expand-content">
   <input type="checkbox" id="checkbox-select-all" onclick="javascript:toggleAllImagesSelected();" /> Select all images
   <ul id="imagetaglist">
{% forcommontag image_list %}
    <li id="tagitem_{{tag}}"><a href="#" onclick="javascript:removeTag(this, '{{tag}}');"><img src="{{MEDIA_URL}}images/remove.png" width="13" height="13" alt="Remove" /></a> <a href="/gallery/tag/{{tag}}">{{tag}}</a></li>
{% endfor %}
    <li id="addtagitem"><a href="#" onclick="javascript:addTag();"><img src="{{MEDIA_URL}}images/add.png" width="13" height="13" /> Add a tag</a></li>
    <li id="tagfielditem">
     <div class="yui-skin-sam">
      <div class="yui-ac" id="autoComplete_tagfield">
       <input id="tagfield" type="text" class="yui-ac-input" size="15" onkeypress="javascript:onTagFieldKeyPressed(event); "/>
       <div class="yui-ac-container" id="ysearchcontainer_tagfield"></div>
      </div>
      <div style="float: right;"></div>
     </div>
    </li>
   </ul>
   <ul id="actionlist">
    <li><a href="#" onclick="javascript:deleteImage(this);">Delete this image</a></li>
   </ul>
  </div>
 </div>
</div>

<div id="thumbnails">
{% for image in image_list %}
 <span class="thumb">
  <input type="checkbox" id="checkbox-{{image.id}}" onclick="javascript:toggleImageSelected({{image.id}});" style="display:none;" />
  <br />
  <a href="{{image.get_absolute_url}}" title="{{image.caption}}">{{image.thumb}}</a>
 </span>
{% endfor %}
</div>

{% if is_paginated %}
{%  paginator %}
{% endif %}

<script language="javascript">
    YAHOO.util.Event.on(window, "load", function() {
{% for image in image_list %}
		document.getElementById("checkbox-{{image.id}}").checked = "";
{% endfor %}
		document.getElementById("checkbox-select-all").checked = "";
        getEl("addtagitem").enableDisplayMode();
        registerTagField("tagfield");
    });
</script>

{% endblock %}