{% load i18n %}
{% load sekizai_tags goscale_tags %}

{% goscale_addtoblock "css" %}
	<link rel="stylesheet" href="{{ STATIC_URL }}goscale/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}goscale/css/goscale.plugins.pictures.css" />
{% endaddtoblock %}

{% goscale_addtoblock "js" %}
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}goscale/js/goscale.plugins.pictures.carousel.js" data-callback="plugins.goscalePluginsPicturesCarousel"></script>
{% endaddtoblock %}

<div class="goscale-plugins-pictures carousel" data-type="carousel" data-autoplay="{{ autoplay }}"{% if width != null %} data-width="{{ width }}"{% endif %}{% if height != null %} data-height="{{ height }}"{% endif %}{% if thumbnail_width != null %} data-thumbnailWidth="{{ thumbnail_width }}"{% endif %}{% if thumbnail_height != null %} data-thumbnailHeight="{{ thumbnail_height }}"{% endif %}>
	{% if posts %}
		<div class="box-sidebar">
			<div class="boxtop"><div></div></div>
			<div class="boxcontent">
				<div id="carouselContainer">
					{% if title %}
						<div class="CarouselTitle">{{ title }}</div>
					{% endif %}
					<div id="carousel">
						<span id="arrowLeft"></span>
						<span id="arrowRight"></span>
						<div id="imageTitle"></div>
					</div>
				</div>
				<div id="carousel-images">
					{% for image in posts %}
						<img src="{{ image.thumbnails.s144.url }}" data-title="{{ image.summary }}" data-imageTitle="{{ image.summary|striptags }}" data-link="{{ image.thumbnails.s800.url }}" />
					{% endfor %}
				</div>
				<div id="carousel-image-link"></div>
			 </div>
			<div class="boxbottom"><div></div></div>
		</div>
	{% endif %}
</div>