$(function(){
    // Navigation
    $("a[href *= '#']:not(.nav-link):not(#menu-toggle)").click(function() {
        var sectionTo = $(this).attr('href');
        closeTerm();
        $("#menu").removeClass("open");
        $("html, body").animate({
          scrollTop: $(sectionTo).offset().top - 100
        }, 250);
    });
    
    // Load any selected mineral on hash change or load
    $(window).on("hashchange", function() {
        loadTerm(window.location.hash);
    });
    
    // Clear hash
    function removeHash () { 
        var scrollV, scrollH, loc = window.location;
        if ("pushState" in history)
            history.pushState("", document.title, loc.pathname + loc.search);
        else {
            // Prevent scrolling by storing the page's current scroll offset
            scrollV = document.body.scrollTop;
            scrollH = document.body.scrollLeft;
    
            loc.hash = "";
    
            // Restore the scroll offset, should be flicker free
            document.body.scrollTop = scrollV;
            document.body.scrollLeft = scrollH;
        }
    }
    
    // Close term modal
    var closeTerm = function(){
        $("#modal").removeClass("open");
        $("#modal-content").empty();
        $("#mask").removeClass("on");
        $("body").removeClass("masked");
        removeHash();
    };
    
    // Load term
    var loadTerm = function(slug) {
        if (slug == "") {
            closeTerm();
            return false;
        }
        
        slug = slug.replace("#", "");
        var url = "/typography/termcontent/" + slug;
        
        $.ajax({
            url: url,
            cache: false,
            success: function(content){
                if (content != "none") {
                    $("#modal-content").html(content);
                    $("#modal").addClass("open");
                    $("#mask").addClass("on");
                    $("body").addClass("masked");
                    $(".tooltip").tooltipster("hide");
                }
            }
        });
    };
    
    loadTerm(window.location.hash);
    
    // Term links
    $("body").on("click touch", "a[href *= '/typography/term/']", function(){
        var url = $(this).attr("href").split("/");
        window.location.hash = url[url.length - 1];
        return false;
    });
    
    // Close links
    $("body").on("click touch", "#mask, #modal-close", function(){
        closeTerm();
    });
    
    // Escape key
    $(document).keyup(function(e) {
         if (e.key === "Escape") {
            closeTerm();
        }
    });
    
    // Letters
    $(".letter-chart .tooltip").tooltipster({
        contentAsHTML: true,
        interactive: true,
        functionAfter: function(origin, tooltip){
            $(origin._$origin[0]).removeClass("on");
        },
        functionBefore: function(instance, helper) {
            var $origin = $(helper.origin);
            var term = $origin.find(".letter-chart-label").text();
            var first = "<br /><span class='first'>First: " + $origin.find(".letter-chart-value.first").attr("title") + "</span>";
            var both = "<br /><span class='both'>Both: " + $origin.find(".letter-chart-value.both").attr("title") + "</span>";
            var second = "<br /><span class='second'>Second: " + $origin.find(".letter-chart-value.second").attr("title") + "</span>";
            instance.content("<strong>" + term.toUpperCase() + "</strong>" + first + both + second);
        },
        functionReady: function(origin, tooltip, offsetTip){
            $(origin._$origin[0]).addClass("on");
        },
		repositionOnScroll: true,
        trigger: "click"
    });
    
    // References
    $("#refs .tooltip").tooltipster({
        contentAsHTML: true,
        functionAfter: function(origin, tooltip){
            $(origin._$origin[0]).removeClass("on");
        },
        functionBefore: function(instance, helper) {
            var $origin = $(helper.origin);
            var sourceSlug = $origin.data("source-slug");
            var source = "<a href='/typography/term/" + sourceSlug + "'>" + $origin.data("source") + "</a>";
            var targetSlug = $origin.data("target-slug");
            var target = "<a href='/typography/term/" + targetSlug + "'>" + $origin.data("target") + "</a>";
            instance.content(source + " &rarr; " + target);
        },
        functionPosition: function(instance, helper, position){
            var $origin = $(helper.origin);
            
            if ($origin.parent().hasClass("second")) {
                var triggerElem = $(instance._$origin[0]);
                var offsetTip = triggerElem[0].getBoundingClientRect().height / 2;
                position.coord.top += offsetTip;
                return position;
            }
        },
        functionReady: function(origin, tooltip, offsetTip){
            $(origin._$origin[0]).addClass("on");
        },
		interactive: true,
		repositionOnScroll: true,
        trigger: "click"
    });
    
    // Tree
    $(".tree .tooltip").tooltipster({
        contentAsHTML: true,
        interactive: true,
        functionAfter: function(origin, tooltip){
            $(origin._$origin[0]).removeClass("on");
        },
        functionBefore: function(instance, helper) {
            var $origin = $(helper.origin);
            var term = $origin.data("term");
            var slug = $origin.data("slug");
            var first = ($origin.data("first") != "") ? "<br /><span class='first'>First edition: " + $origin.data("first") + " words</span>" : "";
            var second = ($origin.data("second") != "") ? "<br /><span class='second'>Second edition: " + $origin.data("second") + " words</span>" : "";
            instance.content("<strong><a href='/typography/term/" + slug + "'>" + term + "</a></strong>" + first + second);
        },
        functionReady: function(origin, tooltip, offsetTip){
            $(origin._$origin[0]).addClass("on");
        },
		repositionOnScroll: true,
        trigger: "click"
    });
    
    // Menu toggle
    $("#menu-toggle").on("touch click", function(){
        closeTerm();
    });
});