From cfa3cfa3240443e55cbf3a25ce178f76e978b379 Mon Sep 17 00:00:00 2001
From: exodus4d <exodus4d@gmail.com>
Date: Tue, 23 Dec 2014 07:37:09 +0100
Subject: [PATCH] map legend dialog

---
 .idea/dictionaries/exodus4d.xml               |   7 +
 .idea/jsLinters/jshint.xml                    |   6 +-
 index.htm                                     |   2 +-
 js/app.js                                     |  44 +-
 js/app/init.js                                |  22 +-
 js/app/main.js                                |  32 +-
 js/app/map/map.js                             | 979 +++++++++++++++---
 js/app/module_map.js                          |  30 +-
 js/app/notification.js                        |  91 +-
 js/app/page.js                                | 263 ++++-
 js/app/util.js                                |  92 +-
 js/lib/bootbox.min.js                         |   2 +-
 js/lib/jquery.dragToSelect.js                 | 384 +++++++
 js/lib/jquery.easypiechart.min.js             |   9 +
 js/lib/jquery.hoverIntent.minified.js         |   9 +
 sass/_colors.scss                             |  10 +-
 sass/_variables.scss                          |  32 +-
 sass/bootstrap/_dropdowns.scss                |   5 +-
 sass/bootstrap/_list-group.scss               |   2 +-
 sass/bootstrap/_navbar.scss                   |   3 +-
 sass/bootstrap/_scaffolding.scss              |   1 +
 sass/bootstrap/_wells.scss                    |  10 +-
 sass/layout/_main.scss                        | 167 ++-
 sass/layout/_map.scss                         | 108 +-
 .../library/drag-to-select/_dragToSelect.scss |  15 +
 .../library/easy-pie-chart/_easyPieChart.scss |  38 +
 sass/library/pnotify/_pnotify.core.scss       |  10 +
 sass/pathfinder.scss                          |  14 +
 sass/smartadmin/_main-colorpallet.scss        |   9 +-
 sass/smartadmin/_main.scss                    |  14 +-
 templates/modules/contextmenu.html            |   7 +-
 templates/modules/footer.html                 |  11 +
 templates/modules/header.html                 |  15 +-
 templates/modules/jump_info_dialog.html       |  70 ++
 templates/modules/map_legend_dialog.html      | 324 ++++++
 .../modules/signature_reader_dialog.html      |   4 +-
 36 files changed, 2538 insertions(+), 303 deletions(-)
 create mode 100644 js/lib/jquery.dragToSelect.js
 create mode 100644 js/lib/jquery.easypiechart.min.js
 create mode 100644 js/lib/jquery.hoverIntent.minified.js
 create mode 100644 sass/library/drag-to-select/_dragToSelect.scss
 create mode 100644 sass/library/easy-pie-chart/_easyPieChart.scss
 create mode 100644 templates/modules/footer.html
 create mode 100644 templates/modules/jump_info_dialog.html
 create mode 100644 templates/modules/map_legend_dialog.html

diff --git a/.idea/dictionaries/exodus4d.xml b/.idea/dictionaries/exodus4d.xml
index dd348256..1e7f7978 100644
--- a/.idea/dictionaries/exodus4d.xml
+++ b/.idea/dictionaries/exodus4d.xml
@@ -3,17 +3,24 @@
     <words>
       <w>addclass</w>
       <w>bootbox</w>
+      <w>contextmenu</w>
       <w>cytaclysmic</w>
       <w>dashstyle</w>
+      <w>datatables</w>
+      <w>deps</w>
       <w>fontawesome</w>
       <w>jqueryui</w>
       <w>killboard</w>
       <w>killmail</w>
+      <w>mouseover</w>
       <w>nonblock</w>
+      <w>pnotify</w>
       <w>scrollbar</w>
       <w>scrollbars</w>
+      <w>scrollspy</w>
       <w>slidebar</w>
       <w>slidebars</w>
+      <w>stargate</w>
       <w>tbody</w>
       <w>textarea</w>
     </words>
diff --git a/.idea/jsLinters/jshint.xml b/.idea/jsLinters/jshint.xml
index 37cb5c1a..bd910b1d 100644
--- a/.idea/jsLinters/jshint.xml
+++ b/.idea/jsLinters/jshint.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="JSHintConfiguration" version="2.3.0" use-config-file="false">
+  <component name="JSHintConfiguration" version="2.5.10" use-config-file="false">
     <option bitwise="true" />
     <option camelcase="false" />
     <option curly="true" />
@@ -48,9 +48,9 @@
     <option couch="false" />
     <option devel="false" />
     <option dojo="false" />
-    <option jquery="false" />
+    <option jquery="true" />
     <option mootools="false" />
-    <option node="false" />
+    <option node="true" />
     <option nonstandard="false" />
     <option phantom="false" />
     <option prototypejs="false" />
diff --git a/index.htm b/index.htm
index a5f0bf5f..5eba9c35 100644
--- a/index.htm
+++ b/index.htm
@@ -9,7 +9,7 @@
         <meta name="keywords" content="eve,wormhole,mapping,tool,mmo,space,game,igb">
         <meta name="author" content="Exodus 4D">
 
-        <title>Pathfinder - mapping tool</title>
+        <title>Pathfinder - Mapping Tool</title>
 
         <link rel="stylesheet" type="text/css" media="screen" href="css/pathfinder.css">
     </head>
diff --git a/js/app.js b/js/app.js
index 5d768cc4..eee58446 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,30 +3,33 @@ requirejs.config({
     baseUrl: 'js', // user build_js files, change to "js" for un-compressed source
     paths: {
         layout: 'layout',
-        jquery: 'lib/jquery-1.11.1.min',
-        //jquery: "lib/jquery-2.1.1.min",
-        //jqueryUI: "lib/jquery-ui.min",
-        jqueryUI: 'lib/jquery-ui-custom.min',                           // custom script (without tooltip -> conflict with bootstrap)
-        bootstrap: 'lib/bootstrap.min',                                 // Bootstrap js code - http://getbootstrap.com/javascript/
-        text: 'lib/requirejs/text',                                     // A RequireJS/AMD loader plugin for loading text resources.
+        jquery: 'lib/jquery-1.11.1.min',                                // v1.11.1 jQuery
+        //jquery: "lib/jquery-2.1.1.min",                               // v2.1.1 jQuery
+        //jqueryUI: "lib/jquery-ui.min",                                // v1.11.2 jQuery UI default
+        jqueryUI: 'lib/jquery-ui-custom.min',                           // v1.11.2 custom script (without tooltip -> conflict with bootstrap)
+        bootstrap: 'lib/bootstrap.min',                                 // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript/
+        text: 'lib/requirejs/text',                                     // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
         templates: '../templates',                                      // template dir
-        slidebars: 'lib/slidebars',                                     // Slidebars - side menu plugin http://plugins.adchsm.me/slidebars/
-        jsPlumb: 'lib/jsPlumb-1.6.4-min',                               // jsPlumb - main map draw plugin http://www.jsplumb.org/
-        customScrollbar: 'lib/jquery.mCustomScrollbar.concat.min',      // Custom scroll bars - http://manos.malihu.gr/
-        datatables: 'lib/jquery.dataTables.min',                        // DataTables - tables
+        slidebars: 'lib/slidebars',                                     // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars/
+        jsPlumb: 'lib/jsPlumb-1.6.4-min',                               // v1.4.6 jsPlumb - main map draw plugin http://www.jsplumb.org/
+        customScrollbar: 'lib/jquery.mCustomScrollbar.concat.min',      // v3.1.11 Custom scroll bars - http://manos.malihu.gr/
+        datatables: 'lib/jquery.dataTables.min',                        // v1.10.3 DataTables - tables
         datatablesBootstrap: 'lib/dataTables.bootstrap',                // DataTables - not used (bootstrap style)
-        xEditable: 'lib/bootstrap-editable.min',                        // X-editable - in placed editing
-        morris: 'lib/morris.min',                                       // Morris.js - graphs and charts
-        raphael: 'lib/raphael-min',                                     // Raphaël - required for morris (dependency)
-        bootbox: 'lib/bootbox.min',                                     // Bootbox.js - custom dialogs
+        xEditable: 'lib/bootstrap-editable.min',                        // v1.5.1 X-editable - in placed editing
+        morris: 'lib/morris.min',                                       // v0.5.0 Morris.js - graphs and charts
+        raphael: 'lib/raphael-min',                                     // v2.1.2 Raphaël - required for morris (dependency)
+        bootbox: 'lib/bootbox.min',                                     // v4.3.0 Bootbox.js - custom dialogs
+        easyPieChart: 'lib/jquery.easypiechart.min',                    // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart/
+        dragToSelect: 'lib/jquery.dragToSelect',                        // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select/
+        hoverIntent: 'lib/jquery.hoverIntent.minified',                 // v1.8.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
 
-        pnotify: 'lib/pnotify/pnotify.core',                            // PNotify - notification core file
+        pnotify: 'lib/pnotify/pnotify.core',                            // v2.0.1 PNotify - notification core file
         //'pnotify.buttons': 'lib/pnotify/pnotify.buttons',             // PNotify - buttons notification extension
         //'pnotify.confirm': 'lib/pnotify/pnotify.confirm',             // PNotify - confirmation notification extension
         'pnotify.nonblock': 'lib/pnotify/pnotify.nonblock',             // PNotify - notification non-block extension (hover effect)
         'pnotify.desktop': 'lib/pnotify/pnotify.desktop',               // PNotify - desktop push notification extension
         //'pnotify.history': 'lib/pnotify/pnotify.history',             // PNotify - history push notification history extension
-        'pnotify.callbacks': 'lib/pnotify/pnotify.callbacks'           // PNotify - callbacks push notification extension
+        'pnotify.callbacks': 'lib/pnotify/pnotify.callbacks'            // PNotify - callbacks push notification extension
         // 'pnotify.reference': 'lib/pnotify/pnotify.reference'         // PNotify - reference push notification extension
 
     },
@@ -63,6 +66,15 @@ requirejs.config({
         },
         pnotify: {
             deps : ['jquery']
+        },
+        easyPieChart: {
+            deps : ['jquery']
+        },
+        dragToSelect: {
+            deps : ['jquery']
+        },
+        hoverIntent: {
+            deps : ['jquery']
         }
     }
 });
diff --git a/js/app/init.js b/js/app/init.js
index 120abacd..b97c33ce 100644
--- a/js/app/init.js
+++ b/js/app/init.js
@@ -7,9 +7,12 @@ define(['jquery'], function($) {
     'use strict';
 
     var Config = {
-        url:{
-            zKillboard: 'https://zkillboard.com/api/',
-            eveCentral: 'http://api.eve-central.com/api/'
+        timer: {
+            mainPing: 3000                                          // main server ping
+        },
+        url: {
+            zKillboard: 'https://zkillboard.com/api/',              // killboard api
+            eveCentral: 'http://api.eve-central.com/api/'           // jump rout api
         },
         classes: {
             // system effects
@@ -139,8 +142,19 @@ define(['jquery'], function($) {
                     class: 'pf-system-status-unscanned',
                     label: 'unscanned'
                 }
+            },
+            // system info
+            systemInfo: {
+                rally: {
+                    class: 'pf-system-info-rally',
+                    label: 'rally point'
+                }
+            },
+            // easy-pie-charts
+            pieChart: {
+                class: 'pf-pie-chart',                              // class for all pie charts
+                pieChartMapCounterClass: 'pf-pie-chart-map-timer'   // class for timer chart
             }
-
         },
         // system effects
         systemEffects:{
diff --git a/js/app/main.js b/js/app/main.js
index 93f4c9cb..cb258044 100644
--- a/js/app/main.js
+++ b/js/app/main.js
@@ -4,12 +4,12 @@
 
 define([
     'jquery',
+    'app/init',
     'app/render',
     'app/ccp',
     'app/page',
-    'slidebars',
-    'app/module_map'
-], function($, Render, CCP) {
+    'app/module_map',
+], function($, Init, Render, CCP) {
 
     'use strict';
 
@@ -28,8 +28,8 @@ define([
         var mapData =[{
             map: {},
             config: {
-                name: 'Polaris',
                 id: 1,
+                name: 'Polaris',
                 scope: 'wormhole',
                 icon: 'fa-globe',
                 type: 'alliance'              // global, alliance, private
@@ -43,8 +43,10 @@ define([
                         type: 'wh',
                         security: 'C6',
                         status: 'friendly',
+                        locked: '1',
+                        rally: '0',
                         position: {
-                            x: 0,
+                            x: 8,
                             y: 0
                         }
                     },{
@@ -55,7 +57,7 @@ define([
                         security: 'C6',
                         status: 'empty',
                         position: {
-                            x: 60,
+                            x: 65,
                             y: 60
                         }
                     },{
@@ -65,8 +67,10 @@ define([
                         type: 'wh',
                         security: 'C6',
                         status: '',
+                        locked: '1',
+                        rally: '1',
                         position: {
-                            x: 200,
+                            x: 203,
                             y: 60
                         }
                     },{
@@ -98,7 +102,7 @@ define([
                         type: 'k-space',
                         status: '',
                         position: {
-                            x: 300,
+                            x: 301,
                             y: 250
                         }
                     },{
@@ -142,8 +146,6 @@ define([
                     }
                 ]
             }
-
-
         },
             {
             map: {},
@@ -242,7 +244,7 @@ define([
                                         ship: 'Proteus',
                                         status: 'corp'
                                     },{
-                                        name: 'Xtrah gfdfgdfgfd',
+                                        name: 'Xtrah',
                                         ship: 'Pod',
                                         status: 'ally'
                                     }
@@ -264,9 +266,15 @@ define([
                 console.log('update map done');
             }, 500);
 
+        // server ping
+        var triggerMainPing = function(){
+            var mapData = $('#' + config.mapModuleId).getMapModuleData();
 
+           // console.log(mapData);
+        };
+
+        setInterval(triggerMainPing, Init.timer.mainPing);
 
     });
 
-
 });
\ No newline at end of file
diff --git a/js/app/map/map.js b/js/app/map/map.js
index e8a7448a..dd57c6cc 100644
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -6,6 +6,8 @@ define([
     'bootbox',
     'jsPlumb',
     'customScrollbar',
+    'dragToSelect',
+    'hoverIntent',
     'app/map/contextmenu'
 ], function($, Init, Util, Render, bootbox) {
 
@@ -23,12 +25,15 @@ define([
         mapSnapToGrid: false,                                           // Snap systems to grid while dragging
         mapTabContentClass: 'pf-map-tab-content',                       // Tab-Content element (parent element)
         mapWrapperClass: 'pf-map-wrapper',                              // wrapper div (scrollable)
+        mapOverlayClass: 'pf-map-overlay',                              // class for map Overlay e.g. update counter
         mapClass: 'pf-map',                                             // class for all maps
         mapGridClass: 'pf-grid-small',                                  // class for map grid snapping
         mapIdPrefix: 'pf-map-',                                         // id prefix for all maps
         systemIdPrefix: 'pf-system-',                                   // id prefix for a system
         systemClass: 'pf-system',                                       // class for all systems
         systemActiveClass: 'pf-system-active',                          // class for an active system in a map
+        systemSelectedClass: 'pf-system-selected',                      // class for selected systems in a map
+        systemLockedClass: 'pf-system-locked',                          // class for locked systems in a map
         systemHeadClass: 'pf-system-head',                              // class for system head
         systemHeadNameClass: 'pf-system-head-name',                     // class for system name
         systemHeadExpandClass: 'pf-system-head-expand',                 // class for system head expand arrow
@@ -80,12 +85,12 @@ define([
         source: {
             filter: '.' + config.systemHeadNameClass,
             anchor: 'Continuous',
-            connector: [ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
-            maxConnections: 5,
+            connector: [ 'Bezier', { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
+            maxConnections: 20,
             allowLoopback:false,
             cssClass: config.endpointSourceClass,
             onMaxConnections:function(info, e) {
-                alert("Maximum connections (" + info.maxConnections + ") reached");
+                console.log(info.maxConnections);
             }/*,
 
             overlays:[
@@ -99,21 +104,13 @@ define([
         target: {
             filter: '.' + config.systemHeadNameClass,
             anchor: 'Continuous',
-            allowLoopback:false,
+            allowLoopback: false,
             cssClass: config.endpointTargetClass,
             dropOptions: {
                 tolerance: 'touch',
                 hoverClass: config.systemActiveClass,
                 activeClass: 'dragActive'
             },
-            /*overlays:[
-                [ "Label", {
-                    location:[0.5, 1.5],
-                    label:"Drag",
-                    cssClass:"endpointSourceLabel"
-                } ]
-            ],*/
-
             beforeDrop: function(info){
                 // check function for new connection
 
@@ -281,13 +278,14 @@ define([
      */
     var toggleSystemTooltip = function(systems, show, options){
 
-        $.each(systems, function(i, system){
+        for(var i = 0; i < systems.length; i++){
             if(options){
-                $(system).tooltip(options);
+                $(systems[i]).tooltip(options);
             }
 
-            $(system).tooltip(show);
-        });
+            $(systems[i]).tooltip(show);
+        }
+
     };
 
     /**
@@ -306,10 +304,13 @@ define([
         var effectClass = Util.getEffectInfoForSystem(data.effect, 'class');
         var secClass = Util.getSecurityClassForSystem(data.security);
         var statusClass = Util.getStatusInfoForSystem(data.status, 'class');
+        var statusLabel = Util.getStatusInfoForSystem(data.status, 'label');
+
+        var systemId = config.systemIdPrefix + data.id;
 
         system = $('<div>', {
             // system
-            id: config.systemIdPrefix + data.id,
+            id: systemId,
             class: [config.systemClass, statusClass].join(' ')
         }).append(
             // system head
@@ -321,15 +322,20 @@ define([
                     href: '#',
                     class: config.systemHeadNameClass
                 }).attr('data-value', data.name)
+            ).append(
+                // System locked status
+                $('<i>', {
+                    class: ['fa', 'fa-lock', 'fa-fw'].join(' ')
+                }).attr('title', 'locked')
             ).append(
                 // System effect color
                 $('<i>', {
-                    class: ['fa fa-square ', Util.getEffectInfoForSystem('effect', 'class'), effectClass].join(' ')
-                })
+                    class: ['fa', 'fa-square ', 'fa-fw', Util.getEffectInfoForSystem('effect', 'class'), effectClass].join(' ')
+                }).attr('title', 'effect')
             ).append(
                 // expand option
                 $('<i>', {
-                    class: ['fa fa-angle-down ', config.systemHeadExpandClass].join(' ')
+                    class: ['fa', 'fa-angle-down ', config.systemHeadExpandClass].join(' ')
                 })
             ).prepend(
                 $('<span>', {
@@ -337,7 +343,6 @@ define([
                     text: data.security
                 })
             )
-
         ).append(
                 // system body
                 $('<div>', {
@@ -345,8 +350,27 @@ define([
                 })
             ).data('name', data.name).css({ "left": data.position.x + "px", 'top': data.position.y + 'px' });
 
-        system.attr('data-id', data.id);
-        system.attr('data-mapid', mapContainer.attr('data-mapid'));
+        system.data('id', data.id);
+        system.data('status', statusLabel);
+        system.attr('data-mapid', mapContainer.data('id'));
+
+        // locked system
+        if(
+            system.data( 'locked') !== true &&
+            data.locked === '1'
+        ){
+            system.toggleLockSystem(false, {hideNotification: true, hideCounter: true, map: map});
+        }
+
+        // rally system
+        if(
+            system.data( 'rally') !== true &&
+            data.rally === '1'
+        ){
+            system.toggleRallyPoint(false, {hideNotification: true, hideCounter: true});
+        }
+
+
 
         return $(system);
     };
@@ -365,7 +389,11 @@ define([
         var mapContainer = $('<div>', {
             id: config.mapIdPrefix + mapConfig.config.id,
             class: [config.mapClass].join(' ')
-        }).attr('data-mapid', mapConfig.config.id);
+        });
+
+        // add additional information
+        mapContainer.data('id', mapConfig.config.id);
+        mapContainer.data('name', mapConfig.config.name);
 
         mapWrapper.append(mapContainer);
 
@@ -467,7 +495,9 @@ define([
             makeEditable(newSystem);
 
             // make new system draggable
-            makeDraggable(map, newSystem);
+            if(! newSystem.data('locked')){
+                $(newSystem).multiDraggable({map: map, group: newSystem});
+            }
 
             // make target
             makeTarget(map, newSystem);
@@ -484,8 +514,8 @@ define([
                 $.each(connectedSystems, function(i, connectSystem){
 
                     var connectionData = {
-                        source: $(connectSystem).attr('data-id'),
-                        target: $(newSystem).attr('data-id'),
+                        source: $(connectSystem).data('id'),
+                        target: $(newSystem).data('id'),
                         type: 'wh'
                     };
                     drawConnection(map, connectionData);
@@ -501,6 +531,8 @@ define([
      */
     var deleteSystem = function(map, system){
 
+        system = $(system);
+
         // detach all connections
         map.detachAllConnections(system);
 
@@ -517,7 +549,7 @@ define([
     };
 
     /**
-     * make a syste name editable by x-editable
+     * make a system name editable by x-editable
      * @param system
      */
     var makeEditable = function(system){
@@ -530,6 +562,7 @@ define([
             title: 'system name',
             placement: 'top',
             onblur: 'submit',
+            toggle: 'dblclick',
             showbuttons: false
         });
 
@@ -541,73 +574,112 @@ define([
     };
 
     /**
-     * make one or multiple systems draggable
-     * @param map
-     * @param String[] systems
+     * get map Overlay element by any element within a specific map
+     * @returns {*}
      */
-    var makeDraggable = function(map, systems){
+    $.fn.getMapOverlay = function(){
 
-        var mapContainer = $(map.getContainer());
+        return $(this).parents('.' + config.mapWrapperClass).find('.' + config.mapOverlayClass);
+    };
 
-        map.draggable(systems, {
-            containment: mapContainer,// 'parent',
-            zIndex: 2000,
-            start: function(e){
-                // drag start
+    /**
+     * get the map counter chart by an overlay
+     * @returns {*}
+     */
+    $.fn.getMapCounter = function(){
 
-                // hide tooltip
-                toggleSystemTooltip([e.target], 'hide');
-            },
-            stop: function(e, ui){
+        var mapOverlay = $(this);
 
-                var system = $(e.target);
+        return mapOverlay.find('.' + Init.classes.pieChart.pieChartMapCounterClass);
+    };
 
-                // drag stop
-                var mapContainer = $( system.parent() );
+    /**
+     * draws the map update counter to the map overlay
+     * @param percent
+     * @returns {*}
+     */
+    $.fn.setMapUpdateCounter = function(percent, value){
 
-                // update z-index for dragged system + connections
-                updateZIndex(e.target);
+        var mapOverlay = $(this);
 
-                // rerender tooltip
-                toggleSystemTooltip([e.target], 'show');
+        // check if counter already exists
+        var counterChart = mapOverlay.getMapCounter();
 
-                // set new position for popover edit field (system name)
-                var distanceTop = ui.position.top;
-                var distanceLeft = ui.position.left;
+        if(counterChart.length === 0){
+            // create new counter
 
-                var placement = 'top';
-                if(distanceTop < 100){
-                    placement = 'bottom';
-                }
-                if(distanceLeft < 100){
-                    placement = 'right';
-                }
+            counterChart = $('<div>', {
+                class: [Init.classes.pieChart.class, Init.classes.pieChart.pieChartMapCounterClass].join(' ')
+            }).attr('data-percent', percent).append(
+                $('<span>', {
+                    text: value
+                })
+            );
 
-                $(e.target).find('.' + config.systemHeadNameClass).editable('option', 'placement', placement);
+            mapOverlay.append(counterChart);
 
-            },
-            drag: function(e, ui){
+            // init counter
+            counterChart.initMapUpdateCounter();
 
-                // if active make system snapping to a fixed grid
-                if(config.mapSnapToGrid){
-                    var snapTolerance = $(this).draggable('option', 'snapTolerance');
-                    var topRemainder = ui.position.top % 20;
-                    var leftRemainder = ui.position.left % 20;
+            // set tooltip
+            mapOverlay.attr('data-toggle', 'tooltip');
+            mapOverlay.attr('data-placement', 'left');
+            mapOverlay.attr('title', 'update counter');
+            mapOverlay.tooltip();
+        }
 
-                    if (topRemainder <= snapTolerance) {
-                        ui.position.top = ui.position.top - topRemainder;
-                    }
+        return counterChart;
+    };
 
-                    if (leftRemainder <= snapTolerance) {
-                        ui.position.left = ui.position.left - leftRemainder;
-                    }
+    /**
+     * start the map update counter or reset
+     */
+    $.fn.startMapUpdateCounter = function(){
 
-                    map.repaint( e.target );
+        var mapOverlay = $(this);
+        var counterChart = mapOverlay.getMapCounter();
 
-                }
+        var seconds = 10;
 
+        // get counter interval (in case there is an active one)
+        var interval = counterChart.data('interval');
+
+        if(interval){
+            clearInterval(interval);
+        }
+
+        mapOverlay.fadeIn(200);
+
+        var counterChartLabel = counterChart.find('span');
+
+        var percentPerCount = 100 / seconds;
+
+        var timer = function(){
+            seconds--;
+
+            counterChart.data('easyPieChart').update( percentPerCount * seconds);
+            counterChartLabel.text(seconds);
+            if(seconds <= 0){
+                clearInterval(mapUpdateCounter);
+
+
+                setTimeout(function(){
+                    mapOverlay.fadeOut(200);
+                    counterChart.data('interval', false);
+                }, 800);
+
+                return;
             }
-        });
+        };
+
+        // start timer
+        var mapUpdateCounter = setInterval(timer, 1000);
+        counterChart.data('easyPieChart').update( percentPerCount * seconds);
+        counterChartLabel.text(seconds);
+
+        // store counter
+        counterChart.data('interval', mapUpdateCounter);
+
     };
 
     /**
@@ -670,6 +742,14 @@ define([
             source: config.systemIdPrefix + connectionData.source,
             target: config.systemIdPrefix + connectionData.target,
             type: connectionData.type
+
+            /* experimental (straight connections)
+            anchors: [
+                [ "Perimeter", { shape: 'Rectangle' }],
+                [ "Perimeter", { shape: 'Rectangle' }]
+            ]
+            */
+
         });
 
         // set Observer for new Connection
@@ -679,7 +759,7 @@ define([
     };
 
     /**
-     * load contextmenu template for map
+     * load context menu template for map
      */
     var initMapContextMenu = function(){
 
@@ -692,7 +772,9 @@ define([
             id: config.mapContextMenuId,
             items: [
                 {icon: 'fa-plus', action: 'add_system', text: 'add system'},
-                {icon: 'fa-info-circle', action: 'info', text: 'info'}
+                {icon: 'fa-info', action: 'info', text: 'info'},
+                {divider: true},
+                {icon: 'fa-eraser', action: 'delete_systems', text: 'delete systems'}
             ]
         };
 
@@ -712,10 +794,10 @@ define([
         var moduleData = {
             id: config.connectionContextMenuId,
             items: [
-                {icon: 'fa-info-circle', action: 'info', text: 'info'},
+                {icon: 'fa-info', action: 'info', text: 'info'},
                 {icon: 'fa-plane', action: 'frigate', text: 'frigate hole'},
                 {icon: 'fa-warning', action: 'preserve_mass', text: 'preserve mass'},
-                {text: 'change status', subitems: [
+                {icon: 'fa-reply fa-rotate-180', text: 'change status', subitems: [
                     {subIcon: 'fa-clock-o', subAction: 'eol', subText: 'toggle EOL'},
                     {subDivider: true},
                     {subIcon: 'fa-circle', subAction: 'status_fresh', subText: 'stage 0 (fresh)'},
@@ -724,7 +806,7 @@ define([
 
                 ]},
                 {divider: true},
-                {icon: 'fa-eraser', action: 'delete', text: 'delete'},
+                {icon: 'fa-eraser', action: 'delete', text: 'delete'}
             ]
         };
 
@@ -757,10 +839,11 @@ define([
             id: config.systemContextMenuId,
             items: [
                 {icon: 'fa-plus', action: 'add_system', text: 'add system'},
-                {icon: 'fa-eraser', action: 'delete_system', text: 'delete system'},
-                {icon: 'fa-info-circle', action: 'info', text: 'info'},
+                {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},
-                {text: 'change status', subitems: systemStatus}
+                {icon: 'fa-eraser', action: 'delete_system', text: 'delete system'}
             ]
         };
 
@@ -769,23 +852,34 @@ define([
     };
 
     /**
-     * set up contextmenu for all Systems within a given map
+     * set up context menu for all Systems within a given map
      * @param endpoints
      */
     var setSystemObserver = function(map, system){
 
-        var systemHeadExpand = $( $(system).find('.' + config.systemHeadExpandClass) );
-        var systemBody = $( $(system).find('.' + config.systemBodyClass) );
+        system = $(system);
+
+        var systemHeadExpand = $( system.find('.' + config.systemHeadExpandClass) );
+        var systemBody = $( system.find('.' + config.systemBodyClass) );
 
         var bodyItemheight = 16;
 
-        // init system body expand
-        systemHeadExpand.hover(function(e){
+        // init system tooltips ================================================================
+        var systemTooltipOptions = {
+            toggle: 'tooltip',
+            placement: 'right',
+            viewport: system.id
+        };
+
+        system.find('.fa').tooltip(systemTooltipOptions);
+
+        // init system body expand ============================================================
+        systemHeadExpand.hoverIntent(function(e){
             // hover in
             var hoverSystem = $(this).parents('.' + config.systemClass);
 
             // get ship counter and calculate expand height
-            var shipCounter = parseInt( $(system).attr('data-original-title') );
+            var shipCounter = parseInt( system.attr('data-original-title') );
 
             var expandheight = shipCounter * bodyItemheight;
 
@@ -796,7 +890,7 @@ define([
                     'min-width': '150px'
                 },
                 {
-                    queue:false,
+                   // queue:false,
                     duration: 100,
                     step: function(){
                         // repaint connections of current system
@@ -818,7 +912,7 @@ define([
                     'min-width': '80px'
                 },
                 {
-                    queue:false,
+                  //  queue:false,
                     duration: 100,
                     step: function(){
                         // repaint connections of current system
@@ -838,14 +932,17 @@ define([
         // context menu ==================================================================
 
         // trigger context menu
-        $(system).on('contextmenu', function(e){
+        system.on('contextmenu', function(e){
+
+            // hide all map tooltips
+
             $(e.target).trigger('pf:openContextMenu', [e, this]);
             e.preventDefault();
             return false;
         });
 
-        // init contextmenu
-        $(system).contextMenu({
+        // init context menu
+        system.contextMenu({
             menuSelector: "#" + config.systemContextMenuId,
             menuSelected: function (params) {
 
@@ -855,23 +952,60 @@ define([
                 // current system
                 var currentSystem = $(params.component);
 
+                // system name
+                var currentSystemName = currentSystem.getSystemInfo( ['name'] );
+
                 switch(action){
                     case 'add_system':
                         // add a new system
                         showNewSystemDialog(map, {sourceSystem: currentSystem} );
 
                         break;
-                    case 'delete_system':
-                        // confirm dialog
-                        bootbox.confirm('Delete system with all its connections?', function(result) {
-                            if(result){
-                                var systemName = currentSystem.getSystemInfo(['name']);
-                                deleteSystem(map, currentSystem);
+                    case 'lock_system':
+                        // lock system
 
-                                Util.showNotify({title: 'System deleted', text: systemName, type: 'success'});
-                            }
-                        });
+                        currentSystem.toggleLockSystem(true, {map: map});
 
+                        // repaint connections, -> system changed its size!
+                        map.repaint( currentSystem );
+                        break;
+                    case 'set_rally':
+                        // set rally point
+
+                        if( ! currentSystem.data( 'rally' ) ){
+
+                            // show confirm dialog
+                            var rallyDialog = bootbox.dialog({
+                                message: 'Do you want to poke active pilots?',
+                                title: 'Set rally point for system "' + currentSystemName + '"',
+                                buttons: {
+                                    close: {
+                                        label: 'cancel',
+                                        className: 'btn-default',
+                                        callback: function(){
+                                            $(rallyDialog).modal('hide');
+                                        }
+                                    },
+                                    setRallyPoke: {
+                                        label: '<i class="fa fa-fw fa-bullhorn"></i> Set rally and poke',
+                                        className: 'btn-info',
+                                        callback: function() {
+                                            currentSystem.toggleRallyPoint(true, {});
+                                        }
+                                    },
+                                    setRallay: {
+                                        label: '<i class="fa fa-fw fa-users"></i> Set rally',
+                                        className: 'btn-primary',
+                                        callback: function() {
+                                            currentSystem.toggleRallyPoint(false, {});
+                                        }
+                                    }
+                                }
+                            });
+                        }else{
+                            // remove rally point
+                            currentSystem.toggleRallyPoint(false, {});
+                        }
                         break;
                     case 'change_status_unknown':
                     case 'change_status_friendly':
@@ -879,6 +1013,10 @@ define([
                     case 'change_status_hostile':
                     case 'change_status_empty':
                     case 'change_status_unscanned':
+
+                        $(currentSystem).getMapOverlay().startMapUpdateCounter();
+
+
                         // remove all status classes from system
                         $.each(Init.classes.systemStatus, function(status, statusData){
                             currentSystem.removeClass( statusData.class );
@@ -887,10 +1025,25 @@ define([
                         // add new class
                         var statusString = action.split('_');
                         var statusClass = Util.getStatusInfoForSystem(statusString[2], 'class');
+                        var statusLabel = Util.getStatusInfoForSystem(statusString[2], 'label');
 
+                        currentSystem.data('status', statusLabel);
                         currentSystem.addClass( statusClass );
                         break;
-                    case 'info': console.log('info')
+                    case 'delete_system':
+                        // confirm dialog
+                        bootbox.confirm('Delete system and all its connections?', function(result) {
+                            if(result){
+                                $(currentSystem).getMapOverlay().startMapUpdateCounter();
+
+
+                                var systemName = currentSystem.getSystemInfo(['name']);
+                                deleteSystem(map, currentSystem);
+
+                                Util.showNotify({title: 'System deleted', text: systemName, type: 'success'});
+                            }
+                        });
+
                         break;
                 }
 
@@ -898,23 +1051,190 @@ define([
         });
 
         // load system data =================================================================================
-        // trigger event for this system
-        $(system).on('click', function(e){
+        system.on('click', function(e){
 
-            // get current map
-            var currentSystem = $(e.target).parents('.' + config.systemClass);
+            var system = $(this);
 
-            markSystemActive(map, currentSystem);
+            if(e.which === 1){
+                // left mouse button
 
-            // get parent Tab Content and fire update event
-            var tabContentElement = getTabContentElementByMapElement(currentSystem);
+                if(e.ctrlKey === true){
+                    // select system
+                    system.toggleSelectSystem(map);
+                }else{
+                    // activate system
+                    markSystemActive(map, system);
 
-            var data = {
-                system: currentSystem
-            };
+                    // get parent Tab Content and fire update event
+                    var tabContentElement = getTabContentElementByMapElement( system );
 
-            $(tabContentElement).trigger('pf:updateSystemData', [data]);
+                    var data = {
+                        system: system
+                    };
+
+                    $(tabContentElement).trigger('pf:updateSystemData', [data]);
+                }
+
+            }
         });
+
+
+    };
+
+    /**
+     * toggle select status of a system
+     */
+    $.fn.toggleSelectSystem = function(map){
+        var system = $(this);
+
+        var mapElement = system.parent();
+
+        if( system.data('locked') !== true ){
+
+            if( system.hasClass( config.systemSelectedClass ) ){
+                system.removeClass( config.systemSelectedClass );
+
+                // set single draggable for this system
+                system.multiDraggable({map: map, group: system});
+            }else{
+                system.addClass( config.systemSelectedClass );
+            }
+
+            // there can still be multiple selected systems :)
+            var selectedSystems = $(mapElement).getSelectedSystems();
+
+            if(selectedSystems.length > 0){
+                $(selectedSystems).multiDraggable({map: map, group: selectedSystems});
+            }
+
+        }else{
+            var systemName = system.getSystemInfo( ['name'] );
+
+            Util.showNotify({title: 'System is locked', text: systemName, type: 'error'});
+        }
+
+    };
+
+    /**
+     * get all selected (NOT active) systems in a map
+     * @returns {*}
+     */
+    $.fn.getSelectedSystems = function(){
+
+        var mapElement = $(this);
+
+        var systems = mapElement.find('.' + config.systemSelectedClass);
+
+        return systems;
+    };
+
+    /**
+     * toggle log status of a system
+     * @param poke
+     * @param options
+     */
+    $.fn.toggleLockSystem = function(poke, options){
+
+        var system = $(this);
+
+        var map = options.map;
+
+        var hideNotification = false;
+        if(options.hideNotification === true){
+            hideNotification = true;
+        }
+
+        var hideCounter = false;
+        if(options.hideCounter === true){
+            hideCounter = true;
+        }
+
+        var systemName = system.getSystemInfo( ['name'] );
+
+        if( system.data( 'locked' ) === true ){
+            system.data('locked', false);
+            system.removeClass( config.systemLockedClass );
+
+            // set draggable capability
+            system.multiDraggable({map: map, group: system});
+
+            if(! hideNotification){
+                Util.showNotify({title: 'System lock removed', text: 'System: ' + systemName, type: 'success'});
+            }
+        }else{
+            system.data('locked', true);
+            system.addClass( config.systemLockedClass );
+
+            // remove draggable capability
+            system.destroySystemDraggable();
+
+            if(! hideNotification){
+                Util.showNotify({title: 'System is locked', text: 'System: ' + systemName,  type: 'success'});
+            }
+        }
+
+        if(! hideCounter){
+            $(system).getMapOverlay().startMapUpdateCounter();
+        }
+
+    };
+
+    /**
+     * toggle a system as rally point and display notifications
+     * @param poke
+     * @param options
+     */
+    $.fn.toggleRallyPoint = function(poke, options){
+
+        var system = $(this);
+
+        var rallyClass = Util.getInfoForSystem('rally', 'class');
+
+        var hideNotification = false;
+        if(options.hideNotification === true){
+            hideNotification = true;
+        }
+
+        var hideCounter = false;
+        if(options.hideCounter === true){
+            hideCounter = true;
+        }
+
+        // check of system is already marked as rally
+        if( system.data( 'rally' ) === true ){
+            system.removeClass( rallyClass );
+            system.data( 'rally', false );
+
+            if(! hideNotification){
+                Util.showNotify({title: 'Rally point removed', type: 'success'});
+            }
+        }else{
+            system.addClass( rallyClass );
+            system.data( 'rally', true );
+
+            if(! hideNotification){
+                var systemName = system.getSystemInfo( ['name'] );
+
+                var notificationOptions = {
+                    title: 'New rally Point',
+                    text: 'System: ' + systemName,
+                    type: 'success'
+                };
+
+                if(poke === true){
+                    // desktop poke
+                    Util.showNotify(notificationOptions, {desktop: true, stack: 'barBottom'});
+                }else{
+                    Util.showNotify(notificationOptions, {stack: 'barBottom'});
+                }
+            }
+
+        }
+
+        if(! hideCounter){
+            $(system).getMapOverlay().startMapUpdateCounter();
+        }
+
     };
 
     /**
@@ -961,7 +1281,7 @@ define([
                 // current map
                 var currentMapElement = $(params.component);
 
-                var currentMapId = parseInt( currentMapElement.attr('data-mapid') );
+                var currentMapId = parseInt( currentMapElement.data('id') );
 
                 // get map instance
                var currentMap = getMapInstance(currentMapId);
@@ -974,6 +1294,26 @@ define([
                         // add new system dialog
                         showNewSystemDialog(currentMap, {position: position});
                         break;
+                    case 'delete_systems':
+                        // delete all selected systems with its connections
+                        var selectedSystems = $(currentMapElement).getSelectedSystems();
+
+                        if(selectedSystems.length > 0){
+                            bootbox.confirm('Delete ' + selectedSystems.length + ' selected systems and its connections?', function(result) {
+                                if(result){
+
+                                    for(var i = 0; i < selectedSystems.length; i++){
+                                        deleteSystem(currentMap, selectedSystems[i]);
+                                    }
+
+                                    Util.showNotify({title: selectedSystems.length + ' systems deleted', type: 'success'});
+                                }
+                            });
+                        }else{
+                            Util.showNotify({title: 'No systems selected', type: 'error'});
+                        }
+
+                        break;
 
                 }
 
@@ -981,6 +1321,35 @@ define([
 
         });
 
+        // init drag-frame selection
+        $(container).dragToSelect({
+            selectables: '.' + config.systemClass,
+            onHide: function (selectBox, deselectedSystems) {
+                var selectedSystems = $(container).getSelectedSystems();
+
+                if(selectedSystems.length > 0){
+                    // make all selected systems draggable
+                    Util.showNotify({title: selectedSystems.length + ' systems selected', type: 'success'});
+
+                    $(selectedSystems).multiDraggable({map: map, group: selectedSystems});
+                }
+
+                // convert former group draggable systems so single draggable
+                for(var i = 0; i < deselectedSystems.length; i++){
+                    $(deselectedSystems[i]).multiDraggable({map: map, group: deselectedSystems[i]});
+                }
+
+
+            },
+            onShow: function(){
+            },
+            onRefresh: function(){
+            }
+        });
+
+
+
+
         // catch menu events ====================================================
 
         // toggle "snap to grid" option
@@ -1102,8 +1471,11 @@ define([
         for(var i = 0; i < info.length; i++){
             switch(info[i]){
                 case 'name':
+                    // get current system name/alias
                     systemInfo.push( $(this).find('.' + config.systemHeadNameClass).text() );
                     break;
+                default:
+                    systemInfo.push('bad system query');
             }
 
         }
@@ -1161,6 +1533,8 @@ define([
                             className: 'btn-primary',
                             callback: function () {
 
+                                $(options.sourceSystem).getMapOverlay().startMapUpdateCounter();
+
                                 // get form Values
                                 var form = $('#' + config.systemDialogId).find('form');
 
@@ -1212,7 +1586,7 @@ define([
                 }
             );
 
-            // make editable
+            // make dialog editable
             var modalFields = $('.bootbox .modal-dialog').find('.pf-editable-system-status');
 
             modalFields.editable({
@@ -1273,7 +1647,7 @@ define([
         if(map.getContainer() !== undefined){
             $.each(systems, function(i, system){
                 // get user Data for System
-                var systemId = parseInt( $(system).attr('data-id') );
+                var systemId = parseInt( $(system).data('id') );
 
                 var tempUserData = null;
                 $.each(userData.data.systems, function(j, systemData){
@@ -1296,7 +1670,78 @@ define([
 
             });
         }
+    };
 
+    /**
+     * collect all data for export/save for a map
+     * @returns {{}}
+     */
+    $.fn.getMapData = function(){
+
+        var mapElement = $(this);
+
+        var mapData = {};
+
+        // check if there is an active map counter that prevents collecting map data
+        var overlay = mapElement.getMapOverlay();
+        var counterChart = overlay.getMapCounter();
+
+        var interval = counterChart.data('interval');
+
+        if(! interval){
+            // map config ---------------------------------
+            var mapConfig = {};
+            mapConfig.id = mapElement.data('id');
+            mapConfig.name = mapElement.data('name');
+            mapData.config = mapConfig;
+
+            // map data -----------------------------------
+            var data = {};
+
+            // systems ------------------------------------
+            var systemsData = [];
+
+            var systems = mapElement.find('.' + config.systemClass);
+
+            for(var i = 0; i < systems.length; i++){
+
+                var tempSystem = $(systems[i]);
+                var systemData = {};
+                systemData.id = tempSystem.data('id');
+                systemData.alias = tempSystem.find('.' + config.systemHeadNameClass).editable('getValue', true);
+                systemData.status = tempSystem.data('status');
+                systemData.locked = tempSystem.data('locked');
+                systemData.rally = tempSystem.data('rally');
+
+                // position -------------------------------
+                var positionData = {};
+                var currentX = tempSystem.css('left');
+                var currentY = tempSystem.css('top');
+
+                // remove 'px'
+                positionData.x = parseInt( currentX.substring(0, currentX.length - 2) );
+                positionData.y = parseInt( currentY.substring(0, currentY.length - 2) );
+
+                systemData.position = positionData;
+
+                systemsData.push(systemData);
+            }
+
+
+            data.systems = systemsData;
+
+            // connections --------------------------------
+            var connections = [];
+
+            data.connections = connections;
+
+            mapData.data = data;
+        }else{
+            return false;
+        }
+
+
+        return mapData;
     };
 
     /**
@@ -1359,9 +1804,6 @@ define([
 
 
         });
-
-
-
     };
 
     /**
@@ -1371,6 +1813,17 @@ define([
         // get Map Scrollbar
         var scrollableElement = $(this).find('.' + config.mapWrapperClass);
         initCutomScrollbar( scrollableElement );
+
+        // add map overlay container after scrollbar is initiated
+        // because of its absolute positon
+        var mapOverlay = $('<div>', {
+            class: config.mapOverlayClass
+        });
+        scrollableElement.append(mapOverlay);
+
+
+        // reset map update timer
+        mapOverlay.setMapUpdateCounter(100, '5');
     };
 
     /**
@@ -1395,7 +1848,13 @@ define([
             callbacks:{
                 onTotalScrollOffset: 0,
                 onTotalScrollBackOffset: 0,
-                alwaysTriggerOffsets:true
+                alwaysTriggerOffsets:true,
+                whileScrolling:function(){
+                    // update scroll position for drag-frame-selection
+                    var mapElement = $(scrollableElement).find('.' + config.mapClass);
+                    $(mapElement).data('scrollLeft', this.mcs.left);
+                    $(mapElement).data('scrollTop', this.mcs.top);
+                }
             },
 
             advanced: {
@@ -1405,27 +1864,291 @@ define([
             },
             mouseWheel:{
                 enable:true,
-                scrollAmount:"auto",
-                axis:"x"
+                scrollAmount: 'auto',
+                axis: 'x',
+                preventDefault: true
             },
-            scrollbarPosition: "inside",
+            scrollbarPosition: 'inside',
             autoDraggerLength: true
             //autoHideScrollbar: false
         });
     };
 
-
     /**
      * scroll to a specific position in the map
      * @returns {*} // string or id
      */
     $.fn.scrollTo = function(position){
         return this.each(function(){
-            // todo re-comment
+            // todo re-comment not used jet
             //$(this).mCustomScrollbar('scrollTo', position);
         });
     };
 
+    /**
+     * removes all draggable capability for a system
+     */
+    $.fn.destroySystemDraggable = function(){
+
+        var system = $(this);
+
+        if( system.data('ui-draggable') ){
+            system.draggable( 'destroy' );
+        }
+
+    };
+
+    /**
+     * drag function for single or multiple system dragging
+     * @param options
+     * @returns {*}
+     */
+    $.fn.multiDraggable = function (options) {
+
+        // offset for each system in relation to dragSystem
+        var initLeftOffset = [];
+        var initTopOffset = [];
+
+        // max drag distance for each direction. All systems should stay within map
+        var maxDragDistance = {
+            up: 0,
+            right: 0,
+            down: 0,
+            left: 0
+        };
+
+        var mapOffset = {};
+
+
+        /**
+         * function is called during dragging. Check for valid position for each dragable system
+         * @param event
+         * @param ui
+         */
+        var whileDragging = function(event, ui){
+            var dragSystem = $(event.target);
+            var dragSystemPosition = dragSystem.position();
+
+            var uiPosition = ui.position;
+
+            var offset = ui.offset;
+            var items = $(options.group);
+
+            // start map update timer
+            dragSystem.getMapOverlay().startMapUpdateCounter();
+
+            // get position movement from original position --------------------------------------------
+            var leftMove = ui.originalPosition.left - uiPosition.left;
+            var topMove = ui.originalPosition.top - uiPosition.top;
+
+            var dragDistance = {
+                up: 0,
+                right: 0,
+                down: 0,
+                left: 0
+            };
+
+            if(leftMove < 0){
+                dragDistance.right = leftMove * -1;
+            }else{
+                dragDistance.left = leftMove;
+            }
+
+            if(topMove < 0){
+                dragDistance.down = topMove * -1;
+            }else{
+                dragDistance.up = topMove;
+            }
+
+            // grid snapping ----------------------------------------------------------------------------
+            var leftPositionRemainder = 0;
+            var topPositionRemainder = 0;
+
+            // if active make system snapping to a fixed grid
+            if(config.mapSnapToGrid){
+                var snapTolerance = $(this).draggable('option', 'snapTolerance');
+                leftPositionRemainder = uiPosition.left % snapTolerance;
+                topPositionRemainder = uiPosition.top % snapTolerance;
+
+                // manipulate dragDistance
+                if (leftPositionRemainder <= snapTolerance) {
+                   // ui.position.left = ui.position.left - leftRemainder;
+                    dragDistance.left += leftPositionRemainder;
+                }
+
+                if (topPositionRemainder <= snapTolerance) {
+                   // ui.position.top = ui.position.top - topRemainder;
+                    dragDistance.up += topPositionRemainder;
+                }
+            }
+
+            // check that all systems are still inside the map -----------------------------------------
+            if(
+                dragDistance.left > maxDragDistance.left ||
+                dragDistance.right > maxDragDistance.right
+            ){
+                // stop move current system
+                ui.position.left = dragSystemPosition.left;
+                // stop move other systems
+                offset.left = dragSystemPosition.left + mapOffset.left;
+            }else{
+                offset.left -= leftPositionRemainder;
+                ui.position.left -= leftPositionRemainder;
+            }
+
+            if(
+                dragDistance.up > maxDragDistance.up ||
+                dragDistance.down > maxDragDistance.down
+            ){
+                // stop move current system
+                ui.position.top = dragSystemPosition.top;
+                // stop move other systems
+                offset.top = dragSystemPosition.top + mapOffset.top;
+            }else{
+                offset.top -= topPositionRemainder;
+                ui.position.top -= topPositionRemainder;
+            }
+
+
+
+            $.each(items || {}, function (key, tempSystem) {
+                tempSystem = $(tempSystem);
+
+                var left    = offset.left + initLeftOffset[key];
+                var top     = offset.top + initTopOffset[key];
+                var leftOffsetRemainder = 0;
+                var topOffsetRemainder = 0;
+
+                if(config.mapSnapToGrid){
+                    leftOffsetRemainder = (initLeftOffset[key] % snapTolerance);
+                    topOffsetRemainder = initTopOffset[key] % snapTolerance;
+                }
+
+                tempSystem.offset({
+                    left:   left  - leftOffsetRemainder,
+                    top:    top - topOffsetRemainder
+                });
+
+            });
+
+            options.map.repaint(items);
+        };
+
+
+        return this.each(function () {
+
+            // remove previous dragging capability
+            $(this).destroySystemDraggable();
+
+
+            $(this).draggable(options, {
+                start: function (e, ui) {
+                    // drag start
+
+                    var dragSystem = $(e.target);
+                    var position = dragSystem.position();
+                    var items = $(options.group);
+
+                    // start map update timer
+                    $(e.target).getMapOverlay().startMapUpdateCounter();
+
+                    // get map size
+                    var mapElement = dragSystem.parent();
+
+                    mapOffset = mapElement.offset();
+
+                    var mapWidth = mapElement.width();
+                    var mapHeight = mapElement.height();
+
+
+                    // calculate offset for each system to dragSystem
+                    $.each(items || {}, function (key, tempSystem) {
+                        tempSystem = $(tempSystem);
+
+                        // hide tooltip
+                        toggleSystemTooltip( tempSystem, 'hide' );
+
+                        var elemPos = tempSystem.position();
+                        initLeftOffset[key] = elemPos.left - position.left;
+                        initTopOffset[key] = elemPos.top - position.top;
+
+                        var distanceRight = mapWidth - elemPos.left - tempSystem.outerWidth();
+                        var distanceBottom = mapHeight - elemPos.top - tempSystem.outerHeight();
+
+                        // calculate max drag distance
+                        if(key === 0){
+                            maxDragDistance.left = elemPos.left;
+                            maxDragDistance.up = elemPos.top;
+                            maxDragDistance.right = distanceRight;
+                            maxDragDistance.down = distanceBottom;
+                        }
+
+                        if(elemPos.left < maxDragDistance.left){
+                            maxDragDistance.left = elemPos.left;
+                        }
+
+                        if(elemPos.top < maxDragDistance.up){
+                            maxDragDistance.up = elemPos.top;
+                        }
+
+                        if(distanceRight < maxDragDistance.right){
+                            maxDragDistance.right = distanceRight;
+                        }
+
+                        if(distanceBottom < maxDragDistance.down){
+                            maxDragDistance.down = distanceBottom;
+                        }
+
+
+                    });
+
+                },
+                drag: whileDragging,
+                stop: function(e, ui){
+                    // stop dragging
+                    whileDragging(e, ui);
+
+                    var dragSystem = $(e.target);
+                    var items = $(options.group);
+
+
+                    var distanceTop = ui.position.top;
+                    var distanceLeft = ui.position.left;
+
+                    // start map update timer
+                    dragSystem.getMapOverlay().startMapUpdateCounter();
+
+
+
+                    $.each(items || {}, function (key, tempSystem) {
+                        tempSystem = $(tempSystem);
+
+                        // update z-index for dragged system + connections
+                        updateZIndex(tempSystem);
+
+                        // render tooltip
+                        toggleSystemTooltip([tempSystem], 'show');
+
+                        // set new position for popover edit field (system name)
+                        var placement = 'top';
+                        if(distanceTop < 100){
+                            placement = 'bottom';
+                        }
+                        if(distanceLeft < 100){
+                            placement = 'right';
+                        }
+
+                        tempSystem.find('.' + config.systemHeadNameClass).editable('option', 'placement', placement);
+
+                    });
+
+                }
+            });
+        });
+
+
+    };
+
 
 
 });
\ No newline at end of file
diff --git a/js/app/module_map.js b/js/app/module_map.js
index cc01d3d1..c9a96622 100644
--- a/js/app/module_map.js
+++ b/js/app/module_map.js
@@ -223,7 +223,7 @@ define([
 
                 // collect all relevant data for SystemInfoElement
                 var systemInfoData = {
-                    systemId: parseInt( $( mapData.system).attr('data-id') ),
+                    systemId: parseInt( $( mapData.system).data('id') ),
                     mapId: parseInt( $( mapData.system).attr('data-mapid') )
                 };
 
@@ -1841,7 +1841,7 @@ define([
         // get map Data
         $.each(mapElements, function(i, mapElement){
 
-            var mapId = parseInt( $(mapElement).attr('data-mapid') );
+            var mapId = parseInt( $(mapElement).data('id') );
 
             var mapUserData = null;
             // get user data for each active map
@@ -1953,10 +1953,6 @@ define([
                         $(scrollableElement).mCustomScrollbar( 'disable' );
 
                     });
-
-
-
-
                 }
             }
         };
@@ -2000,6 +1996,28 @@ define([
 
     };
 
+    /**
+     * collect all data for export/save from each active map in the map module
+     * @returns {Array}
+     */
+    $.fn.getMapModuleData = function(){
+
+        // get all active map elements for module
+        var mapElements = $(this).getMaps();
+
+        var data = [];
+        for(var i = 0; i < mapElements.length; i++){
+
+            var mapData = $(mapElements[i]).getMapData();
+
+            if(mapData !== false){
+                data.push(mapData);
+            }
+        }
+
+        return data;
+    };
+
     /**
      * init map, load into a container and init custom scrollbar
      * @param container
diff --git a/js/app/notification.js b/js/app/notification.js
index 0bcf8b7d..6d10192a 100644
--- a/js/app/notification.js
+++ b/js/app/notification.js
@@ -25,7 +25,7 @@ define([
         delay: 5000,                        // visible time for notification in browser
         mouse_reset: true,                  // Reset the hide timer if the mouse moves over the notice.
         shadow: true,
-        addclass: 'stack-bottomright',
+        addclass: 'stack-bottomright',      // class for display, must changed on stack different stacks
         width: '250px',
         // animation settings
         animation: {
@@ -51,24 +51,86 @@ define([
     };
 
     // stack container for all notifications
-    var stack_bottomright = {
-        dir1: 'up',
-        dir2: 'left',
-        firstpos1: 10,
-        firstpos2: 10,
-        spacing1: 5,
-        spacing2: 5,
-        push: 'bottom'
+    var stack = {
+        bottomRight: {
+            stack: {
+                dir1: 'up',
+                dir2: 'left',
+                firstpos1: 30,
+                firstpos2: 10,
+                spacing1: 5,
+                spacing2: 5,
+                push: 'bottom'
+            },
+            addclass: 'stack-bottomright',
+            width: '250px',
+            opacity: 0.8
+        },
+        barTop: {
+            stack: {
+                dir1: 'down',
+                dir2: 'right',
+                push: 'top',
+                spacing1: 0,
+                spacing2: 0,
+
+            },
+            addclass: 'stack-bar-top',
+            width: '80%',
+            opacity: 1
+        },
+        barBottom: {
+            stack: {
+                dir1: 'up',
+                dir2: 'right',
+                firstpos1: 30,
+                spacing1: 0,
+                spacing2: 0
+            },
+            addclass: 'stack-bar-bottom',
+            width: '100%',
+            opacity: 1
+        }
     };
 
     /**
      * show a notification in browser and/or "Web Notifications"  in OS
      * @param customConfig
      */
-    var showNotify = function(customConfig){
+    var showNotify = function(customConfig, settings){
 
         customConfig = $.extend({}, config, customConfig );
 
+        // desktop notification
+        if(
+            settings &&
+            settings.desktop === true
+        ){
+            // ask for Web Notifications permission
+            PNotify.desktop.permission();
+
+            customConfig.delay = 10000;
+            customConfig.desktop.desktop = true;
+        }else{
+            customConfig.delay = 5000;
+            customConfig.desktop.desktop = false;
+        }
+
+        // set notification stack
+        if(
+            settings &&
+            settings.stack
+        ){
+            customConfig.stack = stack[settings.stack].stack;
+            customConfig.addclass = stack[settings.stack].addclass;
+            customConfig.width = stack[settings.stack].width;
+            customConfig.opacity = stack[settings.stack].opacity;
+        }else{
+            customConfig.stack = stack.bottomRight.stack;
+            customConfig.addclass = stack.bottomRight.addclass;
+            customConfig.opacity = stack.bottomRight.opacity;
+        }
+
         switch(customConfig.type){
             case 'info':
                 customConfig.icon = 'fa fa-info fa-fw fa-lg';
@@ -85,15 +147,6 @@ define([
             default:
                 customConfig.icon = false;
         }
-        customConfig.stack = stack_bottomright;
-
-        if(
-            customConfig.desktop &&
-            customConfig.desktop.desktop === true
-        ){
-            // ask for Web Notifications permission
-            PNotify.desktop.permission();
-        }
 
         new PNotify(customConfig);
     };
diff --git a/js/app/page.js b/js/app/page.js
index bdb70909..fac56b3f 100644
--- a/js/app/page.js
+++ b/js/app/page.js
@@ -18,10 +18,10 @@ define([
         // page structure slidebars-menu classes
         pageId: 'sb-site',
         pageSlidebarClass: 'sb-slidebar',
-        pageSlidebarLeftClass: 'sb-left',
-        pageSlidebarRightClass: 'sb-right',
-        pageSlideLeftWidth: '150px',
-        pageSlideRightWidth: '150px',
+        pageSlidebarLeftClass: 'sb-left',                                       // class for left menu
+        pageSlidebarRightClass: 'sb-right',                                     // class for right menu
+        pageSlideLeftWidth: '150px',                                            // slide distance left menu
+        pageSlideRightWidth: '150px',                                           // slide distance right menu
 
         // page structure
         pageClass: 'pf-site',
@@ -32,16 +32,31 @@ define([
         headMenuClass: 'pf-head-menu',                                          // class for page head menu button (left)
         headMapClass: 'pf-head-map',                                            // class for page head map button (right)
 
+        // footer
+        pageFooterId: 'pf-footer',                                              // id for page footer
+
         // map module
         mapModuleId: 'pf-map-module',                                           // main map module
 
         // system effect dialog
-        systemEffectDialogWrapper: 'pf-system-effect-dialog-wrapper',           // class for system effect dialog
+        systemEffectDialogWrapperClass: 'pf-system-effect-dialog-wrapper',      // class for system effect dialog
+
+        // 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
 
         // helper element
         dynamicElementWrapperId: 'pf-dialog-wrapper'
     };
 
+    var cache = {
+        systemEffectDialog: false                                               // system effect info dialog
+    };
+
 
     /**
      * load main page structure elements and navigation container into body
@@ -81,6 +96,9 @@ define([
         // load header
         $('.' + config.pageClass).loadHeader();
 
+        // load footer
+        $('.' + config.pageClass).loadFooter();
+
         // load left menu
         $('.' + config.pageSlidebarLeftClass).loadLeftMenu();
 
@@ -119,6 +137,28 @@ define([
                         ).on('click', function(){
                             $(document).triggerMenuEvent('ShowSystemEffectInfo');
                         })
+                ).append(
+                    $('<a>', {
+                        class: 'list-group-item',
+                        href: '#'
+                    }).html('&nbsp;&nbsp;Jump info').prepend(
+                            $('<i>',{
+                                class: 'fa fa-space-shuttle fa-fw'
+                            })
+                        ).on('click', function(){
+                            $(document).triggerMenuEvent('ShowJumpInfo');
+                        })
+                ).append(
+                    $('<a>', {
+                        class: 'list-group-item',
+                        href: '#'
+                    }).html('&nbsp;&nbsp;Notification test').prepend(
+                            $('<i>',{
+                                class: 'fa fa-bullhorn fa-fw'
+                            })
+                        ).on('click', function(){
+                            $(document).triggerMenuEvent('NotificationTest');
+                        })
                 ).append(
                     $('<a>', {
                         class: 'list-group-item',
@@ -150,6 +190,17 @@ 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});
+                        })
                 )
         );
     };
@@ -200,15 +251,202 @@ define([
         Render.showModule(moduleConfig, moduleData);
     };
 
+    /**
+     * load page footer
+     */
+    $.fn.loadFooter = function(){
+
+        var pageElement = $(this);
+
+        var moduleConfig = {
+            name: 'modules/footer',
+            position: pageElement,
+            link: 'append',
+            functions: {
+                after: function(){
+
+                }
+            }
+        };
+
+        var moduleData = {
+            id: config.pageFooterId
+        };
+
+        Render.showModule(moduleConfig, moduleData);
+
+    };
+
     /**
      * catch all global document events
      */
     var setDocumentObserver = function(){
         $(document).on('pf:menuShowSystemEffectInfo', function(e){
             // show system effects info box
+            showSystemEffectInfoDialog();
+        });
+
+        $(document).on('pf:menuShowJumpInfo', function(e){
+            // show system effects info box
+            showJumpInfoDialog();
+        });
+
+        $(document).on('pf:menuNotificationTest', function(e){
+            // show system effects info box
+            notificationTest();
+        });
+
+        $(document).on('pf:menuLegend', function(e){
+            // show map legend
+            showMaplegend();
+        });
+
+        showMaplegend();
+    };
+
+    /**
+     * shows the map legend modal dialog
+     */
+    var showMaplegend = function(){
+
+        requirejs(['text!templates/modules/map_legend_dialog.html', 'lib/mustache'], function(template, Mustache) {
+
+            var data = {
+                scrollspyId: config.mapLegendScrollspyId,
+                scrollspyNavClass: config.mapLegendScrollspyNavClass,
+                scrollspyNavLiClass: config.mapLegendNavigationListItemClass,
+                pieChartClass : Init.classes.pieChart.pieChartMapCounterClass,
+                mapCounterClass : Init.classes.pieChart.pieChartMapCounterClass
+            };
+
+            var content = Mustache.render(template, data);
+
+            // show dialog
+            var mapLegendDialog = bootbox.dialog({
+                title: 'Map legend',
+                message: content,
+                className: 'medium',
+                buttons: {
+                    success: {
+                        label: 'close',
+                        className: "btn-primary",
+                        callback: function() {
+                            $(mapLegendDialog).modal('hide');
+                        }
+                    }
+                },
+                show: false
+            });
+
+            mapLegendDialog.modal('show');
+
+            mapLegendDialog.on('shown.bs.modal', function(e) {
+                // modal os open
+            });
+
+            var scrollspyElement = $('#' + config.mapLegendScrollspyId);
+
+            // init scrollbar
+            scrollspyElement.mCustomScrollbar({
+                axis: 'y',
+                theme: 'light-thick',
+                scrollInertia: 200,
+                autoExpandScrollbar: false,
+                scrollButtons:{
+                    scrollAmount: 30,
+                    enable: true
+                },
+                advanced: {
+                    updateOnBrowserResize: true,
+                    updateOnContentResize: true
+                },
+                callbacks:{
+                    onInit: function(){
+                        // init fake-map update counter
+                        scrollspyElement.find('.' + data.mapCounterClass).initMapUpdateCounter();
+
+                        // set navigation button observer
+                        var mainNavigationLinks = $('.' + config.mapLegendScrollspyNavClass).find('a');
+                        // text anchor links
+                        var subNavigationLinks = scrollspyElement.find('a[data-target]');
+
+                        var navigationLinks = mainNavigationLinks.add(subNavigationLinks);
+
+                        navigationLinks.on('click', function(e){
+                            e.preventDefault();
+
+                            // scroll to anchor
+                            scrollspyElement.mCustomScrollbar("scrollTo", $(this).attr('data-target'));
+
+                            var mainNavigationLiElement = $(this).parent('.' + config.mapLegendNavigationListItemClass);
+
+                            // 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');
+
+                                // set new active class
+                                $(this).parent().addClass('active');
+                            }
+
+                        });
+
+                    }
+                },
+                mouseWheel:{
+                    enable: true,
+                    scrollAmount: 200,
+                    axis: 'y',
+                    preventDefault: true // do not scroll parent at the end
+                },
+                scrollbarPosition: 'outsite',
+                autoDraggerLength: true
+            });
+
+
+
+        });
+
+    };
+
+    /**
+     * shows a test notification for desktop messages
+     */
+    var notificationTest = function(){
+        Util.showNotify({title: 'Test Notification', text: 'Accept browser security question'}, {desktop: true, stack: 'barBottom'});
+    };
+
+    /**
+     * show jump info dialog
+     */
+    var showJumpInfoDialog = function(){
+
+        requirejs(['text!templates/modules/jump_info_dialog.html', 'lib/mustache'], function(template, Mustache) {
+
+            var data = {};
+
+            var content = Mustache.render(template, data);
+
+            var signatureReaderDialog = bootbox.dialog({
+                className: config.jumpInfoDialogClass,
+                title: 'Wormhole jump information',
+                message: content
+            });
+
+        });
+
+    };
+
+    /**
+     * show system effect dialog
+     */
+    var showSystemEffectInfoDialog = function(){
+
+        // cache table structure
+        if(!cache.systemEffectDialog){
 
             var dialogWrapperElement = $('<div>', {
-                class: config.systemEffectDialogWrapper
+                class: config.systemEffectDialogWrapperClass
             });
 
             $.each( Init.systemEffects.wh, function( effectName, effectData ) {
@@ -266,15 +504,16 @@ define([
 
                 dialogWrapperElement.append( table.append( thead ).append( tbody ) );
 
+                cache.systemEffectDialog = dialogWrapperElement;
             });
+        }
 
-            bootbox.dialog({
-                title: 'System effect information',
-                message: dialogWrapperElement
-            });
-
+        bootbox.dialog({
+            title: 'System effect information',
+            message: cache.systemEffectDialog
         });
-    }
+
+    };
 
 
 });
\ No newline at end of file
diff --git a/js/app/util.js b/js/app/util.js
index 950e82d2..d310b2a8 100644
--- a/js/app/util.js
+++ b/js/app/util.js
@@ -1,7 +1,11 @@
 /**
  *  Util
  */
-define(['jquery', 'app/init'], function($, Init) {
+define([
+    'jquery',
+    'app/init',
+    'easyPieChart'
+], function($, Init) {
 
     "use strict";
 
@@ -76,16 +80,96 @@ define(['jquery', 'app/init'], function($, Init) {
         return formData;
     };
 
-    var showNotify = function(customConfig){
+
+    /**
+     * checks if an element is currently visible in viewport
+     * @returns {boolean}
+     */
+    $.fn.isInViewport = function(){
+
+        var element = $(this)[0];
+        var top = element.offsetTop;
+        var left = element.offsetLeft;
+        var width = element.offsetWidth;
+        var height = element.offsetHeight;
+
+
+        while(element.offsetParent) {
+            element = element.offsetParent;
+            top += element.offsetTop;
+            left += element.offsetLeft;
+        }
+
+        return (
+            top < (window.pageYOffset + window.innerHeight) &&
+                left < (window.pageXOffset + window.innerWidth) &&
+                (top + height) > window.pageYOffset &&
+                (left + width) > window.pageXOffset
+            );
+    };
+
+    /**
+     * trigger a notification (on screen or desktop)
+     * @param customConfig
+     * @param desktop
+     */
+    var showNotify = function(customConfig, desktop){
 
         requirejs(['app/notification'], function(Notification) {
-            Notification.showNotify(customConfig);
+            Notification.showNotify(customConfig, desktop);
         });
     };
 
 
     // ==================================================================================================
 
+    /**
+     * init the map-update-counter as "easy-pie-chart"
+     */
+    $.fn.initMapUpdateCounter = function(){
+
+        var counterChart = $(this);
+
+        counterChart.easyPieChart({
+            barColor: function(percent){
+
+                var color = '#568a89';
+                if(percent <= 30){
+                    color = '#d9534f';
+                }else if(percent <= 50){
+                    color = '#f0ad4e';
+                }
+
+                return color;
+
+            },
+            trackColor: '#2b2b2b',
+            size: 30,
+            scaleColor: false,
+            lineWidth: 2,
+            animate: 1000
+        });
+
+    };
+
+    /**
+     * get some system info for a given info string (e.g. rally class)
+     * @param info
+     * @param option
+     * @returns {string}
+     */
+    var getInfoForSystem = function(info, option){
+
+        var systemInfo = '';
+
+        if(Init.classes.systemInfo.hasOwnProperty(info)){
+            systemInfo = Init.classes.systemInfo[info][option];
+        }
+
+
+        return systemInfo;
+    };
+
     /**
      * get some info for a given effect string
      * @param effect
@@ -311,7 +395,7 @@ define(['jquery', 'app/init'], function($, Init) {
 
     return {
         showNotify: showNotify,
-
+        getInfoForSystem: getInfoForSystem,
         getEffectInfoForSystem: getEffectInfoForSystem,
         getSystemEffectData: getSystemEffectData,
         getSystemEffectTable: getSystemEffectTable,
diff --git a/js/lib/bootbox.min.js b/js/lib/bootbox.min.js
index a7ea24fe..a300032c 100644
--- a/js/lib/bootbox.min.js
+++ b/js/lib/bootbox.min.js
@@ -3,4 +3,4 @@
  *
  * http://bootboxjs.com/license.txt
  */
-!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.bootbox=b(a.jQuery)}(this,function a(b,c){"use strict";function d(a){var b=q[o.locale];return b?b[a]:q.en[a]}function e(a,c,d){a.stopPropagation(),a.preventDefault();var e=b.isFunction(d)&&d(a)===!1;e||c.modal("hide")}function f(a){var b,c=0;for(b in a)c++;return c}function g(a,c){var d=0;b.each(a,function(a,b){c(a,b,d++)})}function h(a){var c,d;if("object"!=typeof a)throw new Error("Please supply an object of options");if(!a.message)throw new Error("Please specify a message");return a=b.extend({},o,a),a.buttons||(a.buttons={}),a.backdrop=a.backdrop?"static":!1,c=a.buttons,d=f(c),g(c,function(a,e,f){if(b.isFunction(e)&&(e=c[a]={callback:e}),"object"!==b.type(e))throw new Error("button with key "+a+" must be an object");e.label||(e.label=a),e.className||(e.className=2>=d&&f===d-1?"btn-primary":"btn-default")}),a}function i(a,b){var c=a.length,d={};if(1>c||c>2)throw new Error("Invalid argument length");return 2===c||"string"==typeof a[0]?(d[b[0]]=a[0],d[b[1]]=a[1]):d=a[0],d}function j(a,c,d){return b.extend(!0,{},a,i(c,d))}function k(a,b,c,d){var e={className:"bootbox-"+a,buttons:l.apply(null,b)};return m(j(e,d,c),b)}function l(){for(var a={},b=0,c=arguments.length;c>b;b++){var e=arguments[b],f=e.toLowerCase(),g=e.toUpperCase();a[f]={label:d(g)}}return a}function m(a,b){var d={};return g(b,function(a,b){d[b]=!0}),g(a.buttons,function(a){if(d[a]===c)throw new Error("button key "+a+" is not allowed (options are "+b.join("\n")+")")}),a}var n={dialog:"<div class='bootbox modal' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-body'><div class='bootbox-body'></div></div></div></div></div>",header:"<div class='modal-header'><h4 class='modal-title'></h4></div>",footer:"<div class='modal-footer'></div>",closeButton:"<button type='button' class='bootbox-close-button close' data-dismiss='modal' aria-hidden='true'>&times;</button>",form:"<form class='bootbox-form'></form>",inputs:{text:"<input class='bootbox-input bootbox-input-text form-control' autocomplete=off type=text />",textarea:"<textarea class='bootbox-input bootbox-input-textarea form-control'></textarea>",email:"<input class='bootbox-input bootbox-input-email form-control' autocomplete='off' type='email' />",select:"<select class='bootbox-input bootbox-input-select form-control'></select>",checkbox:"<div class='checkbox'><label><input class='bootbox-input bootbox-input-checkbox' type='checkbox' /></label></div>",date:"<input class='bootbox-input bootbox-input-date form-control' autocomplete=off type='date' />",time:"<input class='bootbox-input bootbox-input-time form-control' autocomplete=off type='time' />",number:"<input class='bootbox-input bootbox-input-number form-control' autocomplete=off type='number' />",password:"<input class='bootbox-input bootbox-input-password form-control' autocomplete='off' type='password' />"}},o={locale:"en",backdrop:!0,animate:!0,className:null,closeButton:!0,show:!0,container:"body"},p={};p.alert=function(){var a;if(a=k("alert",["ok"],["message","callback"],arguments),a.callback&&!b.isFunction(a.callback))throw new Error("alert requires callback property to be a function when provided");return a.buttons.ok.callback=a.onEscape=function(){return b.isFunction(a.callback)?a.callback():!0},p.dialog(a)},p.confirm=function(){var a;if(a=k("confirm",["cancel","confirm"],["message","callback"],arguments),a.buttons.cancel.callback=a.onEscape=function(){return a.callback(!1)},a.buttons.confirm.callback=function(){return a.callback(!0)},!b.isFunction(a.callback))throw new Error("confirm requires a callback");return p.dialog(a)},p.prompt=function(){var a,d,e,f,h,i,k;if(f=b(n.form),d={className:"bootbox-prompt",buttons:l("cancel","confirm"),value:"",inputType:"text"},a=m(j(d,arguments,["title","callback"]),["cancel","confirm"]),i=a.show===c?!0:a.show,a.message=f,a.buttons.cancel.callback=a.onEscape=function(){return a.callback(null)},a.buttons.confirm.callback=function(){var c;switch(a.inputType){case"text":case"textarea":case"email":case"select":case"date":case"time":case"number":case"password":c=h.val();break;case"checkbox":var d=h.find("input:checked");c=[],g(d,function(a,d){c.push(b(d).val())})}return a.callback(c)},a.show=!1,!a.title)throw new Error("prompt requires a title");if(!b.isFunction(a.callback))throw new Error("prompt requires a callback");if(!n.inputs[a.inputType])throw new Error("invalid prompt type");switch(h=b(n.inputs[a.inputType]),a.inputType){case"text":case"textarea":case"email":case"date":case"time":case"number":case"password":h.val(a.value);break;case"select":var o={};if(k=a.inputOptions||[],!k.length)throw new Error("prompt with select requires options");g(k,function(a,d){var e=h;if(d.value===c||d.text===c)throw new Error("given options in wrong format");d.group&&(o[d.group]||(o[d.group]=b("<optgroup/>").attr("label",d.group)),e=o[d.group]),e.append("<option value='"+d.value+"'>"+d.text+"</option>")}),g(o,function(a,b){h.append(b)}),h.val(a.value);break;case"checkbox":var q=b.isArray(a.value)?a.value:[a.value];if(k=a.inputOptions||[],!k.length)throw new Error("prompt with checkbox requires options");if(!k[0].value||!k[0].text)throw new Error("given options in wrong format");h=b("<div/>"),g(k,function(c,d){var e=b(n.inputs[a.inputType]);e.find("input").attr("value",d.value),e.find("label").append(d.text),g(q,function(a,b){b===d.value&&e.find("input").prop("checked",!0)}),h.append(e)})}return a.placeholder&&h.attr("placeholder",a.placeholder),a.pattern&&h.attr("pattern",a.pattern),f.append(h),f.on("submit",function(a){a.preventDefault(),a.stopPropagation(),e.find(".btn-primary").click()}),e=p.dialog(a),e.off("shown.bs.modal"),e.on("shown.bs.modal",function(){h.focus()}),i===!0&&e.modal("show"),e},p.dialog=function(a){a=h(a);var c=b(n.dialog),d=c.find(".modal-dialog"),f=c.find(".modal-body"),i=a.buttons,j="",k={onEscape:a.onEscape};if(g(i,function(a,b){j+="<button data-bb-handler='"+a+"' type='button' class='btn "+b.className+"'>"+b.label+"</button>",k[a]=b.callback}),f.find(".bootbox-body").html(a.message),a.animate===!0&&c.addClass("fade"),a.className&&c.addClass(a.className),"large"===a.size&&d.addClass("modal-lg"),"small"===a.size&&d.addClass("modal-sm"),a.title&&f.before(n.header),a.closeButton){var l=b(n.closeButton);a.title?c.find(".modal-header").prepend(l):l.css("margin-top","-10px").prependTo(f)}return a.title&&c.find(".modal-title").html(a.title),j.length&&(f.after(n.footer),c.find(".modal-footer").html(j)),c.on("hidden.bs.modal",function(a){a.target===this&&c.remove()}),c.on("shown.bs.modal",function(){c.find(".btn-primary:first").focus()}),c.on("escape.close.bb",function(a){k.onEscape&&e(a,c,k.onEscape)}),c.on("click",".modal-footer button",function(a){var d=b(this).data("bb-handler");e(a,c,k[d])}),c.on("click",".bootbox-close-button",function(a){e(a,c,k.onEscape)}),c.on("keyup",function(a){27===a.which&&c.trigger("escape.close.bb")}),b(a.container).append(c),c.modal({backdrop:a.backdrop,keyboard:!1,show:!1}),a.show&&c.modal("show"),c},p.setDefaults=function(){var a={};2===arguments.length?a[arguments[0]]=arguments[1]:a=arguments[0],b.extend(o,a)},p.hideAll=function(){return b(".bootbox").modal("hide"),p};var q={br:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Sim"},cs:{OK:"OK",CANCEL:"Zrušit",CONFIRM:"Potvrdit"},da:{OK:"OK",CANCEL:"Annuller",CONFIRM:"Accepter"},de:{OK:"OK",CANCEL:"Abbrechen",CONFIRM:"Akzeptieren"},el:{OK:"Εντάξει",CANCEL:"Ακύρωση",CONFIRM:"Επιβεβαίωση"},en:{OK:"OK",CANCEL:"Cancel",CONFIRM:"OK"},es:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Aceptar"},et:{OK:"OK",CANCEL:"Katkesta",CONFIRM:"OK"},fi:{OK:"OK",CANCEL:"Peruuta",CONFIRM:"OK"},fr:{OK:"OK",CANCEL:"Annuler",CONFIRM:"D'accord"},he:{OK:"אישור",CANCEL:"ביטול",CONFIRM:"אישור"},id:{OK:"OK",CANCEL:"Batal",CONFIRM:"OK"},it:{OK:"OK",CANCEL:"Annulla",CONFIRM:"Conferma"},ja:{OK:"OK",CANCEL:"キャンセル",CONFIRM:"確認"},lt:{OK:"Gerai",CANCEL:"Atšaukti",CONFIRM:"Patvirtinti"},lv:{OK:"Labi",CANCEL:"Atcelt",CONFIRM:"Apstiprināt"},nl:{OK:"OK",CANCEL:"Annuleren",CONFIRM:"Accepteren"},no:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},pl:{OK:"OK",CANCEL:"Anuluj",CONFIRM:"Potwierdź"},pt:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Confirmar"},ru:{OK:"OK",CANCEL:"Отмена",CONFIRM:"Применить"},sv:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},tr:{OK:"Tamam",CANCEL:"İptal",CONFIRM:"Onayla"},zh_CN:{OK:"OK",CANCEL:"取消",CONFIRM:"确认"},zh_TW:{OK:"OK",CANCEL:"取消",CONFIRM:"確認"}};return p.init=function(c){return a(c||b)},p});
\ No newline at end of file
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.bootbox=b(a.jQuery)}(this,function a(b,c){"use strict";function d(a){var b=q[o.locale];return b?b[a]:q.en[a]}function e(a,c,d){a.stopPropagation(),a.preventDefault();var e=b.isFunction(d)&&d(a)===!1;e||c.modal("hide")}function f(a){var b,c=0;for(b in a)c++;return c}function g(a,c){var d=0;b.each(a,function(a,b){c(a,b,d++)})}function h(a){var c,d;if("object"!=typeof a)throw new Error("Please supply an object of options");if(!a.message)throw new Error("Please specify a message");return a=b.extend({},o,a),a.buttons||(a.buttons={}),a.backdrop=a.backdrop?"static":!1,c=a.buttons,d=f(c),g(c,function(a,e,f){if(b.isFunction(e)&&(e=c[a]={callback:e}),"object"!==b.type(e))throw new Error("button with key "+a+" must be an object");e.label||(e.label=a),e.className||(e.className=2>=d&&f===d-1?"btn-primary":"btn-default")}),a}function i(a,b){var c=a.length,d={};if(1>c||c>2)throw new Error("Invalid argument length");return 2===c||"string"==typeof a[0]?(d[b[0]]=a[0],d[b[1]]=a[1]):d=a[0],d}function j(a,c,d){return b.extend(!0,{},a,i(c,d))}function k(a,b,c,d){var e={className:"bootbox-"+a,buttons:l.apply(null,b)};return m(j(e,d,c),b)}function l(){for(var a={},b=0,c=arguments.length;c>b;b++){var e=arguments[b],f=e.toLowerCase(),g=e.toUpperCase();a[f]={label:d(g)}}return a}function m(a,b){var d={};return g(b,function(a,b){d[b]=!0}),g(a.buttons,function(a){if(d[a]===c)throw new Error("button key "+a+" is not allowed (options are "+b.join("\n")+")")}),a}var n={dialog:"<div class='bootbox modal' tabindex='-1' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-body'><div class='bootbox-body'></div></div></div></div></div>",header:"<div class='modal-header'><h4 class='modal-title'></h4></div>",footer:"<div class='modal-footer'></div>",closeButton:"<button type='button' class='bootbox-close-button close' data-dismiss='modal' aria-hidden='true'>&times;</button>",form:"<form class='bootbox-form'></form>",inputs:{text:"<input class='bootbox-input bootbox-input-text form-control' autocomplete=off type=text />",textarea:"<textarea class='bootbox-input bootbox-input-textarea form-control'></textarea>",email:"<input class='bootbox-input bootbox-input-email form-control' autocomplete='off' type='email' />",select:"<select class='bootbox-input bootbox-input-select form-control'></select>",checkbox:"<div class='checkbox'><label><input class='bootbox-input bootbox-input-checkbox' type='checkbox' /></label></div>",date:"<input class='bootbox-input bootbox-input-date form-control' autocomplete=off type='date' />",time:"<input class='bootbox-input bootbox-input-time form-control' autocomplete=off type='time' />",number:"<input class='bootbox-input bootbox-input-number form-control' autocomplete=off type='number' />",password:"<input class='bootbox-input bootbox-input-password form-control' autocomplete='off' type='password' />"}},o={locale:"en",backdrop:!0,animate:!0,className:null,closeButton:!0,show:!0,container:"body"},p={};p.alert=function(){var a;if(a=k("alert",["ok"],["message","callback"],arguments),a.callback&&!b.isFunction(a.callback))throw new Error("alert requires callback property to be a function when provided");return a.buttons.ok.callback=a.onEscape=function(){return b.isFunction(a.callback)?a.callback():!0},p.dialog(a)},p.confirm=function(){var a;if(a=k("confirm",["cancel","confirm"],["message","callback"],arguments),a.buttons.cancel.callback=a.onEscape=function(){return a.callback(!1)},a.buttons.confirm.callback=function(){return a.callback(!0)},!b.isFunction(a.callback))throw new Error("confirm requires a callback");return p.dialog(a)},p.prompt=function(){var a,d,e,f,h,i,k;if(f=b(n.form),d={className:"bootbox-prompt",buttons:l("cancel","confirm"),value:"",inputType:"text"},a=m(j(d,arguments,["title","callback"]),["cancel","confirm"]),i=a.show===c?!0:a.show,a.message=f,a.buttons.cancel.callback=a.onEscape=function(){return a.callback(null)},a.buttons.confirm.callback=function(){var c;switch(a.inputType){case"text":case"textarea":case"email":case"select":case"date":case"time":case"number":case"password":c=h.val();break;case"checkbox":var d=h.find("input:checked");c=[],g(d,function(a,d){c.push(b(d).val())})}return a.callback(c)},a.show=!1,!a.title)throw new Error("prompt requires a title");if(!b.isFunction(a.callback))throw new Error("prompt requires a callback");if(!n.inputs[a.inputType])throw new Error("invalid prompt type");switch(h=b(n.inputs[a.inputType]),a.inputType){case"text":case"textarea":case"email":case"date":case"time":case"number":case"password":h.val(a.value);break;case"select":var o={};if(k=a.inputOptions||[],!k.length)throw new Error("prompt with select requires options");g(k,function(a,d){var e=h;if(d.value===c||d.text===c)throw new Error("given options in wrong format");d.group&&(o[d.group]||(o[d.group]=b("<optgroup/>").attr("label",d.group)),e=o[d.group]),e.append("<option value='"+d.value+"'>"+d.text+"</option>")}),g(o,function(a,b){h.append(b)}),h.val(a.value);break;case"checkbox":var q=b.isArray(a.value)?a.value:[a.value];if(k=a.inputOptions||[],!k.length)throw new Error("prompt with checkbox requires options");if(!k[0].value||!k[0].text)throw new Error("given options in wrong format");h=b("<div/>"),g(k,function(c,d){var e=b(n.inputs[a.inputType]);e.find("input").attr("value",d.value),e.find("label").append(d.text),g(q,function(a,b){b===d.value&&e.find("input").prop("checked",!0)}),h.append(e)})}return a.placeholder&&h.attr("placeholder",a.placeholder),a.pattern&&h.attr("pattern",a.pattern),f.append(h),f.on("submit",function(a){a.preventDefault(),a.stopPropagation(),e.find(".btn-primary").click()}),e=p.dialog(a),e.off("shown.bs.modal"),e.on("shown.bs.modal",function(){h.focus()}),i===!0&&e.modal("show"),e},p.dialog=function(a){a=h(a);var c=b(n.dialog),d=c.find(".modal-dialog"),f=c.find(".modal-body"),i=a.buttons,j="",k={onEscape:a.onEscape};if(g(i,function(a,b){j+="<button data-bb-handler='"+a+"' type='button' class='btn "+b.className+"'>"+b.label+"</button>",k[a]=b.callback}),f.find(".bootbox-body").html(a.message),a.animate===!0&&c.addClass("fade"),a.className&&c.addClass(a.className),"large"===a.size&&d.addClass("modal-lg"),"small"===a.size&&d.addClass("modal-sm"),a.title&&f.before(n.header),a.closeButton){var l=b(n.closeButton);a.title?c.find(".modal-header").prepend(l):l.css("margin-top","-10px").prependTo(f)}return a.title&&c.find(".modal-title").html(a.title),j.length&&(f.after(n.footer),c.find(".modal-footer").html(j)),c.on("hidden.bs.modal",function(a){a.target===this&&c.remove()}),c.on("shown.bs.modal",function(){c.find(".btn-default:first").focus()}),c.on("escape.close.bb",function(a){k.onEscape&&e(a,c,k.onEscape)}),c.on("click",".modal-footer button",function(a){var d=b(this).data("bb-handler");e(a,c,k[d])}),c.on("click",".bootbox-close-button",function(a){e(a,c,k.onEscape)}),c.on("keyup",function(a){27===a.which&&c.trigger("escape.close.bb")}),b(a.container).append(c),c.modal({backdrop:a.backdrop,keyboard:!1,show:!1}),a.show&&c.modal("show"),c},p.setDefaults=function(){var a={};2===arguments.length?a[arguments[0]]=arguments[1]:a=arguments[0],b.extend(o,a)},p.hideAll=function(){return b(".bootbox").modal("hide"),p};var q={br:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Sim"},cs:{OK:"OK",CANCEL:"Zrušit",CONFIRM:"Potvrdit"},da:{OK:"OK",CANCEL:"Annuller",CONFIRM:"Accepter"},de:{OK:"OK",CANCEL:"Abbrechen",CONFIRM:"Akzeptieren"},el:{OK:"Εντάξει",CANCEL:"Ακύρωση",CONFIRM:"Επιβεβαίωση"},en:{OK:"OK",CANCEL:"Cancel",CONFIRM:"OK"},es:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Aceptar"},et:{OK:"OK",CANCEL:"Katkesta",CONFIRM:"OK"},fi:{OK:"OK",CANCEL:"Peruuta",CONFIRM:"OK"},fr:{OK:"OK",CANCEL:"Annuler",CONFIRM:"D'accord"},he:{OK:"אישור",CANCEL:"ביטול",CONFIRM:"אישור"},id:{OK:"OK",CANCEL:"Batal",CONFIRM:"OK"},it:{OK:"OK",CANCEL:"Annulla",CONFIRM:"Conferma"},ja:{OK:"OK",CANCEL:"キャンセル",CONFIRM:"確認"},lt:{OK:"Gerai",CANCEL:"Atšaukti",CONFIRM:"Patvirtinti"},lv:{OK:"Labi",CANCEL:"Atcelt",CONFIRM:"Apstiprināt"},nl:{OK:"OK",CANCEL:"Annuleren",CONFIRM:"Accepteren"},no:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},pl:{OK:"OK",CANCEL:"Anuluj",CONFIRM:"Potwierdź"},pt:{OK:"OK",CANCEL:"Cancelar",CONFIRM:"Confirmar"},ru:{OK:"OK",CANCEL:"Отмена",CONFIRM:"Применить"},sv:{OK:"OK",CANCEL:"Avbryt",CONFIRM:"OK"},tr:{OK:"Tamam",CANCEL:"İptal",CONFIRM:"Onayla"},zh_CN:{OK:"OK",CANCEL:"取消",CONFIRM:"确认"},zh_TW:{OK:"OK",CANCEL:"取消",CONFIRM:"確認"}};return p.init=function(c){return a(c||b)},p});
\ No newline at end of file
diff --git a/js/lib/jquery.dragToSelect.js b/js/lib/jquery.dragToSelect.js
new file mode 100644
index 00000000..3c6c8cbb
--- /dev/null
+++ b/js/lib/jquery.dragToSelect.js
@@ -0,0 +1,384 @@
+/***
+@title:
+Drag to Select
+
+@version:
+1.1
+
+@author:
+Andreas Lagerkvist
+
+@date:
+2009-04-06
+
+@url:
+http://andreaslagerkvist.com/jquery/drag-to-select/
+
+@license:
+http://creativecommons.org/licenses/by/3.0/
+
+@copyright:
+2008 Andreas Lagerkvist (andreaslagerkvist.com)
+
+@requires:
+jquery, jquery.dragToSelect.css
+
+@does:
+Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and folders in most OS:es.
+
+@howto:
+$('#my-files').dragToSelect(selectables: 'li'); would make every li in the #my-files-element selectable by dragging. The li:s will recieve a "selected"-class when they are within range of the select box when user drops.
+
+Make sure a parent-element of the selectables has position: relative as well as overflow: auto or scroll.
+
+@exampleHTML:
+<ul>
+	<li><img src="http://exscale.se/__files/3d/lamp-and-mates/lamp-and-mates-01_small.jpg" alt="Lamp and Mates" /></li>
+	<li><img src="http://exscale.se/__files/3d/stugan-winter_small.jpg" alt="The Cottage - Winter time" /></li>
+	<li><img src="http://exscale.se/__files/3d/ps2_small.jpg" alt="PS2" /></li>
+</ul>
+
+@exampleJS:
+$('#jquery-drag-to-select-example').dragToSelect({
+	selectables: 'li', 
+	onHide: function () {
+		alert($('#jquery-drag-to-select-example li.selected').length + ' selected');
+	}
+});
+***/
+jQuery.fn.dragToSelect = function (conf) {
+	var c = typeof(conf) == 'object' ? conf : {};
+
+	// Config
+	var config = jQuery.extend({
+		className:		'pf-map-drag-to-select',
+		activeClass:	'active',
+		disabledClass:	'disabled', 
+		selectedClass:	'pf-system-selected',
+        ignoredClass:   'pf-system-locked', // do not select locked systems
+		scrollTH:		10,
+		percentCovered:	25, 
+		selectables:	false,
+		autoScroll:		false,
+		selectOnMove:	false,
+		onShow:			function () {return true;}, 
+		onHide:			function () {return true;}, 
+		onRefresh:		function () {return true;}
+	}, c);
+
+	var realParent	= jQuery(this);
+	var parent		= realParent;
+
+    // deselected items
+    var deselectedItems = [];
+
+	do {
+		if (/auto|scroll|hidden/.test(parent.css('overflow'))) {
+			break;
+		}
+		parent = parent.parent();
+	} while (parent[0].parentNode);
+
+	// Does user want to disable dragToSelect
+	if (conf == 'disable') {
+		parent.addClass(config.disabledClass);
+		return this;
+	}
+	else if (conf == 'enable') {
+		parent.removeClass(config.disabledClass);
+		return this;
+	}
+
+	var parentOffset	= parent.offset();
+	var parentDim		= {
+		left:	parentOffset.left, 
+		top:	parentOffset.top, 
+		width:	parent.width(), 
+		height:	parent.height()
+	};
+
+	// Current origin of select box
+	var selectBoxOrigin = {
+		left:	0, 
+		top:	0
+	};
+
+	// Create select box
+	var selectBox = jQuery('<div/>')
+						.appendTo(parent)
+						.attr('class', config.className)
+						.css('position', 'absolute');
+
+	// Shows the select box
+	var showSelectBox = function (e) {
+		if (parent.is('.' + config.disabledClass)) {
+			return;
+		}
+
+		selectBoxOrigin.left	= e.pageX - parentDim.left + parent[0].scrollLeft;
+		selectBoxOrigin.top		= e.pageY - parentDim.top + parent[0].scrollTop;
+
+		var css = {
+			left:		selectBoxOrigin.left + 'px', 
+			top:		selectBoxOrigin.top + 'px', 
+			width:		'1px', 
+			height:		'1px'
+		};
+		selectBox.addClass(config.activeClass).css(css);
+
+		config.onShow();
+	};
+
+	// Refreshes the select box dimensions and possibly position
+	var refreshSelectBox = function (e) {
+		if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
+			return;
+		}
+
+        // get scroll position
+        var leftScroll  = 0;
+        var rightScroll = 0;
+
+        if(realParent.data('scrollLeft')){
+            leftScroll  = realParent.data('scrollLeft');
+        }
+
+        if(realParent.data('scrollRight')){
+            rightScroll  = realParent.data('scrollRight');
+        }
+
+		var left		= e.pageX - parentDim.left + parent[0].scrollLeft;
+		var top			= e.pageY - parentDim.top + parent[0].scrollTop;
+		var newLeft		= left;
+		var newTop		= top;
+		var tempWidth	= selectBoxOrigin.left - newLeft ;
+		var newHeight	= selectBoxOrigin.top - newTop;
+
+        newLeft         = selectBoxOrigin.left - leftScroll;
+        var newWidth	= left - selectBoxOrigin.left;
+
+
+        if(newWidth < 0){
+            newLeft = newLeft - tempWidth ;
+            newWidth = newWidth * -1;
+        }
+
+
+		if (top > selectBoxOrigin.top) {
+			newTop		= selectBoxOrigin.top;
+			newHeight	= top - selectBoxOrigin.top;
+		}
+
+		var css = {
+			left:	newLeft + 'px', 
+			top:	newTop + 'px', 
+			width:	newWidth + 'px', 
+			height:	newHeight + 'px'
+		};
+		selectBox.css(css);
+
+		config.onRefresh();
+	};
+
+	// Hides the select box
+	var hideSelectBox = function (e) {
+		if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
+			return;
+		}
+		if (config.onHide(selectBox, deselectedItems) !== false) {
+			selectBox.removeClass(config.activeClass);
+		}
+	};
+
+	// Scrolls parent if needed
+	var scrollPerhaps = function (e) {
+		if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
+			return;
+		}
+
+		// Scroll down
+		if ((e.pageY + config.scrollTH) > (parentDim.top + parentDim.height)) {
+			parent[0].scrollTop += config.scrollTH;
+		}
+		// Scroll up
+		if ((e.pageY - config.scrollTH) < parentDim.top) {
+			parent[0].scrollTop -= config.scrollTH;
+		}
+		// Scroll right
+		if ((e.pageX + config.scrollTH) > (parentDim.left + parentDim.width)) {
+			parent[0].scrollLeft += config.scrollTH;
+		}
+		// Scroll left
+		if ((e.pageX - config.scrollTH) < parentDim.left) {
+			parent[0].scrollLeft -= config.scrollTH;
+		}
+	};
+
+	// Selects all the elements in the select box's range
+	var selectElementsInRange = function () {
+		if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
+			return;
+		}
+
+		var selectables		= realParent.find(config.selectables + ':not(.' + config.ignoredClass + ')');
+		var selectBoxOffset	= selectBox.offset();
+		var selectBoxDim	= {
+			left:	selectBoxOffset.left, 
+			top:	selectBoxOffset.top, 
+			width:	selectBox.width(), 
+			height:	selectBox.height()
+		};
+
+        // reset deselected item array
+        deselectedItems = [];
+
+		selectables.each(function (i) {
+			var el			= $(this);
+			var elOffset	= el.offset();
+			var elDim		= {
+				left:	elOffset.left, 
+				top:	elOffset.top, 
+				width:	el.width(), 
+				height:	el.height()
+			};
+
+			if (percentCovered(selectBoxDim, elDim) > config.percentCovered) {
+				el.addClass(config.selectedClass);
+			}else {
+
+                if(el.hasClass(config.selectedClass)){
+                    el.removeClass(config.selectedClass);
+                    deselectedItems.push(el);
+                }
+
+			}
+		});
+
+	};
+
+	// Returns the amount (in %) that dim1 covers dim2
+	var percentCovered = function (dim1, dim2) {
+		// The whole thing is covering the whole other thing
+		if (
+			(dim1.left <= dim2.left) && 
+			(dim1.top <= dim2.top) && 
+			((dim1.left + dim1.width) >= (dim2.left + dim2.width)) && 
+			((dim1.top + dim1.height) > (dim2.top + dim2.height))
+		) {
+			return 100;
+		}
+		// Only parts may be covered, calculate percentage
+		else {
+			dim1.right		= dim1.left + dim1.width;
+			dim1.bottom		= dim1.top + dim1.height;
+			dim2.right		= dim2.left + dim2.width;
+			dim2.bottom		= dim2.top + dim2.height;
+
+			var l = Math.max(dim1.left, dim2.left);
+			var r = Math.min(dim1.right, dim2.right);
+			var t = Math.max(dim1.top, dim2.top);
+			var b = Math.min(dim1.bottom, dim2.bottom);
+
+			if (b >= t && r >= l) {
+			/*	$('<div/>').appendTo(document.body).css({
+					background:	'red', 
+					position:	'absolute',
+					left:		l + 'px', 
+					top:		t + 'px', 
+					width:		(r - l) + 'px', 
+					height:		(b - t) + 'px', 
+					zIndex:		100
+				}); */
+
+				var percent = (((r - l) * (b - t)) / (dim2.width * dim2.height)) * 100;
+
+			//	alert(percent + '% covered')
+
+				return percent;
+			}
+		}
+		// Nothing covered, return 0
+		return 0;
+	};
+
+	// Do the right stuff then return this
+	selectBox
+		.mousemove(function (e) {
+
+			refreshSelectBox(e);
+
+			if (config.selectables && config.selectOnMove) {
+                selectElementsInRange();
+			}
+
+			if (config.autoScroll) {
+				scrollPerhaps(e);
+			}
+
+			e.preventDefault();
+		})
+		.mouseup(function(e) {
+
+            if (config.selectables) {
+                selectElementsInRange();
+			}
+
+			hideSelectBox(e);
+
+			e.preventDefault();
+		});
+
+	if (jQuery.fn.disableTextSelect) {
+		parent.disableTextSelect();
+	}
+
+	parent
+		.mousedown(function (e) {
+
+            if(
+                e.which === 1 && // left mouse down
+                e.target === realParent[0] // prevent while dragging a system :)
+            ){
+
+
+                // Make sure user isn't clicking scrollbar (or disallow clicks far to the right actually)
+                if ((e.pageX + 20) > jQuery(document.body).width()) {
+                    return;
+                }
+
+                showSelectBox(e);
+
+                e.preventDefault();
+            }
+
+
+		})
+		.mousemove(function (e) {
+
+            refreshSelectBox(e);
+
+			if (config.selectables && config.selectOnMove) {
+
+                selectElementsInRange();
+            }
+
+			if (config.autoScroll) {
+				scrollPerhaps(e);
+			}
+
+			e.preventDefault();
+		})
+		.mouseup(function (e) {
+
+            if (config.selectables) {
+				selectElementsInRange();
+			}
+
+			hideSelectBox(e);
+
+			e.preventDefault();
+		});
+
+	// Be nice
+	return this;
+};
\ No newline at end of file
diff --git a/js/lib/jquery.easypiechart.min.js b/js/lib/jquery.easypiechart.min.js
new file mode 100644
index 00000000..9cdf9867
--- /dev/null
+++ b/js/lib/jquery.easypiechart.min.js
@@ -0,0 +1,9 @@
+/**!
+ * easyPieChart
+ * Lightweight plugin to render simple, animated and retina optimized pie charts
+ *
+ * @license 
+ * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
+ * @version 2.1.6
+ **/
+!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});
\ No newline at end of file
diff --git a/js/lib/jquery.hoverIntent.minified.js b/js/lib/jquery.hoverIntent.minified.js
new file mode 100644
index 00000000..653a0a65
--- /dev/null
+++ b/js/lib/jquery.hoverIntent.minified.js
@@ -0,0 +1,9 @@
+/*!
+ * hoverIntent v1.8.0 // 2014.06.29 // jQuery v1.9.1+
+ * http://cherne.net/brian/resources/jquery.hoverIntent.html
+ *
+ * You may use hoverIntent under the terms of the MIT license. Basically that
+ * means you are free to use hoverIntent as long as this header is left intact.
+ * Copyright 2007, 2014 Brian Cherne
+ */
+(function($){$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var cfg={interval:100,sensitivity:6,timeout:0};if(typeof handlerIn==="object"){cfg=$.extend(cfg,handlerIn)}else{if($.isFunction(handlerOut)){cfg=$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector})}else{cfg=$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut})}}var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if(Math.sqrt((pX-cX)*(pX-cX)+(pY-cY)*(pY-cY))<cfg.sensitivity){$(ob).off("mousemove.hoverIntent",track);ob.hoverIntent_s=true;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=false;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=$.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type==="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).on("mousemove.hoverIntent",track);if(!ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).off("mousemove.hoverIntent",track);if(ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.on({"mouseenter.hoverIntent":handleHover,"mouseleave.hoverIntent":handleHover},cfg.selector)}})(jQuery);
\ No newline at end of file
diff --git a/sass/_colors.scss b/sass/_colors.scss
index bc6e3972..a3790723 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -17,8 +17,10 @@ $gray-mid-light:        lighten($black, 75%);
 // blue
 $blue-lighter:          #57889c;
 $blue:                  #428bca;
+$blue-dark:             #316490;
 
 // teal
+$teal-light:            #6caead;
 $teal:                  #568a89;
 $teal-dark:             #477372;
 $teal-darker:           #375959;
@@ -32,6 +34,7 @@ $green-dark:            #4f9e4f;
 // red
 $red:                   #d9534f;
 $red-darker:            #a52521;
+$red-darkest:           #58100d;
 
 // yellow
 $yellow-lighter:        #ffffbb;
@@ -42,10 +45,13 @@ $orange:                #e28a0d;
 $orange-dark:           #c2760c;
 
 // pink
-
 $pink-light:            #e88ce7;
 $pink:                  #e06fdf;
 $pink-dark:             #d747d6;
+$pink-darker:           #782d77;
+
+// purple
+$purple-dark:           #3e264e;
 
 // WH effects
 $wh-color-magnetar:     $pink;
@@ -70,6 +76,6 @@ $system-color-sec-1-0:        #28c0bf;
 
 $brand-primary:         $teal-darker !default;
 $brand-success:         $green-dark !default;
-$brand-info:            $blue !default;
+$brand-info:            $blue-dark !default;
 $brand-warning:         $orange !default;
 $brand-danger:          $red-darker !default;
\ No newline at end of file
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 376e1521..ccdfe6cd 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,5 +1,5 @@
-// SASS version of SmartAdmin 1.4 variables.less
-//
+
+
 // a flag to toggle asset pipeline / compass integration
 // defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
 // in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
@@ -41,7 +41,7 @@ $font-size-large:         ceil(($font-size-base * 1.24)); // ~16px
 $font-size-small:         ceil(($font-size-base * 0.85)); // ~11px
 
 $font-size-h1:            floor(($font-size-base * 1.85)); // ~24px
-$font-size-h2:            floor(($font-size-base * 1.7)); // ~22px
+$font-size-h2:            floor(($font-size-base * 1.24)); // ~22px
 $font-size-h3:            ceil(($font-size-base * 1.385)); // ~18px
 $font-size-h4:            $font-size-base; //ceil(($font-size-base * 1.32)); // ~17px
 $font-size-h5:            ceil(($font-size-base * 1.24)); // ~16px
@@ -201,8 +201,8 @@ $dropdown-fallback-border:       #ccc;
 $dropdown-divider-bg:            $gray-light;
 
 $dropdown-link-color:            $gray-dark;
-$dropdown-link-hover-color:      $gray-lighter;
-$dropdown-link-hover-bg:         $gray-dark;
+$dropdown-link-hover-color:      $gray-darkest;
+$dropdown-link-hover-bg:         $gray-light;
 $dropdown-link-active-color:     #fff;
 $dropdown-link-active-bg:        $component-active-bg;
 
@@ -317,10 +317,10 @@ $navbar-default-border:            none;
 
 // Navbar links
 $navbar-default-link-color:                #777;
-$navbar-default-link-hover-color:          #333;
-$navbar-default-link-hover-bg:             transparent;
-$navbar-default-link-active-color:         #555;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%);
+$navbar-default-link-hover-color:          #1d1d1d;
+$navbar-default-link-hover-bg:             $gray-light;
+$navbar-default-link-active-color:         $gray-darker;
+$navbar-default-link-active-bg:            $gray-lighter;
 $navbar-default-link-disabled-color:       #ccc;
 $navbar-default-link-disabled-bg:          transparent;
 
@@ -445,7 +445,7 @@ $jumbotron-font-size:            ceil(($font-size-base * 1.5));
 //## Define colors for form feedback states and, by default, alerts.
 
 $state-success-text:             $gray-darker;
-$state-success-bg:               lighten($brand-success, 50%);
+$state-success-bg:               lighten($brand-success, 40%);
 $state-success-border:           $brand-success;
 
 $state-info-text:                $gray-darker;
@@ -468,7 +468,7 @@ $state-danger-border:            $brand-danger;
 $tooltip-max-width:           200px;
 $tooltip-color:               #fff;
 $tooltip-bg:                  #000;
-$tooltip-opacity:             .9;
+$tooltip-opacity:             0.9;
 
 $tooltip-arrow-width:         5px;
 $tooltip-arrow-color:         $tooltip-bg;
@@ -641,8 +641,8 @@ $thumbnail-caption-padding:   9px;
 //
 //##
 
-$well-bg:                     #f5f5f5;
-$well-border:                 darken($well-bg, 7%);
+$well-bg:                     $gray-light;
+$well-border:                 $gray-dark;
 
 
 //== Badges
@@ -706,8 +706,8 @@ $close-text-shadow:           0 1px 0 #fff;
 $code-color:                  #c7254e;
 $code-bg:                     #f9f2f4;
 
-$kbd-color:                   #fff;
-$kbd-bg:                      #333;
+$kbd-color:                   $gray-lighter;
+$kbd-bg:                      $gray-darker;
 
 $pre-bg:                      #f5f5f5;
 $pre-color:                   $gray-dark;
@@ -724,7 +724,7 @@ $abbr-border-color:           $gray-light;
 $headings-small-color:        $gray-light;
 $blockquote-small-color:      $gray-light;
 $blockquote-font-size:        ($font-size-base * 1.25);
-$blockquote-border-color:     $gray-lighter;
+$blockquote-border-color:     $green;
 $page-header-border-color:    $gray-lighter;
 
 
diff --git a/sass/bootstrap/_dropdowns.scss b/sass/bootstrap/_dropdowns.scss
index 526be5b8..08341079 100644
--- a/sass/bootstrap/_dropdowns.scss
+++ b/sass/bootstrap/_dropdowns.scss
@@ -42,8 +42,9 @@
   border: 1px solid $dropdown-fallback-border; // IE8 fallback
   border: 1px solid $dropdown-border;
   border-radius: $border-radius-base;
-  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
+  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
   background-clip: padding-box;
+  border-radius: 5px;
 
   // Aligns the dropdown menu to right
   //
@@ -61,7 +62,7 @@
   // Links within the dropdown menu
   > li > a {
     display: block;
-    padding: 3px 20px;
+    padding: 3px 15px;
     clear: both;
     font-weight: normal;
     line-height: $line-height-base;
diff --git a/sass/bootstrap/_list-group.scss b/sass/bootstrap/_list-group.scss
index 8c5ea4cf..4a2918dd 100644
--- a/sass/bootstrap/_list-group.scss
+++ b/sass/bootstrap/_list-group.scss
@@ -21,7 +21,7 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 7px 15px;
+  padding: 7px 8px;
   background-color: $list-group-bg;
   border-bottom: 1px solid $list-group-border;
 
diff --git a/sass/bootstrap/_navbar.scss b/sass/bootstrap/_navbar.scss
index f3b74c64..053777a3 100644
--- a/sass/bootstrap/_navbar.scss
+++ b/sass/bootstrap/_navbar.scss
@@ -12,7 +12,6 @@
   position: relative;
   min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: $navbar-margin-bottom;
-  border-bottom: 1px solid $gray-dark;
 
   // Prevent floats from breaking the navbar
   @include clearfix();
@@ -256,6 +255,7 @@
 
     > li {
       float: left;
+      margin-right: 2px;
       > a {
         padding-top:    $navbar-padding-vertical;
         padding-bottom: $navbar-padding-vertical;
@@ -384,6 +384,7 @@
 .navbar-default {
   background: rgba( $navbar-default-bg, $navbar-default-opacity );
   border-color:  $navbar-default-border;
+  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
 
   .navbar-brand {
     color: $navbar-default-brand-color;
diff --git a/sass/bootstrap/_scaffolding.scss b/sass/bootstrap/_scaffolding.scss
index cf020299..3215b447 100644
--- a/sass/bootstrap/_scaffolding.scss
+++ b/sass/bootstrap/_scaffolding.scss
@@ -57,6 +57,7 @@ a {
 
   &:focus {
     @include tab-focus();
+    text-decoration: none;
   }
 }
 
diff --git a/sass/bootstrap/_wells.scss b/sass/bootstrap/_wells.scss
index b8657118..a662f439 100644
--- a/sass/bootstrap/_wells.scss
+++ b/sass/bootstrap/_wells.scss
@@ -6,16 +6,20 @@
 // Base class
 .well {
   min-height: 20px;
-  padding: 19px;
+  padding: 10px;
   margin-bottom: 20px;
   background-color: $well-bg;
   border: 1px solid $well-border;
-  border-radius: $border-radius-base;
-  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  @include border-radius(5px);
+  color: $gray-darker;
   blockquote {
     border-color: #ddd;
     border-color: rgba(0,0,0,.15);
   }
+
+  a {
+    color: $teal-light;
+  }
 }
 
 // Sizes
diff --git a/sass/layout/_main.scss b/sass/layout/_main.scss
index c9c49e84..34a62bd4 100644
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -13,6 +13,13 @@ a{
   }
 }
 
+// emphasized text
+em{
+  &.pf-brand{
+    text-transform: uppercase;
+  }
+}
+
 // ajax laoding indicator overlay
 
 .pf-loading-overlay{
@@ -60,10 +67,10 @@ a{
 
 // maps module ===================================================
 #pf-map-module{
+  margin: 0 10px;
 
   // Tabs (colored)
   #pf-map-tabs {
-    margin: 0 10px;
 
     .pf-map-type-default{
       border-top: 2px solid transparent;
@@ -82,20 +89,12 @@ a{
     }
   }
 
-  .tab-content{
-    width: calc(100% - 20px);
-  }
-
 }
 
 // Tab Content Body Grid ========================================
 .pf-map-content-row{
   margin: 10px 0 0 0;
-
-  // Table cell style
-  > div{
-
-  }
+  padding-bottom: 40px; // space for footer
 
   // alle Module innerhalb einer row
   .pf-module{
@@ -111,7 +110,6 @@ a{
 // WH effects ==================================================
 
 .pf-system-effect{
-  margin-left: 5px;
   cursor: default;
   color: $gray-lighter;
 }
@@ -140,7 +138,30 @@ a{
   color: $wh-color-blackhole;
 }
 
-// System security status ============================================
+// system info status ================================================
+.pf-system-info-rally{
+  .pf-system-head{
+    background-color: $pink-darker;
+
+    @include background-image(linear-gradient(-45deg,
+      $purple-dark 25%,
+      transparent 25%,
+      transparent 50%,
+      $purple-dark 50%,
+      $purple-dark 75%,
+      transparent 75%,
+      transparent));
+    background-size:25px 25px;
+    -webkit-animation:move 3s linear infinite;
+    -moz-animation:move 3s linear infinite;
+    -ms-animation:move 3s linear infinite;
+    animation:move 3s linear infinite;
+  }
+}
+
+
+// system security status ============================================
+
 .pf-system-security-0-0{
   color: $system-color-sec-0-0;
 }
@@ -189,7 +210,8 @@ a{
 
 .pf-system-sec{
   margin-right: 5px;
-  cursor: move;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
 }
 
 .pf-system-sec-highSec{
@@ -244,7 +266,7 @@ a{
 }
 
 // system effect info dialog
-.pf-system-effect-dialog-wrapper{
+.pf-system-effect-dialog-wrapper, .pf-jump-info-dialog{
   .table{
     margin: 15px 0;
     font-size: 10px;
@@ -255,22 +277,121 @@ a{
   }
 }
 
-// tooltip ======================================================
-.tooltip-inner{
-  opacity: 1;
-  color: $teal;
-  background-color: $gray;
-  font-family: 'Oxygen Bold';
-  padding: 5px 5px;
-  @include border-radius(5px);
+// "fake connection" classes for the map legend
+.pf-connection{
+  box-sizing: content-box;
+  display: inline-block;
+  width: 30px;
+  height: 4px;
+  margin-right: 5px;
+  border-top: 2px solid $gray-light;
+  border-bottom: 2px solid $gray-light;
+  background-color: #3c3f41;
+
+  &.pf-connection-eol{
+    border-color: $pink-dark;
+  }
+
+  &.pf-connection-reduced{
+    background-color: $orange;
+  }
+
+  &.pf-connection-critical{
+    background-color: $red-darker;
+  }
+  &.pf-connection-frig{
+    border-style: dashed;
+    border-left: none;
+    border-right: none;
+  }
 
 }
 
-.tooltip.top .tooltip-arrow{
+
+// global tooltip settings ======================================
+.tooltip-inner{
+  color: $green;
+  background-color: $gray;
+  font-family: 'Oxygen Bold';
+  padding: 5px 5px;
+  @include border-radius(3px);
+  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
+}
+
+.tooltip.top .tooltip-arrow,{
   border-top-color: $gray-light;
 }
 
+.tooltip.right .tooltip-arrow,{
+  border-right-color: $gray-light;
+}
+
 .tooltip.bottom .tooltip-arrow{
   border-bottom-color: $gray-light;
 }
 
+.tooltip.left .tooltip-arrow{
+  border-left-color: $gray-light;
+}
+
+// footer =======================================================
+#pf-footer{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  background: rgba($gray, 0.3);
+}
+
+/*
+Animate the stripes
+*/
+@-webkit-keyframes move{
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+@-moz-keyframes move{
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+@-ms-keyframes move{
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+@keyframes move{
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
+
+
+// TODO move in seperate file!!! ====================================
+
+#pf-legend-scrollspy{
+  position: relative;
+  height: 500px;
+  overflow: auto;
+}
+
+
+
+
+
+
diff --git a/sass/layout/_map.scss b/sass/layout/_map.scss
index d268f7f3..c9aafe71 100644
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -30,26 +30,40 @@
 
 // end bounce mixin ================================================
 
-.pf-map-wrapper{
-  width: 100%;
-  height: 530px;
-  overflow: auto;
-  padding: 5px;
-  margin: 0 10px;
-  background: rgba($gray-darker, 0.93);
+.pf-map-tab-content{
 
-  box-shadow:inset -1px 1px 6px 0 rgba($black, 0.8);
-  @include border-bottom-radius(5px);
-  border: {
-    width: 1px;
-    style: solid;
-    color: $gray-lighter;
+  .pf-map-wrapper{
+    position: relative;
+    width: 100%;
+    height: 530px;
+    overflow: auto;
+    padding: 5px;
+    background: rgba($gray-darker, 0.93);
+    box-shadow:inset -3px 3px 10px 0 rgba($black, 0.3);
+    @include border-bottom-radius(5px);
+    border: {
+      width: 1px;
+      style: solid;
+      color: $gray-lighter;
+    }
   }
 }
 
+.pf-map-overlay{
+  position: absolute;
+  display: none; // triggered by js
+  z-index: 10000;
+  width: 36px;
+  height: 36px;
+  bottom: 23px;
+  right: 10px;
+  background: rgba($black, 0.2);
+  @include border-radius(5px);
+}
+
 // 20x20px grid background
 .pf-grid-small{
-  background-image: url("#{$base-url}/grid_20x20.png") !important;
+  background: url("#{$base-url}/grid_20x20.png") !important;
 }
 
 
@@ -58,7 +72,6 @@
   height: 500px;
   position: relative;
 
-
   .pf-system{
     position: absolute;
     min-width: 80px;
@@ -84,10 +97,15 @@
         display: inline-block;
         min-width: 41px;
         color: $gray-lighter;
+        margin-right: 2px;
+      }
+
+      .fa-lock{
+        display: none; // triggered by system-lock class
       }
 
       .pf-system-head-expand{
-        margin-left: 5px;
+        margin-left: 2px;
         color: $gray-light;
         display: none;  // triggered by JS
       }
@@ -141,12 +159,58 @@
       }
 
     }
+
+    // system specific tooltip style
+    .tooltip{
+
+      &.in{
+        opacity: 1;
+      }
+      
+      .tooltip-inner{
+        color: $gray-dark;
+        background-color: $gray-lighter;
+        padding: 3px 3px;
+      }
+      
+    }
+
+
+
   }
 
+  // active system
   .pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
     @include box-shadow($yellow-lighter 0px 0px 8px 0px);
   }
 
+
+  // selected system
+  .pf-system-selected:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
+    @include box-shadow($red-darkest 0px 0px 8px 0px);
+
+    .pf-system-head, .pf-system-body{
+      background-color: $red-darkest;
+    }
+  }
+
+  // locked system
+  .pf-system-locked{
+    color: $gray-light;
+
+    .pf-system-sec{
+      cursor: default !important;
+    }
+
+    .pf-system-body{
+      cursor: default !important;
+    }
+
+    .fa-lock{
+      display: inline-block !important;
+    }
+  }
+
   // Endpoints ====================================================
   .pf-map-endpoint-source, .pf-map-endpoint-target{
 
@@ -222,15 +286,6 @@
     }
   }
 
-  // Connection status ============================================
-
-  svg.pf-map-connection-eol  {
-
-    path:first-child{
-      stroke: red;
-    }
-  }
-
   // Connection overlay ===========================================
   .pf-map-connection-overlay{
     padding: 1px 4px;
@@ -260,6 +315,8 @@
 
 // context menu ==================================================
 .dropdown-menu{
+  z-index: 1020; // over tooltips
+
   i{
     width: 20px
   }
@@ -269,4 +326,3 @@
 
 
 
-
diff --git a/sass/library/drag-to-select/_dragToSelect.scss b/sass/library/drag-to-select/_dragToSelect.scss
new file mode 100644
index 00000000..8be669bf
--- /dev/null
+++ b/sass/library/drag-to-select/_dragToSelect.scss
@@ -0,0 +1,15 @@
+
+// styles for drag-select
+
+div.pf-map-drag-to-select {
+  background: $teal-darker;
+  display: none; // triggered by js
+  opacity: 0.3;
+  z-index: 9000;
+  border: 1px dashed $gray-lighter;
+  @include border-radius(5px);
+
+  &.active {
+    display: block;
+  }
+}
diff --git a/sass/library/easy-pie-chart/_easyPieChart.scss b/sass/library/easy-pie-chart/_easyPieChart.scss
new file mode 100644
index 00000000..bf49eb55
--- /dev/null
+++ b/sass/library/easy-pie-chart/_easyPieChart.scss
@@ -0,0 +1,38 @@
+// global pie chart styles
+.pf-pie-chart {
+  position: relative;
+  display:table-cell;
+  text-align: center;
+  vertical-align:middle;
+
+  span{
+    display: inline-block;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+// pie chart map timer
+.pf-pie-chart-map-timer{
+  width: 36px;
+  height: 36px;
+  margin: 3px;
+
+  canvas {
+    top: 3px;
+    left: 3px;
+  }
+
+  span{
+    font-size: 10px;
+    &:after {
+      content: 's';
+      margin-left: 1px;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/sass/library/pnotify/_pnotify.core.scss b/sass/library/pnotify/_pnotify.core.scss
index c44b53c4..2716d668 100644
--- a/sass/library/pnotify/_pnotify.core.scss
+++ b/sass/library/pnotify/_pnotify.core.scss
@@ -54,3 +54,13 @@ html > body > .ui-pnotify {
   bottom: 25px;
   top: auto;
 }
+.ui-pnotify.stack-bar-top {
+  right: 0;
+  top: 0;
+}
+.ui-pnotify.stack-bar-bottom {
+  right: auto;
+  bottom: 0;
+  top: auto;
+  left: auto;
+}
diff --git a/sass/pathfinder.scss b/sass/pathfinder.scss
index 24a98de8..6d39e320 100644
--- a/sass/pathfinder.scss
+++ b/sass/pathfinder.scss
@@ -1,3 +1,14 @@
+/*!
+ * Pathfinder - Mapping Tool
+ * http://pathfinder.exodus4d.de/
+ *
+ * CSS - Cascading Style Sheets
+ * Generated with Compass http://compass-style.org/
+ *
+ * Copyright 2014 - 2014, Exodus 4D - Mark Friedrich
+ *
+ */
+
 @import "compass/css3";
 @import "compass/css3/border-radius";
 @import "compass/css3/box-shadow";
@@ -22,6 +33,9 @@
 @import "library/x-editable/_bootstrap-editable";         // X-editable - v1.5.0
 @import "library/pnotify/_pnotify.core";                  // PNotify styles
 @import "library/slidebars/_slidebars";                   // Slidebars Navigation
+@import "library/easy-pie-chart/_easyPieChart";           // Easy Pie Chart 2.1.6
+@import "library/drag-to-select/_dragToSelect";           // Drag to Select 1.1
+
 
 // Main THEME (Imports by order - do not change order)
 @import "smartadmin/main";
diff --git a/sass/smartadmin/_main-colorpallet.scss b/sass/smartadmin/_main-colorpallet.scss
index 20126b09..247cd15d 100644
--- a/sass/smartadmin/_main-colorpallet.scss
+++ b/sass/smartadmin/_main-colorpallet.scss
@@ -7,6 +7,8 @@
   &.txt-color-blueLight     { color:$blueLight !important; }
   &.txt-color-blueDark      { color: $blueDark !important; }
   &.txt-color-grayLightest  { color: $gray-lightest !important; }
+  &.txt-color-gray          { color: $gray !important; }
+  &.txt-color-grayDark      { color: $gray-dark !important; }
   &.txt-color-green         { color: $green !important; }
   &.txt-color-greenLight    { color: $greenLight !important; }
   &.txt-color-greenDark     { color: $greenDark  !important; }
@@ -20,10 +22,15 @@
   &.txt-color-darken        { color: $darken !important; }
   &.txt-color-lighten       { color: $lighten !important; }
   &.txt-color-white         { color: $white !important; }
-  &.txt-color-grayDark      { color: $greyDark !important; }
   &.txt-color-magenta       { color: $magenta !important; }
   &.txt-color-teal          { color: $teal !important; }
   &.txt-color-redLight      { color: $redLight !important; }
+
+  &.txt-color-primary       { color: $brand-primary !important; }
+  &.txt-color-success       { color: $brand-success !important; }
+  &.txt-color-information   { color: $brand-info !important; }
+  &.txt-color-warning       { color: $brand-warning !important; }
+  &.txt-color-danger        { color: $brand-danger !important; }
 }
 /*
  * BACKGROUNDS
diff --git a/sass/smartadmin/_main.scss b/sass/smartadmin/_main.scss
index 42f5b269..debe811a 100644
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -19,15 +19,19 @@ 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 {
   outline: 0;
 }
 	
-h1,h2,h3,h4 {
+h1,h3,h4 {
 	margin:0;
-	font-family: "Oxygen Bold", "Open Sans", Arial, Helvetica, Sans-Serif;
+	font-family: "Oxygen Bold";
 	font-weight:300;
 }
 
@@ -141,9 +145,10 @@ h1 {
 }
 
 h2 {
-	letter-spacing:-1px;
+    font-family: "Oxygen", "Open Sans", Arial, Helvetica, Sans-Serif;;
+	letter-spacing: 0px;
 	font-size: $font-size-h2;
-	margin:20px 0;
+	margin: 20px 0;
 	line-height:normal;
 }
 
@@ -157,6 +162,7 @@ h3 {
 
 h4 {
 	line-height:normal;
+    margin: 20px 0 10px 0;
 }
 
 h5 {
diff --git a/templates/modules/contextmenu.html b/templates/modules/contextmenu.html
index c3397777..fde914ca 100644
--- a/templates/modules/contextmenu.html
+++ b/templates/modules/contextmenu.html
@@ -2,12 +2,15 @@
     {{#items}}
         {{#text}}
             <li {{#subitems}}class="dropdown-submenu"{{/subitems}}>
-                <a href="#" tabindex="-1" data-action="{{action}}"><i class="fa {{#icon}}{{icon}}{{/icon}}"></i>{{text}}</a>
+                <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>
-                                <a href="#" tabindex="-1" data-action="{{subAction}}"><i class="fa {{#subIcon}}{{subIcon}}{{/subIcon}} {{#subIconClass}}{{subIconClass}}{{/subIconClass}}"></i>{{subText}}</a>
+                                <a href="#" tabindex="-1" data-action="{{subAction}}">
+                                    <i class="fa {{#subIcon}}{{subIcon}}{{/subIcon}} {{#subIconClass}}{{subIconClass}}{{/subIconClass}} fa-fw"></i>
+                                    &nbsp;{{subText}}
+                                </a>
                             </li>
                         {{/subText}}
 
diff --git a/templates/modules/footer.html b/templates/modules/footer.html
new file mode 100644
index 00000000..c114b8fa
--- /dev/null
+++ b/templates/modules/footer.html
@@ -0,0 +1,11 @@
+<div id="{{id}}" class="navbar navbar-default" role="navigation">
+    <div class="container-fluid">
+        <div class="navbar-header pull-left">
+
+            <p class="navbar-text  txt-color txt-color-gray"><i class="fa fa-copyright"></i> 2015 by Exodus 4D, Mark Friedrich</p>
+        </div>
+        <div class="navbar-header pull-right">
+            <p class="navbar-text  txt-color txt-color-gray">All EVE related materials are property of <a target="_blank" href="http://www.ccpgames.com/">CCP Games</a></p>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/modules/header.html b/templates/modules/header.html
index ffca4350..46dc158b 100644
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -1,8 +1,6 @@
 <div class="navbar navbar-default  pf-head" role="navigation">
     <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header pull-left">
-
             <a class="navbar-brand pf-head-menu" href="#">
                 <i class="fa fa-bars fa-lg fa-fw"></i>&nbsp;Menu
               <!--  <img src="https://image.eveonline.com/Type/17738_32.png" /> -->
@@ -10,23 +8,12 @@
             <p class="navbar-text">Current system: Jita</p>
         </div>
 
-
         <div class="navbar-header pull-right">
-            <!--
-            <ul class="nav navbar-nav">
-                <li ><a href="#">Test <span class="sr-only">(current)</span></a></li>
-                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
-            </ul>
-            -->
             <p class="navbar-text"><span class="badge bg-color bg-color-teal">7</span>&nbsp;&nbsp;&nbsp;online</p>
             <p class="navbar-text">Signed in as {{userName}}</p>
             <a class="navbar-brand pf-head-map" href="#">
-                Map&nbsp;<i class="fa fa-globe fa-lg fa-fw"></i>
+                Map&nbsp;<i class="fa fa-code-fork fa-lg fa-fw"></i>
             </a>
-
-
         </div>
-
-
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/modules/jump_info_dialog.html b/templates/modules/jump_info_dialog.html
new file mode 100644
index 00000000..8290d482
--- /dev/null
+++ b/templates/modules/jump_info_dialog.html
@@ -0,0 +1,70 @@
+<table class="table table-condensed">
+    <thead>
+        <tr>
+            <th>Ship</th>
+            <th class="text-right">Mass</th>
+            <th class="text-right">Base Distance</th>
+            <th colspan="2" class="text-right">Distance to jump range</th>
+        </tr>
+        <tr>
+            <th></th>
+            <th></th>
+            <th></th>
+            <th class="text-right">min</th>
+            <th class="text-right">max</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Covert Ops Frigate</td>
+            <td class="text-right">1,280,000</td>
+            <td class="text-right">5.5 km</td>
+            <td class="text-right">0 km</td>
+            <td class="text-right">5.5 km</td>
+        </tr>
+        <tr>
+            <td>Plated T3 Cruiser</td>
+            <td class="text-right">14,300,000</td>
+            <td class="text-right">6.9 km</td>
+            <td class="text-right">0 km</td>
+            <td class="text-right">6.9 km</td>
+        </tr>
+        <tr>
+            <td>Plated Bhaalgorn</td>
+            <td class="text-right">101,000,000</td>
+            <td class="text-right">8.8 km</td>
+            <td class="text-right">0 km</td>
+            <td class="text-right">8.8 km</td>
+        </tr>
+        <tr>
+            <td>Orca</td>
+            <td class="text-right">250,000,000</td>
+            <td class="text-right">10.1 km</td>
+            <td class="text-right">0.1 km</td>
+            <td class="text-right">10.1 km</td>
+        </tr>
+        <tr>
+            <td>Average Carrier</td>
+            <td class="text-right">1,120,000,000</td>
+            <td class="text-right">13.5 km</td>
+            <td class="text-right">3.5 km</td>
+            <td class="text-right">13.5 km</td>
+        </tr>
+        <tr>
+            <td>Average Dreadnought</td>
+            <td class="text-right">1,240,000,000</td>
+            <td class="text-right">13.8 km</td>
+            <td class="text-right">3.8 km</td>
+            <td class="text-right">13.8 km</td>
+        </tr>
+    </tbody>
+</table>
+
+
+<blockquote>
+    <p>
+        The new base distance would scale as high as ~14km from the wormhole for the largest ships, and the random factor for each jump would range from 2km (for a fresh wormhole) to 5km (for a crit wormhole) in either direction.
+        The distance from a wormhole that ships must be within to jump will remain 5km as always.
+    </p>
+    <small> By CCP Fozzie | Mass-Based Spawn Distance after Wormhole Jumps</small>
+</blockquote>
\ No newline at end of file
diff --git a/templates/modules/map_legend_dialog.html b/templates/modules/map_legend_dialog.html
new file mode 100644
index 00000000..6017c54b
--- /dev/null
+++ b/templates/modules/map_legend_dialog.html
@@ -0,0 +1,324 @@
+<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>
diff --git a/templates/modules/signature_reader_dialog.html b/templates/modules/signature_reader_dialog.html
index d71549cb..3700fc0a 100644
--- a/templates/modules/signature_reader_dialog.html
+++ b/templates/modules/signature_reader_dialog.html
@@ -7,8 +7,8 @@
                     <textarea style="resize: vertical" rows="3"  id="form_result" name="clipboard" class="form-control custom-scroll"></textarea>
                     <span class="help-block">
                         Copy and paste signatures from your probe scanning window.
-                        Hit <button onclick="javascript:void(0);" class="btn btn-default btn-xs">Ctrl</button> + <button onclick="javascript:void(0);" class="btn btn-default btn-xs">a</button> (for copy)
-                        then <button onclick="javascript:void(0);" class="btn btn-default btn-xs">Ctrl</button> + <button onclick="javascript:void(0);" class="btn btn-default btn-xs">c</button> (for paste). This tool can add and update signatures.
+                        Hit <kbd>ctrl</kbd> + <kbd>a</kbd> (for copy)
+                        then <kbd>ctrl</kbd> + <kbd>c</kbd> (for paste). This tool can add and update signatures.
                     </span>
                 </div>
             </div>