// console.log("hello");

$(function () {
    var print = function (msg) {
        alert(msg);
    };

    var setInvisible = function (elem) {
        elem.css('visibility', 'hidden');
    };
    var setVisible = function (elem) {
        elem.css('visibility', 'visible');
    };

    var elem = $("#elem");
    var items = elem.children();

    // Inserting Buttons


    // elem.prepend('<div id="right-button" style="visibility: hidden;"><a href="#"><</a></div>');
    // elem.append('  <div id="left-button"><a href="#">></a></div>');
    elem.prepend('<div id="right-button" style="visibility: hidden;"><a class="nav_act_btn" href="#"><img src="image/arrowoutline_L.svg" style="width:24px" alt=""></a></div>');
    elem.append('  <div id="left-button" ><a class="nav_act_btn" href="#"><img src="image/arrowoutline_R.svg" style="width:24px" alt=""></a></div>');

    // Inserting Inner
    items.wrapAll('<div id="inner" />');

    // Inserting Outer
    // debugger;
    elem.find('#inner').wrap('<div class="topnav" id="outer"/>');

    var outer = $('#outer');

    var updateUI = function () {
        var maxWidth = outer.outerWidth(true);
        var actualWidth = 0;
        $.each($('#inner>'), function (i, item) {
            actualWidth += $(item).outerWidth(true);
        });

        if (actualWidth <= maxWidth) {
            setVisible($('#left-button'));
        }
    };
    updateUI();
    $('#right-button').click(function () {
        var leftPos = outer.scrollLeft();
        outer.animate({
            scrollLeft: leftPos - 200
        }, 800, function () {
            //debugger;
            if ($('#outer').scrollLeft() <= 0) {
                setInvisible($('#right-button'));
            }
        });
    });

    $('#left-button').click(function () {
        setVisible($('#right-button'));
        var leftPos = outer.scrollLeft();
        outer.animate({
            scrollLeft: leftPos + 200
        }, 800);
    });

    $(window).resize(function () {
        updateUI();
    });
});

// mobile nav

    function myFunction() {
        // navBar.classList.toggle('toggle');
        elem.classList.toggle('toggle');
        // mainHtml.classList.toggle('stop_scroll'); body
    }
