{% extends 'noel/staticpage.html' %}

{% load thumbnail %}

{% block extra_head %}
    {{ block.super }}
    <script src="/static/js/render_object.js"></script>
    <link rel="stylesheet" href="/static/css/noel/inner-details.css" />
{% endblock %}

{% block main_content %}

<div id="lightboxPanel">
    <div id="lightboxContent">

    </div>
    <div id="lightboxClose">
    <img src="/static/images/noel/close.jpg" width="12" height="16"  id="closeImg" alt="close" /></div>
</div>
<div id="lightbox"></div>

<h1 class="lightboxHeading">{{ title }}</h1>
{% if photos %}
<div id="imagesContainer">
    <h3 class="orange">Photos</h3>
    {% for p in photos %}
    {% thumbnail p.image "640" as bigimage %}
    {% thumbnail p.image "164x114" crop="center" as thumb %}
        <img src="{{ thumb.url }}" title="{{ p.title }}" class="thumbsDetails" data-bigimage="{{ bigimage.url }}" data-width="{{ bigimage.width }}" data-height="{{ bigimage.height }}" />

    {% endthumbnail %}
    {% endthumbnail %}

    {% endfor %}    

</div>
{% endif %}

{% if videos %}
    <div id="videosContainer">
        <h3 class="orange">Videos</h3>
        {% for v in videos %}
            <img src="{{ v.thumbnail }}" class="youtubeLink thumbsDetails" title="{{ v.title }}" data-iframe='{{ v.iframe }}' /> 
        {% endfor %}
    </div>
{% endif %}

{% if links %}
    <div id="linksContainer">
        <h3 class="orange">Links</h3>
        <ul id="linksList">
        {% for l in links %}
            <li>
                <a href="{{ l.url }}" target="_blank">{{ l.title }}</a>
            </li>
        {% endfor %}
        </ul>
    </div>

{% endif %}

<a href="Javascript:window.close()" class="closinglightbox">Close</a>

{% endblock %}
