- new "jump history" breadcrumb, closed #812

- new EVE server time clock added to footer - improved initial page render time, - refactored JS event trigger/handling - replaced _jQuery fullscreen_ plugin with HTML5´s native [Fullscreen API](https://developer.mozilla.org/docs/Web/API/Fullscreen_API)
2019-07-13 14:34:57 +02:00
parent c85ed14eb0
commit 5a5959d072
75 changed files with 2814 additions and 2510 deletions
--- a/app/main/model/pathfinder/characterlogmodel.php
+++ b/app/main/model/pathfinder/characterlogmodel.php
@@ -272,7 +272,7 @@ class CharacterLogModel extends AbstractPathfinderModel {
     */
    protected function deleteLogsHistory(){
        if(is_object($this->characterId)){
-            $this->characterId->clearCacheDataWithPrefix(CharacterModel::DATA_CACHE_KEY_HISTORY_LOGS);
+            $this->characterId->clearCacheDataWithPrefix(CharacterModel::DATA_CACHE_KEY_LOG_HISTORY);
        }
    }

--- a/app/main/model/pathfinder/charactermodel.php
+++ b/app/main/model/pathfinder/charactermodel.php
@@ -34,17 +34,17 @@ class CharacterModel extends AbstractPathfinderModel {
    /**
     * max count of historic character logs
     */
-    const MAX_HISTORY_LOGS_DATA         = 3;
+    const MAX_LOG_HISTORY_DATA          = 5;

    /**
     * TTL for historic character logs
     */
-    const TTL_HISTORY_LOGS              = 60 * 60 * 22;
+    const TTL_LOG_HISTORY               = 60 * 60 * 22;

    /**
     * cache key prefix historic character logs
     */
-    const DATA_CACHE_KEY_HISTORY_LOGS   = 'HISTORY_LOG';
+    const DATA_CACHE_KEY_LOG_HISTORY    = 'LOG_HISTORY';

    /**
     * character authorization status
@@ -201,56 +201,60 @@ class CharacterModel extends AbstractPathfinderModel {

    /**
     * get character data
-     * @param bool|false $addCharacterLogData
-     * @return null|object|\stdClass
+     * @param bool $addLogData
+     * @param bool $addLogHistoryData
+     * @return mixed|object|null
     * @throws \Exception
     */
-    public function getData($addCharacterLogData = false){
-        $cacheKeyModifier = '';
-
-        // check if there is cached data
-        // -> IMPORTANT: $addCharacterLogData is optional! -> therefore we need 2 cache keys!
-        if($addCharacterLogData){
-            $cacheKeyModifier = self::DATA_CACHE_KEY_LOG;
-        }
-        $characterData = $this->getCacheData($cacheKeyModifier);
-
-        if(is_null($characterData)){
+    public function getData($addLogData = false, $addLogHistoryData = false){
+        // check for cached data
+        if(is_null($characterData = $this->getCacheData())){
            // no cached character data found

-            $characterData                  = (object) [];
-            $characterData->id              = $this->_id;
-            $characterData->name            = $this->name;
-            $characterData->role            = $this->roleId->getData();
-            $characterData->shared          = $this->shared;
-            $characterData->logLocation     = $this->logLocation;
-            $characterData->selectLocation  = $this->selectLocation;
-
-            if($addCharacterLogData){
-                if($logModel = $this->getLog()){
-                    $characterData->log     = $logModel->getData();
-                }
-            }
+            $characterData                      = (object) [];
+            $characterData->id                  = $this->_id;
+            $characterData->name                = $this->name;
+            $characterData->role                = $this->roleId->getData();
+            $characterData->shared              = $this->shared;
+            $characterData->logLocation         = $this->logLocation;
+            $characterData->selectLocation      = $this->selectLocation;

            // check for corporation
            if($corporation = $this->getCorporation()){
-                $characterData->corporation = $corporation->getData();
+                $characterData->corporation     = $corporation->getData();
            }

            // check for alliance
            if($alliance = $this->getAlliance()){
-                $characterData->alliance = $alliance->getData();
+                $characterData->alliance        = $alliance->getData();
            }

            // max caching time for a system
-            // the cached date has to be cleared manually on any change
-            // this includes system, connection,... changes (all dependencies)
-            $this->updateCacheData($characterData, $cacheKeyModifier);
+            // cached date has to be cleared manually on any change
+            // this applies to system, connection,... changes (+ all other dependencies)
+            $this->updateCacheData($characterData);
+        }
+
+        if($addLogData){
+            if(is_null($logData = $this->getCacheData(self::DATA_CACHE_KEY_LOG))){
+                if($logModel = $this->getLog()){
+                    $logData = $logModel->getData();
+                    $this->updateCacheData($logData, self::DATA_CACHE_KEY_LOG);
+                }
+            }
+
+            if($logData){
+                $characterData->log             = $logData;
+            }
+        }
+
+        if($addLogHistoryData && $characterData->log){
+            $characterData->logHistory          = $this->getLogsHistory();
        }

        // temp "authStatus" should not be cached
        if($this->authStatus){
-            $characterData->authStatus      = $this->authStatus;
+            $characterData->authStatus          = $this->authStatus;
        }

        return $characterData;
@@ -1041,7 +1045,7 @@ class CharacterModel extends AbstractPathfinderModel {
     * @return array
     */
    public function getLogsHistory() : array {
-        if(!is_array($logHistoryData = $this->getCacheData(self::DATA_CACHE_KEY_HISTORY_LOGS))){
+        if(!is_array($logHistoryData = $this->getCacheData(self::DATA_CACHE_KEY_LOG_HISTORY))){
            $logHistoryData = [];
        }
        return $logHistoryData;
@@ -1067,9 +1071,9 @@ class CharacterModel extends AbstractPathfinderModel {
            array_unshift($logHistoryData, $historyEntry);

            // limit max history data
-            array_splice($logHistoryData, self::MAX_HISTORY_LOGS_DATA);
+            array_splice($logHistoryData, self::MAX_LOG_HISTORY_DATA);

-            $this->updateCacheData($logHistoryData, self::DATA_CACHE_KEY_HISTORY_LOGS, self::TTL_HISTORY_LOGS);
+            $this->updateCacheData($logHistoryData, self::DATA_CACHE_KEY_LOG_HISTORY, self::TTL_LOG_HISTORY);
        }
    }

--- a/app/main/model/pathfinder/systemmodel.php
+++ b/app/main/model/pathfinder/systemmodel.php
@@ -27,17 +27,17 @@ class SystemModel extends AbstractMapTrackingModel {
    /**
     * max count of history signature data in cache
     */
-    const MAX_HISTORY_SIGNATURES_DATA       = 10;
+    const MAX_SIGNATURES_HISTORY_DATA       = 10;

    /**
     * TTL for history signature data
     */
-    const TTL_HISTORY_SIGNATURES            = 7200;
+    const TTL_SIGNATURES_HISTORY            = 7200;

    /**
     * cache key prefix for getData(); result WITH log data
     */
-    const DATA_CACHE_KEY_HISTORY_SIGNATURES = 'HISTORY_SIGNATURES';
+    const DATA_CACHE_KEY_SIGNATURES_HISTORY = 'HISTORY_SIGNATURES';

    /**
     * @var string
@@ -805,7 +805,7 @@ class SystemModel extends AbstractMapTrackingModel {
     * @return array
     */
    public function getSignaturesHistory() : array {
-        if(!is_array($signaturesHistoryData = $this->getCacheData(self::DATA_CACHE_KEY_HISTORY_SIGNATURES))){
+        if(!is_array($signaturesHistoryData = $this->getCacheData(self::DATA_CACHE_KEY_SIGNATURES_HISTORY))){
            $signaturesHistoryData = [];
        }
        return $signaturesHistoryData;
@@ -832,9 +832,9 @@ class SystemModel extends AbstractMapTrackingModel {
            array_unshift($signaturesHistoryData, $historyEntry);

            // limit max history data
-            array_splice($signaturesHistoryData, self::MAX_HISTORY_SIGNATURES_DATA);
+            array_splice($signaturesHistoryData, self::MAX_SIGNATURES_HISTORY_DATA);

-            $this->updateCacheData($signaturesHistoryData, self::DATA_CACHE_KEY_HISTORY_SIGNATURES, self::TTL_HISTORY_SIGNATURES);
+            $this->updateCacheData($signaturesHistoryData, self::DATA_CACHE_KEY_SIGNATURES_HISTORY, self::TTL_SIGNATURES_HISTORY);

            // clear system cache here
            // -> Signature model updates should NOT update the system cache on change
--- a/app/main/model/pathfinder/usermodel.php
+++ b/app/main/model/pathfinder/usermodel.php
@@ -57,7 +57,7 @@ class UserModel extends AbstractPathfinderModel {
     * @return \stdClass
     * @throws Exception
     */
-    public function getData(){
+    public function getData() : \stdClass {

        // get public user data for this user
        $userData = $this->getSimpleData();
@@ -77,7 +77,7 @@ class UserModel extends AbstractPathfinderModel {

        // get active character with log data
        $activeCharacter = $this->getActiveCharacter();
-        $userData->character = $activeCharacter->getData(true);
+        $userData->character = $activeCharacter->getData(true, true);

        return $userData;
    }
@@ -87,7 +87,7 @@ class UserModel extends AbstractPathfinderModel {
     * - check out getData() for all user data
     * @return \stdClass
     */
-    public function getSimpleData(){
+    public function getSimpleData() : \stdClass{
        $userData = (object) [];
        $userData->id = $this->id;
        $userData->name = $this->name;
@@ -143,7 +143,7 @@ class UserModel extends AbstractPathfinderModel {
     * checks whether user has a valid email address and pathfinder has a valid SMTP config
     * @return bool
     */
-    protected function isMailSendEnabled() : bool{
+    protected function isMailSendEnabled() : bool {
        return Config::isValidSMTPConfig($this->getSMTPConfig());
    }

@@ -151,7 +151,7 @@ class UserModel extends AbstractPathfinderModel {
     * get SMTP config for this user
     * @return \stdClass
     */
-    protected function getSMTPConfig() : \stdClass{
+    protected function getSMTPConfig() : \stdClass {
        $config = Config::getSMTPConfig();
        $config->to = $this->email;
        return $config;
@@ -164,7 +164,7 @@ class UserModel extends AbstractPathfinderModel {
     * @return bool
     * @throws Exception\ValidationException
     */
-    protected function validate_name(string $key, string $val): bool {
+    protected function validate_name(string $key, string $val) : bool {
        $valid = true;
        if(
            mb_strlen($val) < 3 ||
@@ -183,7 +183,7 @@ class UserModel extends AbstractPathfinderModel {
     * @return bool
     * @throws Exception\ValidationException
     */
-    protected function validate_email(string $key, string $val): bool {
+    protected function validate_email(string $key, string $val) : bool {
        $valid = true;
        if ( !empty($val) && \Audit::instance()->email($val) == false ){
            $valid = false;
@@ -196,14 +196,14 @@ class UserModel extends AbstractPathfinderModel {
     * check whether this character has already a user assigned to it
     * @return bool
     */
-    public function hasUserCharacters(){
+    public function hasUserCharacters() : bool {
        $this->filter('userCharacters', ['active = ?', 1]);
        return is_object($this->userCharacters);
    }

    /**
     * get current character data from session
-     * -> if §characterID == 0 -> get first character data (random)
+     * -> if $characterId == 0 -> get first character data (random)
     * @param int $characterId
     * @param bool $objectCheck
     * @return array
@@ -254,7 +254,7 @@ class UserModel extends AbstractPathfinderModel {
     * @param int $characterId
     * @return array
     */
-    public function findSessionCharacterData(int $characterId): array {
+    public function findSessionCharacterData(int $characterId) : array {
        $data = [];
        if($characterId){
            $sessionCharacters = (array)$this->getF3()->get(User::SESSION_KEY_CHARACTERS);
@@ -292,7 +292,7 @@ class UserModel extends AbstractPathfinderModel {
     * @return null|CharacterModel
     * @throws Exception
     */
-    public function getActiveCharacter(){
+    public function getActiveCharacter() : ?CharacterModel {
        $activeCharacter = null;
        $controller = new Controller\Controller();
        $currentActiveCharacter = $controller->getCharacter();
@@ -316,7 +316,7 @@ class UserModel extends AbstractPathfinderModel {
     * get all characters for this user
     * @return CharacterModel[]
     */
-    public function getCharacters(){
+    public function getCharacters() : array {
        $characters = [];
        $userCharacters = $this->getUserCharacters();

--- a/app/pathfinder.ini
+++ b/app/pathfinder.ini
@@ -255,14 +255,14 @@ DELAY                       =   5000
 ;           Requests that exceed the limit are logged as 'warning'.
 ; Syntax:   Integer (milliseconds)
 ; Default:  200
-EXECUTION_LIMIT             =   200
+EXECUTION_LIMIT             =   500

 [PATHFINDER.TIMER.UPDATE_CLIENT_MAP]
 ; Execution limit for client side (javascript) map data updates
 ;           Map data updates that exceed the limit are logged as 'warning'.
 ; Syntax:   Integer (milliseconds)
 ; Default:  50
-EXECUTION_LIMIT             =   50
+EXECUTION_LIMIT             =   100

 [PATHFINDER.TIMER.UPDATE_SERVER_USER_DATA]
 ; User data update interval (ajax long polling)
@@ -275,7 +275,7 @@ DELAY                       =   5000
 ;           Requests that exceed the limit are logged as 'warning'.
 ; Syntax:   Integer (milliseconds)
 ; Default:  500
-EXECUTION_LIMIT             =   500
+EXECUTION_LIMIT             =   1000

 ; update client user data (milliseconds)
 [PATHFINDER.TIMER.UPDATE_CLIENT_USER_DATA]
@@ -283,7 +283,7 @@ EXECUTION_LIMIT             =   500
 ;           User data updates that exceed the limit are logged as 'warning'.
 ; Syntax:   Integer (milliseconds)
 ; Default:  50
-EXECUTION_LIMIT             =   50
+EXECUTION_LIMIT             =   100

 ; CACHE ===========================================================================================
 [PATHFINDER.CACHE]
--- a/js/app.js
+++ b/js/app.js
@@ -9,14 +9,16 @@ var jsBaseUrl = document.body.getAttribute('data-js-path');

 // requireJs configuration
 requirejs.config({
-    baseUrl: 'js',                                                      // path for baseUrl - dynamically set !below! ("build_js" | "js")
+    baseUrl: 'js',                                                      // src root path - dynamically set !below! ("build_js" | "js")

    paths: {
-        layout: 'layout',
-        conf: 'app/conf',                                               // path for "config" files dir
-        dialog: 'app/ui/dialog',                                        // path for "dialog" files dir
-        templates: '../../templates',                                   // template dir
-        img: '../../img',                                               // images dir
+        conf: 'app/conf',                                               // path     config files
+        dialog: 'app/ui/dialog',                                        // path     dialog files
+        layout: 'app/ui/layout',                                        // path     layout files
+        module: 'app/ui/module',                                        // path     module files
+
+        templates: '../../templates',                                   // path     template base dir
+        img: '../../img',                                               // path     image base dir

        // main views
        login: './app/login',                                           // initial start "login page" view
@@ -45,7 +47,6 @@ requirejs.config({
        peityInlineChart: 'lib/jquery.peity.min',                       // v3.2.1   Inline Chart - http://benpickles.github.io/peity/
        dragToSelect: 'lib/jquery.dragToSelect',                        // v1.1     Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
        hoverIntent: 'lib/jquery.hoverIntent.min',                      // v1.9.0   Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
-        fullScreen: 'lib/jquery.fullscreen.min',                        // v0.6.0   Full screen mode - https://github.com/private-face/jquery.fullscreen
        select2: 'lib/select2.min',                                     // v4.0.3   Drop Down customization - https://select2.github.io
        validator: 'lib/validator.min',                                 // v0.10.1  Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
        lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min',        // v1.5.1   SVG line animation plugin - http://lazylinepainter.info
@@ -152,9 +153,6 @@ requirejs.config({
        hoverIntent: {
            deps: ['jquery']
        },
-        fullScreen: {
-            deps: ['jquery']
-        },
        select2: {
            deps: ['jquery', 'mousewheel'],
            exports: 'Select2'
--- a/js/app/init.js
+++ b/js/app/init.js
@@ -2,7 +2,7 @@
 *  Init
 */

-define(['jquery'], ($) => {
+define([], () => {

    'use strict';

--- a/js/app/login.js
+++ b/js/app/login.js
@@ -10,9 +10,9 @@ define([
    'blueImpGallery',
    'bootbox',
    'lazyload',
-    'app/ui/header',
-    'app/ui/logo',
-    'app/ui/demo_map',
+    'layout/header_login',
+    'layout/logo',
+    'layout/demo_map',
    'dialog/account_settings',
    'dialog/notification',
    'dialog/manual',
--- a/js/app/map/layout.js
+++ b/js/app/map/layout.js
@@ -38,7 +38,7 @@ define(() => {
             * @returns {*}
             * @private
             */
-            this._getElementDimension = (element) => {
+            this._getElementDimension = element => {
                let dim = null;

                let left = 0;
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -169,13 +169,13 @@ define([
    /**
     * updates a system with current information
     * @param map
+     * @param system
     * @param data
     * @param currentUserIsHere boolean - if the current user is in this system
     * @param options
     */
-    $.fn.updateSystemUserData = function(map, data, currentUserIsHere, options){
-        let system = $(this);
-        let systemId = system.attr('id');
+    let updateSystemUserData = (map, system, data, currentUserIsHere = false, options = {}) => {
+        let systemIdAttr = system.attr('id');
        let compactView = Util.getObjVal(options, 'compactView');

        // find countElement -> minimizedUI
@@ -187,16 +187,21 @@ define([
        // find expand arrow
        let systemHeadExpand = system.find('.' + config.systemHeadExpandClass);

-        let oldCacheKey = system.data('userCache');
-        let oldUserCount = system.data('userCount');
-        oldUserCount = (oldUserCount !== undefined ? oldUserCount : 0);
+        let oldCacheKey = system.data('userCacheKey');
+        let oldUserCount = system.data('userCount') || 0;
+        let userWasHere = Boolean(system.data('currentUser'));
        let userCounter = 0;

-        system.data('currentUser', false);
+        system.data('currentUser', currentUserIsHere);

-        // if current user is in THIS system trigger event
-        if(currentUserIsHere){
-            system.data('currentUser', true);
+        // auto select system if current user is in THIS system
+        if(
+            currentUserIsHere &&
+            !userWasHere &&
+            Boolean(Util.getObjVal(Init, 'character.autoLocationSelect')) &&
+            Boolean(Util.getObjVal(Util.getCurrentUserData(), 'character.selectLocation'))
+        ){
+            Util.triggerMenuAction(map.getContainer(), 'SelectSystem', {systemId: system.data('id'), forceSelect: false});
        }

        // add user information
@@ -204,24 +209,28 @@ define([
            data &&
            data.user
        ){
+            userCounter = data.user.length;
+
+            // loop all active pilots and build cache-key
            let cacheArray = [];
+            for(let tempUserData of data.user){
+                cacheArray.push(tempUserData.id + '_' + tempUserData.log.ship.id);
+            }
+
+            // make sure cacheArray values are sorted for key comparison
+            let collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
+            cacheArray.sort(collator.compare);

            // we need to add "view mode" option to key
            // -> if view mode change detected -> key no longer valid
-            cacheArray.push(compactView ? 'compact' : 'default');
+            cacheArray.unshift(compactView ? 'compact' : 'default');

-            // loop all active pilots and build cache-key
-            for(let i = 0; i < data.user.length; i++){
-                userCounter++;
-                let tempUserData = data.user[i];
-                cacheArray.push(tempUserData.id + '_' + tempUserData.log.ship.id);
-            }
-            let cacheKey = cacheArray.join('_');
+            let cacheKey = cacheArray.join('_').hashCode();

            // check for if cacheKey has changed
            if(cacheKey !== oldCacheKey){
                // set new CacheKey
-                system.data('userCache', cacheKey);
+                system.data('userCacheKey', cacheKey);
                system.data('userCount', userCounter);

                // remove all content
@@ -235,7 +244,7 @@ define([
                    systemHeadExpand.hide();
                    system.toggleBody(false, map, {});

-                    map.revalidate(systemId);
+                    map.revalidate(systemIdAttr);
                }else{
                    systemCount.empty();

@@ -277,7 +286,7 @@ define([
                    }

                    let tooltipOptions = {
-                        systemId: systemId,
+                        systemId: systemIdAttr,
                        highlight: highlight,
                        userCount: userCounter
                    };
@@ -290,14 +299,14 @@ define([
                        complete: function(system){
                            // show active user tooltip
                            system.toggleSystemTooltip('show', tooltipOptions);
-                            map.revalidate( systemId );
+                            map.revalidate(systemIdAttr);
                        }
                    });
                }
            }
        }else{
            // no user data found for this system
-            system.data('userCache', false);
+            system.data('userCacheKey', false);
            system.data('userCount', 0);
            systemBody.empty();

@@ -311,7 +320,7 @@ define([
                systemHeadExpand.hide();
                system.toggleBody(false, map, {});

-                map.revalidate(systemId);
+                map.revalidate(systemIdAttr);
            }
        }
    };
@@ -716,11 +725,11 @@ define([
                break;
            case 'map_edit':
                // open map edit dialog tab
-                $(document).triggerMenuEvent('ShowMapSettings', {tab: 'edit'});
+                Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'edit'});
                break;
            case 'map_info':
                // open map info dialog tab
-                $(document).triggerMenuEvent('ShowMapInfo', {tab: 'information'});
+                Util.triggerMenuAction(document, 'ShowMapInfo', {tab: 'information'});
                break;
        }
    };
@@ -2427,7 +2436,7 @@ define([
                }
            },
            onShow: function(){
-                $(document).trigger('pf:closeMenu', [{}]);
+                Util.triggerMenuAction(document, 'Close');
            },
            onRefresh: function(){
            }
@@ -2574,90 +2583,89 @@ define([

        // catch events ===============================================================================================

-        // toggle global map option (e.g. "grid snap", "magnetization")
-        mapContainer.on('pf:menuMapOption', function(e, mapOption){
-            let mapElement = $(this);
-
+        /**
+         * update/toggle global map option (e.g. "grid snap", "magnetization")
+         * @param mapContainer
+         * @param data
+         */
+        let updateMapOption = (mapContainer, data) => {
            // get map menu config options
-            let data = mapOptions[mapOption.option];
+            let mapOption = mapOptions[data.option];

-            let promiseStore = MapUtil.getLocaleData('map', mapElement.data('id'));
+            let promiseStore = MapUtil.getLocaleData('map', mapContainer.data('id'));
            promiseStore.then(function(dataStore){
                let notificationText = 'disabled';
-                let button = $('#' + this.data.buttonId);
+                let button = $('#' + this.mapOption.buttonId);
                let dataExists = false;

                if(
                    dataStore &&
-                    dataStore[this.mapOption.option]
+                    dataStore[this.data.option]
                ){
                    dataExists = true;
                }

-                if(dataExists === this.mapOption.toggle){
+                if(dataExists === this.data.toggle){

                    // toggle button class
                    button.removeClass('active');

                    // toggle map class (e.g. for grid)
-                    if(this.data.class){
-                        this.mapElement.removeClass(MapUtil.config[this.data.class]);
+                    if(this.mapOption.class){
+                        this.mapContainer.removeClass(MapUtil.config[this.mapOption.class]);
                    }

-                    // call optional jQuery extension on mapElement
-                    if(this.data.onDisable && !this.mapOption.skipOnDisable){
-                        this.data.onDisable(this.mapElement);
+                    // call optional jQuery extension on mapContainer
+                    if(this.mapOption.onDisable && !this.data.skipOnDisable){
+                        this.mapOption.onDisable(this.mapContainer);
                    }

                    // show map overlay info icon
-                    MapOverlayUtil.getMapOverlay(this.mapElement, 'info').updateOverlayIcon(this.mapOption.option, 'hide');
+                    MapOverlayUtil.getMapOverlay(this.mapContainer, 'info').updateOverlayIcon(this.data.option, 'hide');

                    // delete map option
-                    MapUtil.deleteLocalData('map', this.mapElement.data('id'), this.mapOption.option);
+                    MapUtil.deleteLocalData('map', this.mapContainer.data('id'), this.data.option);
                }else{
                    // toggle button class
                    button.addClass('active');

                    // toggle map class (e.g. for grid)
-                    if(this.data.class){
-                        this.mapElement.addClass(MapUtil.config[this.data.class]);
+                    if(this.mapOption.class){
+                        this.mapContainer.addClass(MapUtil.config[this.mapOption.class]);
                    }

-                    // call optional jQuery extension on mapElement
-                    if(this.data.onEnable && !this.mapOption.skipOnEnable){
-                        this.data.onEnable(this.mapElement);
+                    // call optional jQuery extension on mapContainer
+                    if(this.mapOption.onEnable && !this.data.skipOnEnable){
+                        this.mapOption.onEnable(this.mapContainer);
                    }

                    // hide map overlay info icon
-                    MapOverlayUtil.getMapOverlay(this.mapElement, 'info').updateOverlayIcon(this.mapOption.option, 'show');
+                    MapOverlayUtil.getMapOverlay(this.mapContainer, 'info').updateOverlayIcon(this.data.option, 'show');

                    // store map option
-                    MapUtil.storeLocalData('map', this.mapElement.data('id'), this.mapOption.option, 1);
+                    MapUtil.storeLocalData('map', this.mapContainer.data('id'), this.data.option, 1);

                    notificationText = 'enabled';
                }

-                if(this.mapOption.toggle){
-                    Util.showNotify({title: this.data.description, text: notificationText, type: 'info'});
+                if(this.data.toggle){
+                    Util.showNotify({title: this.mapOption.description, text: notificationText, type: 'info'});
                }
            }.bind({
-                mapOption: mapOption,
                data: data,
-                mapElement: mapElement
+                mapOption: mapOption,
+                mapContainer: mapContainer
            }));
-        });
+        };

-        // delete system event
-        // triggered from "map info" dialog scope
-        mapContainer.on('pf:deleteSystems', function(e, data){
-            System.deleteSystems(map, data.systems, data.callback);
-        });
-
-        // triggered from "header" link (if user is active in one of the systems)
-        mapContainer.on('pf:menuSelectSystem', function(e, data){
-            let mapElement = $(this);
-            let systemId = MapUtil.getSystemId(mapElement.data('id'), data.systemId);
-            let system = mapElement.find('#' + systemId);
+        /**
+         * select system event
+         * @param mapContainer
+         * @param data
+         */
+        let selectSystem = (mapContainer, data) => {
+            let systemId = MapUtil.getSystemId(mapContainer.data('id'), data.systemId);
+            let system = mapContainer.find('#' + systemId);

            if(system.length === 1){
                // system found on map ...
@@ -2674,12 +2682,45 @@ define([
                }

                if(select){
-                    let mapWrapper = mapElement.closest('.' + config.mapWrapperClass);
+                    let mapWrapper = mapContainer.closest('.' + config.mapWrapperClass);
                    Scrollbar.scrollToSystem(mapWrapper, MapUtil.getSystemPosition(system));
                    // select system
                    MapUtil.showSystemInfo(map, system);
                }
            }
+        };
+
+        mapContainer.on('pf:menuAction', (e, action, data) => {
+            // menuAction events can also be triggered on child nodes
+            // -> if event is not handled there it bubbles up
+            //    make sure event can be handled by this element
+            if(e.target === e.currentTarget){
+                e.stopPropagation();
+
+                switch(action){
+                    case 'MapOption':
+                        // toggle global map option (e.g. "grid snap", "magnetization")
+                        updateMapOption(mapContainer, data);
+                        break;
+                    case 'SelectSystem':
+                        // select system on map (e.g. from modal links)
+                        selectSystem(mapContainer, data);
+                        break;
+                    case 'AddSystem':
+                        System.showNewSystemDialog(map, data, saveSystemCallback);
+                        break;
+                    default:
+                        console.warn('Unknown menuAction %o event name', action);
+                }
+            }else{
+                console.warn('Unhandled menuAction %o event name. Handled menu events should not bobble up', action);
+            }
+        });
+
+        // delete system event
+        // triggered from "map info" dialog scope
+        mapContainer.on('pf:deleteSystems', function(e, data){
+            System.deleteSystems(map, data.systems, data.callback);
        });

        // triggered when map lock timer (interval) was cleared
@@ -2807,36 +2848,21 @@ define([
                let compactView = mapElement.hasClass(MapUtil.config.mapCompactClass);

                // get current character log data
-                let characterLogExists = false;
-                let currentCharacterLog = Util.getCurrentCharacterLog();
+                let characterLogSystemId = Util.getObjVal(Util.getCurrentCharacterLog(), 'system.id') || 0;

                // data for header update
                let headerUpdateData = {
                    mapId: userData.config.id,
                    userCountInside: 0,                 // active user on a map
                    userCountOutside: 0,                // active user NOT on map
-                    userCountInactive: 0,               // inactive users (no location)
-                    currentLocation: {
-                        id: 0,                          // systemId for current active user
-                        name: false                     // systemName for current active user
-                    }
+                    userCountInactive: 0
                };

-                if(
-                    currentCharacterLog &&
-                    currentCharacterLog.system
-                ){
-                    characterLogExists = true;
-                    headerUpdateData.currentLocation.name = currentCharacterLog.system.name;
-                }
-
                // check if current user was found on the map
                let currentUserOnMap = false;

                // get all systems
-                let systems = mapElement.find('.' + config.systemClass);
-
-                for(let system of systems){
+                for(let system of mapElement.find('.' + config.systemClass)){
                    system = $(system);
                    let systemId = system.data('systemId');
                    let tempUserData = null;
@@ -2864,20 +2890,15 @@ define([

                    // the current user can only be in a single system ------------------------------------------------
                    if(
-                        characterLogExists &&
-                        currentCharacterLog.system.id === systemId
+                        !currentUserOnMap &&
+                        characterLogSystemId &&
+                        characterLogSystemId === systemId
                    ){
-                        if( !currentUserOnMap ){
-                            currentUserIsHere = true;
-                            currentUserOnMap = true;
-
-                            // set current location data for header update
-                            headerUpdateData.currentLocation.id =  system.data('id');
-                            headerUpdateData.currentLocation.name = currentCharacterLog.system.name;
-                        }
+                        currentUserIsHere = true;
+                        currentUserOnMap = true;
                    }

-                    system.updateSystemUserData(map, tempUserData, currentUserIsHere, {compactView: compactView});
+                    updateSystemUserData(map, system, tempUserData, currentUserIsHere, {compactView: compactView});
                }

                // users who are not in any map system ----------------------------------------------------------------
--- a/js/app/map/system.js
+++ b/js/app/map/system.js
@@ -179,16 +179,22 @@ define([
            statusData: statusData
        };

-        // set current position as "default" system to add ------------------------------------------------------------
-        let currentCharacterLog = Util.getCurrentCharacterLog();
+        // check for pre-selected system ------------------------------------------------------------------------------
+        let systemData;
+        if(options.systemData){
+            systemData = options.systemData;
+        }else{
+            // ... check for current active system (characterLog) -----------------------------------------------------
+            let currentCharacterLog = Util.getCurrentCharacterLog();
+            if(currentCharacterLog !== false){
+                // set system from 'characterLog' data as pre-selected system
+                systemData = Util.getObjVal(currentCharacterLog, 'system');
+            }
+        }

-        if(
-            currentCharacterLog !== false &&
-            mapSystemIds.indexOf( currentCharacterLog.system.id ) === -1
-        ){
-            // current system is NOT already on this map
-            // set current position as "default" system to add
-            data.currentSystem = currentCharacterLog.system;
+        // check if pre-selected system is NOT already on this map
+        if(mapSystemIds.indexOf(Util.getObjVal(systemData, 'id')) === -1){
+            data.currentSystem = systemData;
        }

        requirejs(['text!templates/dialog/system.html', 'mustache'], (template, Mustache) => {
@@ -235,7 +241,7 @@ define([

                                // get new position
                                newPosition = calculateNewSystemPosition(sourceSystem);
-                            }else{
+                            }else if(options.position){
                                // check mouse cursor position (add system to map)
                                newPosition = {
                                    x: options.position.x,
@@ -638,7 +644,7 @@ define([
     * @param system
     * @returns {string}
     */
-    let getSystemTooltipPlacement = (system) => {
+    let getSystemTooltipPlacement = system => {
        let offsetParent = system.parent().offset();
        let offsetSystem = system.offset();

@@ -652,7 +658,7 @@ define([
     * @param systems
     * @param callback function
     */
-    let deleteSystems = (map, systems = [], callback = (systems) => {}) => {
+    let deleteSystems = (map, systems = [], callback = systems => {}) => {
        let mapContainer = $( map.getContainer() );
        let systemIds = systems.map(system => $(system).data('id'));

@@ -726,7 +732,6 @@ define([
    let calculateNewSystemPosition = sourceSystem => {
        let mapContainer = sourceSystem.parent();
        let grid = [MapUtil.config.mapSnapToGridDimension, MapUtil.config.mapSnapToGridDimension];
-
        let x = 0;
        let y = 0;

@@ -756,12 +761,7 @@ define([
            y = currentY + config.newSystemOffset.y;
        }

-        let newPosition = {
-            x: x,
-            y: y
-        };
-
-        return newPosition;
+        return {x: x, y: y};
    };

    /**
@@ -770,7 +770,7 @@ define([
     * @param data
     * @returns {*}
     */
-    let getHeadInfoElement = (data) => {
+    let getHeadInfoElement = data => {
        let headInfo = null;
        let headInfoLeft = [];
        let headInfoRight = [];
--- a/js/app/map/util.js
+++ b/js/app/map/util.js
@@ -187,25 +187,28 @@ define([
    };

    /**
-     * get system data by mapId and systemid
-     * @param mapId
-     * @param systemId
-     * @returns {boolean}
+     * get system data from mapData
+     * @see getSystemData
+     * @param mapData
+     * @param value
+     * @param key
+     * @returns {any}
     */
-    let getSystemData = (mapId, systemId) => {
-        let systemData = false;
-        let mapData = Util.getCurrentMapData(mapId);
+    let getSystemDataFromMapData = (mapData, value, key = 'id') => {
+        return mapData ? mapData.data.systems.find(system => system[key] === value) || false : false;
+    };

-        if(mapData){
-            for(let j = 0; j < mapData.data.systems.length; j++){
-                let systemDataTemp = mapData.data.systems[j];
-                if(systemDataTemp.id === systemId){
-                    systemData = systemDataTemp;
-                    break;
-                }
-            }
-        }
-        return systemData;
+    /**
+     * get system data by mapId system data selector
+     * -> e.g. value = 2 and key = 'id'
+     * -> e.g. value = 30002187 and key = 'systemId' => looks for 'Amarr' CCP systemId
+     * @param mapId
+     * @param value
+     * @param key
+     * @returns {any}
+     */
+    let getSystemData = (mapId, value, key = 'id') => {
+        return getSystemDataFromMapData(Util.getCurrentMapData(mapId), value, key);
    };

    /**
@@ -495,7 +498,7 @@ define([
            connectionData &&
            connectionData.signatures   // signature data is required...
        ){
-            let SystemSignatures = require('app/ui/module/system_signature');
+            let SystemSignatures = require('module/system_signature');

            let sourceEndpoint      = connection.endpoints[0];
            let targetEndpoint      = connection.endpoints[1];
@@ -1469,25 +1472,25 @@ define([
            });

            // init compact system layout ---------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapCompact',
                toggle: false
            });

            // init magnetizer --------------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapMagnetizer',
                toggle: false
            });

            // init grid snap ---------------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapSnapToGrid',
                toggle: false
            });

            // init endpoint overlay --------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapSignatureOverlays',
                toggle: false,
                skipOnEnable: true,     // skip callback -> Otherwise it would run 2 times on map create
@@ -1946,7 +1949,7 @@ define([
            over: function(e){
                let staticWormholeElement = $(this);
                let wormholeName = staticWormholeElement.attr('data-name');
-                let wormholeData =  Util.getObjVal(Init, 'wormholes.' + wormholeName);
+                let wormholeData = Util.getObjVal(Init, 'wormholes.' + wormholeName);
                if(wormholeData){
                    staticWormholeElement.addWormholeInfoTooltip(wormholeData, options);
                }
@@ -2059,6 +2062,7 @@ define([
        getMapIcons: getMapIcons,
        getInfoForMap: getInfoForMap,
        getInfoForSystem: getInfoForSystem,
+        getSystemDataFromMapData: getSystemDataFromMapData,
        getSystemData: getSystemData,
        getSystemTypeInfo: getSystemTypeInfo,
        getEffectInfoForSystem: getEffectInfoForSystem,
--- a/js/app/mappage.js
+++ b/js/app/mappage.js
@@ -6,14 +6,13 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'app/logging',
    'app/page',
    'app/map/worker',
    'app/module_map',
    'app/key',
    'app/ui/form_element'
-], ($, Init, Util, Render, Logging, Page, MapWorker, ModuleMap) => {
+], ($, Init, Util, Logging, Page, MapWorker, ModuleMap) => {

    'use strict';

@@ -39,7 +38,7 @@ define([
        Util.initDefaultEditableConfig();

        // load page
-        Page.loadPageStructure().setGlobalShortcuts();
+        Page.loadPageStructure();

        // show app information in browser console
        Util.showVersionInfo();
@@ -417,7 +416,7 @@ define([
                            data.error.length > 0
                        ){
                            // any error in the main trigger functions result in a user log-off
-                            $(document).trigger('pf:menuLogout');
+                            Util.triggerMenuAction(document, 'Logout');
                        }else{
                            $(document).setProgramStatus('online');

@@ -493,13 +492,13 @@ define([
                        data.error.length > 0
                    ){
                        // any error in the main trigger functions result in a user log-off
-                        $(document).trigger('pf:menuLogout');
+                        Util.triggerMenuAction(document, 'Logout');
                    }else{
                        $(document).setProgramStatus('online');

                        if(data.userData !== undefined){
                            // store current user data global (cache)
-                            let userData = Util.setCurrentUserData(data.userData);
+                            Util.setCurrentUserData(data.userData);

                            // update system info panels
                            if(data.system){
--- a/js/app/module_map.js
+++ b/js/app/module_map.js
@@ -5,13 +5,13 @@ define([
    'app/map/map',
    'app/map/util',
    'sortable',
-    'app/ui/module/system_info',
-    'app/ui/module/system_graph',
-    'app/ui/module/system_signature',
-    'app/ui/module/system_route',
-    'app/ui/module/system_intel',
-    'app/ui/module/system_killboard',
-    'app/ui/module/connection_info',
+    'module/system_info',
+    'module/system_graph',
+    'module/system_signature',
+    'module/system_route',
+    'module/system_intel',
+    'module/system_killboard',
+    'module/connection_info',
    'app/counter'
 ], (
    $,
@@ -746,7 +746,7 @@ define([
                    MapUtil.storeLocaleCharacterData('defaultMapId', mapId);
                }else{
                    // add new Tab selected
-                    $(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
+                    Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                    e.preventDefault();
                }
            });
@@ -1215,7 +1215,7 @@ define([
                clearMapModule(mapModule)
                    .then(payload => {
                        // no map data available -> show "new map" dialog
-                        $(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
+                        Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                    })
                    .then(payload => resolve());
            }else{
--- a/js/app/page.js
+++ b/js/app/page.js
--- a/js/app/ui/dialog/account_settings.js
+++ b/js/app/ui/dialog/account_settings.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
@@ -130,10 +129,9 @@ define([
                                        Util.showNotify({title: 'Account saved', type: 'success'});

                                        // close dialog/menu
-                                        $(document).trigger('pf:closeMenu', [{}]);
+                                        Util.triggerMenuAction(document, 'Close');
                                        accountSettingsDialog.modal('hide');
                                    }
-
                                }).fail(function(jqXHR, status, error){
                                    accountSettingsDialog.find('.modal-content').hideLoadingAnimation();

--- a/js/app/ui/dialog/api_status.js
+++ b/js/app/ui/dialog/api_status.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
--- a/js/app/ui/dialog/changelog.js
+++ b/js/app/ui/dialog/changelog.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
--- a/js/app/ui/dialog/credit.js
+++ b/js/app/ui/dialog/credit.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
-    'app/ui/logo'
-], function($, Init, Util, Render, bootbox){
+    'layout/logo'
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
@@ -23,7 +22,7 @@ define([
     */
    $.fn.showCreditsDialog = function(callback, enableHover){

-        requirejs(['text!templates/dialog/credit.html', 'mustache'], function(template, Mustache){
+        requirejs(['text!templates/dialog/credit.html', 'mustache'], (template, Mustache) => {

            let data = {
                logoContainerId: config.creditsDialogLogoContainerId,
--- a/js/app/ui/dialog/jump_info.js
+++ b/js/app/ui/dialog/jump_info.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/map/util'
-], ($, Init, Util, Render, bootbox, MapUtil) => {
+], ($, Init, Util, bootbox, MapUtil) => {
    'use strict';

    let config = {
--- a/js/app/ui/dialog/manual.js
+++ b/js/app/ui/dialog/manual.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {

    'use strict';

--- a/js/app/ui/dialog/map_info.js
+++ b/js/app/ui/dialog/map_info.js
@@ -307,7 +307,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.id});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.id});
                        });
                    }
                },{
@@ -564,7 +564,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.source});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.source});
                        });
                    }
                },{
@@ -620,7 +620,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.target});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.target});
                        });
                    }
                },{
--- a/js/app/ui/dialog/map_settings.js
+++ b/js/app/ui/dialog/map_settings.js
@@ -422,7 +422,7 @@ define([
                                            }

                                            $(mapInfoDialog).modal('hide');
-                                            $(document).trigger('pf:closeMenu', [{}]);
+                                            Util.triggerMenuAction(document, 'Close');
                                        }
                                    }).fail(function(jqXHR, status, error){
                                        let reason = status + ' ' + error;
--- a/js/app/ui/dialog/notification.js
+++ b/js/app/ui/dialog/notification.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, bootbox) => {

    'use strict';

--- a/js/app/ui/dialog/shortcuts.js
+++ b/js/app/ui/dialog/shortcuts.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/key',
-], function($, Init, Util, Render, bootbox, Key){
+], function($, Init, Util, bootbox, Key){

    'use strict';

--- a/js/app/ui/dialog/stats.js
+++ b/js/app/ui/dialog/stats.js
@@ -10,7 +10,7 @@ define([
    'app/render',
    'bootbox',
    'peityInlineChart'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, Render, bootbox) => {
    'use strict';

    let config = {
--- a/js/app/ui/dialog/system_effects.js
+++ b/js/app/ui/dialog/system_effects.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/map/util'
-], ($, Init, Util, Render, bootbox, MapUtil) => {
+], ($, Init, Util, bootbox, MapUtil) => {
    'use strict';

    let config = {
--- a/js/app/ui/layout/demo_map.js
+++ b/js/app/ui/layout/demo_map.js
@@ -5,7 +5,7 @@
 define([
    'jquery',
    'lazylinepainter'
-], function($){
+], ($) => {

    'use strict';

--- a/js/app/ui/layout/header_login.js
+++ b/js/app/ui/layout/header_login.js
--- a/js/app/ui/layout/logo.js
+++ b/js/app/ui/layout/logo.js
@@ -59,7 +59,7 @@ define([
        };

        // load Logo svg
-        requirejs(['text!templates/ui/logo.html', 'mustache'], function(template, Mustache){
+        requirejs(['text!templates/layout/logo.html', 'mustache'], function(template, Mustache){
            let logoData = {
                staticLogoId: config.staticLogoId,
                logoPartTopRightClass: config.logoPartTopRightClass,
--- a/js/app/ui/module/connection_info.js
+++ b/js/app/ui/module/connection_info.js
@@ -18,8 +18,6 @@ define([
        moduleHeadClass: 'pf-module-head',                                                      // class for module header
        moduleHandlerClass: 'pf-module-handler-drag',                                           // class for "drag" handler

-        headUserShipClass: 'pf-head-user-ship',                                                 // class for "user settings" link
-
        // connection info module
        moduleTypeClass: 'pf-connection-info-module',                                           // class for this module

@@ -100,15 +98,13 @@ define([
     * @returns {jQuery}
     */
    let getConnectionElement = (mapId, connectionId) => {
-        let connectionElement = $('<div>', {
+        return $('<div>', {
            id: getConnectionElementId(connectionId),
            class: ['col-xs-12', 'col-sm-4', 'col-lg-3' , config.connectionInfoPanelClass].join(' ')
        }).data({
            mapId: mapId,
            connectionId: connectionId
        });
-
-        return connectionElement;
    };

    /**
@@ -116,13 +112,11 @@ define([
     * @param mapId
     * @returns {void|jQuery|*}
     */
-    let getInfoPanelControl = (mapId) => {
-        let connectionElement = getConnectionElement(mapId, 0).append($('<div>', {
+    let getInfoPanelControl = mapId => {
+        return getConnectionElement(mapId, 0).append($('<div>', {
            class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' '),
            html: '<i class="fas fa-fw fa-plus"></i>&nbsp;add connection&nbsp;&nbsp;<kbd>ctrl</kbd>&nbsp;+&nbsp;<kbd>click</kbd>'
        }));
-
-        return connectionElement;
    };

    /**
@@ -168,7 +162,7 @@ define([
                                class: 'pf-link',
                                html: connectionData.sourceAlias + '&nbsp;&nbsp;'
                            }).on('click', function(){
-                                Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: connectionData.source});
+                                Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.source});
                            }),
                            $('<span>', {
                                class: [config.connectionInfoTableLabelSourceClass].join(' ')
@@ -183,7 +177,7 @@ define([
                                class: 'pf-link',
                                html: '&nbsp;&nbsp;' + connectionData.targetAlias
                            }).on('click', function(){
-                                Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: connectionData.target});
+                                Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.target});
                            })
                        )
                    )
@@ -415,7 +409,7 @@ define([
                // get current ship data ----------------------------------------------------------
                massShipCell.parent().toggle(showShip);
                if(showShip){
-                    shipData = $('.' + config.headUserShipClass).data('shipData');
+                    shipData = Util.getObjVal(Util.getCurrentCharacterLog(), 'ship');
                    if(shipData){
                        if(shipData.mass){
                            massShip = parseInt(shipData.mass);
@@ -506,18 +500,14 @@ define([
     * @param connectionId
     * @returns {string}
     */
-    let getConnectionElementId = (connectionId) => {
-        return config.connectionInfoPanelId + connectionId;
-    };
+    let getConnectionElementId = connectionId => config.connectionInfoPanelId + connectionId;

    /**
     * get all visible connection panel elements
     * @param moduleElement
     * @returns {*|T|{}}
     */
-    let getConnectionElements = (moduleElement) => {
-        return moduleElement.find('.' + config.connectionInfoPanelClass).not('#' + getConnectionElementId(0));
-    };
+    let getConnectionElements = moduleElement => moduleElement.find('.' + config.connectionInfoPanelClass).not('#' + getConnectionElementId(0));

    /**
     * enrich connectionData with "logs" data (if available) and other "missing" data
--- a/js/app/util.js
+++ b/js/app/util.js
@@ -38,7 +38,7 @@ define([

        // head
        headMapTrackingId: 'pf-head-map-tracking',                              // id for "map tracking" toggle (checkbox)
-        headCurrentLocationId: 'pf-head-current-location',                      // id for "show current location" element
+        headUserLocationId: 'pf-head-user-location',                            // id for "location" breadcrumb

        // menu
        menuButtonFullScreenId: 'pf-menu-button-fullscreen',                    // id for menu button "fullScreen"
@@ -399,7 +399,7 @@ define([
    };

    /**
-     * check multiple element if they arecurrently visible in viewport
+     * check multiple element if they are currently visible in viewport
     * @returns {Array}
     */
    $.fn.isInViewport = function(){
@@ -1494,21 +1494,29 @@ define([
    };

    /**
-     * set currentUserData as "global" variable
-     * this function should be called continuously after data change
-     * to keep the data always up2data
+     * set currentUserData as "global" store var
+     * this function should be called whenever userData changed
     * @param userData
+     * @returns {boolean} true on success
     */
-    let setCurrentUserData = (userData) => {
-        Init.currentUserData = userData;
+    let setCurrentUserData = userData => {
+        let isSet = false;

-        // check if function is available
-        // this is not the case in "login" page
-        if( $.fn.updateHeaderUserData ){
-            $.fn.updateHeaderUserData();
+        // check if userData is valid
+        if(userData && userData.character && userData.characters){
+            let changes = compareUserData(getCurrentUserData(), userData);
+            // check if there is any change
+            if(Object.values(changes).some(val => val)){
+                $(document).trigger('pf:changedUserData', [userData, changes]);
+            }
+
+            Init.currentUserData = userData;
+            isSet = true;
+        }else{
+            console.error('Could not set userData %o. Missing or malformed obj', userData);
        }

-        return getCurrentUserData();
+        return isSet;
    };

    /**
@@ -1524,14 +1532,7 @@ define([
     * @returns {number}
     */
    let getCurrentCharacterId = () => {
-        let userData = getCurrentUserData();
-        let currentCharacterId = 0;
-        if(
-            userData &&
-            userData.character
-        ){
-            currentCharacterId = parseInt( userData.character.id );
-        }
+        let currentCharacterId = parseInt(getObjVal(getCurrentUserData(), 'character.id')) || 0;

        if(!currentCharacterId){
            // no active character... -> get default characterId from initial page load
@@ -1541,6 +1542,28 @@ define([
        return currentCharacterId;
    };

+    /**
+     * compares two userData objects for changes that are relevant
+     * @param oldUserData
+     * @param newUserData
+     * @returns {{characterShipType: *, charactersIds: boolean, characterLogLocation: *, characterSystemId: *, userId: *, characterId: *}}
+     */
+    let compareUserData = (oldUserData, newUserData) => {
+        let valueChanged = key => getObjVal(oldUserData, key) !== getObjVal(newUserData, key);
+
+        let oldCharactersIds = (getObjVal(oldUserData, 'characters') || []).map(data => data.id).sort();
+        let newCharactersIds = (getObjVal(newUserData, 'characters') || []).map(data => data.id).sort();
+
+        return {
+            userId: valueChanged('id'),
+            characterId: valueChanged('character.id'),
+            characterLogLocation: valueChanged('character.logLocation'),
+            characterSystemId: valueChanged('character.log.system.id'),
+            characterShipType: valueChanged('character.log.ship.typeId'),
+            charactersIds: oldCharactersIds.toString() !== newCharactersIds.toString()
+        };
+    };
+
    /**
     * get a unique ID for each tab
     * -> store ID in session storage
@@ -1818,16 +1841,34 @@ define([
     * @param jqXHR XMLHttpRequest instance
     * @returns {boolean}
     */
-    let isXHRAborted = (jqXHR) => {
+    let isXHRAborted = jqXHR => {
        return !jqXHR.getAllResponseHeaders();
    };

+    /**
+     * trigger global menu action 'event' on dom 'element' with optional 'data'
+     * @param element
+     * @param action
+     * @param data
+     */
+    let triggerMenuAction = (element, action, data) => {
+        if(element){
+            if(typeof(action) === 'string' && action.length){
+                $(element).trigger('pf:menuAction', [action, data]);
+            }else{
+                console.error('Invalid action: %o', action);
+            }
+        }else{
+            console.error('Invalid element: %o', element);
+        }
+    };
+
    /**
     * get label element for role data
     * @param role
     * @returns {*|jQuery|HTMLElement}
     */
-    let getLabelByRole = (role) => {
+    let getLabelByRole = role => {
        return $('<span>', {
            class: ['label', 'label-' + role.style].join(' '),
            text: role.label
@@ -1839,7 +1880,7 @@ define([
     * @param mapOverlay
     * @returns {jQuery}
     */
-    let getMapElementFromOverlay = (mapOverlay) => {
+    let getMapElementFromOverlay = mapOverlay => {
        return $(mapOverlay).parents('.' + config.mapWrapperClass).find('.' + config.mapClass);
    };

@@ -2276,7 +2317,7 @@ define([
     */
    let getDataIndexByMapId = (data, mapId) => {
        let index = false;
-        if( Array.isArray(data) && mapId === parseInt(mapId, 10) ){
+        if(Array.isArray(data) && mapId === parseInt(mapId, 10)){
            for(let i = 0; i < data.length; i++){
                if(data[i].config.id === mapId){
                    index = i;
@@ -2340,9 +2381,7 @@ define([
     * @param mapId
     * @returns {boolean|int}
     */
-    let getCurrentMapUserDataIndex = mapId => {
-        return getDataIndexByMapId(Init.currentMapUserData, mapId);
-    };
+    let getCurrentMapUserDataIndex = mapId => getDataIndexByMapId(Init.currentMapUserData, mapId);

    /**
     * update cached mapUserData for a single map
@@ -2385,17 +2424,13 @@ define([
    let getCurrentMapData = mapId => {
        let currentMapData = false;

-        if( mapId === parseInt(mapId, 10) ){
-            // search for a specific map
-            for(let i = 0; i < Init.currentMapData.length; i++){
-                if(Init.currentMapData[i].config.id === mapId){
-                    currentMapData = Init.currentMapData[i];
-                    break;
-                }
+        if(Init.currentMapData){
+            if(mapId === parseInt(mapId, 10)){
+                currentMapData = Init.currentMapData.find(mapData => mapData.config.id === mapId);
+            }else{
+                // get data for all maps
+                currentMapData = Init.currentMapData;
            }
-        }else{
-            // get data for all maps
-            currentMapData = Init.currentMapData;
        }

        return currentMapData;
@@ -2415,7 +2450,7 @@ define([
     * @param mapData
     */
    let updateCurrentMapData = mapData => {
-        let mapDataIndex = getCurrentMapDataIndex( mapData.config.id );
+        let mapDataIndex = getCurrentMapDataIndex(mapData.config.id);

        if(mapDataIndex !== false){
            Init.currentMapData[mapDataIndex].config = mapData.config;
@@ -2434,8 +2469,8 @@ define([
    let filterCurrentMapData = (path, value) => {
        let currentMapData = getCurrentMapData();
        if(currentMapData){
-            currentMapData = currentMapData.filter((mapData) => {
-                return (getObjVal(mapData, path) === value);
+            currentMapData = currentMapData.filter(mapData => {
+                return getObjVal(mapData, path) === value;
            });
        }
        return currentMapData;
@@ -2446,7 +2481,7 @@ define([
     * @param mapId
     */
    let deleteCurrentMapData = mapId => {
-        Init.currentMapData = Init.currentMapData.filter((mapData) => {
+        Init.currentMapData = Init.currentMapData.filter(mapData => {
            return (mapData.config.id !== mapId);
        });
    };
@@ -2455,20 +2490,7 @@ define([
     * get the current log data for the current user character
     * @returns {boolean}
     */
-    let getCurrentCharacterLog = () => {
-        let characterLog = false;
-        let currentUserData = getCurrentUserData();
-
-        if(
-            currentUserData &&
-            currentUserData.character &&
-            currentUserData.character.log
-        ){
-            characterLog = currentUserData.character.log;
-        }
-
-        return characterLog;
-    };
+    let getCurrentCharacterLog = () => getObjVal(getCurrentUserData(), 'character.log') || false;

    /**
     * get information for the current mail user
@@ -2803,28 +2825,16 @@ define([
        return Init.currentSystemData;
    };

-    /**
-     * set current location data
-     * -> system data where current user is located
-     * @param systemId
-     * @param systemName
-     */
-    let setCurrentLocationData = (systemId, systemName) => {
-        let locationLink = $('#' + config.headCurrentLocationId).find('a');
-        locationLink.data('systemId', systemId);
-        locationLink.data('systemName', systemName);
-    };
-
    /**
     * get current location data
     * -> system data where current user is located
     * @returns {{id: *, name: *}}
     */
    let getCurrentLocationData = () => {
-        let locationLink = $('#' + config.headCurrentLocationId).find('a');
+        let breadcrumbElement = $('#' + config.headUserLocationId + '>li:last-of-type');
        return {
-            id: locationLink.data('systemId') || 0,
-            name: locationLink.data('systemName') || false
+            id: parseInt(breadcrumbElement.attr('data-systemId')) || 0,
+            name: breadcrumbElement.attr('data-systemName') || false
        };
    };

@@ -3226,6 +3236,7 @@ define([
        setSyncStatus: setSyncStatus,
        getSyncType: getSyncType,
        isXHRAborted: isXHRAborted,
+        triggerMenuAction: triggerMenuAction,
        getLabelByRole: getLabelByRole,
        getMapElementFromOverlay: getMapElementFromOverlay,
        getMapModule: getMapModule,
@@ -3255,7 +3266,6 @@ define([
        getCurrentCharacterId: getCurrentCharacterId,
        setCurrentSystemData: setCurrentSystemData,
        getCurrentSystemData: getCurrentSystemData,
-        setCurrentLocationData: setCurrentLocationData,
        getCurrentLocationData: getCurrentLocationData,
        getCurrentUserInfo: getCurrentUserInfo,
        getCurrentCharacterLog: getCurrentCharacterLog,
--- a/js/lib/jquery.fullscreen.min.js
+++ b/js/lib/jquery.fullscreen.min.js
--- a/public/css/v1.5.2/pathfinder.css
+++ b/public/css/v1.5.2/pathfinder.css
--- a/public/css/v1.5.2/pathfinder.css.map
+++ b/public/css/v1.5.2/pathfinder.css.map
--- a/public/js/v1.5.2/app.js
+++ b/public/js/v1.5.2/app.js
@@ -9,14 +9,16 @@ var jsBaseUrl = document.body.getAttribute('data-js-path');

 // requireJs configuration
 requirejs.config({
-    baseUrl: 'js',                                                      // path for baseUrl - dynamically set !below! ("build_js" | "js")
+    baseUrl: 'js',                                                      // src root path - dynamically set !below! ("build_js" | "js")

    paths: {
-        layout: 'layout',
-        conf: 'app/conf',                                               // path for "config" files dir
-        dialog: 'app/ui/dialog',                                        // path for "dialog" files dir
-        templates: '../../templates',                                   // template dir
-        img: '../../img',                                               // images dir
+        conf: 'app/conf',                                               // path     config files
+        dialog: 'app/ui/dialog',                                        // path     dialog files
+        layout: 'app/ui/layout',                                        // path     layout files
+        module: 'app/ui/module',                                        // path     module files
+
+        templates: '../../templates',                                   // path     template base dir
+        img: '../../img',                                               // path     image base dir

        // main views
        login: './app/login',                                           // initial start "login page" view
@@ -45,7 +47,6 @@ requirejs.config({
        peityInlineChart: 'lib/jquery.peity.min',                       // v3.2.1   Inline Chart - http://benpickles.github.io/peity/
        dragToSelect: 'lib/jquery.dragToSelect',                        // v1.1     Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select
        hoverIntent: 'lib/jquery.hoverIntent.min',                      // v1.9.0   Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
-        fullScreen: 'lib/jquery.fullscreen.min',                        // v0.6.0   Full screen mode - https://github.com/private-face/jquery.fullscreen
        select2: 'lib/select2.min',                                     // v4.0.3   Drop Down customization - https://select2.github.io
        validator: 'lib/validator.min',                                 // v0.10.1  Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
        lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min',        // v1.5.1   SVG line animation plugin - http://lazylinepainter.info
@@ -152,9 +153,6 @@ requirejs.config({
        hoverIntent: {
            deps: ['jquery']
        },
-        fullScreen: {
-            deps: ['jquery']
-        },
        select2: {
            deps: ['jquery', 'mousewheel'],
            exports: 'Select2'
--- a/public/js/v1.5.2/app/init.js
+++ b/public/js/v1.5.2/app/init.js
@@ -2,7 +2,7 @@
 *  Init
 */

-define(['jquery'], ($) => {
+define([], () => {

    'use strict';

--- a/public/js/v1.5.2/app/login.js
+++ b/public/js/v1.5.2/app/login.js
@@ -10,9 +10,9 @@ define([
    'blueImpGallery',
    'bootbox',
    'lazyload',
-    'app/ui/header',
-    'app/ui/logo',
-    'app/ui/demo_map',
+    'layout/header_login',
+    'layout/logo',
+    'layout/demo_map',
    'dialog/account_settings',
    'dialog/notification',
    'dialog/manual',
--- a/public/js/v1.5.2/app/map/layout.js
+++ b/public/js/v1.5.2/app/map/layout.js
@@ -38,7 +38,7 @@ define(() => {
             * @returns {*}
             * @private
             */
-            this._getElementDimension = (element) => {
+            this._getElementDimension = element => {
                let dim = null;

                let left = 0;
--- a/public/js/v1.5.2/app/map/map.js
+++ b/public/js/v1.5.2/app/map/map.js
@@ -169,13 +169,13 @@ define([
    /**
     * updates a system with current information
     * @param map
+     * @param system
     * @param data
     * @param currentUserIsHere boolean - if the current user is in this system
     * @param options
     */
-    $.fn.updateSystemUserData = function(map, data, currentUserIsHere, options){
-        let system = $(this);
-        let systemId = system.attr('id');
+    let updateSystemUserData = (map, system, data, currentUserIsHere = false, options = {}) => {
+        let systemIdAttr = system.attr('id');
        let compactView = Util.getObjVal(options, 'compactView');

        // find countElement -> minimizedUI
@@ -187,16 +187,21 @@ define([
        // find expand arrow
        let systemHeadExpand = system.find('.' + config.systemHeadExpandClass);

-        let oldCacheKey = system.data('userCache');
-        let oldUserCount = system.data('userCount');
-        oldUserCount = (oldUserCount !== undefined ? oldUserCount : 0);
+        let oldCacheKey = system.data('userCacheKey');
+        let oldUserCount = system.data('userCount') || 0;
+        let userWasHere = Boolean(system.data('currentUser'));
        let userCounter = 0;

-        system.data('currentUser', false);
+        system.data('currentUser', currentUserIsHere);

-        // if current user is in THIS system trigger event
-        if(currentUserIsHere){
-            system.data('currentUser', true);
+        // auto select system if current user is in THIS system
+        if(
+            currentUserIsHere &&
+            !userWasHere &&
+            Boolean(Util.getObjVal(Init, 'character.autoLocationSelect')) &&
+            Boolean(Util.getObjVal(Util.getCurrentUserData(), 'character.selectLocation'))
+        ){
+            Util.triggerMenuAction(map.getContainer(), 'SelectSystem', {systemId: system.data('id'), forceSelect: false});
        }

        // add user information
@@ -204,24 +209,28 @@ define([
            data &&
            data.user
        ){
+            userCounter = data.user.length;
+
+            // loop all active pilots and build cache-key
            let cacheArray = [];
+            for(let tempUserData of data.user){
+                cacheArray.push(tempUserData.id + '_' + tempUserData.log.ship.id);
+            }
+
+            // make sure cacheArray values are sorted for key comparison
+            let collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
+            cacheArray.sort(collator.compare);

            // we need to add "view mode" option to key
            // -> if view mode change detected -> key no longer valid
-            cacheArray.push(compactView ? 'compact' : 'default');
+            cacheArray.unshift(compactView ? 'compact' : 'default');

-            // loop all active pilots and build cache-key
-            for(let i = 0; i < data.user.length; i++){
-                userCounter++;
-                let tempUserData = data.user[i];
-                cacheArray.push(tempUserData.id + '_' + tempUserData.log.ship.id);
-            }
-            let cacheKey = cacheArray.join('_');
+            let cacheKey = cacheArray.join('_').hashCode();

            // check for if cacheKey has changed
            if(cacheKey !== oldCacheKey){
                // set new CacheKey
-                system.data('userCache', cacheKey);
+                system.data('userCacheKey', cacheKey);
                system.data('userCount', userCounter);

                // remove all content
@@ -235,7 +244,7 @@ define([
                    systemHeadExpand.hide();
                    system.toggleBody(false, map, {});

-                    map.revalidate(systemId);
+                    map.revalidate(systemIdAttr);
                }else{
                    systemCount.empty();

@@ -277,7 +286,7 @@ define([
                    }

                    let tooltipOptions = {
-                        systemId: systemId,
+                        systemId: systemIdAttr,
                        highlight: highlight,
                        userCount: userCounter
                    };
@@ -290,14 +299,14 @@ define([
                        complete: function(system){
                            // show active user tooltip
                            system.toggleSystemTooltip('show', tooltipOptions);
-                            map.revalidate( systemId );
+                            map.revalidate(systemIdAttr);
                        }
                    });
                }
            }
        }else{
            // no user data found for this system
-            system.data('userCache', false);
+            system.data('userCacheKey', false);
            system.data('userCount', 0);
            systemBody.empty();

@@ -311,7 +320,7 @@ define([
                systemHeadExpand.hide();
                system.toggleBody(false, map, {});

-                map.revalidate(systemId);
+                map.revalidate(systemIdAttr);
            }
        }
    };
@@ -716,11 +725,11 @@ define([
                break;
            case 'map_edit':
                // open map edit dialog tab
-                $(document).triggerMenuEvent('ShowMapSettings', {tab: 'edit'});
+                Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'edit'});
                break;
            case 'map_info':
                // open map info dialog tab
-                $(document).triggerMenuEvent('ShowMapInfo', {tab: 'information'});
+                Util.triggerMenuAction(document, 'ShowMapInfo', {tab: 'information'});
                break;
        }
    };
@@ -2427,7 +2436,7 @@ define([
                }
            },
            onShow: function(){
-                $(document).trigger('pf:closeMenu', [{}]);
+                Util.triggerMenuAction(document, 'Close');
            },
            onRefresh: function(){
            }
@@ -2574,90 +2583,89 @@ define([

        // catch events ===============================================================================================

-        // toggle global map option (e.g. "grid snap", "magnetization")
-        mapContainer.on('pf:menuMapOption', function(e, mapOption){
-            let mapElement = $(this);
-
+        /**
+         * update/toggle global map option (e.g. "grid snap", "magnetization")
+         * @param mapContainer
+         * @param data
+         */
+        let updateMapOption = (mapContainer, data) => {
            // get map menu config options
-            let data = mapOptions[mapOption.option];
+            let mapOption = mapOptions[data.option];

-            let promiseStore = MapUtil.getLocaleData('map', mapElement.data('id'));
+            let promiseStore = MapUtil.getLocaleData('map', mapContainer.data('id'));
            promiseStore.then(function(dataStore){
                let notificationText = 'disabled';
-                let button = $('#' + this.data.buttonId);
+                let button = $('#' + this.mapOption.buttonId);
                let dataExists = false;

                if(
                    dataStore &&
-                    dataStore[this.mapOption.option]
+                    dataStore[this.data.option]
                ){
                    dataExists = true;
                }

-                if(dataExists === this.mapOption.toggle){
+                if(dataExists === this.data.toggle){

                    // toggle button class
                    button.removeClass('active');

                    // toggle map class (e.g. for grid)
-                    if(this.data.class){
-                        this.mapElement.removeClass(MapUtil.config[this.data.class]);
+                    if(this.mapOption.class){
+                        this.mapContainer.removeClass(MapUtil.config[this.mapOption.class]);
                    }

-                    // call optional jQuery extension on mapElement
-                    if(this.data.onDisable && !this.mapOption.skipOnDisable){
-                        this.data.onDisable(this.mapElement);
+                    // call optional jQuery extension on mapContainer
+                    if(this.mapOption.onDisable && !this.data.skipOnDisable){
+                        this.mapOption.onDisable(this.mapContainer);
                    }

                    // show map overlay info icon
-                    MapOverlayUtil.getMapOverlay(this.mapElement, 'info').updateOverlayIcon(this.mapOption.option, 'hide');
+                    MapOverlayUtil.getMapOverlay(this.mapContainer, 'info').updateOverlayIcon(this.data.option, 'hide');

                    // delete map option
-                    MapUtil.deleteLocalData('map', this.mapElement.data('id'), this.mapOption.option);
+                    MapUtil.deleteLocalData('map', this.mapContainer.data('id'), this.data.option);
                }else{
                    // toggle button class
                    button.addClass('active');

                    // toggle map class (e.g. for grid)
-                    if(this.data.class){
-                        this.mapElement.addClass(MapUtil.config[this.data.class]);
+                    if(this.mapOption.class){
+                        this.mapContainer.addClass(MapUtil.config[this.mapOption.class]);
                    }

-                    // call optional jQuery extension on mapElement
-                    if(this.data.onEnable && !this.mapOption.skipOnEnable){
-                        this.data.onEnable(this.mapElement);
+                    // call optional jQuery extension on mapContainer
+                    if(this.mapOption.onEnable && !this.data.skipOnEnable){
+                        this.mapOption.onEnable(this.mapContainer);
                    }

                    // hide map overlay info icon
-                    MapOverlayUtil.getMapOverlay(this.mapElement, 'info').updateOverlayIcon(this.mapOption.option, 'show');
+                    MapOverlayUtil.getMapOverlay(this.mapContainer, 'info').updateOverlayIcon(this.data.option, 'show');

                    // store map option
-                    MapUtil.storeLocalData('map', this.mapElement.data('id'), this.mapOption.option, 1);
+                    MapUtil.storeLocalData('map', this.mapContainer.data('id'), this.data.option, 1);

                    notificationText = 'enabled';
                }

-                if(this.mapOption.toggle){
-                    Util.showNotify({title: this.data.description, text: notificationText, type: 'info'});
+                if(this.data.toggle){
+                    Util.showNotify({title: this.mapOption.description, text: notificationText, type: 'info'});
                }
            }.bind({
-                mapOption: mapOption,
                data: data,
-                mapElement: mapElement
+                mapOption: mapOption,
+                mapContainer: mapContainer
            }));
-        });
+        };

-        // delete system event
-        // triggered from "map info" dialog scope
-        mapContainer.on('pf:deleteSystems', function(e, data){
-            System.deleteSystems(map, data.systems, data.callback);
-        });
-
-        // triggered from "header" link (if user is active in one of the systems)
-        mapContainer.on('pf:menuSelectSystem', function(e, data){
-            let mapElement = $(this);
-            let systemId = MapUtil.getSystemId(mapElement.data('id'), data.systemId);
-            let system = mapElement.find('#' + systemId);
+        /**
+         * select system event
+         * @param mapContainer
+         * @param data
+         */
+        let selectSystem = (mapContainer, data) => {
+            let systemId = MapUtil.getSystemId(mapContainer.data('id'), data.systemId);
+            let system = mapContainer.find('#' + systemId);

            if(system.length === 1){
                // system found on map ...
@@ -2674,12 +2682,45 @@ define([
                }

                if(select){
-                    let mapWrapper = mapElement.closest('.' + config.mapWrapperClass);
+                    let mapWrapper = mapContainer.closest('.' + config.mapWrapperClass);
                    Scrollbar.scrollToSystem(mapWrapper, MapUtil.getSystemPosition(system));
                    // select system
                    MapUtil.showSystemInfo(map, system);
                }
            }
+        };
+
+        mapContainer.on('pf:menuAction', (e, action, data) => {
+            // menuAction events can also be triggered on child nodes
+            // -> if event is not handled there it bubbles up
+            //    make sure event can be handled by this element
+            if(e.target === e.currentTarget){
+                e.stopPropagation();
+
+                switch(action){
+                    case 'MapOption':
+                        // toggle global map option (e.g. "grid snap", "magnetization")
+                        updateMapOption(mapContainer, data);
+                        break;
+                    case 'SelectSystem':
+                        // select system on map (e.g. from modal links)
+                        selectSystem(mapContainer, data);
+                        break;
+                    case 'AddSystem':
+                        System.showNewSystemDialog(map, data, saveSystemCallback);
+                        break;
+                    default:
+                        console.warn('Unknown menuAction %o event name', action);
+                }
+            }else{
+                console.warn('Unhandled menuAction %o event name. Handled menu events should not bobble up', action);
+            }
+        });
+
+        // delete system event
+        // triggered from "map info" dialog scope
+        mapContainer.on('pf:deleteSystems', function(e, data){
+            System.deleteSystems(map, data.systems, data.callback);
        });

        // triggered when map lock timer (interval) was cleared
@@ -2807,36 +2848,21 @@ define([
                let compactView = mapElement.hasClass(MapUtil.config.mapCompactClass);

                // get current character log data
-                let characterLogExists = false;
-                let currentCharacterLog = Util.getCurrentCharacterLog();
+                let characterLogSystemId = Util.getObjVal(Util.getCurrentCharacterLog(), 'system.id') || 0;

                // data for header update
                let headerUpdateData = {
                    mapId: userData.config.id,
                    userCountInside: 0,                 // active user on a map
                    userCountOutside: 0,                // active user NOT on map
-                    userCountInactive: 0,               // inactive users (no location)
-                    currentLocation: {
-                        id: 0,                          // systemId for current active user
-                        name: false                     // systemName for current active user
-                    }
+                    userCountInactive: 0
                };

-                if(
-                    currentCharacterLog &&
-                    currentCharacterLog.system
-                ){
-                    characterLogExists = true;
-                    headerUpdateData.currentLocation.name = currentCharacterLog.system.name;
-                }
-
                // check if current user was found on the map
                let currentUserOnMap = false;

                // get all systems
-                let systems = mapElement.find('.' + config.systemClass);
-
-                for(let system of systems){
+                for(let system of mapElement.find('.' + config.systemClass)){
                    system = $(system);
                    let systemId = system.data('systemId');
                    let tempUserData = null;
@@ -2864,20 +2890,15 @@ define([

                    // the current user can only be in a single system ------------------------------------------------
                    if(
-                        characterLogExists &&
-                        currentCharacterLog.system.id === systemId
+                        !currentUserOnMap &&
+                        characterLogSystemId &&
+                        characterLogSystemId === systemId
                    ){
-                        if( !currentUserOnMap ){
-                            currentUserIsHere = true;
-                            currentUserOnMap = true;
-
-                            // set current location data for header update
-                            headerUpdateData.currentLocation.id =  system.data('id');
-                            headerUpdateData.currentLocation.name = currentCharacterLog.system.name;
-                        }
+                        currentUserIsHere = true;
+                        currentUserOnMap = true;
                    }

-                    system.updateSystemUserData(map, tempUserData, currentUserIsHere, {compactView: compactView});
+                    updateSystemUserData(map, system, tempUserData, currentUserIsHere, {compactView: compactView});
                }

                // users who are not in any map system ----------------------------------------------------------------
--- a/public/js/v1.5.2/app/map/system.js
+++ b/public/js/v1.5.2/app/map/system.js
@@ -179,16 +179,22 @@ define([
            statusData: statusData
        };

-        // set current position as "default" system to add ------------------------------------------------------------
-        let currentCharacterLog = Util.getCurrentCharacterLog();
+        // check for pre-selected system ------------------------------------------------------------------------------
+        let systemData;
+        if(options.systemData){
+            systemData = options.systemData;
+        }else{
+            // ... check for current active system (characterLog) -----------------------------------------------------
+            let currentCharacterLog = Util.getCurrentCharacterLog();
+            if(currentCharacterLog !== false){
+                // set system from 'characterLog' data as pre-selected system
+                systemData = Util.getObjVal(currentCharacterLog, 'system');
+            }
+        }

-        if(
-            currentCharacterLog !== false &&
-            mapSystemIds.indexOf( currentCharacterLog.system.id ) === -1
-        ){
-            // current system is NOT already on this map
-            // set current position as "default" system to add
-            data.currentSystem = currentCharacterLog.system;
+        // check if pre-selected system is NOT already on this map
+        if(mapSystemIds.indexOf(Util.getObjVal(systemData, 'id')) === -1){
+            data.currentSystem = systemData;
        }

        requirejs(['text!templates/dialog/system.html', 'mustache'], (template, Mustache) => {
@@ -235,7 +241,7 @@ define([

                                // get new position
                                newPosition = calculateNewSystemPosition(sourceSystem);
-                            }else{
+                            }else if(options.position){
                                // check mouse cursor position (add system to map)
                                newPosition = {
                                    x: options.position.x,
@@ -638,7 +644,7 @@ define([
     * @param system
     * @returns {string}
     */
-    let getSystemTooltipPlacement = (system) => {
+    let getSystemTooltipPlacement = system => {
        let offsetParent = system.parent().offset();
        let offsetSystem = system.offset();

@@ -652,7 +658,7 @@ define([
     * @param systems
     * @param callback function
     */
-    let deleteSystems = (map, systems = [], callback = (systems) => {}) => {
+    let deleteSystems = (map, systems = [], callback = systems => {}) => {
        let mapContainer = $( map.getContainer() );
        let systemIds = systems.map(system => $(system).data('id'));

@@ -726,7 +732,6 @@ define([
    let calculateNewSystemPosition = sourceSystem => {
        let mapContainer = sourceSystem.parent();
        let grid = [MapUtil.config.mapSnapToGridDimension, MapUtil.config.mapSnapToGridDimension];
-
        let x = 0;
        let y = 0;

@@ -756,12 +761,7 @@ define([
            y = currentY + config.newSystemOffset.y;
        }

-        let newPosition = {
-            x: x,
-            y: y
-        };
-
-        return newPosition;
+        return {x: x, y: y};
    };

    /**
@@ -770,7 +770,7 @@ define([
     * @param data
     * @returns {*}
     */
-    let getHeadInfoElement = (data) => {
+    let getHeadInfoElement = data => {
        let headInfo = null;
        let headInfoLeft = [];
        let headInfoRight = [];
--- a/public/js/v1.5.2/app/map/util.js
+++ b/public/js/v1.5.2/app/map/util.js
@@ -187,25 +187,28 @@ define([
    };

    /**
-     * get system data by mapId and systemid
-     * @param mapId
-     * @param systemId
-     * @returns {boolean}
+     * get system data from mapData
+     * @see getSystemData
+     * @param mapData
+     * @param value
+     * @param key
+     * @returns {any}
     */
-    let getSystemData = (mapId, systemId) => {
-        let systemData = false;
-        let mapData = Util.getCurrentMapData(mapId);
+    let getSystemDataFromMapData = (mapData, value, key = 'id') => {
+        return mapData ? mapData.data.systems.find(system => system[key] === value) || false : false;
+    };

-        if(mapData){
-            for(let j = 0; j < mapData.data.systems.length; j++){
-                let systemDataTemp = mapData.data.systems[j];
-                if(systemDataTemp.id === systemId){
-                    systemData = systemDataTemp;
-                    break;
-                }
-            }
-        }
-        return systemData;
+    /**
+     * get system data by mapId system data selector
+     * -> e.g. value = 2 and key = 'id'
+     * -> e.g. value = 30002187 and key = 'systemId' => looks for 'Amarr' CCP systemId
+     * @param mapId
+     * @param value
+     * @param key
+     * @returns {any}
+     */
+    let getSystemData = (mapId, value, key = 'id') => {
+        return getSystemDataFromMapData(Util.getCurrentMapData(mapId), value, key);
    };

    /**
@@ -495,7 +498,7 @@ define([
            connectionData &&
            connectionData.signatures   // signature data is required...
        ){
-            let SystemSignatures = require('app/ui/module/system_signature');
+            let SystemSignatures = require('module/system_signature');

            let sourceEndpoint      = connection.endpoints[0];
            let targetEndpoint      = connection.endpoints[1];
@@ -1469,25 +1472,25 @@ define([
            });

            // init compact system layout ---------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapCompact',
                toggle: false
            });

            // init magnetizer --------------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapMagnetizer',
                toggle: false
            });

            // init grid snap ---------------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapSnapToGrid',
                toggle: false
            });

            // init endpoint overlay --------------------------------------------------------------------------
-            mapElement.triggerMenuEvent('MapOption', {
+            Util.triggerMenuAction(mapElement, 'MapOption', {
                option: 'mapSignatureOverlays',
                toggle: false,
                skipOnEnable: true,     // skip callback -> Otherwise it would run 2 times on map create
@@ -1946,7 +1949,7 @@ define([
            over: function(e){
                let staticWormholeElement = $(this);
                let wormholeName = staticWormholeElement.attr('data-name');
-                let wormholeData =  Util.getObjVal(Init, 'wormholes.' + wormholeName);
+                let wormholeData = Util.getObjVal(Init, 'wormholes.' + wormholeName);
                if(wormholeData){
                    staticWormholeElement.addWormholeInfoTooltip(wormholeData, options);
                }
@@ -2059,6 +2062,7 @@ define([
        getMapIcons: getMapIcons,
        getInfoForMap: getInfoForMap,
        getInfoForSystem: getInfoForSystem,
+        getSystemDataFromMapData: getSystemDataFromMapData,
        getSystemData: getSystemData,
        getSystemTypeInfo: getSystemTypeInfo,
        getEffectInfoForSystem: getEffectInfoForSystem,
--- a/public/js/v1.5.2/app/mappage.js
+++ b/public/js/v1.5.2/app/mappage.js
@@ -6,14 +6,13 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'app/logging',
    'app/page',
    'app/map/worker',
    'app/module_map',
    'app/key',
    'app/ui/form_element'
-], ($, Init, Util, Render, Logging, Page, MapWorker, ModuleMap) => {
+], ($, Init, Util, Logging, Page, MapWorker, ModuleMap) => {

    'use strict';

@@ -39,7 +38,7 @@ define([
        Util.initDefaultEditableConfig();

        // load page
-        Page.loadPageStructure().setGlobalShortcuts();
+        Page.loadPageStructure();

        // show app information in browser console
        Util.showVersionInfo();
@@ -417,7 +416,7 @@ define([
                            data.error.length > 0
                        ){
                            // any error in the main trigger functions result in a user log-off
-                            $(document).trigger('pf:menuLogout');
+                            Util.triggerMenuAction(document, 'Logout');
                        }else{
                            $(document).setProgramStatus('online');

@@ -493,13 +492,13 @@ define([
                        data.error.length > 0
                    ){
                        // any error in the main trigger functions result in a user log-off
-                        $(document).trigger('pf:menuLogout');
+                        Util.triggerMenuAction(document, 'Logout');
                    }else{
                        $(document).setProgramStatus('online');

                        if(data.userData !== undefined){
                            // store current user data global (cache)
-                            let userData = Util.setCurrentUserData(data.userData);
+                            Util.setCurrentUserData(data.userData);

                            // update system info panels
                            if(data.system){
--- a/public/js/v1.5.2/app/module_map.js
+++ b/public/js/v1.5.2/app/module_map.js
@@ -5,13 +5,13 @@ define([
    'app/map/map',
    'app/map/util',
    'sortable',
-    'app/ui/module/system_info',
-    'app/ui/module/system_graph',
-    'app/ui/module/system_signature',
-    'app/ui/module/system_route',
-    'app/ui/module/system_intel',
-    'app/ui/module/system_killboard',
-    'app/ui/module/connection_info',
+    'module/system_info',
+    'module/system_graph',
+    'module/system_signature',
+    'module/system_route',
+    'module/system_intel',
+    'module/system_killboard',
+    'module/connection_info',
    'app/counter'
 ], (
    $,
@@ -746,7 +746,7 @@ define([
                    MapUtil.storeLocaleCharacterData('defaultMapId', mapId);
                }else{
                    // add new Tab selected
-                    $(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
+                    Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                    e.preventDefault();
                }
            });
@@ -1215,7 +1215,7 @@ define([
                clearMapModule(mapModule)
                    .then(payload => {
                        // no map data available -> show "new map" dialog
-                        $(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
+                        Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                    })
                    .then(payload => resolve());
            }else{
--- a/public/js/v1.5.2/app/page.js
+++ b/public/js/v1.5.2/app/page.js
--- a/public/js/v1.5.2/app/ui/dialog/account_settings.js
+++ b/public/js/v1.5.2/app/ui/dialog/account_settings.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
@@ -130,10 +129,9 @@ define([
                                        Util.showNotify({title: 'Account saved', type: 'success'});

                                        // close dialog/menu
-                                        $(document).trigger('pf:closeMenu', [{}]);
+                                        Util.triggerMenuAction(document, 'Close');
                                        accountSettingsDialog.modal('hide');
                                    }
-
                                }).fail(function(jqXHR, status, error){
                                    accountSettingsDialog.find('.modal-content').hideLoadingAnimation();

--- a/public/js/v1.5.2/app/ui/dialog/api_status.js
+++ b/public/js/v1.5.2/app/ui/dialog/api_status.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
--- a/public/js/v1.5.2/app/ui/dialog/changelog.js
+++ b/public/js/v1.5.2/app/ui/dialog/changelog.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
--- a/public/js/v1.5.2/app/ui/dialog/credit.js
+++ b/public/js/v1.5.2/app/ui/dialog/credit.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
-    'app/ui/logo'
-], function($, Init, Util, Render, bootbox){
+    'layout/logo'
+], ($, Init, Util, bootbox) => {
    'use strict';

    let config = {
@@ -23,7 +22,7 @@ define([
     */
    $.fn.showCreditsDialog = function(callback, enableHover){

-        requirejs(['text!templates/dialog/credit.html', 'mustache'], function(template, Mustache){
+        requirejs(['text!templates/dialog/credit.html', 'mustache'], (template, Mustache) => {

            let data = {
                logoContainerId: config.creditsDialogLogoContainerId,
--- a/public/js/v1.5.2/app/ui/dialog/jump_info.js
+++ b/public/js/v1.5.2/app/ui/dialog/jump_info.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/map/util'
-], ($, Init, Util, Render, bootbox, MapUtil) => {
+], ($, Init, Util, bootbox, MapUtil) => {
    'use strict';

    let config = {
--- a/public/js/v1.5.2/app/ui/dialog/manual.js
+++ b/public/js/v1.5.2/app/ui/dialog/manual.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
-], ($, Init, Util, Render, bootbox) => {
+], ($, Init, Util, bootbox) => {

    'use strict';

--- a/public/js/v1.5.2/app/ui/dialog/map_info.js
+++ b/public/js/v1.5.2/app/ui/dialog/map_info.js
@@ -307,7 +307,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.id});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.id});
                        });
                    }
                },{
@@ -564,7 +564,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.source});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.source});
                        });
                    }
                },{
@@ -620,7 +620,7 @@ define([
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex){
                        // select system
                        $(cell).on('click', function(e){
-                            Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: rowData.target});
+                            Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: rowData.target});
                        });
                    }
                },{
--- a/public/js/v1.5.2/app/ui/dialog/map_settings.js
+++ b/public/js/v1.5.2/app/ui/dialog/map_settings.js
@@ -422,7 +422,7 @@ define([
                                            }

                                            $(mapInfoDialog).modal('hide');
-                                            $(document).trigger('pf:closeMenu', [{}]);
+                                            Util.triggerMenuAction(document, 'Close');
                                        }
                                    }).fail(function(jqXHR, status, error){
                                        let reason = status + ' ' + error;
--- a/public/js/v1.5.2/app/ui/dialog/notification.js
+++ b/public/js/v1.5.2/app/ui/dialog/notification.js
@@ -6,9 +6,8 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, bootbox) => {

    'use strict';

--- a/public/js/v1.5.2/app/ui/dialog/shortcuts.js
+++ b/public/js/v1.5.2/app/ui/dialog/shortcuts.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/key',
-], function($, Init, Util, Render, bootbox, Key){
+], function($, Init, Util, bootbox, Key){

    'use strict';

--- a/public/js/v1.5.2/app/ui/dialog/stats.js
+++ b/public/js/v1.5.2/app/ui/dialog/stats.js
@@ -10,7 +10,7 @@ define([
    'app/render',
    'bootbox',
    'peityInlineChart'
-], function($, Init, Util, Render, bootbox){
+], ($, Init, Util, Render, bootbox) => {
    'use strict';

    let config = {
--- a/public/js/v1.5.2/app/ui/dialog/system_effects.js
+++ b/public/js/v1.5.2/app/ui/dialog/system_effects.js
@@ -6,10 +6,9 @@ define([
    'jquery',
    'app/init',
    'app/util',
-    'app/render',
    'bootbox',
    'app/map/util'
-], ($, Init, Util, Render, bootbox, MapUtil) => {
+], ($, Init, Util, bootbox, MapUtil) => {
    'use strict';

    let config = {
--- a/public/js/v1.5.2/app/ui/layout/demo_map.js
+++ b/public/js/v1.5.2/app/ui/layout/demo_map.js
@@ -5,7 +5,7 @@
 define([
    'jquery',
    'lazylinepainter'
-], function($){
+], ($) => {

    'use strict';

--- a/public/js/v1.5.2/app/ui/layout/header_login.js
+++ b/public/js/v1.5.2/app/ui/layout/header_login.js
--- a/public/js/v1.5.2/app/ui/layout/logo.js
+++ b/public/js/v1.5.2/app/ui/layout/logo.js
@@ -59,7 +59,7 @@ define([
        };

        // load Logo svg
-        requirejs(['text!templates/ui/logo.html', 'mustache'], function(template, Mustache){
+        requirejs(['text!templates/layout/logo.html', 'mustache'], function(template, Mustache){
            let logoData = {
                staticLogoId: config.staticLogoId,
                logoPartTopRightClass: config.logoPartTopRightClass,
--- a/public/js/v1.5.2/app/ui/module/connection_info.js
+++ b/public/js/v1.5.2/app/ui/module/connection_info.js
@@ -18,8 +18,6 @@ define([
        moduleHeadClass: 'pf-module-head',                                                      // class for module header
        moduleHandlerClass: 'pf-module-handler-drag',                                           // class for "drag" handler

-        headUserShipClass: 'pf-head-user-ship',                                                 // class for "user settings" link
-
        // connection info module
        moduleTypeClass: 'pf-connection-info-module',                                           // class for this module

@@ -100,15 +98,13 @@ define([
     * @returns {jQuery}
     */
    let getConnectionElement = (mapId, connectionId) => {
-        let connectionElement = $('<div>', {
+        return $('<div>', {
            id: getConnectionElementId(connectionId),
            class: ['col-xs-12', 'col-sm-4', 'col-lg-3' , config.connectionInfoPanelClass].join(' ')
        }).data({
            mapId: mapId,
            connectionId: connectionId
        });
-
-        return connectionElement;
    };

    /**
@@ -116,13 +112,11 @@ define([
     * @param mapId
     * @returns {void|jQuery|*}
     */
-    let getInfoPanelControl = (mapId) => {
-        let connectionElement = getConnectionElement(mapId, 0).append($('<div>', {
+    let getInfoPanelControl = mapId => {
+        return getConnectionElement(mapId, 0).append($('<div>', {
            class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' '),
            html: '<i class="fas fa-fw fa-plus"></i>&nbsp;add connection&nbsp;&nbsp;<kbd>ctrl</kbd>&nbsp;+&nbsp;<kbd>click</kbd>'
        }));
-
-        return connectionElement;
    };

    /**
@@ -168,7 +162,7 @@ define([
                                class: 'pf-link',
                                html: connectionData.sourceAlias + '&nbsp;&nbsp;'
                            }).on('click', function(){
-                                Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: connectionData.source});
+                                Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.source});
                            }),
                            $('<span>', {
                                class: [config.connectionInfoTableLabelSourceClass].join(' ')
@@ -183,7 +177,7 @@ define([
                                class: 'pf-link',
                                html: '&nbsp;&nbsp;' + connectionData.targetAlias
                            }).on('click', function(){
-                                Util.getMapModule().getActiveMap().triggerMenuEvent('SelectSystem', {systemId: connectionData.target});
+                                Util.triggerMenuAction(Util.getMapModule().getActiveMap(), 'SelectSystem', {systemId: connectionData.target});
                            })
                        )
                    )
@@ -415,7 +409,7 @@ define([
                // get current ship data ----------------------------------------------------------
                massShipCell.parent().toggle(showShip);
                if(showShip){
-                    shipData = $('.' + config.headUserShipClass).data('shipData');
+                    shipData = Util.getObjVal(Util.getCurrentCharacterLog(), 'ship');
                    if(shipData){
                        if(shipData.mass){
                            massShip = parseInt(shipData.mass);
@@ -506,18 +500,14 @@ define([
     * @param connectionId
     * @returns {string}
     */
-    let getConnectionElementId = (connectionId) => {
-        return config.connectionInfoPanelId + connectionId;
-    };
+    let getConnectionElementId = connectionId => config.connectionInfoPanelId + connectionId;

    /**
     * get all visible connection panel elements
     * @param moduleElement
     * @returns {*|T|{}}
     */
-    let getConnectionElements = (moduleElement) => {
-        return moduleElement.find('.' + config.connectionInfoPanelClass).not('#' + getConnectionElementId(0));
-    };
+    let getConnectionElements = moduleElement => moduleElement.find('.' + config.connectionInfoPanelClass).not('#' + getConnectionElementId(0));

    /**
     * enrich connectionData with "logs" data (if available) and other "missing" data
--- a/public/js/v1.5.2/app/util.js
+++ b/public/js/v1.5.2/app/util.js
@@ -38,7 +38,7 @@ define([

        // head
        headMapTrackingId: 'pf-head-map-tracking',                              // id for "map tracking" toggle (checkbox)
-        headCurrentLocationId: 'pf-head-current-location',                      // id for "show current location" element
+        headUserLocationId: 'pf-head-user-location',                            // id for "location" breadcrumb

        // menu
        menuButtonFullScreenId: 'pf-menu-button-fullscreen',                    // id for menu button "fullScreen"
@@ -399,7 +399,7 @@ define([
    };

    /**
-     * check multiple element if they arecurrently visible in viewport
+     * check multiple element if they are currently visible in viewport
     * @returns {Array}
     */
    $.fn.isInViewport = function(){
@@ -1494,21 +1494,29 @@ define([
    };

    /**
-     * set currentUserData as "global" variable
-     * this function should be called continuously after data change
-     * to keep the data always up2data
+     * set currentUserData as "global" store var
+     * this function should be called whenever userData changed
     * @param userData
+     * @returns {boolean} true on success
     */
-    let setCurrentUserData = (userData) => {
-        Init.currentUserData = userData;
+    let setCurrentUserData = userData => {
+        let isSet = false;

-        // check if function is available
-        // this is not the case in "login" page
-        if( $.fn.updateHeaderUserData ){
-            $.fn.updateHeaderUserData();
+        // check if userData is valid
+        if(userData && userData.character && userData.characters){
+            let changes = compareUserData(getCurrentUserData(), userData);
+            // check if there is any change
+            if(Object.values(changes).some(val => val)){
+                $(document).trigger('pf:changedUserData', [userData, changes]);
+            }
+
+            Init.currentUserData = userData;
+            isSet = true;
+        }else{
+            console.error('Could not set userData %o. Missing or malformed obj', userData);
        }

-        return getCurrentUserData();
+        return isSet;
    };

    /**
@@ -1524,14 +1532,7 @@ define([
     * @returns {number}
     */
    let getCurrentCharacterId = () => {
-        let userData = getCurrentUserData();
-        let currentCharacterId = 0;
-        if(
-            userData &&
-            userData.character
-        ){
-            currentCharacterId = parseInt( userData.character.id );
-        }
+        let currentCharacterId = parseInt(getObjVal(getCurrentUserData(), 'character.id')) || 0;

        if(!currentCharacterId){
            // no active character... -> get default characterId from initial page load
@@ -1541,6 +1542,28 @@ define([
        return currentCharacterId;
    };

+    /**
+     * compares two userData objects for changes that are relevant
+     * @param oldUserData
+     * @param newUserData
+     * @returns {{characterShipType: *, charactersIds: boolean, characterLogLocation: *, characterSystemId: *, userId: *, characterId: *}}
+     */
+    let compareUserData = (oldUserData, newUserData) => {
+        let valueChanged = key => getObjVal(oldUserData, key) !== getObjVal(newUserData, key);
+
+        let oldCharactersIds = (getObjVal(oldUserData, 'characters') || []).map(data => data.id).sort();
+        let newCharactersIds = (getObjVal(newUserData, 'characters') || []).map(data => data.id).sort();
+
+        return {
+            userId: valueChanged('id'),
+            characterId: valueChanged('character.id'),
+            characterLogLocation: valueChanged('character.logLocation'),
+            characterSystemId: valueChanged('character.log.system.id'),
+            characterShipType: valueChanged('character.log.ship.typeId'),
+            charactersIds: oldCharactersIds.toString() !== newCharactersIds.toString()
+        };
+    };
+
    /**
     * get a unique ID for each tab
     * -> store ID in session storage
@@ -1818,16 +1841,34 @@ define([
     * @param jqXHR XMLHttpRequest instance
     * @returns {boolean}
     */
-    let isXHRAborted = (jqXHR) => {
+    let isXHRAborted = jqXHR => {
        return !jqXHR.getAllResponseHeaders();
    };

+    /**
+     * trigger global menu action 'event' on dom 'element' with optional 'data'
+     * @param element
+     * @param action
+     * @param data
+     */
+    let triggerMenuAction = (element, action, data) => {
+        if(element){
+            if(typeof(action) === 'string' && action.length){
+                $(element).trigger('pf:menuAction', [action, data]);
+            }else{
+                console.error('Invalid action: %o', action);
+            }
+        }else{
+            console.error('Invalid element: %o', element);
+        }
+    };
+
    /**
     * get label element for role data
     * @param role
     * @returns {*|jQuery|HTMLElement}
     */
-    let getLabelByRole = (role) => {
+    let getLabelByRole = role => {
        return $('<span>', {
            class: ['label', 'label-' + role.style].join(' '),
            text: role.label
@@ -1839,7 +1880,7 @@ define([
     * @param mapOverlay
     * @returns {jQuery}
     */
-    let getMapElementFromOverlay = (mapOverlay) => {
+    let getMapElementFromOverlay = mapOverlay => {
        return $(mapOverlay).parents('.' + config.mapWrapperClass).find('.' + config.mapClass);
    };

@@ -2276,7 +2317,7 @@ define([
     */
    let getDataIndexByMapId = (data, mapId) => {
        let index = false;
-        if( Array.isArray(data) && mapId === parseInt(mapId, 10) ){
+        if(Array.isArray(data) && mapId === parseInt(mapId, 10)){
            for(let i = 0; i < data.length; i++){
                if(data[i].config.id === mapId){
                    index = i;
@@ -2340,9 +2381,7 @@ define([
     * @param mapId
     * @returns {boolean|int}
     */
-    let getCurrentMapUserDataIndex = mapId => {
-        return getDataIndexByMapId(Init.currentMapUserData, mapId);
-    };
+    let getCurrentMapUserDataIndex = mapId => getDataIndexByMapId(Init.currentMapUserData, mapId);

    /**
     * update cached mapUserData for a single map
@@ -2385,17 +2424,13 @@ define([
    let getCurrentMapData = mapId => {
        let currentMapData = false;

-        if( mapId === parseInt(mapId, 10) ){
-            // search for a specific map
-            for(let i = 0; i < Init.currentMapData.length; i++){
-                if(Init.currentMapData[i].config.id === mapId){
-                    currentMapData = Init.currentMapData[i];
-                    break;
-                }
+        if(Init.currentMapData){
+            if(mapId === parseInt(mapId, 10)){
+                currentMapData = Init.currentMapData.find(mapData => mapData.config.id === mapId);
+            }else{
+                // get data for all maps
+                currentMapData = Init.currentMapData;
            }
-        }else{
-            // get data for all maps
-            currentMapData = Init.currentMapData;
        }

        return currentMapData;
@@ -2415,7 +2450,7 @@ define([
     * @param mapData
     */
    let updateCurrentMapData = mapData => {
-        let mapDataIndex = getCurrentMapDataIndex( mapData.config.id );
+        let mapDataIndex = getCurrentMapDataIndex(mapData.config.id);

        if(mapDataIndex !== false){
            Init.currentMapData[mapDataIndex].config = mapData.config;
@@ -2434,8 +2469,8 @@ define([
    let filterCurrentMapData = (path, value) => {
        let currentMapData = getCurrentMapData();
        if(currentMapData){
-            currentMapData = currentMapData.filter((mapData) => {
-                return (getObjVal(mapData, path) === value);
+            currentMapData = currentMapData.filter(mapData => {
+                return getObjVal(mapData, path) === value;
            });
        }
        return currentMapData;
@@ -2446,7 +2481,7 @@ define([
     * @param mapId
     */
    let deleteCurrentMapData = mapId => {
-        Init.currentMapData = Init.currentMapData.filter((mapData) => {
+        Init.currentMapData = Init.currentMapData.filter(mapData => {
            return (mapData.config.id !== mapId);
        });
    };
@@ -2455,20 +2490,7 @@ define([
     * get the current log data for the current user character
     * @returns {boolean}
     */
-    let getCurrentCharacterLog = () => {
-        let characterLog = false;
-        let currentUserData = getCurrentUserData();
-
-        if(
-            currentUserData &&
-            currentUserData.character &&
-            currentUserData.character.log
-        ){
-            characterLog = currentUserData.character.log;
-        }
-
-        return characterLog;
-    };
+    let getCurrentCharacterLog = () => getObjVal(getCurrentUserData(), 'character.log') || false;

    /**
     * get information for the current mail user
@@ -2803,28 +2825,16 @@ define([
        return Init.currentSystemData;
    };

-    /**
-     * set current location data
-     * -> system data where current user is located
-     * @param systemId
-     * @param systemName
-     */
-    let setCurrentLocationData = (systemId, systemName) => {
-        let locationLink = $('#' + config.headCurrentLocationId).find('a');
-        locationLink.data('systemId', systemId);
-        locationLink.data('systemName', systemName);
-    };
-
    /**
     * get current location data
     * -> system data where current user is located
     * @returns {{id: *, name: *}}
     */
    let getCurrentLocationData = () => {
-        let locationLink = $('#' + config.headCurrentLocationId).find('a');
+        let breadcrumbElement = $('#' + config.headUserLocationId + '>li:last-of-type');
        return {
-            id: locationLink.data('systemId') || 0,
-            name: locationLink.data('systemName') || false
+            id: parseInt(breadcrumbElement.attr('data-systemId')) || 0,
+            name: breadcrumbElement.attr('data-systemName') || false
        };
    };

@@ -3226,6 +3236,7 @@ define([
        setSyncStatus: setSyncStatus,
        getSyncType: getSyncType,
        isXHRAborted: isXHRAborted,
+        triggerMenuAction: triggerMenuAction,
        getLabelByRole: getLabelByRole,
        getMapElementFromOverlay: getMapElementFromOverlay,
        getMapModule: getMapModule,
@@ -3255,7 +3266,6 @@ define([
        getCurrentCharacterId: getCurrentCharacterId,
        setCurrentSystemData: setCurrentSystemData,
        getCurrentSystemData: getCurrentSystemData,
-        setCurrentLocationData: setCurrentLocationData,
        getCurrentLocationData: getCurrentLocationData,
        getCurrentUserInfo: getCurrentUserInfo,
        getCurrentCharacterLog: getCurrentCharacterLog,
--- a/public/js/v1.5.2/lib/jquery.fullscreen.min.js
+++ b/public/js/v1.5.2/lib/jquery.fullscreen.min.js
--- a/public/templates/layout/footer_map.html
+++ b/public/templates/layout/footer_map.html
@@ -1,7 +1,11 @@
 <footer id="{{id}}" class="navbar navbar-default" role="navigation">
    <div class="pf-footer-left">
-        <p class="navbar-text  txt-color txt-color-gray"><i class="far fa-copyright"></i>
-            {{ currentYear }} <a class="{{footerLicenceLinkClass}}" href="javascript:void(0)">Licence</a>
+        <p class="navbar-text  txt-color txt-color-gray">
+            <i class="far fa-clock"></i>&nbsp;&nbsp;<span class="{{ footerClockClass }}"></span>
+            &nbsp;|&nbsp;
+            <i class="far fa-copyright"></i>&nbsp;&nbsp;{{ currentYear }}&nbsp;
+            <a class="{{footerLicenceLinkClass}}" href="javascript:void(0)">Licence</a>
+
        </p>
    </div>

--- a/public/templates/layout/footer_simple.html
+++ b/public/templates/layout/footer_simple.html
--- a/public/templates/layout/header_map.html
+++ b/public/templates/layout/header_map.html
@@ -13,15 +13,12 @@
            </a>
            <p class="navbar-text {{popoverTriggerClass}} {{userCharacterClass}}" title="switch character" data-easein="flipYIn">
                <a href="javascript:void(0);">
-                    <img class="{{userCharacterImageClass}}" src=""/>
-                    <span>{{! will be filled with current user name }}</span>
+                    <img class="pf-head-image --left {{userCharacterImageClass}}" src=""/>
+                    <span class="hidden-xs">{{! will be filled with current user name }}</span>
                </a>
            </p>
-            <p style="display: none;" class="navbar-text hidden-xs {{userShipClass}}">
-                <img class="{{userShipImageClass}}" src=""/>
-                <span>{{! will be filled with current user ship name }}</span>
-            </p>
-            <p class="navbar-text pf-head-active-user">
+
+            <p class="navbar-text {{usersActiveClass}}">
                <i class="fas fa-fighter-jet fa-fw"></i>
                <span class="badge txt-color" data-type="inside" data-on="txt-color-greenLight" data-off="txt-color-red" title="pilots on map"></span>
                <span class="badge txt-color" data-type="outside" data-on="txt-color-grayLighter" data-off="txt-color-grayLighter" title="pilots beyond map"></span>
@@ -30,17 +27,15 @@
        </div>

        <div class="navbar-header pull-right">
-            <p id="pf-head-current-location" class="navbar-text hidden-xs" title="current location">
-                <a href="javascript:void(0);">
-                    <i class="fas fa-map-marker-alt fa-fw"></i><span></span>
-                </a>
-            </p>
+            <div class="navbar-text no-margin">
+                <ul id="{{ userLocationId }}" class="pf-head-breadcrumb">{{! will be filled with current user location history }}</ul>
+            </div>
+
            <p class="navbar-text txt-color txt-color-red pf-head-program-status" title="connection status">
                <i class="fas fa-fw fa-bolt"></i>
                <span>offline</span>
            </p>
-            <p class="navbar-text pf-head-map-tracking" title="map connection tracking">
-                <i class="fas fa-fw fa-location-arrow"></i>
+            <p class="navbar-text pf-head-map-tracking text-right" title="map connection tracking">
                <input id="{{mapTrackingId}}" type="checkbox" data-toggle="toggle" value="1" >
            </p>
            <a class="navbar-brand pf-head-map" href="">
--- a/public/templates/layout/logo.html
+++ b/public/templates/layout/logo.html
--- a/public/templates/layout/splash.html
+++ b/public/templates/layout/splash.html
--- a/public/templates/view/admin.html
+++ b/public/templates/view/admin.html
@@ -1,5 +1,5 @@
 {* splash page *}
-<include href="templates/ui/splash.html"/>
+<include href="templates/layout/splash.html"/>

 <nav id="pf-navbar" class="navbar navbar-default navbar-fixed-top pf-head">
    <div class="container col-sm-12">
@@ -30,6 +30,6 @@
 <include if="{{ @tplPage }}" href="{{ 'templates/admin/' . @tplPage . '.html' }}" />

 {* footer *}
-<include href="templates/ui/footer.html"/>
+<include href="templates/layout/footer_simple.html"/>


--- a/public/templates/view/login.html
+++ b/public/templates/view/login.html
@@ -5,7 +5,7 @@
 </check>

 {* splash page *}
-<include href="templates/ui/splash.html"/>
+<include href="templates/layout/splash.html"/>

 <nav id="pf-navbar" class="navbar navbar-default navbar-fixed-top pf-head">
    <div class="container">
--- a/public/templates/view/setup.html
+++ b/public/templates/view/setup.html
@@ -1,5 +1,5 @@
 {* splash page *}
-<include href="templates/ui/splash.html"/>
+<include href="templates/layout/splash.html"/>

 <include href="img/logo.svg"/>

@@ -1310,4 +1310,4 @@
 </nav>

 {* footer *}
-<include href="templates/ui/footer.html"/>
+<include href="templates/layout/footer_simple.html"/>
--- a/sass/layout/_all.scss
+++ b/sass/layout/_all.scss
@@ -2,6 +2,7 @@
@import "_fonts";
@import "_main";
@import "_landing";
+@import "_breadcrumb";
@import "_logo";
@import "_map";
@import "_system-info";
--- a/sass/layout/_breadcrumb.scss
+++ b/sass/layout/_breadcrumb.scss
@@ -0,0 +1,102 @@
+$breadcrumb-arrow-size: 15px;
+
+.pf-head-breadcrumb {
+  display: inline-block;
+  margin: 0;
+
+  li {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+
+    &:before {
+      content: "";
+      position: absolute;
+      right: -9px;
+      top: -1px;
+      z-index: 20;
+      border-left: 10px solid #272728;
+      border-top: $breadcrumb-arrow-size solid transparent;
+      border-bottom: $breadcrumb-arrow-size solid transparent;
+      transition: 0.3s ease;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      right: -10px;
+      top: -1px;
+      z-index: 10;
+      border-left: 10px solid $gray-light;
+      border-top: $breadcrumb-arrow-size solid transparent;
+      border-bottom: $breadcrumb-arrow-size solid transparent;
+    }
+
+    &:hover {
+      .pf-head-breadcrumb-item{
+        color: $teal-lighter;
+
+        & > img{
+          border-color: $teal-lighter !important;
+        }
+      }
+
+      &:not(:last-of-type){
+        .pf-head-breadcrumb-item{
+          max-width: 135px; // longest system name ~130px "Tash-Murkon Prime"
+        }
+      }
+    }
+
+    &:first-of-type {
+      .pf-head-breadcrumb-item{
+        padding-left: 10px;
+      }
+    }
+
+    &:last-of-type {
+      .pf-head-breadcrumb-item{
+        padding-right: 10px;
+      }
+
+      &:before {
+        display: none;
+      }
+
+      &:after {
+        display: none;
+      }
+    }
+
+    &:not(:last-of-type){
+      .pf-head-breadcrumb-item{
+        max-width: 60px;        // initial with before "extend"
+      }
+    }
+
+    &.--empty{
+      pointer-events: none;
+    }
+  }
+
+  .pf-head-breadcrumb-item {
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 0 5px 0 15px;
+    line-height: 30px;
+    width: auto;
+    @include transition(color 0.15s ease-out, max-width 0.15s ease-in-out);
+    will-change: color, max-width;
+
+    [class^="pf-system-sec-"]{
+      margin-right: 5px;
+    }
+
+    &>.fas{
+      margin-right: 5px !important;
+    }
+  }
+}
--- a/sass/layout/_landing.scss
+++ b/sass/layout/_landing.scss
@@ -25,7 +25,7 @@
 }

 .pf-splash{
-  position: absolute;
+  position: fixed;
  z-index: 2000;
  background-color: $gray-darkest;
  color: $gray-light;
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -1,5 +1,9 @@
 $endpointBubbleWidth: 18px;

+:fullscreen{
+  overflow-y: scroll; // overwrites browser default
+}
+
 body{
  // prevent marking text
  -webkit-touch-callout: none;
@@ -60,6 +64,10 @@ em{
  padding: 0 !important;
 }

+.no-margin{
+  margin: 0;
+}
+
 // scroll bar (webkit only) =======================================================================
 ::-webkit-scrollbar {
  display: none;  // hides the scrollbar but is still scrollable
@@ -1587,16 +1595,16 @@ code {

  }

-  .pf-head-user-character, .pf-head-user-ship{
+  .pf-head-user-character{
    opacity: 0; // triggered by js
    visibility: hidden;
  }

-  .pf-head-active-user{
+  .pf-head-active-users{
    cursor: pointer;
  }

-  .pf-head-active-user, #pf-head-current-location{
+  .pf-head-active-users{
    display: none; // triggered by js

    .badge{
@@ -1604,16 +1612,23 @@ code {
    }
  }

-  .pf-head-user-character-image, .pf-head-user-ship-image{
+  .pf-head-image{
    display: inline-block;
    margin-top: -6px;
    margin-bottom: -6px;
    width: 27px;
    border: 1px solid $gray;
-    margin-right: 3px;
    image-rendering: -webkit-optimize-contrast;
    @include transition( border-color 0.15s ease-out );
    will-change: border-color;
+
+    &.--left{
+      margin-right: 3px;
+    }
+
+    &.--right{
+      margin-left: 8px;
+    }
  }

  .pf-head-program-status{
@@ -1625,10 +1640,6 @@ code {
    margin-top: 4px;
  }

-  .navbar-text{
-    min-width: 60px; // fixes a load-delay issue for "toggle" map-tracking
-  }
-
  // tooltips header
  .tooltip{
    .tooltip-inner{
@@ -1705,15 +1716,6 @@ code {
  }
 }

-// left menu ======================================================================================
-.pf-menu-clock{
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 6px 8px;
-  text-align: center;
-}
-
 // global info panel ==============================================================================
 #pf-global-info{
  width: 100%;