(function ($) {
    "use strict";
    $(document).ready(function ($) {
        if ($(window).width() < 768) {
            var menu_mobile = $('#menu_mobile');
            var img_menu = menu_mobile.find('img');
            var nav_mobile = $('#nav_mobile');
            var overlay = $('.overlay');
            var menu_has_children = $('.menu-item-has-children');
            $('.menu-item-has-children').append('<span class="next_sub_menu"> > </span>');
            var next_sub_menu = $('.next_sub_menu');
            var sub_menu = $('.sub-menu');
            sub_menu.prepend('<li class="back_menu"><a href="#"> < </a></li>');

            var nav_mobile_width = nav_mobile.outerHeight();

            img_menu.on('click', function () {
                menu_mobile.css('position', 'fixed');
                nav_mobile.css({
                    'left': '0'
                });
                overlay.show();
            });

            overlay.on('click', function () {
                menu_mobile.removeAttr('style');
                $('#nav_mobile > div > ul > li').removeAttr('style');
                nav_mobile.css({
                    'left': '-200px'
                });
                sub_menu.removeAttr('style');
                next_sub_menu.show();
                overlay.hide();
            });

            next_sub_menu.on('click', function () {
                var sub_menu_current = $(this).parent().find('.sub-menu');
                var offset_top_sub_menu = sub_menu_current.parent().offset().top;
                console.log('offset_top_sub_menu', offset_top_sub_menu);
                sub_menu_current.css({
                    'display' : 'block',
                    'margin-top' : '-' + offset_top_sub_menu + 'px'
                });
                var back_menu = $('.back_menu');

                $('#nav_mobile > div > ul > li').css('left', '-200px');
                back_menu.on('click', function () {
                    $('#nav_mobile > div > ul > li').removeAttr('style');
                    sub_menu_current.removeAttr('style');
                })
            })
        }
    })
})
(jQuery);