{if $menuContainer}
    <div id="mobile-menu" class="collapse hidden-sm hidden-md hidden-lg">
        <div class="inner text-word-wrap">
            <div class="title-bg"></div>
            {foreach item=parent from=$menuContainer}
                <div class="parent parent-{$parent.categories_id}{if $parent.active} active{else} next{/if}" data-path="{$parent.parent_id}|{$parent.categories_id}">
                    <p class="title text-uppercase clearfix">
                        <button class="back-menu btn btn-link text-muted pull-left">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Back</span>
                        </button>
                        {if $parent.categories_link}
                            <a class="parent-title" href="{$parent.categories_link}">
                                {$parent.categories_name}
                            </a>
                        {else}
                            <span class="parent-title">
                                {$parent.categories_name}
                            </span>
                        {/if}
                        <button class="hide-menu btn btn-link text-muted pull-right">
                            <span class="glyphicon glyphicon-remove"></span>
                            <span class="sr-only">Close</span>
                        </button>
                    </p>
                    <div class="parent-inner">
                        <ul class="nav nav-pills nav-stacked">
                            {foreach item=child from=$parent.children}
                                <li class="child{if $child.active == 1} active{/if}">
                                    <a href="{$child.categories_link}"{if $child.sub} data-next="{$child.categories_id}"{/if}>
                                        {$child.categories_name}
                                        {if $child.sub}
                                            <span class="indicator-next fa fa-caret-right"></span>
                                        {/if}
                                    </a>
                                </li>
                            {/foreach}
                            {if $parent.categories_link}
                                <li class="nav-divider"></li>
                                <li class="child parent-show-all">
                                    <a href="{$parent.categories_link}" class="text-uppercase">
                                        {txt key=TEXT_EW_ADVENTURY_MAINCAT_TITLE}
                                    </a>
                                </li>
                            {/if}
                        </ul>
                        {* <!-- STATIC PAGES EXAMPLE:
                        {if $parent.categories_id == 0}
                            <ul class="nav nav-pills nav-stacked">
                                <li class="nav-divider"></li>
                                <li class="{if $smarty.get.page == 'xt_bestseller_products'} current active{/if}">
                                    <a href="{link page='xt_bestseller_products'}">{txt key=TEXT_HEADING_BESTSELLER_PRODUCTS}</a>
                                </li>
                                <li class="{if $smarty.get.page == 'xt_new_products'} current active{/if}">
                                    <a href="{link page='xt_new_products'}">{txt key=TEXT_HEADING_NEW_PRODUCTS}</a>
                                </li>
                                <li class="{if $smarty.get.page == 'xt_special_products'} current active{/if}">
                                    <a href="{link page='xt_special_products'}">{txt key=TEXT_HEADING_SPECIAL_PRODUCTS}</a>
                                </li>
                                {if $smarty.const.CONFIG_EW_MANUFACTURER_INFO_ALL == 'true'}
                                    <li class="list-level-1{if $smarty.get.page == 'ew_manufacturer_info'} current active{/if}">
                                        <a href="{link page='ew_manufacturer_info'}" title="{txt key=TEXT_EW_MANUFACTURER_INFO_ALL_LINK}">{txt key=TEXT_EW_MANUFACTURER_INFO_ALL_HEADLINE}</a>
                                    </li>
                                {/if}
                            </ul>
                        {/if}
                        --> *}
                        <br />
                        <br />
                        <br />
                        <br />
                    </div>
                </div>
            {/foreach}
            <div class="clearfix"></div>
        </div>
    </div>

<script>
    // {literal}
    $(function() {
        var name = 'mobile-menu';
        var body = $('body');
        var collapsible = $('#'+name);
        var back = collapsible.find('.back-menu');
        var close = collapsible.find('.hide-menu');
        var state = {
            current: null,
            next: null,
            prev: null,
            direction: 'prev'
        };
        var action = {
            menuShown: function () {
                body.addClass(name+'-open');
                action.setLocation();
            },
            menuHidden: function () {
                body.removeClass(name+'-open');
                action.removeLocation();
            },
            setLocation: function () {
                if (state.next !== null) {
                    window.location.hash = name + ':' + state.next;
                }
            },
            removeLocation: function () {
                if (typeof window.history.pushState !== 'undefined') {
                    window.history.pushState('', '/', window.location.pathname)
                } else {
                    window.location.hash = '';
                }
            },
            getActive: function () {
                return collapsible.find('.parent.active');
            },
            getPrevId: function () {
                var active = action.getActive();
                if (!active.length) {
                    return 0;
                }
                var path = active.data('path').split('|');
                var id = parseInt(path[0]);
                return !isNaN(id) ? id : 0;
            },
            getCurrentId: function () {
                var active = action.getActive();
                if (!active.length) {
                    return 0;
                }
                var path = active.data('path').split('|');
                var id = parseInt(path[1]);
                return !isNaN(id) ? id : 0;
            },
            close: function () {
                collapsible.collapse('hide');
            },
            toggleBack: function () {
                if (state.current === 0) {
                    back.hide();
                } else {
                    back.fadeIn();
                }
            },
            init: function () {
                state.current = action.getCurrentId();
                state.next = state.current;
                action.toggleBack();
            },
            isMenuHash: function () {
                return window.location.hash.indexOf(name) !== -1;
            },
            setNextFromHash: function () {
                if (action.isMenuHash()) {
                    var match = window.location.hash.match(/\d/g);
                    if (match) {
                        var id = parseInt(match.join(''));
                        state.next = !isNaN(id) ? id : state.next;
                    }
                }
            },
            back: function (e) {
                e.preventDefault();
                state.next = action.getPrevId();
                state.direction = 'prev';
                action.setLocation();
            },
            link: function (e) {
                e.preventDefault();
                state.next = parseInt($(this).data('next')) || 0;
                state.direction = 'next';
                action.setLocation();
            },
            router: function () {
                if (action.isMenuHash()) {
                    state.prev = state.current;
                    action.setNextFromHash();
                    action.navigate();
                    state.current = state.next;
                    action.toggleBack();
                } else {
                    action.close();
                }
            },
            navigate: function () {
                if (state.next !== null && state.prev !== null) {
                    var next = collapsible.find('.parent-'+state.next);
                    var prev = collapsible.find('.parent-'+state.prev);
                    prev.removeClass('next prev active');
                    if (state.direction === 'next') {
                        prev.addClass('prev');
                    } else {
                        prev.addClass('next');
                    }
                    next.removeClass('next prev')
                        .addClass('active');
                    state.direction = 'prev';
                }
            }
        };

        // init
        action.init();

        // button events
        close.click(action.close);
        back.click(action.back);

        // click events
        collapsible.find('.child [data-next]').click(action.link);
        collapsible.click(function (e) {
            if (e.target === e.currentTarget) {
                action.close();
            }
        });

        // collapsible events
        collapsible.on('shown.bs.collapse', action.menuShown);
        collapsible.on('hidden.bs.collapse', action.menuHidden);

        // location event
        $(window).on('hashchange', action.router);
    });
    // {/literal}
</script>

{/if}
