map update logic

2015-01-23 18:01:03 +01:00
parent 9e74c2dee9
commit 095ba527d0
48 changed files with 1022 additions and 501 deletions
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -14,6 +14,9 @@
            <excludedPath local="true" path="$PROJECT_DIR$/sass" />
            <excludedPath local="true" path="$PROJECT_DIR$/js" />
            <excludedPath local="true" path="$PROJECT_DIR$/usage" />
+            <excludedPath local="true" path="$PROJECT_DIR$/.gitattributes" />
+            <excludedPath local="true" path="$PROJECT_DIR$/.gitignore" />
+            <excludedPath local="true" path="$PROJECT_DIR$/config.rb" />
          </excludedPaths>
        </serverdata>
      </paths>
--- a/img/favicons/favicon-32x32.png
+++ b/img/favicons/favicon-32x32.png
--- a/img/favicons/mstile-70x70.png
+++ b/img/favicons/mstile-70x70.png
--- a/img/grid_40x40.png
+++ b/img/grid_40x40.png
--- a/img/jqueryui/ui-bg_flat_0_999999_40x100.png
+++ b/img/jqueryui/ui-bg_flat_0_999999_40x100.png
--- a/img/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png
+++ b/img/jqueryui/ui-bg_flat_0_aaaaaa_40x100.png
--- a/img/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png
+++ b/img/jqueryui/ui-bg_glass_55_fbf9ee_1x400.png
--- a/img/jqueryui/ui-bg_glass_65_ffffff_1x400.png
+++ b/img/jqueryui/ui-bg_glass_65_ffffff_1x400.png
--- a/img/jqueryui/ui-bg_glass_75_dadada_1x400.png
+++ b/img/jqueryui/ui-bg_glass_75_dadada_1x400.png
--- a/img/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png
+++ b/img/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png
--- a/img/jqueryui/ui-bg_glass_75_ffffff_1x400.png
+++ b/img/jqueryui/ui-bg_glass_75_ffffff_1x400.png
--- a/img/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png
+++ b/img/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png
--- a/img/jqueryui/ui-bg_inset-soft_95_fef1ec_1x100.png
+++ b/img/jqueryui/ui-bg_inset-soft_95_fef1ec_1x100.png
--- a/img/jqueryui/ui-icons_222222_256x240.png
+++ b/img/jqueryui/ui-icons_222222_256x240.png
--- a/img/jqueryui/ui-icons_2e83ff_256x240.png
+++ b/img/jqueryui/ui-icons_2e83ff_256x240.png
--- a/img/jqueryui/ui-icons_428bca_256x240.png
+++ b/img/jqueryui/ui-icons_428bca_256x240.png
--- a/img/jqueryui/ui-icons_454545_256x240.png
+++ b/img/jqueryui/ui-icons_454545_256x240.png
--- a/img/jqueryui/ui-icons_555555_256x240.png
+++ b/img/jqueryui/ui-icons_555555_256x240.png
--- a/img/jqueryui/ui-icons_888888_256x240.png
+++ b/img/jqueryui/ui-icons_888888_256x240.png
--- a/img/jqueryui/ui-icons_999999_256x240.png
+++ b/img/jqueryui/ui-icons_999999_256x240.png
--- a/img/jqueryui/ui-icons_cd0a0a_256x240.png
+++ b/img/jqueryui/ui-icons_cd0a0a_256x240.png
--- a/img/jqueryui/ui-icons_f0ad4e_256x240.png
+++ b/img/jqueryui/ui-icons_f0ad4e_256x240.png
--- a/img/jqueryui/ui-icons_f6cf3b_256x240.png
+++ b/img/jqueryui/ui-icons_f6cf3b_256x240.png
--- a/img/jqueryui/ui-icons_ffffff_256x240.png
+++ b/img/jqueryui/ui-icons_ffffff_256x240.png
--- a/img/pf-bg.jpg
+++ b/img/pf-bg.jpg
--- a/index.htm
+++ b/index.htm
@@ -24,11 +24,9 @@
        <meta name="msapplication-TileColor" content="#2d89ef">
        <meta name="msapplication-TileImage" content="favicons/mstile-144x144.png">

-
-<!--
        <meta http-equiv="Cache-Control" content="no-store" />
        <meta http-equiv="Pragma" content="no-cache" />
-        -->
+
        <meta name="description" content="eve-online wormhole mapping tool">
        <meta name="keywords" content="eve,wormhole,mapping,tool,mmo,space,game,igb">
        <meta name="author" content="Exodus 4D">
@@ -41,7 +39,7 @@

        <!-- Hey Bob! Where is all the magic? -->

-        <script data-main="js/app" src="js/lib/require.js"></script>
+        <script data-main="build_js/app" src="build_js/lib/require.js"></script>
    </body>

 </html>
--- a/js/app.js
+++ b/js/app.js
@@ -1,6 +1,6 @@

 requirejs.config({
-    baseUrl: 'js', // user build_js files, change to "js" for un-compressed source
+    baseUrl: 'build_js', // user build_js files, change to "js" for un-compressed source
    stubModules: ['text'],                                              // Exclude these modules on build
    paths: {
        layout: 'layout',
@@ -8,11 +8,11 @@ requirejs.config({
        //jquery: "lib/jquery-2.1.1.min",                               // v2.1.1 jQuery
        bootstrap: 'lib/bootstrap.min',                                 // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript/
        text: 'lib/requirejs/text',                                     // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
+        throttleDebounce: 'lib/jquery.ba-throttle-debounce.min',        // v1.1 Handle/throttle jquery events - http://benalman.com/projects/jquery-throttle-debounce-plugin/
+        velocity: 'lib/velocity.min',                                   // v1.2.1 animation engine - http://julian.com/research/velocity/
        templates: '../templates',                                      // template dir
        slidebars: 'lib/slidebars',                                     // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars/
-       // jsPlumb: 'lib/jsPlumb-1.6.4-min',                               // v1.4.6 jsPlumb - main map draw plugin http://www.jsplumb.org/
        jsPlumb: 'lib/dom.jsPlumb-1.7.2-min',                           // v1.7.2 jsPlumb (Vanilla)- main map draw plugin http://www.jsplumb.org/
-
        customScrollbar: 'lib/jquery.mCustomScrollbar.concat.min',      // v3.1.11 Custom scroll bars - http://manos.malihu.gr/
        datatables: 'lib/jquery.dataTables.min',                        // v1.10.3 DataTables - tables
        datatablesBootstrap: 'lib/dataTables.bootstrap',                // DataTables - not used (bootstrap style)
@@ -38,11 +38,13 @@ requirejs.config({

    },
    shim: {
-        jqueryUI: {
-            export: '$',
+        bootstrap: {
            deps: ['jquery']
        },
-        bootstrap: {
+        velocity: {
+            deps: ['jquery']
+        },
+        throttleDebounce: {
            deps: ['jquery']
        },
        slidebars: {
--- a/js/app/ccp.js
+++ b/js/app/ccp.js
@@ -2,7 +2,7 @@
 *  Global CCPEvE function wrapper
 */

-define(["jquery", "app/render", "app/init"], function($, Render, Config) {
+define(['jquery'], function($) {

    "use strict";

@@ -10,48 +10,16 @@ define(["jquery", "app/render", "app/init"], function($, Render, Config) {
     * in-game or out-of-game browser
     * @returns {boolean}
     */
-    var isInGame = function(){
+    var isInGameBrowser = function(){
        var inGame = false;
        if(typeof CCPEVE === 'object'){
            inGame = true;
        }
-return true;
+
        return inGame;
-    }
-
-
-    var requestTrust = function(){
-        if(isInGame()){
-
-            var config = {
-                name: 'modules/dialog',
-                position: $('body'),
-                link: 'after',
-                functions: {
-                    after: function(){
-                        $( "#pf_trust_dialog" ).dialog({
-                            modal: true,
-                            buttons: {
-                                Ok: function(){
-                                    $(this).dialog('close');
-                                }
-                            }
-                        });
-                    }
-                }
-            };
-
-            var data = {
-                id: 'pf_trust_dialog',
-                titel: 'Trust page',
-                content: 123 //CCPEVE.requestTrust(Config.baseUrl)
-            };
-           // Render.showModule(config, data);
-        }
    };

-
    return {
-        requestTrust: requestTrust
+        isInGameBrowser: isInGameBrowser
    };
 });
--- a/js/app/init.js
+++ b/js/app/init.js
@@ -8,7 +8,8 @@ define(['jquery'], function($) {

    var Config = {
        timer: {
-            mainPing: 3000                                          // main server ping
+            mapUpdatePing: 3000,                                     // ping for map update
+            userUpdatePing: 2000                                     // ping for map user update
        },
        path: {
          img: 'img/'
@@ -17,23 +18,31 @@ define(['jquery'], function($) {
            zKillboard: 'https://zkillboard.com/api/',              // killboard api
            eveCentral: 'http://api.eve-central.com/api/'           // jump rout api
        },
+        animationSpeed: {
+            headerLink: 100                                         // links in head bar
+        },
        classes: {
            // map types
            mapTypes: {
-                global: {
-                    class: 'pf-map-type-global',
-                    classTab: 'pf-map-type-tab-global',
-                    label: 'Global'
+                standard: {
+                    class: '',
+                    classTab: 'pf-map-type-tab-default',
+                    label: ''
+                },
+                private: {
+                    class: 'pf-map-type-private',
+                    classTab: 'pf-map-type-tab-private',
+                    label: 'Private'
                },
                alliance: {
                    class: 'pf-map-type-alliance',
                    classTab: 'pf-map-type-tab-alliance',
                    label: 'Alliance'
                },
-                private: {
-                    class: 'pf-map-type-private',
-                    classTab: 'pf-map-type-tab-private',
-                    label: 'Private'
+                global: {
+                    class: 'pf-map-type-global',
+                    classTab: 'pf-map-type-tab-global',
+                    label: 'Global'
                }
            },
            // system effects
@@ -195,7 +204,8 @@ define(['jquery'], function($) {
            jumpbridge: {
                cssClass: 'pf-map-connection-jumpbridge',
                paintStyle: {
-                    dashstyle: '2'
+                    //dashstyle: '2',
+                    'stroke-dasharray': [15,15]
                }
            },
            stargate: {
--- a/js/app/main.js
+++ b/js/app/main.js
@@ -6,10 +6,12 @@ define([
    'jquery',
    'app/init',
    'app/render',
+    'velocity',
    'app/ccp',
    'app/page',
-    'app/module_map'
-], function($, Init, Render, CCP) {
+    'app/module_map',
+    'throttleDebounce'
+], function($, Init, Render, Velocity, CCP) {

    'use strict';

@@ -19,7 +21,8 @@ define([


    $(function() {
-        CCP.requestTrust();
+        //CCP.requestTrust();
+

        $('body').loadPageStructure();

@@ -381,8 +384,12 @@ define([
                                id: 4,  // system id
                                user: [
                                    {
+                                        id: 3,
                                        name: 'Exodus 4D',
-                                        ship: 'Legion',
+                                        ship: {
+                                            id: 55,
+                                            name: 'legion'
+                                        },
                                        status: 'corp'
                                    }
                                ]
@@ -391,16 +398,28 @@ define([
                                id: 5,  // system id
                                user: [
                                    {
+                                        id: 4,
                                        name: 'Faye Fantastic',
-                                        ship: 'Armageddon',
+                                        ship: {
+                                            id: 56,
+                                            name: 'Armageddon'
+                                        },
                                        status: 'ally'
                                    },{
+                                        id: 5,
                                        name: 'Sibasomos',
-                                        ship: 'Proteus',
+                                        ship: {
+                                            id: 57,
+                                            name: 'Proteus'
+                                        },
                                        status: 'corp'
                                    },{
+                                        id: 6,
                                        name: 'Xtrah',
-                                        ship: 'Pod',
+                                        ship: {
+                                            id: 58,
+                                            name: 'Pod'
+                                        },
                                        status: 'ally'
                                    }
                                ]
@@ -410,35 +429,64 @@ define([
                }
            ]};

-
-
        // update map module ========================================
-        setTimeout(
-            function() {
-                console.time('updateUserData')
-               // $('#' + config.mapModuleId).updateMapModuleData(userData);
-                console.timeEnd('updateUserData')
-            }, 5000);
+        $('#' + config.mapModuleId).on('pf:initModule', function(){

+            var mapModule = $(this);

+            var mapDataUpdateActive = true;         // allow update "map data"
+            var userDataUpdateActive = true;        // allow update "user data"

+            // ping for main map update
+            var triggerMapUpdatePing = function(tempMapData){

-        // server ping
-        var triggerMainPing = function(tempMapData){
-            console.time('updateMapData')
-            // load map module ==========================================
-            $('#' + config.mapModuleId).updateMapModule(tempMapData);
-            console.timeEnd('updateMapData')
+                // prevent multiple requests simultaneously
+                if(mapDataUpdateActive === true){
+                    $(document).setProgramStatus('online');

-            console.time('getMapData')
-            var mapData = $('#' + config.mapModuleId).getMapModuleData();
-            console.timeEnd('getMapData')
-            console.log(mapData);
-        };
+                    mapDataUpdateActive = false;
+                    console.time('updateMapData')

-        //setInterval(triggerMainPing, 5000, mapData);
+                    // load map module ==========================================
+                    mapDataUpdateActive = mapModule.updateMapModule(tempMapData);
+                    console.timeEnd('updateMapData')
+                }else{
+                    // not finished in time -> to slow or error
+                    $(document).setProgramStatus('problem');
+                }
+
+                // get updated map data
+                if(mapDataUpdateActive === true){
+                    console.time('getMapData')
+                    var mapData = mapModule.getMapModuleData();
+                    console.timeEnd('getMapData')
+                }
+            };
+
+            triggerMapUpdatePing(mapData);
+            setInterval(triggerMapUpdatePing, Init.timer.mapUpdatePing, mapData);
+
+            // ping for user data update
+            var triggerUserUpdatePing = function(tempUserData){
+
+                // prevent multiple requests simultaneously
+                if(userDataUpdateActive === true){
+                    $(document).setProgramStatus('online');
+
+                    userDataUpdateActive = false;
+                    console.time('updateUserData');
+                    userDataUpdateActive = mapModule.updateMapModuleData(userData);
+                    console.timeEnd('updateUserData');
+                }else{
+                    // not finished in time -> to slow or error
+                    $(document).setProgramStatus('problem');
+                }
+
+            };
+            setInterval(triggerUserUpdatePing, Init.timer.userUpdatePing, mapData);
+
+        });

-        setInterval(triggerMainPing, Init.timer.mainPing, mapData);

    });

--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -38,7 +38,8 @@ define([
        systemHeadNameClass: 'pf-system-head-name',                     // class for system name
        systemHeadExpandClass: 'pf-system-head-expand',                 // class for system head expand arrow
        systemBodyClass: 'pf-system-body',                              // class for system body
-        systemBodyItemClass: 'pf-system-body-item',
+        systemBodyItemHeight: 16,                                       // px of a system body entry
+        systemBodyItemClass: 'pf-system-body-item',                     // class for a system body entry
        systemBodyItemStatusClass: 'pf-user-status',
        systemBodyRightClass: 'pf-system-body-right',
        dynamicElementWrapperId: 'pf-dialog-wrapper',                     // wrapper div for dynamic content (dialogs, context-menus,...)
@@ -98,6 +99,11 @@ define([
            onMaxConnections:function(info, e) {
                console.log('max connections')
                console.log(info.maxConnections);
+            },
+            beforeDetach:function(connection) {
+                var mapElement = connection._jsPlumb.instance.getContainer();
+                $(mapElement).getMapOverlay().startMapUpdateCounter();
+                return true;
            }/*,

            overlays:[
@@ -156,20 +162,13 @@ define([
    $.fn.updateSystemUserData = function(map, data, currentUserData){

        var system = $(this);
+        var systemId = system.attr('id');

        // find system body
-        var systemBody = $( $(system).find('.' + config.systemBodyClass) );
+        var systemBody = $( system.find('.' + config.systemBodyClass) );

        // find expand arrow
-        var systemHeadExpand = $( $(system).find('.' + config.systemHeadExpandClass) );
-
-        system = $(system);
-
-        // remove tooltip
-        system.removeAttr('title');
-
-        // remove all content
-        systemBody.empty();
+        var systemHeadExpand = $( system.find('.' + config.systemHeadExpandClass) );

        var userCounter = 0;

@@ -177,78 +176,126 @@ define([

        // if current user is in THIS system trigger event
        if(currentUserData){
-            /* not used jet
-            var tabContentElement = getTabContentElementByMapElement(system);
-
-            $(tabContentElement).trigger('pf:highlightTab', [{system: system}]);
-            */
-
            system.data('currentUser', true);
        }

+        var oldCacheKey = system.data('userCache');
+
        // add user information
        if(
            data &&
            data.user
        ){
-            console.log(data.user)
-            $.each(data.user, function(i, userData){

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

-                var statusClass = getStatusClassForUser(userData.status);
-                var userName = userData.name;
+            var cacheKey = cacheArray.join('_');

-                var item = $('<div>', {
-                    class: config.systemBodyItemClass
-                }).append(
-                    $('<li>', {
-                        class: ['fa', 'fa-circle', config.systemBodyItemStatusClass, statusClass].join(' ')
-                    })
-                ).append(
-                    $('<span>', {
-                        text: ' ' + userName
-                    })
-                ).append(
-                        $('<span>', {
-                            text: userData.ship,
-                            class: config.systemBodyRightClass
-                        })
-                    );
+            // check for if cacheKey has changed
+            if(cacheKey !== oldCacheKey){
+                // set new CacheKey
+                system.data('userCache', cacheKey);

-                systemBody.append(item);
-            });
+                // remove all content
+                systemBody.empty();

-        }
-/*
-        var oldUserCount = system.attr('title');
+                // loop "again" and build DOM object with user information
+                for(var j = 0; j < data.user.length; j++){
+                    var userData = data.user[j];
+                    userCounter++;

-        system.removeAttr('title');
+                    var statusClass = getStatusClassForUser(userData.status);
+                    var userName = userData.name;

-        if(userCounter === 0){
-            // hide expand arrow
-            systemBody.hide(100);
-            systemHeadExpand.hide(100, function(){
-                if(oldUserCount !== userCounter){
-                    // revalidate element size and repaint
-                    map.revalidate( system.attr('id') );
+                    var item = $('<div>', {
+                        class: config.systemBodyItemClass
+                    }).append(
+                            $('<span>', {
+                                text: userData.ship.name,
+                                class: config.systemBodyRightClass
+                            })
+                        ).append(
+                            $('<li>', {
+                                class: ['fa', 'fa-circle', config.systemBodyItemStatusClass, statusClass].join(' ')
+                            })
+                        ).append(
+                            $('<span>', {
+                                text: ' ' + userName
+                            })
+                        );
+
+                    systemBody.append(item);
                }
-            });
+
+
+                // =================================================================
+
+                // user count changed -> adapt tooltip
+                system.tooltip('destroy');
+
+                system.attr('title', userCounter);
+
+                // show system head
+                systemHeadExpand.velocity({
+                    width: '10px'
+                },{
+                    duration: 50,
+                    display: 'inline-block',
+                    progress: function(){
+                        // revalidate element size and repaint
+                        map.revalidate( systemId );
+                    },
+                    complete: function(){
+
+                        // show system body
+                        systemBody.velocity({
+                            height: config.systemBodyItemHeight + 'px'
+                        },{
+                            duration: 50,
+                            display: 'auto',
+                            progress: function(){
+                                // revalidate element size and repaint
+                                map.revalidate( systemId );
+                            }
+                        });
+
+                        // show active user tooltip
+                        toggleSystemTooltip([system], 'show', {placement: 'top', trigger: 'manual'});
+                    }
+                });
+            }
        }else{
-            systemBody.show(100);
-            systemHeadExpand.show(100, function(){
-                if(oldUserCount !== userCounter){
-                    // revalidate element size and repaint
-                    map.revalidate( system.attr('id') );
-                }
-            });
+            // no user data found for this system
+            system.data('userCache', false);

-            system.attr('title', userCounter);
+            if(
+                oldCacheKey &&
+                oldCacheKey.length > 0
+            ){
+                // no user -> clear SystemBody
+                systemHeadExpand.velocity('reverse',{
+                    display: 'none',
+                    complete: function(){
+                        systemBody.velocity('reverse',{
+                            display: 'none',
+                            progress: function(){
+                                // revalidate element size and repaint
+                                map.revalidate( systemId );
+                                systemBody.empty();
+                            }
+                        });
+                    }
+                });
+            }

-            // show active user tooltip
-            toggleSystemTooltip([system], 'show', {placement: 'top', trigger: 'manual'});
        }
-*/
+
+

    };

@@ -264,8 +311,9 @@ define([
            if(options){
                $(systems[i]).tooltip(options);
            }
-            $(systems[i]).tooltip(show);
        }
+
+        $(systems).tooltip(show);
    };

    /**
@@ -287,6 +335,7 @@ define([
        // add new class
        system.data('status', statusLabel);
        system.addClass( statusClass );
+
    };

    /**
@@ -406,156 +455,163 @@ define([

        var mapContainer = mapConfig.map.getContainer();

-        if(mapContainer === undefined){
-            // add new map

-            // create map wrapper
-            var mapWrapper = $('<div>', {
-                class: config.mapWrapperClass
-            });
+        // prevent jsPlumb from re-painting during main-map update -> performance boost :)
+        mapConfig.map.doWhileSuspended(function() {

-            // create new map container
-            mapContainer = $('<div>', {
-                id: config.mapIdPrefix + mapConfig.config.id,
-                class: [config.mapClass].join(' ')
-            });
+            if(mapContainer === undefined){
+                // add new map
+
+                // create map wrapper
+                var mapWrapper = $('<div>', {
+                    class: config.mapWrapperClass
+                });
+
+                // create new map container
+                mapContainer = $('<div>', {
+                    id: config.mapIdPrefix + mapConfig.config.id,
+                    class: [config.mapClass].join(' ')
+                });
+
+                // add additional information
+                mapContainer.data('id', mapConfig.config.id);
+
+                mapWrapper.append(mapContainer);
+
+                // append mapWrapper to parent element (at the top)
+                $(parentElement).prepend(mapWrapper);
+
+
+                // set main Container for current map -> the container exists now in DOM !! very important
+                mapConfig.map.setContainer($('#' + config.mapIdPrefix + mapConfig.config.id));
+
+                // set map observer
+                setMapObserver(mapConfig.map);
+            }

            // add additional information
-            mapContainer.data('id', mapConfig.config.id);
            mapContainer.data('name', mapConfig.config.name);
+            mapContainer.data('scope', mapConfig.config.scope);
+            mapContainer.data('icon', mapConfig.config.icon);
            mapContainer.data('type', mapConfig.config.type);

-            mapWrapper.append(mapContainer);
+            mapContainer = $(mapContainer);

-            // append mapWrapper to parent element (at the top)
-            $(parentElement).prepend(mapWrapper);
+            // get map data
+            var mapData = mapContainer.getMapData();

+            if(mapData !== false){
+                // map data available -> map not locked by update counter :)
+                var currentSystemData = mapData.data.systems;
+                var currentConnectionData = mapData.data.connections;

-            // set main Container for current map -> the container exists now in DOM !! very important
-            mapConfig.map.setContainer($('#' + config.mapIdPrefix + mapConfig.config.id));
+                // update systems ===========================================================

-            // set map observer
-            setMapObserver(mapConfig.map);
-        }
+                for(var i = 0; i < mapConfig.data.systems.length; i++){
+                    var systemData = mapConfig.data.systems[i];

-        mapContainer = $(mapContainer);
+                    // add system
+                    var addNewSystem = true;

-        // get map data
-        var mapData = mapContainer.getMapData();
+                    for(var k = 0; k < currentSystemData.length; k++){
+                        if(currentSystemData[k].id === systemData.id){

-        if(mapData !== false){
-            // map data available -> map not locked by update counter :)
-            var currentSystemData = mapData.data.systems;
-            var currentConnectionData = mapData.data.connections;
+                            if( currentSystemData[k].updated < systemData.updated ){
+                                // system changed -> update
+                                mapContainer.getSystem(mapConfig.map, systemData);
+                            }

-            // update systems ===========================================================
-
-            for(var i = 0; i < mapConfig.data.systems.length; i++){
-                var systemData = mapConfig.data.systems[i];
-
-                // add system
-                var addNewSystem = true;
-
-                for(var k = 0; k < currentSystemData.length; k++){
-                    if(currentSystemData[k].id === systemData.id){
-
-                        if( currentSystemData[k].updated < systemData.updated ){
-                            // system changed -> update
-                            mapContainer.getSystem(mapConfig.map, systemData);
+                            addNewSystem = false;
+                            break;
                        }
+                    }

-                        addNewSystem = false;
-                        break;
+                    if( addNewSystem === true){
+                        drawSystem(mapConfig.map, systemData);
                    }
                }

-                if( addNewSystem === true){
-                    console.log('omg')
-                    drawSystem(mapConfig.map, systemData);
-                }
-            }
+                // check for systems that are gone -> delete system
+                for(var a = 0; a < currentSystemData.length; a++){

-            // check for systems that are gone -> delete system
-            for(var a = 0; a < currentSystemData.length; a++){
+                    var deleteThisSystem = true;

-                var deleteThisSystem = true;
+                    for(var b = 0; b < mapConfig.data.systems.length; b++){
+                        var deleteSystemData = mapConfig.data.systems[b];

-                for(var b = 0; b < mapConfig.data.systems.length; b++){
-                    var deleteSystemData = mapConfig.data.systems[b];
-
-                    if(deleteSystemData.id === currentSystemData[a].id){
-                        deleteThisSystem = false;
-                        break;
-                    }
-                }
-
-                if(deleteThisSystem === true){
-                    // system not found -> delete system
-                    deleteSystem(mapConfig.map, $('#' + config.systemIdPrefix + currentSystemData[a].id));
-                }
-            }
-
-            // update connections =========================================================
-
-            // set up default connections
-            for(var j = 0; j < mapConfig.data.connections.length; j++){
-                var connectionData = mapConfig.data.connections[j];
-
-                // add connection
-                var addNewConnection= true;
-
-                for(var c = 0; c < currentConnectionData.length; c++){
-                    if(currentConnectionData[c].id === connectionData.id){
-                        // connection already exists -> check for updates
-
-                        if(
-                            currentConnectionData[c].updated < connectionData.updated && // has changed
-                            ativeConnections[mapData.config.id][connectionData.id] !== undefined
-                        ){
-                            // connection changed -> update
-                            var tempConnection = ativeConnections[mapData.config.id][connectionData.id];
-                            updateConnection(tempConnection, connectionData, currentConnectionData[c]);
+                        if(deleteSystemData.id === currentSystemData[a].id){
+                            deleteThisSystem = false;
+                            break;
                        }
+                    }

-                        addNewConnection = false;
-                        break;
+                    if(deleteThisSystem === true){
+                        // system not found -> delete system
+                        deleteSystem(mapConfig.map, $('#' + config.systemIdPrefix + currentSystemData[a].id));
                    }
                }

-                if(addNewConnection === true){
-                    drawConnection(mapConfig.map, connectionData);
-                }
-            }
+                // update connections =========================================================

-            // check for connections that are gone -> delete connection
-            for(var d = 0; d < currentConnectionData.length; d++){
+                // set up default connections
+                for(var j = 0; j < mapConfig.data.connections.length; j++){
+                    var connectionData = mapConfig.data.connections[j];

-                var deleteThisConnection = true;
+                    // add connection
+                    var addNewConnection= true;

-                for(var e = 0; e < mapConfig.data.connections.length;e++){
-                    var deleteConnectionData = mapConfig.data.connections[e];
+                    for(var c = 0; c < currentConnectionData.length; c++){
+                        if(currentConnectionData[c].id === connectionData.id){
+                            // connection already exists -> check for updates

-                    if(deleteConnectionData.id === currentConnectionData[d].id){
-                        deleteThisConnection = false;
-                        break;
+                            if(
+                                currentConnectionData[c].updated < connectionData.updated && // has changed
+                                ativeConnections[mapData.config.id][connectionData.id] !== undefined
+                            ){
+                                // connection changed -> update
+                                var tempConnection = ativeConnections[mapData.config.id][connectionData.id];
+                                updateConnection(tempConnection, connectionData, currentConnectionData[c]);
+                            }
+
+                            addNewConnection = false;
+                            break;
+                        }
+                    }
+
+                    if(addNewConnection === true){
+                        drawConnection(mapConfig.map, connectionData);
                    }
                }
-                deleteThisConnection = true;
-                if(
-                    deleteThisConnection === true &&
-                    ativeConnections[mapData.config.id][currentConnectionData.id] !== undefined
-                ){
-                    // connection not found -> delete connection
-                    var deleteConnection = ativeConnections[mapData.config.id][currentConnectionData.id];
-                    mapConfig.map.detach(deleteConnection);
+
+                // check for connections that are gone -> delete connection
+                for(var d = 0; d < currentConnectionData.length; d++){
+
+                    var deleteThisConnection = true;
+
+                    for(var e = 0; e < mapConfig.data.connections.length;e++){
+                        var deleteConnectionData = mapConfig.data.connections[e];
+
+                        if(deleteConnectionData.id === currentConnectionData[d].id){
+                            deleteThisConnection = false;
+                            break;
+                        }
+                    }
+                    deleteThisConnection = true;
+                    if(
+                        deleteThisConnection === true &&
+                        ativeConnections[mapData.config.id][currentConnectionData.id] !== undefined
+                    ){
+                        // connection not found -> delete connection
+                        var deleteConnection = ativeConnections[mapData.config.id][currentConnectionData.id];
+                        mapConfig.map.detach(deleteConnection);
+                    }
+
                }

+                // repaint all connections because of some strange visual bugs -_-
+                mapConfig.map.repaintEverything();
            }
-
-            // repaint all connections because of some strange visual bugs -_-
-            mapConfig.map.repaintEverything();
-
-        }
+        });

    };

@@ -622,7 +678,7 @@ define([

            // get System Element by data
            var newSystem = mapContainer.getSystem(map, systemData);
-console.log('test')
+
            // add new system to map
            mapContainer.append(newSystem);

@@ -1152,8 +1208,6 @@ console.log('test')
        var systemHeadExpand = $( system.find('.' + config.systemHeadExpandClass) );
        var systemBody = $( system.find('.' + config.systemBodyClass) );

-        var bodyItemHeight = 16;
-
        // make system draggable
        map.draggable(system, {
            containment: 'parent',
@@ -1246,54 +1300,51 @@ console.log('test')
            // get ship counter and calculate expand height
            var shipCounter = parseInt( system.attr('data-original-title') );

-            var expandheight = shipCounter * bodyItemHeight;
+            var expandheight = shipCounter * config.systemBodyItemHeight;

-            systemBody.animate(
+            systemBody.velocity(
                {
                    height: expandheight + 'px',
-                    width: '100%',
+                    width: 100,
                    'min-width': '150px'
-                },
-                {
-                   // queue:false,
+                },{
                    duration: 100,
-                    step: function(){
+                    progress: function(){
                        // repaint connections of current system
                        map.revalidate( hoverSystemId );
                    },
                    complete: function(){
                        map.revalidate( hoverSystemId );
-                        $(this).find('.' + config.systemBodyRightClass).show();
+                        $(this).find('.' + config.systemBodyRightClass).velocity({
+                            opacity: 1
+                        },{
+                            duration: 50,
+                            display: 'auto'
+                        });
                    }
                }
            );
+
        }, function(e){
            // hover out
            var hoverSystem = $(this).parents('.' + config.systemClass);
            var hoverSystemId = hoverSystem.attr('id');

-            systemBody.animate(
-                {
-                    height: '16px',
-                    width: '100%',
-                    'min-width': '60px'
-                },
-                {
-                  //  queue:false,
-                    duration: 100,
-                    step: function(){
-                        // repaint connections of current system
-                        map.revalidate( hoverSystemId );
-                        $(this).find('.' + config.systemBodyRightClass).hide();
-                    },
-                    start: function(){
-                        $(this).find('.' + config.systemBodyRightClass).hide();
-                    },
-                    complete: function(){
-                        map.revalidate( hoverSystemId );
-                    }
+            systemBody.find('.' + config.systemBodyRightClass).velocity( {
+                opacity: 0
+            },{
+                duration: 100,
+                display: 'none',
+                complete: function(){
+                    systemBody.velocity('reverse', {
+                        complete: function(){
+                            // overwrite "complete" function from first "hover"-open
+                            map.revalidate( hoverSystemId );
+                        }
+                    });
                }
-            );
+            });
+
        });

        // context menu ==================================================================
@@ -1415,7 +1466,6 @@ console.log('test')

        // load system data =================================================================================
        system.on('click', function(e){
-
            var system = $(this);

            // left mouse button
@@ -1426,29 +1476,31 @@ console.log('test')
                        // select system
                        system.toggleSelectSystem(map);
                    }else{
-
-                        // activate system
-                        markSystemActive(map, system);
-
-                        // get parent Tab Content and fire update event
-                        var tabContentElement = getTabContentElementByMapElement( system );
-
-                        var data = {
-                            system: system
-                        };
-
-                        $(tabContentElement).trigger('pf:updateSystemData', [data]);
+                        system.showSystemInfo(map);
                    }
                }
-
            }
        });
+    };

+    $.fn.showSystemInfo = function(map){
+        var system = $(this);

+        // activate system
+        markSystemActive(map, system);
+
+        // get parent Tab Content and fire update event
+        var tabContentElement = getTabContentElementByMapElement( system );
+
+        var data = {
+            system: system
+        };
+
+        $(tabContentElement).trigger('pf:updateSystemData', [data]);
    };

    /**
-     * toggle select status of a system
+     * toggle selectable status of a system
     */
    $.fn.toggleSelectSystem = function(map){
        var system = $(this);
@@ -1791,6 +1843,23 @@ console.log('test')

        });

+        $(mapContainer).on('pf:menuSelectSystem', function(e, data){
+            var tempMapContainer = $(this);
+            var systemId = config.systemIdPrefix + tempMapContainer.data('id') + '-' + data.systemId;
+            var system = $(this).find('#' + systemId);
+
+            if(system.length === 1){
+                // scroll to system
+                var tempMapWrapper = tempMapContainer.parents('.' + config.mapWrapperClass);
+                tempMapWrapper.scrollTo(system);
+
+                // select system
+                system.showSystemInfo(map);
+            }
+
+        });
+
+
    };

    /**
@@ -2166,22 +2235,24 @@ console.log('test')
     * update the Data of the user that is currently viewing the map (if available) -> In - game info
     * @param userData
     * @param currentUserData
+     * @returns {boolean}
     */
    $.fn.updateUserData = function(userData, currentUserData){
-
        // get all systems
        var systems = $(this).find('.' + config.systemClass);

        // get new map instance or load existing
        var map = getMapInstance(userData.config.id);

-        // trigger reset event for all Tabs
-        var tabContentElements = getTabContentElements();
-        $(tabContentElements).trigger('pf:highlightTab', [{}]);
-
        // container must exist! otherwise systems cant be updated
        if(map.getContainer() !== undefined){

+            // data for header update
+            var headerUpdateData = {
+                mapId: userData.config.id,
+                userCount: 0                        // active user in a map
+            };
+
            for(var i = 0; i < systems.length; i++){
                // get user Data for System

@@ -2206,11 +2277,24 @@ console.log('test')
                    currentUserData.system.id === systemId
                ){
                    tempCurrentUserData = currentUserData;
+
+                    // set current location data for header update
+                    headerUpdateData.currentSystemId =  systemId;
+                    headerUpdateData.currentSystemName = system.getSystemInfo(['alias']);
+                }
+
+                if(tempUserData){
+                    headerUpdateData.userCount += tempUserData.user.length;
                }

                system.updateSystemUserData(map, tempUserData, tempCurrentUserData);
            }
+
+            // trigger document event -> update header
+            $(document).trigger('pf:updateHeaderData', headerUpdateData);
        }
+
+        return true;
    };

    /**
@@ -2239,6 +2323,8 @@ console.log('test')
            var mapConfig = {};
            mapConfig.id = mapElement.data('id');
            mapConfig.name = mapElement.data('name');
+            mapConfig.scope = mapElement.data('scope');
+            mapConfig.icon = mapElement.data('icon');
            mapConfig.type = mapElement.data('type');
            mapData.config = mapConfig;

@@ -2267,6 +2353,7 @@ console.log('test')
                systemData.rally = tempSystem.data('rally');
                systemData.currentUser = tempSystem.data('currentUser');
                systemData.updated = tempSystem.data('updated');
+                systemData.userCount = (tempSystem.attr('data-original-title') ? parseInt( tempSystem.attr('data-original-title') ) : 0);

                // position -------------------------------
                var positionData = {};
@@ -2356,16 +2443,23 @@ console.log('test')
                setConnectionObserver(newJsPlumbInstance, info.connection);
            });

+            newJsPlumbInstance.bind('connectionDetached', function(info, e) {
+            });
+
            // event after DragStop a connection or new connection
            newJsPlumbInstance.bind('beforeDrop', function(info) {
                var connection = info.connection;
                var sourceSystem = $('#' + info.sourceId);
                var returnValue = true;

+                var connectionId = connection.getParameter('connectionId');
+
                sourceSystem.getMapOverlay().startMapUpdateCounter();

-                // set "default" connection status
-                setConnectionWHStatus(connection, 'wh_fresh');
+                // set "default" connection status only for NEW connections
+                if(!connection.suspendedElement){
+                    setConnectionWHStatus(connection, 'wh_fresh');
+                }

                // prevent multiple connections between same systems
                var connections = checkForConnection(newJsPlumbInstance, info.sourceId, info.targetId );
@@ -2381,12 +2475,24 @@ console.log('test')

                // notification
                if(returnValue === true){
-                    Util.showNotify({title: 'New Connection established', text: 'fgdgdf', type: 'success'});
+
+                    var text = 'New connection established';
+                    if(connectionId > 0){
+                        text = 'connection switched';
+                    }
+
+                    Util.showNotify({title: text, type: 'success'});
                }

                return returnValue;
            });

+            // event before Detach connection
+            newJsPlumbInstance.bind('beforeDetach', function(info) {
+
+                return true;
+            });
+

            activeInstances[mapId] = newJsPlumbInstance;

@@ -2513,8 +2619,7 @@ console.log('test')
     */
    $.fn.scrollTo = function(position){
        return this.each(function(){
-            // todo re-comment not used jet
-            //$(this).mCustomScrollbar('scrollTo', position);
+            $(this).mCustomScrollbar('scrollTo', position);
        });
    };

--- a/js/app/module_map.js
+++ b/js/app/module_map.js
@@ -68,15 +68,6 @@ define([
        // map scopes
        mapScopes: [
            {scope: 'wormhole', label: 'W-Space'}
-        ],
-
-        mapIcons: [
-            {class: 'fa-desktop', label: 'desktop'},
-            {class: 'fa-bookmark', label: 'bookmark'},
-            {class: 'fa-cube', label: 'cube'},
-            {class: 'fa-warning', label: 'warning'},
-            {class: 'fa-plane', label: 'plane'},
-            {class: 'fa-rocket', label: 'rocket'}
        ]

    };
@@ -86,56 +77,7 @@ define([
        systemKillsGraphData: {} // data for system kills info graph
    };

-    /**
-     * shows the add new map dialog
-     */
-    var showNewMapDialog = function(){

-        // confirm dialog
-        var moduleConfig = {
-            name: 'modules/map_dialog',
-            position: $('#' + config.dynamicElementWrapperId),
-            link: 'after',
-            functions: {
-                after: function(){
-                    $( "#" + config.newMapDialogId).dialog({
-                        modal: true,
-                        resizable: false,
-                        buttons: {
-                            'Cancel': function(){
-                                $(this).dialog('close');
-                            },
-                            'Add map': function(){
-
-                                // get form Values
-                                var form = $('#' + config.newMapDialogId).find('form');
-
-                                var  newMapData = {};
-
-                                $.each(form.serializeArray(), function(i, field) {
-                                    newMapData[field.name] = field.value;
-                                });
-
-                                saveMapData(newMapData);
-
-                                $(this).dialog('close');
-                            }
-                        }
-                    });
-                }
-            }
-        };
-
-        var moduleData = {
-            id: config.newMapDialogId,
-            title: 'Add new map',
-            scope: config.mapScopes,
-            type: Util.getMapTypes(),
-            icon: config.mapIcons
-        };
-
-        Render.showModule(moduleConfig, moduleData);
-    };

    var saveMapData = function(mapData){

@@ -160,8 +102,13 @@ define([
     * @returns {*}
     */
    $.fn.getActiveMap = function(){
+
        var map = $(this).find('.active.' + config.mapTabContentClass + ' .' + config.mapClass);

+        if(map.length === 0){
+            map = false;
+        }
+
        return map;
    };

@@ -193,11 +140,6 @@ define([
                drawSystemInfoElement($( e.target ), systemInfoData);
            });

-            // highlight a mapTab
-            $(this).on('pf:highlightTab', function(e, data){
-                // TODO
-            });
-
        });
    };

@@ -1745,6 +1687,7 @@ define([
    /**
     * updates complete map module (all maps)
     * @param userData
+     * @returns {boolean}
     */
    $.fn.updateMapModuleData = function(userData){

@@ -1759,25 +1702,29 @@ define([
        }

        // get map Data
-        $.each(mapElements, function(i, mapElement){
-
-            var mapId = parseInt( $(mapElement).data('id') );
+        for(var i = 0; i < mapElements.length; i++){
+            var mapElement = $(mapElements[i]);
+            var mapId = mapElement.data('id');

            var mapUserData = null;
            // get user data for each active map
-            $.each(userData.mapUserData, function(j, tempMapData){

+            for(var j = 0; j < userData.mapUserData.length; j++){
+                var tempMapData = userData.mapUserData[j];
                if(tempMapData.config.id === mapId){
                    // map userData found
                    mapUserData = tempMapData;
+                    break;
                }
-            });
+            }

            // update map
            if(mapUserData){
-                $(mapElement).updateUserData(mapUserData, currentUserData);
+                mapElement.updateUserData(mapUserData, currentUserData);
            }
-        });
+        }
+
+        return true;
    };

    /**
@@ -1950,6 +1897,7 @@ define([
    /**
     * load/update map module into element (all maps)
     * @param mapData
+     * @returns {boolean}
     */
    $.fn.updateMapModule = function(mapData){

@@ -2071,7 +2019,7 @@ define([
            // add "add" button
            var tabAddOptions = {
                id: 0,
-                tabClasses: [config.mapTabClass, Util.getInfoForMap( 'default', 'classTab') ],
+                tabClasses: [config.mapTabClass, Util.getInfoForMap( 'standard', 'classTab') ],
                contentClasses: [config.mapTabContentClass],
                icon: 'fa-plus',
                name: 'add',
@@ -2113,7 +2061,7 @@ define([

                if(mapId === 0){
                    // add new Tab selected
-                    showNewMapDialog();
+                    $(document).trigger('pf:menuEditMap', {newMap: true});
                    e.preventDefault();
                }
            });
@@ -2138,19 +2086,23 @@ define([
                }
            });

-            allTabElements.on('hide.bs.tab', function (e) {
+            allTabElements.on('hide.bs.tab', function (e, a) {

-                var mapId = $(e.target).data('map-id');
+                var newMapId = $(e.relatedTarget).data('map-id');
+                var oldMapId = $(e.target).data('map-id');

-                var currentTabContentElement = $('#' + config.mapTabIdPrefix + mapId);
-
-                // disable scrollbar for map that will be hidden. "freeze" current state
-                var scrollableElement = currentTabContentElement.find('.' + config.mapWrapperClass);
-                $(scrollableElement).mCustomScrollbar( 'disable' );
+                // disable map if new map is selected -> not "add button"
+                if(newMapId > 0){
+                    var currentTabContentElement = $('#' + config.mapTabIdPrefix + oldMapId);

+                    // disable scrollbar for map that will be hidden. "freeze" current state
+                    var scrollableElement = currentTabContentElement.find('.' + config.mapWrapperClass);
+                    $(scrollableElement).mCustomScrollbar( 'disable' );
+                }
            });
        }

+        return true;
    };

    /**
--- a/js/app/page.js
+++ b/js/app/page.js
@@ -7,10 +7,10 @@ define([
    'app/util',
    'app/render',
    'bootbox',
+    'app/ccp',
    'slidebars',
-    'fullScreen',
    'app/module_map'
-], function($, Init, Util, Render, bootbox) {
+], function($, Init, Util, Render, bootbox, CCP) {

    'use strict';

@@ -33,6 +33,9 @@ define([
        headClass: 'pf-head',                                                   // class for page head
        headMenuClass: 'pf-head-menu',                                          // class for page head menu button (left)
        headMapClass: 'pf-head-map',                                            // class for page head map button (right)
+        headActiveUserClass: 'pf-head-active-user',                             // class for "active user" link
+        headCurrentLocationClass: 'pf-head-current-location',                   // class for "show current location" link
+        headProgramStatusClass: 'pf-head-program-status',                       // class for "program status" notification

        // footer
        pageFooterId: 'pf-footer',                                              // id for page footer
@@ -206,12 +209,19 @@ define([
                )
        );

-        // init menu
-        if($.fullscreen.isNativelySupported() === true){
-            $('#' + config.menuButtonFullScreenId).removeClass('hide');
+        // init full screen -> IGB does not support full screen
+        if(CCP.isInGameBrowser() === false){
+            requirejs(['fullScreen'], function() {
+                if($.fullscreen.isNativelySupported() === true){
+                    $('#' + config.menuButtonFullScreenId).removeClass('hide');
+                }
+            });
        }


+
+
+
    };

    /**
@@ -236,13 +246,24 @@ define([
                    $('<a>', {
                        class: 'list-group-item',
                        href: '#'
-                    }).html('&nbsp;&nbsp;Grid snap').prepend(
+                    }).html('&nbsp;&nbsp;&nbsp;Grid snap').prepend(
                            $('<i>',{
                                class: 'glyphicon glyphicon-th'
                            })
                        ).on('click', function(){
                            $('#' + config.mapModuleId).getActiveMap().triggerMenuEvent('Grid', {button: this});
                        })
+                ).append(
+                    $('<a>', {
+                        class: 'list-group-item',
+                        href: '#'
+                    }).html('&nbsp;&nbsp;Edit').prepend(
+                            $('<i>',{
+                                class: 'fa fa-edit fa-fw'
+                            })
+                        ).on('click', function(){
+                            $(document).triggerMenuEvent('EditMap', {newMap: false});
+                        })
                )
        );
    };
@@ -274,6 +295,8 @@ define([
                    var slideMenu = new $.slidebars({
                        scrollLock: false
                    });
+
+                    // main menus
                    $('.' + config.headMenuClass).on('click', function() {
                        slideMenu.slidebars.toggle('left');
                    });
@@ -282,11 +305,28 @@ define([
                        slideMenu.slidebars.toggle('right');
                    });

+                    // active pilots
+                    $('.' + config.headActiveUserClass).find('a').on('click', function(){
+                        $(document).triggerMenuEvent('ShowMapInfo');
+                    });
+
+                    // current location
+                    $('.' + config.headCurrentLocationClass).find('a').on('click', function(){
+                        $('#' + config.mapModuleId).getActiveMap().triggerMenuEvent('SelectSystem', {systemId: $(this).data('systemId') });
+                    });
+
                    $(document).on('pf:closeMenu', function(e){
                        // close all menus
                        slideMenu.slidebars.close();
                    });

+                    // init all tooltips
+                    var tooltipElements = $('#' + config.pageHeaderId).find('[title]');
+                    tooltipElements.tooltip({placement: 'bottom'});
+
+                    // trigger load main map module -> header is required for drag&drop position
+                    $('#' + config.mapModuleId).trigger('pf:initModule');
+
                }
            }
        };
@@ -373,27 +413,182 @@ define([
            return false;
        });

+        $(document).on('pf:menuEditMap', function(e, data){
+            // show map edit dialog or edit map
+            var mapData = false;
+
+            if(data.newMap === false){
+                var activeMap = $('#' + config.mapModuleId).getActiveMap();
+
+                if(activeMap){
+                    mapData = activeMap.getMapData(true);
+                }
+            }
+
+            showNewMapDialog(mapData);
+            return false;
+        });
+
        $(document).on('pf:menuFullScreen', function(e, data){

-            var fullScreenElement = $('body');
+            if(CCP.isInGameBrowser() === false){
+                var fullScreenElement = $('body');

-            // close all menus
-            $(this).trigger('pf:closeMenu', [{}]);
+                // close all menus
+                $(this).trigger('pf:closeMenu', [{}]);
+
+                // wait until menu is closed before switch mode (looks better)
+                setTimeout(
+                    function() {
+                        // fullscreen is not supported by IGB
+                        requirejs(['jquery', 'fullScreen'], function($) {
+
+                            if($.fullscreen.isFullScreen()){
+                                $.fullscreen.exit();
+                            }else{
+                                fullScreenElement.fullscreen({overflow: 'overflow-y', toggleClass: config.fullScreenClass});
+                            }
+                        });
+                    }, 400);
+            }

-            // wait until menu is closed before switch mode (looks better)
-            setTimeout(
-                function() {
-                    if($.fullscreen.isFullScreen()){
-                        $.fullscreen.exit();
-                    }else{
-                        fullScreenElement.fullscreen({overflow: 'overflow-y', toggleClass: config.fullScreenClass});

-                    }
-                }, 400);

            return false;
        });

+        // update header links with current map data
+        $(document).on('pf:updateHeaderData', function(e, data){
+            var activeMap = $('#' + config.mapModuleId).getActiveMap();
+
+            var userCount = 0;
+            var currentLocationData = {};
+
+            // show active user just for the current active map
+            if(
+                activeMap &&
+                activeMap.data('id') === data.mapId
+            ){
+                userCount = data.userCount;
+                currentLocationData = data;
+            }
+
+            updateHeaderActiveUserCount(userCount);
+            updateHeaderCurrentLocation(currentLocationData);
+
+        });
+    };
+
+    /**
+     * update the "active user" badge in header
+     * @param userCount
+     */
+    var updateHeaderActiveUserCount = function(userCount){
+        var activeUserElement = $('.' + config.headActiveUserClass);
+        var badge = activeUserElement.find('.badge');
+
+        if(badge.data('userCount') !== userCount){
+            badge.data('userCount', userCount);
+
+            if(userCount > 0){
+                badge.text(userCount);
+                activeUserElement.velocity('fadeIn', {duration: Init.animationSpeed.headerLink});
+            }else{
+                activeUserElement.velocity('reverse');
+            }
+        }
+    };
+
+    /**
+     * update the "current location" element in head
+     * @param locationData
+     */
+    var updateHeaderCurrentLocation = function(locationData){
+        var currentLocationElement = $('.' + config.headCurrentLocationClass);
+        var linkElement = currentLocationElement.find('a');
+        var textElement = linkElement.find('span');
+
+        if(
+            linkElement.data('systemName') !== locationData.currentSystemName
+        ){
+            var tempSystemName = locationData.currentSystemName;
+            var tempSystemId = locationData.currentSystemId;
+            if(
+                tempSystemName === undefined ||
+                tempSystemId === undefined
+            ){
+                tempSystemName = false;
+                tempSystemId = false;
+            }
+
+            linkElement.data('systemName', tempSystemName);
+            linkElement.data('systemId', tempSystemId);
+
+            if(locationData.currentSystemName){
+                textElement.text(locationData.currentSystemName);
+                currentLocationElement.velocity('fadeIn', {duration: Init.animationSpeed.headerLink});
+            }else{
+                currentLocationElement.velocity('reverse');
+            }
+        }
+    };
+
+    /**
+     * shows the add new map dialog
+     */
+    var showNewMapDialog = function(mapData){
+
+        var formData = {};
+
+        requirejs(['text!templates/modules/map_dialog.html', 'lib/mustache'], function(template, Mustache) {
+
+            var data = {
+                id: config.newMapDialogId,
+                scope: config.mapScopes,
+                type: Util.getMapTypes(),
+                icon: Util.getMapIcons(),
+                formData: formData
+            };
+
+            var content = Mustache.render(template, data);
+
+            var dialogTitle = 'New map';
+
+            if(mapData !== false){
+                dialogTitle = 'Edit map';
+                content = $(content);
+                content.find('select[name="icon"]').val( mapData.config.icon );
+                content.find('input[name="name"]').val( mapData.config.name );
+                content.find('select[name="scope"]').val( mapData.config.scope );
+                content.find('select[name="type"]').val( mapData.config.type );
+            }
+
+
+
+            var mapInfoDialog = bootbox.dialog({
+                title: dialogTitle,
+                message: content,
+                buttons: {
+                    close: {
+                        label: 'cancel',
+                        className: 'btn-default'
+                    },
+                    success: {
+                        label: '<i class="fa fa-code-fork fa-fw"></i>add map',
+                        className: 'btn-primary',
+                        callback: function() {
+
+                            // get form Values
+                            var form = $('#' + config.newMapDialogId).find('form');
+                            var newMapData = form.getFormValues();
+
+                            saveMapData(newMapData);
+                        }
+                    }
+                }
+            });
+
+        });
    };

    /**
@@ -475,6 +670,13 @@ define([
                            tempData.push( '' );
                        }

+                        // active pilots
+                        if(tempSystemData.userCount > 0){
+                            tempData.push(tempSystemData.userCount);
+                        }else{
+                            tempData.push( '' );
+                        }
+
                        // type
                        tempData.push(tempSystemData.type);

@@ -548,6 +750,10 @@ define([
                                title: '<i class="fa fa fa-map-marker fa-lg"></i>',
                                width: '15px',
                                searchable: false
+                            },{
+                                title: '<i class="fa fa fa-plane fa-lg"></i>',
+                                width: '18px',
+                                searchable: false
                            },{
                                title: 'type',
                                width: '50px'
@@ -935,5 +1141,62 @@ define([

    };

+    /**
+     * trigger "program status" in head
+     * @param status
+     */
+    $.fn.setProgramStatus = function(status){
+        var statusElement = $('.' + config.headProgramStatusClass);
+        var icon = statusElement.find('i');
+        var textElement = statusElement.find('span');
+
+        var iconClass = false;
+        var textClass = false;
+        var text = '';
+
+        switch(status){
+            case 'online':
+                if( ! statusElement.hasClass('txt-color-green')){
+                    iconClass = 'fa-wifi';
+                    textClass = 'txt-color-green';
+                    text = 'online';
+                }
+                break;
+            case 'problem':
+                if( ! statusElement.hasClass('txt-color-orange')){
+                    iconClass = 'fa-warning';
+                    textClass = 'txt-color-orange';
+                    text = 'problem';
+                }
+                break;
+            case 'offline':
+                if( ! statusElement.hasClass('txt-color-red')){
+                    iconClass = 'fa-bolt';
+                    textClass = 'txt-color-red';
+                    text = 'offline';
+                }
+                break;
+        }
+
+        // change status, on status changed
+        if(iconClass !== false){
+
+            statusElement.velocity('fadeOut', {
+                duration: Init.animationSpeed.headerLink,
+                complete: function(){
+                    statusElement.removeClass('txt-color-green txt-color-orange txt-color-red');
+                    icon.removeClass('fa-wifi fa-warning fa-bolt');
+                    statusElement.addClass(textClass);
+                    icon.addClass(iconClass);
+                    textElement.text(text);
+                }
+            }).velocity('fadeIn', {
+                duration: Init.animationSpeed.headerLink
+            });
+
+        }
+
+    };
+

 });
--- a/js/app/util.js
+++ b/js/app/util.js
@@ -14,10 +14,41 @@ define([
        ajaxOverlayWrapperClass: 'pf-loading-overlay-wrapper',
        ajaxOverlayVisibleClass: 'pf-loading-overlay-visible',

-        formEditableFieldClass: 'pf-editable'                          // Class for all xEditable fields
+        formEditableFieldClass: 'pf-editable',                          // Class for all xEditable fields
+
+        // available map ions
+        mapIcons: [
+            {
+                class: 'fa-desktop',
+                label: 'desktop',
+                unicode: '&#xf108;'
+            },{
+                class: 'fa-bookmark',
+                label: 'bookmark',
+                unicode: '&#xf02e;'
+            },{
+                class: 'fa-cube',
+                label: 'cube',
+                unicode: '&#xf1b2;'
+            },{
+                class: 'fa-plane',
+                label: 'plane',
+                unicode: '&#xf072;'
+            },{
+                class: 'fa-rocket',
+                label: 'rocket',
+                unicode: '&#xf135;'
+            },{
+                class: 'fa-life-ring',
+                label: 'life ring',
+                unicode: '&#xf1cd;'
+            }
+        ]

    };

+
+
    /**
     * displays a loading indicator on an element
     */
@@ -164,6 +195,15 @@ define([

    };

+    /**
+     * get all available map icons
+     * @returns {*}
+     */
+    var getMapIcons = function(){
+
+        return config.mapIcons;
+    };
+
    /**
     * get all available map Types
     * @returns {Array}
@@ -173,12 +213,16 @@ define([
        var mapTypes = [];

        $.each(Init.classes.mapTypes, function(prop, data){
-            var tempData = {
-                type: prop,
-                label: data.label
-            };

-            mapTypes.push(tempData);
+            // skip "default" type -> just for 'add' icon
+            if(data.label.length > 0){
+                var tempData = {
+                    type: prop,
+                    label: data.label
+                };
+
+                mapTypes.push(tempData);
+            }
        });

        return mapTypes;
@@ -499,6 +543,7 @@ define([

    return {
        showNotify: showNotify,
+        getMapIcons: getMapIcons,
        getMapTypes: getMapTypes,
        getInfoForMap: getInfoForMap,
        getMapScopes: getMapScopes,
--- a/js/lib/jquery.ba-throttle-debounce.min.js
+++ b/js/lib/jquery.ba-throttle-debounce.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery throttle / debounce - v1.1 - 3/7/2010
+ * http://benalman.com/projects/jquery-throttle-debounce-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
--- a/js/lib/jquery.dragToSelect.js
+++ b/js/lib/jquery.dragToSelect.js
@@ -332,8 +332,7 @@ jQuery.fn.dragToSelect = function (conf) {
 		parent.disableTextSelect();
 	}

-	parent
-		.mousedown(function (e) {
+	parent.mousedown(function (e) {

            if(
                e.which === 1 && // left mouse down
@@ -352,24 +351,27 @@ jQuery.fn.dragToSelect = function (conf) {
            }


-		})
-		.mousemove(function (e) {
+		});

-            refreshSelectBox(e);
+    var dragSelectMousemove = function (e) {

-			if (config.selectables && config.selectOnMove) {
+        refreshSelectBox(e);

-                selectElementsInRange();
-            }
+        if (config.selectables && config.selectOnMove) {

-			if (config.autoScroll) {
-				scrollPerhaps(e);
-			}
+            selectElementsInRange();
+        }

-			e.preventDefault();
-		})
-		.mouseup(function (e) {
+        if (config.autoScroll) {
+            scrollPerhaps(e);
+        }

+        e.preventDefault();
+    };
+    parent.mousemove($.throttle(30, dragSelectMousemove) );
+
+
+    parent.mouseup(function (e) {
            if (config.selectables) {
 				selectElementsInRange();
 			}
--- a/js/lib/jsPlumb-1.6.4-min.js
+++ b/js/lib/jsPlumb-1.6.4-min.js
--- a/js/lib/velocity.min.js
+++ b/js/lib/velocity.min.js
--- a/node_modules/.bin/build.js
+++ b/node_modules/.bin/build.js
@@ -51,26 +51,26 @@
        //of its dependencies includes i18n bundles, they may not be included in the
        //built file unless the locale: section is set above.
        {
-            name: "app/main",
+            name: 'app/main',
            exclude: [
             //   "jquery",
               // "jsPlumb"
            ]
+        },{
+            name: 'app/notification'
        }
    ],
    paths: {
        layout: 'layout',
        jquery: 'lib/jquery-1.11.1.min',                                // v1.11.1 jQuery
        //jquery: "lib/jquery-2.1.1.min",                               // v2.1.1 jQuery
-        //jqueryUI: "lib/jquery-ui.min",                                // v1.11.2 jQuery UI default
-        //jqueryUI: 'lib/jquery-ui-custom.min',                           // v1.11.2 custom script (without tooltip -> conflict with bootstrap)
        bootstrap: 'lib/bootstrap.min',                                 // v3.3.0 Bootstrap js code - http://getbootstrap.com/javascript/
        text: 'lib/requirejs/text',                                     // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
+        throttleDebounce: 'lib/jquery.ba-throttle-debounce.min',        // v1.1 Handle/throttle jquery events - http://benalman.com/projects/jquery-throttle-debounce-plugin/
+        velocity: 'lib/velocity.min',                                   // v1.2.1 animation engine - http://julian.com/research/velocity/
        templates: '../templates',                                      // template dir
        slidebars: 'lib/slidebars',                                     // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars/
-        // jsPlumb: 'lib/jsPlumb-1.6.4-min',                               // v1.4.6 jsPlumb - main map draw plugin http://www.jsplumb.org/
        jsPlumb: 'lib/dom.jsPlumb-1.7.2-min',                           // v1.7.2 jsPlumb (Vanilla)- main map draw plugin http://www.jsplumb.org/
-
        customScrollbar: 'lib/jquery.mCustomScrollbar.concat.min',      // v3.1.11 Custom scroll bars - http://manos.malihu.gr/
        datatables: 'lib/jquery.dataTables.min',                        // v1.10.3 DataTables - tables
        datatablesBootstrap: 'lib/dataTables.bootstrap',                // DataTables - not used (bootstrap style)
@@ -81,6 +81,8 @@
        easyPieChart: 'lib/jquery.easypiechart.min',                    // v2.1.6 Easy Pie Chart - HTML 5 pie charts - http://rendro.github.io/easy-pie-chart/
        dragToSelect: 'lib/jquery.dragToSelect',                        // v1.1 Drag to Select - http://andreaslagerkvist.com/jquery/drag-to-select/
        hoverIntent: 'lib/jquery.hoverIntent.minified',                 // v1.8.0 Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
+        fullScreen: 'lib/jquery.fullscreen.min',                        // v0.5.0 Full screen mode - https://github.com/private-face/jquery.fullscreen
+


        pnotify: 'lib/pnotify/pnotify.core',                            // v2.0.1 PNotify - notification core file
@@ -94,11 +96,13 @@

    },
    shim: {
-        jqueryUI: {
-            export: '$',
+        bootstrap: {
            deps: ['jquery']
        },
-        bootstrap: {
+        velocity: {
+            deps: ['jquery']
+        },
+        throttleDebounce: {
            deps: ['jquery']
        },
        slidebars: {
@@ -136,8 +140,8 @@
        hoverIntent: {
            deps : ['jquery']
        },
-        fontDetect: {
-            export : 'FontDetect'
+        fullScreen: {
+            deps : ['jquery']
        }
    },

--- a/node_modules/.bin/readme.txt
+++ b/node_modules/.bin/readme.txt
@@ -1,3 +1,3 @@
- requireJS optimizer in diesem ordner starten:
+- requireJS optimizer start in this dir:

 node r.js -o build.js
--- a/sass/bootstrap/_navbar.scss
+++ b/sass/bootstrap/_navbar.scss
@@ -250,7 +250,7 @@
  }

  // Uncollapse the nav
-  @media (min-width: $grid-float-breakpoint) {
+ //  @media (min-width: $grid-float-breakpoint) {
    float: left;
    margin: 0;

@@ -266,7 +266,7 @@
    &.navbar-right:last-child {
      margin-right: -$navbar-padding-horizontal;
    }
-  }
+ //  }
 }


--- a/sass/layout/_dialogs.scss
+++ b/sass/layout/_dialogs.scss
@@ -1,4 +1,8 @@

+// map add dialog =========================================
+
+
+
 // map manual dialog ======================================
 #pf-manual-scrollspy{
  position: relative;
--- a/sass/layout/_main.scss
+++ b/sass/layout/_main.scss
@@ -1,3 +1,13 @@
+body{
+  // prevent marking text
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+

 a{
  color: $teal-dark;
@@ -18,6 +28,7 @@ em{
 }

 // full screen view of an element
+/*
 .pf-fullscreen{

  &:fullscreen, &:-webkit-full-screen, {
@@ -33,6 +44,7 @@ em{
    background-color: green;
  }
 }
+*/

 // ajax laoding indicator overlay

@@ -331,7 +343,14 @@ em{

  &.pf-map-connection-jumpbridge{
    background-color: $teal-light;
-    border-color: $teal-light;
+    border-color: $gray;
+    background: repeating-linear-gradient(
+        to right,
+        $teal-light,
+        $teal-light 10px,
+        $gray 10px,
+        $gray 20px
+    );
  }

  &.pf-map-connection-wh-eol{
@@ -411,11 +430,24 @@ em{
 #pf-head{

  a{
+
+    &:focus{
+      color: $teal-dark;
+    }
+
    &:hover{
      text-decoration: none;
+
+      .badge{
+        color: $teal-light;
+      }
    }
  }

+  i{
+    margin-right: 2px;
+  }
+
  .pf-head-menu{
    .pf-head-menu-logo{
      width: 18px;
@@ -435,6 +467,15 @@ em{

  }

+  .badge{
+    background-color: $gray;
+    color: $gray-lighter;
+  }
+
+  .pf-head-active-user, .pf-head-current-location{
+    display: none; // triggered by js
+  }
+
 }

 // footer =======================================================
--- a/sass/layout/_map.scss
+++ b/sass/layout/_map.scss
@@ -1,10 +1,14 @@

+$mapHeight: 520px;
+$mapWidth: 2500px;
+
+
 // start bounce mixin ==============================================

@mixin bounce-up-down{

-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
+  @include animation-duration( 1s);
+  @include animation-delay(1s);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
@@ -18,14 +22,14 @@

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
-  40% {-webkit-transform: translateY(-10px);}
-  60% {-webkit-transform: translateY(-5px);}
+  40% {-webkit-transform: translateY(-8px);}
+  60% {-webkit-transform: translateY(-4px);}
 }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
-  40% {transform: translateY(-10px);}
-  60% {transform: translateY(-5px);}
+  40% {transform: translateY(-8px);}
+  60% {transform: translateY(-4px);}
 }

 // end bounce mixin ================================================
@@ -35,7 +39,8 @@
  .pf-map-wrapper{
    position: relative;
    width: 100%;
-    height: 530px;
+    max-width: $mapWidth + 15px;
+    height: $mapHeight + 30px;
    overflow: auto;
    padding: 5px;
    background: rgba($gray-darker, 0.93);
@@ -63,16 +68,50 @@

 // 20x20px grid background
 .pf-grid-small{
-  background: inline-image("#{$base-url}/grid_20x20.png") !important;
+  background: inline-image("#{$base-url}/grid_40x40.png") !important;
 }


 .pf-map{
-  width: 2000px;
-  height: 500px;
+  width: $mapWidth;
+  height: $mapHeight;
  position: relative;
  font-family: $font-family-bold;

+  // jsPlumb classes =================================================
+  ._jsPlumb_target, ._jsPlumb_source{
+
+  }
+
+  ._jsPlumb_overlay{
+    opacity: 1;
+    @include transition-property(opacity);
+    @include transition-duration(0.1s);
+    @include transition-timing-function(ease-in);
+  }
+
+  
+
+  // hover effect for connections
+  ._jsPlumb_hover{
+
+    &._jsPlumb_overlay{      
+      opacity: 0; // hide opacity on hover
+    }    
+
+    &:not(._jsPlumb_overlay){
+      @include bounce-up-down; // label should not bounce
+    }
+  }
+
+  // hover effect for systems
+  ._jsPlumb_target_hover, ._jsPlumb_source_hover{
+    @include bounce-up-down;
+    @include box-shadow(0 6px 12px rgba(0,0,0,.3));
+  }
+
+  // =================================================================
+
  .pf-system{
    position: absolute;
    min-width: 60px;
@@ -81,7 +120,15 @@
    font-family: $font-family-bold;
    z-index: 100;

-    //@include bounce-up-down;
+    // change border color with transition
+    @include transition( border-color 0.5s ease-out, box-shadow 0.2s ease-out );
+    @include transform( translate3d(0, 0, 0) );
+
+    &:hover{
+      // makes the systems "flying" :)
+      @include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
+      @include transform( translate3d(0, -2px, 0) );
+    }

    @include border-radius(5px);
    border: {
@@ -118,7 +165,7 @@
    // ===============================================================

    .pf-system-body{
-      height: 16px;
+      height: 0px;
      width: 100%;
      overflow: hidden;
      cursor: -moz-grab;
@@ -143,6 +190,7 @@
        font-size: 10px;

        .pf-system-body-right{
+          text-overflow: ellipsis;
          float: right;
          color: $teal;
          display: none; // hover effect
@@ -200,7 +248,6 @@

  // locked system
  .pf-system-locked{
-    color: $gray-light;

    .pf-system-sec{
      cursor: default !important;
@@ -211,6 +258,7 @@
    }

    .fa-lock{
+      color: $gray-light !important;
      display: inline-block !important;
    }
  }
@@ -243,6 +291,11 @@
    cursor: pointer;
    stroke-linecap: round; // line endings

+    path{
+      transition-property: stroke;
+      transition-duration: 0.3s;
+    }
+
    path:not(:first-child){
      stroke: $gray; // inner line
    }
@@ -278,7 +331,7 @@
  svg.pf-map-connection-jumpbridge {

    path:first-child{
-      stroke: $teal;
+      stroke: rgba(255,255,255,0);  // invisible border color
    }

    path:not(:first-child){
@@ -287,6 +340,10 @@

    &:hover{
      path:first-child{
+        stroke: rgba(255,255,255,0);  // invisible border color
+      }
+
+      path:not(:first-child){
        stroke: $gray-lightest;
      }
    }
@@ -304,7 +361,7 @@

    &:hover{
      path:first-child{
-        stroke: $pink;
+        stroke: $gray-lightest;
      }
    }
  }
--- a/sass/smartadmin/_main-colorpallet.scss
+++ b/sass/smartadmin/_main-colorpallet.scss
@@ -4,7 +4,7 @@
 */
 .txt-color {
  &.txt-color-blue          { color: $blue !important; }
-  &.txt-color-blueLight     { color:$blueLight !important; }
+  &.txt-color-blueLight     { color: $blueLight !important; }
  &.txt-color-blueDark      { color: $blueDark !important; }
  &.txt-color-grayLightest  { color: $gray-lightest !important; }
  &.txt-color-gray          { color: $gray !important; }
@@ -14,7 +14,7 @@
  &.txt-color-greenDark     { color: $greenDark  !important; }
  &.txt-color-red           { color: $red !important; }
  &.txt-color-yellow        { color: $yellow !important; }
-  &.txt-color-orange        { color: #b19a6b !important; }
+  &.txt-color-orange        { color: $orange !important; }
  &.txt-color-orangeDark    { color: $orangeDark !important; }
  &.txt-color-pink          { color: $pink !important; }
  &.txt-color-pinkDark      { color: $pinkDark !important; }
--- a/sass/smartadmin/_main.scss
+++ b/sass/smartadmin/_main.scss
@@ -1047,6 +1047,8 @@ input[type="text"]:focus + .input-group-addon {
  &:hover{
    color: $gray-darkest;
    border-color: transparent transparent $gray-lighter transparent;
+    margin-top: 1px;
+    border-top-width: 0;
  }
 }
 .nav-tabs > li.active > a {
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -5,15 +5,26 @@
            <a class="navbar-brand pf-head-menu" href="#">
                <div class={{brandLogo}}></div>&nbsp;&nbsp;Menu
            </a>
+            <p class="navbar-text"><i class="fa fa-user fa-fw"></i>{{userName}}</p>
+
+            <p class="navbar-text pf-head-active-user">
+                <a href="javascript:void(0);" title="active Pilots">
+                    <i class="fa fa-plane fa-fw"></i>active&nbsp;&nbsp;<span class="badge"></span>
+                </a>
+            </p>

        </div>

        <div class="navbar-header pull-right">
-            <p class="navbar-text"><i class="fa fa-user fa-fw"></i> {{userName}}</p>
-            <p class="navbar-text"><a href="#"><i class="fa fa-map-marker fa-fw"></i> J155207</a></p>
-            <p class="navbar-text txt-color txt-color-green">
-                <i class="fa fa-refresh">&nbsp;</i>
-                active&nbsp;&nbsp;<span class="badge">4</span></p>
+            <p class="navbar-text txt-color txt-color-red pf-head-program-status" title="connection status">
+                <i class="fa fa-fw fa-bolt"></i>
+                <span>offline</span>
+            </p>
+            <p class="navbar-text pf-head-current-location">
+                <a href="javascript:void(0);" title="current location">
+                    <i class="fa fa-map-marker fa-fw"></i><span></span>
+                </a>
+            </p>
            <a class="navbar-brand pf-head-map" href="#">
                &nbsp;&nbsp;Map&nbsp;<i class="fa fa-code-fork fa-lg fa-fw"></i>
            </a>
--- a/templates/modules/map_dialog.html
+++ b/templates/modules/map_dialog.html
@@ -1,37 +1,36 @@
-<div id="{{id}}" title="{{title}}">
-    <form>
-        <fieldset>
-            <div>
-                <label for="name">Name</label>
-                <input type="text" name="name" id="name" value="{{name}}">
+<div id="{{id}}">
+    <form class="form-horizontal">
+        <div class="form-group">
+            <label for="icon" class="col-sm-2 control-label">Icon</label>
+            <div class="col-sm-2">
+                <select style="font-family: FontAwesome" name="icon" id="icon" class="form-control">
+                    {{#icon}}
+                    <option value="{{class}}">{{{unicode}}}</option>
+                    {{/icon}}
+                </select>
            </div>
-            <div>
-                <label for="scope">Scope</label>
-                <select name="scope" id="scope" class="text ui-widget-content ui-corner-all">
+            <label for="name" class="col-sm-1 control-label">Map</label>
+            <div class="col-sm-7">
+                <input name="name" type="text" class="form-control" id="name" value="{{formData.name}}" placeholder="Name">
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="scope" class="col-sm-2 control-label">Scope</label>
+            <div class="col-sm-4">
+                <select name="scope" id="scope" class="form-control">
                    {{#scope}}
                    <option value="{{scope}}">{{label}}</option>
                    {{/scope}}
                </select>
            </div>
-            <div>
-                <label for="type">Type</label>
-                <select name="type" id="type" class="text ui-widget-content ui-corner-all">
+            <label for="type" class="col-sm-1 control-label">Type</label>
+            <div class="col-sm-5">
+                <select name="type" id="type" class="form-control">
                    {{#type}}
                    <option value="{{type}}">{{label}}</option>
                    {{/type}}
                </select>
            </div>
-            <div>
-                <label for="icon">Icon</label>
-                <select name="icon" id="icon" class="text ui-widget-content ui-corner-all">
-                    {{#icon}}
-                    <option value="{{class}}">{{label}}</option>
-                    {{/icon}}
-                </select>
-            </div>
-
-            <!-- Allow form submission with keyboard without duplicating the dialog button -->
-            <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
-        </fieldset>
+        </div>
    </form>
 </div>