{% extends 'base.html' %}
{% load typogrify %}
{% load number_to_word  %}

{% block pagetitle %}{{object.set_title}} - Luxagraf, Photos{% endblock %}

{%block stylesheet%}
 <link rel="stylesheet" 
          href="{{MEDIA_URL}}css/dark.css" 
          type="text/css" 
          media="screen"> 
{%endblock%}


{% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %}

{%block bodyid%}class="image_gallery"{%endblock%}	

{% block primary %}<section id="page-header">
        <h1 class="hide">Photos from {{object.set_title}}</h1>
        <nav id="page-nav">
            <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
                <li><a href="/photos/" title="See all Photos" itemprop="url"><span>Photos</span></a> &rarr;</li> 
                <li>{{object.set_title}}</li>
            </ul>
        </nav>
    </section>
    <p class="directions">Use left/right arrow keys to navigate through photos</p>
    <section id="slides">
        {%for photo in object.photos.all reversed %}
        <article id="image-{{forloop.counter}}"> 
            <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">&#8734; {{forloop.counter|number_to_word}} &#8734;</a></h6>
            <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" />
            <div class="figcaption">
                <div class="caption" id="id-{{photo.id}}">
                    <h3>{{photo.title}} &nbsp;&nbsp;<span>{{photo.exif_date|date:"M j, Y"}}</span></h3>
                    <a class="map-link" href="#" title="{{photo.lat}},{{photo.lon}},id-{{photo.id}}">Map</a>
                    {%if photo.description %}<p>{{photo.description|safe}}</p> {%endif%}  
                </div>
                <div class="photo-options">
                    <p class="camera">{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 w/{%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == None %}Built-in{%endif%}</p>
                    <p class="details">{{photo.exif_exposure}} sec @ {{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p>
                    <!--<a href="#" class="exif-link" title="{{photo.id}}">Camera</a>-->
                </div>
                
                {%comment%}
                <div class="meta" style="display: none;">
                        <dl>
                            <dt>Camera:</dt>
                            <dd>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}<a href="http://amzn.to/cLQozJ" title="Buy on Amazon">{{photo.exif_make}} {{photo.exif_model}}</a>{%endif%}</dd>
                            <dt>Lens: </dt>
                            <dd>{%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == None %}Built-in{%endif%}</dd>
                            <dt>Exposure</dt>
                            <dd>{{photo.exif_exposure}}</dd>
                            <dt>Aperture</dt>
                            <dd>{{photo.exif_aperture}}</dd>
                            <dt>Focal Length: </dt>
                            <dd>{{photo.exif_focal_length}}</dd>
                            <dt>ISO: </dt>
                            <dd>{{photo.exif_iso}}</dd>
                            <dt>Comments: </dt>
                            <dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd>
                        </dl>
                 </div>
                {%endcomment%}
            </div>
            </article>
        {% endfor %}
    </section>
{%endblock%}

{% block js %}
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.scrollTo-1.4.2-min.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/slideshow.js" ></script>
    <!-- if you'd like to see a non-packed version of my slideshow script, see this file: http://media.luxagraf.net/js/slideshow.js (requires jquery, jcarousel and cycle) -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
{% endblock%}