﻿$(function () {
    BrakesSiteMobileInit();
});

/**
 https://github.com/vmitsaras/js-offcanvas
http://offcanvas.vasilis.co/examples.html
https://modernizr.com/download?csspseudotransitions-csstransitions-addtest-atrule-domprefixes-hasevent-mq-prefixed-prefixedcss-prefixedcssvalue-prefixes-printshiv-setclasses-shiv-testallprops-testprop-teststyles
https://modernizr.com/download?cssanimations-csstransforms-csstransforms3d-csstransitions-flexbox-touchevents-addtest-domprefixes-dontmin-hasevent-mq-prefixed-prefixes-setclasses-shiv-testallprops-testprop-teststyles
 */

function BrakesSiteMobileInit() {


    $(document).trigger("enhance");

    if ($("#OpenMenuButton").length > 0) {

        $("#MobileContainerLeft").offcanvas({
            modifiers: "left,overlay",
            triggerButton: "#OpenMenuButton",
            onOpen: function () {

                var loaded = $("#MobileContainerLeft").attr("data-loaded") === "true";

                if (!loaded) {
                    console.log("Building mobile menu");
                    var menuContent = $(".PowerMenu:first()").html();

                    var outer = "<ul><li class='Root Open'><div class='TopContainer'><div class='Heading'>&lt; Tilbake</div><div class='CloseMenu'></div></div>" + menuContent + "</li></ul>";

                    var container = DIV("", outer).attr("id", "MobileMenu");

                    
                    container.find(".PowerMenuInner div.Heading").replaceWith(function () {
                        return "";
                    });

                    container.find(".cbp-hrsub").replaceWith(function () {
                        var sub = $(this);
                        var inner = sub.find(".SubItems");
                        return "<ul>" + inner[0].innerHTML + "</ul>";
                    });

                    container.find("div.Level2").replaceWith(function () {
                        var level2 = $(this);
                        return "<li >"  + level2[0].innerHTML + "</li>";
                    });

                    container.find("a.Selected").each(function() {
                        var link = $(this);
                        var li = link.parent();
                        li.addClass("Selected").addClass("Open");
                    });

                    container.find("li.Selected").each(function () {
                        var li = $(this);
                        var parentLi = li.parents("li");
                        parentLi.addClass("Open");
                    });


                    container.find("li").addClass("MenuItem");
                    container.find("a").removeClass("MenuItem").addClass("Item");
                    container.find(".CreateNewItem").remove();

                    $("#MobileContainerLeft").prepend(container[0].outerHTML);
                    $("#MobileContainerLeft").attr("data-loaded", "true");

                    var anyOpen = $("#MobileContainerLeft .PowerMenuInner").find(".Open").length > 0;
                    if (!anyOpen) {
                        $("#MobileContainerLeft").find(".Root").addClass("Selected");
                    }

                    var selectedLeaf = $("#MobileContainerLeft").find(".Selected.Leaf");
                    if (selectedLeaf.length > 0) {
                        var parent = selectedLeaf.parent();
                        var siblings = parent.children(".MenuItem");
                        siblings.addClass("Sibling");
                    }

                    if ($("#MobileMenu .Root").hasClass("Selected")) {
                        $("#MobileMenu .TopContainer .Heading").text("");
                    }

                }
            }
        });

        $("body").on("click", "#MobileMenu .TopContainer .Heading",
            function () {
                $("#MobileMenu .MenuItem ").removeClass("Open").removeClass("Selected").removeClass("Sibling");
                $("#MobileMenu .Root").addClass("Selected");
                $(this).text("");

            });

        $("body").on("click", "#MobileMenu .CloseMenu",
            function () {
                var canvas = $("#MobileContainerLeft").data("offcanvas-component");
                canvas.close();
            });

    }

    if ($("#SubMenuButton").length > 0) {

        $("#MobileContainerRight").offcanvas({
            modifiers: "right,overlay",
            triggerButton: "#SubMenuButton"
        });


        $("#CloseMobileContainerRight").click(function () {
            var canvas = $("#MobileContainerRight").data("offcanvas-component");
            canvas.close();
        });
    }

    $("#TopSearchInput").enterKey(TopSearchInputCommit, true);
    $(".TopSearchInputButton").click(TopSearchInputCommit);

    $("#TopSearchButton").click(ShowMobileSearch);

    $("#TopSearchContainerOpenButton").click(TopSearchContainerOpenButtonClick);

    var autoOpenMenu = window.location.href.indexOf("?#menu") > 0;
    if (autoOpenMenu) {
        setTimeout(function() {
            $("#OpenMenuButton").trigger("click");
        }, 500);
    }
    


}

function TopSearchContainerOpenButtonClick() {
    $("#PageContainer").toggleClass("TopMobileSearchBarOpen");
    $("#TopMobileSearchBar").toggleClass("Open");
    $("#BrakesSearchInputMobile").focus();
}



function ShowMobileSearch() {
    $("#VehicleSearchOuterContainer").toggleClass("SearchActive");
    $("#VinOuterContainer").toggleClass("SearchActive");
    $("#TopSecondary").toggleClass("SearchActive");
    $("#TopSearchInput").focus();
}


function TopSearchInputCommit() {

    var term = $("#TopSearchInput").val();
    if (term == null) {
        term = "";
    }
    term = term.trim();

    if (term === "" || term.length < 3) {
        ErrorShake($("#TopSearchInput"));
        return;
    }

    term = encodeURIComponent(term);
    window.location = "/sok?q=" + term;
}