{% extends "base.html" %}
{% load gallerytag_tags %}
{% load tagging_tags %}
{% block title %}{{image.caption|default:"Image"}}{% 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/animation/animation-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 DELETE_REDIR_URL = document.referrer;
  var MEDIA_URL = "{{MEDIA_URL}}";
</script>
{% endblock %}

{% block content %}

<div id="sidebar">
 <ul id="imagetaglist">
{% tags_for_object image as tags %}
{% for tag in tags %}
  <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" style="display:none;">
   <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>

<img alt="{{image.caption}}" src="{{image.image.url}}" width="{{image.image.width}}" height="{{image.image.height}}"/>

<script language="javascript">
    YAHOO.util.Event.on(window, "load", function() {
        selectImage({{image.id}});
        getEl("addtagitem").enableDisplayMode();
        getEl("tagfielditem").enableDisplayMode();
        registerTagField("tagfield");
    });
</script>

{% endblock %}