<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
    <title><%= title %></title>
    <script src="/javascripts/jquery.min.js"></script>
    <%- include('../../components/common/index') %>
    <script>

    // Initiate Global User Settings

    const userFactory = (() => {

        function UserFactory(){

            let loggedInUser = null;
            let watchedUser = null;
            let currentUser = '';
            let currentContext = '';
            let viewType = 'internal';
            let selfPosted = null;
            let forwardTo = 'https://www.google.com/search?q=';
            let hostSite = '';
            let addContext = '';
            let jsonPath = '';
            let maxNodes = '';
            let most_influential = 'bc';
            let graphPalette = '';
            let walkthroughtype = '';
            let inlanguage = 'auto';
            let in_label_threshold = 8;
            let midi = null;
            let background = null;
            let interpret = null;

            let viewOptions = {};
            let graphOptions = { 
                minnodesize: 5,
                maxnodesize: 16,
                deselected_nodes_color: '#ddd',
                color_context: '#666',
                default_label_color: '#000000',
                color_addcontext: '#666666',
                highlight_addcontext: '#0089e0',
                context_nodes_color: '#4a5e9e', // #6689d0
                forceatlas_options: {worker: false, startingIterations: 100, scalingRatio: 0.1, slowDown: 100, strongGravityMode: true},

            }

            let contextPublic = false;

            let sigma_dragged = '0';


            this.getLoggedInUser = function() {
                return loggedInUser;
            }    
            this.setLoggedInUser = function(name) {
                loggedInUser = name;
            }
            this.isLoggedIn = function() {
                if (loggedInUser && loggedInUser != '') {
                    return true;
                }
                else {
                    return false;
                }
            }

            this.getCurrentUser = function() {
                return currentUser;
            }
            this.setCurrentUser = function(name) {
                currentUser = name;
            }

            this.getCurrentContext = function() {
                return currentContext;
            }
            this.setCurrentContext = function(name) {
                currentContext = name;
            }
            this.isInContext = function() {
                if (currentContext && currentContext != '') {
                    return true;
                }
                else {
                    return false;
                }
            }

            this.getWatchedUser = function() {
                return watchedUser;
            }  
            this.setWatchedUser = function(name) {
                watchedUser = name;
            }

            this.setViewType = function(type) {
                viewType = type;
                return true;
            }
            this.getViewType = function() {
                return viewType;
            }

            this.getSelfPosted = function() {
                return selfPosted;
            }
            this.updateSelfPosted = function(value) {
                selfPosted = value;
                return true;
            }

            this.setForwardTo = function(url) {
                forwardTo = url;
            }          
            this.getForwardTo = function() {
                return forwardTo;
            }  

            this.setHostSite = function(url) {
                hostSite = url;
            }          
            this.getHostSite = function() {
                return hostSite;
            }  

            this.setAddContext = function(name) {
                addContext = name;
            }          
            this.getAddContext = function() {
                return addContext;
            }  

            this.setJsonPath = function(url) {
                jsonPath = url;
            }          
            this.getJsonPath = function() {
                return jsonPath;
            }  

            this.setMaxNodes = function(nodes) {
                maxNodes = nodes;
            }          
            this.getMaxNodes = function() {
                return maxNodes;
            }  

            this.setMostInfluential = function(flag) {
                most_influential = flag;
            }
            this.getMostInfluential = function() {
                return most_influential;
            }

            this.setGraphPalette = function(flag) {
                graphPalette = flag;
            }
            this.getGraphPalette = function() {
                return graphPalette;
            }

            this.setWalkthrough = function(flag) {
                walkthroughtype = flag;
            }
            this.getWalkthrough = function() {
                return walkthroughtype;
            }

            this.setInLanguage = function(lang) {
                inlanguage = lang;
            }
            this.getInLanguage = function() {
                return inlanguage;
            }

            this.setMidi = function(flag) {
                midi = flag;
            }
            this.getMidi = function() {
                return midi;
            }

            this.setBackground = function(type) {
                background = type;
            }
            this.getBackground = function() {
                return background;
            }


            this.setViewOption = function(option, value) {
                viewOptions[option] = value;
            }
            this.getViewOption = function(option) {
                return viewOptions[option];
            }

            this.setInterpret = function(value) {
                if (value && value.length > 0) {
                    interpret = value;
                }
            }
            this.isInterpretOn = function() {
                if (interpret) {
                    return true;
                }
                else {
                    return false;
                }
            }

            this.setGraphOption = function(option,value) {
                if (option == 'abstract' && value != 'no') {
                    graphOptions['abstract'] = 'true';
                    graphOptions['minnodesize'] = 1;
                    graphOptions['maxnodesize'] = 1;
                    graphOptions['in_label_threshold'] = 20;
                }
                else {
                    graphOptions[option] = value;
                }
            }
            this.getGraphOption = function(option) {
                return graphOptions[option];
            }

            this.setContextPublic = function(mode) {
                contextPublic = mode;
            }
            this.isContextPublic = function() {
                return contextPublic;
            }

            this.setSigmaDragged = function(fact) {
                sigma_dragged = fact;
            }
            this.isSigmaDragged = function() {
                if (sigma_dragged && sigma_dragged == '1') {
                    return true;
                }
                else {
                    return false;
                }
            }
            

        }

        return new UserFactory();

    })();


    // Are we logged in?
    <% if (receivername) { %>
    userFactory.setLoggedInUser('<%= receivername %>');
    <% } %> 

    // Set the current user
    userFactory.setCurrentUser(window.location.pathname.replace(/^\/([^\/]*).*$/, '$1'));
    
    // Set the current context
    userFactory.setCurrentContext('<%= context %>');
    
    // Set the current hostsite
    userFactory.setHostSite(window.location.host);

    // default most influential nodes are displayed according to Betwenness Centrality (bc) or Degree (degree)
    userFactory.setMostInfluential('bc');

    // Is the user going to look at somebody else's graph?
    <% if (perceivername) { %>
        // Are we watching somebody else's graph?
        userFactory.setViewType('external');
        userFactory.setWatchedUser('<%= perceivername %>');
        userFactory.setWalkthrough('external');

        <% if (showcontexts && maxnodes) { %>
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?showcontexts=<%= showcontexts %>&maxnodes=<%= maxnodes %>');
        userFactory.setViewOption('showcontexts', true);
        <% } else if (showcontexts) { %>
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?showcontexts=<%= showcontexts %>');
        userFactory.setViewOption('showcontexts', true);
        <% } else if (maxnodes) { %>
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?maxnodes=<%= maxnodes %>');
        <% } else  { %>
        <% if (locals.vieweduser && vieweduser.maxnodes) { %>
        userFactory.setMaxNodes('<%= vieweduser.maxnodes %>');
        <% if (context) { %>
            userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?maxnodes=<%= vieweduser.maxnodes %>');
        <% } else { %>
            userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/?showcontexts=1&maxnodes=<%= vieweduser.maxnodes %>');
            userFactory.setViewOption('showcontexts', true);
        <% } %>
        <% } else { %>
        <% if (context) { %>    
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>');
        <% } else { %>
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/?showcontexts=1');
        userFactory.setViewOption('showcontexts', true);
        <% } %>   
        <% } %>
        <% if (addcontext) { %>   
        userFactory.setJsonPath('/api/public/nodes/<%= perceivername %>/<%= context %>?addcontext=<%= addcontext %>');
        userFactory.setAddContext('<%= addcontext %>');
        <% } %>
    <% } %>
    <% } else { %>
        // Get the setting from user DB how many max nodes we show
        <% if (maxnodes) { %>
        userFactory.setMaxNodes('<%= maxnodes %>');
        <% } %>
        // Path to the JSON graph file (specific context or a general one)
        <% if (addcontext) { %>
        userFactory.setJsonPath('/api/user/nodes/<%= context %>?addcontext=<%= addcontext %>');
        userFactory.setAddContext('<%= addcontext %>');
        <% } else if (showcontexts) { %>
        userFactory.setJsonPath('/api/user/nodes/<%= context %>?showcontexts=<%= showcontexts %>');
        userFactory.setViewOption('showcontexts', true);
        <% } else if (maxnodes) { %>
        userFactory.setJsonPath('/api/user/nodes/<%= context %>?maxnodes=<%= maxnodes %>');
        userFactory.setMaxNodes('<%= maxnodes %>');
        <% } else { %>
        userFactory.setJsonPath('/api/user/nodes/<%= context %>');
        <% }  %>
    <% } %>

    // Define the settings of the logged in user / not logged in user 
    <% if (locals.user && !locals.vieweduser) { %>
    userFactory.setInLanguage('<%= user.inlanguage %>');
        <% if (locals.user.abstract != undefined) { %>
        userFactory.setGraphOption('abstract','<%=locals.user.abstract%>');
        <% } %>
        <% if (locals.user.label_threshold) { %>
        userFactory.setGraphOption('in_label_threshold','<%= user.label_threshold %>');
        <% } %>
        <% if (locals.user.midi) { %>
        userFactory.setMidi('<%= user.midi %>');
        <% } %>
        userFactory.setGraphPalette('<%= user.palette %>');
        <% if (locals.user.maxnodes) { %>
        userFactory.setMaxNodes('<%= user.maxnodes %>');
        <% } %>        
        userFactory.setBackground('<%= user.background %>');
        <% if (locals.user.topnodes) { %>
        userFactory.setMostInfluential('<%= user.topnodes %>');
        <% } %>
    <% } else { %>
        <% if (locals.vieweduser) { %>
            <% if (vieweduser.abstract != undefined) { %>
            userFactory.setGraphOption('abstract','<%=vieweduser.abstract%>');
            <% } %>    
            userFactory.setMostInfluential('<%= vieweduser.topnodes %>');
            userFactory.setGraphOption('in_label_threshold','<%= vieweduser.label_threshold %>');
            userFactory.setGraphPalette('<%= vieweduser.palette %>');
            userFactory.setBackground('<%= vieweduser.background %>');
        <% } %>
    <% } %>   

    <% if (onlygraph == '1' || onlygraph == 'graph') { %>
            userFactory.setViewOption('graphOnly', true);
    <% } %>

    <% if (contextpublic && context) { %>
            userFactory.setContextPublic(true);
    <% } %>    
        
    
    
    // Settings for the general interface view (used for display/embed)
    userFactory.setViewOption('hide_always', getUrlVars()["hide_always"]);
    userFactory.setViewOption('hide_edit', getUrlVars()["hide_edit"]);
    userFactory.setViewOption('hide_max', getUrlVars()["hide_max"]);
    userFactory.setViewOption('show_text', getUrlVars()["show_text"]);
    userFactory.setViewOption('show_analytics', getUrlVars()["analytics"]);
    userFactory.setViewOption('hide_when_small', getUrlVars()["hide_when_small"]);
    userFactory.setViewOption('urlPath', location.pathname);
    userFactory.setViewOption('mute', getUrlVars()["mute"]);

    if (getUrlVars()["link_hashtags"]) userFactory.setViewOption('link_hashtags', getUrlVars()["link_hashtags"]);

    // Important settings for the graph view (used in rendering)
    if (getUrlVars()["language"]) userFactory.setInLanguage(getUrlVars()["language"]);
    if (getUrlVars()["palette"]) userFactory.setGraphPalette(getUrlVars()["palette"]);
    if (getUrlVars()["background"]) {
        userFactory.setBackground(getUrlVars()["background"]);
        // Legacy:
        if (getUrlVars()["background"] == 'graph' || getUrlVars()["background"] == '1') {
            userFactory.setViewOption('graphOnly', true);
        }
    }
    if (getUrlVars()["walkthrough"]) userFactory.setWalkthrough(getUrlVars()["walkthrough"]);
    if (getUrlVars()["forced_walkthrough"] == '1') userFactory.setViewOption('forced_walkthrough', '1');
    if (getUrlVars()["most_influential"] == 'bc' || getUrlVars()["most_influential"] == 'bc2' || getUrlVars()["most_influential"] == 'degree') {
        userFactory.setMostInfluential(getUrlVars()["most_influential"]);
    }

    // Important switch that shows whether we're in the "interpretation" mode where we build one graph on top of another
    if (getUrlVars()["interpret"]) userFactory.setInterpret(getUrlVars()["interpret"]);
    if (getUrlVars()["abstract"]) userFactory.setGraphOption('abstract',getUrlVars()["abstract"]);
    
    // How do we treat highlights on the intersecting graphs?
    if (getUrlVars()["highlight"]) userFactory.setGraphOption('highlight_intersections',getUrlVars()["highlight"]);
    if (getUrlVars()["missing"]) userFactory.setGraphOption('highlight_missing',getUrlVars()["missing"]);

    // Change the theme

    function toggleTheme(e) {
        let was_black = false;
        if(document.documentElement.hasAttribute('theme')){
            was_black = true;
            document.documentElement.removeAttribute('theme');
            userFactory.setGraphOption('default_label_color','#000');    
            localStorage.setItem('background', ''); 
        }
        else {
            document.documentElement.setAttribute('theme', 'dark');
            if (userFactory.getGraphPalette() == 'contrast') {
                userFactory.setGraphOption('deselected_nodes_color','#555');
            }
            else {
                userFactory.setGraphOption('deselected_nodes_color','#444');
            }
            userFactory.setGraphOption('default_label_color','#ffffff');
            localStorage.setItem('background', 'dark');
            
        }
        if (e) {
            if (was_black == true) {
                sigma.instances(0).settings({defaultLabelColor: '#000'});
            }
            else {
                sigma.instances(0).settings({defaultLabelColor: '#fff'});
            }
            sigma.instances(0).refresh();
        }
        
    }

    if (userFactory.getBackground() == 'dark' || (localStorage.getItem('background') && localStorage.getItem('background') != userFactory.getBackground())) {
        toggleTheme();
    }



    </script>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel='stylesheet' href='/stylesheets/jquery.taghandler.css' />
    <link rel="stylesheet" type="text/css" href="/stylesheets/tooltipster.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/tooltipster-noir.css" />
    <% if (speech) { %>
    <script src="/javascripts/talkify.min.js"></script>
    <%  } %>
    <% if (locals.user) { %>
        <% if (locals.user.midi != undefined && locals.user.midi != 'off') { %>
    <script src="/javascripts/webmidi.min.js"></script>
          <%  } %>
    <%  } %>
    <link rel="stylesheet" href="/stylesheets/bootstrap-tour-standalone.min.css" />
    <script src="/javascripts/bootstrap-tour-standalone.min.js"></script>
    
   
</head>