{% extends widget.get_base_template %}

{% load i18n %}
{% load thumbnail %}

{% block content %}
<div class="banner-images ui-helper-clearfix">
	<div id="{{ widget.fe_identifier }}-images">
		{% for object in widget.list.link_set.all %}
		<div class="banner {% cycle 'odd' 'even' %}" style="display:{% if forloop.first %}block{% else %}none{% endif %};">
			<a href="{{ object.web_address }}" class="button {% if object.target == '_modal' %}ajax-modal modal{% endif %} {% if object.target == '_blank' %}blank{% endif %}">
			{% thumbnail object.image.file "600x400" format="PNG" as image %}
			<img src="{{ image.url }}" alt="icon" /><br />
			{% endthumbnail %}
			</a>
			<div class="banner-text">
				<h3>{{ object }}</h3>
				{{ object.translation.description|safe }}
			</div>
		</div>
		{% endfor %}
	</div>
	<div id="{{ widget.fe_identifier }}-controls" class="banner-controls"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$("#{{ widget.fe_identifier }} a.modal").colorbox();
	$("#{{ widget.fe_identifier }} a.blank").bind('click', function() {
		window.open($(this).attr('href'));
		return false;
	});
	$('#{{ widget.fe_identifier }}-images').cycle({ 
		fx: 'fade', 
		speed: 'slow', 
		timeout: {{ widget.rotation_speed|default:"4000" }}, 
		pager: '#{{ widget.fe_identifier }}-controls' 
	});
});
</script>
{% endblock %}