{{ $params := .Page.Params }}
{{ $attachments := $params.attachments }}

{{ if $params.options.carouselTitle }}
<h2>{{ $params.options.carouselTitle }}</h2>
{{ end }}

<div class="jcarousel-wrapper captions-{{ $params.options.captionPosition }} {{ $params.options.overlay }}"
     data-jcarousel-perslide="{{ $params.options.perSlide }}"
     data-jcarousel-stretch="{{ $params.options.stretchImage }}"
     data-jcarousel-fade="{{ $params.options.fade }}">
    <div class="jcarousel">
        <ul>
        {{ range $attachments }}
            {{ $linkResource := site.GetPage (printf "items/%s" (string .itemID)) }}
            {{ $imgResource := false }}
            {{ with .thumbnailSpec }}
                {{ if and (.page) (.resource) }}
                    {{ $imgPage := site.GetPage (.page) }}
                    {{ $imgResource = $imgPage.Resources.GetMatch (printf "%s*" .resource) }}
                {{ else if (.resource) }}
                    {{ $imgResource = resources.Get (.resource) }}
                {{ end }}
            {{ end }}
            <li>
                <a href="{{ $linkResource.RelPermalink }}" class="exhibit-item-link">
                    {{ if $imgResource }}
                    <img src="{{ $imgResource.RelPermalink }}" alt="">
                    {{ else }}
                    {{ .fileName }}
                    {{ end }}
                </a>
                {{ if $params.options.showTitle }}
                <div class="slide-meta">
                    <p class="slide-title">
                        <a href="{{ $linkResource.RelPermalink }}" class="exhibit-item-link">{{ .itemTitle }}</a>
                    </p>
                </div>
                {{ end }}
            </li>
        {{ end }}
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
    <p class="jcarousel-pagination"></p>
</div>

<script>
jQuery(function() {
    var carouselConfig = {{ $params.options.carousel }};
    var carousel = jQuery('.jcarousel').jcarousel(carouselConfig);

    {{ if $params.options.autoscroll }}
    var autoscrollConfig = {{ $params.options.autoscroll }};
    carousel.jcarouselAutoscroll(autoscrollConfig);
    {{ end }}
});
</script>