define([
    'jquery',
    'app/init',
    'app/util',
    'app/map/map',
    'app/map/util',
    'app/lib/eventHandler',
    'sortable',
    'module/base',
    'module/system_info',
    'module/system_graph',
    'module/system_signature',
    'module/system_route',
    'module/system_intel',
    'module/system_killboard',
    'module/global_thera',
    'module/connection_info',
    'app/counter'
], (
    $,
    Init,
    Util,
    Map,
    MapUtil,
    EventHandler,
    Sortable,
    BaseModule,
    SystemInfoModule,
    SystemGraphModule,
    SystemSignatureModule,
    SystemRouteModule,
    SystemIntelModule,
    SystemKillboardModule,
    TheraModule,
    ConnectionInfoModule
) => {
    'use strict';

    let config = {
        mapTabElementId: 'pf-map-tab-element',                                  // id for map tab element (tabs + content)
        mapTabIdPrefix: 'pf-map-tab-',                                          // id prefix for a map tab
        mapTabClass: 'pf-map-tab',                                              // class for a map tab
        mapTabIconClass: 'pf-map-tab-icon',                                     // class for map icon
        mapTabLinkTextClass: 'nav-tabs-link',                                   // class for span elements in a tab
        mapTabSharedIconClass: 'pf-map-tab-shared-icon',                        // class for map shared icon
        mapTabContentWrapperClass: 'pf-map-tab-content-wrapper',                // class for map tab content wrapper

        // module
        moduleClass: 'pf-module',                                               // class for a module
        moduleSpacerClass: 'pf-module-spacer',                                  // class for "spacer" module (preserves height during hide/show animation)
        moduleCollapsedClass: 'collapsed',                                      // class for a collapsed module

        // sortable
        sortableHandleClass: 'pf-sortable-handle',
        sortableDropzoneClass: 'pf-sortable-dropzone',
        sortableGhostClass: 'pf-sortable-ghost',
        sortableChosenClass: 'pf-sortable-chosen',

        // editable 'settings' popover
        editableSettingsClass: 'pf-editable-settings',
        editableHeadlineClass: 'pf-editable-headline',
        editableToggleClass: 'pf-editable-toggle',
        editableToggleItemClass: 'pf-editable-toggle-item',

        mapTabContentLayoutOptions: ['left', 'right'],
        defaultMapTabContentLayout: 'right',
    };

    let mapTabChangeBlocked = false;                                            // flag for preventing map tab switch

    /**
     * get the current active mapElement
     * @returns {bool|jQuery}
     */
    $.fn.getActiveMap = function(){
        let map = $(this).find('.active.' + Util.config.mapTabContentClass + ' .' + Util.config.mapClass);
        if(!map.length){
            map = false;
        }
        return map;
    };

    /**
     * set map tab content wrapper observer.
     * -> Events are triggered within map.js
     * @param tabContentWrapperEl
     */
    let setMapTabContentWrapperObserver = tabContentWrapperEl => {
        $(tabContentWrapperEl).on('pf:renderGlobalModules', `.${Util.config.mapTabContentClass}`, function(e, data){
            getModules()
                .then(modules => filterModules(modules, 'global'))
                .then(modules => renderModules(modules, e.target, data));
        });

        $(tabContentWrapperEl).on('pf:renderSystemModules', `.${Util.config.mapTabContentClass}`, function(e, data){
            getModules()
                .then(modules => filterModules(modules, 'system'))
                .then(modules => renderModules(modules, e.target, data));
        });

        $(tabContentWrapperEl).on('pf:removeSystemModules', `.${Util.config.mapTabContentClass}`, e => {
            getModules()
                .then(modules => filterModules(modules, 'system'))
                .then(modules => removeModules(modules, e.target));
        });

        $(tabContentWrapperEl).on('pf:renderConnectionModules', `.${Util.config.mapTabContentClass}`, (e, data) => {
            getModules()
                .then(modules => filterModules(modules, 'connection'))
                .then(modules => renderModules(modules, e.target, data));
        });

        $(tabContentWrapperEl).on('pf:removeConnectionModules', `.${Util.config.mapTabContentClass}`, e => {
            getModules()
                .then(modules => filterModules(modules, 'connection'))
                .then(modules => removeModules(modules, e.target));
        });

        $(tabContentWrapperEl).on('pf:updateGlobalModules', `.${Util.config.mapTabContentClass}`, (e, data) => {
            getModules()
                .then(modules => filterModules(modules, 'global'))
                .then(modules => updateModules(modules, e.target, data));
        });

        $(tabContentWrapperEl).on('pf:updateSystemModules', `.${Util.config.mapTabContentClass}`, (e, data) => {
            getModules()
                .then(modules => filterModules(modules, true, 'fullDataUpdate'))
                .then(modules => updateModules(modules, e.target, data));
        });

        $(tabContentWrapperEl).on('pf:updateRouteModules', `.${Util.config.mapTabContentClass}`, (e, data) => {
            getModules()
                .then(modules => filterModules(modules, 'SystemRouteModule', 'name'))
                .then(modules => updateModules(modules, e.target, data));
        });
    };

    /**
     * get/load module classes
     * -> default modules + custom plugin modules
     * @returns {Promise<any>}
     */
    let getModules = () => {
        return new Promise(resolve => {
            let modules = [
                SystemInfoModule,
                SystemGraphModule,
                SystemSignatureModule,
                SystemRouteModule,
                SystemIntelModule,
                SystemKillboardModule,
                TheraModule,
                ConnectionInfoModule
            ];

            // try to load custom plugin modules (see: plugin.ihi)
            let pluginModulesConfig = Util.getObjVal(Init, 'plugin.modules');
            if(pluginModulesConfig === Object(pluginModulesConfig)){
                requirejs(Object.values(pluginModulesConfig), (...pluginModules) => {
                    modules.push(...pluginModules);
                    resolve(modules);
                }, err => {
                    console.error(err.message);
                    resolve(modules);
                });
            }else{
                // custom plugins disabled
                resolve(modules);
            }
        });
    };

    /**
     * filer array of module classes by property filterVal(s)
     * @param modules
     * @param filterVal
     * @param filterProp
     * @returns BaseModule[]
     */
    let filterModules = (modules, filterVal = false, filterProp = 'scope') => modules.filter(Module =>
        filterVal ?
            (
                Array.isArray(filterVal) ?
                    filterVal.includes(Module[filterProp]) :
                    Module[filterProp] === filterVal
            ) :
            true
    );

    /**
     * @param modules
     * @param tabContentElement
     * @param data
     * @returns {PromiseLike<any[]> | Promise<any[]> | *}
     */
    let renderModules = (modules, tabContentElement, data) => {
        /**
         * @param dataStore
         * @returns {Promise<any[]>}
         */
        let render = dataStore => {
            let promiseRenderAll = [];
            for(let Module of modules){
                let defaultGridArea = Module.sortArea || 'a';
                let defaultPosition = Module.position || 0;

                for(let areaAlias of Util.config.mapTabContentAreaAliases){
                    let key = 'modules_area_' + areaAlias;
                    if(dataStore && dataStore[key]){
                        let positionIndex = dataStore[key].indexOf(Module.name);
                        if(positionIndex !== -1){
                            // first index (0) => is position 1
                            defaultPosition = positionIndex + 1;
                            defaultGridArea = areaAlias;
                            break;
                        }
                    }
                }

                // check if gridArea exists
                let gridArea = tabContentElement.getElementsByClassName(Util.getMapTabContentAreaClass(defaultGridArea));
                if(gridArea.length){
                    gridArea = gridArea[0];
                    promiseRenderAll.push(renderModule(Module, gridArea, defaultPosition, data.mapId, data.payload));
                }else{
                    console.warn(
                        'renderModules() failed for %o. GridArea class=%o not found',
                        Module.name,
                        Util.getMapTabContentAreaClass(defaultGridArea)
                    );
                }
            }

            return Promise.all(promiseRenderAll);
        };

        let renderModulesAndUpdateExecutor = resolve => {
            // get local data for map
            // -> filter out disabled modules
            // -> get default module positions
            Util.getLocalStore('map').getItem(data.mapId).then(dataStore => {
                // filter disabled modules (layout settings)
                let modulesDisabled = Util.getObjVal(dataStore, 'modulesDisabled') || [];
                modules = modules.filter(Module => !modulesDisabled.includes(Module.name));

                // check if modules require "additional" data (e.g. structures, description)
                // -> this is used to update some modules after initial draw
                let requestSystemData = false;
                for(let Module of modules){
                    if(Module.scope === 'system' && Module.fullDataUpdate){
                        requestSystemData = true;
                    }
                }

                let renderPromises = [];
                if(requestSystemData){
                    renderPromises.push(Util.request('GET', 'system', data.payload.id, {mapId: data.mapId}));
                }
                renderPromises.push(render(dataStore));

                Promise.all(renderPromises)
                    .then(payload => {
                        let promiseUpdateAll = [];

                        let systemData;
                        if(requestSystemData){
                            // get systemData from first Promise (ajax call)
                            let responseData = payload.shift();
                            systemData = Util.getObjVal(responseData, 'data');
                        }

                        if(systemData){
                            // get all rendered modules
                            let modules = payload.shift().map(payload => payload.data.module);

                            // get modules that require "additional" data
                            let systemModules = modules.filter(Module => Module.scope === 'system' && Module.fullDataUpdate);
                            promiseUpdateAll.push(updateModules(systemModules, tabContentElement, {
                                payload: systemData
                            }));
                        }

                        Promise.all(promiseUpdateAll).then(payload => resolve(payload));
                    });
            });
        };

        return new Promise(renderModulesAndUpdateExecutor);
    };

    /**
     * @param Module
     * @param gridArea
     * @param defaultPosition
     * @param mapId
     * @param payload
     * @returns {Promise}
     */
    let renderModule = (Module, gridArea, defaultPosition, mapId, payload) => {
        let renderModuleExecutor = (resolve, reject) => {

            /**
             * remove "Spacer" Module
             * @param gridArea
             * @param Module
             */
            let removeSpacerModule = (gridArea, Module) => {
                for(let spacerEl of gridArea.querySelectorAll('.' + Module.className + '-spacer[data-module="' +  Module.name + '"]')){
                    spacerEl.remove();
                }
            };

            /**
             * render module
             * @param Module
             * @param gridArea
             * @param defaultPosition
             * @param mapId
             * @param payload
             */
            let render = (Module, gridArea, defaultPosition, mapId, payload) => {
                let payBack = {
                    action: 'renderModule',
                    data: {
                        module: Module
                    }
                };

                // hide "spacer" Module (in case it exist)
                // -> Must be done BEFORE position calculation! Spacer Modules should not be counted!
                removeSpacerModule(gridArea, Module);

                let module = new Module({
                    position: defaultPosition
                });

                let moduleElement = module.handle('render', mapId, payload);

                if(!(moduleElement instanceof HTMLElement)){
                    // module should not be rendered
                    resolve(payBack);
                    return;
                }

                // find correct position for new moduleElement
                let position = getModulePosition(gridArea, '.' + Module.className, defaultPosition);

                // insert at correct position
                // -> no :nth-child or :nth-of-type here because there might be temporary "spacer" div "modules"
                // that should be ignored for positioning
                let prevModuleElement = [...gridArea.getElementsByClassName(Module.className)].find((el, i) => ++i === position);
                if(prevModuleElement){
                    prevModuleElement.insertAdjacentElement('afterend', moduleElement);
                }else{
                    gridArea.prepend(moduleElement);
                }

                // show animation -------------------------------------------------------------------------------------
                $(moduleElement).velocity({
                    opacity: [1, 0],
                    translateY: [0, +20],
                    translateZ: 0 // Force HA by animating a 3D property
                }, {
                    duration: Init.animationSpeed.mapModule,
                    easing: 'easeOutSine',
                    complete: moduleElement => {
                        moduleElement[0].getData('module').handle('init');
                        resolve(payBack);
                    }
                });
            };

            removeModule(Module, gridArea, false).then(abc => render(Module, gridArea, defaultPosition, mapId, payload));
        };

        return new Promise(renderModuleExecutor);
    };

    /**
     * update multiple modules
     * @param modules
     * @param tabContentElement
     * @param data
     * @returns {Promise}
     */
    let updateModules = (modules, tabContentElement, data) => {
        let promiseUpdateAll = [];
        for(let Module of modules){
            promiseUpdateAll.push(updateModule(Module, tabContentElement, data.payload));
        }
        return Promise.all(promiseUpdateAll);
    };

    /**
     * update module
     * @param Module
     * @param parentElement
     * @param payload
     * @returns {Promise}
     */
    let updateModule = (Module, parentElement, payload) => {
        let updateModuleExecutor = resolve => {
            let promiseUpdateAll = [];
            let moduleElements = parentElement.querySelectorAll('.' + Module.className + '[data-module="' +  Module.name + '"]');
            for(let moduleElement of moduleElements){
                promiseUpdateAll.push(moduleElement.getData('module').handle('update', payload));
            }
            Promise.all(promiseUpdateAll).then(payload => resolve(payload));
        };

        return new Promise(updateModuleExecutor);
    };

    /**
     * remove multiple modules
     * @param modules
     * @param tabContentElement
     * @returns {Promise}
     */
    let removeModules = (modules, tabContentElement) => {
        let promiseRemoveAll = [];
        for(let Module of modules){
            promiseRemoveAll.push(removeModule(Module, tabContentElement));
        }
        return Promise.all(promiseRemoveAll);
    };

    /**
     * remove module
     * @param Module
     * @param parentElement
     * @param addSpacer
     * @returns {Promise}
     */
    let removeModule = (Module, parentElement, addSpacer = false) => {

        let removeModuleElement = moduleElement => {
            let removeModuleElementExecutor = (resolve, reject) => {
                let payload = {
                    action: 'removeModule',
                    data: {}
                };

                // get module instance
                let module = moduleElement.getData('module');
                if(module instanceof BaseModule){
                    module.handle('beforeHide');

                    $(moduleElement).velocity('reverse', {
                        complete: moduleElement => {
                            moduleElement = moduleElement[0];
                            let module = moduleElement.getData('module');
                            module.handle('beforeDestroy');

                            // [optional] add a "spacer" <div> that fakes Module height during hide->show animation
                            if(addSpacer){
                                let spacerEl = document.createElement('div');
                                spacerEl.classList.add(Module.className + '-spacer');
                                spacerEl.setAttribute('data-module', Module.name);
                                spacerEl.style.height = moduleElement.offsetHeight + 'px';

                                moduleElement.insertAdjacentElement('afterend', spacerEl);
                            }

                            moduleElement.remove();

                            resolve(payload);
                        }
                    });
                }else{
                    console.warn('Invalid module. Instance of %O expected for %o', BaseModule, moduleElement);
                    resolve(payload);
                }
            };

            return new Promise(removeModuleElementExecutor);
        };

        let removeModuleExecutor = resolve => {
            let promiseRemoveAll = [];
            let moduleElements = parentElement.querySelectorAll('.' + Module.className + '[data-module="' +  Module.name + '"]');
            for(let moduleElement of moduleElements){
                promiseRemoveAll.push(removeModuleElement(moduleElement));
            }
            Promise.all(promiseRemoveAll).then(payload => resolve(payload));
        };

        return new Promise(removeModuleExecutor);
    };

    /**
     * updates current visible/active mapElement in mapModule with user data
     * @param mapModule
     * @returns {Promise<any>}
     */
    let updateActiveMapUserData = mapModule => new Promise(resolve => {
        // get all active map elements for module
        let mapElement = $(mapModule).getActiveMap();
        updateMapUserData(mapElement).then(() => resolve());
    });

    /**
     * updates mapElement with user data
     * update
     * @param mapElement
     * @returns {Promise<any>}
     */
    let updateMapUserData = mapElement => {
        // performance logging (time measurement)
        let logKeyClientUserData = Init.performanceLogging.keyClientUserData;
        Util.timeStart(logKeyClientUserData);

        let updateMapUserDataExecutor = resolve => {
            if(mapElement !== false){
                let mapId = mapElement.data('id');
                let currentMapUserData = Util.getCurrentMapUserData(mapId);

                if(currentMapUserData){
                    // trigger "update local" for this map => async
                    mapElement.trigger('pf:updateLocal', currentMapUserData);

                    // update map with current user data
                    Map.updateUserData(mapElement, currentMapUserData);
                }
            }

            resolve();
        };

        return new Promise(updateMapUserDataExecutor).then(payload => {
            // log client map update time
            let duration = Util.timeStop(logKeyClientUserData);
            Util.log(logKeyClientUserData, {duration: duration, type: 'client', description: 'update users'});
        });
    };

    /**
     * update active system modules (below map)
     * @param mapModule
     * @param systemData
     */
    let updateSystemModulesData = (mapModule, systemData) => {
        if(systemData){
            // check if current open system is still the requested info system
            let currentSystemData = Util.getCurrentSystemData(systemData.mapId);

            if(
                currentSystemData &&
                systemData.id === currentSystemData.id
            ){
                // trigger system update events
                let tabContentEl = document.getElementById(config.mapTabIdPrefix + systemData.mapId);
                $(tabContentEl).trigger('pf:updateSystemModules', {
                    payload: systemData
                });
            }
        }
    };

    /**
     * set observer for tab content (areas where modules will be shown)
     * @param tabContent
     * @param mapId
     */
    let setTabContentObserver = (tabContent, mapId) => {

        let defaultSortableOptions = {
            invertSwap: true,
            animation: Init.animationSpeed.mapModule,
            handle: '.' + config.sortableHandleClass,
            draggable: '.' + config.moduleClass,
            ghostClass: config.sortableGhostClass,
            chosenClass: config.sortableChosenClass,
            scroll: true,
            scrollSensitivity: 50,
            scrollSpeed: 20,
            dataIdAttr: 'data-module',
            sort: true,
            store: {
                get: function(sortable){
                    return [];
                },
                set: function(sortable){
                    // function is called to frequently for different "groups"
                    // if an element moved between groups -> async local store can not handle this in time
                    // -> queue up store calls
                    let key = 'modules_' + sortable.options.group.name;
                    Util.getLocalStore('map').setItem(`${mapId}.${key}`, sortable.toArray());
                }
            },
            onStart: function(e){
                // Element dragging started
                // -> save initial sort state -> see store.set()
                this.save();

                // highlight valid grid areas where module could be dropped
                let module = e.item.getData('module');
                let sortTargetAreas = module.config.sortTargetAreas || [];

                tabContent.querySelectorAll('.' + Util.getMapTabContentAreaClass()).forEach(gridArea => {
                    if(sortTargetAreas.includes(gridArea.getAttribute('data-area'))){
                        gridArea.classList.add(config.sortableDropzoneClass);
                    }else{
                        gridArea.classList.remove(config.sortableDropzoneClass);
                    }
                });
            },
            onEnd: function(e){
                // remove highlight grid areas
                tabContent.querySelectorAll('.' + Util.getMapTabContentAreaClass()).forEach(gridArea => {
                    gridArea.classList.remove(config.sortableDropzoneClass);
                });
            }
        };

        [
            'onChoose',
            'onStart',
            'onEnd',
            'onAdd',
            'onUpdate',
            'onSort',
            'onRemove',
            'onChange',
            'onUnchoose',
            //'onMove'
        ].forEach(name => {
            defaultSortableOptions[name] = function(e){
                // onMove is the only event where e.item does not exist
                // -> e.related is the element that is moved by the dragged one
                let target = e.item || e.related;
                let module = target.getData('module');

                switch(name){
                    case 'onStart':
                        // Element dragging started
                        // -> save initial sort state -> see store.set()
                        this.save();

                        // highlight valid grid areas where module could be dropped
                        let sortTargetAreas = module.config.sortTargetAreas || [];
                        tabContent.querySelectorAll('.' + Util.getMapTabContentAreaClass()).forEach(gridArea => {
                            if(sortTargetAreas.includes(gridArea.getAttribute('data-area'))){
                                gridArea.classList.add(config.sortableDropzoneClass);
                            }else{
                                gridArea.classList.remove(config.sortableDropzoneClass);
                            }
                        });
                        break;
                    case 'onEnd':
                        // remove highlight grid areas
                        tabContent.querySelectorAll('.' + Util.getMapTabContentAreaClass()).forEach(gridArea => {
                            gridArea.classList.remove(config.sortableDropzoneClass);
                        });
                        break;

                }
                // pipe events to module
                module.handle('onSortableEvent', name, e);
            };
        });

        /**
         * sortable map modules
         */
        tabContent.querySelectorAll('.' + Util.getMapTabContentAreaClass()).forEach(gridArea => {

            let sortable = Sortable.create(gridArea, Object.assign({}, defaultSortableOptions, {
                group: {
                    name: 'area_' + gridArea.getAttribute('data-area'),
                    pull: (to, from, dragEl, e) => {
                        // set allowed droppable target areas for module
                        let module = dragEl.getData('module');
                        return (module.config.sortTargetAreas || []).map(area => 'area_' + area);
                    },
                    put: (to, from, dragEl, e) => {
                        return true;
                    }
                }
            }));
        });

        /**
         * toggle module height
         * @param e
         */
        let toggleModuleHeight = e => {
            if(
                e.target.classList.contains(config.moduleClass) &&
                e.layerX <= 9 && e.layerY <= 9 && e.layerX >= 0 && e.layerY >= 0
            ){
                e.stopPropagation();
                let moduleElement = e.target;

                // remember height
                if(!moduleElement.dataset.origHeight){
                    moduleElement.dataset.origHeight = moduleElement.offsetHeight;
                }

                if(moduleElement.classList.contains(config.moduleCollapsedClass)){
                    $(moduleElement).velocity('finish').velocity({
                        height: [moduleElement.dataset.origHeight + 'px', [400, 15]]
                    },{
                        duration: 400,
                        easing: 'easeOutSine',
                        complete: moduleElement => {
                            moduleElement[0].classList.remove(config.moduleCollapsedClass);
                            delete moduleElement[0].dataset.origHeight;
                            moduleElement[0].style.height = null;
                        }
                    });
                }else{
                    $(moduleElement).velocity('finish').velocity({
                        height: ['38px', [400, 15]]
                    },{
                        duration: 400,
                        easing: 'easeOutSine',
                        complete: moduleElement => {
                            moduleElement[0].classList.add(config.moduleCollapsedClass);
                        }
                    });
                }
            }
        };

        EventHandler.addEventListener(tabContent, 'click.toggleModuleHeight', toggleModuleHeight, {passive: false});
    };

    /**
     * get grid item (area) elements for map tab content
     * @returns {[]}
     */
    let getTabContentAreaElements = () => {
        let gridAreas = [];
        for(let areaAlias of Util.config.mapTabContentAreaAliases){
            let gridArea = document.createElement('div');
            gridArea.classList.add(Util.getMapTabContentAreaClass(), Util.getMapTabContentAreaClass(areaAlias));
            gridArea.setAttribute('data-area', areaAlias);

            gridAreas.push(gridArea);
        }
        return gridAreas;
    };

    /**
     * new tabs element
     * @returns {HTMLDivElement}
     */
    let newMapTabsElement = () => {
        let tabEl = Object.assign(document.createElement('div'), {
            id: config.mapTabElementId
        });

        /**
         * new tabBar element
         * @param options
         * @returns {HTMLUListElement}
         */
        let newTabBar = options => {
            let tabBarEl = document.createElement('ul');
            tabBarEl.id = Util.config.mapTabBarIdPrefix + options.area;
            tabBarEl.dataset.area = options.area;
            tabBarEl.classList.add('nav', 'nav-tabs', Util.config.mapTabBarClass);
            tabBarEl.setAttribute('role', 'tablist');
            return tabBarEl;
        };

        /**
         * new tabContent wrapper element
         * @param options
         * @returns {HTMLDivElement}
         */
        let newTabContentWrapper = options => {
            let tabContentWrapperEl = document.createElement('div');
            tabContentWrapperEl.dataset.target = Util.config.mapTabBarIdPrefix + options.area;
            tabContentWrapperEl.classList.add('tab-content', config.mapTabContentWrapperClass);
            return tabContentWrapperEl;
        };

        let tabBarEls = [
            newTabBar({area: 'left'}),
            //newTabBar({area: 'right'})
        ];

        let tabContentWrapperEls = [
            newTabContentWrapper({area: 'left'}),
            //newTabContentWrapper({area: 'right'})
        ];

        tabEl.append(
            ...tabBarEls,
            ...tabContentWrapperEls
        );
        tabBarEls.forEach(tabBarEl => setMapTabBarObserver(tabBarEl));
        tabContentWrapperEls.forEach(tabContentWrapperEl => setMapTabContentWrapperObserver(tabContentWrapperEl));

        return tabEl;
    };

    /**
     * get module position
     * @param parentElement
     * @param childSelector
     * @param defaultPosition
     * @returns {number}
     */
    let getModulePosition = (parentElement, childSelector, defaultPosition) => {
        let position = 0;
        if(defaultPosition > 0){
            $(parentElement).children(childSelector).each((i, moduleElement) => {
                position = i + 1;
                let tempPosition = parseInt(moduleElement.getAttribute('data-position')) || 0;
                if(tempPosition >= defaultPosition){
                    position--;
                    return false;
                }
            });
        }
        return position;
    };

    /**
     * set map tab bar observer
     * @param tabBarEl
     */
    let setMapTabBarObserver = tabBarEl => {

        // set tab sortable -------------------------------------------------------------------------------------------
        let sortable = Sortable.create(tabBarEl, {
            group: {
                name: 'tabs_' + tabBarEl.dataset.area,
                pull: (to, from, dragEl, e) => {
                    // set allowed droppable target areas for module
                    return ['left', 'right'].map(area => 'tabs_' + area);
                },
                put: (to, from, dragEl, e) => {
                    return true;
                }
            },
            animation: Init.animationSpeed.mapModule,
            handle: '.' + config.sortableHandleClass,
            draggable: '.' + config.mapTabClass + ':not(.noSort)',
            ghostClass: config.sortableGhostClass,
            scroll: false,
            dataIdAttr: 'data-sort-id',
            sort: true,
            direction: 'horizontal',
            store: {
                get: function(sortable){
                    return [];
                },
                set: function(sortable){
                    let key = `map_${sortable.options.group.name}`;
                    Util.getLocalStore('character').setItem(`${Util.getCurrentCharacterId()}.${key}`, sortable.toArray());
                }
            },
            onStart: function(e){
                // Element dragging started
                // -> save initial sort state -> see store.set()
                this.save();

                // highlight dropable tabBarEls areas
                [...document.getElementsByClassName(Util.config.mapTabBarClass)].forEach(tabBarEl => {
                    tabBarEl.classList.add(config.sortableDropzoneClass);
                });
            },
            onEnd: function(e){
                // remove highlight dropable tabBarEls areas
                [...document.getElementsByClassName(Util.config.mapTabBarClass)].forEach(tabBarEl => {
                    tabBarEl.classList.remove(config.sortableDropzoneClass);
                });
            }
        });

        // set tab click ----------------------------------------------------------------------------------------------
        $(tabBarEl).on('click', 'a', e => {
            e.preventDefault();
            // callback function after tab switch
            let switchTabCallback = (mapElement, linkEl) => {
                $(linkEl).tab('show');
                // unfreeze map
                mapElement.data('frozen', false);
                return false;
            };

            let linkEl = e.currentTarget;
            let tabType = linkEl.dataset.tabType;
            let mapId = parseInt(linkEl.dataset.mapId) || 0;

            // ignore "add"/"settings" tab. no need for map change
            if(tabType === 'map' && mapId > 0){
                if(mapTabChangeBlocked === false){
                    let mapElement = $(document.getElementById(config.mapTabElementId)).getActiveMap();

                    if(mapId !== mapElement.data('id')){
                        // block tabs until switch is done
                        mapTabChangeBlocked = true;
                        // freeze active map -> no user data update while map switch
                        mapElement.data('frozen', true);

                        // hide current map with animation
                        MapUtil.visualizeMap(mapElement, 'hide').then(payload => {
                            // un-block map tabs
                            mapTabChangeBlocked = switchTabCallback(mapElement, linkEl);
                        });
                    }
                }
            }else{
                e.stopPropagation();
                if(tabType === 'add'){
                    // "add" tab clicked
                    Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                }else if(tabType === 'settings'){
                    // "settings" tab clicked
                    $(linkEl).editable('show');
                }else{
                    console.error('Invalid tabType = %o for %O', tabType, linkEl);
                }
            }
        });

        // tab switch -------------------------------------------------------------------------------------------------
        $(tabBarEl).on('show.bs.tab', 'a', e => {
            let linkEl = e.currentTarget;
            let tabType = linkEl.dataset.tabType;
            let mapId = parseInt(linkEl.dataset.mapId) || 0;

            if(tabType === 'map' && mapId > 0){
                mapTabOnShow(tabBarEl, mapId);
            }
        });

        $(tabBarEl).on('shown.bs.tab', 'a', function(e){
            // load new map right after tab-change
            let linkEl = e.currentTarget;
            let mapId = parseInt(linkEl.dataset.mapId) || 0;
            let defaultSystemId = parseInt(linkEl.dataset.defaultSystemId) || 0;
            let tabMapData = Util.getCurrentMapData(mapId);
            let tabContentEl = document.getElementById(config.mapTabIdPrefix + mapId);

            // tabContentEl does not exist in case of error where all map elements got removed
            if(tabMapData !== false && tabContentEl){
                // load map
                let areaMap = tabContentEl.querySelector(`.${Util.getMapTabContentAreaClass('map')}`);
                Map.loadMap(areaMap, tabMapData, {showAnimation: true}).then(payload => {
                    // "wake up" scrollbar for map and get previous state back
                    let mapConfig = payload.data.mapConfig;
                    let mapElement = mapConfig.map.getContainer();
                    let areaMap = mapElement.closest('.mCustomScrollbar');
                    $(areaMap).mCustomScrollbar('update');

                    // show "global" map panels of map was initial loaded
                    if(payload.isFirstLoad){
                        MapUtil.showMapInfo(mapConfig.map);
                    }

                    // if there is an already an "active" system -> setCurrentSystemData for that again
                    let activeSystemEl = mapElement.querySelector(`.${MapUtil.config.systemActiveClass}`);
                    if(activeSystemEl){
                        MapUtil.setSystemActive(mapConfig.map, $(activeSystemEl));
                    }else if(defaultSystemId){
                        // currently no system "active" check if there is a default system set for this mapTab
                        // -> e.g. from URL link
                        let systemId = MapUtil.getSystemId(mapConfig.config.id, defaultSystemId);
                        let systemEl = mapElement.querySelector(`#${systemId}`);
                        if(systemEl){
                            // system exists on map -> make active and show panels
                            MapUtil.showSystemInfo(mapConfig.map, $(systemEl));
                        }
                    }

                    // change url to unique map URL
                    if(history.pushState){
                        history.pushState({}, '', MapUtil.getMapDeeplinkUrl(mapConfig.config.id));
                    }

                    // update map user data (do not wait until next update is triggered)
                    updateMapUserData($(mapElement));
                });
            }
        });

        $(tabBarEl).on('hide.bs.tab', 'a', e => {
            let oldLinkEl = e.currentTarget;
            let newLinkEl = e.relatedTarget;

            let oldMapId = parseInt(oldLinkEl.dataset.mapId) || 0;
            let newMapId = parseInt(newLinkEl.dataset.mapId) || 0;

            // skip "add button"
            if(newMapId > 0){
                let currentTabContentEl = document.getElementById(config.mapTabIdPrefix + oldMapId);

                // disable scrollbar for map that will be hidden. "freeze" current state
                let areaMap = currentTabContentEl.querySelector(`.${Util.getMapTabContentAreaClass('map')}`);
                $(areaMap).mCustomScrollbar('disable', false);
            }
        });
    };

    /**
     * set data for a map tab, or update an existing map tab with new data return promise
     * @param tabLinkEl
     * @param options
     * @returns {Promise<any>}
     */
    let updateTabData = (tabLinkEl, options) => new Promise(resolve => {
        // set "main" data
        tabLinkEl.dataset.mapId = options.id;

        // add updated timestamp (not available for "add" tab
        if(Util.getObjVal(options, 'updated.updated')){
            tabLinkEl.dataset.updated = options.updated.updated;
        }

        // change "tab" link
        tabLinkEl.setAttribute('href', `#${config.mapTabIdPrefix}${options.id}`);

        // change "map" icon
        let mapIconEl = tabLinkEl.querySelector(`.${config.mapTabIconClass}`);
        mapIconEl.classList.remove(...mapIconEl.classList);
        mapIconEl.classList.add(config.mapTabIconClass, 'fas', 'fa-fw', options.icon);

        // change "shared" icon
        let mapSharedIconEl = tabLinkEl.querySelector(`.${config.mapTabSharedIconClass}`);
        mapSharedIconEl.style.display = 'none';

        // check if the map is a "shared" map
        if(options.access){
            if(
                options.access.character.length > 1 ||
                options.access.corporation.length > 1 ||
                options.access.alliance.length > 1
            ){
                mapSharedIconEl.style.display = 'initial';
            }
        }

        // change map name label
        let textEl = tabLinkEl.querySelector(`.${config.mapTabLinkTextClass}`);
        textEl.textContent = options.name;

        // change tabClass
        let listEl = tabLinkEl.parentNode;

        // new tab classes
        let tabClasses = [config.mapTabClass, options.type.classTab];

        if(options.draggable === false){
            tabClasses.push('noSort');
        }

        // check if tab was "active" before
        if(listEl.classList.contains('active')){
            tabClasses.push('active');
        }
        listEl.classList.remove(...listEl.classList);
        listEl.classList.add(...tabClasses);

        // set title for tooltip
        if(options.type.name !== undefined){
            textEl.setAttribute('title', `${options.type.name} map`);
        }

        let mapTooltipOptions = {
            placement: 'bottom',
            container: 'body',
            trigger: 'hover',
            delay: 150
        };

        $(listEl.querySelector('[title]')).tooltip(mapTooltipOptions).tooltip('fixTitle');

        resolve({
            action: 'update',
            data: {
                mapId: options.id,
                mapName: options.name
            }
        });
    });

    /**
     * add a new tab to tab-map-module end return promise
     * @param tabEl
     * @param options
     * @returns {Promise<any>}
     */
    let addTab = (tabEl, options) => {

        /**
         * get new <li> element used as map tab
         * @param mapId
         * @param tabType
         * @param tabSortId
         * @returns {HTMLLIElement}
         */
        let newTabListElement = (mapId, tabType, tabSortId) => {
            let listEl = document.createElement('li');
            listEl.dataset.sortId = tabSortId;
            listEl.setAttribute('role', 'presentation');

            // link element
            let linkEl = document.createElement('a');
            linkEl.dataset.tabType = tabType;
            linkEl.setAttribute('role', 'tab');

            // tab drag handler element
            if(mapId > 0){
                linkEl.append(Object.assign(document.createElement('i'), {
                    className: config.sortableHandleClass
                }));
            }

            // map icon element
            linkEl.append(Object.assign(document.createElement('i'), {
                className: config.mapTabIconClass
            }));

            // text element
            linkEl.append(Object.assign(document.createElement('span'), {
                className: config.mapTabLinkTextClass
            }));

            // map shared icon element
            linkEl.append(Object.assign(document.createElement('i'), {
                className: [config.mapTabSharedIconClass, 'fas', 'fa-fw', 'fa-share-alt'].join(' '),
                title: 'shared map'
            }));

            listEl.append(linkEl);
            return listEl;
        };

        /**
         * get tab content element
         * @param mapId
         * @returns {HTMLDivElement}
         */
        let newTabContentElement = mapId => {
            let contentEl = document.createElement('div');
            contentEl.id = config.mapTabIdPrefix + parseInt(mapId);
            contentEl.classList.add(Util.config.mapTabContentClass, 'tab-pane');
            contentEl.dataset.mapId = mapId;
            return contentEl;
        };

        /**
         * add tab promise
         * @param resolve
         */
        let addTabExecutor = resolve => {
            Util.getLocalStore('character').getItem(Util.getCurrentCharacterId()).then(localDataCharacter => {
                let mapId = options.id || 0;
                let defaultTabArea = options.area || 'left'; // whether tab should be added to left or right list
                let defaultPosition = options.position || 0;
                let tabType = options.tabType || 'map';
                let tabSortId = [tabType, mapId].join('_');

                // check for stored map tab order in indexDB (client) -------------------------------------------------
                if(localDataCharacter){
                    for(let tabArea of ['left', 'right']){
                        let positionIndex = (Util.getObjVal(localDataCharacter, `map_tabs_${tabArea}`) || []).indexOf(tabSortId);
                        if(positionIndex !== -1){
                            // first index (0) => is position 1
                            defaultPosition = positionIndex + 1;
                            defaultTabArea = tabArea;
                            break;
                        }
                    }
                }

                let tabBarId = Util.config.mapTabBarIdPrefix + defaultTabArea;
                let tabBar = tabEl.querySelector('#' + tabBarId);
                let tabContentWrapperEl = tabEl.querySelector(`.${config.mapTabContentWrapperClass}[data-target="${tabBarId}"]`);
                let listEl = newTabListElement(mapId, tabType, tabSortId);
                let tabContentEl = newTabContentElement(mapId);

                listEl.dataset.position = String(defaultPosition);

                // find correct position for new tabs -----------------------------------------------------------------
                let position = getModulePosition(tabBar, `.${config.mapTabClass}`, defaultPosition);

                // insert at correct position -------------------------------------------------------------------------
                let prevListEl = tabBar.querySelector(`li:nth-child(${position})`);

                if(prevListEl){
                    prevListEl.insertAdjacentElement('afterend', listEl);
                }else{
                    tabBar.insertAdjacentElement('afterbegin', listEl);
                }

                // update Tab element -> set data
                updateTabData(listEl.querySelector('a'), options);

                // add grid area elements for the new tab
                if(mapId){
                    tabContentEl.append(...getTabContentAreaElements());
                    setTabContentObserver(tabContentEl, mapId);
                }
                tabContentWrapperEl.insertAdjacentElement('beforeend', tabContentEl);

                resolve({
                    action: 'add',
                    data: {
                        mapId: mapId,
                        mapName: options.name
                    }
                });
            });
        };

        return new Promise(addTabExecutor);
    };

    /**
     * deletes tab from tab-map-module end return promise
     * @param tabEl
     * @param mapId
     * @returns {Promise<any>}
     */
    let deleteTab = (tabEl, mapId) => {

        /**
         * delete tab promise
         * @param resolve
         */
        let deleteTabExecutor = resolve => {
            let linkEl = tabEl.querySelector(`a[href="#${config.mapTabIdPrefix + mapId}"]`);
            let deletedTabName = '';

            if(linkEl){
                deletedTabName = linkEl.querySelector(`.${config.mapTabLinkTextClass}`).textContent;

                let listEl = linkEl.parentNode;
                let tabContentEl = tabEl.querySelector(`#${config.mapTabIdPrefix + mapId}`);

                $(listEl).remove();
                $(tabContentEl).remove();

                // remove map instance from local cache
                MapUtil.clearMapInstance(mapId);
            }

            resolve({
                action: 'delete',
                data: {
                    mapId: mapId,
                    mapName: deletedTabName
                }
            });
        };

        return new Promise(deleteTabExecutor);
    };

    /**
     * clear all active maps
     * @param mapModule
     * @returns {Promise<any[]>}
     */
    let clearMapModule = mapModule => {
        let promiseDeleteTab = [];
        let tabEl = document.getElementById(config.mapTabElementId);
        if(tabEl){
            let tabLinkEls = Util.getMapTabLinkElements(mapModule);
            for(let i = 0; i < tabLinkEls.length; i++){
                let tabLinkEl = tabLinkEls[i];
                let mapId = parseInt(tabLinkEl.dataset.mapId) || 0;
                if(mapId > 0){
                    promiseDeleteTab.push(deleteTab(tabEl, mapId));
                }
            }
        }

        return Promise.all(promiseDeleteTab);
    };

    /**
     * get last URL segment e.g. https://pathfinder/map/test -> test
     * @returns {string | undefined}
     */
    let getLastUrlSegment = () => {
        let parts = window.location.pathname.split('/');
        return parts.pop() || parts.pop();
    };

    /**
     * extract data from map url
     * @returns {Array}
     */
    let getMapDataFromUrl = () => {
        let data = [];
        let lastURLSegment = getLastUrlSegment();
        if(lastURLSegment.length){
            try{
                data = lastURLSegment.split('_').map(part => parseInt(atob(decodeURIComponent(part))) || 0);
            }catch(e){
                // data could not be extracted from URL -> ignore
            }
        }
        return data;
    };

    /**
     * set "default" map tab
     * -> default mapId might be available in local storage
     * @param tabEl
     * @returns {Promise<any>}
     */
    let showDefaultTab = tabEl => {

        let getActiveTabLinkElement = mapId => {
            return tabEl.querySelector(`.${config.mapTabClass} > a[data-map-id="${mapId}"]`);
        };

        /**
         * show default tab promise
         * @param resolve
         */
        let showDefaultTabExecutor = resolve => {
            Util.getLocalStore('character').getItem(Util.getCurrentCharacterId()).then(data => {
                let linkEl = null;

                // check for existing mapId URL identifier ------------------------------------------------------------
                let urlData = getMapDataFromUrl();
                let defaultMapId = urlData[0] || 0;
                let defaultSystemId = urlData[1] || 0;

                if(defaultMapId){
                    linkEl = getActiveTabLinkElement(defaultMapId);
                    if(defaultSystemId && linkEl){
                        linkEl.dataset.defaultSystemId = defaultSystemId;
                    }
                }

                // ... else check for existing cached default mapId ---------------------------------------------------
                if(!linkEl && data && data.defaultMapId){
                    // make specific map tab active
                    linkEl = getActiveTabLinkElement(data.defaultMapId);
                }

                // ... else make first map tab active (default) -------------------------------------------------------
                if(!linkEl){
                    linkEl = tabEl.querySelector(`.${config.mapTabClass} > a`);
                }

                if(linkEl){
                    $(linkEl).tab('show');
                }

                resolve();
            });
        };

        return new Promise(showDefaultTabExecutor);
    };

    /**
     * load/update map module into element (all maps)
     * @param mapModule
     * @returns {Promise<any>}
     */
    let updateMapModule = mapModule => {
        // performance logging (time measurement)
        let logKeyClientMapData = Init.performanceLogging.keyClientMapData;
        Util.timeStart(logKeyClientMapData);

        let updateMapModuleExecutor = resolve => {
            // check if tabs module is already loaded
            let tabEl = document.getElementById(config.mapTabElementId);

            // store current map data global (cache)
            // temp store current map data to prevent data-change while function execution!
            let tempMapData = Util.getCurrentMapData();

            if(tempMapData.length === 0){
                // clear all existing maps ============================================================================
                clearMapModule(mapModule)
                    .then(payload => {
                        // no map data available -> show "new map" dialog
                        Util.triggerMenuAction(document, 'ShowMapSettings', {tab: 'new'});
                    })
                    .then(payload => resolve());
            }else{
                if(tabEl){
                    // tab element exists -> update ===================================================================
                    let promisesAddTab = [];
                    let promiseDeleteTab = [];
                    let promiseUpdateTab = [];

                    let tabDeletedCallback = payload => {
                        Util.showNotify({title: 'Map removed', text: payload.data.mapName + ' deleted', type: 'warning'});
                    };

                    let tabAddCallback = payload => {
                        Util.showNotify({title: 'Map added', text: payload.data.mapName + ' added', type: 'success'});
                    };

                    // tab element already exists
                    let tabLinkEls = Util.getMapTabLinkElements(mapModule);

                    // mapIds that are currently active
                    let activeMapIds = [];

                    // check whether a tab/map is still active
                    for(let i = 0; i < tabLinkEls.length; i++){
                        let tabLinkEl = tabLinkEls[i];
                        let mapId = parseInt(tabLinkEl.dataset.mapId) || 0;

                        if(mapId > 0){
                            let tabMapData = Util.getCurrentMapData(mapId);
                            if(tabMapData !== false){
                                // map data available ->
                                activeMapIds.push(mapId);

                                // check for map data change and update tab
                                if(tabMapData.config.updated.updated > (parseInt(tabLinkEl.dataset.updated) || 0)){
                                    promiseUpdateTab.push(updateTabData(tabLinkEl, tabMapData.config));
                                }
                            }else{
                                // map data not available -> remove tab
                                promiseDeleteTab.push(deleteTab(tabEl, mapId).then(tabDeletedCallback));
                            }
                        }
                    }

                    // add new tabs for new maps
                    for(let data of tempMapData){
                        if(activeMapIds.indexOf(data.config.id) === -1){
                            // add new map tab
                            promisesAddTab.push(addTab(tabEl, data.config).then(tabAddCallback));
                        }
                    }

                    // wait until ALL "add", "delete", "update" promises are fulfilled
                    let promisesAll = promisesAddTab.concat(promiseDeleteTab, promiseUpdateTab);

                    Promise.all(promisesAll).then(payload => {
                        // if there is an active map ...
                        let activeMap = Util.getMapModule().getActiveMap();
                        if(activeMap){
                            let activeMapId = activeMap.data('id');
                            let activeMapData = Util.getCurrentMapData(activeMapId);
                            if(activeMapData !== false){
                                // .. active map found, just update no tab switch
                                let tabContentEl = document.getElementById(config.mapTabIdPrefix + activeMapId);
                                let areaMap = tabContentEl.querySelector(`.${Util.getMapTabContentAreaClass('map')}`);
                                return Map.loadMap(areaMap, activeMapData, {});
                            }else{
                                console.error('No active map found!');
                            }
                        }else{
                            // .. no map active, make one active
                            return showDefaultTab(tabEl);
                        }
                    }).then(payload => resolve());

                }else{
                    // tab Element does not exists -> create ==========================================================
                    let promisesAddTab = [];
                    tabEl = newMapTabsElement();
                    mapModule.prepend(tabEl);

                    // add new tab for each map
                    for(let j = 0; j < tempMapData.length; j++){
                        let data = tempMapData[j];
                        promisesAddTab.push(addTab(tabEl, data.config));
                    }

                    // "add" map tab
                    let tabAddOptions = {
                        id: 0,
                        type: {
                            classTab: MapUtil.getInfoForMap('standard', 'classTab'),
                            name: 'new'
                        },
                        icon: 'fa-plus',
                        name: 'add',
                        area: 'left',
                        tabType: 'add',
                        position: 90 // always the most right tab
                    };

                    // "settings" tab
                    let tabSettingsOptions = {
                        id: 0,
                        type: {
                            classTab: MapUtil.getInfoForMap('standard', 'classTab')
                        },
                        icon: 'fa-tv',
                        name: '',
                        area: 'left',
                        tabType: 'settings',
                        position: 100, // always the most right tab
                        draggable: false
                    };

                    promisesAddTab.push(addTab(tabEl, tabAddOptions));
                    promisesAddTab.push(addTab(tabEl, tabSettingsOptions));

                    Promise.all(promisesAddTab)
                        .then(payload => showDefaultTab(tabEl))
                        .then(payload => resolve());
                }
            }
        };

        return new Promise(updateMapModuleExecutor).then(payload => {
            // log client map update time
            let duration = Util.timeStop(logKeyClientMapData);
            Util.log(logKeyClientMapData, {duration: duration, type: 'client', description: 'update map'});
        });
    };

    let mapTabOnShow = (tabBarEl, mapId) => {
        // save mapId as new "default" (local storage)
        Util.getLocalStore('character').setItem(`${Util.getCurrentCharacterId()}.defaultMapId`, mapId);
        // update mapTab element
        updateMapTabElement(mapId);
    };

    /**
     * update mapTab element
     *    -> e.g. "Settings" popover data
     *    -> e.g. update mapModule layout
     * @param mapId
     */
    let updateMapTabElement = mapId => {
        let tabEl = document.getElementById(config.mapTabElementId);
        if(!tabEl || !mapId){
            return;
        }

        let setMapTabLayout = (tabEl, layoutNew) => {
            config.mapTabContentLayoutOptions.forEach(layout => tabEl.classList.toggle(layout, layout === layoutNew));
        };

        Promise.all([
            getModules(),
            Util.getLocalStore('map').getItem(mapId)
        ]).then(payload => {
            let modules = payload[0];
            let localDataMap = payload[1];
            let layoutCurrent = Util.getObjVal(localDataMap, 'layout') || config.defaultMapTabContentLayout;
            let disabledValues = Util.getObjVal(localDataMap, 'modulesDisabled');

            // update mapModule with current layout class
            setMapTabLayout(tabEl, layoutCurrent);

            // prepare select options for modules
            let modulePrioCounts = Array(BaseModule.scopeOrder.length).fill(0);
            let sourceOptions = modules.sort((a, b) => a.getOrderPrio() - b.getOrderPrio()).map(Module => ({
                value: Module.name,
                text: Module.label,
                metaData: {
                    scope: Module.scope,
                    orderPrio: Module.getOrderPrio(),
                    prioCount: ++modulePrioCounts[Module.getOrderPrio()],
                    isPlugin: Module.isPlugin
                }
            }));

            // default -> all modules selected -> plugin modules disabled
            if(!disabledValues){
                disabledValues = sourceOptions.reduce((acc, optionData) => {
                        if(optionData.metaData.isPlugin){
                            acc.push(optionData.value);
                        }
                        return acc;
                    }, []
                );
                Util.getLocalStore('map').setItem(`${mapId}.modulesDisabled`, disabledValues);
            }

            let settingsLinkEl = tabEl.querySelector(`.${config.mapTabClass} > a[data-tab-type="settings"]`);
            if(settingsLinkEl){
                // settings settingsLinkEl should always exist
                settingsLinkEl = $(settingsLinkEl);

                /**
                 * we store "unselected" options only -> new modules should be visible by default!
                 * @param sourceOptions
                 * @param values
                 * @returns []
                 */
                let invertValues = (sourceOptions, values = []) => sourceOptions
                    .filter(optionData => !values.includes(optionData.value))
                    .map(optionData => optionData.value);

                let selectedValues = invertValues(sourceOptions, disabledValues);

                if(settingsLinkEl.data('editable')){
                    settingsLinkEl.editable('setValue', selectedValues);
                    settingsLinkEl.editable('option', 'pk', mapId);
                    settingsLinkEl.editable('option', 'pfLayoutCurrent', layoutCurrent);
                }else{
                    settingsLinkEl.on('shown', (e, editable) => {
                        let layoutCurrent = Util.getObjVal(editable, 'options.pfLayoutCurrent');

                        // add "layout" toggle to popover -----------------------------------------------------------------
                        let anchorEl = editable.container.$form[0].querySelector(`.${config.editableSettingsClass}`);

                        let gridEl = Object.assign(document.createElement('div'), {
                            className: config.editableToggleClass
                        });

                        let gridItemEls = config.mapTabContentLayoutOptions.map(layout => {
                            let gridItemEl = Object.assign(document.createElement('div'), {
                                className: config.editableToggleItemClass + (layout === layoutCurrent ? ' active' : '')
                            });
                            gridItemEl.style.setProperty('--bg-image',`url("/public/img/icons/grid_${layout}.png")`);
                            gridItemEl.dataset.value = layout;
                            return gridItemEl;
                        });
                        gridItemEls.splice(1, 0, Object.assign(document.createElement('i'), {
                            className: ['fas', 'fa-lg', 'fa-exchange-alt'].join(' ')
                        }));
                        gridEl.append(...gridItemEls);
                        anchorEl.insertAdjacentElement('beforebegin', gridEl);

                        // click event for layout switch -> change layout -> store new layout setting
                        EventHandler.addEventListener(gridEl, 'click.toggleSelect', e => {
                            if(e.target.classList.contains(config.editableToggleItemClass)){
                                let layoutNew = e.target.dataset.value;
                                if(layoutNew !== layoutCurrent){
                                    gridItemEls.forEach(gridItemEl => gridItemEl.classList.toggle('active'));
                                    let activeMapId = Util.getObjVal(editable, 'options.pk');

                                    Util.getLocalStore('map').setItem(`${activeMapId}.layout`, layoutNew).then(layoutNew => {
                                        setMapTabLayout(tabEl, layoutNew);
                                        // for next "toggle" detection
                                        layoutCurrent = layoutNew;
                                        editable.option('pfLayoutCurrent', layoutNew);
                                    });
                                }
                            }
                        }, {passive: false});

                        // add "headlines" to Modules checklist -------------------------------------------------------
                        anchorEl.childNodes.forEach((gridItem, i) => {
                            if(sourceOptions[i].metaData.prioCount === 1){
                                gridItem.classList.add(config.editableHeadlineClass);
                                gridItem.setAttribute('data-count',
                                    modulePrioCounts[sourceOptions[i].metaData.orderPrio]
                                );
                                gridItem.setAttribute('data-headline',
                                    BaseModule.scopeOrder[sourceOptions[i].metaData.orderPrio]
                                );
                            }
                        });
                    });

                    settingsLinkEl.on('save', {sourceOptions: sourceOptions}, (e, params) => {
                        let editable = $(e.target).data('editable');
                        let activeMapId = Util.getObjVal(editable, 'options.pk');
                        let oldValue = editable.value;
                        let newValue = invertValues(e.data.sourceOptions, params.newValue || []);

                        let map = MapUtil.getMapInstance(activeMapId);
                        let tabContentEl = document.getElementById(config.mapTabIdPrefix + activeMapId);

                        Util.getLocalStore('map').setItem(`${activeMapId}.modulesDisabled`, newValue).then(newValue => {
                            let hideModules = filterModules(modules, oldValue.diff(params.newValue), 'name');
                            let showModules = filterModules(modules, params.newValue.diff(oldValue), 'name');

                            removeModules(hideModules, tabContentEl).then(payload => {
                                let showGlobalModules = showModules.filter(Module => Module.scope === 'global');
                                let showSystemModules = showModules.filter(Module => Module.scope === 'system');
                                let showConnectionModules = showModules.filter(Module => Module.scope === 'connection');
                                if(showGlobalModules.length){
                                    renderModules(showGlobalModules, tabContentEl, {
                                        mapId: activeMapId,
                                        payload: null
                                    });
                                }

                                if(
                                    showSystemModules.length &&
                                    Util.getCurrentSystemData(activeMapId)
                                ){
                                    renderModules(showSystemModules, tabContentEl, {
                                        mapId: activeMapId,
                                        payload: Util.getCurrentSystemData(activeMapId)
                                    });
                                }

                                if(
                                    showConnectionModules.length &&
                                    MapUtil.getConnectionsByType(map, 'state_active').length
                                ){
                                    renderModules(showConnectionModules, tabContentEl, {
                                        mapId: activeMapId,
                                        payload: MapUtil.getConnectionsByType(map, 'state_active')
                                    });
                                }
                            });
                        });
                    });

                    settingsLinkEl.editable({
                        toggle: 'manual',
                        mode: 'popup',
                        type: 'checklist',
                        showbuttons: false,
                        onblur: 'submit',
                        highlight: false,
                        title: 'layout settings',
                        placement: 'left',
                        pk: mapId,
                        value: selectedValues,
                        //prepend: prependOptions,
                        source: sourceOptions,
                        emptyclass: '',
                        emptytext: '',
                        display: function(value, sourceData){
                            // update filter badge
                            if(
                                value && sourceData &&
                                value.length < sourceData.length
                            ){
                                this.dataset.badge = String(value.length);
                            }else{
                                delete this.dataset.badge;
                            }
                        },
                        tpl: `<div class="editable-checklist ${config.editableSettingsClass}"></div>`,
                        pfLayoutCurrent: layoutCurrent
                    });
                }
            }
        });
    };

    /**
     * collect all data (systems/connections) for export/save from each active map in the map module
     * if no change detected -> do not attach map data to return array
     * @param {HTMLElement} mapModule
     * @param filter
     * @returns {[]}
     */
    let getMapModuleDataForUpdate = (mapModule, filter = ['hasId', 'hasChanged']) => {
        let data = [];
        [...mapModule.getElementsByClassName(Util.config.mapClass)].forEach(mapElement => {
            // get all changed (system / connection) data from this map
            let mapData = Map.getMapDataForSync(mapElement, filter);
            if(
                mapData && (
                    (Util.getObjVal(mapData, 'data.systems') || []).length ||
                    (Util.getObjVal(mapData, 'data.connections') || []).length
                )
            ){
                data.push(mapData);
            }
        });
        return data;
    };

    return {
        updateTabData: updateTabData,
        updateMapModule: updateMapModule,
        updateActiveMapUserData: updateActiveMapUserData,
        updateSystemModulesData: updateSystemModulesData,
        getMapModuleDataForUpdate: getMapModuleDataForUpdate
    };
});