{% load thumbnail %}
{% thumbnail source.img_url_local "260x260" as thumb_sm %}
{% thumbnail source.img_url_local "700x700" as thumb_lg %}
{% if lightbox %}
<div class="primarysource"><!-- lightbox -->
  <a href="mediaspace-{{ source.encyclopedia_id }}"
     class="video lightview"
     data-lightview-type="inline"
     data-lightview-options="
         keyboard: { esc: false },
         afterUpdate: function(element, position) {
//jwplayer callback script
jwplayer('mediaspace-{{ source.encyclopedia_id }}').setup({
    'autostart': 'false',
    'controlbar': 'bottom',
    'width': '{{ xy.0 }}',
    'height': '{{ xy.1 }}',
    'image': '{{ MEDIA_URL }}{{ thumb_lg }}',
    'modes' : [
{% if source.streaming_path %}
        { type: 'html5',
          config: {
            file: '{{ SOURCES_MEDIA_URL }}{{ source.streaming_path }}'
          }
        },
{% endif %}
{% if source.rtmp_path %}
        { type: 'flash',
          src: '{{ STATIC_URL }}jwplayer-5.9/player.swf',
          config: {
            provider: 'rtmp',
            streamer: '{{ RTMP_STREAMER }}',
            file: '{{ source.rtmp_path }}'
          }
        }{% if source.rtmp_path and source.streaming_path %},{% endif %}
{% endif %}
{% if source.streaming_path %}
        { type: 'download',
            config: {
                'file' : '{{ SOURCES_MEDIA_URL }}{{ source.streaming_path }}',
                'provider' : 'video'
            }
        }
{% endif %}
    ]
});
         }"
     data-lightview-caption="{{ source.caption }} {{ source.courtesy }} <a class='more' href='{{ source.absolute_url }}'>More info &raquo;</a>"
  >
    <img src="{{ MEDIA_URL }}{{ thumb_sm }}"
         large="{{ MEDIA_URL }}{{ thumb_lg }}"
         more="{{ source.absolute_url }}" />
  </a>
  <br/>
  <span class="caption">
    {{ source.caption }}
    {{ source.courtesy }}
    <a class="more" href="{{ source.absolute_url }}">More info &raquo;</a>
  </span>
</div>
<div id="mediaspace-{{ source.encyclopedia_id }}" style="display:none;width:{{ xyms.0 }}px;height:{{ xyms.1 }}px;">This div will end up in the lightbox</div>
{% else %}
<div class="primarysource">
  <a href="{{ source.absolute_url }}"><img src="{{ MEDIA_URL }}{{ thumb_sm }}" /></a>
  <br/>
  <span class="caption">
    {{ source.caption }}
    {{ source.courtesy }}
    <a class="more" href="{{ source.absolute_url }}">More info &raquo;</a>
  </span>
</div>
{% endif %}{# lightbox #}
{% endthumbnail %}
{% endthumbnail %}