nodered_cfg/node_modules/node-red-dashboard/nodes/ui_base.html

<style>
    :root {
        --nr-db-dark-text: #444;
        --nr-db-light-text: #eee;
        --nr-db-disabled-text: #999;
        --nr-db-mid-grey: #7f7f7f;
    }
    .nr-db-sb {
        position: absolute;
        top: 1px;
        bottom: 2px;
        left: 1px;
        right: 1px;
        overflow-y: scroll;
        padding: 10px;
    }
    .nr-db-sb .form-row label {
        display: block;
        width: auto;
    }
    .nr-db-sb .form-row input,
    .nr-db-sb .form-row select {
        width: calc(100% - 100px);
        margin-bottom:0;
    }
    .nr-db-sb .compact {
        margin-bottom: 8px !important;
    }
    .nr-db-sb .red-ui-editableList-container {
        padding: 0;
        min-height: 250px;
        height: auto;
    }
    .nr-db-sb-tab-list {
        min-height: 250px;
        height: auto;
    }
    .nr-db-sb-tab-list li {
        padding: 0;
    }
    .nr-db-sb-tab-list-item {
        border-radius: 4px;
        color: var(--red-ui-primary-text-color, var(--nr-db-dark-text));
    }
    .nr-db-sb-list-header {
        cursor: pointer;
        position:relative;
        color: var(--red-ui-header-text-color, var(--nr-db-dark-text));
        padding:3px;
        white-space: nowrap;
    }
    .nr-db-sb-list-header:hover {
        color: var(--red-ui-secondary-text-color-hover, var(--nr-db-dark-text));
    }
    .nr-db-sb-title-hidden {
        text-decoration: line-through;
    }
    .nr-db-sb-title-disabled {
        color: var(--red-ui-secondary-text-color-disabled, var(--nr-db-disabled-text));
    }
    .nr-db-sb-tab-list-header {
        background: var(--red-ui-secondary-background-selected, var(--nr-db-light-text));
        padding:5px;
    }
    .nr-db-sb-group-list-header:hover,
    .nr-db-sb-widget-list-header:hover {
        background: var(--red-ui-secondary-background-hover, var(--nr-db-light-text));
    }
    .nr-db-sb-list-chevron {
        width: 15px;
        text-align: center;
        margin: 3px 5px 3px 5px;
    }
    .nr-db-sb-tab-list-item .red-ui-editableList-container {
        border-radius: 0;
        border: none;
        height: auto !important;
        min-height: unset;
    }
    .nr-db-sb-list-handle {
        vertical-align: top;
        opacity: 0;
        cursor: move;
    }
    .nr-db-sb-list-header:hover>.nr-db-sb-list-handle,
    .nr-db-sb-list-header:hover>.nr-db-sb-list-header-button-group {
        opacity: 1;
    }
    .nr-db-sb-list-header-button-group {
        opacity: 0;
    }
    .nr-db-sb-list-handle  {
        color: var(--red-ui-tertiary-text-color, var(--nr-db-light-text));
        padding:5px;
    }
    .nr-db-sb-tab-list-header>.nr-db-sb-list-chevron  {
        margin-left: 0px;
        transition: transform 0.2s ease-in-out;
    }
    .nr-db-sb-group-list-header>.nr-db-sb-list-chevron {
        margin-left: 20px;
        transition: transform 0.2s ease-in-out;
    }
    .nr-db-sb-group-list {
        min-height: 10px;
    }
    .nr-db-sb-group-list li {
        border-bottom-color: var(--red-ui-secondary-border-color, var(--nr-db-light-text));
    }
    .nr-db-sb-group-list>li.ui-sortable-helper {
        border-top: 1px solid var(--red-ui-secondary-border-color, var(--nr-db-light-text));
    }
    .nr-db-sb-group-list>li:last-child {
        border-bottom: none;
    }
    .nr-db-sb-widget-list>li {
        border: none !important;
    }
    .nr-db-sb-group-list>li>.red-ui-editableList-item-handle {
        left: 10px;
    }
    .nr-db-sb-list-button-group {
        position: absolute;
        right: 3px;
        top: 0px;
        z-index: 2;
    }
    .nr-db-sb-list-header-button-group {
        position: absolute;
        right: 3px;
        top: 4px;
    }
    .nr-db-sb-list-header-button {
        margin-left: 5px;
    }
    .nr-db-sb li.ui-sortable-helper {
        opacity: 0.9;
    }
    .nr-db-sb-widget-icon {
        margin-left: 56px;
    }
    .nr-db-sb-icon {
        margin-right: 10px;
    }
    .nr-db-sb-link {
        display: inline-block;
        padding-left: 20px;
    }
    .nr-db-sb-link-name-container .fa-external-link {
      margin-right: 10px;
    }
    .nr-db-sb-link-url {
        font-size: 0.8em;
        color: var(--red-ui-secondary-text-color, var(--nr-db-mid-grey));
    }
    span.nr-db-color-pick-container {
        max-width: 50px;
        border-radius: 3px;
        margin-left: 15px;
    }
    input.nr-db-field-themeColor[type="color"] {
        width: 60px !important;
        padding: 0px;
        height: 20px;
        box-shadow: none;
        position: absolute;
        right: 36px;
        border-radius: 3px !important;
        border: solid 1px #ccc;
        -webkit-appearance: none;
        font-size: smaller;
        text-align: center;
    }
    input.nr-db-field-themeColor::-webkit-color-swatch {
        border: none;
    }
    .red-ui-tabs {
        margin-bottom: 15px;
    }
    .red-ui-tab.hidden {
        display: none;
    }
    #dashboard-tabs-list li a:hover {
        cursor: pointer;
    }
    #dash-link-button {
        background: none;
        border: none;
        margin-top: 3px;
        display: inline-block;
        margin: 3px 0px 0px 3px;
        height: 32px;
        line-height: 29px;
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        padding: 0px 7px 0px 7px;
    }
    ul.red-ui-dashboard-theme-styles {
        list-style: none;
    }
    ul.red-ui-dashboard-theme-styles li {
        margin-bottom: 6px;
    }
    .nr-db-resetIcon {
        margin: 3px 6px 0px 6px;
        float: right;
        color: var(--red-ui-secondary-text-color, var(--nr-db-mid-grey));
        opacity: 0.8;
        display: block;
    }
    .nr-db-resetIcon:hover {
        cursor: pointer;
    }
    #nr-db-field-font {
        margin-left: 2em;
        width: calc(100% - 81px);
    }
    .nr-db-theme-label {
        font-weight: bold;
    }
    #custom-theme-library-container .btn-group {
        margin-bottom: 10px;
    }
</style>

<!-- Dashboard layout tool -->
<link rel="stylesheet" href="./ui_base/gs/gridstack.min.css">
<link rel="stylesheet" href="./ui_base/css/gridstack-extra.min.css">
<style>
.grid-stack {
    background-color: #f8f8f8;
    border: solid 2px #C0C0C0;
    margin: auto;
    min-height: 42px;
    display: table-cell;
    background-image: linear-gradient(#C0C0C0 1px, transparent 0),
                      linear-gradient(90deg, #C0C0C0 1px, transparent 0);
    background-size: 40px 43px;
}
.grid-stack>.grid-stack-item>.grid-stack-item-content {
    top: 3px;
    left: 5px;
    right: 5px;
    bottom: 3px;
}
.grid-stack-item-content {
    color: #2c3e50;
    text-align: center;
    background-color: #b0dfe3;
    border-radius: 2px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0.7;
}
.grid-stack-item {
    cursor: move;
}
.nr-dashboard-layout-container-fluid {
  width: 100%;
  padding-right: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
.nr-dashboard-layout-row {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0px;
  margin-left: 0px;
}
.nr-dashboard-layout-span12 {
  width: 98.4%;
  padding: 2px;
  margin-left: 2px;
}
.nr-dashboard-layout-span6 {
  width: 49.2%;
  padding: 2px;
  margin-left: 2px;
}
.nr-dashboard-layout-span4 {
  width: 32.7%;
  padding: 2px;
  margin-left: 2px;
}
.nr-dashboard-layout-span3 {
  width: 24.3%;
  padding: 2px;
  margin-left: 2px;
}
.nr-dashboard-layout-span2 {
  width: 16.0%;
  padding: 2px;
  margin-left: 2px;
}
.nr-dashboard-layout-resize-disable {
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 90;
    margin-right: 4px;
}
.nr-dashboard-layout-resize-enable {
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 90;
    margin-right: 1px;
}
.grid-stack>.ui-state-disabled {
    opacity: 1;
    background-image: none;
}
.grid-stack>.grid-stack-item>.ui-resizable-handle {
    z-index: 90;
    margin-right: -7px;
}
</style>


<script type="text/javascript">
(function($) {
    var editSaveEventHandler;
    var nodesAddEventHandler;
    var nodesRemoveEventHandler;
    var layoutUpdateEventHandler; // Dashboard layout tool
    var uip = 'ui';
    var attemptedVendorLoad = false;
    var ensureDashboardNode;

    var loadTinyColor = function(path) {
        $.ajax({ url: path,
            success: function (data) {
                var jsScript = document.createElement("script");
                jsScript.type = "application/javascript";
                jsScript.src = path;
                document.body.appendChild(jsScript);
                //console.log('Tiny Color Loaded:',path);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status === 404 && !attemptedVendorLoad) {
                    loadTinyColor('/'+uip+'/vendor/tinycolor2/dist/tinycolor-min.js');
                    attemptedVendorLoad = true;
                }
                //console.log('Tiny Color Failed to load:',path);
            }
        });
    }

    // convert to i18 text
    function c_(x) {
        return RED._("node-red-dashboard/ui_base:ui_base."+x);
    }

    // Try to load dist version first
    // then if fails, load non dist version
    loadTinyColor('ui_base/js/tinycolor-min.js');
    //loadTinyColor('ui_base/tinycolor2/dist/tinycolor-min.js');

    // Dashboard layout tool
    // Load gridstack library
    var loadGsLib = function(path, callback) {
        $.ajax({ url: path,
            success: function (data) {
                var jsScript = document.createElement("script");
                jsScript.type = "application/javascript";
                jsScript.src = path;
                document.body.appendChild(jsScript);
                if (callback) { callback(); }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                // TODO
            }
        });
    };

    loadGsLib('ui_base/gs/gridstack.min.js', function() {
        loadGsLib('ui_base/gs/gridstack.jQueryUI.min.js', null)
    });

    var tabDatas; // Layout editing tab data
    var oldSpacer; // Spacer not needed after editing
    var widthChange; // Group width change
    var widgetResize; // Change widget event
    var widgetDrag; // Drag wiget event

    var MAX_GROUP_WIDTH = 50; // The maximum width is 30

    /////////////////////////////////////////////////////////
    // Get widget under specified tab from node information
    /////////////////////////////////////////////////////////
    function getTabDataFromNodes(tabID) {
        var nodes = RED.nodes.createCompleteNodeSet(false);
        var tab = {};
        // Tab information
        for (var cnt = 0; cnt < nodes.length; cnt++) {
            if (nodes[cnt].type == "ui_tab" && nodes[cnt].id == tabID) {
                tab = {
                    id: nodes[cnt].id,
                    name: nodes[cnt].name,
                    type: nodes[cnt].type,
                    order: nodes[cnt].order,
                    groups: []
                };
                break;
            }
        }
        // Group information
        for (var cnt = 0; cnt < nodes.length; cnt++) {
            if (nodes[cnt].type == "ui_group" && nodes[cnt].tab == tabID) {
                var group = {
                    id: nodes[cnt].id,
                    name: nodes[cnt].name,
                    type: nodes[cnt].type,
                    order: nodes[cnt].order,
                    width: nodes[cnt].width,
                    widgets: []
                };
                tab.groups.push(group);
            }
        }
        // Widget information
        var groupsIdx = {};
        for  (var cnt = 0; cnt < tab.groups.length; cnt++) {
            groupsIdx[tab.groups[cnt].id] = tab.groups[cnt];
        }
        for (var cnt = 0; cnt < nodes.length; cnt++) {
            var group = groupsIdx[nodes[cnt].group];
            if (group != null && (/^ui_/.test(nodes[cnt].type) && nodes[cnt].type !== 'ui_link' && nodes[cnt].type !== 'ui_toast' && nodes[cnt].type !== 'ui_ui_control' && nodes[cnt].type !== 'ui_audio' && nodes[cnt].type !== 'ui_base' && nodes[cnt].type !== 'ui_group' && nodes[cnt].type !== 'ui_tab')) {
                var widget = {
                    id: nodes[cnt].id,
                    type: nodes[cnt].type,
                    order: nodes[cnt].order,
                    width: nodes[cnt].width,
                    height: nodes[cnt].height,
                    auto: nodes[cnt].width == 0 ? true : false
                };
                group.widgets.push(widget);

                if (!isLayoutToolSupported(nodes[cnt].type)) {
                    console.log("LayoutTool warning: Unsupported widget. Widget="+JSON.stringify(widget));
                }
            }
        }
        return tab;
    }

    //////////////////////////////////////////////////
    // Update node information in the edited widget
    ////////////////////////////////////////////////////
    function putTabDataToNodes() {
        // Delete old flow spacer node
        for (var cnt = 0; cnt < oldSpacer.length; cnt++) {
            RED.nodes.remove(oldSpacer[cnt]);
            RED.nodes.dirty(true);
            RED.view.redraw(true);
        }

        var t_groups = tabDatas.groups;
        for (var cnt1 = 0; cnt1 < t_groups.length; cnt1++) {
            var n_group = RED.nodes.node(t_groups[cnt1].id);
            n_group.width = t_groups[cnt1].width;
            var t_widgets = t_groups[cnt1].widgets;
            for (var cnt2 = 0; cnt2 < t_widgets.length; cnt2++) {
                var n_widget = RED.nodes.node(t_widgets[cnt2].id);
                if (n_widget != null) {
                    if (n_widget.group !== n_group.id) {
                        var oldGroupNode = RED.nodes.node(n_widget.group);
                        if (oldGroupNode) {
                            var index = oldGroupNode.users.indexOf(n_widget);
                            oldGroupNode.users.splice(index,1);
                        }
                        n_widget.group = n_group.id;
                        n_group.users.push(n_widget);
                    }
                    n_widget.order = t_widgets[cnt2].order;
                    if (t_widgets[cnt2].auto === true ) {
                        n_widget.width = 0;
                        n_widget.height = 0;
                    } else {
                        n_widget.width = t_widgets[cnt2].width;
                        n_widget.height = t_widgets[cnt2].height;
                    }

                    n_widget.changed = true;
                    n_widget.dirty = true;
                    RED.editor.validateNode(n_widget);
                    RED.events.emit("layout:update",n_widget);
                    RED.nodes.dirty(true);
                    RED.view.redraw(true);
                }
                else {
                    // Add a spacer node
                    if (t_widgets[cnt2].type === 'ui_spacer') {
                        var spaceNode = {
                            _def: RED.nodes.getType("ui_spacer"),
                            type: "ui_spacer",
                            hasUsers: false,
                            users: [],
                            id: RED.nodes.id(),
                            tab: tabDatas.id,
                            group: n_group.id,
                            order: t_widgets[cnt2].order,
                            name: "spacer",
                            width: t_widgets[cnt2].width,
                            height: t_widgets[cnt2].height,
                            z: RED.workspaces.active(),
                            label: function() { return this.name + " " + this.width + "x" + this.height; }
                        };
                        RED.nodes.add(spaceNode);
                        RED.editor.validateNode(spaceNode);
                        RED.nodes.dirty(true);
                        RED.view.redraw(true);
                    }
                }
            };
        }
        RED.sidebar.info.refresh();
    }

    ////////////////////////////////////////
    // Sort by order
    ////////////////////////////////////////
    function compareOrder(a, b) {
        var r = 0;
        if (a.order < b.order) { r = -1; }
        else if (a.order > b.order) { r = 1; }
        return r;
    }

    ////////////////////////////////////////
    // Sort by XY
    ////////////////////////////////////////
    function compareXY(a, b) {
        var r = 0;
        if (a.y < b.y) { r = -1; }
        else if (a.y > b.y) { r = 1; }
        else if (a.x < b.x) { r = -1; }
        else if (a.x > b.x) { r = 1; }
        return r;
    }

    ///////////////////////////////////////////////////////
    // Placeable location search (placed in the upper left)
    ///////////////////////////////////////////////////////
    function search_point(width, height, maxWidth, maxHeight, tbl) {
        for (var y=0; y < maxHeight; y++) {
            for (var x=0; x < maxWidth; x++) {
                if (check_matrix(x, y, width, height, maxWidth, tbl)) {
                    fill_matrix(x, y, width, height, maxWidth, tbl);
                    return  {x:x, y:y};
                }
            }
        }
        return false;
    }
    // Check placement position
    function check_matrix(px, py, width, height, maxWidth, tbl) {
        if (px+width > maxWidth) return false;
        for (var y=py; y < py+height; y++) {
            for (var x=px; x<px+width; x++) {
                if (tbl[maxWidth*y+x]) return false;
            }
        }
        return true;
    }
    // Mark the placement position
    function fill_matrix(px, py, width, height, maxWidth, tbl) {
        for (var y=py; y < py+height; y++) {
            for (var x=px; x < px+width; x++) {
                tbl[maxWidth*y+x] = 1;
            }
        }
    }

    ////////////////////////////////////////////////////
    // Apply edit result to tab information for editing
    ////////////////////////////////////////////////////
    function saveGridDatas() {
        var groups = tabDatas.groups;
        for (var cnt = 0; cnt < groups.length; cnt++) {
            // Get layout editing results
            var gridID = '#grid'+cnt;
            var serializedData = [];
            $(gridID+'.grid-stack > .grid-stack-item:visible').each( function (index) {
                el = $(this);
                var node = el.data('_gridstack_node');
                serializedData.push({
                    id: el[0].dataset.noderedid,
                    type: el[0].dataset.noderedtype,
                    group: groups[cnt].id,
                    width: Number(node.width),
                    height: Number(node.height),
                    x: node.x,
                    y: node.y,
                    auto: (el[0].dataset.noderedsizeauto == 'true') ? true : false
                });
            });

            var width = Number(groups[cnt].width);
            var height = 0;

            // Search group height
            for (var i=0; i < serializedData.length; i++) {
                var wd = serializedData[i];
                if (height < wd.y + wd.height) {
                    height = wd.y + wd.height;
                }
            }

            // Place widget on table
            var tbl = new Array(width * height);
            for (var i = 0; i< tbl.length; i++) {
                tbl[i]=0;
            }
            for (var i = 0; i < serializedData.length; i++) {
                var wd = serializedData[i];
                for (var y = wd.y; y < wd.y+wd.height; y++) {
                    for (var x = wd.x; x < wd.x+wd.width; x++) {
                        tbl[width*y+x]=1;
                    }
                }
            }

            // Add Spacer to Blank
            for (var y = 0; y < height; y++) {
                var spacerAdded = false;
                for (var x = 0; x < width; x++) {
                    if (tbl[width*y+x]===0) {
                        if (!spacerAdded) {
                            // Add 1x1 spacer
                            serializedData.push({
                                x: x,
                                y: y,
                                z: RED.workspaces.active(),
                                width: 1,
                                height: 1,
                                name: 'spacer',
                                type: 'ui_spacer'
                            });
                            spacerAdded = true;
                        } else {
                            // Extend the spacer width by 1
                            serializedData[serializedData.length-1].width += 1;
                        }
                    } else {
                        spacerAdded = false;
                    }
                }
            }

            // Sort Gridstack objects by x, y information
            serializedData.sort(compareXY);

            // Delete x and y elements as information for sorting, and give order
            var order = 0;
            for (i in serializedData) {
                order++;
                delete serializedData[i].x;
                delete serializedData[i].y;
                serializedData[i].order = order;
            }

            // Update widget information in group with edited data
            var group = groups[cnt];
            delete group.widgets;
            group.widgets = serializedData;
        }

        // Save process call
        putTabDataToNodes();
    };

    ////////////////////////////////////////////////////
    // Get default height for automatic settings
    ////////////////////////////////////////////////////
    function getDefaultHeight(nodeID, groupWidth) {
        var redNode = RED.nodes.node(nodeID);
        var height = 1;

        if (redNode.type === 'ui_gauge') {
            if (redNode.gtype === 'gage') {
                height = Math.round(groupWidth/2)+1;
            } else if (redNode.gtype === 'wave') {
                if (groupWidth < 3) {
                    height = 1;
                } else {
                    height = Math.round(groupWidth*0.75);
                }
            } else { // donut or compass
                if (groupWidth < 3) {
                    height = 1;
                } else if (groupWidth < 11) {
                    height = groupWidth - 1;
                } else {
                    height = Math.round(groupWidth*0.95);
                }
            }
        } else if (redNode.type === 'ui_chart') {
            height = Math.floor(groupWidth/2)+1;
        } else if (redNode.type === 'ui_form') {
            // var optNum = redNode.options.length; // Sub widget number
            // if (redNode.label) {
            //     height = optNum + 2; // Label and Button
            // } else {
            //     height = optNum + 1; // Button only
            // }
            height = redNode.rowCount
        } else if (redNode.type === 'ui_lineargauge') {
            if (redNode.unit && redNode.name) {
                height = 5;
            } else {
                height = 4;
            }
        } else if (redNode.type === 'ui_list') {
            height = 5;
        } else if (redNode.type === 'ui_vega') {
            height = 5;
        }
        return height;
    }

    /////////////////////////////
    // Grid width change
    ////////////////////////////
    var changeGroupWidth = function(id) {
        var widthID = '#change-width'+id;
        var gridID = '#grid'+id;
        $(widthID).spinner( {
            min: 1,
            max: MAX_GROUP_WIDTH,
            spin: function(event, ui) {
                // Search current maximum width
                var serializedData = [];
                $(gridID+'.grid-stack > .grid-stack-item:visible').each( function (index) {
                    el = $(this);
                    var node = el.data('_gridstack_node');
                    serializedData.push({
                        width: Number(node.width),
                        x: node.x,
                        auto: (el[0].dataset.noderedsizeauto == 'true') ? true : false
                    });
                });
                var maxWidth = 0;
                for (var i=0; i < serializedData.length; i++) {
                    var wd = serializedData[i];
                    if (wd.auto == false) {
                        if (maxWidth < wd.x + wd.width) {
                            maxWidth = wd.x + wd.width;
                        }
                    }
                }
                var width = ui.value;
                if (width < maxWidth) {
                    width = maxWidth;
                }

                var grid = $(gridID+'.grid-stack').data('gridstack');
                $(gridID+'.grid-stack').css("width", width * 40);
                $(gridID+'.grid-stack').css("background-size", 100/width+"% 43px");
                grid.setColumn(tabDatas.groups[id].width, true);
                grid.setColumn(width, true);
                tabDatas.groups[id].width = width;

                $(gridID+'.grid-stack > .grid-stack-item:visible').each( function(idx, el) {
                    el = $(el);
                    var node = el.data('_gridstack_node');
                    var auto = (el[0].dataset.noderedsizeauto == 'true') ? true : false;
                    var type = el[0].dataset.noderedtype;
                    grid.resizable(el, !auto);
                    if (auto === true) {
                        grid.resize(el, width, getDefaultHeight(node.id, width));
                    }
                });

                if (width !== ui.value) {
                    event.stopPropagation();
                    event.preventDefault();
                }
            }
        });
    };

    //////////////////////////////////
    // Move between groups of widgets
    //////////////////////////////////
    function handleMove(grid) {
        return function(ev, prevWidget, newWidget) {
            var elem = newWidget.el[0];
            if (elem.getAttribute("data-noderedsizeauto") === "true") {
                var id = elem.getAttribute("data-noderedid");
                var width = grid.grid.column;
                var height = getDefaultHeight(id, width);
                grid.move(elem, 0, newWidget.y);
                grid.resize(elem, width, height);

                var en = $(elem).find('.nr-dashboard-layout-resize-enable');
                en.off('click');
                en.on('click',layoutResizeEnable);
                en[0].setAttribute("title",c_("layout.auto"));
            }
            else {
                var ds = $(elem).find('.nr-dashboard-layout-resize-disable');
                ds.off('click');
                ds.on('click',layoutResizeDisable);
                ds[0].setAttribute("title",c_("layout.manual"));
            }
        };
    }

    //////////////////////////////////////////
    // Widget size change (start event)
    //////////////////////////////////////////
    var resizeGroupWidget = function(id) {
        var gridID = '#grid'+id;
        var grid = $(gridID+'.grid-stack').data('gridstack');
        $(gridID+'.grid-stack').on('resizestart', function(event, ui) {
            // Reset group width
            grid.setColumn(tabDatas.groups[id].width, true);
        });
    }

    //////////////////////////////////////////
    // Widget drag (start event)
    //////////////////////////////////////////
    var dragGroupWidget = function(id) {
        var gridID = '#grid'+id;
        var grid = $(gridID+'.grid-stack').data('gridstack');
        $(gridID+'.grid-stack').on('dragstart', function(event, ui) {
            // Reset group width
            grid.setColumn(tabDatas.groups[id].width, true);
        });
    }

    //////////////////////////////////////////
    // Layout resize Disable (Auto:false)
    //////////////////////////////////////////
    var layoutResizeDisable = function(e) {
        var target = $(e.target);
        var el = target.parents('.grid-stack-item:visible');
        var grid = target.parents('.grid-stack').data('gridstack');
        var node = el.data('_gridstack_node');
        var id = Number(target.parents('.grid-stack').attr('id').slice(4));
        var width = Number(tabDatas.groups[id].width);
        var nodeID = el[0].dataset.noderedid;
        var height = getDefaultHeight(nodeID, width);

        grid.move(el, 0, node.y);
        grid.resize(el, width, height);
        grid.resizable(el, false);
        el.find('.nr-dashboard-layout-resize-disable').off('click');
        el.attr({'data-noderedsizeauto':'true'});
        target.removeClass().addClass('fa fa-unlock nr-dashboard-layout-resize-enable');
        el.find('.nr-dashboard-layout-resize-enable')[0].setAttribute("title",c_("layout.auto"));
        el.find('.nr-dashboard-layout-resize-enable').on('click',layoutResizeEnable);
    }

    //////////////////////////////////////////
    // Layout resize Enable (Auto:true)
    //////////////////////////////////////////
    var layoutResizeEnable = function(e) {
        var target = $(e.target);
        var el = target.parents('.grid-stack-item:visible');
        var grid = target.parents('.grid-stack').data('gridstack');

        grid.resizable(el, true);
        el.find('.nr-dashboard-layout-resize-enable').off('click');
        el.attr({'data-noderedsizeauto':'false'});
        target.removeClass().addClass('fa fa-lock nr-dashboard-layout-resize-disable');
        el.find('.nr-dashboard-layout-resize-disable')[0].setAttribute("title",c_("layout.manual"));
        el.find('.nr-dashboard-layout-resize-disable').on('click',layoutResizeDisable);
    }

    //////////////////////////////////////////
    // Check dashboard layout tool supported
    //////////////////////////////////////////
    function isLayoutToolSupported(nodeType) {
        if (nodeType.indexOf("ui_") !== 0) {
            return false;
        }
        else {
            return true;
        }
    }

    RED.nodes.registerType('ui_base', {
            category: 'config',
            defaults: {
                name: {},
                theme: {},
                site: {}
            },
            hasUsers: false,
            paletteLabel: 'Dashboard',
            label: function() { return this.name || 'Node-RED Dashboard'; },
            labelStyle: function() { return this.name ? "node_label_italic" : ""; },
            onpaletteremove: function() {
                RED.sidebar.removeTab("dashboard");
                RED.events.off("editor:save",editSaveEventHandler);
                RED.events.off("nodes:add",nodesAddEventHandler);
                RED.events.off("nodes:remove",nodesRemoveEventHandler);
                RED.events.off("layout:update",layoutUpdateEventHandler); // Dashboard layout tool
            },
            onpaletteadd: function() {
                var globalDashboardNode = null;
                var editor;
                var baseStyles = ['base-color'];
                var configurableStyles = ['page-titlebar-backgroundColor', 'page-backgroundColor', 'page-sidebar-backgroundColor',
                'group-textColor', 'group-borderColor', 'group-backgroundColor',
                'widget-textColor', 'widget-backgroundColor','widget-borderColor'];
                var baseFontName = "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif";
                var aTheme = {primary:"indigo", accents:"blue", warn:"red", background:"grey", palette:"light"};
                // tiny colour implementation
                var colours = {
                    leastReadable: function(base, colours) {
                        var least = tinycolor.readability(base, colours[0]);
                        var leastColor = colours[0];
                        for (var i=1; i<colours.length; i++) {
                            var readability = tinycolor.readability(base, colours[i]);
                            if (readability < least) {
                                least = readability;
                                leastColor = colours[i];
                            }
                        }
                        return leastColor;
                    },
                    whiteGreyMostReadable: function (base) {
                        var rgb = tinycolor(base).toRgb();
                        var level = ((rgb.r*299) + (rgb.g*587) + (rgb.b*114))/1000;
                        var readable = (level >= 128) ? '#111111' : '#eeeeee';
                        return readable;
                    },
                    whiteBlackLeastReadable: function(base) {
                        return this.leastReadable(base, ["#000000", "#ffffff"]);
                    },
                    calculate_page_backgroundColor: function(base) {
                        var pageBackground = "#fafafa";
                        var theme = "light";
                        if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
                            theme = globalDashboardNode.theme.name.split('-')[1];
                        }
                        if (theme === "dark") {
                            pageBackground = "#111111";
                        }
                        else if (theme === "custom") {
                            var whiteOrBlack = this.whiteBlackLeastReadable(base);
                            if (whiteOrBlack === "#000000") { pageBackground = "#111111"; }
                        }
                        return pageBackground;
                    },
                    calculate_page_sidebar_backgroundColor: function(base) {
                        if (this.whiteBlackLeastReadable(base) === "#000000") { return "#333333"; }
                        else { return "#ffffff"; }
                    },
                    calculate_page_titlebar_backgroundColor: function(base) {
                        return base;
                    },
                    calculate_group_textColor: function(base) {
                        var groupTextColour = tinycolor(base).lighten(15).toHexString();
                        //if (this.whiteBlackLeastReadable(base) === "#ffffff") { groupTextColour = "#000000"; }
                        return groupTextColour;
                    },
                    calculate_group_backgroundColor: function(base) {
                        var groupBackground = "#ffffff";
                        var theme = "light";
                        if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
                            theme = globalDashboardNode.theme.name.split('-')[1];
                        }
                        if (theme === "dark") {
                            groupBackground = "#333333";
                        }
                        else if (theme === "custom") {
                            var whiteOrBlack = this.whiteBlackLeastReadable(base);
                            if (whiteOrBlack === "#000000") { groupBackground = "#333333"; }
                        }
                        return groupBackground;
                    },
                    calculate_group_borderColor: function(base) {
                        var groupBackground = this.calculate_group_backgroundColor(base);
                        return this.leastReadable(groupBackground, ["#ffffff", "#555555"]);
                    },
                    calculate_widget_textColor: function(base) {
                        //most readable against group background
                        var groupBackground = this.calculate_group_backgroundColor(base);
                        return tinycolor.mostReadable(groupBackground, ["#111111", "#eeeeee"]).toHexString();
                    },
                    calculate_widget_backgroundColor: function(base) {
                        //return tinycolor(base).darken(5).toHexString()
                        return tinycolor(base).toHexString();
                    },
                    calculate_widget_borderColor: function(base) {
                        var widgetBorder = "#ffffff";
                        var theme = "light";
                        if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
                            theme = globalDashboardNode.theme.name.split('-')[1];
                        }
                        if (theme === "dark") {
                            widgetBorder = "#333333";
                        }
                        else if (theme === "custom") {
                            var whiteOrBlack = this.whiteBlackLeastReadable(base);
                            if (whiteOrBlack === "#000000") { widgetBorder = "#333333"; }
                        }
                        return widgetBorder;
                    },
                    calculate_base_font: function(base) {
                        return baseFontName;
                    }
                }
                var sizes = {
                    sx: 48, // width of <1> grid square
                    sy: 48, // height of <1> grid square
                    gx: 6, // gap between groups
                    gy: 6, // gap between groups
                    cx: 6, // gap between components
                    cy: 6, // gap between components
                    px: 0, // padding of group's cards
                    py: 0  // padding of group's cards
                };

                ensureDashboardNode = function(createMissing) {
                    if (globalDashboardNode !== null) {
                        // Check if it has been deleted beneath us
                        var n = RED.nodes.node(globalDashboardNode.id);
                        if (n === null) { globalDashboardNode = null; }
                    }

                    // Find the old dashboard node
                    if (globalDashboardNode === null) {
                        var bases = [];
                        RED.nodes.eachConfig(function(n) {
                            if (n.type === 'ui_base') { bases.push(n); }
                        });

                        // make sure we only have one ui_base node
                        // at the moment this will just use our existing one - deleting any new base node and theme
                        // at some point we may want to make this an option to select one or the other.
                        while (bases.length > 1) {
                            var n = bases.pop();
                            console.log("Removing ui_base node "+n.id);
                            RED.nodes.remove(n.id);
                            RED.nodes.dirty(true);
                        }

                        if (bases.length === 1) { globalDashboardNode = bases[0]; }

                        // If there is no dashboard node, ensure we create it after
                        // initialising
                        var noDashboardNode = (globalDashboardNode === null);

                        // set up theme state
                        var themeState = {};
                        var baseColor = "#0094CE"
                        for (var i=0; i<baseStyles.length; i++) {
                            themeState[baseStyles[i]] = { default:baseColor, value:baseColor, edited:false };
                        }
                        for (var j = 0; j < configurableStyles.length; j++) {
                            var underscore = configurableStyles[j].split("-").join("_");
                            var colour = colours['calculate_'+underscore](baseColor);
                            themeState[configurableStyles[j]] = {value:colour, edited:false};
                        }
                        themeState["base-font"] = {value:baseFontName};

                        var missingFields = (!globalDashboardNode || !globalDashboardNode.theme || !globalDashboardNode.site || !globalDashboardNode.site.sizes );

                        if (missingFields && createMissing) {
                            var lightTheme = {
                                default: baseColor,
                                baseColor: baseColor,
                                baseFont: baseFontName,
                                edited: false
                            }
                            var darkTheme = {
                                default: "#097479",
                                baseColor: "#097479",
                                baseFont: baseFontName,
                                edited: false
                            }
                            var customTheme = {
                                name: 'Untitled Theme 1',
                                default: "#4B7930",
                                baseColor: "#4B7930",
                                baseFont: baseFontName
                            }
                            var oldThemeName;
                            if (globalDashboardNode && typeof(globalDashboardNode.theme === 'string')) { oldThemeName = globalDashboardNode.theme; }

                            var theme = {
                                name: oldThemeName || "theme-light",
                                lightTheme: lightTheme,
                                darkTheme: darkTheme,
                                customTheme: customTheme,
                                themeState: themeState,
                                angularTheme: aTheme
                            }

                            var site_name = c_("site.title");
                            var site_date_format = c_("site.date-format");
                            var site = { name:site_name, hideToolbar:"false", allowSwipe:"false", lockMenu:"false", allowTempTheme:"true", dateFormat:site_date_format, sizes:sizes };
                            if (globalDashboardNode !== null) {
                                if (typeof globalDashboardNode.site !== "undefined") {
                                    site = {
                                        name: globalDashboardNode.site.name || globalDashboardNode.name,
                                        hideToolbar: globalDashboardNode.site.hideToolbar,
                                        lockMenu: globalDashboardNode.site.lockMenu,
                                        allowSwipe: globalDashboardNode.site.allowSwipe,
                                        allowTempTheme: globalDashboardNode.site.allowTempTheme,
                                        dateFormat: globalDashboardNode.site.dateFormat,
                                        sizes: globalDashboardNode.site.sizes
                                    }
                                }
                                if (globalDashboardNode.theme.hasOwnProperty("angularTheme")) {
                                    aTheme = globalDashboardNode.theme.angularTheme;
                                }
                                else { globalDashboardNode.theme.angularTheme = aTheme; }
                            }

                            if (noDashboardNode) {
                                globalDashboardNode = {
                                    id: RED.nodes.id(),
                                    _def: RED.nodes.getType("ui_base"),
                                    type: "ui_base",
                                    site: site,
                                    theme: theme,
                                    users: []
                                }
                                RED.nodes.add(globalDashboardNode);
                                RED.editor.validateNode(globalDashboardNode);
                            }
                            else {
                                globalDashboardNode["_def"] = RED.nodes.getType("ui_base");
                                globalDashboardNode.site = site;
                                globalDashboardNode.theme = theme;
                                delete globalDashboardNode.name;
                            }
                            $("#nr-db-field-font").val(baseFontName);
                            RED.nodes.dirty(true);
                        }
                    }
                }

                var content = $("<div>").css({"position":"relative","height":"100%"});
                var mainContent = $("<div>",{class:"nr-db-sb"}).appendTo(content);
                var form = $('<form class="dialog-form">').appendTo(mainContent);

                // Dashboard Tabs markup
                var divTab = $('<div class="red-ui-tabs">').appendTo(form);
                var ulDashboardTabs = $('<ul id="dashboard-tabs-list"></ul>').appendTo(divTab);
                var layout_label = c_("label.layout");
                var site_label = c_("label.site");
                var theme_label = c_("label.theme");
                var angular_label = c_("label.angular");
                var liLayoutTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Layout"><span>'+layout_label+'</span></a></li>').appendTo(ulDashboardTabs);
                var liSiteTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Site" style="width:60px;"><span>'+site_label+'</span></a></li>').appendTo(ulDashboardTabs);
                var liThemeTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Theme" style="width:80px;"><span>'+theme_label+'</span></a></li>').appendTo(ulDashboardTabs);
                var liAngularTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Angular" style="width:80px;"><span>'+angular_label+'</span></a></li>').appendTo(ulDashboardTabs);

                // Link out to dashboard
                $.getJSON('uisettings',function(data) {
                    if (data.hasOwnProperty("path")) { uip = data.path; }
                    var lnk = document.location.host+RED.settings.httpNodeRoot+"/"+uip;
                    var re = new RegExp('\/{1,}','g');
                    lnk = lnk.replace(re,'/');
                    if (!RED.hasOwnProperty("actions")) {
                        RED.keyboard.add("*",/* d */ 68,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+lnk, "nr-dashboard") });
                    }
                    else {
                        RED.actions.add("dashboard:show-dashboard",function() { window.open(document.location.protocol+"//"+lnk, "nr-dashboard") });
                        RED.keyboard.add("*","ctrl-shift-d","dashboard:show-dashboard");
                    }
                    $('<span id="dash-link-button" class="editor-button" style="position:absolute; right:0px;"><i class="fa fa-external-link"></i></span>')
                    .click(function(evt) {
                        window.open(document.location.protocol+"//"+lnk);
                        evt.preventDefault();
                    })
                    .appendTo(ulDashboardTabs);
                });

                // Dashboard Tab containers
                var layoutTab = $('<div id="dashboard-layout" style="height:calc(100% - 48px)">').appendTo(form);
                var siteTab = $('<div id="dashboard-site" style="display:none;">').appendTo(form);
                var themeTab = $('<div id="dashboard-theme" style="display:none;">').appendTo(form);
                var angularTab = $('<div id="dashboard-angular" style="display:none;">').appendTo(form);

                ulDashboardTabs.children().first().addClass("active");

                // Tab logic
                var onTabClick = function() {
                    //Toggle tabs
                    ulDashboardTabs.children().removeClass("active");
                    ulDashboardTabs.children().css({"transition": "width 100ms"});
                    $(this).parent().addClass("active");

                    var selectedTab = $(this)[0].title;
                    if (selectedTab === 'Layout') {
                        themeTab.hide();
                        siteTab.hide();
                        angularTab.hide();
                        layoutTab.show();
                    }
                    else if (selectedTab === 'Angular') {
                        themeTab.hide();
                        siteTab.hide();
                        angularTab.show();
                        layoutTab.hide();
                    }
                    else if (selectedTab === 'Theme') {
                        layoutTab.hide();
                        siteTab.hide();
                        angularTab.hide();
                        themeTab.show();
                        if ($("#nr-db-field-theme option:selected").val() === 'theme-custom') { themeSettingsContainer.show(); }
                        else { themeSettingsContainer.hide(); }
                    }
                    else {
                        layoutTab.hide();
                        themeTab.hide();
                        angularTab.hide();
                        siteTab.show();
                    }
                }

                ulDashboardTabs.find("li.red-ui-tab a").on("click",onTabClick)

                // Site Tab
                var divTitle = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
                $('<div>').html('<b>'+c_("label.title")+'</b>').appendTo(divTitle);
                $('<input type="text" id="nr-db-field-title">').val(site_name).css("width","100%")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.name !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.name = $(this).val();
                    }
                    RED.nodes.dirty(true);
                })
                .appendTo(divTitle);

                var divHideToolbar = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
                $('<div>').html('<b>'+c_("label.options")+'</b>').appendTo(divHideToolbar);
                $('<select id="nr-db-field-hideToolbar">')
                .css("width","100%")
                .append($('<option>', { value:"false", text:c_("title-bar.show"), selected:true }))
                .append($('<option>', { value:"true", text:c_("title-bar.hide") }))
                .val("false")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.hideToolbar !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.hideToolbar = $(this).val();
                    }
                    RED.nodes.dirty(true);
                })
                .appendTo(divHideToolbar);

                var divLockMenu = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
                $('<select id="nr-db-field-lockMenu">')
                .css("width","100%")
                .append($('<option>', { value:"false", text:c_("lock.clicked"), selected:true }))
                .append($('<option>', { value:"true", text:c_("lock.locked") }))
                .append($('<option>', { value:"icon", text:c_("lock.locked-icon") }))
                .val("false")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.lockMenu !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.lockMenu = $(this).val();
                    }
                    RED.nodes.dirty(true);
                })
                .appendTo(divLockMenu);

                var divAllowSwipe = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
                $('<select id="nr-db-field-allowSwipe">')
                .css("width","100%")
                .append($('<option>', { value:"false", text:c_("swipe.no-swipe"), selected:true }))
                .append($('<option>', { value:"true", text:c_("swipe.allow-swipe") }))
                .append($('<option>', { value:"mouse", text:c_("swipe.allow-swipe-mouse") }))
                .append($('<option>', { value:"menu", text:c_("swipe.show-menu") }))
                .val("false")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.allowSwipe !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.allowSwipe = $(this).val();
                        RED.nodes.dirty(true);
                    }
                })
                .appendTo(divAllowSwipe);

                var divAllowTempTheme = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
                $('<select id="nr-db-field-allowTempTheme">')
                .css("width","100%")
                .append($('<option>', { value:"true", text:c_("temp.allow-theme"), selected:true }))
                .append($('<option>', { value:"false", text:c_("temp.no-theme") }))
                .append($('<option>', { value:"none", text:c_("temp.none") }))
                .val("true")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.allowTempTheme !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.allowTempTheme = $(this).val();
                    }
                    if ($('#nr-db-field-allowTempTheme').val() === "none") {
                        ulDashboardTabs.children().eq(2).addClass("hidden");
                        ulDashboardTabs.children().eq(3).removeClass("hidden");
                    }
                    else {
                        ulDashboardTabs.children().eq(2).removeClass("hidden");
                        ulDashboardTabs.children().eq(3).addClass("hidden");
                    }
                    RED.nodes.dirty(true);
                })
                .appendTo(divAllowTempTheme);

                var site_name = c_("site.title");
                var site_date_format = c_("site.date-format");
                var divDateFormat = $('<div>',{class:"form-row"}).appendTo(siteTab);
                $('<div>').html('<b>'+c_("label.date-format")+'</b>')
                .css("width","80%")
                .css("display","inline-block")
                .appendTo(divDateFormat);
                $('<div>').html("<a href='https://momentjs.com/docs/#/displaying/format/' target='_new'><i class='fa fa-info-circle' style='color:grey;'></i></a>")
                .css("display","inline-block")
                .css("margin-right","6px")
                .css("float","right")
                .appendTo(divDateFormat);
                $('<input type="text" id="nr-db-field-dateFormat">').val(site_date_format).css("width","100%")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.site.dateFormat !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.site.dateFormat = $(this).val();
                    }
                    RED.nodes.dirty(true);
                })
                .appendTo(divDateFormat);

                var divSetSizes = $('<div>',{class:"form-row"}).appendTo(siteTab);
                $('<span style="width:45%; display:inline-block">').html('<b>'+c_("label.sizes")+'</b>').appendTo(divSetSizes);
                $('<span style="width:25%; display:inline-block; font-size:smaller">').text(c_("label.horizontal")).appendTo(divSetSizes);
                $('<span style="width:20%; display:inline-block; font-size:smaller">').text(c_("label.vertical")).appendTo(divSetSizes);
                $('<i id="sizes-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                .css({opacity:1.0})
                .click(function(e) {
                    $("#nr-db-field-sx").val(sizes.sx); globalDashboardNode.site.sizes.sx = sizes.sx;
                    $("#nr-db-field-sy").val(sizes.sy); globalDashboardNode.site.sizes.sy = sizes.sy;
                    $("#nr-db-field-px").val(sizes.px); globalDashboardNode.site.sizes.px = sizes.px;
                    $("#nr-db-field-py").val(sizes.py); globalDashboardNode.site.sizes.py = sizes.py;
                    $("#nr-db-field-gx").val(sizes.gx); globalDashboardNode.site.sizes.gx = sizes.gx;
                    $("#nr-db-field-gy").val(sizes.gy); globalDashboardNode.site.sizes.gy = sizes.gy;
                    $("#nr-db-field-cx").val(sizes.cx); globalDashboardNode.site.sizes.cx = sizes.cx;
                    $("#nr-db-field-cy").val(sizes.cy); globalDashboardNode.site.sizes.cy = sizes.cy;
                    RED.nodes.dirty(true);
                })
                .appendTo(divSetSizes);

                $('<br/><span style="width:45%; display:inline-block">').text(c_("label.widget-size")).appendTo(divSetSizes);
                $('<input type="number" name="sx" min="24" id="nr-db-field-sx">').val(48).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.sx=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);
                $('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
                $('<input type="number" name="sy" min="24" id="nr-db-field-sy">').val(48).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.sy=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);

                $('<br/><span style="width:45%; display:inline-block">').text(c_("label.widget-spacing")).appendTo(divSetSizes);
                $('<input type="number" name="cx" min="0" id="nr-db-field-cx">').val(6).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.cx=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);
                $('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
                $('<input type="number" name="cy" min="0" id="nr-db-field-cy">').val(6).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.cy=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);

                $('<br/><span style="width:45%; display:inline-block">').text(c_("label.group-padding")).appendTo(divSetSizes);
                $('<input type="number" name="px" min="0" id="nr-db-field-px">').val(0).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.px=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);
                $('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
                $('<input type="number" name="py" min="0" id="nr-db-field-py">').val(0).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.py=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);

                $('<br/><span style="width:45%; display:inline-block">').text(c_("label.group-spacing")).appendTo(divSetSizes);
                $('<input type="number" name="gx" min="0" id="nr-db-field-gx">').val(6).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.gx=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);
                $('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
                $('<input type="number" name="gy" min="0" id="nr-db-field-gy">').val(6).css("width","20%")
                .on("change", function() {
                    //ensureDashboardNode(true);
                    globalDashboardNode.site.sizes.gy=Number($(this).val()); RED.nodes.dirty(true); } )
                .appendTo(divSetSizes);

                // Angular Theme Tab
                var changed = function() {
                    ensureDashboardNode(true);
                    globalDashboardNode.theme.angularTheme = aTheme;
                    RED.nodes.dirty(true);
                }

                var angColorList = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal", "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey"];
                var angColors = "";
                angColorList.forEach(function(c) { angColors += '<option value="' + c + '">' + c + '</option>'; });

                var divPrimStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
                $('<span style="width:45%; display:inline-block">')
                    .html('<b>'+c_("style.primary")+'</b>')
                    .appendTo(divPrimStyle);
                $('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                    .css({opacity:1.0})
                    .click(function(e) {
                        $("#nr-db-field-angPrimary").val("indigo");
                        globalDashboardNode.theme.angularTheme.primary = "indigo";
                        RED.nodes.dirty(true);
                    })
                    .appendTo(divPrimStyle);
                $('<select id="nr-db-field-angPrimary">'+angColors+'</select>')
                    .css("width","100%")
                    .val(aTheme.primary)
                    .on("change", function() { aTheme.primary = $(this).val(); changed(); })
                    .appendTo(divPrimStyle);

                var divAccStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
                $('<span style="width:45%; display:inline-block">')
                    .html('<b>'+c_("style.accents")+'</b>')
                    .appendTo(divAccStyle);
                $('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                    .css({opacity:1.0})
                    .click(function(e) {
                        $("#nr-db-field-angAccents").val("blue");
                        globalDashboardNode.theme.angularTheme.accents = "blue";
                        RED.nodes.dirty(true);
                    })
                    .appendTo(divAccStyle);
                $('<select id="nr-db-field-angAccents">'+angColors+'</select>')
                    .css("width","100%")
                    .val(aTheme.accents)
                    .on("change", function() { aTheme.accents = $(this).val(); changed(); })
                    .appendTo(divAccStyle);

                var divWarnStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
                $('<span style="width:45%; display:inline-block">')
                    .html('<b>'+c_("style.warnings")+'</b>')
                    .appendTo(divWarnStyle);
                $('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                    .css({opacity:1.0})
                    .click(function(e) {
                        $("#nr-db-field-angWarn").val("red");
                        globalDashboardNode.theme.angularTheme.warn = "red";
                        RED.nodes.dirty(true);
                    })
                    .appendTo(divWarnStyle);
                $('<select id="nr-db-field-angWarn">'+angColors+'</select>')
                    .css("width","100%")
                    .val(aTheme.warn)
                    .on("change", function() { aTheme.warn = $(this).val(); changed(); })
                    .appendTo(divWarnStyle);

                var divBackStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
                $('<span style="width:45%; display:inline-block">')
                    .html('<b>'+c_("style.background")+'</b>')
                    .appendTo(divBackStyle);
                $('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                    .css({opacity:1.0})
                    .click(function(e) {
                        $("#nr-db-field-angBackground").val("grey");
                        globalDashboardNode.theme.angularTheme.background = "grey";
                        RED.nodes.dirty(true);
                    })
                    .appendTo(divBackStyle);
                $('<select id="nr-db-field-angBackground">'+angColors+'</select>')
                    .css("width","100%")
                    .val(aTheme.background)
                    .on("change", function() { aTheme.background = $(this).val(); changed(); })
                    .appendTo(divBackStyle);

                var divPalStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
                $('<span style="width:45%; display:inline-block">')
                    .html('<b>'+c_("style.palette")+'</b>')
                    .appendTo(divPalStyle);
                var lightdark = '<option value="light">' +c_("style.light")+ '</option>';
                lightdark += '<option value="dark">' +c_("style.dark")+ '</option>';
                $('<select id="nr-db-field-angLook">'+lightdark+'</select>')
                    .css("width","100%")
                    .val(aTheme.palette)
                    .on("change", function() { aTheme.palette = $(this).val(); changed(); })
                    .appendTo(divPalStyle);

                // Theme Tab
                // For all customisable styles, generate and apply the css
                var generateColours = function(base) {
                    var theme = globalDashboardNode.theme.name.split('-')[1];
                    if (!globalDashboardNode.theme.themeState.hasOwnProperty["base-font"]) {
                        if (globalDashboardNode.theme[theme+"Theme"].baseFont === "Helvetica Neue") {
                            globalDashboardNode.theme[theme+"Theme"].baseFont = baseFontName;
                        }
                        globalDashboardNode.theme.themeState["base-font"] = {value:globalDashboardNode.theme[theme+"Theme"].baseFont};
                        $("#nr-db-field-font").val(globalDashboardNode.theme[theme+"Theme"].baseFont);
                    }
                    for (var i=0; i<configurableStyles.length; i++) {
                        var styleID = configurableStyles[i];
                        var underscore = styleID.split("-").join("_");
                        if (!globalDashboardNode.theme.themeState.hasOwnProperty(styleID)) {
                            globalDashboardNode.theme.themeState[styleID] = {value:"#fff",edited:false};
                        }
                        if (!globalDashboardNode.theme.themeState[styleID].edited || globalDashboardNode.theme[theme+'Theme'].reset) {
                            var colour = colours['calculate_'+underscore](base);
                            globalDashboardNode.theme.themeState[styleID].value = colour;
                        }
                        setColourPickerColour(styleID, globalDashboardNode.theme.themeState[styleID].value, globalDashboardNode.theme.themeState[styleID].edited);
                    }
                    globalDashboardNode.theme[theme+'Theme'].reset = false;
                }

                var divThemeStyle = $('<div>',{class:"form-row"}).appendTo(themeTab);
                $('<label class="nr-db-theme-label">').text(c_("theme.style")).appendTo(divThemeStyle);
                var themeSelection = $('<select id="nr-db-field-theme">'+
                    '<option value="theme-light">'+c_("style.light")+'</option>'+
                    '<option value="theme-dark">'+c_("style.dark")+'</option>'+
                    '<option value="theme-custom">'+c_("style.custom")+'</option>'+
                    '</select>')
                .css("width","100%")
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.theme.name !== $(this).val()) {
                        //ensureDashboardNode(true);
                        var theme = globalDashboardNode.theme.name.split('-')[1];
                        var baseColour = globalDashboardNode.theme[theme+'Theme'].baseColor;
                        var baseFont = globalDashboardNode.theme[theme+'Theme'].baseFont;
                        globalDashboardNode.theme.name = $(this).val();
                        theme = globalDashboardNode.theme.name.split('-')[1];
                        if (theme !== "custom") {
                            baseColour = globalDashboardNode.theme[theme+'Theme'].default;
                        }
                        else { baseColour = globalDashboardNode.theme[theme+'Theme'].baseColor; }
                        setColourPickerColour("base-color", baseColour);
                        globalDashboardNode.theme.themeState['base-color'].value = baseColour;
                        globalDashboardNode.theme.themeState['base-color'].default = baseColour;
                        globalDashboardNode.theme.themeState['base-font'] = {value:baseFont};
                        $("#nr-db-field-font").val(baseFont);
                        globalDashboardNode.theme[theme+'Theme'].reset = true;
                        //generate colours for all colour settings from base colour
                        generateColours(baseColour);
                        RED.nodes.dirty(true);
                    }
                    $('#base-color-reset').remove();
                    if ($(this).val() === 'theme-custom') {
                        $("#custom-theme-library-container").show(); //TODO undo this at some point
                        $("#custom-theme-settings").show();
                        //addResetButton('base-color', baseSettingsUl.children());
                    }
                    else {
                        $("#custom-theme-library-container").hide();
                        $("#custom-theme-settings").hide();
                        addLightAndDarkResetButton('base-color', baseSettingsUl.children().first());
                    }
                })
                .appendTo(divThemeStyle);

                var customThemeLibraryContainer = $('<div id="custom-theme-library-container">').appendTo(themeTab);
                $('<label class="nr-db-theme-label">').text(c_("theme.custom-profile")).appendTo(customThemeLibraryContainer);
                $('<input type="text" id="ui-sidebar-name" style="vertical-align:top;" placeholder="profile name (not blank)">')
                .val(c_("theme.custom-profile-name"))
                .on("change", function() {
                    if (!globalDashboardNode || globalDashboardNode.theme.customTheme.name !== $(this).val()) {
                        //ensureDashboardNode(true);
                        globalDashboardNode.theme.customTheme.name = $(this).val();
                        if (editor) {
                            editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
                            RED.nodes.dirty(true);
                        }
                    }
                })
                .keyup(function() {
                    if ($(this).val().length === 0) {
                        $("#custom-theme-library-container div").css("pointer-events","none");
                    }
                    else { $("#custom-theme-library-container div").css("pointer-events","inherit"); }
                })
                .appendTo(customThemeLibraryContainer);
                $('<input type="hidden" id="nr-db-field-format">').appendTo(customThemeLibraryContainer);
                $('<div style="display:none;" class="node-text-editor" id="nr-db-field-format-editor"></div>').appendTo(customThemeLibraryContainer);

                var baseThemeSettingsContainer = $('<div id="base-theme-settings">').appendTo(themeTab);

                var baseSettings = $('<div>',{class:"form-row"}).appendTo(baseThemeSettingsContainer);
                $('<label class="nr-db-theme-label">').text(c_("theme.base-settings")).appendTo(baseSettings);
                var baseSettingsUl = $('<ul id="base-settings-ul" class="red-ui-dashboard-theme-styles"></ul>').appendTo(baseSettings);

                var baseColourItem = $('<li class="red-ui-dashboard-theme-item"><span>'+c_("base.colour")+'</span></li>').appendTo(baseSettingsUl);
                var spanColorContainer = $('<span class="nr-db-color-pick-container"></span>').appendTo(baseColourItem);

                $('<input id="base-color" class="nr-db-field-themeColor" type="color" value="#ffffff"/>')
                .on("change", function() {
                    //ensureDashboardNode(true);
                    var value = $(this).val();
                    var lightThemeMatch = globalDashboardNode.theme.lightTheme.baseColor === value;
                    var darkThemeMatch = globalDashboardNode.theme.darkTheme.baseColor === value;
                    var customThemeMatch = globalDashboardNode.theme.customTheme.baseColor === value;
                    if (!globalDashboardNode || !lightThemeMatch || !darkThemeMatch || !customThemeMatch) {
                        var theme = globalDashboardNode.theme.name.split('-')[1];
                        globalDashboardNode.theme[theme+'Theme'].baseColor = value;
                        if (globalDashboardNode.theme.name === 'theme-light' || globalDashboardNode.theme.name === 'theme-dark') {
                            //for light and dark themes, reset the colours
                            globalDashboardNode.theme[theme+'Theme'].reset = true;
                        }
                        generateColours(value);
                        editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
                        colourPickerChangeHandler($(this).attr('id'), value);
                    }
                })
                .appendTo(spanColorContainer);

                var baseFontItem = $('<li class="red-ui-dashboard-theme-item"><span>'+c_("base.font")+'</span></li>').appendTo(baseSettingsUl);
                var fontSelector = $('<select id="nr-db-field-font">'+
                    '<option value="'+baseFontName+'" style="font-family:'+baseFontName+'">'+c_("font.system")+'</option>'+
                    '<option value="Arial,Arial,Helvetica,sans-serif" style="font-family:Arial,Arial,Helvetica,sans-serif">Arial</option>'+
                    '<option value="Arial Black,Arial Black,Gadget,sans-serif" style="font-family:Arial Black,Arial Black,Gadget,sans-serif">Arial Black</option>'+
                    '<option value="Arial Narrow,Nimbus Sans L,sans-serif" style="font-family:Arial Narrow,Nimbus Sans L,sans-serif">Arial Narrow</option>'+
                    '<option value="Century Gothic,CenturyGothic,AppleGothic,sans-serif" style="font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif">Century Gothic</option>'+
                    '<option value="Copperplate,Copperplate Gothic Light,fantasy" style="font-family:Copperplate,Copperplate Gothic Light,fantasy;">Copperplate</option>'+
                    '<option value="Courier,monospace" style="font-family:Courier,monospace;">Courier</option>'+
                    '<option value="Georgia,Georgia,serif" style="font-family:Georgia,Georgia,serif">Georgia</option>'+
                    '<option value="Gill Sans,Geneva,sans-serif" style="font-family:Gill Sans,Geneva,sans-serif;">Gill Sans</option>'+
                    //'<option value="Helvetica Neue,Helvetica,sans-serif" style="font-family:Helvetica Neue,Helvetica,sans-serif">Helvetica Neue</option>'+
                    '<option value="Impact,Impact,Charcoal,sans-serif" style="font-family:Impact,Impact,Charcoal,sans-serif">Impact</option>'+
                    '<option value="Lucida Sans Typewriter,Lucida Console,Monaco,monospace" style="font-family:Lucida Console,Monaco,monospace">Lucida Console</option>'+
                    '<option value="Lucida Sans Unicode,Lucida Grande,sans-serif" style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans</option>'+
                    '<option value="Palatino Linotype,Palatino,Book Antiqua,serif" style="font-family:Palatino Linotype,Palatino,Book Antiqua,serif">Palatino Linotype</option>'+
                    '<option value="Tahoma,Geneva,sans-serif" style="font-family:Tahoma,Geneva,sans-serif">Tahoma</optionstyle="font-family:>'+
                    '<option value="Times New Roman,Times,serif" style="font-family:Times New Roman,Times,serif">Times New Roman</option>'+
                    '<option value="Trebuchet MS,Helvetica,sans-serif" style="font-family:Trebuchet MS,Helvetica,sans-serif">Trebuchet MS</option>'+
                    '<option value="Verdana,Verdana,Geneva,sans-serif" style="font-family:Verdana,Verdana,Geneva,sans-serif">Verdana</option>'+
                    '</select>')
                    .on("change", function() {
                        //ensureDashboardNode(true);
                        var theme = globalDashboardNode.theme.name.split('-')[1];
                        globalDashboardNode.theme[theme+'Theme'].baseFont = $(this).val();
                        globalDashboardNode.theme.themeState['base-font'] = {value:$(this).val()};
                        RED.nodes.dirty(true);
                    })
                    .appendTo(baseFontItem);

                var themeSettingsContainer = $('<div id="custom-theme-settings">').appendTo(themeTab);

                // Markup
                // Page styles
                var divPageStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
                $('<label class="nr-db-theme-label">').text(c_("theme.page-settings")).appendTo(divPageStyle);
                var pageStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
                addCustomisableStyle('page-titlebar-backgroundColor', c_("theme.page.title"), pageStyles);
                addCustomisableStyle('page-backgroundColor', c_("theme.page.page"), pageStyles);
                addCustomisableStyle('page-sidebar-backgroundColor', c_("theme.page.side"), pageStyles);

                // Group styles
                var divGroupStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
                $('<label class="nr-db-theme-label">').text(c_("theme.group-settings")).appendTo(divGroupStyle);
                var groupStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
                addCustomisableStyle('group-textColor', c_("theme.group.text"), groupStyles);
                addCustomisableStyle('group-borderColor', c_("theme.group.border"), groupStyles);
                addCustomisableStyle('group-backgroundColor', c_("theme.group.background"), groupStyles);

                // Widget styles
                var divWidgetStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
                $('<label class="nr-db-theme-label">').text(c_("theme.widget-settings")).appendTo(divWidgetStyle);
                var widgetStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
                addCustomisableStyle('widget-textColor', c_("theme.widget.text"), widgetStyles);
                addCustomisableStyle('widget-backgroundColor', c_("theme.widget.colour"), widgetStyles);
                addCustomisableStyle('widget-borderColor', c_("theme.widget.background"), widgetStyles);

                function addCustomisableStyle(id, name, parentUl) {
                    var styleLi = $('<li class="red-ui-dashboard-theme-item"><span>'+name+'</span></li>').appendTo(parentUl);
                    var spanColorContainer = $('<span class="nr-db-color-pick-container"></span>').appendTo(styleLi);
                    $('<input id="'+id+'" class="nr-db-field-themeColor" type="color" value="#ffffff"/>')
                    .on("change", function() {
                        colourPickerChangeHandler($(this).attr('id'), $(this).val());
                    })
                    .appendTo(spanColorContainer);
                    addResetButton(id, styleLi);
                }

                function colourPickerChangeHandler(id, value) {
                    $("#"+id).css("background-color", value);
                    $("#"+id+"-reset").css({opacity:1});
                    globalDashboardNode.theme.themeState[id].edited = true;
                    globalDashboardNode.theme.themeState[id].value = value;
                    if (editor) {
                        editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
                    }
                    RED.nodes.dirty(true);
                }

                function addResetButton(id, parent) {
                    var resetToDefault = $('<i id="'+id+'-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                    .css({opacity:0.2})
                    .click(function(e) { resetClick(e); })
                    .appendTo(parent);
                }

                function addLightAndDarkResetButton(id, parent) {
                    if ($("#" + id + "-reset").length === 0) {
                        var resetToDefault = $('<i id="'+id+'-reset" class="fa fa-undo nr-db-resetIcon"></i>')
                        .css({opacity:1})
                        .click(function(e) { lightAndDarkResetClick(e); })
                        .appendTo(parent);
                        globalDashboardNode.theme[globalDashboardNode.theme.name.split('-')[1] + 'Theme'].edited = true;
                    }
                }

                function lightAndDarkResetClick(e) {
                    var elementID = e.target.id.split('-reset')[0];
                    var key = globalDashboardNode.theme.name.split('-')[1] + 'Theme';
                    //sanity check - light and dark only allow base-color-reset
                    if (elementID === 'base-color') { // && globalDashboardNode.theme[key].edited) {
                        var defaultColor = globalDashboardNode.theme[key].default;
                        globalDashboardNode.theme[key].reset = true;
                        generateColours(defaultColor);
                        setColourPickerColour(elementID, defaultColor);
                        $("#"+elementID+"-reset").css({opacity:0.2});
                        globalDashboardNode.theme.themeState[elementID].value = defaultColor;
                        globalDashboardNode.theme[key].baseColor = defaultColor;
                        globalDashboardNode.theme[key].edited = false;
                        RED.nodes.dirty(true);
                    }
                }

                function resetClick(e) {
                    //take off -reset
                    var elementID = e.target.id.split('-reset')[0];
                    if (globalDashboardNode.theme.themeState[elementID].edited) {
                        var defaultColor = globalDashboardNode.theme.themeState['base-color'].value;
                        var colour;
                        //set colour
                        if (elementID === 'base-color') {
                            colour = defaultColor;
                            generateColours(colour);
                        }
                        else {
                            var underscore = elementID.split('-').join('_');
                            colour = colours['calculate_'+underscore](defaultColor);
                        }
                        setColourPickerColour(elementID, colour);
                        $("#"+elementID+"-reset").css({opacity:0.2});
                        globalDashboardNode.theme.themeState[elementID].edited = false;
                        globalDashboardNode.theme.themeState[elementID].value = colour;
                        RED.nodes.dirty(true);
                    }
                }

                function setColourPickerColour(id, val, ed) {
                    $("#"+id).val(val);
                    $("#"+id).css("background-color", val);
                    //call mostReadableGreyWhite to set text colour
                    var textColor = colours.whiteGreyMostReadable(val);
                    $("#"+id).css("color", textColor);
                    if (ed === true) { $("#"+id+"-reset").css({opacity:1}); }
                    else { $("#"+id+"-reset").css({opacity:0.2}); }
                }

                //Layout Tab
                var divTabs = $('<div>',{class:"form-row",style:"position:relative"}).appendTo(layoutTab);
                $('<label>').html('<b>'+c_("layout.tab-and-link")+'</b>').appendTo(divTabs);

                var buttonGroup = $('<div>',{class:"nr-db-sb-list-button-group"}).appendTo(divTabs);

                //Toggle expand buttons
                $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-angle-double-up"></i></a>')
                .click(function(evt) {
                    tabContainer.find(".nr-db-sb-group-list-container").slideUp().addClass('nr-db-sb-collapsed');
                    tabContainer.find(".nr-db-sb-tab-list-header>.nr-db-sb-list-chevron").css({"transform":"rotate(-90deg)"});
                    evt.preventDefault();
                })
                .appendTo(buttonGroup);
                $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-angle-double-down"></i></a>')
                .click(function(evt) {
                    tabContainer.find(".nr-db-sb-group-list-container").slideDown().removeClass('nr-db-sb-collapsed');
                    tabContainer.find(".nr-db-sb-tab-list-header>.nr-db-sb-list-chevron").css({"transform":""});
                    evt.preventDefault();
                })
                .appendTo(buttonGroup);

                //Add item button
                $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.tab")+'</a>')
                .click(function(evt) {
                    tabContainer.editableList('addItem',{type: 'ui_tab'});
                    evt.preventDefault();
                })
                .appendTo(buttonGroup);
                $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.link")+'</a>')
                .click(function(evt) {
                    tabContainer.editableList('addItem',{type: 'ui_link'});
                    evt.preventDefault();
                })
                .appendTo(buttonGroup);

                var tabLists = {};
                var groupLists = {};

                // toggle slide tab group content
                var titleToggle = function (id,content,chevron) {
                    return function(evt) {
                        if (content.is(":visible")) {
                            content.slideUp();
                            chevron.css({"transform":"rotate(-90deg)"});
                            content.addClass('nr-db-sb-collapsed');
                            listStates[id] = false;
                        }
                        else {
                            content.slideDown();
                            chevron.css({"transform":""});
                            content.removeClass('nr-db-sb-collapsed');
                            listStates[id] = true;
                        }
                    };
                }

                var addTabOrLinkItem = function(container,i,item) {
                    ensureDashboardNode(true);
                    // create node if needed
                    if (!item.node) {
                        var defaultItem = {
                            'ui_tab': {
                                _def: RED.nodes.getType('ui_tab'),
                                type: 'ui_tab',
                                users: [],
                                icon: 'dashboard',
                                name: 'Tab'
                            },
                            'ui_link': {
                                _def: RED.nodes.getType('ui_link'),
                                type: 'ui_link',
                                users: [],
                                icon: 'open_in_browser',
                                name: 'Link',
                                target: 'newtab'
                            }
                        }
                        item.node = defaultItem[item.type]
                        item.node.id = RED.nodes.id()
                        item.node.order = i+1
                        item.node.name += ' '+item.node.order
                        listElements[item.node.id] = container;
                        if (item.type === 'ui_tab') {
                            item.groups = [];
                        }
                        RED.nodes.add(item.node);
                        RED.editor.validateNode(item.node);
                        RED.history.push({
                            t:'add',
                            nodes:[item.node.id],
                            dirty:RED.nodes.dirty()
                        });
                        RED.nodes.dirty(true);
                    }
                    else if (item.type === undefined) {
                        item.type = item.node.type
                    }

                    listElements[item.node.id] = container;
                    if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
                        RED.nodes.updateConfigNodeUsers(item.node);
                    }

                    // title
                    var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-tab-list-header"}).appendTo(container);
                    switch (item.type) {
                        case 'ui_tab': {
                            container.addClass("nr-db-sb-tab-list-item");
                            $('<i class="nr-db-sb-list-handle nr-db-sb-tab-list-handle fa fa-bars"></i>').appendTo(titleRow);
                            var chevron = $('<i class="fa fa-angle-down nr-db-sb-list-chevron">',{style:"width:10px;"}).appendTo(titleRow);
                            var tabicon = "fa-object-group";
                            //var tabicon = item.node.disabled ? "fa-window-close-o" : item.node.hidden ? "fa-eye-slash" : "fa-object-group";
                            $('<i>',{class:"nr-db-sb-icon nr-db-sb-tab-icon fa "+tabicon}).appendTo(titleRow);
                            var tabhide = item.node.hidden ? " nr-db-sb-title-hidden" : "";
                            var tabable = item.node.disabled ? " nr-db-sb-title-disabled" : "";
                            $('<span>',{class:"nr-db-sb-title"+tabhide+tabable}).text(item.node.name||"").appendTo(titleRow);
                            break;
                        }
                        case 'ui_link': {
                            $('<i class="nr-db-sb-list-handle fa fa-bars"></i>').appendTo(titleRow);
                            var title = $('<div class="nr-db-sb-link">').appendTo(titleRow);
                            var nameContainer = $('<div class="nr-db-sb-link-name-container">').appendTo(title);
                            $('<i class="fa fa-external-link"></i>').appendTo(nameContainer);
                            $('<span class="nr-db-sb-link-name">').text(item.node.name||"untitled").appendTo(nameContainer);
                            $('<div class="nr-db-sb-link-url">').text(item.node.link||"http://").appendTo(title);
                            break;
                        }
                    }
                    // buttons
                    var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group",id: item.node.id}).appendTo(titleRow);
                    if (item.type === 'ui_tab') {
                        var addGroupButton = $('<a href="#" class="nr-db-sb-tab-add-group-button editor-button editor-button-small nr-db-sb-list-header-button" ><i class="fa fa-plus"></i> '+c_("layout.group")+'</a>').appendTo(buttonGroup);
                    }
                    var editButton = $('<a href="#" class="nr-db-sb-tab-edit-button editor-button  editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
                    editButton.on('click',function(evt) {
                        RED.editor.editConfig("", item.type, item.node.id);
                        evt.stopPropagation();
                        evt.preventDefault();
                    });

                    // Dashboard layout tool
                    if (item.type === 'ui_tab') {
                        var layoutButton = $('<a href="#" class="nr-db-sb-tab-edit-layout-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.layout")+'</a>').appendTo(buttonGroup);
                        layoutButton.on('click',function(evt) {
                            var editTabName = item.node.name ? item.node.name : item.node.id;
                            var trayOptions = {
                                title: c_("layout.layout-editor") + " : " + editTabName,
                                width: Infinity,
                                buttons: [
                                    {
                                        id: "node-dialog-cancel",
                                        text: RED._("common.label.cancel"),
                                        click: function() {
                                            // clean editor
                                            RED.tray.close();
                                        }
                                    },
                                    {
                                        id: "node-dialog-ok",
                                        text: RED._("common.label.done"),
                                        class: "primary",
                                        click: function() {
                                            // Save data after editing
                                            saveGridDatas();
                                            RED.tray.close();
                                        }
                                    }
                                ],
                                resize: function(dimensions) {},
                                open: function(tray) {
                                    // Get widget of specified tab from node information
                                    tabDatas = getTabDataFromNodes(item.node.id);
                                    // The width that can be handled by Layout is up to MAX_GROUP_WIDTH
                                    // Groups exceeding the maximum width are not supported.
                                    var tmpGroups = tabDatas.groups;
                                    tmpGroups.sort(compareOrder);
                                    var groups = [];
                                    for (var cnt = 0; cnt < tmpGroups.length; cnt++) {
                                        if (tmpGroups[cnt].width <= MAX_GROUP_WIDTH) {
                                            groups.push(tmpGroups[cnt]);
                                        }
                                    }
                                    tabDatas.groups = groups;

                                    var editor = $('<div></div>',{addClass: 'nr-dashboard-layout-container-fluid'});
                                    var row =  $('<div></div>',{addClass: 'nr-dashboard-layout-row'});
                                    var span_num = Math.floor(12 / groups.length); // bootstrap grid 12 splits
                                    span_num = span_num < 2 ? 2 : span_num; // max 6 groups per row
                                    for (var cnt = 0; cnt < groups.length; cnt++) {
                                        if (cnt !=0 && (cnt % 6) == 0) {
                                            editor.append(row);
                                            editor.append('<div><br></div>');
                                            row = $('<div></div>',{addClass: 'nr-dashboard-layout-row'});
                                        }
                                        var span = $('<div></div>',{addClass: 'nr-dashboard-layout-span' + span_num});
                                        var groupName = groups[cnt].name ? groups[cnt].name : groups[cnt].id;
                                        var title = $('<div></div>', {
                                            style: "margin-top:2px; margin-bottom:2px;"
                                        });
                                        var title_group = $('<div></div>', {
                                            title: groupName,
                                            style: "margin-left:4px; margin-right:8px; overflow:hidden;"
                                        }).appendTo(title);
                                        $("<b/>").text(groupName).appendTo(title_group);
                                        var title_width = $('<div></div>', {
                                            style: "text-align:right; margin-right:8px;"
                                        }).appendTo(title);
                                        $("<span/>", {
                                            style: "margin_right: 8px;"
                                        }).text(c_("layout.width")+': ').appendTo(title_width);
                                        var changeWidth = $('<input>', {
                                            id: 'change-width' + cnt,
                                            value: groups[cnt].width,
                                            style: 'width:30px;',
                                            readonly: true,
                                            'node-id': groups[cnt].id,
                                        });
                                        title_width.append(changeWidth);

                                        title.css('white-space','nowrap');
                                        title.css('overflow','hidden');
                                        var gridstack = $('<div></div>', {
                                            id: 'grid'+cnt,
                                            addClass: 'grid-stack'
                                        });
                                        span.append(title);
                                        span.append(gridstack);
                                        row.append(span);
                                    }
                                    if (groups.length != 0) {
                                        editor.append(row);
                                    }

                                    // Show layout editor in tray
                                    var trayBody = tray.find('.red-ui-tray-body, .editor-tray-body');
                                    trayBody.css('overflow','auto');
                                    trayBody.append(editor);

                                    /////////////////////////////////////////
                                    // Editor screen generation
                                    /////////////////////////////////////////
                                    oldSpacer = [];
                                    widthChange = [];
                                    widgetResize = [];
                                    widgetDrag = [];
                                    for (var cnt=0; cnt < groups.length; cnt++) {
                                        // Gridstack.js option
                                        var options = {
                                            acceptWidgets: true,
                                            alwaysShowResizeHandle: true,
                                            cellHeight: 42,
                                            disableOneColumnMode : true,
                                            float: true,
                                            verticalMargin: 1
                                        };
                                        var gridID='#grid' + cnt;
                                        // gridstack generation
                                        $(gridID).gridstack(options);

                                        // Clear the contents of Grid
                                        var grid = $(gridID+'.grid-stack').data('gridstack');
                                        grid.removeAll();
                                        $(gridID).on("dropped", handleMove(grid));

                                        // Set the width of the display area of gridstack
                                        var groupWidth = Number(groups[cnt].width);
                                        $(gridID+'.grid-stack').css("width", groupWidth * 40);
                                        $(gridID+'.grid-stack').css("background-size", 100/groupWidth+"% 43px");
                                        $(gridID+'.grid-stack').attr("node-id", groups[cnt].id);
                                        $(gridID+'.grid-stack').attr("grid-column", groups[cnt].width);
                                        grid.setColumn(groupWidth, true);

                                        // Determination of placement position of widget of Grid
                                        var widgets = groups[cnt].widgets;
                                        widgets.sort(compareOrder);

                                        var tbl = {};
                                        for (var cnt2 = 0; cnt2 < widgets.length; cnt2++) {
                                            // Set default value when there is auto width
                                            if (widgets[cnt2].auto == true) {
                                                widgets[cnt2].width = groupWidth;
                                            // Adjust to the group width
                                            } else if (widgets[cnt2].width > groupWidth) {
                                                widgets[cnt2].width = groupWidth;
                                            }
                                            // Auto support
                                            if (widgets[cnt2].auto === true || widgets[cnt2].type === 'ui_form') {
                                                widgets[cnt2].height = getDefaultHeight(widgets[cnt2].id, groupWidth);
                                            }
                                            // Calculate coordinates to be placed
                                            var point = search_point(Number(widgets[cnt2].width), Number(widgets[cnt2].height), groupWidth, 256, tbl);
                                            if (point) {
                                                widgets[cnt2].x = point.x;
                                                widgets[cnt2].y = point.y;
                                            }
                                        }

                                        var items = GridStackUI.Utils.sort(widgets);
                                        items.forEach(function (node) {
                                            var minHeight = null;
                                            var maxHeight = null;
                                            // ui_form is fixed to height 2
                                            if (node.type === 'ui_form') {
                                                minHeight = node.height;
                                                maxHeight = node.height;
                                            }
                                            if (node.type !== 'ui_spacer') {
                                                var dispNode = RED.nodes.node(node.id);
                                                var dispType = dispNode._def.paletteLabel;
                                                var dispLabel = dispNode._def.label;
                                                try {
                                                    dispLabel = (typeof dispLabel === "function" ? dispLabel.call(dispNode) : dispLabel)||"";
                                                }
                                                catch(err) {
                                                    console.log("Definition error: " + node.type + ".label",err);
                                                    dispLabel = dispType;
                                                }

                                                var item = $('<div></div>', {
                                                    'data-noderedtype': node.type,
                                                    'data-noderedid': node.id,
                                                    'data-nodereddisptype': dispType,
                                                    'data-nodereddisplabel': dispLabel,
                                                    'data-noderedsizeauto': node.auto
                                                });
                                                var itemContent = $('<div></div>', {
                                                    addClass: 'grid-stack-item-content',
                                                    title: dispLabel + ':' + dispType
                                                });

                                                if (node.auto === true) {
                                                    itemContent.append('<i class="fa fa-unlock nr-dashboard-layout-resize-enable" title="'+c_("layout.auto")+'"></i>');
                                                } else {
                                                    itemContent.append('<i class="fa fa-lock nr-dashboard-layout-resize-disable" title="'+c_("layout.manual")+'"></i>');
                                                }
                                                itemContent.append('<b>'+ dispLabel +'</b><br/>'+ dispType);
                                                item.append(itemContent);
                                                grid.addWidget(
                                                    item,
                                                    node.x, node.y, node.width, node.height, false, null, null,
                                                    minHeight, maxHeight, node.id);
                                            } else {
                                                // Record the spacer node ID to be deleted
                                                oldSpacer.push(node.id);
                                            }
                                        });

                                        $(gridID+'.grid-stack > .grid-stack-item:visible').each( function(idx, el) {
                                            el = $(el);
                                            var node = el.data('_gridstack_node');
                                            var auto = (el[0].dataset.noderedsizeauto == 'true') ? true : false;
                                            grid.resizable(el, !auto);
                                        });

                                        // Group width change
                                        widthChange.push(new changeGroupWidth(cnt));
                                        // Resize widget in group (start event)
                                        widgetResize.push(new resizeGroupWidget(cnt));
                                        // Dragging widgets in a group (start event)
                                        widgetDrag.push(new dragGroupWidget(cnt));
                                    }
                                    $('.grid-stack>.grid-stack-item>.grid-stack-item-content>.nr-dashboard-layout-resize-disable').on('click',layoutResizeDisable);
                                    $('.grid-stack>.grid-stack-item>.grid-stack-item-content>.nr-dashboard-layout-resize-enable').on('click',layoutResizeEnable);
                                },
                                close: function() {},
                                show: function() {}
                            }
                            RED.tray.show(trayOptions);
                            evt.stopPropagation();
                            evt.preventDefault();
                        });
                    }

                    if (item.type === 'ui_tab') {
                        var content = $('<div>',{class:"nr-db-sb-group-list-container"}).appendTo(container);

                        // ui_tab group chevron
                        if (listStates.hasOwnProperty(item.node.id) && !listStates[item.node.id]) {
                            content.hide();
                            chevron.css({"transform":"rotate(-90deg)"});
                            content.addClass('nr-db-sb-collapsed');
                            listStates[item.node.id] = false;
                        }
                        else {
                            listStates[item.node.id] = true;
                        }
                        titleRow.click(titleToggle(item.node.id,content,chevron));

                        // ui_tab group list
                        var ol = $('<ol>',{class:"nr-db-sb-group-list"}).appendTo(content).editableList({
                            sortable:".nr-db-sb-group-list-header",
                            addButton: false,
                            height: 'auto',
                            connectWith: ".nr-db-sb-group-list",
                            addItem: function(container,i,group) {
                                if (!group.node) {
                                    group.node = {
                                        id: RED.nodes.id(),
                                        _def: RED.nodes.getType("ui_group"),
                                        type: "ui_group",
                                        users: [],
                                        tab: item.node.id,
                                        order: i+1,
                                        name: "Group "+(i+1),
                                        width: 6,
                                        disp: true
                                    };
                                    listElements[group.node.id] = container;
                                    RED.nodes.add(group.node);
                                    RED.editor.validateNode(group.node);
                                    group.widgets = [];
                                    RED.history.push({
                                        t:'add',
                                        nodes:[group.node.id],
                                        dirty:RED.nodes.dirty()
                                    });
                                    RED.nodes.dirty(true);
                                    if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
                                        RED.nodes.updateConfigNodeUsers(group.node);
                                    }
                                }
                                else {
                                    if (group.node.order === undefined) {
                                        group.node.order = i+1;
                                    }
                                }
                                var groupNode = group.node;
                                elementParents[groupNode] = item.node.id;
                                var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-group-list-header"}).appendTo(container);
                                $('<i class="nr-db-sb-list-handle nr-db-sb-group-list-handle fa fa-bars"></i>').appendTo(titleRow);
                                var chevron = $('<i class="fa fa-angle-down nr-db-sb-list-chevron">',{style:"width:10px;"}).appendTo(titleRow);
                                $('<i class="nr-db-sb-icon nr-db-sb-group-icon fa fa-table"></i>').appendTo(titleRow);
                                var title = $('<span class="nr-db-sb-title">').text(groupNode.name||groupNode.id||"").appendTo(titleRow);
                                listElements[groupNode.id] = container;
                                var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group",id:groupNode.id}).appendTo(titleRow);
                                var spacerButton = $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.spacer")+'</a>').appendTo(buttonGroup);
                                spacerButton.on('click',function(evt) {
                                    var spaceNode = {
                                        _def: RED.nodes.getType("ui_spacer"),
                                        type: "ui_spacer",
                                        hasUsers: false,
                                        users: [],
                                        id: RED.nodes.id(),
                                        tab: item.node.name,
                                        group: group.node.id,
                                        order: i+1,
                                        name: "spacer",
                                        width: 1,
                                        height:1,
                                        z: RED.workspaces.active(),
                                        label: function() { return "spacer " + this.width + "x" + this.height; }
                                    };
                                    RED.nodes.add(spaceNode);
                                    RED.editor.validateNode(spaceNode);
                                    RED.history.push({
                                        t:'add',
                                        nodes:[spaceNode.id],
                                        dirty:RED.nodes.dirty()
                                    });
                                    RED.nodes.dirty(true);
                                    RED.view.redraw();
                                    evt.stopPropagation();
                                    evt.preventDefault();
                                });
                                var editButton = $('<a href="#" class="nr-db-sb-edit-group-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
                                var content = $('<div>',{class:"nr-db-sb-widget-list-container"}).appendTo(container);
                                if (!listStates.hasOwnProperty(groupNode.id) || !listStates[groupNode.id]) {
                                    content.hide();
                                    chevron.css({"transform":"rotate(-90deg)"});
                                    content.addClass('nr-db-sb-collapsed');
                                    listStates[groupNode.id] = false;
                                }
                                else {
                                    listStates[groupNode.id] = true;
                                }

                                var ol = $('<ol>',{class:"nr-db-sb-widget-list"}).appendTo(content).editableList({
                                    sortable:".nr-db-sb-widget-list-header",
                                    addButton: false,
                                    height: 'auto',
                                    connectWith: ".nr-db-sb-widget-list",
                                    addItem: function(container,i,widgetNode) {
                                        elementParents[widgetNode.id] = groupNode.id;
                                        var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-widget-list-header"}).appendTo(container);
                                        $('<i class="nr-db-sb-list-handle nr-db-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow);
                                        $('<i class="nr-db-sb-icon nr-db-sb-widget-icon fa fa-picture-o"></i>').click(function(e) { e.preventDefault(); RED.search.show(widgetNode.id); }).appendTo(titleRow);
                                        var l = widgetNode._def.label;
                                        try {
                                            l = (typeof l === "function" ? l.call(widgetNode) : l)||"";
                                        }
                                        catch(err) {
                                            console.log("Definition error: "+d.type+".label",err);
                                            l = d.type;
                                        }
                                        var title = $('<span class="nr-db-sb-title">').text(l).appendTo(titleRow);
                                        listElements[widgetNode.id] = container;
                                        var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group"}).appendTo(titleRow);
                                            var editButton = $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
                                            container.on('mouseover',function() {
                                            widgetNode.highlighted = true;
                                            widgetNode.dirty = true;
                                            RED.view.redraw();
                                        });
                                        container.on('mouseout',function() {
                                            widgetNode.highlighted = false;
                                            widgetNode.dirty = true;
                                            RED.view.redraw();
                                        });
                                        editButton.on('click',function(evt) {
                                            RED.editor.edit(widgetNode);
                                            evt.stopPropagation();
                                            evt.preventDefault();
                                        });
                                    },
                                    sortItems: function(items) {
                                        var historyEvents = [];
                                        items.each(function(i,el) {
                                            var node = el.data('data');
                                            var hev = {
                                                t:'edit',
                                                node:node,
                                                changes:{
                                                    order:node.order,
                                                    group:node.group
                                                },
                                                dirty:node.dirty,
                                                changed:node.changed
                                            };
                                            historyEvents.push(hev);
                                            var changed = false;
                                            if (node.order !== i+1) {
                                                node.order = i+1;
                                                changed = true;
                                            }
                                            if (node.group !== group.node.id) {
                                                var oldGroupNode = RED.nodes.node(node.group);
                                                if (oldGroupNode) {
                                                    var index = oldGroupNode.users.indexOf(node);
                                                    oldGroupNode.users.splice(index,1);
                                                }
                                                node.group = group.node.id;
                                                group.node.users.push(node);
                                                changed = true;
                                            }
                                            if (changed) {
                                                node.dirty = true;
                                                node.changed = true;
                                            }
                                        })
                                        RED.history.push({
                                            t:'multi',
                                            events: historyEvents
                                        });
                                        RED.nodes.dirty(true);
                                        RED.view.redraw();
                                    }
                                });
                                ol.css("min-height","5px");
                                if (groupNode.id) {
                                    groupLists[groupNode.id] = ol;
                                }
                                titleRow.click(titleToggle(groupNode.id,content,chevron));
                                editButton.on('click',function(evt) {
                                    RED.editor.editConfig("", groupNode.type, groupNode.id);
                                    evt.stopPropagation();
                                    evt.preventDefault();
                                });
                                group.widgets.forEach(function(widget) {
                                    ol.editableList('addItem',widget);
                                })
                            },
                            sortItems: function(items) {
                                var historyEvents = [];
                                items.each(function(i,el) {
                                    var groupData = el.data('data');
                                    var node = groupData.node;
                                    var hev = {
                                        t:'edit',
                                        node:node,
                                        changes:{
                                            order:node.order,
                                            tab:node.tab
                                        },
                                        dirty:node.dirty,
                                        changed:node.changed
                                    };
                                    historyEvents.push(hev);
                                    var changed = false;
                                    if (node.order !== i+1) {
                                        node.order = i+1;
                                        changed = true;
                                    }
                                    if (changed) {
                                        node.dirty = true;
                                        node.changed = true;
                                    }
                                    if (node.tab !== item.node.id) {
                                        var oldTabNode = RED.nodes.node(node.tab);
                                        if (oldTabNode) {
                                            var index = oldTabNode.users.indexOf(node);
                                            oldTabNode.users.splice(index,1);
                                        }
                                        node.tab = item.node.id;
                                        item.node.users.push(node);
                                        changed = true;
                                    }
                                })
                                RED.history.push({
                                    t:'multi',
                                    events: historyEvents
                                });
                                RED.nodes.dirty(true);
                                RED.view.redraw();
                            }
                        })
                        tabLists[item.node.id] = ol;

                        addGroupButton.click(function(evt) {
                            ol.editableList('addItem',{});
                            evt.stopPropagation();
                            evt.preventDefault();
                        });
                        item.groups.forEach(function(group) {
                            ol.editableList('addItem',group);
                        });
                    }
                }

                var tabContainer = $('<ol>',{class:"nr-db-sb-tab-list"}).appendTo(divTabs).editableList({
                    sortable:".nr-db-sb-tab-list-header",
                    addButton: false,
                    addItem: addTabOrLinkItem,
                    sortItems: function(items) {
                        var historyEvents = [];
                        items.each(function(i,el) {
                            var itemData = el.data('data');
                            var node = itemData.node;
                            var hev = {
                                t:'edit',
                                node:node,
                                changes:{
                                    order:node.order
                                },
                                dirty:node.dirty,
                                changed:node.changed
                            }
                            historyEvents.push(hev);
                            var changed = false;
                            if (node.order !== i+1) {
                                node.order = i+1;
                                changed = true;
                            }
                            if (changed) {
                                node.dirty = true;
                                node.changed = true;
                            }
                        })
                        RED.history.push({
                            t:'multi',
                            events: historyEvents
                        });
                        RED.nodes.dirty(true);
                        RED.view.redraw();
                    }
                });

                var orphanedWidgets = $('<div>',{class:"form-row"}).appendTo(layoutTab);
                $('<span><i class="fa fa-info-circle"></i> There <span id="nr-db-missing-group-count"></span> not in a group. Click <a id="nr-db-add-missing-groups" href="#">here</a> to create the missing groups</span>').appendTo(orphanedWidgets);
                orphanedWidgets.find('a').click(function(event) {
                    var unknownGroups = {};
                    RED.nodes.eachNode(function(node) {
                        if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control') {
                            if (!RED.nodes.node(node.group)) {
                                var g = node.group || "_BLANK_";
                                unknownGroups[g] = unknownGroups[g] || [];
                                unknownGroups[g].push(node);
                            }
                        }
                    });
                    var tab = null;
                    var tabs = tabContainer.editableList('items');
                    tabs.first().each(function(i,el) {
                        var tabData = el.data('data');
                        tab = tabData.node;
                    });

                    var hev = [];
                    if (tab === null) {
                        tab = {
                            id: RED.nodes.id(),
                            _def: RED.nodes.getType("ui_tab"),
                            type: "ui_tab",
                            users: [],
                            order: 0,
                            name: "Tab",
                            icon: "dashboard"
                        };
                        RED.nodes.add(tab);
                        RED.editor.validateNode(tab);
                        hev.push(tab.id);
                    }
                    for (var groupId in unknownGroups) {
                        if (unknownGroups.hasOwnProperty(groupId)) {
                            var groupNode = {
                                id: RED.nodes.id(),
                                _def: RED.nodes.getType("ui_group"),
                                type: "ui_group",
                                users: [],
                                tab: tab.id,
                                order: i+1,
                                name: (groupId==="_BLANK_"?"Group":groupId),
                                width: 6,
                                disp: true
                            };
                            hev.push(groupNode.id);
                            RED.nodes.add(groupNode);
                            RED.editor.validateNode(groupNode);
                            if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
                                RED.nodes.updateConfigNodeUsers(groupNode);
                            }
                            var widgets = unknownGroups[groupId];
                            for (var i=0; i<widgets.length; i++) {
                                widgets[i].group = groupNode.id;
                                widgets[i].changed = true;
                                widgets[i].dirty = true;
                                if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
                                    RED.nodes.updateConfigNodeUsers(widgets[i]);
                                }
                                RED.editor.validateNode(widgets[i]);
                            }
                        }
                    }
                    RED.history.push({
                        t:'add',
                        nodes: hev,
                        dirty:RED.nodes.dirty()
                    });
                    RED.nodes.dirty(true);
                    refresh();
                    refreshOrphanedWidgets();
                    RED.view.redraw();
                    event.preventDefault();
                });

                var listElements = {};
                var dashboard = [];
                var listStates = {};
                var elementParents = {};
                var awaitingGroups = {};
                var awaitingTabs = {};

                function getCurrentList() {
                    var currentList = [];
                    var tabs = tabContainer.editableList('items');
                    var open = false;
                    tabs.each(function(i,el) {
                        var tabData = el.data('data');
                        var tab = [];
                        var groups = el.find('.nr-db-sb-group-list').editableList('items');
                        groups.each(function(j,el) {
                            var group = [];
                            var groupData = el.data('data');
                            var widgets = el.find('.nr-db-sb-widget-list').editableList('items');
                            widgets.each(function(k,el) {
                                var widgetData = el.data('data');
                                group.push(widgetData.id);
                            })
                            tab.push({id:groupData.node.id, widgets:group});
                        });
                        currentList.push({id:tabData.node.id,groups:tab});
                    });
                    return currentList;
                }

                function refreshOrphanedWidgets() {
                    var unknownGroups = {};
                    var count = 0;
                    RED.nodes.eachNode(function(node) {
                        if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control' && (node.type === 'ui_template' && node.templateScope !== 'global')) {
                            if (!RED.nodes.node(node.group)) {
                                var g = node.group || "_BLANK_";
                                unknownGroups[g] = unknownGroups[g] || [];
                                unknownGroups[g].push(node);
                                count++;
                            }
                        }
                    });

                    if (count > 0) {
                        orphanedWidgets.show();
                        $("#nr-db-missing-group-count").text((count===1?"is ":"are ")+count+" widget"+(count === 1?"":"s"))
                    }
                    else {
                        orphanedWidgets.hide();
                    }
                }

                function refresh() {
                    var currentList = getCurrentList();
                    dashboard = [];
                    var tabs = {};
                    var groups = {};
                    var elements = [];
                    var groupElements = {};
                    var tabGroups = {};
                    var groupId;
                    var group;
                    var tabId;
                    var tab;
                    var unknownGroups = 0;
                    // Find all the tabs and groups
                    RED.nodes.eachConfig(function(node) {
                        switch (node.type) {
                            case 'ui_tab':
                            case 'ui_link': {
                                tabs[node.id] = node;
                                //tabContainer.editableList('addItem',node);
                                break;
                            }
                            case 'ui_group': {
                                groups[node.id] = node;
                                break;
                            }
                            case 'ui_spacer': {
                                if (groups.hasOwnProperty(node.group)) {
                                    groupElements[node.group] = groupElements[node.group]||[];
                                    groupElements[node.group].push(node);
                                }
                                break;
                            }
                        }
                    });
                    for (groupId in groups) {
                        if (groups.hasOwnProperty(groupId)) {
                            group = groups[groupId];
                            if (tabs.hasOwnProperty(group.tab)) {
                                // This group belongs to a tab
                                tabGroups[group.tab] = tabGroups[group.tab]||[];
                                tabGroups[group.tab].push(group);
                            }
                            else {
                                unknownGroups++;
                            }
                        }
                    }
                    // Find all ui widgets - list them by their group id
                    RED.nodes.eachNode(function(node) {
                        if (/^ui_/.test(node.type)) {
                            if (groups.hasOwnProperty(node.group)) {
                                groupElements[node.group] = groupElements[node.group]||[];
                                groupElements[node.group].push(node);
                            }
                            else if ((node.type !== 'ui_toast')&&(node.type !== 'ui_ui_control')&&(node.type === 'ui_template' && node.templateScope !== 'global')) {
                                unknownGroups++;
                            }
                        }
                    });
                    if (unknownGroups > 0) {
                        $("#nr-db-missing-group-count").text((unknownGroups===1?"is ":"are ")+unknownGroups+" widget"+(unknownGroups === 1?"":"s"))
                        orphanedWidgets.show();
                    }
                    else {
                        orphanedWidgets.hide();
                    }
                    // Sort each group's array of widgets
                    for (groupId in groupElements) {
                        if (groupElements.hasOwnProperty(groupId)) {
                            group = groupElements[groupId];
                            groupElements[groupId] = group.map(function(v,i) { return {n:v,i:i} }).sort(function(A,B) {
                                if (A.n.order < B.n.order) { return A.n.order!==0?-1:1;}
                                if (A.n.order > B.n.order) { return B.n.order!==0?1:-1;}
                                return A.i - B.i;
                            }).map(function(v) { return v.n})
                        }
                    }
                    // Sort each tabs's array of groups
                    for (tabId in tabGroups) {
                        if (tabGroups.hasOwnProperty(tabId)) {
                            tab = tabGroups[tabId];
                            tabGroups[tabId] = tab.map(function(v,i) { return {n:v,i:i} }).sort(function(A,B) {
                                if (A.n.order < B.n.order) { return -1;}
                                if (A.n.order > B.n.order) { return 1;}
                                return A.i - B.i;
                            }).map(function(v) { return v.n})
                        }
                    }
                    var tabIds = Object.keys(tabs).map(function(v,i) { return {n:tabs[v],i:i} }).sort(function(A,B) {
                        if (A.n.order < B.n.order) { return -1;}
                        if (A.n.order > B.n.order) { return 1;}
                        return A.i - B.i;
                    }).map(function(v) { return v.n.id});
                    tabIds.forEach(function(tabId) {
                        var tab = {node:tabs[tabId],groups:[]};
                        if (tabGroups[tabId]) {
                            tabGroups[tabId].forEach(function(groupNode) {
                                var group = {node:groupNode,widgets:[]};
                                if (groupElements[groupNode.id]) {
                                    group.widgets = groupElements[groupNode.id];
                                }
                                tab.groups.push(group);
                            });
                        }
                        dashboard.push(tab);
                    });
                    var newList = dashboard.map(function(t) {
                        return {
                            id: t.node.id,
                            groups: t.groups.map(function(g) {
                                return {
                                    id: g.node.id,
                                    widgets: g.widgets.map(function(w) {
                                        return w.id;
                                    })
                                }
                            })
                        }
                    });
                    if (JSON.stringify(newList)!=JSON.stringify(currentList)) {
                        listElements = {};
                        groupLists = {};
                        tabLists = {};
                        tabs = {};
                        groups = {};
                        elementParents = {};
                        tabContainer.empty();
                        dashboard.forEach(function(tab) {
                            tabContainer.editableList('addItem',tab);
                        });
                    }
                    //ensureDashboardNode(true);
                    if (globalDashboardNode) {
                        $("#nr-db-field-title").val(globalDashboardNode.site.name);
                        $("#nr-db-field-allowSwipe").val(globalDashboardNode.site.allowSwipe || "false");
                        $("#nr-db-field-allowTempTheme").val(globalDashboardNode.site.allowTempTheme || "true");
                        $("#nr-db-field-hideToolbar").val(globalDashboardNode.site.hideToolbar || "false");
                        $("#nr-db-field-dateFormat").val(globalDashboardNode.site.dateFormat);

                        if (typeof globalDashboardNode.site.sizes !== "object") {
                            globalDashboardNode.site.sizes = sizes;
                        }
                        $("#nr-db-field-sx").val(globalDashboardNode.site.sizes.sx);
                        $("#nr-db-field-sy").val(globalDashboardNode.site.sizes.sy);
                        $("#nr-db-field-px").val(globalDashboardNode.site.sizes.px);
                        $("#nr-db-field-py").val(globalDashboardNode.site.sizes.py);
                        $("#nr-db-field-cx").val(globalDashboardNode.site.sizes.cx);
                        $("#nr-db-field-cy").val(globalDashboardNode.site.sizes.cy);
                        $("#nr-db-field-gx").val(globalDashboardNode.site.sizes.gx);
                        $("#nr-db-field-gy").val(globalDashboardNode.site.sizes.gy);

                        if (typeof globalDashboardNode.theme.angularTheme !== "object") {
                            globalDashboardNode.theme.angularTheme = aTheme;
                        }
                        $("#nr-db-field-angPrimary").val(globalDashboardNode.theme.angularTheme.primary || "indigo");
                        $("#nr-db-field-angAccents").val(globalDashboardNode.theme.angularTheme.accents || "blue");
                        $("#nr-db-field-angWarn").val(globalDashboardNode.theme.angularTheme.warn || "red");
                        $("#nr-db-field-angBackground").val(globalDashboardNode.theme.angularTheme.background || "grey");
                        $("#nr-db-field-angLook").val(globalDashboardNode.theme.angularTheme.palette || "light");

                        $("#nr-db-field-theme").val(globalDashboardNode.theme.name);
                        $("#ui-sidebar-name").val(globalDashboardNode.theme.customTheme.name);
                        if (globalDashboardNode.theme.name === 'theme-custom') {
                            $("#custom-theme-library-container").show();
                            $("#custom-theme-settings").show();
                        }
                        else {
                            $("#custom-theme-library-container").hide();
                            $("#custom-theme-settings").hide();
                        }
                        if ($('#nr-db-field-allowTempTheme').val() === "none") {
                            ulDashboardTabs.children().eq(2).addClass("hidden");
                            ulDashboardTabs.children().eq(3).removeClass("hidden");
                        }
                        else {
                            ulDashboardTabs.children().eq(2).removeClass("hidden");
                            ulDashboardTabs.children().eq(3).addClass("hidden");
                        }

                        //set colour start
                        if (typeof globalDashboardNode.theme.name !== "string") {
                            globalDashboardNode.theme.name = "theme-light";
                        }
                        var currentTheme = globalDashboardNode.theme.name.split("-")[1];
                        var startingValue = globalDashboardNode.theme[currentTheme+"Theme"].baseColor;
                        setColourPickerColour("base-color", startingValue);
                        $("#nr-db-field-font").val(globalDashboardNode.theme[currentTheme+"Theme"].baseFont);
                        generateColours(startingValue);
                        if (globalDashboardNode.theme.name === 'theme-light' || globalDashboardNode.theme.name === 'theme-dark') {
                            addLightAndDarkResetButton('base-color', $('#base-settings-ul').children().first());
                        }

                        if (editor === undefined) {
                            editor = RED.editor.createEditor({
                                id: 'nr-db-field-format-editor',
                                mode: 'ace/mode/javascript',
                                value: JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site})
                            });

                            RED.library.create({
                                url:"themes", // where to get the data from
                                type:"theme", // the type of object the library is for
                                editor: editor, // the field name the main text body goes to
                                mode:"ace/mode/javascript",
                                fields:['name'],
                                elementPrefix:"ui-sidebar-"
                            });
                        }

                        editor.on('input', function() {
                            // Check for any changes on the editor object
                            // i.e. has the theme been customised compared
                            // to what is stored
                            var editorObject = JSON.parse(editor.getValue());

                            //Update theme object if necessary
                            if (JSON.stringify(editorObject.theme) !== JSON.stringify(globalDashboardNode.theme.themeState)) {
                                globalDashboardNode.theme.themeState = editorObject.theme;
                                if ($("#ui-sidebar-name").val() !== globalDashboardNode.theme.customTheme.name) {
                                    globalDashboardNode.theme.customTheme.name = $("#ui-sidebar-name").val();
                                    globalDashboardNode.theme.customTheme.baseColor = globalDashboardNode.theme.themeState["base-color"].value;
                                    setColourPickerColour("base-color", globalDashboardNode.theme.customTheme.baseColor);
                                    generateColours(globalDashboardNode.theme.themeState["base-color"].value);
                                    RED.nodes.dirty(true);
                                }
                            }
                            if (JSON.stringify(aTheme) !== JSON.stringify(globalDashboardNode.theme.angularTheme)) {
                                globalDashboardNode.theme.angularTheme = aTheme;
                            }

                            //Update site object if necessary
                            if (JSON.stringify(editorObject.site) !== JSON.stringify(globalDashboardNode.site)) {
                                globalDashboardNode.site = editorObject.site;
                                $("#nr-db-field-title").val(globalDashboardNode.site.name);
                                $("#nr-db-field-hideToolbar").val(globalDashboardNode.site.hideToolbar);
                                $("#nr-db-field-allowSwipe").val(globalDashboardNode.site.allowSwipe);
                                $("#nr-db-field-allowTempTheme").val(globalDashboardNode.site.allowTempTheme);
                                $("#nr-db-field-dateFormat").val(globalDashboardNode.site.dateFormat);
                                $("#nr-db-field-sx").val(globalDashboardNode.site.sizes.sx);
                                $("#nr-db-field-sy").val(globalDashboardNode.site.sizes.sy);
                                $("#nr-db-field-px").val(globalDashboardNode.site.sizes.px);
                                $("#nr-db-field-py").val(globalDashboardNode.site.sizes.py);
                                $("#nr-db-field-gx").val(globalDashboardNode.site.sizes.gx);
                                $("#nr-db-field-gy").val(globalDashboardNode.site.sizes.gy);
                                $("#nr-db-field-cx").val(globalDashboardNode.site.sizes.cx);
                                $("#nr-db-field-cy").val(globalDashboardNode.site.sizes.cy);
                                RED.nodes.dirty(true);
                            }
                        });
                    }
                    awaitingGroups = {};
                    awaitingTabs = {};
                }

                RED.sidebar.addTab({
                    id: "dashboard",
                    label: c_("label.dashboard"),
                    name: "Dashboard",
                    content: content,
                    closeable: true,
                    pinned: true,
                    iconClass: "fa fa-bar-chart",
                    disableOnEdit: true,
                    onchange: function() { refresh(); }
                });

                editSaveEventHandler = function(node) {
                    if (/^ui_/.test(node.type)) {
                        if (node.type === "ui_tab" || node.type === "ui_group") {
                            if (listElements[node.id]) {
                                // Existing element
                                listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").text(node.name||node.id);
                                if (node.type === "ui_group") {
                                    refresh();
                                }
                                else {
                                    if (node.hidden === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-hidden'); }
                                    else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-hidden'); }
                                    if (node.disabled === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-disabled'); }
                                    else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-disabled'); }
                                }
                            }
                            else if (node.type === "ui_tab") {
                                // Adding a tab
                                tabContainer.editableList('addItem',{node:node,groups:[]})
                            }
                            else {
                                // Adding a group
                                if (tabLists[node.tab]) {
                                    tabLists[node.tab].editableList('addItem',{node:node,widgets:[]})
                                }
                            }
                        }
                        else if (node.type === "ui_link") {
                            if (listElements[node.id]) {
                                var container = listElements[node.id];
                                container.find(".nr-db-sb-link-name").text(node.name||"untitled");
                                container.find(".nr-db-sb-link-url").text(node.link);
                            }
                        }
                        else {
                            refreshOrphanedWidgets();
                            if (listElements[node.id]) {
                                if (node.group != elementParents[node.id]) {
                                    // Moved to a different group
                                    if (groupLists[elementParents[node.id]]) {
                                        groupLists[elementParents[node.id]].editableList('removeItem',listElements[node.id].data('data'))
                                    }
                                    if (groupLists[node.group]) {
                                        groupLists[node.group].editableList('removeItem',node)
                                        groupLists[node.group].editableList('addItem',node);
                                    }
                                }
                                else {
                                    var l = node._def.label;
                                    try {
                                        l = (typeof l === "function" ? l.call(node) : l)||"";
                                    }
                                    catch(err) {
                                        console.log("Definition error: "+d.type+".label",err);
                                        l = d.type;
                                    }
                                    listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").text(l);
                                }
                            }
                            else {
                                if (groupLists[node.group]) {
                                    if (node.order === 0) { node.order = groupLists[node.group].editableList('length'); }
                                    groupLists[node.group].editableList('addItem',node);
                                }
                            }
                        }
                    }
                };
                RED.events.on("editor:save",editSaveEventHandler);

                // Dashboard layout tool
                layoutUpdateEventHandler = function(node) {
                    if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control' && node.type !== 'ui_audio' && node.type !== 'ui_base' && node.type !== 'ui_group' && node.type !== 'ui_tab') {
                        if (listElements[node.id]) {
                            if (node.group != elementParents[node.id]) {
                                // Moved to a different group
                                if (groupLists[elementParents[node.id]]) {
                                    groupLists[elementParents[node.id]].editableList('removeItem',listElements[node.id].data('data'))
                                }
                                if (groupLists[node.group]) {
                                    groupLists[node.group].editableList('removeItem',node)
                                    groupLists[node.group].editableList('addItem',node);
                                    groupLists[node.group].editableList('sort',function(a,b) {return a.order-b.order;});
                                }
                            }
                            else {
                                groupLists[node.group].editableList('sort',function(a,b) {return a.order-b.order;});
                            }
                        }
                    }
                };
                RED.events.on("layout:update",layoutUpdateEventHandler);

                var pendingAdd = [];
                var pendingAddTimer = null;

                function handlePendingAdds() {
                    var hasTabs = false;
                    var hasGroups = false;
                    pendingAdd.sort(function(A,B) {
                        hasTabs = hasTabs || A.type === "ui_tab" || B.type === "ui_tab";
                        hasGroups = hasGroups || A.type === "ui_group" || B.type === "ui_group";
                        if (A.type === B.type) {
                            return 0;
                        }
                        if (A.type === "ui_tab") {
                            return -1;
                        }
                        else if (B.type === "ui_tab") {
                            return 1;
                        }
                        else if (A.type === "ui_group") {
                            return -1;
                        }
                        else if (B.type === "ui_group") {
                            return 1;
                        }
                        return 0
                    });
                    var updateList = {};
                    for (var i=0; i<pendingAdd.length; i++) {
                        var node = pendingAdd[i];
                        if (listElements[node.id]) {
                            continue;
                        }
                        if (node.type === "ui_tab") {
                            tabContainer.editableList('addItem',{node:node,groups:[]});
                        }
                        else {
                            if (hasTabs) {
                                // We've added some tabs, need to give jquery time to add the lists
                                pendingAdd = pendingAdd.slice(i);
                                pendingAddTimer = setTimeout(handlePendingAdds,50);
                                return;
                            }
                            if (node.type === "ui_group") {
                                if (tabLists[node.tab]) {
                                    tabLists[node.tab].editableList('addItem',{node:node,widgets:[]});
                                }
                            }
                            else {
                                if (hasGroups) {
                                    // We've added some tabs, need to give jquery time to add the lists
                                    pendingAdd = pendingAdd.slice(i);
                                    pendingAddTimer = setTimeout(handlePendingAdds,50);
                                    return;
                                }
                                if (groupLists[node.group]) {
                                    groupLists[node.group].editableList('addItem',node)
                                    if (node.order >= 0) {
                                        updateList[node.group] = true;
                                    }
                                }
                                else {
                                    refreshOrphanedWidgets();
                                }
                            }
                        }
                    }
                    Object.keys(updateList).forEach(function (group) {
                        var list = groupLists[group];
                        if (list) {
                            list.editableList("sort", function(a,b) {return a.order-b.order;});
                        }
                    });
                    pendingAdd = [];
                }

                nodesAddEventHandler = function(node) {
                    if (/^ui_/.test(node.type) && !listElements[node.id]) {
                        pendingAdd.push(node);
                        clearTimeout(pendingAddTimer);
                        pendingAddTimer = setTimeout(handlePendingAdds,100);
                    }
                };
                RED.events.on("nodes:add", nodesAddEventHandler);

                nodesRemoveEventHandler = function(node) {
                    if (/^ui_/.test(node.type)) {
                        if (node.type === "ui_tab" || node.type === "ui_link") {
                            if (listElements[node.id]) {
                                tabContainer.editableList('removeItem',listElements[node.id].data('data'));
                                delete tabLists[node.id];
                            }
                        }
                        else if (node.type === "ui_group") {
                            if (tabLists[node.tab] && listElements[node.id]) {
                                tabLists[node.tab].editableList('removeItem',listElements[node.id].data('data'));
                            }
                            delete groupLists[node.id];
                        }
                        else {
                            if (groupLists[node.group]) {
                                groupLists[node.group].editableList('removeItem',node)
                            }
                        }
                        refreshOrphanedWidgets();
                        delete listElements[node.id];
                    }
                };
                RED.events.on("nodes:remove", nodesRemoveEventHandler);
            }
        });

    $.widget("nodereddashboard.elementSizerByNum", {
        _create: function() {
            var that = this;
            var has_height = this.options.has_height;
            var pos = this.options.pos;
            var c_width = has_height ? '15%' : '6%';
            var container = $('<div>').css({
                position: 'absolute',
                background: 'white',
                padding: '10px 10px 10px 10px',
                border: '1px solid grey',
                zIndex: '20',
                borderRadius: "4px",
                display:"none",
                width: c_width
            }).appendTo(document.body);
            var box0 = $("<div>").css({
                fontSize: '13px',
                color: '#aaa',
                float: 'left',
                paddingTop: '1px'
            }).appendTo(container);

            var width = $(this.options.width).val();
            var height = has_height ? $(this.options.height).val() : undefined;
            var max_w = '';
            var groupNode = this.options.groupNode;
            if(groupNode) {
                max_w = 'max="'+groupNode.width+'"';
            }
            width = (width > 0) ? width : 1;
            height = (height > 0) ? height : 1;
            var in0 = $('<input type="number" min="1" '+max_w+'>')
                .css("width", has_height ? "40%" : "100%")
                .val(width)
                .appendTo(box0);
            if(has_height) {
                var pad = $('<span>')
                    .text(" x ")
                    .appendTo(box0);
                var in1 = $('<input type="number" min="1">')
                    .css("width", "40%")
                    .val(height)
                    .appendTo(box0);
            }
            var closeTimer;
            var closeFunc = function() {
                var w = in0.val();
                var h = has_height ? in1.val() : undefined;
                var label = that.options.label;
                label.text(w+(has_height ? (' x '+h) : ''));
                $(that.options.width).val(w).change();
                if(has_height) {
                    $(that.options.height).val(h).change();
                }
                that.destroy();
            };
            container.keypress(function(e) {
                if(e.which === 13) { // pressed ENTER
                    container.fadeOut(100, closeFunc);
                }
            });
            container.on('mouseleave', function(e) {
                closeTimer = setTimeout(function() {
                    container.fadeOut(200, closeFunc);
                }, 100);
            });
            container.on('mouseenter', function(e) {
                clearTimeout(closeTimer);
            });
            container.css({
                top: (pos.top -10)+"px",
                left: (pos.left +10)+"px"
            });
            container.fadeIn(200);
        }
    });

    $.widget( "nodereddashboard.elementSizer", {
        _create: function() {
            var that = this;
            var gridWidth = 6;
            var width = parseInt($(this.options.width).val()||0);
            var height = parseInt(this.options.hasOwnProperty('height')?$(this.options.height).val():"1")||0;
            var hasAuto = (!this.options.hasOwnProperty('auto') || this.options.auto);

            this.element.css({
                minWidth: this.element.height()+4
            });
            var auto_text = c_("auto");
            var sizeLabel = (width === 0 && height === 0)?auto_text:width+(this.options.hasOwnProperty('height')?" x "+height:"");
            this.element.text(sizeLabel).on('mousedown',function(evt) {
                evt.stopPropagation();
                evt.preventDefault();

                var width = parseInt($(that.options.width).val()||0);
                var height = parseInt(that.options.hasOwnProperty('height')?$(that.options.height).val():"1")||0;
                var maxWidth = 0;
                var maxHeight;
                var fixedWidth = false;
                var fixedHeight = false;
                var group = $(that.options.group).val();
                if (group) {
                    var groupNode = RED.nodes.node(group);
                    if (groupNode) {
                        gridWidth = Math.max(6,groupNode.width,+width);
                        maxWidth = groupNode.width || gridWidth;
                        fixedWidth = true;
                    }
                    maxHeight = Math.max(6,+height+1);
                }
                else {
                    gridWidth = Math.max(12,+width);
                    maxWidth = gridWidth;
                    maxHeight = 1;
                    fixedHeight = true;
                }

                var pos = $(this).offset();
                var container = $('<div>').css({
                    position: 'absolute',
                    background: 'white',
                    padding: '5px 10px 10px 10px',
                    border: '1px solid grey',
                    zIndex: '20',
                    borderRadius: "4px",
                    display:"none"
                }).appendTo(document.body);

                var closeTimer;
                container.on('mouseleave',function(evt) {
                    closeTimer = setTimeout(function() {
                        container.fadeOut(200, function() { $(this).remove(); });
                    },100)
                });
                container.on('mouseenter',function() {
                    clearTimeout(closeTimer);
                })

                var label = $("<div>").css({
                    fontSize: '13px',
                    color: '#aaa',
                    float: 'left',
                    paddingTop: '1px'
                }).appendTo(container).text((width === 0 && height === 0)?auto_text:(width+(that.options.hasOwnProperty('height')?" x "+height:"")));
                label.hover(function() {
                    $(this).css('text-decoration', 'underline');
                }, function() {
                    $(this).css('text-decoration', 'none');
                });

                label.click(function(e) {
                    var group = $(that.options.group).val();
                    var groupNode = null;
                    if(group) {
                        groupNode = RED.nodes.node(group);
                        if(groupNode === null) {
                            return;
                        }
                    }
                    $(that).elementSizerByNum({
                        width: that.options.width,
                        height: that.options.height,
                        groupNode: groupNode,
                        pos: pos,
                        label: that.element,
                        has_height: that.options.hasOwnProperty('height')
                    });
                    closeTimer = setTimeout(function() {
                        container.fadeOut(200, function() {
                            $(this).remove();
                        });
                    },100)
                });

                var buttonRow = $('<div>',{style:"text-align:right; height:25px;"}).appendTo(container);

                if (hasAuto) {
                    var button = $('<a>',{href:"#",class:"editor-button editor-button-small",style:"margin-bottom:5px"})
                    .text(auto_text)
                    .appendTo(buttonRow)
                    .on('mouseup',function(evt) {
                        that.element.text(auto_text)
                        $(that.options.width).val(0).change();
                        $(that.options.height).val(0).change();
                        evt.preventDefault();
                        container.fadeOut(200, function() { $(this).remove(); });
                    });
                }

                var cellBorder = "1px dashed lightGray";
                var cellBorderExisting = "1px solid gray";
                var cellBorderHighlight = "1px dashed black";
                var rows = [];
                function addRow(i) {
                    var row = $('<div>').css({padding:0,margin:0,height:"25px","box-sizing":"border-box"}).appendTo(container);
                    rows.push(row);
                    cells.push([])
                    for (var j=0; j<gridWidth; j++) {
                        addCell(i,j);
                    }
                }
                function addCell(i,j) {
                    var row = rows[i];
                    var cell = $('<div>').css({
                        display:"inline-block",
                        width: "25px",
                        height: "25px",
                        borderRight: (j===(width-1)&&i<height)?cellBorderExisting:cellBorder,
                        borderBottom: (i===(height-1)&&j<width)?cellBorderExisting:cellBorder,
                        boxSizing: "border-box",
                        cursor:"pointer",
                        background: (j<maxWidth)?"#fff":"#eee"
                    }).appendTo(row);
                    cells[i].push(cell);
                    if (j===0) {
                        cell.css({borderLeft:((i<=height-1)?cellBorderExisting:cellBorder)});
                    }
                    if (i===0) {
                        cell.css({borderTop:((j<=width-1)?cellBorderExisting:cellBorder)});
                    }
                    if (j<maxWidth) {
                        cell.data("w",j);
                        cell.data("h",i);
                        cell.on("mouseup",function() {
                            that.element.text(($(this).data("w")+1)+(that.options.hasOwnProperty('height')?" x "+($(this).data("h")+1):""))
                            $(that.options.width).val($(this).data("w")+1).change();
                            $(that.options.height).val($(this).data("h")+1).change();
                            container.fadeOut(200, function() { $(this).remove(); });
                        });
                        cell.on("mouseover",function() {
                            var w = $(this).data("w");
                            var h = $(this).data("h");
                            label.text((w+1)+(that.options.hasOwnProperty('height')?" x "+(h+1):""));
                            for (var y = 0; y<maxHeight; y++) {
                                for (var x = 0; x<maxWidth; x++) {
                                    cells[y][x].css({
                                        background: (y<=h && x<=w)?'#ddd':'#fff',
                                        borderLeft: (x===0&&y<=h)?cellBorderHighlight:(x===0)?((y<=height-1)?cellBorderExisting:cellBorder):'',
                                        borderTop: (y===0&&x<=w)?cellBorderHighlight:(y===0)?((x<=width-1)?cellBorderExisting:cellBorder):'',
                                        borderRight: (x===w&&y<=h)?cellBorderHighlight:((x===width-1&&y<=height-1)?cellBorderExisting:cellBorder),
                                        borderBottom: (y===h&&x<=w)?cellBorderHighlight:((y===height-1&&x<=width-1)?cellBorderExisting:cellBorder)
                                    })
                                }
                            }
                            if (!fixedHeight && h === maxHeight-1) {
                                addRow(maxHeight++)
                            }
                            if (!fixedWidth && w === maxWidth-1) {
                                maxWidth++;
                                gridWidth++;
                                for (var r=0; r<maxHeight; r++) {
                                    addCell(r,maxWidth-1);
                                }
                            }
                        })
                    }
                }
                var cells = [];
                for (var i=0; i<maxHeight; i++) {
                    addRow(i);
                }
                container.css({
                    top:(pos.top)+"px",
                    left:(pos.left)+"px"
                });
                container.fadeIn(200);
            })
        }
    });
})(jQuery);
</script>

<script type="text/html" data-template-name="ui_base">
    <div class='form-row'>
        This <i>ui_base</i> node is the main node that all<br/>other dashboard widget nodes communicate to.<br/>
        <br/>One instance is required to support the dashboard.<br/>
        <br/>If you have no dashboard you can delete this node.<br/>
        It will be re-created automatically if required.<br/>
    </div>
</script>