{% load i18n thumbnail sekizai_tags %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ MEDIA_URL }}js/libs/jquery-1.4.4.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ MEDIA_URL }}js/libs/classy-1.3.js"></script>{% endaddtoblock "js" %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ MEDIA_URL }}js/plugins/jquery.cycle-2.97.js"></script>{% endaddtoblock "js" %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ MEDIA_URL }}simplegallery/js/jquery.simplegallery.js"></script>{% endaddtoblock "js" %}
{% addtoblock "css" %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}simplegallery/css/simplegallery.css" media="screen, projection" />{% endaddtoblock "css" %}
{% block galery_options %}
{% addtoblock "js" %}
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function ($) {

	new Cl.Gallery('#plugin_gallery-{{ instance.id }}', {
		fx: 'fade',
		timeout: {{ instance.interval }}*1000,
		ui: {
			caption: true,
			controls: true,
			thumbnails: true
		},
		plugins: {
			external: false,
			keycontrol: true,
			lightbox: false,
			lightboxOptions: {}
		}
	});

});
//]]>
</script>
{% endaddtoblock %}
{% endblock %}

<!-- start: gallery -->
<div class="plugin_gallery {% block gallery_css %}plugin_gallery-full{% endblock %} clearfix" id="plugin_gallery-{{ instance.id }}">

	{% if instance.title %}<h2>{{ instance.title|safe }}</h2>{% endif %}
	{% if gallery.title %}<h2>{{ gallery.title|safe }}</h2>{% endif %}
	
	{% if gallery.description %}{{ gallery.description|safe }}{% endif %}

	<!-- ui: controls -->
	<p class="gallery-controls">
		<a href="#play" class="gallery-ctrl-play">{% trans "Play" %}</a> 
		<a href="#pause" class="gallery-ctrl-pause">{% trans "Pause" %}</a> 
		<a href="#prev" class="gallery-ctrl-prev">{% trans "&laquo; Back" %}</a> 
		<a href="#next" class="gallery-ctrl-next">{% trans "Next &raquo;" %}</a>
	</p>
	
	<!-- ui: slide -->
	<div class="gallery-canvas"{% if image_size %} style="height:{{ image_size.2 }}px;"{% endif %}>
		<ul class="gallery-list">
		{% for image in images %}
			<li class="gallery-list-slide slide_{{ forloop.counter }}{% if forloop.first %} first{% endif %}{% if forloop.last %} last{% endif %}"{% if image_size %} style="height:{{ image_size.2 }}px;"{% endif %}>
				
				<!-- ui: picture -->
				<div class="gallery-item">
					<img src="{% thumbnail image.image image_size.0 crop upscale %}" alt="{% if image.title %}{{ image.title|escape|striptags }}{% endif %}" />
				</div>
				
				<!-- ui: caption -->
				{% if image.title or image.description %}
				<div class="gallery-caption">
					{% if image.title %}<h1 class="gallery-title">{{ image.title|safe|escape }}</h1>{% endif %}
					{% if image.description %}<div class="gallery-desc">{{ image.description|safe }}</div>{% endif %}
				</div>
				{% endif %}
				
			</li>
		{% endfor %}
		</ul>
	</div>
	
	<!-- ui: thumbnails -->
	<div class="gallery-thumbs clearfix">
		<ul>
			<li class="gallery-thumbs-prev"><a href="#prev">{% trans "Back" %}</a></li>
			{% for image in images %}
			<li class="gallery-thumbs-slide{% if forloop.first %} first{% endif %}{% if forloop.last %} last{% endif %}">
				<a href="#{{ forlop.counter }}" class="gallery-thumbs-slide-{{ forloop.counter }}">{{ forloop.counter }}</a>
			</li>
			{% endfor %}
			<li class="gallery-thumbs-next"><a href="#next">{% trans "Next" %}</a></li>
		</ul>
	</div>
</div>
<!-- end: gallery -->