{% load i18n l10n sekizai_tags %}

<select id="{{ menu_id }}">
    {% if first_label %}<option>{{ first_label }}</option>{% endif %}
    {% for anchor in anchors %}
        <option value="#{{ anchor.slug }}">{{ anchor.title }}</option>
    {% endfor %}
</select>

{% addtoblock "js" %}
{% if "ANCHOR_MENU_JQUERY_URL" %}<script src="{{ ANCHOR_MENU_JQUERY_URL }}"></script>{% endif %}
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
    {% if DEBUG %}console.log("loaded jQuery v"+$.fn.jquery+" loaded.");{% endif %}
    var select_menu=$("#{{ menu_id }}");
    select_menu.change(function() {
        var anchor=$(this).val();
        {% if DEBUG %}console.log("selected: '"+anchor+"'");{% endif %}

        var offset=$(anchor).offset();
        if (offset === undefined) {
            {% if DEBUG %}console.log("skip");{% endif %}
        } else {
            {% if scroll_mode %}
                var offset_top = offset.top
                {% if DEBUG %}console.log("scroll to: "+offset_top);{% endif %}
                $(document).scrollTop(offset_top);
            {% else %}
                {% if DEBUG %}console.log("set href to: '"+anchor+"'");{% endif %}
                window.location.href = anchor;
            {% endif %}
        }
    });
    {% if DEBUG %}
        {% if scroll_mode %}
            console.log("use 'scroll' mode");
        {% else %}
            console.log("use 'href' mode");
        {% endif %}
        console.log("init '"+select_menu.selector+"' done.");
    {% endif %}
});
</script>
{% endaddtoblock %}
