map connection scopes

2014-12-28 17:32:26 +01:00
parent cfa3cfa324
commit 7bcc9ec394
47 changed files with 1574 additions and 643 deletions
--- a/.idea/dictionaries/exodus4d.xml
+++ b/.idea/dictionaries/exodus4d.xml
@@ -4,12 +4,14 @@
      <w>addclass</w>
      <w>bootbox</w>
      <w>contextmenu</w>
+      <w>crosshairs</w>
      <w>cytaclysmic</w>
      <w>dashstyle</w>
      <w>datatables</w>
      <w>deps</w>
      <w>fontawesome</w>
      <w>jqueryui</w>
+      <w>jumpbridge</w>
      <w>killboard</w>
      <w>killmail</w>
      <w>mouseover</w>
--- a/config.rb
+++ b/config.rb
@@ -11,13 +11,14 @@ sass_dir = "sass"
 images_dir = "img"
 generated_images_path = "img_cache"
 javascripts_dir = "javascripts"
+fonts_dir = "fonts"

 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
 output_style = :compressed

 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true

 # To disable debugging comments that display the original location of your selectors. Uncomment:
 line_comments = false
--- a/fonts/Oxygen-Bold.ttf
+++ b/fonts/Oxygen-Bold.ttf
--- a/fonts/Oxygen-Light.ttf
+++ b/fonts/Oxygen-Light.ttf
--- a/fonts/Oxygen-Regular.ttf
+++ b/fonts/Oxygen-Regular.ttf
--- a/fonts/oxygen-bold-webfont.eot
+++ b/fonts/oxygen-bold-webfont.eot
--- a/fonts/oxygen-bold-webfont.ttf
+++ b/fonts/oxygen-bold-webfont.ttf
--- a/fonts/oxygen-bold-webfont.woff
+++ b/fonts/oxygen-bold-webfont.woff
--- a/fonts/oxygen-light-webfont.eot
+++ b/fonts/oxygen-light-webfont.eot
--- a/fonts/oxygen-light-webfont.ttf
+++ b/fonts/oxygen-light-webfont.ttf
--- a/fonts/oxygen-light-webfont.woff
+++ b/fonts/oxygen-light-webfont.woff
--- a/fonts/oxygen-regular-webfont.eot
+++ b/fonts/oxygen-regular-webfont.eot
--- a/fonts/oxygen-regular-webfont.ttf
+++ b/fonts/oxygen-regular-webfont.ttf
--- a/fonts/oxygen-regular-webfont.woff
+++ b/fonts/oxygen-regular-webfont.woff
--- a/index.htm
+++ b/index.htm
@@ -5,6 +5,11 @@
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

+        <meta http-equiv="cache-control" content="public">
+<!--
+        <meta http-equiv="Cache-Control" content="no-store" />
+        <meta http-equiv="Pragma" content="no-cache" />
+        -->
        <meta name="description" content="eve-online wormhole mapping tool">
        <meta name="keywords" content="eve,wormhole,mapping,tool,mmo,space,game,igb">
        <meta name="author" content="Exodus 4D">
--- a/js/app/init.js
+++ b/js/app/init.js
@@ -15,6 +15,24 @@ define(['jquery'], function($) {
            eveCentral: 'http://api.eve-central.com/api/'           // jump rout api
        },
        classes: {
+            // map types
+            mapTypes: {
+                global: {
+                    class: 'pf-map-type-global',
+                    classTab: 'pf-map-type-tab-global',
+                    label: 'Global'
+                },
+                alliance: {
+                    class: 'pf-map-type-alliance',
+                    classTab: 'pf-map-type-tab-alliance',
+                    label: 'Alliance'
+                },
+                private: {
+                    class: 'pf-map-type-private',
+                    classTab: 'pf-map-type-tab-private',
+                    label: 'Private'
+                }
+            },
            // system effects
            systemEffects: {

@@ -156,6 +174,63 @@ define(['jquery'], function($) {
                pieChartMapCounterClass: 'pf-pie-chart-map-timer'   // class for timer chart
            }
        },
+        // map scopes
+        defaultMapScope: 'wh',                                      // default scope for connection
+        mapScopes: {                                                // available scopes for a connection
+            wh: {
+                label: 'wormhole'
+            },
+            stargate: {
+                label: 'stargate'
+            },
+            jumpbridge: {
+                label: 'jumpbridge'
+            }
+        },
+        // map connection types
+        connectionTypes: {
+            jumpbridge: {
+                cssClass: 'pf-map-connection-jumpbridge'
+            },
+            stargate: {
+                cssClass: 'pf-map-connection-stargate'
+            },
+            wh: {
+                cssClass: 'pf-map-connection-wh'
+            },
+            wh_eol: {
+                cssClass: 'pf-map-connection-wh-eol'
+            },
+            wh_reduced: {
+                cssClass: 'pf-map-connection-wh-reduced'
+            },
+            wh_critical: {
+                cssClass: 'pf-map-connection-wh-critical'
+            },
+            frigate: {
+                cssClass: 'pf-map-connection-frig',
+                paintStyle: {
+                    dashstyle: '0.9'
+                },
+                overlays:[
+                    [ 'Label',
+                        {
+                            label: 'frig',
+                            cssClass: ['pf-map-connection-overlay', 'frig'].join(' ')
+                        } ]
+                ]
+            },
+            preserve_mass: {
+                cssClass: 'pf-map-connection-preserve-mass',
+                overlays:[
+                    [ 'Label',
+                        {
+                            label: '<i class="fa fa-warning"></i>&nbsp;save mass',
+                            cssClass: ['pf-map-connection-overlay', 'mass'].join(' ')
+                        } ]
+                ]
+            }
+        },
        // system effects
        systemEffects:{
            wh: {
--- a/js/app/main.js
+++ b/js/app/main.js
@@ -42,6 +42,7 @@ define([
                        effect: 'magnetar',
                        type: 'wh',
                        security: 'C6',
+                        trueSec: -1,
                        status: 'friendly',
                        locked: '1',
                        rally: '0',
@@ -132,17 +133,27 @@ define([
                    {
                        source: 3,
                        target: 4,
-                        type: 'wh'
+                        scope: 'stargate',
+                        type: [
+                            'stargate'
+                        ]
                    },
                    {
                        source: 4,
                        target: 30002979,
-                        type: 'wh'
+                        type: [
+                            'wh',
+                            'wh_critical'
+                        ]
                    },
                    {
                        source: 4,
                        target: 30000142,
-                        type: 'wh'
+                        type: [
+                            'wh',
+                            'wh_eol',
+                            'wh_reduced'
+                        ]
                    }
                ]
            }
@@ -185,7 +196,9 @@ define([
                connections: [{
                    source: 50,
                    target: 51,
-                    type: 'wh'
+                    type: [
+                        'wh'
+                    ]
                }]
            }
        },
--- a/js/app/map/contextmenu.js
+++ b/js/app/map/contextmenu.js
@@ -7,15 +7,36 @@ define(["jquery"], function($) {
        return this.each(function () {

            // Open context menu
-            $(this).on("pf:openContextMenu", function (e, originalEvent, component) {
+            $(this).on("pf:openContextMenu", function (e, originalEvent, component, hiddenOptions, activeOptions) {

+                // hide all other open context menus
+               // $('.dropdown-menu').hide();

+                var contextMenu = $(settings.menuSelector);
+
+                var menuLiElements = contextMenu.find('li');
+
+                // show all menu entries
+                menuLiElements.show();
+
+                // disable specific menu entries
+                for(var i = 0; i < hiddenOptions.length; i++){
+                    contextMenu.find('li[data-action="' + hiddenOptions[i] + '"]').hide();
+                }
+
+                // un activate all menu entries
+                menuLiElements.removeClass('active');
+
+                //set active specific menu entries
+                for(var j = 0; j < activeOptions.length; j++){
+                    contextMenu.find('li[data-action="' + activeOptions[j] + '"]').addClass('active');
+                }

                //open menu
-                $(settings.menuSelector)
+                contextMenu
                    .show()
                    .css({
-                        position: "absolute",
+                        position: 'absolute',
                        left: getLeftLocation(originalEvent),
                        top: getTopLocation(originalEvent)
                    })
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -85,7 +85,7 @@ define([
        source: {
            filter: '.' + config.systemHeadNameClass,
            anchor: 'Continuous',
-            connector: [ 'Bezier', { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
+            connector: [ 'Bezier', { curviness: 40, cssClass: 'pf-map-connection-wh'} ],
            maxConnections: 20,
            allowLoopback:false,
            cssClass: config.endpointSourceClass,
@@ -129,44 +129,10 @@ define([
                return true;
            }
        },
-        connectionTypes: {
-            wh: {
-                cssClass: 'pf-map-connection-wh'
-            },
-            eol: {
-                cssClass: 'pf-map-connection-wh-eol'
-            },
-            wh_reduced: {
-                cssClass: 'pf-map-connection-wh-reduced'
-            },
-            wh_critical: {
-                cssClass: 'pf-map-connection-wh-critical'
-            },
-            frigate: {
-                cssClass: 'pf-map-connection-frig',
-                paintStyle: {
-                    dashstyle: '0.9'
-                },
-                overlays:[
-                    [ 'Label',
-                        {
-                            label: 'frig',
-                            cssClass: ['pf-map-connection-overlay', 'frig'].join(' ')
-                        } ]
-                ]
-            },
-            preserve_mass: {
-                overlays:[
-                    [ 'Label',
-                        {
-                            label: '<i class="fa fa-warning"></i>&nbsp;save mass',
-                            cssClass: ['pf-map-connection-overlay', 'mass'].join(' ')
-                        } ]
-                ]
-            }
-        }
+        connectionTypes: Init.connectionTypes
    };

+
    /**
     * get status class for a user
     * @param status
@@ -198,20 +164,27 @@ define([
        // find expand arrow
        var systemHeadExpand = $( $(system).find('.' + config.systemHeadExpandClass) );

+        system = $(system);

        // remove tooltip
-        $(system).removeAttr('title');
+        system.removeAttr('title');

        // remove all content
        systemBody.empty();

        var userCounter = 0;

+        system.data('currentUser', false);
+
        // if current user is in THIS system trigger event
        if(currentUserData){
+            /* not used jet
            var tabContentElement = getTabContentElementByMapElement(system);

            $(tabContentElement).trigger('pf:highlightTab', [{system: system}]);
+            */
+
+            system.data('currentUser', true);
        }

        // add user information
@@ -249,7 +222,7 @@ define([

        }

-        $(system).removeAttr('title');
+        system.removeAttr('title');

        if(userCounter === 0){
            // hide expand arrow
@@ -351,7 +324,10 @@ define([
            ).data('name', data.name).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' });

        system.data('id', data.id);
+        system.data('name', data.name);
        system.data('status', statusLabel);
+        system.data('effect', data.effect);
+        system.data('trueSec', data.trueSec);
        system.attr('data-mapid', mapContainer.data('id'));

        // locked system
@@ -394,6 +370,7 @@ define([
        // add additional information
        mapContainer.data('id', mapConfig.config.id);
        mapContainer.data('name', mapConfig.config.name);
+        mapContainer.data('type', mapConfig.config.type);

        mapWrapper.append(mapContainer);

@@ -424,7 +401,8 @@ define([

        // get scope from map defaults
        var sourceConfig = globalMapConfig.source;
-        sourceConfig.scope = map.Defaults.Scope;
+        //sourceConfig.scope = map.Defaults.Scope;
+        sourceConfig.scope = 'wh';            // set all allowed connections for this scopes

        map.makeSource(systems, sourceConfig);
    };
@@ -438,7 +416,8 @@ define([

        // get scope from map defaults
        var targetConfig = globalMapConfig.target;
-        targetConfig.scope = map.Defaults.Scope;
+        //targetConfig.scope = map.Defaults.Scope;
+        targetConfig.scope = 'wh';            // set all allowed connections for this scopes

        map.makeTarget(systems, targetConfig);
    };
@@ -516,7 +495,7 @@ define([
                    var connectionData = {
                        source: $(connectSystem).data('id'),
                        target: $(newSystem).data('id'),
-                        type: 'wh'
+                        type: ['wh']
                    };
                    drawConnection(map, connectionData);
                });
@@ -693,20 +672,26 @@ define([
    };

    /**
-     *  get all connections of multiple systems
+     * get all connections of multiple systems
     * @param map
-     * @param systems Array of Systems objectts
-     * @returns {Array} of all connections
+     * @param systems
+     * @returns {Array}
     */
    var getConnections = function(map, systems){

        var connections = [];

+        var withBackConnection = false;
+
        $.each(systems, function(i, system){
            // get connections where system is source
            connections = connections.concat( map.getConnections({source: system}) );
-            // get connections where system is target
-            connections = connections.concat( map.getConnections({target: system}) );
+
+            if(withBackConnection === true){
+                // get connections where system is target
+                connections = connections.concat( map.getConnections({target: system}) );
+            }
+
        });

        return connections;
@@ -724,7 +709,7 @@ define([
        var connections = [];

        connections = connections.concat( map.getConnections({source: systemA, target: systemB}) );
-        // getconnections where system is target
+        // get connections where system is target
        connections = connections.concat( map.getConnections({source: systemB, target: systemA}) );

        return connections;
@@ -738,20 +723,33 @@ define([
     */
    var drawConnection = function(map, connectionData){

+        // connection have the default map Scope scope
+        var scope = map.Defaults.Scope;
+        if(connectionData.scope){
+            scope = connectionData.scope;
+        }
+
        var connection = map.connect({
            source: config.systemIdPrefix + connectionData.source,
            target: config.systemIdPrefix + connectionData.target,
-            type: connectionData.type
-
+            scope: scope
            /* experimental (straight connections)
            anchors: [
                [ "Perimeter", { shape: 'Rectangle' }],
                [ "Perimeter", { shape: 'Rectangle' }]
            ]
            */
-
        });

+        // add connection types
+        if(connectionData.type){
+            for(var i = 0; i < connectionData.type.length; i++){
+                connection.addType(connectionData.type[i]);
+            }
+        }
+
+
+
        // set Observer for new Connection
        setConnectionObserver(map, connection);

@@ -773,7 +771,12 @@ define([
            items: [
                {icon: 'fa-plus', action: 'add_system', text: 'add system'},
                {icon: 'fa-info', action: 'info', text: 'info'},
-                {divider: true},
+                {icon: 'fa-filter', action: 'filter_scope', text: 'filter scope', subitems: [
+                    {subIcon: '', subAction: 'filter_wh', subText: 'wormhole'},
+                    {subIcon: '', subAction: 'filter_stargate', subText: 'stargate'},
+                    {subIcon: '', subAction: 'filter_jumpbridge', subText: 'jumpbridge'}
+                ]},
+                {divider: true, action: 'delete_systems'},
                {icon: 'fa-eraser', action: 'delete_systems', text: 'delete systems'}
            ]
        };
@@ -797,16 +800,22 @@ define([
                {icon: 'fa-info', action: 'info', text: 'info'},
                {icon: 'fa-plane', action: 'frigate', text: 'frigate hole'},
                {icon: 'fa-warning', action: 'preserve_mass', text: 'preserve mass'},
-                {icon: 'fa-reply fa-rotate-180', text: 'change status', subitems: [
-                    {subIcon: 'fa-clock-o', subAction: 'eol', subText: 'toggle EOL'},
+                {icon: 'fa-reply fa-rotate-180', action: 'change_status', text: 'change status', subitems: [
+                    {subIcon: 'fa-clock-o', subAction: 'wh_eol', subText: 'toggle EOL'},
                    {subDivider: true},
                    {subIcon: 'fa-circle', subAction: 'status_fresh', subText: 'stage 0 (fresh)'},
                    {subIcon: 'fa-adjust', subAction: 'status_reduced', subText: 'stage 1 (reduced)'},
                    {subIcon: 'fa-circle-o', subAction: 'status_critical', subText: 'stage 2 (critical)'}

                ]},
-                {divider: true},
-                {icon: 'fa-eraser', action: 'delete', text: 'delete'}
+                {icon: 'fa-crosshairs', action: 'change_scope', text: 'change scope', subitems: [
+                    {subIcon: '', subAction: 'scope_wh', subText: 'wormhole'},
+                    {subIcon: '', subAction: 'scope_stargate', subText: 'stargate'},
+                    {subIcon: '', subAction: 'scope_jumpbridge', subText: 'jumpbridge'}
+
+                ]},
+                {divider: true, action: 'delete_connection'},
+                {icon: 'fa-eraser', action: 'delete_connection', text: 'delete'}
            ]
        };

@@ -842,7 +851,7 @@ define([
                {icon: 'fa-lock', action: 'lock_system', text: 'lock system'},
                {icon: 'fa-users', action: 'set_rally', text: 'set rally point'},
                {icon: 'fa-reply fa-rotate-180', text: 'change status', subitems: systemStatus},
-                {divider: true},
+                {divider: true, action: 'delete_system'},
                {icon: 'fa-eraser', action: 'delete_system', text: 'delete system'}
            ]
        };
@@ -934,9 +943,14 @@ define([
        // trigger context menu
        system.on('contextmenu', function(e){

-            // hide all map tooltips
+            var systemElement = $(this);

-            $(e.target).trigger('pf:openContextMenu', [e, this]);
+            // hide all map tooltips
+            var hideOptions = getHiddenContextMenuOptions(systemElement);
+
+            var activeOptions = getActiveContextMenuOptions(systemElement);
+
+            $(e.target).trigger('pf:openContextMenu', [e, this, hideOptions, activeOptions]);
            e.preventDefault();
            return false;
        });
@@ -953,7 +967,7 @@ define([
                var currentSystem = $(params.component);

                // system name
-                var currentSystemName = currentSystem.getSystemInfo( ['name'] );
+                var currentSystemName = currentSystem.getSystemInfo( ['alias'] );

                switch(action){
                    case 'add_system':
@@ -1037,7 +1051,7 @@ define([
                                $(currentSystem).getMapOverlay().startMapUpdateCounter();


-                                var systemName = currentSystem.getSystemInfo(['name']);
+                                var systemName = currentSystem.getSystemInfo(['alias']);
                                deleteSystem(map, currentSystem);

                                Util.showNotify({title: 'System deleted', text: systemName, type: 'success'});
@@ -1108,7 +1122,7 @@ define([
            }

        }else{
-            var systemName = system.getSystemInfo( ['name'] );
+            var systemName = system.getSystemInfo( ['alias'] );

            Util.showNotify({title: 'System is locked', text: systemName, type: 'error'});
        }
@@ -1149,7 +1163,7 @@ define([
            hideCounter = true;
        }

-        var systemName = system.getSystemInfo( ['name'] );
+        var systemName = system.getSystemInfo( ['alias'] );

        if( system.data( 'locked' ) === true ){
            system.data('locked', false);
@@ -1213,7 +1227,7 @@ define([
            system.data( 'rally', true );

            if(! hideNotification){
-                var systemName = system.getSystemInfo( ['name'] );
+                var systemName = system.getSystemInfo( ['alias'] );

                var notificationOptions = {
                    title: 'New rally Point',
@@ -1265,7 +1279,14 @@ define([
        var container = map.getContainer();

        $(container).on('contextmenu', function(e){
-            $(e.target).trigger('pf:openContextMenu', [e, this]);
+
+            var mapElement = $(this);
+
+            var hideOptions = getHiddenContextMenuOptions(mapElement);
+
+            var activeOptions = getActiveContextMenuOptions(mapElement);
+
+            $(e.target).trigger('pf:openContextMenu', [e, mapElement, hideOptions, activeOptions]);
            e.preventDefault();
            e.stopPropagation();
            return false;
@@ -1293,6 +1314,33 @@ define([
                    case 'add_system':
                        // add new system dialog
                        showNewSystemDialog(currentMap, {position: position});
+                        break;
+                    case 'filter_wh':
+                    case 'filter_stargate':
+                    case 'filter_jumpbridge':
+                        // filter (show/hide)
+                        var filterScope = action.split('_')[1];
+
+                        // scope label
+                        var filterScopeLabel = Util.getScopeInfoForMap(filterScope, 'label');
+
+                        var showScope = true;
+                        if(currentMapElement.data('filter_scope_' + filterScope) !== true){
+                            showScope = false;
+                        }
+                        currentMapElement.data('filter_scope_' + filterScope, ! showScope);
+
+
+                        $.each(currentMap.getConnections(filterScope), function(idx, tempConnection) {
+                            var tempEndpoints = tempConnection.endpoints;
+
+                            for(var i = 0; i < tempEndpoints.length; i++){
+                                tempEndpoints[i].setVisible( showScope );
+                            }
+                        });
+
+                        Util.showNotify({title: 'Scope filter changed', text: filterScopeLabel, type: 'success'});
+
                        break;
                    case 'delete_systems':
                        // delete all selected systems with its connections
@@ -1314,6 +1362,10 @@ define([
                        }

                        break;
+                    case 'info':
+                        // open map info dialog
+                        $(document).triggerMenuEvent('ShowMapInfo');
+                        break;

                }

@@ -1342,6 +1394,7 @@ define([

            },
            onShow: function(){
+                $(document).trigger('pf:closeMenu', [{}]);
            },
            onRefresh: function(){
            }
@@ -1370,8 +1423,100 @@ define([
            Util.showNotify({title: 'Grid snapping', text: notificationText, type: 'info'});

        });
+    };

+    /**
+     * get hidden menu entry options for a context menu
+     * @param component
+     * @returns {Array}
+     */
+    var getHiddenContextMenuOptions = function(component){

+        var hiddenOptions = [];
+
+        if(component instanceof jsPlumb.Connection){
+            // disable connection menu entries
+
+            var scope = component.scope;
+
+            if(scope === 'stargate'){
+                hiddenOptions.push('frigate');
+                hiddenOptions.push('preserve_mass');
+                hiddenOptions.push('change_status');
+
+                hiddenOptions.push('scope_stargate');
+            }else if(scope === 'jumpbridge'){
+                hiddenOptions.push('frigate');
+                hiddenOptions.push('change_status');
+                hiddenOptions.push('scope_jumpbridge');
+            }else if(scope === 'wh'){
+                hiddenOptions.push('scope_wh');
+            }
+
+        }else if( component.hasClass(config.systemClass) ){
+            // disable system menu entries
+            if(component.data('locked') === true){
+                hiddenOptions.push('delete_system');
+            }
+        }
+
+        return hiddenOptions;
+    };
+
+    /**
+     * get active menu entry options for a context menu
+     * @param component
+     * @returns {Array}
+     */
+    var getActiveContextMenuOptions = function(component){
+
+        var activeOptions = [];
+
+        if(component instanceof jsPlumb.Connection){
+            var scope = component.scope;
+
+            if(component.hasType('wh_eol') === true){
+                activeOptions.push('wh_eol');
+            }
+
+            if(component.hasType('frigate') === true){
+                activeOptions.push('frigate');
+            }
+            if(component.hasType('preserve_mass') === true){
+                activeOptions.push('preserve_mass');
+            }
+            if(component.hasType('wh_reduced') === true){
+                activeOptions.push('status_reduced');
+            }else if(component.hasType('wh_critical') === true){
+                activeOptions.push('status_critical');
+            }else{
+                // not reduced is default
+                activeOptions.push('status_fresh');
+
+            }
+
+        }else if( component.hasClass(config.mapClass) ){
+            // active map menu entries
+            if(component.data('filter_scope_wh') === true){
+                activeOptions.push('filter_wh');
+            }
+            if(component.data('filter_scope_stargate') === true){
+                activeOptions.push('filter_stargate');
+            }
+            if(component.data('filter_scope_jumpbridge') === true){
+                activeOptions.push('filter_jumpbridge');
+            }
+        }else if( component.hasClass(config.systemClass) ){
+            // active system menu entries
+            if(component.data('locked') === true){
+                activeOptions.push('lock_system');
+            }
+            if(component.data('rally') === true){
+                activeOptions.push('set_rally');
+            }
+        }
+
+        return activeOptions;
    };

    /**
@@ -1381,9 +1526,18 @@ define([
     */
    var setConnectionObserver = function(map, connection){

+        // get map container
+        var mapElement = $( map.getContainer() );
+
        connection.bind('contextmenu', function(component, e) {
            // trigger menu "open
-            $(e.target).trigger('pf:openContextMenu', [e, component]);
+
+            // get invisible menu entries
+            var hideOptions = getHiddenContextMenuOptions(component);
+
+            var activeOptions = getActiveContextMenuOptions(component);
+
+            $(e.target).trigger('pf:openContextMenu', [e, component, hideOptions, activeOptions]);
            e.preventDefault();
            e.stopPropagation();
            return false;
@@ -1394,45 +1548,92 @@ define([
         *  must be triggered manually on demand
         */

-        $('path').contextMenu({
+        $(connection.canvas).contextMenu({
            menuSelector: "#" + config.connectionContextMenuId,
            menuSelected: function (params){

                var action = params.selectedMenu.attr('data-action');
                var activeConnection = params.component;
+                var activeScope = activeConnection.scope;
+                var activeScopeName = Util.getScopeInfoForMap(activeScope, 'label');

                switch(action){
-                    case 'delete':
+                    case 'delete_connection':
                        // delete a single connection

                        // confirm dialog
                        bootbox.confirm('Is this connection really gone?', function(result) {
                            if(result){
+                                mapElement.getMapOverlay().startMapUpdateCounter();
+
                                map.detach(params.component);
                            }
                        });
                        break;
                    case 'frigate':         // set as frigate hole
                    case 'preserve_mass':   // set "preserve mass
-                    case 'eol':             // set "end of life"
+                    case 'wh_eol':          // set "end of life"
+
+                        mapElement.getMapOverlay().startMapUpdateCounter();
+
                        activeConnection.toggleType( action );
                        // for some reason  a new observer is needed ?!
                        setConnectionObserver(map, activeConnection);
                        break;
                    case 'status_fresh':
+
+                        mapElement.getMapOverlay().startMapUpdateCounter();
+
                        activeConnection.removeType('wh_reduced');
                        activeConnection.removeType('wh_critical');
                        setConnectionObserver(map, activeConnection);
                        break;
                    case 'status_reduced':
+
+                        mapElement.getMapOverlay().startMapUpdateCounter();
+
                        activeConnection.removeType('wh_critical');
                        activeConnection.addType('wh_reduced');
                        setConnectionObserver(map, activeConnection);
                        break;
                    case 'status_critical':
+
+                        mapElement.getMapOverlay().startMapUpdateCounter();
+
                        activeConnection.removeType('wh_reduced');
                        activeConnection.addType('wh_critical');
                        setConnectionObserver(map, activeConnection);
+                        break;
+                    case 'scope_wh':
+                    case 'scope_stargate':
+                    case 'scope_jumpbridge':
+
+                        var newScope = action.split('_')[1];
+                        var newScopeName =  Util.getScopeInfoForMap( newScope, 'label');
+
+                        bootbox.confirm('Change scope from ' + activeScopeName + ' to ' + newScopeName + '?', function(result) {
+                            if(result){
+
+                                mapElement.getMapOverlay().startMapUpdateCounter();
+
+                                // remove all connection types
+                                activeConnection.clearTypes();
+
+                                // set new new connection type
+                                activeConnection.addType(newScope);
+
+                                // change scope
+                                activeConnection.scope = newScope;
+
+                                var scopeLabel = Util.getScopeInfoForMap(newScope, 'label');
+
+                                setConnectionObserver(map, activeConnection);
+
+                                Util.showNotify({title: 'Connection scope changed', text: 'New scope: ' + scopeLabel, type: 'success'});
+
+                            }
+                        });
+
                        break;
                    case 'info':
                        console.log('info');
@@ -1441,6 +1642,7 @@ define([

            }
        });
+
    };

    /**
@@ -1470,8 +1672,8 @@ define([

        for(var i = 0; i < info.length; i++){
            switch(info[i]){
-                case 'name':
-                    // get current system name/alias
+                case 'alias':
+                    // get current system alias
                    systemInfo.push( $(this).find('.' + config.systemHeadNameClass).text() );
                    break;
                default:
@@ -1497,6 +1699,8 @@ define([
     */
    var showNewSystemDialog = function(map, options){

+        var mapContainer = $(map.getContainer());
+
        // format system status for form select
        var systemStatus = {};

@@ -1533,7 +1737,7 @@ define([
                            className: 'btn-primary',
                            callback: function () {

-                                $(options.sourceSystem).getMapOverlay().startMapUpdateCounter();
+                                mapContainer.getMapOverlay().startMapUpdateCounter();

                                // get form Values
                                var form = $('#' + config.systemDialogId).find('form');
@@ -1606,17 +1810,17 @@ define([
        if(typeof activeInstances[mapId] !== 'object'){
            // create new instance
            activeInstances[mapId] =  jsPlumb.getInstance({
-                Container: null, // will be set as soon as container is connected to DOM
+                Container: null,                                                                // will be set as soon as container is connected to DOM
                PaintStyle:{
-                    lineWidth: 4, //  width of a Connector's line. An integer.
-                    strokeStyle: 'red', // color for a Connector
-                    outlineColor: 'red', // color of the outline for an Endpoint or Connector. see fillStyle examples.
-                    outlineWidth: 2 // width of the outline for an Endpoint or Connector. An integer.
+                    lineWidth: 4,                                                               //  width of a Connector's line. An integer.
+                    strokeStyle: 'red',                                                         // color for a Connector
+                    outlineColor: 'red',                                                        // color of the outline for an Endpoint or Connector. see fillStyle examples.
+                    outlineWidth: 2                                                             // width of the outline for an Endpoint or Connector. An integer.
                },
                Connector:[ 'Bezier', { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
-                Endpoint : ['Dot', {radius: 6}]
+                Endpoint : ['Dot', {radius: 6}],
                // Endpoint: 'Blank', // does not work... :(
-                // Scope: mapConfig.config.scope
+                Scope: Init.defaultMapScope                                                     // default map scope for connections
            });

            console.log('new jsPlumbInstance: ' + mapId);
@@ -1680,6 +1884,8 @@ define([

        var mapElement = $(this);

+        var map = getMapInstance( mapElement.data('id') );
+
        var mapData = {};

        // check if there is an active map counter that prevents collecting map data
@@ -1688,30 +1894,38 @@ define([

        var interval = counterChart.data('interval');

+
        if(! interval){
            // map config ---------------------------------
            var mapConfig = {};
            mapConfig.id = mapElement.data('id');
            mapConfig.name = mapElement.data('name');
+            mapConfig.type = mapElement.data('type');
            mapData.config = mapConfig;

            // map data -----------------------------------
            var data = {};

-            // systems ------------------------------------
+
            var systemsData = [];

            var systems = mapElement.find('.' + config.systemClass);

            for(var i = 0; i < systems.length; i++){

+                // systems data ------------------------------------
+
                var tempSystem = $(systems[i]);
                var systemData = {};
                systemData.id = tempSystem.data('id');
-                systemData.alias = tempSystem.find('.' + config.systemHeadNameClass).editable('getValue', true);
+                systemData.name = tempSystem.data('name');
+                systemData.alias = tempSystem.getSystemInfo(['alias']);
                systemData.status = tempSystem.data('status');
+                systemData.effect = tempSystem.data('effect');
+                systemData.trueSec = tempSystem.data('trueSec');
                systemData.locked = tempSystem.data('locked');
                systemData.rally = tempSystem.data('rally');
+                systemData.currentUser = tempSystem.data('currentUser');

                // position -------------------------------
                var positionData = {};
@@ -1731,9 +1945,27 @@ define([
            data.systems = systemsData;

            // connections --------------------------------
-            var connections = [];
+            var connections = map.getAllConnections();
+            var connectionsFormatted = [];
+            // format connections
+            for(var j = 0; j < connections.length; j++){

-            data.connections = connections;
+                var source = $(connections[j].source);
+                var target = $(connections[j].target);
+
+                var connection = {
+                    source: source.data('id'),
+                    sourceName: source.data('name'),
+                    target: target.data('id'),
+                    targetName: target.data('name'),
+                    scope: connections[j].scope,
+                    type: connections[j].getType()
+                };
+
+                connectionsFormatted.push(connection);
+            }
+
+            data.connections = connectionsFormatted;

            mapData.data = data;
        }else{
@@ -2037,10 +2269,6 @@ define([

        return this.each(function () {

-            // remove previous dragging capability
-            $(this).destroySystemDraggable();
-
-
            $(this).draggable(options, {
                start: function (e, ui) {
                    // drag start
--- a/js/app/module_map.js
+++ b/js/app/module_map.js
@@ -61,14 +61,6 @@ define([
        sigTableEditSigNameSelect: 'pf-sig-table-edit-name-select',             // class for editable fields (select)
        sigTableCounterClass: 'pf-sig-table-counter',                           // class for signature table counter

-        // map types
-        mapTypes: [
-            {type: 'default', label: 'default', class: 'pf-map-type-default'},
-            {type: 'global', label: 'global', class: 'pf-map-type-global'},
-            {type: 'alliance', label: 'alliance', class: 'pf-map-type-alliance'},
-            {type: 'private', label: 'private', class: 'pf-map-type-private'}
-        ],
-
        // map scopes
        mapScopes: [
            {scope: 'wormhole', label: 'W-Space'}
@@ -83,9 +75,6 @@ define([
            {class: 'fa-rocket', label: 'rocket'}
        ]

-
-
-
    };

    var cache = {
@@ -93,24 +82,6 @@ define([
        systemKillsGraphData: {} // data for system kills info graph
    };

-    /**
-     * get map type class for a type
-     * @param type
-     * @returns {string}
-     */
-    var getMapTypeClassForType = function(type){
-
-        var typeClass= '';
-
-        $.each(config.mapTypes, function(i, typeData){
-            if(typeData.type === type){
-               typeClass = typeData.class;
-            }
-        });
-
-        return typeClass;
-    };
-
    /**
     * shows the add new map dialog
     */
@@ -155,7 +126,7 @@ define([
            id: config.newMapDialogId,
            title: 'Add new map',
            scope: config.mapScopes,
-            type: config.mapTypes,
+            type: Util.getMapTypes(),
            icon: config.mapIcons
        };

@@ -230,12 +201,11 @@ define([
                drawSystemInfoElement($( e.target ), systemInfoData);
            });

-            // highlite a mapTab
+            // highlight a mapTab
            $(this).on('pf:highlightTab', function(e, data){
                // update Tab Content with system data information

-                // not used jet
-                // highlightTab(e.target, data);
+                highlightTab(e.target, data);

            });

@@ -1975,7 +1945,7 @@ define([
                index: i,
                name: data.config.name,
                icon: data.config.icon,
-                tabClass: [config.mapTabClass, getMapTypeClassForType( data.config.type) ].join(' '),
+                tabClass: [config.mapTabClass, Util.getInfoForMap( data.config.type, 'classTab') ].join(' '),
                contentClass: config.mapTabContentClass,
                active: active
            });
@@ -1987,7 +1957,7 @@ define([
            index: -1,
            name: 'add',
            icon: 'fa-plus',
-            tabClass: [config.mapTabClass, getMapTypeClassForType('default')].join(' '),
+            tabClass: [config.mapTabClass, Util.getInfoForMap( 'default', 'classTab') ].join(' '),
            contentClass: config.mapTabContentClass,
            pullRight: true
        });
--- a/js/app/page.js
+++ b/js/app/page.js
@@ -44,10 +44,15 @@ define([
        // jump info dialog
        jumpInfoDialogClass: 'pf-jump-info-dialog',                             // class for jump info dialog

-        // map legend dialog
-        mapLegendScrollspyId: 'pf-legend-scrollspy',                            // id for map legend scrollspy
-        mapLegendScrollspyNavClass: 'pf-legend-scrollspy-nav',                  // class for map legend scrollspy navigation
-        mapLegendNavigationListItemClass: 'pf-legend-navigation-list-item',     // class for map legend li main navigation elements
+        // map manual dialog
+        mapManualScrollspyId: 'pf-manual-scrollspy',                            // id for map manual scrollspy
+        mapManualScrollspyNavClass: 'pf-manual-scrollspy-nav',                  // class for map manual scrollspy navigation
+        mapManualNavigationListItemClass: 'pf-manual-navigation-list-item',     // class for map manual li main navigation elements
+
+        // map info dialog
+        mapInfoSystemsId: 'pf-map-info-systems',                                // id for map info systems box
+        mapInfoConnectionsId: 'pf-map-info-connections',                        // id for map info connections box
+        mapInfoTableClass: 'pf-map-info-table',                                 // class for data

        // helper element
        dynamicElementWrapperId: 'pf-dialog-wrapper'
@@ -126,6 +131,17 @@ define([
                                class: 'fa fa-home fa-fw'
                            })
                        )
+                ).append(
+                    $('<a>', {
+                        class: 'list-group-item',
+                        href: '#'
+                    }).html('&nbsp;&nbsp;Manual').prepend(
+                            $('<i>',{
+                                class: 'fa fa-info fa-fw'
+                            })
+                        ).on('click', function(){
+                            $(document).triggerMenuEvent('Manual', {button: this});
+                        })
                ).append(
                    $('<a>', {
                        class: 'list-group-item',
@@ -180,6 +196,17 @@ define([
            $('<div>', {
                class: 'list-group'
            }).append(
+                    $('<a>', {
+                        class: 'list-group-item',
+                        href: '#'
+                    }).html('&nbsp;&nbsp;Info').prepend(
+                            $('<i>',{
+                                class: 'fa fa-info fa-fw'
+                            })
+                        ).on('click', function(){
+                            $(document).triggerMenuEvent('ShowMapInfo');
+                        })
+                ).append(
                    $('<a>', {
                        class: 'list-group-item',
                        href: '#'
@@ -190,17 +217,6 @@ define([
                        ).on('click', function(){
                            $('#' + config.mapModuleId).getActiveMap().triggerMenuEvent('Grid', {button: this});
                        })
-                ).append(
-                    $('<a>', {
-                        class: 'list-group-item',
-                        href: '#'
-                    }).html('&nbsp;&nbsp;Legend').prepend(
-                            $('<i>',{
-                                class: 'fa fa-info fa-fw'
-                            })
-                        ).on('click', function(){
-                            $(document).triggerMenuEvent('Legend', {button: this});
-                        })
                )
        );
    };
@@ -239,6 +255,12 @@ define([
                    $('.' + config.headMapClass).on('click', function() {
                        slideMenu.slidebars.toggle('right');
                    });
+
+                    $(document).on('pf:closeMenu', function(e){
+                        // close all menus
+                        slideMenu.slidebars.close();
+                    });
+
                }
            }
        };
@@ -296,34 +318,305 @@ define([
            notificationTest();
        });

-        $(document).on('pf:menuLegend', function(e){
-            // show map legend
-            showMaplegend();
+        $(document).on('pf:menuManual', function(e){
+            // show map manual
+            showMapManual();
+        });
+
+        $(document).on('pf:menuShowMapInfo', function(e){
+            // show map information dialog
+            showMapInfoDialog();
        });

-        showMaplegend();
    };

    /**
-     * shows the map legend modal dialog
+     * shows the map information modal dialog
+     * @param mapData
     */
-    var showMaplegend = function(){
+    var showMapInfoDialog = function(){

-        requirejs(['text!templates/modules/map_legend_dialog.html', 'lib/mustache'], function(template, Mustache) {
+        var mapData = $('#' + config.mapModuleId).getActiveMap().getMapData();

+        requirejs(['text!templates/modules/map_info_dialog.html', 'lib/mustache'], function(template, Mustache) {
+
+            console.log(mapData)
            var data = {
-                scrollspyId: config.mapLegendScrollspyId,
-                scrollspyNavClass: config.mapLegendScrollspyNavClass,
-                scrollspyNavLiClass: config.mapLegendNavigationListItemClass,
-                pieChartClass : Init.classes.pieChart.pieChartMapCounterClass,
-                mapCounterClass : Init.classes.pieChart.pieChartMapCounterClass
+                mapInfoSystemsId: config.mapInfoSystemsId,
+                mapInfoConnectionsId: config.mapInfoConnectionsId,
+                mapDataConfig: mapData.config,
+                mapName: mapData.config.name,
+                mapTypeClass: Util.getInfoForMap( mapData.config.type, 'class'),
+                mapTypeLabel: Util.getInfoForMap( mapData.config.type, 'label')
            };

            var content = Mustache.render(template, data);

+            var mapInfoDialog = bootbox.dialog({
+                title: 'Map information',
+                message: content,
+                buttons: {
+                    success: {
+                        label: 'close',
+                        className: 'btn-primary',
+                        callback: function() {
+                            $(mapInfoDialog).modal('hide');
+                        }
+                    }
+                }
+            });
+
+            mapInfoDialog.on('shown.bs.modal', function(e) {
+                // modal on open
+
+                var systemsElement = $('#' + config.mapInfoSystemsId);
+                var connectionsElement = $('#' + config.mapInfoConnectionsId);
+
+                var loadingOptions = {
+                    icon: {
+                        size: 'fa-2x'
+                    }
+                };
+
+
+                var systemTable = $('<table>', {
+                    class: ['compact', 'stripe', 'order-column', 'row-border', config.mapInfoTableClass].join(' ')
+                });
+                systemsElement.append(systemTable);
+
+                systemsElement.showLoadingAnimation(loadingOptions);
+
+                var connectionTable = $('<table>', {
+                    class: ['compact', 'stripe', 'order-column', 'row-border', config.mapInfoTableClass].join(' ')
+                });
+                connectionsElement.append(connectionTable);
+
+                connectionsElement.showLoadingAnimation(loadingOptions);
+
+                // systems table ==================================================
+
+                // prepare data for dataTables
+                var systemsData = [];
+                for(var i = 0; i < mapData.data.systems.length; i++){
+                    var tempSystemData = mapData.data.systems[i];
+
+                    var tempData = [];
+
+                    // current position
+                    if(tempSystemData.currentUser === true){
+                        tempData.push( '<i class="fa fa fa-map-marker fa-lg fa-fw"></i>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    tempData.push( tempSystemData.name );
+
+                    if( tempSystemData.name !== tempSystemData.alias){
+                        tempData.push( tempSystemData.alias );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    // status
+                    var systemStatusClass = Util.getStatusInfoForSystem(tempSystemData.status, 'class');
+                    if(systemStatusClass !== ''){
+                        tempData.push( '<i class="fa fa fa-square-o fa-lg fa-fw ' + systemStatusClass + '"></i>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    // effect
+                    var systemEffectClass = Util.getEffectInfoForSystem(tempSystemData.effect, 'class');
+                    if(systemEffectClass !== ''){
+                        tempData.push( '<i class="fa fa fa-square fa-lg fa-fw ' + systemEffectClass + '"></i>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    // trueSec
+                    var systemTrueSecClass = Util.getTrueSecClassForSystem(tempSystemData.trueSec);
+                    if(systemTrueSecClass !== ''){
+                        tempData.push( '<span class="' + systemTrueSecClass + '">' + tempSystemData.trueSec.toFixed(1) + '</span>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    // locked
+                    if(tempSystemData.locked === true){
+                        tempData.push( '<i class="fa fa-lock fa-lg fa-fw"></i>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    // rally point
+                    if(tempSystemData.rally === true){
+                        tempData.push( '<i class="fa fa-users fa-lg fa-fw"></i>' );
+                    }else{
+                        tempData.push( '' );
+                    }
+
+                    systemsData.push(tempData);
+                }
+
+                var systemsDataTable = systemTable.dataTable( {
+                    paging: false,
+                    ordering: true,
+                    order: [ 0, 'desc' ],
+                    autoWidth: false,
+                    hover: false,
+                    data: systemsData,
+                    columnDefs: [],
+                    language: {
+                        emptyTable:  'Map is empty',
+                        zeroRecords: 'No systems found',
+                        lengthMenu:  'Show _MENU_ systems',
+                        info:        'Showing _START_ to _END_ of _TOTAL_ systems'
+                    },
+                    columns: [
+                        {
+                            title: '<i class="fa fa fa-map-marker fa-lg"></i>',
+                            width: '15px',
+                            searchable: false
+                        },{
+                            title: 'system',
+                            width: '50px'
+                        },{
+                            title: 'alias'
+                        },{
+                            title: 'status',
+                            width: '30px',
+                            class: 'text-center',
+                            orderable: false,
+                            searchable: false
+                        },{
+                            title: 'effect',
+                            width: '30px',
+                            class: 'text-center',
+                            orderable: false,
+                            searchable: false
+                        },{
+                            title: 'sec.',
+                            width: '20px',
+                            class: 'text-center',
+                            orderable: false,
+                            searchable: false
+                        },{
+                            title: '<i class="fa fa-lock fa-lg fa-fw"></i>',
+                            width: '30px',
+                            class: 'text-center',
+                            searchable: false
+                        },{
+                            title: '<i class="fa fa-users fa-lg fa-fw"></i>',
+                            width: '30px',
+                            className: 'text-center',
+                            searchable: false
+                        }
+                    ]
+                });
+
+                systemsElement.hideLoadingAnimation();
+
+                // connections table ==================================================
+
+                // prepare data for dataTables
+                var connectionData = [];
+                for(var j = 0; j < mapData.data.connections.length; j++){
+                    var tempConnectionData = mapData.data.connections[j];
+
+                    var tempConData = [];
+
+                    tempConData.push( Util.getScopeInfoForMap( tempConnectionData.scope, 'label') );
+
+                    // source system name
+                    tempConData.push( tempConnectionData.sourceName );
+
+                    // connection
+                    var connectionClasses = [];
+                    for(var k = 0; k < tempConnectionData.type.length; k++){
+                        connectionClasses.push( Util.getConnectionInfo( tempConnectionData.type[k], 'cssClass') );
+
+                    }
+
+                    connectionClasses = connectionClasses.join(' ');
+
+                    tempConData.push( '<div class="pf-fake-connection ' + connectionClasses + '"></div>' );
+
+
+                    tempConData.push( tempConnectionData.targetName );
+
+                    connectionData.push(tempConData);
+                }
+
+                var connectionDataTable = connectionTable.dataTable( {
+                    paging: false,
+                    ordering: true,
+                    order: [ 0, 'desc' ],
+                    autoWidth: false,
+                    hover: false,
+                    data: connectionData,
+                    columnDefs: [],
+                    language: {
+                        emptyTable:  'No connections',
+                        zeroRecords: 'No connections found',
+                        lengthMenu:  'Show _MENU_ connections',
+                        info:        'Showing _START_ to _END_ of _TOTAL_ connections'
+                    },
+                    columns: [
+                        {
+                            title: 'scope',
+                            width: '50px',
+                            orderable: false
+                        },{
+                            title: 'source system'
+                        },{
+                            title: 'connection',
+                            width: '80px',
+                            class: 'text-center',
+                            orderable: false,
+                            searchable: false
+                        },{
+                            title: 'target system'
+                        }
+                    ]
+                });
+
+
+                connectionsElement.hideLoadingAnimation();
+
+
+            });
+
+        });
+
+    };
+
+    /**
+     * shows the map manual modal dialog
+     */
+    var showMapManual = function(){
+
+        requirejs(['text!templates/modules/map_manual_dialog.html', 'lib/mustache'], function(template, Mustache) {
+
+            var data = {
+                scrollspyId: config.mapManualScrollspyId,
+                scrollspyNavClass: config.mapManualScrollspyNavClass,
+                scrollspyNavLiClass: config.mapManualNavigationListItemClass,
+                pieChartClass : Init.classes.pieChart.pieChartMapCounterClass,
+                mapCounterClass : Init.classes.pieChart.pieChartMapCounterClass,
+
+                mapTypeGlobalClass: Util.getInfoForMap( 'global', 'class'),
+                mapTypeGlobalLabel: Util.getInfoForMap( 'global', 'label'),
+                mapTypeAllianceClass: Util.getInfoForMap( 'alliance', 'class'),
+                mapTypeAllianceLabel: Util.getInfoForMap( 'alliance', 'label'),
+                mapTypePrivateClass: Util.getInfoForMap( 'private', 'class'),
+                mapTypePrivateLabel: Util.getInfoForMap( 'private', 'label')
+            };
+
+
+            var content = Mustache.render(template, data);
            // show dialog
-            var mapLegendDialog = bootbox.dialog({
-                title: 'Map legend',
+            var mapManualDialog = bootbox.dialog({
+                title: 'Pathfinder manual',
                message: content,
                className: 'medium',
                buttons: {
@@ -331,20 +624,55 @@ define([
                        label: 'close',
                        className: "btn-primary",
                        callback: function() {
-                            $(mapLegendDialog).modal('hide');
+                            $(mapManualDialog).modal('hide');
                        }
                    }
                },
                show: false
            });

-            mapLegendDialog.modal('show');
+            mapManualDialog.modal('show');

-            mapLegendDialog.on('shown.bs.modal', function(e) {
-                // modal os open
+            // modal offset top
+            var modalOffsetTop = 200;
+
+            // disable on scroll event
+            var disableOnScrollEvent = false;
+
+            // scroll breakpoints
+            var scrolLBreakpointElements = null;
+            // scroll navigation links
+            var scrollNavLiElements = null;
+
+            mapManualDialog.on('shown.bs.modal', function(e) {
+                // modal on open
+                scrolLBreakpointElements = $('.pf-manual-scroll-break');
+                scrollNavLiElements = $('.' + config.mapManualNavigationListItemClass);
            });

-            var scrollspyElement = $('#' + config.mapLegendScrollspyId);
+            var scrollspyElement = $('#' + config.mapManualScrollspyId);
+
+            var whileScrolling = function(){
+
+                if(disableOnScrollEvent === false){
+                    for(var i = 0; i < scrolLBreakpointElements.length; i++){
+                        var offset = $(scrolLBreakpointElements[i]).offset().top;
+
+                        if( (offset - modalOffsetTop) > 0){
+
+                            if(! $( scrollNavLiElements[i]).hasClass('active')){
+                                // remove all active classes
+                                scrollNavLiElements.removeClass('active');
+                                // remove focus on links
+                                scrollNavLiElements.find('a').blur();
+
+                                $( scrollNavLiElements[i]).addClass('active');
+                            }
+                            break;
+                        }
+                    }
+                }
+            };

            // init scrollbar
            scrollspyElement.mCustomScrollbar({
@@ -366,7 +694,7 @@ define([
                        scrollspyElement.find('.' + data.mapCounterClass).initMapUpdateCounter();

                        // set navigation button observer
-                        var mainNavigationLinks = $('.' + config.mapLegendScrollspyNavClass).find('a');
+                        var mainNavigationLinks = $('.' + config.mapManualScrollspyNavClass).find('a');
                        // text anchor links
                        var subNavigationLinks = scrollspyElement.find('a[data-target]');

@@ -375,15 +703,21 @@ define([
                        navigationLinks.on('click', function(e){
                            e.preventDefault();

+                            disableOnScrollEvent = true;
+
                            // scroll to anchor
                            scrollspyElement.mCustomScrollbar("scrollTo", $(this).attr('data-target'));

-                            var mainNavigationLiElement = $(this).parent('.' + config.mapLegendNavigationListItemClass);
+                            var mainNavigationLiElement = $(this).parent('.' + config.mapManualNavigationListItemClass);
+
+
+                            whileScrolling();

                            // if link is a main navigation link (not an anchor link)
+
                            if(mainNavigationLiElement.length > 0){
                                // remove all active classes
-                                $('.' + config.mapLegendScrollspyNavClass).find('li').removeClass('active');
+                                scrollNavLiElements.removeClass('active');

                                // set new active class
                                $(this).parent().addClass('active');
@@ -391,7 +725,13 @@ define([

                        });

-                    }
+                    },
+                    onScroll: function(){
+                        disableOnScrollEvent = false;
+
+                        whileScrolling();
+                    },
+                    whileScrolling: whileScrolling
                },
                mouseWheel:{
                    enable: true,
@@ -403,8 +743,6 @@ define([
                autoDraggerLength: true
            });

-
-
        });

    };
@@ -413,7 +751,14 @@ define([
     * shows a test notification for desktop messages
     */
    var notificationTest = function(){
-        Util.showNotify({title: 'Test Notification', text: 'Accept browser security question'}, {desktop: true, stack: 'barBottom'});
+        Util.showNotify({
+            title: 'Test Notification',
+            text: 'Accept browser security question'},
+            {
+                desktop: true,
+                stack: 'barBottom'
+            }
+        );
    };

    /**
--- a/js/app/util.js
+++ b/js/app/util.js
@@ -21,7 +21,19 @@ define([
    /**
     * displays a loading indicator on an element
     */
-    $.fn.showLoadingAnimation = function(){
+    $.fn.showLoadingAnimation = function(options){
+
+        var iconSize = 'fa-lg';
+
+        if(options){
+            if(options.icon){
+                if(options.icon.size){
+                    iconSize = options.icon.size;
+                }
+            }
+
+        }
+
        var overlay = $('<div>', {
            class: config.ajaxOverlayClass
        }).append(
@@ -29,7 +41,7 @@ define([
                class: [config.ajaxOverlayWrapperClass].join(' ')
            }).append(
                $('<i>', {
-                    class: ['fa', 'fa-lg', 'fa-circle-o-notch', 'fa-spin'].join(' ')
+                    class: ['fa', iconSize, 'fa-circle-o-notch', 'fa-spin'].join(' ')
                })
            )
        );
@@ -152,6 +164,74 @@ define([

    };

+    /**
+     * get all available map Types
+     * @returns {Array}
+     */
+    var getMapTypes = function(){
+
+        var mapTypes = [];
+
+        $.each(Init.classes.mapTypes, function(prop, data){
+            var tempData = {
+                type: prop,
+                label: data.label
+            };
+
+            mapTypes.push(tempData);
+        });
+
+        return mapTypes;
+    };
+
+    /**
+     * get map info
+     * @param mapType
+     * @param option
+     * @returns {string}
+     */
+    var getInfoForMap = function(mapType, option){
+
+        var mapInfo = '';
+
+        if(Init.classes.mapTypes.hasOwnProperty(mapType)){
+            mapInfo = Init.classes.mapTypes[mapType][option];
+        }
+
+        return mapInfo;
+    };
+
+    /**
+     * get all available scopes for a map
+     * @returns {Array}
+     */
+    var getMapScopes = function(){
+
+        var scopes = [];
+        $.each(Init.mapScopes, function(prop, data){
+            scopes.push(prop);
+        });
+
+        return scopes;
+    };
+
+    /**
+     * get some scope info for a given info string
+     * @param info
+     * @param option
+     * @returns {string}
+     */
+    var getScopeInfoForMap = function(info, option){
+
+        var scopeInfo = '';
+
+        if(Init.mapScopes.hasOwnProperty(info)){
+            scopeInfo = Init.mapScopes[info][option];
+        }
+
+        return scopeInfo;
+    };
+
    /**
     * get some system info for a given info string (e.g. rally class)
     * @param info
@@ -259,14 +339,22 @@ define([
    var getTrueSecClassForSystem = function(trueSec){
        var trueSecClass = '';

-        if(trueSec < 0){
-            trueSec = 0;
-        }
+        trueSec = parseFloat(trueSec);

-        trueSec = trueSec.toFixed(1).toString();
+        // check for valid decimal number
+        if(
+            !isNaN( trueSec ) &&
+            isFinite( trueSec )
+        ){
+            if(trueSec < 0){
+                trueSec = 0;
+            }

-        if( Init.classes.trueSec.hasOwnProperty(trueSec) ){
-            trueSecClass = Init.classes.trueSec[trueSec]['class'];
+            trueSec = trueSec.toFixed(1).toString();
+
+            if( Init.classes.trueSec.hasOwnProperty(trueSec) ){
+                trueSecClass = Init.classes.trueSec[trueSec]['class'];
+            }
        }

        return trueSecClass;
@@ -289,6 +377,22 @@ define([
        return statusInfo;
    };

+    /**
+     * get Connection Info by option
+     * @param connectionTyp
+     * @param option
+     * @returns {string}
+     */
+    var getConnectionInfo = function(connectionTyp, option){
+
+        var connectionInfo = '';
+        if(Init.connectionTypes.hasOwnProperty(connectionTyp)){
+            connectionInfo = Init.connectionTypes[connectionTyp][option];
+        }
+
+        return connectionInfo;
+    };
+

    var getSignatureGroupInfo = function(option){

@@ -395,6 +499,10 @@ define([

    return {
        showNotify: showNotify,
+        getMapTypes: getMapTypes,
+        getInfoForMap: getInfoForMap,
+        getMapScopes: getMapScopes,
+        getScopeInfoForMap: getScopeInfoForMap,
        getInfoForSystem: getInfoForSystem,
        getEffectInfoForSystem: getEffectInfoForSystem,
        getSystemEffectData: getSystemEffectData,
@@ -402,6 +510,7 @@ define([
        getSecurityClassForSystem: getSecurityClassForSystem,
        getTrueSecClassForSystem: getTrueSecClassForSystem,
        getStatusInfoForSystem: getStatusInfoForSystem,
+        getConnectionInfo: getConnectionInfo,
        getSignatureGroupInfo: getSignatureGroupInfo,
        getAllSignatureNames: getAllSignatureNames,
        getSignatureTypeIdByName: getSignatureTypeIdByName,
--- a/sass/_bootstrap.scss
+++ b/sass/_bootstrap.scss
@@ -17,6 +17,7 @@
 // @import "bootstrap/normalize";
 // @import "bootstrap/print";

+
 // Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -17,7 +17,7 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")
 //** Background color for `<body>`.
 $body-bg:               $gray-dark;
 //** Global text color on `<body>`.
-$text-color:            $gray-dark;
+$text-color:            $gray-light;

 //** Global textual link color.
 $link-color:            $brand-primary;
@@ -31,10 +31,68 @@ $link-hover-color:      darken($link-color, 15%);

 $pf-font-path:            "../fonts" !default;

-$font-family-sans-serif:  'Oxygen Light', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+@font-face {
+  font-family: 'Oxygen';
+  src: url('#{$pf-font-path}/oxygen-regular-webfont.eot');
+  src: url('#{$pf-font-path}/oxygen-regular-webfont.eot') format('embedded-opentype'),
+  url('#{$pf-font-path}/oxygen-regular-webfont.woff') format('woff'),
+  url('#{$pf-font-path}/oxygen-regular-webfont.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+/*
+@include font-face(
+    'Oxygen',
+    font-files(
+        'oxygen-regular-webfont.woff', woff,
+        'oxygen-regular-webfont.ttf', truetype
+    ),
+    'oxygen-regular-webfont.eot',
+    400
+);
+*/
+/* not used jet
+@include font-face(
+    'Oxygen Light',
+    font-files(
+        'oxygen-light-webfont.woff', woff,
+        'oxygen-light-webfont.ttf', truetype
+    ),
+    'oxygen-light-webfont.eot',
+    300
+);
+*/
+/*
+@include font-face(
+    'Oxygen Bold',
+    font-files(
+        'oxygen-bold-webfont.woff', woff,
+        'oxygen-bold-webfont.ttf', truetype
+    ),
+    'oxygen-bold-webfont.eot',
+    700
+);
+*/
+@font-face {
+  font-family: 'Oxygen Bold';
+  src: url('#{$pf-font-path}/oxygen-bold-webfont.eot');
+  src: url('#{$pf-font-path}/oxygen-bold-webfont.eot') format('embedded-opentype'),
+  url('#{$pf-font-path}/oxygen-bold-webfont.woff') format('woff'),
+  url('#{$pf-font-path}/oxygen-bold-webfont.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+
+
+
+$font-family-sans-serif:  'Oxygen', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $font-family-serif:       'Oxygen Regular' Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
+$font-family-bold:        'Oxygen Bold', "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $font-family-base:        $font-family-sans-serif;
+$font-style-base:         normal;
+$font-weight-base:        400;

 $font-size-base:          12px;
 $font-size-large:         ceil(($font-size-base * 1.24)); // ~16px
@@ -47,34 +105,19 @@ $font-size-h4:            $font-size-base; //ceil(($font-size-base * 1.32)); //
 $font-size-h5:            ceil(($font-size-base * 1.24)); // ~16px
 $font-size-h6:            ceil(($font-size-base * 1.08)); // ~14px

-$line-height-base:        1.428571429; // 20/14
-$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
+//$line-height-base:        1.428571429; // 20/14
+$line-height-base:        1.5; // 18/12
+$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~18px

 $headings-font-family:    $font-family-base;
-$headings-font-weight:    500;
+$headings-font-weight:    700;
 $headings-line-height:    1.1;
 $headings-color:          inherit;

-@font-face {
-  font-family: 'Oxygen Regular';
-  src: url('#{$pf-font-path}/Oxygen-Regular.ttf');
-  font-style: normal;
-  font-weight: 400;
-}

-@font-face {
-  font-family: 'Oxygen Bold';
-  src: url('#{$pf-font-path}/Oxygen-Bold.ttf');
-  font-style: normal;
-  font-weight: 700;
-}

-@font-face {
-  font-family: 'Oxygen Light';
-  src: url('#{$pf-font-path}/Oxygen-Light.ttf');
-  font-style: normal;
-  font-weight: 300;
-}
+
+

 //-- Iconography
 //
@@ -203,7 +246,7 @@ $dropdown-divider-bg:            $gray-light;
 $dropdown-link-color:            $gray-dark;
 $dropdown-link-hover-color:      $gray-darkest;
 $dropdown-link-hover-bg:         $gray-light;
-$dropdown-link-active-color:     #fff;
+$dropdown-link-active-color:     $gray-lighter;
 $dropdown-link-active-bg:        $component-active-bg;

 $dropdown-link-disabled-color:   $gray-light;
@@ -504,7 +547,7 @@ $label-info-bg:               $brand-info;
 $label-warning-bg:            $brand-warning;
 $label-danger-bg:             $brand-danger;

-$label-color:                 #fff;
+$label-color:                 $gray-darkest;
 $label-link-hover-color:      #fff;


--- a/sass/bootstrap/_bootstrap.scss
+++ b/sass/bootstrap/_bootstrap.scss
@@ -1,49 +0,0 @@
-// Core variables and mixins
-@import "variables";
-@import "mixins";
-
-// Reset
-@import "normalize";
-@import "print";
-
-// Core CSS
-@import "scaffolding";
-@import "type";
-@import "code";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-
-// Components
-@import "component-animations";
-@import "glyphicons";
-@import "dropdowns";
-@import "button-groups";
-@import "input-groups";
-@import "navs";
-@import "navbar";
-@import "breadcrumbs";
-@import "pagination";
-@import "pager";
-@import "labels";
-@import "badges";
-@import "jumbotron";
-@import "thumbnails";
-@import "alerts";
-@import "progress-bars";
-@import "media";
-@import "list-group";
-@import "panels";
-@import "wells";
-@import "close";
-
-// Components w/ JavaScript
-@import "modals";
-@import "tooltip";
-@import "popovers";
-@import "carousel";
-
-// Utility classes
-@import "utilities";
-@import "responsive-utilities";
--- a/sass/bootstrap/_labels.scss
+++ b/sass/bootstrap/_labels.scss
@@ -4,7 +4,7 @@

 .label {
  display: inline;
-  padding: .2em .6em .3em;
+  padding: 2px 5px;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
@@ -12,7 +12,7 @@
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
-  border-radius: .25em;
+  border-radius: 3px;

  // Add hover effects, but only for links
  &[href] {
--- a/sass/bootstrap/_list-group.scss
+++ b/sass/bootstrap/_list-group.scss
@@ -21,9 +21,10 @@
 .list-group-item {
  position: relative;
  display: block;
-  padding: 7px 8px;
+  padding: 6px 8px;
  background-color: $list-group-bg;
  border-bottom: 1px solid $list-group-border;
+  font-family: $font-family-bold;

  // Round the first and last items
  &:first-child {
--- a/sass/bootstrap/_navbar.scss
+++ b/sass/bootstrap/_navbar.scss
@@ -155,6 +155,7 @@
  font-size: $font-size-large;
  line-height: $line-height-computed;
  height: $navbar-height;
+  font-family: $font-family-bold;

  &:hover,
  &:focus {
@@ -364,6 +365,7 @@

 .navbar-text {
  @include navbar-vertical-align($line-height-computed);
+  font-family: $font-family-bold;

  //@media (min-width: $grid-float-breakpoint) {
    float: left;
--- a/sass/bootstrap/_scaffolding.scss
+++ b/sass/bootstrap/_scaffolding.scss
@@ -26,6 +26,8 @@ html {

 body {
  font-family: $font-family-base;
+  font-style: $font-style-base;
+  font-weight: $font-weight-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
--- a/sass/bootstrap/_wells.scss
+++ b/sass/bootstrap/_wells.scss
@@ -12,6 +12,7 @@
  border: 1px solid $well-border;
  @include border-radius(5px);
  color: $gray-darker;
+  font-family: $font-family-bold;
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
--- a/sass/layout/_all.scss
+++ b/sass/layout/_all.scss
@@ -2,4 +2,5 @@
@import "map";
@import "system-info";
@import "_forms";
-@import "_images";
+@import "_images";
+@import "_dialogs";
--- a/sass/layout/_dialogs.scss
+++ b/sass/layout/_dialogs.scss
@@ -0,0 +1,23 @@
+
+// map manual dialog ======================================
+#pf-manual-scrollspy{
+  position: relative;
+  height: 500px;
+  overflow: auto;
+}
+
+// map info dialog ========================================
+#pf-map-info-systems, #pf-map-info-connections{
+  padding: 10px;
+  min-height: 130px;
+  position: relative;
+  background-color: $gray-dark;
+  overflow: hidden;
+  @include border-radius(5px);
+
+  // data tables
+  .pf-map-info-table{
+    font-size: 10px;
+    font-family: $font-family-bold;
+  }
+}
--- a/sass/layout/_forms.scss
+++ b/sass/layout/_forms.scss
@@ -1,7 +1,10 @@
-.tab-content{
-  input, select{
-    background-color: $gray-dark;
-    color: $gray-lighter;
-    border: 1px solid $gray-light;
+input, select{
+  background-color: $gray-dark;
+  color: $gray-lighter;
+  border: 1px solid $gray-light;
+  font-family: $font-family-bold;
+
+  &:focus{
+    border-color: $teal;
  }
 }
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -1,20 +1,17 @@
-@import "compass/css3/border-radius";
-
-body{
-  font-family: 'Oxygen Bold';
-  color: $gray-light;
-}

 a{
  color: $teal-dark;

  &:hover{
-    color: $teal;
+    color: $teal-light;
  }
 }

 // emphasized text
 em{
+
+  font-style: italic;
+
  &.pf-brand{
    text-transform: uppercase;
  }
@@ -35,8 +32,8 @@ em{


  .pf-loading-overlay-wrapper{
-    width: 20px;
-    height: 20px;
+    width: 25px;
+    height: 25px;
    margin: auto;
    text-align: center;
    position: absolute;
@@ -51,7 +48,7 @@ em{
  opacity: 0.5;
 }

-// page menu ================================================
+// page menu =====================================================
 .sb-left{
  .list-group-item{
    @include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
@@ -64,6 +61,18 @@ em{
  }
 }

+// map types =====================================================
+.pf-map-type-global{
+  color: $teal;
+}
+
+.pf-map-type-alliance{
+  color: $blue;
+}
+
+.pf-map-type-private{
+  color: $green;
+}

 // maps module ===================================================
 #pf-map-module{
@@ -72,19 +81,19 @@ em{
  // Tabs (colored)
  #pf-map-tabs {

-    .pf-map-type-default{
+    .pf-map-type-tab-default{
      border-top: 2px solid transparent;
    }

-    .pf-map-type-global{
+    .pf-map-type-tab-global{
      border-top: 2px solid $green;
    }

-    .pf-map-type-alliance{
+    .pf-map-type-tab-alliance{
      border-top: 2px solid $blue;
    }

-    .pf-map-type-private{
+    .pf-map-type-tab-private{
      border-top: 2px solid $teal;
    }
  }
@@ -98,11 +107,12 @@ em{

  // alle Module innerhalb einer row
  .pf-module{
-    @include border-radius(5px);
+    font-family: $font-family-bold;
    background: rgba($gray, 0.3);
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
+    @include border-radius(5px);
  }

 }
@@ -277,32 +287,69 @@ em{
  }
 }

-// "fake connection" classes for the map legend
-.pf-connection{
+// "fake connection" classes for the map manual
+.pf-fake-connection{
  box-sizing: content-box;
  display: inline-block;
-  width: 30px;
+  width: 70px;
  height: 4px;
  margin-right: 5px;
  border-top: 2px solid $gray-light;
  border-bottom: 2px solid $gray-light;
  background-color: #3c3f41;
+  position: relative;
+  font-family: $font-family-sans-serif;

-  &.pf-connection-eol{
+  &.pf-map-connection-stargate{
+    background-color: $gray-light;
+    border-color: $gray-light;
+  }
+
+  &.pf-map-connection-jumpbridge{
+    background-color: $teal-light;
+    border-color: $teal-light;
+  }
+
+  &.pf-map-connection-wh-eol{
    border-color: $pink-dark;
  }

-  &.pf-connection-reduced{
+  &.pf-map-connection-wh-reduced{
    background-color: $orange;
  }

-  &.pf-connection-critical{
+  &.pf-map-connection-wh-critical{
    background-color: $red-darker;
  }
-  &.pf-connection-frig{
+
+  &.pf-map-connection-frig{
    border-style: dashed;
    border-left: none;
    border-right: none;
+
+    &:after{
+      content: 'frig';
+      background-color: $orange;
+      color: $gray-darkest;
+      padding: 0px 3px;
+      position: absolute;
+      left: 25px;
+      top: -6px;
+      @include border-radius(3px);
+    }
+  }
+
+  &.pf-map-connection-preserve-mass{
+    &:after{
+      content: 'save mass';
+      background-color: $red-darker;
+      color: $gray-lightest;
+      padding: 0px 3px;
+      position: absolute;
+      left: 9px;
+      top: -6px;
+      @include border-radius(3px);
+    }
  }

 }
@@ -312,7 +359,7 @@ em{
 .tooltip-inner{
  color: $green;
  background-color: $gray;
-  font-family: 'Oxygen Bold';
+  font-family: $font-family-bold;
  padding: 5px 5px;
  @include border-radius(3px);
  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
@@ -382,16 +429,3 @@ Animate the stripes



-// TODO move in seperate file!!! ====================================
-
-#pf-legend-scrollspy{
-  position: relative;
-  height: 500px;
-  overflow: auto;
-}
-
-
-
-
-
-
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -71,12 +71,14 @@
  width: 2000px;
  height: 500px;
  position: relative;
+  font-family: $font-family-bold;

  .pf-system{
    position: absolute;
    min-width: 80px;
    height: auto;
    background-color: $gray-dark;
+    font-family: $font-family-bold;
    z-index: 100;

    //@include bounce-up-down;
@@ -89,7 +91,7 @@
    }

    .pf-system-head{
-      padding: 0px 3px 2px 3px;
+      padding: 0px 3px 0px 3px;
      cursor: pointer;

      .pf-system-head-name{
@@ -254,6 +256,39 @@
    }
  }

+  svg.pf-map-connection-stargate  {
+
+    path:first-child{
+      stroke: $gray-light;
+    }
+
+    path:not(first-child){
+      stroke: $gray-light;
+    }
+
+    &:hover{
+      path:first-child{
+        stroke: $gray-lightest;
+      }
+    }
+  }
+
+  svg.pf-map-connection-jumpbridge  {
+
+    path:first-child{
+      stroke: $teal-light;
+    }
+
+    path:not(first-child){
+      stroke: $teal-light;
+    }
+
+    &:hover{
+      path:first-child{
+        stroke: $gray-lightest;
+      }
+    }
+  }

  svg.pf-map-connection-wh  {
    // special wh-connection style (
@@ -290,7 +325,9 @@
  .pf-map-connection-overlay{
    padding: 1px 4px;
    font-size: 10.4px;
+    z-index: 1020;
    @include border-radius(3px);
+    @include box-shadow(0 6px 12px rgba(0,0,0,.4));
  }

  .frig{
@@ -315,6 +352,7 @@

 // context menu ==================================================
 .dropdown-menu{
+  font-family: $font-family-bold;
  z-index: 1020; // over tooltips

  i{
--- a/sass/layout/_system-info.scss
+++ b/sass/layout/_system-info.scss
@@ -2,6 +2,9 @@

  // breadcrumb ============================================================
  .breadcrumb{
+
+    font-family: $font-family-bold;
+
    li{
      text-transform: capitalize;
    }
@@ -10,6 +13,7 @@
  // system info table =====================================================
  .pf-system-info-table{
    padding-right: 7px;
+    font-family: $font-family-bold;
  }

  // system effects popover ================================================
--- a/sass/library/data-tables/_dataTables-bootstrap.scss
+++ b/sass/library/data-tables/_dataTables-bootstrap.scss
@@ -44,6 +44,7 @@ table.dataTable {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
+  font-family: $font-family-bold;
 }

 table.dataTable thead .sorting,
--- a/sass/library/data-tables/_dataTables-fontAwesome.scss
+++ b/sass/library/data-tables/_dataTables-fontAwesome.scss
@@ -71,7 +71,7 @@ div.dataTables_paginate a.paginate_button.last {
 div.dataTables_paginate a.first:before,
 div.dataTables_paginate a.previous:before {
  position: absolute;
-  top: 5px;
+  top: 4px;
  left: 10px;
  display: block;
  font-family: FontAwesome;
@@ -80,7 +80,7 @@ div.dataTables_paginate a.previous:before {
 div.dataTables_paginate a.next:after,
 div.dataTables_paginate a.last:after {
  position: absolute;
-  top: 5px;
+  top: 4px;
  right: 10px;
  display: block;
  font-family: FontAwesome;
--- a/sass/library/data-tables/_dataTables.scss
+++ b/sass/library/data-tables/_dataTables.scss
@@ -21,7 +21,7 @@ table.dataTable tfoot th {
 table.dataTable thead th,
 table.dataTable thead td {
  padding: 10px 18px;
-  border-bottom: 1px solid #111111;
+  border-bottom: 1px solid $gray;
 }
 table.dataTable thead th:active,
 table.dataTable thead td:active {
@@ -30,7 +30,7 @@ table.dataTable thead td:active {
 table.dataTable tfoot th,
 table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
-  border-top: 1px solid #111111;
+  border-top: 1px solid $gray;
 }
 table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc,
@@ -206,7 +206,7 @@ table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
  background-color: #a4b2cb;
 }
 table.dataTable.no-footer {
-  border-bottom: 1px solid #111111;
+  border-bottom: 1px solid $gray;
 }
 table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
@@ -433,7 +433,7 @@ table.dataTable td {
 .dataTables_wrapper .dataTables_info,
 .dataTables_wrapper .dataTables_processing,
 .dataTables_wrapper .dataTables_paginate {
-  color: #333333;
+  color: $gray-light;
 }
 .dataTables_wrapper .dataTables_scroll {
  clear: both;
--- a/sass/library/fontawesome/_path.scss
+++ b/sass/library/fontawesome/_path.scss
@@ -12,3 +12,14 @@
  font-weight: normal;
  font-style: normal;
 }
+
+/*
+@include font-face(
+    'FontAwesome',
+    font-files(
+        'fontawesome-webfont.woff', woff,
+        'fontawesome-webfont.ttf', truetype
+    ),
+    'fontawesome-webfont.eot'
+);
+*/
--- a/sass/library/fontawesome/_variables.scss
+++ b/sass/library/fontawesome/_variables.scss
@@ -7,7 +7,7 @@ $fa-css-prefix:       fa !default;
 $fa-version:          "4.2.0" !default;
 $fa-border-color:     #eee !default;
 $fa-inverse:          #fff !default;
-$fa-li-width:         (30em / 14) !default;
+$fa-li-width:         (30em / 12) !default;

 $fa-var-adjust: "\f042";
 $fa-var-adn: "\f170";
--- a/sass/pathfinder.scss
+++ b/sass/pathfinder.scss
@@ -9,9 +9,9 @@
 *
 */

+@import "compass/reset";
@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/box-shadow";
+

 // Core variables and mixins
@import "colors";
@@ -24,8 +24,8 @@
@import "font-awesome";

 // Libraries (Remove if not needed)
-@import "library/animation/animation-engine";
-@import "library/jqueryui/jquery-ui-1.10.3.custom";
+//@import "library/animation/animation-engine";
+//@import "library/jqueryui/jquery-ui-1.10.3.custom";
@import "library/custom-scrollbar/_mCustomScrollbar";     // malihu-custom-scrollbar-plugin
@import "library/data-tables/_dataTables";                // DataTables 1.10.3
@import "library/data-tables/_dataTables-bootstrap";      // DataTables 1.10.3 bootsrap integration
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -19,10 +19,6 @@ body.mobile-view-activated.hidden-menu {

 body.modal-open {
 	overflow:hidden !important;
-
-  p{
-    font-family: 'Oxygen';
-  }
 }

 a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner {
@@ -31,8 +27,7 @@ a:hover, a:active, a:focus, button, button:active, button:focus, object, embed,
 	
 h1,h3,h4 {
 	margin:0;
-	font-family: "Oxygen Bold";
-	font-weight:300;
+	font-family: $font-family-bold;
 }

 .page-title {
@@ -1047,6 +1042,7 @@ input[type="text"]:focus + .input-group-addon {

 .nav-tabs>li>a {
  color: $gray-lighter;
+  font-family: $font-family-bold;

  &:hover{
    color: $gray-darkest;
@@ -1304,6 +1300,7 @@ input[type="text"]:focus + .input-group-addon {
 }

 .btn {
+    font-family: $font-family-bold;
 	border-radius:2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
--- a/templates/modules/contextmenu.html
+++ b/templates/modules/contextmenu.html
@@ -1,12 +1,12 @@
 <ul class="dropdown-menu" id="{{id}}" role="menu" style="display: none">
    {{#items}}
        {{#text}}
-            <li {{#subitems}}class="dropdown-submenu"{{/subitems}}>
+            <li data-action="{{action}}" {{#subitems}}class="dropdown-submenu"{{/subitems}} >
                <a href="#" tabindex="-1" data-action="{{action}}"><i class="fa {{#icon}}{{icon}}{{/icon}} fa-fw"></i>&nbsp;{{text}}</a>
                <ul class="dropdown-menu">
                    {{#subitems}}
                        {{#subText}}
-                            <li>
+                            <li data-action="{{subAction}}">
                                <a href="#" tabindex="-1" data-action="{{subAction}}">
                                    <i class="fa {{#subIcon}}{{subIcon}}{{/subIcon}} {{#subIconClass}}{{subIconClass}}{{/subIconClass}} fa-fw"></i>
                                    &nbsp;{{subText}}
@@ -23,7 +23,7 @@
        {{/text}}

        {{#divider}}
-            <li class="divider"></li>
+            <li class="divider" data-action="{{action}}"></li>
        {{/divider}}
    {{/items}}
 </ul>
--- a/templates/modules/map_info_dialog.html
+++ b/templates/modules/map_info_dialog.html
@@ -0,0 +1,23 @@
+
+
+<p>
+    This dialog shows live data stats of a map.
+</p>
+<h4><i class="fa fa-code-fork fa-lg fa-fw"></i> Map</h4>
+<dl class="dl-horizontal">
+    <dt>Name</dt>
+    <dd>{{mapName}}</dd>
+    <dt>Type</dt>
+    <dd class="{{mapTypeClass}}">{{mapTypeLabel}}</dd>
+</dl>
+<h4><i class="fa fa-sun-o fa-lg fa-fw"></i> Systems</h4>
+
+<div id="{{mapInfoSystemsId}}">
+
+</div>
+
+<h4><i class="fa fa-chain fa-lg fa-fw"></i> Connections</h4>
+
+<div id="{{mapInfoConnectionsId}}">
+
+</div>
--- a/templates/modules/map_legend_dialog.html
+++ b/templates/modules/map_legend_dialog.html
@@ -1,324 +0,0 @@
-<nav class="navbar navbar-default" role="navigation">
-    <div class="container-fluid">
-        <div class="navbar-header pull-left">
-
-
-
-            <ul class="nav navbar-nav {{scrollspyNavClass}}">
-                <li class="{{scrollspyNavLiClass}} active"><a data-target="#pf-legend-map" href="#"><i class="fa fa-code-fork fa-lg fa-fw"></i>&nbsp;Map</a></li>
-                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-legend-system" href="#"><i class="fa fa-sun-o fa-lg fa-fw"></i>&nbsp;System</a></li>
-                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-legend-connection" href="#"><i class="fa fa-chain fa-lg fa-fw"></i>&nbsp;Connection</a></li>
-                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-legend-signature" href="#"><i class="fa fa-table fa-lg fa-fw"></i>&nbsp;Signature</a></li>
-                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-legend-chart" href="#"><i class="fa fa-bar-chart fa-lg fa-fw"></i>&nbsp;Chart</a></li>
-                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-legend-notification" href="#"><i class="fa fa-bullhorn fa-lg fa-fw"></i>&nbsp;Notification</a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
-
-<div id="{{scrollspyId}}">
-    <h2 id="pf-legend-map"><i class="fa fa-code-fork fa-lg fa-fw"></i>&nbsp;&nbsp;Map</h2>
-
-    <h4>Map types</h4>
-    <p>
-        <em class="pf-brand">pathfinder</em>&nbsp;&nbsp;supports 3 different map types. A map can consists of multiple systems <small>(<i class="fa fa-sun-o fa-fw"></i><a href="#" data-target="#pf-legend-system">more info</a>)</small>
-        and connections <small>(<i class="fa fa-chain fa-fw"></i><a href="#" data-target="#pf-legend-chain">more info</a>)</small>. Maps are also referred to as <em>"Chain Map"</em> or <em>"Chain"</em>.
-    </p>
-    <ul>
-        <li><span class="txt-color txt-color-blue">Alliance map</span><small> (can be seen by any alliance member)</small></li>
-        <li><span class="txt-color txt-color-green">Personal map</span><small> (only you can use this kind of maps)</small></li>
-        <li><span class="txt-color txt-color-teal">Public map</span><small> (anyone can use this kind of maps)</small></li>
-    </ul>
-    <p>
-        Up to 5 different maps can be used simultaneously. <span class="txt-color txt-color-blue">Alliance maps</span> only can be created with required rules.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-map-contextmenu">Context Menu</h4>
-    <p>
-        <kbd>right click</kbd> somewhere on the map to open the context menu.
-    </p>
-    <ul class="list-unstyled well">
-        <li><i class="fa fa-info fa-fw"></i> Show some basic map information</li>
-        <li><i class="fa fa-plus fa-fw"></i> Open the "Add System" dialog and add a new system at the position where you right-clicked on the map</li>
-        <li><i class="fa fa-eraser fa-fw"></i> Delete all selected <small><a href="#" data-target="#pf-legend-scrollspy-anchor-map-select">more info</a></small> systems (if there are any selected systems) <small><a href="#" data-target="#pf-legend-scrollspy-anchor-system-delete">more info</a></small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-map-select">Select methods</h4>
-    <ul>
-        <li>Drag-Select:<small> Multiple systems can be selected by </small><kbd>click</kbd> + <kbd>drag</kbd><small> somewhere on the map and drag a frame around some systems</small></li>
-        <li>Single-Select:<small> Individual systems can be selected by holding </small><kbd>ctrl</kbd> + <kbd>click</kbd></li>
-    </ul>
-    <p>
-        Locked systems <small>(<i class="fa fa-lock fa-fw"></i>)</small> can´t be selected.
-    </p>
-    <h4><i class="fa fa-th fa-fw"></i> Grid snapping</h4>
-    <p>
-        For easier system arrangement, the "grid snapping" option can be activated on the "Map Menu" <small>(<i class="fa fa-code-fork fa-fw"></i>)</small>. Dragged systems will snap then to a <samp>20x20px</samp> grid.<br>
-        A grid overlay will appear on the map.
-    </p>
-    <h4><i class="fa fa-history fa-fw"></i> Update counter</h4>
-    <div class="pf-map-overlay" style="position: initial; display: block; padding-top: 1px; float: left; margin: 0 10px 10px 0;">
-        <div class="{{pieChartClass}} {{mapCounterClass}}" data-percent="40">
-            <span style="position: absolute; line-height: 30px; margin-left: 10px;">4</span>
-        </div>
-    </div>
-
-    <p>
-        The map update counter starts counting backwards during map interaction (e.g. delete system, move system, ..). While the counter is active no data is pushed to the server.
-        When the counter hits 0 all map date will be stored and any active pilot will receive the updates.<br>
-        So there is no need for any save/edit buttons.
-    </p>
-
-    <div class="clearfix"></div>
-
-    {{! ================================================================================================================================================  }}
-
-    <h2 id="pf-legend-system"><i class="fa fa-sun-o fa-lg fa-fw"></i>&nbsp;&nbsp;System</h2>
-
-    <p>
-        Systems are represented by rectangle boxes on a map <small>(<i class="fa fa-code-fork fa-fw"></i><a href="#" data-target="#pf-legend-map">more info</a>)</small>.
-        Pilots can interact with systems like "delete systems" <small>(<i class="fa fa-eraser fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-system-delete">more info</a>)</small>,
-        "move systems around" <small>(<i class="fa fa-arrows-alt fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-system-move">more info</a>)</small>, ...
-    </p>
-    <h4>Activate</h4>
-    <p>
-        Any system in a map can be set as "active" by <kbd>click</kbd> somewhere at a system. Just one system per map can have an active state.<br>
-        The active system has <span style="-webkit-box-shadow: #ffffbb 0px 0px 8px 0px;box-shadow: #ffffbb 0px 0px 8px 0px; display: inline-block; margin: 0 5px; padding: 0 3px;">light yellow</span> shaddow.
-        Additional system information is shown below the map.
-    </p>
-    <h4>Name</h4>
-    <p>
-        Systems can be renamed with an alias by <kbd>double-click</kbd> the name. System aliases are stored server side and can be seen by any pilot with map access.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-system-security">Security Status</h4>
-    <p>
-        Any <em>"K-Space"</em> system in <em>"New Eden"</em> has a fix <em>"Security Status"</em> between <samp>-1.0</samp> and <samp>+1.0</samp>. <em>"W-Space"</em> systems always have a Security status of <samp>-1.0</samp> but they can be
-        distinguished into <em>"Classes"</em> [C1 - C6].<br>
-        The color of the system label indicates the <em>"Security Status"</em> of a system
-    </p>
-    <ul style="list-style: none;">
-        <li><span class="pf-system-sec-highSec">H</span> high security system<small> (<samp>1.0 - 0.5</samp>)</small></li>
-        <li><span class="pf-system-sec-lowSec">L</span> low security system<small> (<samp>0.4 - 0.1</samp>)</small></li>
-        <li><span class="pf-system-sec-nullSec">0.0</span> Null security system<small> (<samp>0.0 - -1.0</samp>)</small></li>
-        <li><span class="pf-system-sec-high">C6, C5</span> heigh class wormhole <small> (<samp>-1.0</samp>)</small></li>
-        <li><span class="pf-system-sec-mid">C4, C3</span> mid class wormhole <small> (<samp>-1.0</samp>)</small></li>
-        <li><span class="pf-system-sec-low">C6, C5</span> low class wormhole <small> (<samp>-1.0</samp>)</small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-system-status">System Status</h4>
-    <p>
-        The border color indicates the current status of a system.<br>
-        The status can be changed by using the context menu <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-system-contextmenu">more info</a>)</small>.
-    </p>
-    <ul style="list-style: none;">
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-unknown"></i> no status set<small> (unknown)</small></li>
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-friendly"></i> friendly<small> (in the possession of your corp/ally or allied entities)</small></li>
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-occupied"></i> occupied<small> (hostiles structures found  but no activity found)</small></li>
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-hostile"></i> hostile<small> (hostile activity noticed recently)</small></li>
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-empty"></i> empty<small> (system is not occupied or active)</small></li>
-        <li><i class="fa fa-square-o fa-lg fa-fw pf-system-status-unscanned"></i> unscanned<small> (system has unscanned signatures)</small></li>
-    </ul>
-    <h4>System Effect</h4>
-    <p>
-        Effects of wormhole systems are shown by a <i class="fa fa-square fa-fw"></i> at the top right of a system
-    </p>
-    <ul style="list-style: none;">
-        <li><i class="fa fa-square fa-fw pf-system-effect"></i></span> No effect</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-magnetar"></i></span> Magnetar</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-redgiant"></i></span> Red Giant</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-pulsar"></i></span> Pulsar</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-wolfryet"></i></span> Wolfryet</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-cataclysmic"></i></span> Cataclysmic Variable</li>
-        <li><i class="fa fa-square fa-fw pf-system-effect-blackhole"></i></span> Blackhole</li>
-    </ul>
-    <h4>Active Pilots</h4>
-    <p>
-        If there are any active pilots in a system, there is a tooltip with the number of pilots. <br>
-        Systems with active Pilots are bigger than empty systems. The name of a pilot is shown below the system name.<br>
-        Hover the <small>(<i class="fa fa-angle-down fa-fw"></i>)</small> icon in the systems head to get more detailed information (ship type, pilot name).
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-system-move"><i class="fa fa-arrows-alt fa-fw"></i> Move</h4>
-    <p>
-        Any system that is not "Locked"  <small>(<i class="fa fa-lock fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-system-locked">more info</a>)</small> can be moved around by <kbd>click</kbd> + <kbd>drag</kbd> the systems security label (top right).<br>
-        In order to move multiple systems at once, make sure all of them are selected <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-map-select">more info</a>)</small>. Now you can move one systems and all others will follow.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-system-contextmenu">Context Menu</h4>
-    <p>
-        <kbd>right click</kbd> a system on the map to open the context menu.
-    </p>
-    <ul class="list-unstyled well">
-        <li><i class="fa fa-plus fa-fw"></i> Open the "Add System" dialog and add a new system with a connection to this system</li>
-        <li><i class="fa fa-lock fa-fw"></i> Lock this system <small><a href="#" data-target="#pf-legend-scrollspy-anchor-system-locked">more info</a></small></li>
-        <li><i class="fa fa-users fa-fw"></i> Set "Rally Point" for this system <small><a href="#" data-target="#pf-legend-scrollspy-anchor-system-rally">more info</a></small></li>
-        <li><i class="fa fa-reply fa-rotate-180 fa-fw"></i> Changes the status of this system <small><a href="#" data-target="#pf-legend-scrollspy-anchor-system-status">more info</a></small></li>
-        <li><i class="fa fa-eraser fa-fw"></i> Delete this system and all connections <small><a href="#" data-target="#pf-legend-scrollspy-anchor-system-delete">more info</a></small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-system-locked"><i class="fa fa-lock fa-fw"></i> Locked system</h4>
-    <p>
-        Locked systems can´t be selected, moved and deleted.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-system-rally"><i class="fa fa-users fa-fw"></i> Rally Point</h4>
-    <p>
-        Systems can be marked as <span class="pf-system-info-rally"><span class="pf-system-head" style="padding: 0 5px;">Rally Point</span></span>.<br>
-        Any active pilot will be informed about new "Rally Points" by a notice. Optional you can poke active pilots with "desktop push notifications"
-        <small>(<i class="fa fa-bullhorn fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-notification-desktop">more info</a>)</small>.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-system-delete"><i class="fa fa-eraser fa-fw"></i> Delete system</h4>
-    <p>
-        Any system that is not "Locked"  <small>(<i class="fa fa-lock fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-system-locked">more info</a>)</small> can be deleted from a map.
-    </p>
-
-    {{! ================================================================================================================================================  }}
-
-    <h2 id="pf-legend-connection"><i class="fa fa-chain fa-lg fa-fw"></i>&nbsp;&nbsp;Connection (Stargate / Wormhole)</h2>
-    <p>
-        Connections between systems are represented by solid lines. Any connection requires two systems that are connected. A connection can be a <em>"Stargate"</em> or <em>"Wormhole"</em>.
-    </p>
-    <h4>Connect Systems</h4>
-    <p>
-        Systems can be connected to each other by several ways
-    </p>
-    <ul>
-        <li>Drag-Connect: <kbd>click</kbd><small> a systems name and </small><kbd>drag</kbd><small> a new connection to any other system</small></li>
-        <li>New System-Connection: <small>Add a system by using the context menu of a system (<a href="#" data-target="#pf-legend-scrollspy-anchor-system-contextmenu">more info</a>)</small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-connection-status">Connection Status</h4>
-    <p>
-        Wormholes will gain various statuses during its <em>"Lifetime"</em>.<br>
-        In addition to this, connections can get custom statuses.<br>
-        The status can be changed by using the context menu <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-connection-contextmenu">more info</a>)</small>.
-    </p>
-    <ul style="list-style: none;">
-        <li><div class="pf-connection pf-connection-eol"></div> end of life<small> (Wormhole is the end of its natural lifetime)</small></li>
-        <li><div class="pf-connection"></div> fresh<small> (Has not yet had its stability significantly disrupted)</small></li>
-        <li><div class="pf-connection pf-connection-reduced"></div> reduced<small> (Wormhole had its stability reduced, but not to a critical degree) &lt;50% mass left</small></li>
-        <li><div class="pf-connection pf-connection-critical"></div> critical<small> (Wormhole is on the verge of collapse) &lt;10% mass left</small></li>
-        <li><div class="pf-connection pf-connection-frig"></div> Frigate hole<small> (Only the smallest ships pass through)</small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-connection-label"><i class="fa fa-tag fa-fw"></i> Connection Label</h4>
-    <p>
-        In addition to its <em>"Lifetime Status" </em><small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-connection-status">more info</a>)</small>, connections can be labeled with custom labels
-        to supply further information.<br>
-        Labels can be set by using the context menu <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-connection-contextmenu">more info</a>)</small>.
-    </p>
-    </p>
-    <ul style="list-style: none;">
-        <li><span class="label label-warning" style="color: #1d1d1d">frig</span> Frigate hole<small> (Only the smallest ships pass through)</small></li>
-        <li style="margin-top: 3px;"><span class="label label-danger"><i class="fa fa-warning"></i> save mass</span> save mass<small> (Wormhole mass has to be saved)</small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-connection-contextmenu">Context Menu</h4>
-    <p>
-        <kbd>right click</kbd> a connection on the map to open the context menu.
-    </p>
-    <ul class="list-unstyled well">
-        <li><i class="fa fa-plane fa-fw"></i> Toggles this connection as <em>"Frigate Hole"</em> <small><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-frig">more info</a></small></li>
-        <li><i class="fa fa-warning fa-fw"></i> Toggles this connection as <em>"Preserve Mass"</em> <small><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-mass">more info</a></small></li>
-        <li><i class="fa fa-reply fa-rotate-180 fa-fw"></i> Changes the status of this connection <small><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-status">more info</a></small></li>
-        <li><i class="fa fa-eraser fa-fw"></i> Delete this connection <small><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-delete">more info</a></small></li>
-    </ul>
-    <h4 id="pf-legend-scrollspy-anchor-connection-frig"><i class="fa fa-plane fa-fw"></i> Frigate Hole</h4>
-    <p>
-        Wormholes can be labeled <small>(<i class="fa fa-tag fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-label">more info</a>)</small> as <em>"Frigate Hole"</em>. Only frigate-sized Spaceships can pass through a <em>"Frigate Hole"</em> <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-connection-status">more info</a>)</small>.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-connection-mass"><i class="fa fa-warning fa-fw"></i> Preserve Mass</h4>
-    <p>
-        Wormholes can be labeled <small>(<i class="fa fa-tag fa-fw"></i><a href="#" data-target="#pf-legend-scrollspy-anchor-connection-label">more info</a>)</small> as <em>"Preserve Mass"</em>. Let your mates know about critical connections that should be mass-saved
-        (e.g. <span class="pf-system-sec-highSec">H</span> security exits) <small>(<a href="#" data-target="#pf-legend-scrollspy-anchor-system-security">more info</a>)</small>.
-    </p>
-    <h4 id="pf-legend-scrollspy-anchor-connection-delete"><i class="fa fa-eraser fa-fw"></i> Delete connection</h4>
-    <p>
-        Existing connections can be detached by several ways
-    </p>
-    <ul>
-        <li>Drag-Connection: <small> <em>"Connection Endpoints"</em> can be </small><kbd>click</kbd> + <kbd>drag</kbd><small> away from its current system</small></li>
-        <li>Delete-Connection: <small>Delete a connection by using the context menu of a connection (<a href="#" data-target="#pf-legend-scrollspy-anchor-connection-contextmenu">more info</a>)</small></li>
-        <li>Delete-System: <small>Delete a system by using the context menu of a connection (<a href="#" data-target="#pf-legend-scrollspy-anchor-system-contextmenu">more info</a>)</small></li>
-        <li>Delete-Systems: <small>Delete multiple systems by using the context menu of a map (<a href="#" data-target="#pf-legend-scrollspy-anchor-map-contextmenu">more info</a>)</small></li>
-    </ul>
-
-    {{! ================================================================================================================================================  }}
-
-    <h2 id="pf-legend-signature"><i class="fa fa-table fa-lg fa-fw"></i>&nbsp;&nbsp;Signature</h2>
-    <p>
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-    </p>
-
-    {{! ================================================================================================================================================  }}
-
-    <h2 id="pf-legend-chart"><i class="fa fa-bar-chart fa-lg fa-fw"></i>&nbsp;&nbsp;Chart</h2>
-    <p>
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
-        Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-    </p>
-
-    {{! ================================================================================================================================================  }}
-
-    <h2 id="pf-legend-notification"><i class="fa fa-bullhorn fa-lg fa-fw"></i>&nbsp;&nbsp;Notification</h2>
-
-    <h4>Types</h4>
-
-    <div class="alert alert-success"><span class="txt-color txt-color-success">Success</span><small> (success message after pilot interaction)</small></div>
-    <div class="alert alert-info"><span class="txt-color txt-color-information">Information</span><small> (non-important additional information)</small></div>
-    <div class="alert alert-warning"><span class="txt-color txt-color-warning">Warning</span><small> (important non-critical information)</small></div>
-    <div class="alert alert-danger"><span class="txt-color txt-color-danger">Danger</span><small> (very imprtant software error information)</small></div>
-
-    <h4 id="pf-legend-scrollspy-anchor-notification-desktop">Desktop push notifications</h4>
-    <p>
-        <em class="pf-brand">pathfinder</em>  supports desktop push notifications. The first time this kind of notification is send to client, a Browser security Question must be confirmed.
-        In order to test desktop push notifications <kbd>click</kbd> the "Notification test" option in the main menu <small>(<i class="fa fa-bars fa-fw"></i>)</small>.<br>
-        Events can trigger this kind of notification
-    </p>
-    <ul>
-        <li>New Rally Point</span> <small>(<i class="fa fa-users fa-fw"></i> <a href="#" data-target="#pf-legend-scrollspy-anchor-system-rally">more info</a>)</small></li>
-        <li>System found with logged of pilots</span><small> (<a href="#">coming soon™</a></small>)</li>
-    </ul>
-
-
-
-
-
-
-
-</div>
--- a/templates/modules/map_manual_dialog.html
+++ b/templates/modules/map_manual_dialog.html
@@ -0,0 +1,350 @@
+<nav class="navbar navbar-default" role="navigation">
+    <div class="container-fluid">
+        <div class="navbar-header pull-left">
+
+
+
+            <ul class="nav navbar-nav {{scrollspyNavClass}}">
+                <li class="{{scrollspyNavLiClass}} active"><a data-target="#pf-manual-map" href="#"><i class="fa fa-code-fork fa-lg fa-fw"></i>&nbsp;Map</a></li>
+                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-manual-system" href="#"><i class="fa fa-sun-o fa-lg fa-fw"></i>&nbsp;System</a></li>
+                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-manual-connection" href="#"><i class="fa fa-chain fa-lg fa-fw"></i>&nbsp;Connection</a></li>
+                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-manual-signature" href="#"><i class="fa fa-table fa-lg fa-fw"></i>&nbsp;Signature</a></li>
+                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-manual-chart" href="#"><i class="fa fa-bar-chart fa-lg fa-fw"></i>&nbsp;Chart</a></li>
+                <li class="{{scrollspyNavLiClass}}"><a data-target="#pf-manual-notification" href="#"><i class="fa fa-bullhorn fa-lg fa-fw"></i>&nbsp;Notification</a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div id="{{scrollspyId}}">
+    <h2 id="pf-manual-map"><i class="fa fa-code-fork fa-lg fa-fw"></i>&nbsp;&nbsp;Map</h2>
+
+    <h4>Map types</h4>
+    <p>
+        <em class="pf-brand">pathfinder</em>&nbsp;&nbsp;supports 3 different types of maps. Each map contains several systems <small>(<i class="fa fa-sun-o fa-fw"></i><a href="#" data-target="#pf-manual-system">more</a>)</small>
+        and connections <small>(<i class="fa fa-chain fa-fw"></i><a href="#" data-target="#pf-manual-connection">more</a>)</small>. Maps are also referred to as <em>"Chain Map"</em> or <em>"Chain"</em>.
+    </p>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li><span class="{{mapTypeGlobalClass}}">{{mapTypeGlobalLabel}} map</span><small> (anyone can use this kind of maps)</small></li>
+        <li><span class="{{mapTypeAllianceClass}}">{{mapTypeAllianceLabel}} map</span><small> (is not visible for other pilots)</small></li>
+        <li><span class="{{mapTypePrivateClass}}">{{mapTypePrivateLabel}} map</span><small> (can be used by any alliance member)</small></li>
+    </ul>
+    <p>
+        Up to 5 different maps can be used simultaneously. <span class="txt-color txt-color-blue">Alliance maps</span> require appropriate rules to be created.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-map-contextmenu">Context menu</h4>
+    <p>
+        <kbd>right click</kbd> somewhere on the map to open the context menu.
+    </p>
+    <ul class="list-unstyled well" style=" margin-left: 10px;">
+        <li><i class="fa fa-info fa-fw"></i> Show some basic map information</li>
+        <li><i class="fa fa-plus fa-fw"></i> Add a new system at the position, you clicked at</li>
+        <li><i class="fa fa-eraser fa-fw"></i> Delete selected systems <small><a href="#" data-target="#pf-manual-scrollspy-anchor-system-delete">more</a></small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-map-select">Select methods</h4>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li>Frame Select:<small> Multiple systems can be selected by </small><kbd>click</kbd> + <kbd>drag</kbd></li>
+        <li>Click Select:<small> Individual systems can be selected by holding </small><kbd>ctrl</kbd> + <kbd>click</kbd> <small> at a system</small></li>
+    </ul>
+    <p>
+        Locked systems <small>(<i class="fa fa-lock fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-locked">more</a>)</small> can´t be selected.
+    </p>
+    <h4><i class="fa fa-th fa-fw"></i> Grid snapping</h4>
+    <p>
+        The <em>"Grid snapping"</em> option can be activated on the "Map Menu" <small>(<i class="fa fa-code-fork fa-fw"></i>)</small>. Systems will snap to a <samp>20x20px</samp> grid.
+        A grid overlay appears on the map.
+    </p>
+    <h4><i class="fa fa-history fa-fw"></i> Update counter</h4>
+    <div class="pf-map-overlay" style="position: initial; display: block; padding-top: 1px; float: left; margin: 0 10px 10px 0;">
+        <div class="{{pieChartClass}} {{mapCounterClass}}" data-percent="40">
+            <span style="position: absolute; line-height: 30px; margin-left: 10px;">4</span>
+        </div>
+    </div>
+
+    <p>
+        The <em>"Update counter"</em> starts counting backwards during map interaction. While the counter is active, no data is pushed to server.
+        Once the counter hits 0, all map date will be stored and active pilots will receive the map updates.<br>
+        There is no need for any save/edit buttons.
+    </p>
+
+    <div class="clearfix"></div>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+    <h2 id="pf-manual-system"><i class="fa fa-sun-o fa-lg fa-fw"></i>&nbsp;&nbsp;System</h2>
+
+    <p>
+        Systems are represented by rectangle boxes on a map <small>(<i class="fa fa-code-fork fa-fw"></i><a href="#" data-target="#pf-manual-map">more</a>)</small>.
+        Pilots can interact with systems like "delete systems" <small>(<i class="fa fa-eraser fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-delete">more</a>)</small> or
+        "move systems" <small>(<i class="fa fa-arrows-alt fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-move">more</a>)</small>.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-active">Active system</h4>
+    <p>
+        Any system in a map can be set as "active" by <kbd>click</kbd>. <br>
+        Just one system per map can have an active state.
+        The active system has a <span style="-webkit-box-shadow: #ffffbb 0px 0px 8px 0px;box-shadow: #ffffbb 0px 0px 8px 0px; display: inline-block; margin: 0 5px; padding: 0 3px;">light yellow</span> shaddow.
+        Additional system information is shown below the map.
+    </p>
+    <h4>Name / Alias</h4>
+    <p>
+        Systems can be renamed with an alias by <kbd>double-click</kbd> the name. System aliases are stored server side and are visible to any pilot on the map.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-security">Security status</h4>
+    <p>
+        Any <em>"K-space"</em> system in <em>"New Eden"</em> has a fixed <em>"Security status"</em> between <samp>-1.0</samp> and <samp>+1.0</samp>.
+        <em>"W-space"</em> systems always have a Security status of <samp>-1.0</samp>.
+        They can be distinguished into <em>"Classes"</em> [C1 - C6].<br>
+        The label color of the system indicates the <em>"Security Status"</em>.
+    </p>
+    <ul style="list-style: none; margin-left: 10px">
+        <li><span class="pf-system-sec-highSec">H</span> high security system<small> (<samp>1.0 - 0.5</samp>)</small></li>
+        <li><span class="pf-system-sec-lowSec">L</span> low security system<small> (<samp>0.4 - 0.1</samp>)</small></li>
+        <li><span class="pf-system-sec-nullSec">0.0</span> null security system<small> (<samp>0.0 - -1.0</samp>)</small></li>
+        <li><span class="pf-system-sec-high">C6, C5</span> high class wormhole <small> (<samp>-1.0</samp>)</small></li>
+        <li><span class="pf-system-sec-mid">C4, C3</span> mid class wormhole <small> (<samp>-1.0</samp>)</small></li>
+        <li><span class="pf-system-sec-low">C2, C1</span> low class wormhole <small> (<samp>-1.0</samp>)</small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-system-status">System status</h4>
+    <p>
+        The border color indicates the current status of a system.<br>
+        The status can be changed by using the context menu <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-contextmenu">more</a>)</small>.
+    </p>
+    <ul class="fa-ul">
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-unknown"></i> no status set <small>(unknown)</small></li>
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-friendly"></i> friendly <small>(in the possession of your corp/ally or allied entities)</small></li>
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-occupied"></i> occupied <small>(hostiles structures found but not active)</small></li>
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-hostile"></i> hostile <small>(hostile activity noticed recently)</small></li>
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-empty"></i> empty <small>(system is not occupied or active)</small></li>
+        <li><i class="fa-li fa fa-square-o fa-lg fa-fw pf-system-status-unscanned"></i> unscanned <small>(system has unscanned signatures)</small></li>
+    </ul>
+    <h4>System effect</h4>
+    <p>
+        Effects of wormhole systems are shown by a <i class="fa fa-square fa-fw"></i> at the top right of a system.
+    </p>
+    <ul class="fa-ul">
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect"></i></span> No effect</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-magnetar"></i></span> Magnetar</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-redgiant"></i></span> Red Giant</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-pulsar"></i></span> Pulsar</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-wolfryet"></i></span> Wolfryet</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-cataclysmic"></i></span> Cataclysmic Variable</li>
+        <li><i class="fa-li fa fa-square fa-fw pf-system-effect-blackhole"></i></span> Blackhole</li>
+    </ul>
+    <h4>Active pilots</h4>
+    <p>
+        If a system has active pilots, a tooltip is shown with the current number of pilots. <br>
+        Systems with active pilots are bigger than empty systems and provide morermation than others.<br>
+        During <kbd>mouseover</kbd> the <small>(<i class="fa fa-angle-down fa-fw"></i>)</small> icon more detailed information is shown.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-move"><i class="fa fa-arrows-alt fa-fw"></i> Move</h4>
+    <p>
+        Any system that is not <em>"Locked"</em> <small>(<i class="fa fa-lock fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-locked">more</a>)</small> can be moved,
+        by <kbd>click</kbd> + <kbd>drag</kbd> the systems security label (top right).<br>
+        In order to move multiple systems at once, make sure all of them are selected <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-map-select">more</a>)</small>.
+        Now <kbd>drag</kbd> one selected systems and all others follow.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-contextmenu">Context menu</h4>
+    <p>
+        <kbd>right click</kbd> a system on the map to open the context menu.
+    </p>
+    <ul class="list-unstyled well" style=" margin-left: 10px;">
+        <li><i class="fa fa-plus fa-fw"></i> Adds a new system that connects to this system</li>
+        <li><i class="fa fa-lock fa-fw"></i> Lock this system <small><a href="#" data-target="#pf-manual-scrollspy-anchor-system-locked">more</a></small></li>
+        <li><i class="fa fa-users fa-fw"></i> Set "Rally Point" for this system <small><a href="#" data-target="#pf-manual-scrollspy-anchor-system-rally">more</a></small></li>
+        <li><i class="fa fa-reply fa-rotate-180 fa-fw"></i> Changes the status of this system <small><a href="#" data-target="#pf-manual-scrollspy-anchor-system-status">more</a></small></li>
+        <li><i class="fa fa-eraser fa-fw"></i> Delete this system and all connections <small><a href="#" data-target="#pf-manual-scrollspy-anchor-system-delete">more</a></small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-system-locked"><i class="fa fa-lock fa-fw"></i> Locked system</h4>
+    <p>
+        Locked systems can´t be selected <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-map-select">more</a>)</small>,
+        moved <small>(<i class="fa fa-arrows-alt fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-move">more</a>)</small>
+        or deleted <small>(<i class="fa fa-eraser fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-delete">more</a>)</small>.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-rally"><i class="fa fa-users fa-fw"></i> Rally point</h4>
+    <p>
+        Systems can be marked as a <span class="pf-system-info-rally"><span class="pf-system-head" style="padding: 0 5px;">Rally point</span></span>.<br>
+        Active pilot will be informed about new "Rally points" by a notice. Optional you can poke active pilots with "desktop push notifications"
+        <small>(<i class="fa fa-bullhorn fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-notification-desktop">more</a>)</small>.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-system-delete"><i class="fa fa-eraser fa-fw"></i> Delete system</h4>
+    <p>
+        Any system that is not "Locked"  <small>(<i class="fa fa-lock fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-system-locked">more</a>)</small> can be deleted from a map.
+    </p>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+    <h2 id="pf-manual-connection"><i class="fa fa-chain fa-lg fa-fw"></i>&nbsp;&nbsp;Connection (Stargate / Wormhole)</h2>
+    <p>
+        Connections between systems are represented by solid curved lines. Any connection requires two systems that are connected. A connection can be a <em>"Stargate"</em> or <em>"Wormhole"</em>.
+    </p>
+    <h4>Connect systems</h4>
+    <p>
+        Systems can be connected to each other by several ways.
+    </p>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li>Drag Connection: <kbd>click</kbd><small> a systems name and </small><kbd>drag</kbd><small> a new connection to any other system</small></li>
+        <li>Switch Connection: <kbd>click</kbd><small> a <em>"Connection Endpoints"</em> and </small><kbd>drag</kbd><small> it to any other system</small></li>
+        <li>Add new System: <small>Add a system by using the context menu of a system (<a href="#" data-target="#pf-manual-scrollspy-anchor-system-contextmenu">more</a>)</small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-connection-status">Connection status</h4>
+    <p>
+        Wormholes will gain various statuses during its <em>"Lifetime"</em>.<br>
+        In addition to this, connections can get custom statuses.<br>
+        The status can be changed by using the context menu <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-connection-contextmenu">more</a>)</small>.
+    </p>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li><div class="pf-fake-connection pf-map-connection-wh-eol"></div> end of life<small> (Wormhole is the end of its natural lifetime)</small></li>
+        <li><div class="pf-fake-connection"></div> fresh<small> (Wormhole has not yet had its stability significantly disrupted)</small></li>
+        <li><div class="pf-fake-connection pf-map-connection-wh-reduced"></div> reduced<small> (Wormhole had its stability reduced, but not to a critical degree) &lt;50% mass left</small></li>
+        <li><div class="pf-fake-connection pf-map-connection-wh-critical"></div> critical<small> (Wormhole is on the verge of collapse) &lt;10% mass left</small></li>
+        <li><div class="pf-fake-connection pf-map-connection-frig"></div> Frigate hole<small> (Only the smallest ships pass through)</small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-connection-label"><i class="fa fa-tag fa-fw"></i> Connection label</h4>
+    <p>
+        In addition to its <em>"Lifetime Status" </em><small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-connection-status">more</a>)</small>, connections can be labeled with custom labels
+        to supply further information.<br>
+        Labels can be set by using the context menu <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-connection-contextmenu">more</a>)</small>.
+    </p>
+    </p>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li><span class="label label-warning" style="color: #1d1d1d">frig</span> Frigate hole<small> (Only the smallest ships pass through)</small></li>
+        <li style="margin-top: 3px;"><span class="label label-danger"><i class="fa fa-warning"></i> save mass</span> save mass<small> (Wormhole mass has to be saved)</small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-connection-contextmenu">Context menu</h4>
+    <p>
+        <kbd>right click</kbd> a connection on the map to open the context menu.
+    </p>
+    <ul class="list-unstyled well" style=" margin-left: 10px;">
+        <li><i class="fa fa-plane fa-fw"></i> Toggles this connection as <em>"Frigate Hole"</em> <small><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-frig">more</a></small></li>
+        <li><i class="fa fa-warning fa-fw"></i> Toggles this connection as <em>"Preserve Mass"</em> <small><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-mass">more</a></small></li>
+        <li><i class="fa fa-reply fa-rotate-180 fa-fw"></i> Changes the status of this connection <small><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-status">more</a></small></li>
+        <li><i class="fa fa-eraser fa-fw"></i> Delete this connection <small><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-delete">more</a></small></li>
+    </ul>
+    <h4 id="pf-manual-scrollspy-anchor-connection-frig"><i class="fa fa-plane fa-fw"></i> Frigate hole</h4>
+    <p>
+        Wormholes can be labeled <small>(<i class="fa fa-tag fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-label">more</a>)</small> as <em>"Frigate hole"</em>.
+        Only frigate-sized Spaceships can pass through a <em>"Frigate hole"</em> <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-connection-status">more</a>)</small>.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-connection-mass"><i class="fa fa-warning fa-fw"></i> Preserve mass</h4>
+    <p>
+        Wormholes can be labeled <small>(<i class="fa fa-tag fa-fw"></i><a href="#" data-target="#pf-manual-scrollspy-anchor-connection-label">more</a>)</small> as <em>"Preserve mass"</em>.
+        Let your mates know about critical connections that should be mass-saved
+        (e.g. <span class="pf-system-sec-highSec">H</span> security exits) <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-security">more</a>)</small>.
+    </p>
+    <h4 id="pf-manual-scrollspy-anchor-connection-delete"><i class="fa fa-eraser fa-fw"></i> Delete connection</h4>
+    <p>
+        Connections can be detached by several ways.
+    </p>
+    <ul class="list-unstyled" style=" margin-left: 10px;">
+        <li>Drag Connection: <small> <em>"Connection Endpoints"</em> can be </small><kbd>click</kbd> + <kbd>drag</kbd><small> away from its current system</small></li>
+        <li>Delete Connection: <small>Delete a connection by using the context menu of a connection (<a href="#" data-target="#pf-manual-scrollspy-anchor-connection-contextmenu">more</a>)</small></li>
+        <li>Delete System: <small>Delete a system by using the context menu of a connection (<a href="#" data-target="#pf-manual-scrollspy-anchor-system-contextmenu">more</a>)</small></li>
+        <li>Delete Systems: <small>Delete multiple systems by using the context menu of a map (<a href="#" data-target="#pf-manual-scrollspy-anchor-map-contextmenu">more</a>)</small></li>
+    </ul>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+    <h2 id="pf-manual-signature"><i class="fa fa-table fa-lg fa-fw"></i>&nbsp;&nbsp;Signature</h2>
+    <p>
+        The <em>"Signature table"</em> of a system is shown below the map. Any active system <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-active">more</a>)</small> has its own <em>"Signature table"</em>.
+        Signatures found in a system can be added to the table in order to share information. The table represents a record of the current scan process of a system.
+    </p>
+    <h4><i class="fa fa-tasks fa-fw"></i> Progress bar</h4>
+    <p>
+        The scan <em>"Progress bar"</em> is a visual indicator for the scan progress of a system. You can see how many signatures are scanned already and what is left.
+        Anytime a new signature is added to the <em>"Signature table"</em> the <em>"Progress bar"</em> will be updated automatically. The bar color indicates the progress.
+    </p>
+    <ul class="fa-ul">
+        <li><i class="fa-li fa fa-circle txt-color txt-color-danger"></i></span> not scanned <small>(System scanned to &lt;30%)</small></li>
+        <li><i class="fa-li fa fa-circle txt-color txt-color-warning"></i></span> bad scanned <small>(System scanned to &lt;100%)</small></li>
+        <li><i class="fa-li fa fa-circle txt-color txt-color-success"></i></span> full scanned <small>(System scanned to 100%)</small></li>
+    </ul>
+    <h4><i class="fa fa-copy fa-fw"></i> Signature reader</h4>
+    <p>
+        The <em>"Signature reader"</em> functionality allows pilots to add and update multiple signatures at once.
+        In order to copy signatures from <em>"EVE"</em> to <em class="pf-brand">pathfinder</em>, do the following steps.
+    </p>
+    <ol>
+        <li><kbd>ctrl</kbd> + <kbd>a</kbd> <small>(select all/some signatures in the scanning window)</small></li>
+        <li style="margin-top: 3px;"><kbd>ctrl</kbd> + <kbd>c</kbd> <small>(copy selected signatures to clipboard)</small></li>
+        <li style="margin-top: 3px;"><kbd>click</kbd> the <em>"Signature reader"</em> button <small>(open the <em>"Signature reader"</em> dialog)</small></li>
+        <li style="margin-top: 3px;"><kbd>ctrl</kbd> + <kbd>v</kbd> on the input field <small>(paste copied signatures into dialog)</small></li>
+    </ol>
+    <p>
+        Advanced pilots can skip number 3.!<br>
+        Make sure, you have the right system marked as active <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-active">more</a>)</small>.<br>
+        <kbd>click</kbd> the browser tab were <em class="pf-brand">pathfinder</em> is open. Then press <kbd>ctrl</kbd> + <kbd>v</kbd>.<br>
+        <em class="pf-brand">pathfinder</em> automatically detect the data format and updates the <em>"Signature table"</em>.
+    </p>
+    <h4><i class="fa fa-eraser fa-fw"></i> Delete signatures</h4>
+    <p>
+        Signatures can be detached by several ways.
+    </p>
+    <ul>
+        <li>Clear Signatures: <small>Delete all signatures by </small><kbd>click</kbd><small> at the <em>"Clear Signatures"</em> button</small></li>
+        <li>Delete Signature: <small>Delete a signature by </small><kbd>click</kbd><small> at the (<i class="fa fa-close fa-fw"></i>) button at the end of a row</small></li>
+        <li>Automatically: <small>Signatures will be deleted automatically after some days</small></li>
+    </ul>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+    <h2 id="pf-manual-chart"><i class="fa fa-bar-chart fa-lg fa-fw"></i>&nbsp;&nbsp;Chart</h2>
+    <p>
+        <em class="pf-brand">pathfinder</em> comes along with several visual charts graphs.
+        In order to provide the pilot with useful information about his environment, data visualisation is a good way to compress the amount of relevant data.
+    </p>
+    <h4><i class="fa fa-align-left  fa-fw"></i> Trade hub range</h4><p>
+    <p>
+        The <em>"Trade hub range"</em> table is available for any <em>"K-space"</em> system. Each row represents the jump distance to a main <em>"Trade-Hub"</em>.
+        Each system jump is represented by a <i class="fa fa-square fa-fw"></i> with the color of its <em>"Security status"</em> <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-security">more</a>)</small>.
+    </p>
+    <ul class="fa-ul">
+        <li><i class="fa-li fa fa-square pf-system-security-1-0"></i></span> <samp>1-0</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-9"></i></span> <samp>0.9</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-8"></i></span> <samp>0.8</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-7"></i></span> <samp>0.7</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-6"></i></span> <samp>0.6</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-5"></i></span> <samp>0.5</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-4"></i></span> <samp>0.4</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-3"></i></span> <samp>0.3</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-2"></i></span> <samp>0.2</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-1"></i></span> <samp>0.1</samp></li>
+        <li><i class="fa-li fa fa-square pf-system-security-0-0"></i></span> <samp>0.0 - -1.0</samp></li>
+    </ul>
+    <h4><i class="fa fa-bar-chart fa-fw"></i> Recent activity</h4><p>
+    <p>
+        The <em>"Recent activity"</em> bar chart is available for any active system <small>(<a href="#" data-target="#pf-manual-scrollspy-anchor-system-active">more</a>)</small>.
+        The chart shows all ship kills in a system during the last <samp>24h</samp>. If <em class="pf-brand">pathfinder</em> detects recent kills (within the last hour), a small label is shown above the graph.
+    </p>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+    <h2 id="pf-manual-notification"><i class="fa fa-bullhorn fa-lg fa-fw"></i>&nbsp;&nbsp;Notification</h2>
+
+    <h4>Types</h4>
+
+    <div class="alert alert-success"><span class="txt-color txt-color-success">Success</span><small> (success message after pilot interaction)</small></div>
+    <div class="alert alert-info"><span class="txt-color txt-color-information">Information</span><small> (non-important additional information)</small></div>
+    <div class="alert alert-warning"><span class="txt-color txt-color-warning">Warning</span><small> (important non-critical information)</small></div>
+    <div class="alert alert-danger"><span class="txt-color txt-color-danger">Error</span><small> (very important information of error)</small></div>
+
+    <h4 id="pf-manual-scrollspy-anchor-notification-desktop">Desktop push notifications</h4>
+    <p>
+        <em class="pf-brand">pathfinder</em> supports desktop push notifications. The first time this kind of notification is send to a client, a Browser security question must be confirmed.
+        In order to test desktop push notifications <kbd>click</kbd> the "Notification test" <small>(<i class="fa fa-bullhorn fa-fw"></i>)</small> option in the main menu <small>(<i class="fa fa-bars fa-fw"></i>)</small>.<br>
+        Events that trigger desktop notification.
+    </p>
+    <ul>
+        <li>New Rally point</span> <small>(<i class="fa fa-users fa-fw"></i> <a href="#" data-target="#pf-manual-scrollspy-anchor-system-rally">more</a>)</small></li>
+        <li>System found with logged of pilots</span><small> (<a href="#">coming soon™</a></small>)</li>
+    </ul>
+
+    <hr class="pf-manual-scroll-break">
+    {{! ================================================================================================================================================  }}
+
+</div>