{% extends "base.html" %}

    {% block view %}

    <div id="resource-tabs" class="resource-list-tabs">

        <a href="/resource/questions">

        <img class="palette-tab-button has_tooltip {{questions}}" src="/static/icons/button-question.png" title="{{_('questions')}}" />

        </a>

        <a href="/resource/ideas">

        <img class="palette-tab-button has_tooltip {{ideas}}" src="/static/icons/button-idea.png" title="{{_('ideas')}}" />

        </a>

        <a href="/resource/problems">

        <img class="palette-tab-button has_tooltip {{problems}}" src="/static/icons/button-problem.png" title="{{_('problems')}}" />

        </a>

        <a href="/resource/reviews">

        <img class="palette-tab-button has_tooltip {{reviews}}" src="/static/icons/button-review.png" title="{{_('reviews')}}" />

        </a>

        <a href="/resource">

        <img class="palette-tab-button has_tooltip {{all_}} {{all}}" src="/static/icons/button-list.png" title="{{_('all resources')}}" />

        </a>

        <a href="/resource/artifacts">

        <img class="palette-tab-button has_tooltip {{gallery}}" src="/static/icons/button-blank.png"  title="{{_('artifact gallery')}}" />

        </a>

    </div>

    {#<div id="resource-buttons">

        <img class="question-button button{%if resource=='questions' %} selected{% endif %}" src="/static/icons/emblem-question.png" alt="Es una pregunta"/>

        <img class="idea-button button{%if resource=='ideas' %} selected{% endif %}" src="/static/icons/emblem-charging.png" alt="Es una idea" />

        <img class="problem-button button{%if resource=='problems' %} selected{% endif %}" src="/static/icons/emblem-notification.png" alt="Es un problema" />

    </div>#}

    <div class="resource-list-scrollable" id="resource-list-scrollable">

    <div class="items">

    {%- for item in range(page-1) %}

    <ul class='resource-list' id="resource-page-{{item+1}}">

        <div id='throbber-box'>

            <img id='throbber' src="/static/images/throbber10.gif" />

        </div>

    </ul>

    {%- endfor %}

    {%- include inner_template or '_resource-list.html' %}

    {%- for item in range(total_pages-page) %}

    <ul class='resource-list' id="resource-page-{{item+page+1}}">

        <div id='throbber-box'>

            <img id='throbber' src="/static/images/throbber10.gif" />

        </div>

    </ul>

    {%- endfor %}

    </div>

    </div>

    <div id='vpaginator'>

        <input id="vrange" type="range" name="vpaginator" max="1" min="{{total_pages}}" step="-1" value="{{page}}" />

    </div>

    <style>

    .slider {

        height:300px;

        width:6px;

        position: fixed;

        right: 20px;

        top: 150px;

    }

    .handle {

        left:-10px;

    }

    </style>

    <script type="text/javascript">

        $(function() {

            // initialize scrollable

            $(".resource-list-scrollable").scrollable( {vertical:true } );

            var api = $("#resource-list-scrollable").data("scrollable");

            var last_page = {{page}};

            // initialize scroll range input

            $("#vrange").rangeinput({vertical: true});

            $("#vrange").change(function(event, value) {

                api.seekTo(value-1);

                });

            range_api = $("#vrange").data("rangeinput");

            range_api.setValue({{page}});

            function load_adyacent_pages(page) {

                if (page-1 > 0) {

                    $.get( '?page='+(page-1)+'&_pjax', { },

                      function( data ) {

                        $( '#resource-page-'+(page-1)).empty().append( data );

                      });

                    }

                if (page+1 <= {{total_pages}}) {

                    $.get( '?page='+(page+1)+'&_pjax', { },

                      function( data ) {

                        $( '#resource-page-'+(page+1) ).empty().append( data );

                      });

                    }

            }

            api.seekTo({{page-1}},0);

            load_adyacent_pages({{page}});

            api.onSeek( function() {

                new_page = api.getIndex()+1;

                $('div.generic_tooltip').hide();

                History.pushState(null,null,'?page=' + new_page);

                range_api.setValue(new_page);

                if (new_page != last_page+1 && new_page != last_page-1) {

                    $.get( '?page='+new_page+'&_pjax', { },

                      function( data ) {

                        $( '#resource-page-'+new_page ).empty().append( data );

                      }

                    );

                    $( '#resource-page-'+last_page ).empty().append('<div id="throbber-box"><img id="throbber" src="/static/images/throbber10.gif" /></div>');

                    }

                last_page=new_page;

                load_adyacent_pages(new_page);

                $( '#info' ).empty().append('{% trans %}page '+new_page+' of{% endtrans %} {{total_pages}}');

                });

        });

    </script>

    {% endblock view %}