{% extends "pylucid/css_anchor_div.html" %}

{% block plugin_content %}
{% extrahead %}
<script type="text/javascript" src="{{ STATIC_URL }}PyLucid/jquery.colorbox-min.js" onerror="JavaScript:alert('Error loading file ['+this.src+'] !');"></script>
<style>
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* ColorBox base user style */
#cboxOverlay{background:#000;}
#cboxContent{background:#fff;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
        
/* basic gallery style */
#pictures * {
    margin: 0;
    padding: 0;  
}
#pictures li {
    list-style:none;
    display: inline;
}
</style>
<script type="text/javascript">
try {
    jQuery(document);
} catch (e) {
    alert("Error, jQuery JS not loaded!\n Original error was:" + e);
}

jQuery(document).ready(function($) {
    $('#pictures a').colorbox({
        /*
        onOpen:function(){ log('onOpen: colorbox is about to open'); },
        onLoad:function(){ log('onLoad: colorbox has started to load the targeted content'); },
        onComplete:function(){ log('onComplete: colorbox has displayed the loaded content'); },
        onCleanup:function(){ log('onCleanup: colorbox has begun the close process'); },
        onClosed:function(){ log('onClosed: colorbox has completely closed'); },
        */
        current: '{% trans "image {current} of {total}" %}',
        previous:'&#x25C0; {% trans "previous" %}',
        next:'{% trans "next" %} &#x25B6;',
        close:'&#x2716; {% trans "close or Esc key" %}'
    });
    log("flickr gallery initialized.");
});
</script>
{% endextrahead %}

{% if user.is_staff and debug %}
    <h2>Request/response debug info</h2>
    <table>
        <tr>
            <td>Data are</td>
            <td><strong>{% if from_cache %}from cache{% else %}not from cache{% endif %}</strong></td>
        </tr>
        <tr>
            <td>server response time:</td>
            <td>{{ duration|floatformat:3 }}sec.</td>
        </tr>
        <tr>
            <td>url:</td>
            <td>{{ url }}</td>
        </tr>
        <tr>
            <td>cache_time:</td>
            <td>{{ cache_time }}</td>
        </tr>
        <tr>
            <td>timeout:</td>
            <td>{{ timeout }}</td>
        </tr>
        <tr>
            <td>request_header:</td>
            <td><pre>{{ request_header }}</pre></td>
        </tr>
        <tr>
            <td>response_info:</td>
            <td><pre>{{ response_info }}</pre></td>
        </tr>
    </table>
    {% if not data %}
        <h2>debug raw content</h2>
        <pre>{{ raw_content }}</pre>
    {% else %}
        <h2>debug parsed flickr json data</h2>
        <pre>{{ data|pprint }}</pre>
    {% endif %}
{% else %}   
    <ul id="pictures">
    {% for picture in data.items %}
        <li>
            <a href="{{ picture.media.c }}" rel="flickr" title="{{ picture.title }}{% if picture.desc_text %} - {{ picture.desc_text|striptags }}{% endif %}">
                <img src="{{ picture.media.q }}" />
            </a>
        </li>
    {% empty %}
        <li><i>{% trans "No pictures found." %}</i></li>
    {% endfor %}
    </ul>
{% endif %}
{% endblock %}