<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>

<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="thumb-tray" class="load-item">
    <div id="thumb-back"></div>
    <div id="thumb-forward"></div>
</div>

<!--Time Bar-->
{% if progress_bar == 'true' %}
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>
{% endif %}

<!--Control Bar-->
{% if not hide_controls %}
    <div id="controls-wrapper" class="load-item">
        <div id="controls">

            <a id="play-button"><img id="pauseplay" src="{{ STATIC_URL }}super-sized/img/pause.png"/></a>

            <!--Slide counter-->
            <div id="slidecounter">
                <span class="slidenumber"></span> / <span class="totalslides"></span>
            </div>

            <!--Slide captions displayed here-->
            <div id="slidecaption"></div>

            <!--Thumb Tray button-->
            <a id="tray-button"><img id="tray-arrow" src="{{ STATIC_URL }}super-sized/img/button-tray-up.png"/></a>

            <!--Navigation-->
            <ul id="slide-list"></ul>

        </div>
    </div>
{% endif %}
<script type="text/javascript">

    jQuery(function ($) {
        $.supersized.themeVars.image_path = '{{ STATIC_URL }}super-sized/img/';
        $.supersized({

            // Functionality
            slideshow:{{ slideshow }},
            autoplay:{{ autoplay }},
            start_slide:{{ start_slide }},
            stop_loop:{{ stop_loop }},
            random:{{ random }},
            slide_interval:{{ slide_interval }},
            transition:'{{ transition }}',
            transition_speed:{{ transition_speed }},
            new_window:{{ new_window }},
            pause_hover:{{ pause_hover }},
            keyboard_nav:{{ keyboard_nav }},
            performance:{{ performance }},
            image_protect:{{ image_protect }},
            min_width:{{ min_width }},
            min_height:{{ min_height }},
            vertical_center:{{ vertical_center }},
            horizontal_center:{{ horizontal_center }},
            fit_always:{{ fit_always }},
            fit_portrait:{{ fit_portrait }},
            fit_landscape:{{ fit_landscape }},

            // Components
            slide_links:{{ slide_links }},
            thumb_links:{{ thumb_links }},
            thumbnail_navigation:{{ thumbnail_navigation }},
            slides:[
                {% for slide in slides %}
                    {
                        image:'{{ slide.image }}',
                        title:'{{ slide.title }}',
                        thumb:'{{ slide.thumb }}',
                        url:'{{ slide.url }}'},
                {% endfor %}
            ],

            // Theme Options
            progress_bar:{{ progress_bar }}, // Timer for each slide
            mouse_scrub:{{ mouse_scrub }}

        });
        {% if show_thumbnails %}
            setTimeout(function () {
                {% if hide_controls %}
                    $("#thumb-tray").stop().animate({bottom:0});
                {% else %}
                    $("#tray-button").click();
                {% endif %}
            }, 500);
        {% endif %}
    });

</script>
