{% extends "photos/base-wide.html" %}

{% load i18n %}
{% load humanize %}
{% load tagging_tags %}
{% load photo_tags %}
{% load pagination_tags %}
{% load smart_if %}
{% load base_tags %}

{% block meta_description %}{{ photo.title|striptags|truncatewords:20 }}{% endblock %}
{% block meta_keywords %}{{ photo.meta_keywords }}{% endblock %}
{% block meta_canonical_url %}<link rel="canonical" href="{{ photo.get_canonical_url }}" />{% endblock %}

{% block title %}{% firstof photo.title "Untitled" %} - {% blocktrans %}Photo{% endblocktrans %}{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/photos.css">
{% endblock %}

{% block body %}
{% tags_for_object photo as tags %}

	<div id="photo-instance">
        <div class="photo-title-wrap">
            <h2>{% firstof photo.title "Untitled" %}</h2>
        </div>
        <div class="photo-nav">
            {% if set_id > 0 %}
			<div class="photo-back"><a href="{% url photoset_details set_id %}">&laquo; {% trans "Back to photo set" %}</a></div>
            {% endif %}
        </div>
        <div class="photo-traverse">
            <ul>
				{% if photo_prev_url %}<li><a id="photo-prev" href="{{ photo_prev_url }}">&laquo; {% trans "Prev" %}</a></li>{% endif %}
                {% if photo_set_count %}<li>({{ photo_position }} {% trans "of" %} {{ photo_set_count }})</li>{% endif %}
                {% if photo_next_url %}<li><a id="photo-next" href="{{ photo_next_url }}">{% trans "Next" %} &raquo;</a></li>
                {% else %}
                    {% if photo_first_url %}<li><a id="photo-next" href="{{ photo_first_url }}">{% trans "Go to First" %} &raquo;</a></li>{% endif %}
                {% endif %}
            </ul>
        </div>
        <div class="hr"></div>
        <div class="photo-wrap">
            <div class="photo">
                </a>
                <br>
                <div about="{% photo_image_url photo size=640x640 constrain=True %}" 
                    xmlns:dct="http://purl.org/dc/terms/"
                    xmlns:cc="http://creativecommons.org/ns#">

                    {% if photo_next_url %}
                    <a id="image-photo-next" href="{{ photo_next_url }}">
                        <img src="{% photo_image_url photo size=640x640 constrain=True %}" alt="{{ photo.title }}" /></a>
                    {% else %}
                    <img src="{% photo_image_url photo size=640x640 constrain=True %}" alt="{{ photo.title }}" />
                    {% endif %}

                    <br />
                    <div id="photo-rights">
                    <span property="dct:title">{{ photo.title }}</span>
                    uploaded by <a href="{{ photo.creator.get_absolute_url }}"
                        property="cc:attributionName" 
                        rel="cc:attributionURL dct:creator">{{ photo.creator.get_full_name }}</a>.
                    {% if photo.get_license == photo.default_license %}
                        {{ photo.default_license.name }}.
                    {% else %}
                        {% blocktrans with photo.get_license.deed as photo_deed and photo.get_license.name as photo_name %}Licensed under
                        <a rel="license" href="{{ photo_deed }}"> 
                            {{ photo_name }}</a>.{% endblocktrans %}
                    {% endif %}
                    <br />{% fb_like_button_iframe photo.get_absolute_url %}
                    </div>
                </div>
            </div>
        </div>
        <div class="photo-caption-wrap">
            {{ photo.caption|safe|urlize }}
        </div>
        <div class="hr"></div>
        <div class="photo-options">
			{% photo_options request.user photo %}
        </div>
        {% if tags %}
        <div class="photo-tags">
            <strong>{% trans "Tags:" %}</strong> {% for tag in tags %}<a href="{% url photos_search %}?q=tag:{{ tag }}">{{ tag }}</a>{% if not forloop.last %},{% endif %}{% endfor %}
        </div>
        {% endif %}
	</div><!-- END .photo-instance -->

<!-- delete photo form -->
<form name="photo-delete" method="POST" action="{% url photo_destroy photo.pk set_id %}">{% csrf_token %}
    <input type="hidden" name="action" value="delete">
    <input type="hidden" name="delete_id" value="{{ photo.pk }}" />
</form>
    
{% endblock %}


{% block extra_body %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/tendenci5.api.client.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tools.min.js"></script>
<script type="text/javascript">

// photo: delete confirmation
$('.photo-options .photo-delete').click(function(){
	var delete_photo = confirm('Permenantly delete photo?');	// confirm
	if(delete_photo) $('form[name="photo-delete"]').submit();	// delete: if OK
	return false;	// cancel
});

// keyboard shorcut (left, right)
$(document).keyup(function(event){
  if(event.target.tagName == 'INPUT') return false; // avoid input fields
  if(event.keyCode == 37) window.location = '{{ photo_prev_url }}'; // left arrow
  else if(event.keyCode == 39) window.location = '{{ photo_next_url }}'; // right arrow
});

// // keyboard shorcut (left, right)
// $(document).keyup(function(event){
// 	if(event.target.tagName == 'INPUT') return false; // avoid input fields
// 	if(event.keyCode == 37) $("#photo-prev").click(); // left arrow
// 	else if(event.keyCode == 39) $("#photo-next").click(); // right arrow
// });

// function supports_history_api() {
//   return !!(window.history && history.pushState);
// }

// function setupHistoryClicks() {
// 	addClicker(document.getElementById("image-photo-next"));
// 	addClicker(document.getElementById("photo-next"));
// 	addClicker(document.getElementById("photo-prev"));
// }

// function addClicker(link) {
// 	$(link).click(function(e){
// 	    swapPhoto(link.href);
// 	    history.pushState(null, null, link.href);
// 	    e.preventDefault();
// 	});
// }

// function swapPhoto(href) {
//   var req = new XMLHttpRequest();
//   req.open("GET",
//            "/photos/partial/" +
//              href.split("/").slice(4).join("/"),
//            false);
//   req.send(null);

//   if (req.status == 200) {
//     document.getElementById("photo-instance").innerHTML = req.responseText;
//     setupHistoryClicks();
//     return true;
//   }
//   return false;
// }

// window.onload = function() {
//   if (!supports_history_api()) { return; }
//   setupHistoryClicks();
//   window.setTimeout(function() {
//     window.addEventListener("popstate", function(e) {
//       swapPhoto(location.href);
//     }, false);
//   }, 1);
// }

</script>
{% endblock %}
