RunReportsWidget = function() {

    let instance = this;

    instance.contentElement = $("<div>").css( { "padding" : "10px" } );
    instance.container = null;
    let contentElement = instance.contentElement;

    contentElement.dxDataGrid( {
        xwidth : 400,
        height : 400,
        showColumnHeaders : true,
        showColumnLines : false,
        rowAlternationEnabled : true,
        showBorders : true,
        scrolling : { mode : "virtual" },
        dataSource : Fse.Data.newDataSource( { object : "RPT.mySavedReports", paginate : false, keyField : "quickReportURL" } ),
        columns : [
            { dataField : "userReportGroup", groupIndex : 0, caption : "Group" },
            { dataField : "userReportName", caption : "Saved Report" }
        ],
        onCellClick : function( e ) {
            if( e.rowType != "data" ) {
                return;
            }

            if( instance.container && instance.container.hide ) {
                instance.container.hide();
            }
            Fse.RPT.runQuickReport( e.data.quickReportURL );
            $("#report-center-view-options-switch").removeClass( "finished" ).addClass( "running" );

        }
    })

}

RunReportsWidget.prototype.constructor = RunReportsWidget;

RunReportsWidget.prototype.element = function() {
    return this.contentElement;
}

RunReportsWidget.prototype.setContainer = function( container ) {
    this.container = container;
}

ViewReportsWidget = function() {

    let instance = this;
    instance.container = null;
    instance.contentElement = $("<div>");

    let contentElement = instance.contentElement;

    let manageReports = function( newVersion ) {
        if( instance.container && instance.container.hide ) {
            instance.container.hide();
        }
        if( newVersion ) {
            let mrw = new ManageReportsWidget();
            mrw.show();
        } else {
            Fse.RPT.showReportResultsDialog('manageReportPortletDialog$');
        }
        
    }

    let clearAll = function() {

        if( ! confirm( "Clear completed report requests?" ) ) {
            return;
        }

        if( instance.container && instance.container.hide ) {

            instance.container.hide();

            let clearUserReportRequestsURL = Fse.Util.updateURL2( $("link#rptHandlerLink").attr( "href" ), { "mode" : "direct", "do" : "clearUserREportRequests" } )            
            $.ajax( {
                url : clearUserReportRequestsURL,
                method : "post",
                data : { userId : Fse.Portal.appConfiguration.STP.userId }
            })
    
        }

    }


    let buttons = $("<div>").css( { "padding-left" : "10px", "padding-right" : "10px" } ).dxToolbar( {
        items : [
            {
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Clear All",
                    onClick : function() {
                        clearAll();
                    }
                }
            },
            {
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Manage",
                    onClick : function()  {
                        manageReports( true );

                    }
                }
            },
            // {
            //     location : "after",
            //     widget : "dxButton",
            //     options : {
            //         text : "Old",
            //         onClick : function()  {
            //             manageReports();
            //         }
            //     }
            // },
            { location : "after",
            widget : "dxButton",
            options : {
                icon : "refresh",
                onClick : function() {
                    instance.loadUserReportRequests();
                }
            }
        }
        ]
    }).appendTo( contentElement );

    let list = $("<div>").css( "padding", "10px" ).dxDataGrid( {
        height : 300,
        // dataSource : Fse.Data.newDataSource( { paginate : false, object : "RPT.userReportRequests", keyField : "reportRequestId" }),
        showColumnHeaders : true,
        showColumnLines : false,
        rowAlternationEnabled : true,
        showBorders : true,
        scrolling : { mode : "virtual" },
        columns : [
            { caption : "Report", cellTemplate : function( container, options ) {

                    let data = options.data;

                    let reportDisplay = $("<div>").text( data.reportLabel ? data.reportLabel : data.reportName );
                    let statusDisplay = $("<div>").text( data.statusDisplay ).css( { "font-size" : "smaller" } );

                    let cell = $("<div>")
                        .append( reportDisplay )
                        .append( statusDisplay );
                    
                    container.append( cell );

                }
            },
            { caption : "Status", alignment : "center", width : 70, cellTemplate : function( container, options) {

                    let data = options.data;

                    let cell = $("<div>");

                    if( data.status === "COMPLETE" ) {

                        let icon = null;
                        switch ( data.fileType ) {
                            
                            case "PDF":
                                icon = "pdffile"
                                break;

                            case "XLSX" :
                            case "XLS" :
                            case "XLSM" :
                            case "XLSB" :
                                icon = "xlsfile"
                                break;

                            case "TXT" :
                                icon = "textdocument";
                                break;

                        }

                        let iconTitle = "Download";

                        if( data.emailId ) {
                            icon = "email";
                            iconTitle = "View Email";
                        }

                        if( ! icon ) {
                            icon = "file";
                        }


                      
                        let iconElement = $("<i>")
                                        .attr( "title", iconTitle )
                                        .addClass( `dx-icon dx-icon-${icon}`)
                                        .css( { "font-size" : "22px", "cursor" : "pointer" } )
                                        .on( "click", function() {
                                            instance.viewReport( data );
                                           } );

                        cell.append( iconElement );
                    } else if ( data.status == "PENDING" ) {

                        let iconElement = $("<i>")
                                        .attr( "title", "Cancel" )
                                        .addClass( `dx-icon dx-icon-clear`)
                                        .css( { "font-size" : "22px", "cursor" : "pointer" } )
                                        .on( "click", function() {
                                            instance.cancelReport( data );
                                           } );

                        cell.append( iconElement );

                        
                        
                    } else {
                        cell.append( "<em>na</em>" );
                    }

                    container.append( cell );

                }
            }
        ]
    }).appendTo( contentElement );

    instance.userReportRequestsDataGrid = list.dxDataGrid( "instance" );
    instance.loadUserReportRequests();

}

ViewReportsWidget.prototype.constructor = ViewReportsWidget;

ViewReportsWidget.prototype.element = function() {
    return this.contentElement;
}

ViewReportsWidget.prototype.setContainer = function( container ) {
    this.container = container;
}

ViewReportsWidget.prototype.viewReport = function( userReportRequest ) {

    if( userReportRequest.status !== "COMPLETE" ) {
        return;
    }

    if( userReportRequest.reportMethod === "DOWNLOAD" ) {
        window.location.href = userReportRequest.downloadURL;
    } else if( userReportRequest.reportMethod === "EMAIL" ) {
        Fse.Portal.popupWindow('Email',userReportRequest.emailURL,750);
    }

    if( this.container ) {
        this.container.hide();
    }

}

ViewReportsWidget.prototype.cancelReport = function( userReportRequest ) {

    let instance = this;

    if( userReportRequest.status != "PENDING" ) {
        return;
    }

    if( ! confirm( `Cancel ${userReportRequest.reportLabel}?` )) {
        return;
    }

    let cancelReportURL = Fse.Util.updateURL2( $("link#rptHandlerLink").attr( "href" ), { "mode" : "direct", "do" : "cancelReport" } );

    $.ajax({
        method : "post",
        url : cancelReportURL,
        data : { reportRequestId : userReportRequest.reportRequestId  }
    }).then( function() {
        instance.loadUserReportRequests();
    })

}

ViewReportsWidget.prototype.loadUserReportRequests = function() {

    let instance = this;

    let store = Fse.Data.newDataSource( { paginate : false, object : "RPT.userReportRequests", keyField : "reportRequestId" }).store();


    store.load().done( function( data ) {


        let dataSourceConfig = {
            store : { 
                type : "array",
                data : data,
                key : "reportRequestId"
            }
        };

        instance.userReportRequestsDataGrid.option( "dataSource", dataSourceConfig );


    }).fail( function( x ) {
        console.log( x );
    })

}

ManageReportsWidget = function() {


}

ManageReportsWidget.prototype.constructor = ManageReportsWidget;

ManageReportsWidget.prototype.show = function() {

    let popup = $("<div>").dxPopup( {

        title : "Manage Report Results",
        height : "auto",
        width : 600,
        contentTemplate: function() {

            let dataGrid = $("<div>").dxDataGrid( {
                showBorders : true,
                dataSource : Fse.Data.newDataSource( { object : "RPT.userReportRequests", key : "reportRequestId" } ),
                filterRow : { 
                    visible : true,
                },
                rowAlternationEnabled : true,
                onCellDblClick : function( e ) {


                    if( e.column.dataField != "reportName" ) return;
                    if( ! e.data.reportRequestId ) return;

                    if( Fse.Portal.appConfiguration.STP.isProduction != "N" ) return;

                    let runURL = Fse.Util.updateURL( "https://dev.fsenablers.com/fse/z_cfmodMaster/RPT/tools/reportGenerationOutput.cfm", { rr : e.data.reportRequestId } );
                    window.open( runURL );
                },
                columns : [
                    {
                        dataField : "reportName", caption : "Report", allowFiltering : true,
                        cellTemplate : function( container, options ) {
                            if( options.data.referenceName ) {
                                container.append( $( "<div>" ).text( options.data.referenceName ) );
                            } else {
                                container.append( $("<div>").text( options.data.reportName ) );
                            }
                            container.append( $("<div>").text( options.data.statusDisplay ).css( { "font-size" : "10px", "color" : options.data.status == "ERROR" ? "red" : "silver" }) );
                        }
                    },
                    {
                        dataField : "status", width : 50, alignment : "center", allowFiltering : false,
                        cellTemplate : function( container, options ) {
                            if( options.data.status != "COMPLETE" ) {
                                container.append( $("<em>").text( "na" ) )
                            } else {
                                if( options.data.reportMethod == "DOWNLOAD" ) {

                                    let iconClass = "dx-icon-doc";

                                    if( options.data.fileType == "PDF" ) {
                                        iconClass = "dx-icon-pdffile";
                                    } 

                                    if( options.data.fileType == "XLSX" ) {
                                        iconClass = "dx-icon-xlsxfile";
                                    }

                                    if( options.data.fileType == "XLS" ) {
                                        iconClass = "dx-icon-xlsfile";
                                    }

                                    if( options.data.fileType == "TXT" ) {
                                        iconClass = "dx-icon-textdocument";
                                    }

                                    $("<i>").addClass( iconClass ).css( { "cursor" : "pointer" } ).on( "click", function( jqe ) {
                                        window.location.href = options.data.downloadURL;
                                    }).appendTo( container );
                                } else if( options.data.reportMethod == "EMAIL" && options.data.emailURL ) {
                                    $("<i>").addClass( "dx-icon-email" ).css( { "cursor" : "pointer" } ).on( "click", function( jqe ) {
                                         Fse.Portal.popupWindow('Email',options.data.emailURL,750);
                                    }).appendTo( container );
                                }
                            }
                        }
                    }
                    ,
                    {
                        type : "buttons", width : 35, allowSearch : false,
                        buttons : [
                            { 	template : function( container, options ) {

                                let menuItems = [];

                                if( options.data.status == "COMPLETE" || options.data.downloadURL ) {
                                    menuItems.push( {
                                        text : "Email",
                                        onClick : function( e ) {

                                            let es = new EmailSender( {
                                                trackingCode : "RPT700",
                                                subject : options.data.referenceName ? options.data.referenceName : options.data.reportName,
                                                attachmentLinks : [
                                                    { text : options.data.fileName, href : options.data.downloadURL + `&fileName=${encodeURIComponent( options.data.fileName )}` }
                                                ]
                                            })

                                            es.show();
                                        }
                                    })

                                }

                                if( options.data.status == "COMPLETE" || options.data.status == "ERROR" || options.data.status == "CANCELLED" ) {
                                    menuItems.push ( {
                                        text : "Remove",
                                        onClick : function( e ) {

                                            
                                        if( confirm( "Clear completed report request?" )) {


                                                let removeReportData = {
                                                    reportRequestId : options.data.reportRequestId,
                                                    userId : parseInt( Fse.Portal.appConfiguration.STP.userId )
                                                }

                                                $.ajax( {
                                                    method : "POST",
                                                    url : Fse.Util.updateURL( $("link#PortalDocRootURL").attr( "href") + "/apps/RPT/index.cfm", { do : "clearUserReportRequest", mode : "direct" } ),
                                                    data : removeReportData
                                                }).done( function() {
                                                    dataGrid.refresh();
                                                })
                                            
                                                
                                                }


                                            
                                        }
                                    })
                                }
                                                                        

                                if( ! menuItems.length ) return;

                                const b = $("<div>").addClass("dx-icon-overflow").css("display", "inline-block");
                                b.on( "click", function( jqe ) {

                                    $("<div>").dxContextMenu( {
                                        items : menuItems,
                                        target : b,
                                        hideOnOutsideClick : true,
                                        onHidden : function( e ) {
                                            e.component.element().remove();
                                        }
                                    }).appendTo( $("body") ).dxContextMenu( "show" );

                                })

                                return b;


                                }
                            }
    					]
                    }
                ],
                scrolling : { mode : "virtual" },
                height : 300
            }).dxDataGrid( "instance" );

            return dataGrid.element();


        },
        toolbarItems : [
            {
                toolbar : "bottom",
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Close",
                    onClick : function( e ) {
                        popup.hide();
                    }
                }
            }
        ],
        onHidden : function( e ) {
            e.component.element().remove();
        }
    }).dxPopup( "instance" );

    $("body").append( popup.element() );
    popup.show();


}


showClientPermissionList = function() {


    $("<div>").dxPopup( {

        title : "User's Granted Permissions",
        height : 610,
        width : 860,

        contentTemplate : function() {

            return $("<div>").dxDataGrid( {
                dataSource : Fse.Data.newDataSource( { object : "SYS.clientPermissionList", keyField : "permission" } ),
                width : "100%",
                height : "100%",
                scrolling : { mode : "virtual" },
                showBorders : true,
                filterRow : { visible : true },
                columns : [
                    { dataField : "permission", caption : "Permission" },
                    { dataField : "name", width : 250, caption : "Permission Name" },
                    { dataField : "description" }
                ]

            });

        },


        hideOnOutsideClick : true,

        onHidden : function( e ) {

            e.component.element().remove();
            e.component.dispose();

        }




    })

    .appendTo( $("body") )

    .dxPopup( "instance" ).show();


}

let showPasswordChangePopup = function() {

    let form = null;
    let notificationSocket = $("<div>").css( { color : "#F53611", "padding-top" : "15px" })

    let popup = $("<div>").dxPopup( {
        title : "Change Password",
        hideOnOutsideClick : true,
        width : 400,
        height : "auto",
        contentTemplate : function() {
            form = $("<div>").dxForm( {
                items : [
                    { dataField : "currentPassword", caption : "Current Password", isRequired : true, editorOptions : { mode : "password" } },
                    { dataField : "newPassword", caption : "New Password", isRequired : true, editorOptions : { mode : "password" }, validationRules : [
        				{ type: "stringLength", message: "Passwords must be at least 8 characaters", min : 8 },
                        { type : "pattern", pattern : "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).*$", message : "Passwords must contain at least 1 uppercase letter, 1 lowercase letter and 1 numeric character" }
                    ] },
                    { dataField : "confirmPassword", caption : "Confirm New", isRequired : true, editorOptions : { mode : "password" }  }
                ]
            }).dxForm( "instance" )

            let content = $("<div>")
                .append( $("<p>").css( { "font-size" : "larger" } ).text( "Enter your current password, a new password and confirmation.  Upon successful password change you will be required to login again with the new password." ))


                .append( form.element() )
                
                .append( $("<div>").dxToolbar( {
                    items : [
                        { location : "before", template : function() { return notificationSocket } }
                    ],
                    height : 30
                }) );

            return content;
        },
        toolbarItems : [
            { 
                toolbar : "bottom",
                location : "after",
                widget : "dxButton",
                options : {
                    type : "default",
                    text : "Change Password",
                    onClick : function( e ) {
                        let vr = form.validate();
                        if( ! vr.isValid ) return;

                        let data = form.option( "formData" );
                        if( data.newPassword !== data.confirmPassword ) {

                            notificationSocket.text( "New Password and Confirm Password do not match" );
                            // DevExpress.ui.notify( { message: "New Password and Confirm Password do not match", width : 600, shading: true, position : "center" }, "error", 750 );
                            return;
                        }

                        let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );

                        $.ajax( {
                            method : "POST",
                            url : `${portalDocRootURL}/public/actions/changePassword.cfm`, 
                            data : data
                        }).done( function( passwordChange ) {

                            if( passwordChange.message ) {
                                notificationSocket.text( passwordChange.message );
                            } else {
                                notificationSocket.text( '' ); 
                            }

                            if( passwordChange.passwordChanged ) {
                                notificationSocket.css( { color : "#2B8000" } )
                            } else {
                                notificationSocket.css( { color : "#F53611" } )
                            }

                            if( passwordChange.passwordChanged ) {
                                popup.hide();
                            }


                            if( passwordChange.logoff ) {

                                alert( passwordChange.message );

                                let logoffURL = `${portalDocRootURL}/public/actions/logoff.cfm`;
                                window.location.href = logoffURL;

                            }
                          
                            
                        })
                }
                }
            }
        ],
        onHidden : function( e ) {
            e.component.element().remove();
            e.component.dispose();
        }
    }).dxPopup("instance");

    $("body").append( popup.element() )
    popup.show();

}



UserProfileEditor = function() {

    let instance = this;
    instance.container = null;

    instance.contentElement = $("<div>").css( { "padding" : "10px" } );
    let contentElement = instance.contentElement;

    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );
    let userData = Fse.Portal.appConfiguration.STP;

    let hide = function() {
        if( instance.container && instance.container.hide ) {
            instance.container.hide();
        }
    }

    let profileForm = $("<form>").attr( { 
        "method" : "POST",
        "action" : `${portalDocRootURL}/apps/ADM/index.cfm?do=updateUserProfile`,
        "name" : "frm_accountProfile_2"
    })

    let profileReadOnly = userData.clientStpAdminUser == "Y" ? true : false;

    let submitButton = null;

    let profileFormObject = $("<div>").dxForm( {

        validationGroup : "userProfile",
        formData : {
          userFirstName : userData.userFirstName,
          userLastName : userData.userLastName,
          userAddress1 : userData.userAddress1,
          userAddress2 : userData.userAddress2,
          userCity : userData.userCity,
          userState : userData.userState,
          userZipCode : userData.userZipCode,
          userTitle : userData.userTitle,
          userPhone : userData.userPhone,
          userCell : userData.userCell
        },
        items : [
            { name : "userFirstName", dataField : "userFirstName", isRequired : true, label : { location : "left", text : "First Name" }, editorOptions : { maxLength : 50, readOnly : profileReadOnly }},
            { name : "userLastName", dataField : "userLastName", isRequired : true, label : { location : "left", text : "Last Name" }, editorOptions : { maxLength : 50, readOnly : profileReadOnly }},
            { dataField : "userAddress1", isRequired : false, label : { location : "left", text : "Address" }, editorOptions : { maxLength : 75, readOnly : profileReadOnly }},
            { dataField : "userAddress2", isRequired : false, label : { template : function() { return $("<div>") } }, editorOptions : { maxLength : 75, readOnly : profileReadOnly }},
            { dataField : "userCity", isRequired : false, label : { location : "left", text : "City" }, editorOptions : { maxLength : 25, readOnly : profileReadOnly }},
            { dataField : "userState", isRequired : false, label : { location : "left", text : "State" }, editorOptions : { maxLength : 25, readOnly : profileReadOnly }},
            { dataField : "userZipCode", isRequired : false, label : { location : "left", text : "Zip Code" }, editorOptions : { maxLength : 10, readOnly : profileReadOnly }},
            { dataField : "userTitle", isRequired : false, label : { location : "left", text : "Title" }, editorOptions : { maxLength : 50, readOnly : profileReadOnly }},
            { dataField : "userPhone", isRequired : false, label : { location : "left", text : "Phone" }, editorOptions : { maxLength : 30, readOnly : profileReadOnly }},
            { dataField : "userCell", isRequired : false, label : { location : "left", text : "Cell" }, editorOptions : { maxLength : 30, readOnly : profileReadOnly }}
        ],

        onFieldDataChanged : function( e ) {

            submitButton.option( { disabled : false } );


        }
    }).appendTo( profileForm ).dxForm( "instance" );

    $("<label>").text( "Landing Page URL" ).css( { "padding-top" : "10px", "display" : "block" } ).appendTo( profileForm );

    let landingPageField = $("<div>").dxTextBox( {
        name : "landingPageURL",
        validationGroup : "userProfile",
        value : userData.portalLandingPageURL,
        onValueChanged : function( e ) {
            submitButton.option( { disabled : false } );
        }
    }).appendTo( profileForm ).dxTextBox( "instance" );

    $("<div>")
    .append( $("<a>").text( "clear" ).css( "padding-right", "1em" ).on( "click", function( e ) {
        landingPageField.option( "value", null );
    }) )
    .append( $("<a>").text( "use current" ).on( "click", function(e) {
        landingPageField.option( "value", window.location.href );
    }) )
    .appendTo( profileForm );
    

    let preferencesElement = $("<p>");
    preferencesElement.append( $("<div>").text( "Preferences:" ) );

    profileForm.appendTo( contentElement )

    if( ! profileReadOnly ) {

        let profileButtons = [];



        profileButtons.push( 
        
            {
                location : "after",
                widget : "dxButton",
                options : { 
                    text : "change password", stylingMode : "text", onClick : function( e ) {

                        if( Fse.Portal.appConfiguration.STP.loginEmailAddress === Fse.Portal.appConfiguration.STP.userEmailAddress ) {
                            hide();
                            showPasswordChangePopup();
                        } else {
                            alert( "Password change not available in Super User mode" )
                        }

                } }
            }
        );
            
        profileButtons.push( 
             {
                icon : "logout",
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Logout",
                    hint : "Logout",
                    onClick : function( e ) {
                        if( confirm( "Are you sure you want to logout?" ) ) {
                            let logoffURL = $("link#PortalDocRootURL").attr( "href" ) + "/public/actions/logoff.cfm";
                            Fse.Portal.doLogoff( logoffURL );
                        }
                    }
                }
                
            },
    
            {
                location : "after",
                template : function() {
                    submitButton = $("<div>").dxButton( { disabled : true, type : "default", text : "Update Profile", onClick : function( e ) {

                        let v = DevExpress.validationEngine.validateGroup( "userProfile" );
                        if( v.isValid ) {
    
                            let data = profileFormObject.option( "formData" );
                            data.landingPageURL = landingPageField.option( "value" );
                            if( ! data.landingPageURL ) {
                                data.landingPageURL = "";
                            }
                            
                            data.newNavigation = true;
    
                            $.ajax( {
                                method : profileForm.attr( "method" ),
                                url : profileForm.attr( "action" ), 
                                data : profileFormObject.option( "formData" )
                            }).done( function() {
                                window.location.reload();
                            })
                            
                        }
    
                    } }).dxButton( "instance" );

                    return submitButton.element();
                }
            }

        )

        $("<div>").dxToolbar( {
            items : profileButtons
        }).css( { "margin-top" : "5px", "margin-bottom" : "5px" } ).appendTo( contentElement )
    } else {


        $("<div>").dxToolbar( {
            items : [ {
                location : "after",
                widget : "dxButton",
                options : {
                    text : "Logout",
                    hint : "Logout",
                    onClick : function( e ) {
                        if( confirm( "Are you sure you want to logout?" ) ) {
                            let logoffURL = $("link#PortalDocRootURL").attr( "href" ) + "/public/actions/logoff.cfm";
                            Fse.Portal.doLogoff( logoffURL );
                        }
                    }
                }
                
            } ]
        }).css( { "margin-top" : "5px", "margin-bottom" : "5px" } ).appendTo( contentElement )

    }

    let actionButtons = [];
    let clientVariablesJSON = sessionStorage.getItem( "clientVariablesJSON");
    if( clientVariablesJSON && userData.developerLogin == "Y" ) {
        actionButtons.push( 
            {
                location : "before",
                widget : "dxButton",
                options : {  text : "Permissions", onClick : function( e ) {
                    showClientPermissionList();
                }}
            },
            
            {
            location : "before",
            widget : "dxButton",
            options : { text : "Variables", onClick : function( e ) { 

                let allVariableData = JSON.parse( clientVariablesJSON );

                allVariableData.forEach( function( d ) {
                    d.type = "CLIENT"
                })

        
                let buildItems = function( baseKey, object ) {
        
                    let items = [];
                    for( let k in object ) {
        
                        let item = {
                            key : `${baseKey}.${k}`,
                            text : k,
                            typeOf : typeof object[k]
                        }
        
        
                        if( item.typeOf == "object" ) {
                            item.items = buildItems( item.key, object[k] )
                        } else {
                            item.text = `${k} = ${object[k]}`;
                            item.value = object[k];
                        } 
                        
                      
                        items.push( item );
        
                        if( item.value && k != "_installed" ) {
                            allVariableData.push( { type : "APPLICATION", name : item.key, value : item.value } );
                        }
                        
        
                    }
        
                    return items;
        
                }
        
        
                buildItems( "Fse.Portal.appConfiguration", Fse.Portal.appConfiguration );
        
               
               let popup = $("<div>").dxPopup({
                   contentTemplate: function() {
           
                       return $("<div>").dxDataGrid({
                           dataSource: allVariableData,
                           showBorders: true,
                           showRowLines: true,
                           rowAlternationEnabled: true,
                           headerFilter: {
                               visible: true,
                               allowSearch: true,
                           },
                           height : 550, // fixed height no datagrid works well with auto height on popup
                           showScrollbar: 'onHover',
                           remoteOperations: true,
                           scrolling: {
                                mode: 'virtual',
                                 rowRenderingMode: 'virtual',
                               },
                           columns: [ {
                             dataField : "type",
                             groupIndex : 0,
                           },
                           {
                           caption: 'Name',
                           allowSearch : true,
                           searchExpr : "name",
                           headerCellTemplate: function (header, info) {
                           $('<div>')
                               .html(info.column.caption)
                               .css('font-size', '16px')
                               .css('font-weight', 'bold')
                               .appendTo(header);
                           },
                           dataField: 'name'
                           },
                           {
                           caption: 'Value',
                           headerCellTemplate: function (header, info) {
                           $('<div>')
                               .html(info.column.caption)
                               .css('font-size', '16px')
                               .css('font-weight', 'bold')
                               .appendTo(header);
                           },
                           dataField: 'value',
                           allowHeaderFiltering : false
                           }]
                       });
           
                   },
                   width: 950,
                   height : "auto", // auto height works well
                   title: 'Platform Variables',
           
                   hideOnOutsideClick: true, // this is the feature in future versions of DevEx we don't have, when we upgrade this will work
                   
                   showCloseButton: false,
                   toolbarItems: [{
                         widget: 'dxButton',
                         toolbar: 'bottom',
                         location: 'after',
                         options: {
                           text: 'Close',
                           onClick: function ( e ) {
                                popup.hide();
                           },
                     },
                   }],
                   onHidden: function ( e ) {
                       // when the popup goes away, clean up
                       popup.element().remove(); // remove it from the dom
                       popup.dispose(); // get rid of the dx object
                   }
               }).appendTo( $("body") ).dxPopup("instance"); 
           
               popup.show();

            } }
        });
    }


    $("<div>").dxToolbar( {
        items : actionButtons
    }).appendTo( contentElement ).css( "margin-top", "10px" );

    let suHistoryJSON = sessionStorage.getItem( "suHistoryJSON" );
    if( suHistoryJSON ) {

        let suOptions = $("<div>").css( "padding-top", "10px" );
        

        let suEmailAddress = $("<div>").dxTextBox( {
            width : 313,
            placeholder : "email address"
        }).dxTextBox("instance")


        let suValidator = suEmailAddress.element().dxValidator({
            validationRules: [{
                type: 'required',
                message : "Email is required."
            }, {
                type: 'email',
                message: 'Email is invalid.'
            }]
        }).dxValidator( "instance" );


        let su = function( emailAddress ) {

            let suURL = $("link#PortalDocRootURL").attr( "href" ) + "/su.cfm?email=" + encodeURIComponent( emailAddress );
            window.location.href = suURL;

        }

        $( "<div>").dxToolbar( {
            items : [
                {
                location : "before",
                widget : "dxButton", options : {
                        text : "SU",
                        onClick : function( e ) {
                            let vr = suValidator.validate();
                            if( vr.isValid ) {
                                su( suEmailAddress.option( "value" ) );
                            }
                                        }
                    }
                },
                {
                location : "before",
                template: function() {
                    return suEmailAddress.element();
                }
                }
            ]
        }).appendTo( suOptions ).css( "padding-bottom", "10px" );


        let suHistory = JSON.parse( suHistoryJSON );

        let suHistoryDataSource = new DevExpress.data.DataSource( {
            paginate : false,
            store : { 
                type : "array",
                data : suHistory,
                key : "emailAddress"
            }
        });

        suHistoryDataSource.sort( [ { selector: "domain", desc: false }, { selector: "mailbox", desc: false } ] );

        suHistoryDataSource.load();

        suHistoryItems = suHistoryDataSource.items();

        let suDomains = {};
        let suTreeData = [];
        suHistoryItems.forEach( function( su ) {

            su.domain = su.domain.toLowerCase();

            if( ! suDomains[su.domain] ) {
                suDomains[su.domain] = su.domain;
                suTreeData.push( {
                    ID : su.domain,
                    text : su.domain
                })
            }
            suTreeData.push( {
                ID : su.emailAddress,
                text : su.mailbox,
                domain : su.domain,
                emailAddress : su.emailAddress
            })
        })

        
          $( "<div>" ).dxTreeList({
            dataSource: suTreeData,
            rootValue: null,
            keyExpr: 'ID',
            height : 300,
            parentIdExpr: 'domain',
            columns: [{
              dataField: 'text',
              caption: 'Login',
            }],
            onCellClick : function(e ) {
                if( e.rowType == "data" ) {
                    if( e.data.emailAddress ) {
                        su( e.data.emailAddress );
                    } else {
                        if( e.component.isRowExpanded( e.data.ID )) {
                            e.component.collapseRow( e.data.ID );
                        } else {
                            e.component.expandRow( e.data.ID );
                        }
                    }
                }
            },
            showRowLines: true,
            showBorders: true,
            columnAutoWidth: true,
          }).appendTo( suOptions );

        contentElement.append( suOptions );

    }

    contentElement.append( $("<div>").text( `${window.innerWidth} x ${window.innerHeight}` ).css( { color : "#dadce0", "font-size" : "9px", "padding-top" : "5px" }));



}

UserProfileEditor.prototype.constructor = UserProfileEditor;

UserProfileEditor.prototype.element = function() {
    return this.contentElement;
}

UserProfileEditor.prototype.setContainer = function( container ) {
    this.container = container;
}


$( function() { Fse.initialize().done( function() { 
    Fse.initialize().done( function() {

    $("#titleContainer")
    .empty()
    .css( {
        "height": "auto"
    } )


    let portalDocRootURL = $("link#PortalDocRootURL").attr( "href" );
    let homeURL = `${portalDocRootURL}/welcome.cfm`;

    let navigationURL =  Fse.Util.updateURL( $("link#appDataURL").attr( "href"), { mode : "direct", object : "STP.userNavigation" } );

    let trail = $("<div>").addClass( "menuPath" );

    let updateMenuTrail = function() {

        let menuTrail = sessionStorage.getItem( "stpNavigation" );

        if( ! menuTrail ) {
            menuTrail = '["Home"]';
        }
    
        menuTrail = JSON.parse( menuTrail );

        let menuTrailDelimeterText = "/";

        trail.empty();

        if( menuTrail.length > 1 ) {
            menuTrail.forEach( function ( t ) {
                trail
                    .append( $("<span>").text( menuTrailDelimeterText ).addClass( "menuTrailSeparator" ))
                    .append( $("<span>").text( t ).addClass( "menuTrail" ));
            })
        }
   
    }

	let menu = $("<div>").dxMenu({
        cssClass : "mainMenu",
	    hideSubmenuOnMouseLeave: false,
	    showFirstSubmenuMode: { name: "onHover", delay: { show: 0, hide: 0 } },
	    orientation : "horizontal",
        onItemContextMenu : function( e ) {
            e.event.preventDefault();
            if( e.itemData.uri != '' ) {


                let targetURL = null
				if ( ( new RegExp( "^http", "i" )).test( e.itemData.uri )) {
					targetURL = e.itemData.uri
				} else if ( ( new RegExp( "^/" )).test( e.itemData.uri )) {
					targetURL = portalDocRootURL + e.itemData.uri
				} 

                $("<div>").dxContextMenu( {
                    items : [
                        {
                            closeMenuOnClick : true,
                            text : "Open in new window",
                            newWindow : true
                        },
                        {
                            closeMenuOnClick : true,
                            text : "Open in new tab",
                            newWindow : false
                        }
                    ],

                    onItemClick : function( ctxe ) {

                        if( ctxe.itemData.newWindow ) {
                            window.open( targetURL, "_blank", "resizable=1" );
                        } else {
                            window.open( targetURL, "_blank" );
                        }
                    },

                    hideOnOutsideClick : true,
                    onHidden : function( ctxe ) {
                        ctxe.component.element().remove();
                        ctxe.component.dispose();
                    },
                    target : e.itemElement,
                }).appendTo( "body" ).dxContextMenu( "show" );
            }
        },
	    onItemClick : function( e ) {

			const itemData = e.itemData;

	    	if( itemData.uri != '' ) {

	    		let targetURL = null
				if ( ( new RegExp( "^http", "i" )).test( itemData.uri )) {
					targetURL = itemData.uri
				} else if ( ( new RegExp( "^/" )).test( itemData.uri )) {
					targetURL = portalDocRootURL + itemData.uri
				} 
	    		
	    		let targetWindow = "_self";
	    		if( e.itemData.hrefTarget != '' ) {
	    			targetWindow = e.itemData.hrefTarget;
	    		}

				if( targetURL ) {


                    let menuTrail = [];

                    buildMenuTrail = function( menuItem ) {
                        menuTrail.unshift( menuItem.text );
                        if( menuItem.parentItem ) {
                            buildMenuTrail( menuItem.parentItem );
                        }
                    }
        
                    buildMenuTrail( itemData );
        
                    sessionStorage.setItem( "stpNavigation", JSON.stringify( menuTrail ));
        
					window.open( targetURL, targetWindow );
					return;
				}

	    	} else if ( itemData.clickJS != '' ) {
	    		
	    		let clickJS = itemData.clickJS.replace( new RegExp( 'javascript:|data:|vbscript:', 'i' ), '' );
	    		if( clickJS != '' ) {
		    		try {
		    			eval( clickJS )
		    		} catch( t ) {
		    		}
	    		}
	    		
	    	}

	    },
	  }).dxMenu( "instance" );


        let userData = Fse.Portal.appConfiguration.STP;

        let systemMenuItems = []

        systemMenuItems.push( {

            // text : "Reports",
            icon : "report",
            template : function( item ) {

                return $("<i>").attr( "id", "report-center-view-options-switch" ).addClass( [ "dx-icon", "dx-icon-report" ]).attr( { "title" : "Reporting" } );

            },
            items : [
                { id : "runReports", text : "Run..." },
                { id : "viewReports", text : "View..." },
                { id : "reportCenter", text : "Report Center..." }
            ]
            });


        if( window.showSearchCenter ) {
            
            systemMenuItems.push( {
                id : "search",
                icon : "search",
                showSearch : function() {
                    window.showSearchCenter();
                }
            })

        } else {
            let appSearchCenter = $("a.option.fse-hidden.searchCenter" );

            if( appSearchCenter.length ) {

                let appKeywordSearch = $("a.option.fse-hidden.searchCenterKeyword" );

                if( appKeywordSearch.length ) {


                    let searchFieldNameId = appKeywordSearch.attr( "fse:fieldname" );

                    systemMenuItems.push( {
                        id : "keywordSearch",
                        template : function() {
                            return $("<div>").dxTextBox( {
                                name : searchFieldNameId,
                                inputAttr : { id : searchFieldNameId },
                                width : 150,
                                placeholder : "quick search",
                                onValueChanged : function( e ) {
                                    if( ! e.component.option( "fseSearching" ) ) {
                                        e.component.option( { "fseSearching" : true } );
                                        eval( appKeywordSearch.attr( "fse:onchange" ) );
                                        window.setTimeout( function() {
                                            e.component.option( { disabled : true, value : null, placeholder : "searching..." } );
                                        }, 100 );
                                        
                                    } 
                                }
                             })
                        }
                    })
                }


                systemMenuItems.push( {
                    id : "search",
                    icon : "search",
                    showSearch : function() {
                        eval( appSearchCenter.attr( "fse:onclick" ) )
                    }
                })
                
                /*
                <a class="option searchCenterKeyword fse-hidden" fse:onchange="Fse.OPR.applyQuickKeyword()" fse:fieldname="kwdQuick">Keyword Search</a>
                */
            }
        }
    
       
        if( Fse.Portal.checkPermission( "TELUSSalesEnablementGetHelpForm" ) ) { 
            systemMenuItems.push( {
                icon : "help",
                id : "getHelp",
                template : function() {
                    return $("<i>").addClass( [ "dx-icon", "dx-icon-help" ] ).attr( { "title" : "Get Help" } );
                }
            })
        }
        
            
        systemMenuItems.push(  {
            icon : "account",
            id : "userProfile",
            template : function() {
                return $("<i>").addClass( [ "dx-icon", "dx-icon-account" ]).attr( { "title" : "Account Settings" } );
            }
        });

        systemMenuItems.push(  {
            icon : "logout",
            id : "logout",
            template : function() {
                return $("<i>").addClass( [ "dx-icon", "dx-icon-logout" ]).attr( { "title" : "Logout" } );
            }
        });

        let systemMenuPopover = null;


        let systemMenu = $("<div>").dxMenu( {
            cssClass : "systemMenu",
            items : systemMenuItems,
            onItemClick : function( e ) {
                let item = e.itemData;

                if( ! item.id ) {
                    return;
                }

                if( item.id == "reportCenter" ) {
                    let reportCenterURL = `${portalDocRootURL}/apps/RPT/index.cfm`;
                    window.location.href = reportCenterURL;
                    return;
                }

                let popoverTarget = e.element;
                if( item.id == "userProfile" ) {
                    popoverTarget = e.itemElement;
                }

                let popover = null;
                let popoverConfig = {

                    hideOnOutsideClick : true,
                    target : popoverTarget,
                    width : 400,
                    enableBodyScroll : false,
                    contentTemplate : function() {
                        return contentElement;
                    },
                    onHidden : function( e ) {
                        e.component.element().remove();
                        e.component.dispose();
                        if( e.component === systemMenuPopover ) {
                            systemMenuPopover = null;
                        }
                    }

                };

                let contentElement = null;
                let popoverContentWidget = null;

                switch ( item.id ) {

                    case "search" :
                        item.showSearch();
                        break;

                    case "userProfile" :
                        popoverContentWidget = new UserProfileEditor();
                        // contentElement = userProfileEditor.element();
                        break;

                    case "runReports" :
                        popoverContentWidget = new RunReportsWidget();
                        // contentElement = runReportsWidget.element();
                        break;

                    case "viewReports" :
                        popoverContentWidget = new ViewReportsWidget();
                        $("#report-center-view-options-switch" ).removeClass( "finished");
                        // contentElement = viewReportsWidget.element();
                    break;

                    case "getHelp" :
                        window.location.href = $("link#PortalDocRootURL").attr( "href" ) + "/apps/ContactUs/index.cfm?view=getHelp";
                    break;

                    case "logout" :
                        if( confirm( "Are you sure you want to logout?" ) ) {
                            let logoffURL = $("link#PortalDocRootURL").attr( "href" ) + "/public/actions/logoff.cfm";
                            Fse.Portal.doLogoff( logoffURL );
                        }
                    break;

                }

                if( ! popoverContentWidget ) {
                    return;
                }

                contentElement = popoverContentWidget.element();

                if( ! contentElement ) {
                    return;
                }


                if( systemMenuPopover ) {
                    systemMenuPopover.hide();
                    systemMenuPopover = null;
                }


                systemMenuPopover = $("<div>").dxPopover( popoverConfig ).appendTo( "body" ).dxPopover( "instance" );

                popoverContentWidget.setContainer( systemMenuPopover );

                systemMenuPopover.show();
            }
        }).dxMenu( "instance" );


    let loadPromise = null;

    let sessionUserId = sessionStorage.getItem( "userId" );
    let sessionClientName = sessionStorage.getItem( "clientName" );
    let navigationJSON = sessionStorage.getItem( "navigationJSON" );

    if( userData.userId != sessionUserId || userData.clientName != sessionClientName ) {
        navigationJSON = null;
        sessionStorage.removeItem( "navigationJSON" );
        sessionStorage.removeItem( "userId" );
        sessionStorage.removeItem( "clientName" );
        sessionStorage.removeItem( "stpNavigation" );
    }

    if( ! navigationJSON ) {

        loadPromise = ( new DevExpress.data.DataSource( navigationURL ) ).load();

        loadPromise.done( function( navigationItems ) {
            //console.log( 1 );
            let navigationJSON = JSON.stringify( navigationItems );
            sessionStorage.setItem( "navigationJSON", navigationJSON );
            sessionStorage.setItem( "userId", userData.userId );
            sessionStorage.setItem( "clientName", userData.clientName );
        })
    
    } else {

        loadPromise = $.Deferred();
        loadPromise.resolve( JSON.parse( navigationJSON ) )
    }


	loadPromise.done( function( navigationItems ) {

        let maxItems = Fse.Portal.appConfiguration.STP.navigationMaxItems;
        let menuItems = [];
        let moreItems = [];

        let setParentItem = function( i ) {
            if( i.items ) {
                for( let x = 0; x < i.items.length; x++ ) {
                    i.items[x].parentItem = i;
                    setParentItem( i.items[x] );
                }
            }
        }

        navigationItems.forEach( function( i ) {
                i.parentItem = null;
                setParentItem( i )
        } );

        for( let x = 0; x < navigationItems.length; x++ ) {

            // home page
            if( navigationItems[x].uri === "/welcome.cfm" ) {
                continue;
            }

            // report center
            if( navigationItems[x].uri === "/apps/RPT/index.cfm" ) {
                // decision was to include in the menu as well as the system menu
                // continue;
            }

            if( menuItems.length < maxItems ) {
                menuItems.push( navigationItems[x] );
            } else {
                moreItems.push( navigationItems[x] );
            }
        }


        if( moreItems.length ) {

            let more = {
                text : "More",
                items : moreItems
            }
            more.items.forEach( function( mi ) {
                mi.parentItem = more;
            })
            menuItems.push( more );

        }



		menu.option( { 
            "items" :  menuItems,
            "selectedItem" : moreItems[0]
        });


        let findNavigation = function( menuItems ) {

            let foundItem = null;
            for( let nx = 0; nx < menuItems.length && ! foundItem; nx++ ) {
                let item = menuItems[nx];

                if( item.items ) {
                    foundItem = findNavigation( item.items );
                }
                if( ! foundItem ) {

                    let menuSelectionRegExp = null;

                    if( /^re:/.test( item.menuSelectionCode ) ) {
                        try {
                            menuSelectionRegExp = new RegExp( item.menuSelectionCode.replace( /^re:/, '' ), "i" );
                        } catch( t ) {}
                    } else if ( item.uri ) {
                        //console.log( item.uri );
                        try {
                            // let regExpSrc = item.uri.replace( /\//g, '\\/' );
                            // regExpSrc = regExpSrc.replace( /\?/, '\\?' );

                            let regExpSrc = item.uri.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
                            menuSelectionRegExp = new RegExp( regExpSrc, "i" );
                        } catch( t ) {
                        }
                    }

                    if( menuSelectionRegExp ) {
                        try {
                            if( menuSelectionRegExp.test( window.location.href ) ) {
                                // this is the current matching menu item
                                foundItem = item;
                            }
                        } catch( t ) {}
                    }
    
                }
            }

            return foundItem;

        }

        let currentItem = findNavigation( navigationItems );
        if( currentItem ) {

            let menuTrail = [];

            buildMenuTrail = function( menuItem ) {
                menuTrail.unshift( menuItem.text );
                if( menuItem.parentItem ) {
                    buildMenuTrail( menuItem.parentItem );
                }
            }

            buildMenuTrail( currentItem );

            sessionStorage.setItem( "stpNavigation", JSON.stringify( menuTrail ));
            updateMenuTrail();

            let selectedItem = currentItem;
            while( selectedItem.parentItem ) {
                selectedItem = selectedItem.parentItem;
            }

            menu.option( { "selectedItem" : selectedItem, "selectionMode" : "single" } );

        } else {
            console.log( "Navigation NOT FOUND" );
        }
        
        


	})
	




    let headerToolbarItems = [

        {
            location : "before",
            template : function() {
                return $("<img>").attr( { 
                    "src" : `${portalDocRootURL}/resources/stp-clean/graphics/Sales-Enablement-Logo.svg` 
                    } ).
                    css( {
                        "display" : "block",
                        // "height" : "90px",
                        "height" : "87px",
                        "margin-left" : "-65px",
                        "margin-top" : "-12px"
                    });
            }

        }
    ];

    let floatingNotice = $("<div>").css( {
        "position"  :"absolute",
        "left" : "32px",
        "top" : "47px"
    });

    let showFloatingNotice = false;

    let showNavigation = $("meta[name='stp-mode']").attr( "content" ) == "standard";

    let environment = $("meta[name='stp-environment']").attr( "content" );

    if( environment === "DEVELOPMENT" ) {
        showFloatingNotice = true;
        floatingNotice.append( $("<span>").text( 'DEVELOPMENT' ).css( { "font-size" : "14px", "color" : "red", "padding-right" : "10px" } ));
    }

    if( Fse.Portal.appConfiguration.STP.loginEmailAddress !== Fse.Portal.appConfiguration.STP.userEmailAddress ) {
        showFloatingNotice = true;
        floatingNotice.append( $("<span>").text( `${Fse.Portal.appConfiguration.STP.loginEmailAddress}/${Fse.Portal.appConfiguration.STP.userEmailAddress}` ).css( { "color" : "red" } ));
    }

    if( showFloatingNotice ) {
        $("body").append( floatingNotice );
    }

    headerToolbarItems.push( 
        {
            location : "after",
            template : function() {


                let clientLogoPath = userData.clientLogoPath;
                clientLogoPath = clientLogoPath.replace( /^http\:/i, 'https:' );
                clientLogoPath = clientLogoPath.replace( /images\.fsenablers\.com/i, 'appslibrary.com/images' );

                let pathParts = clientLogoPath.split( "." );
                let filePartIdx= pathParts.length - 2;
                let lastPart = pathParts[pathParts.length-2];

                pathParts[filePartIdx] = `${pathParts[filePartIdx]}_100`;

                clientLogoPath = pathParts.join( "." );

                let logoCSS = {
                    "display" : "block",
                    "max-height" : "50px"
                };

                let clientLogo =  $("<img>").attr( { 
                        "src" : clientLogoPath, 
                        } )
                    .css( logoCSS );

                let logoContainerCSS = { 
                    "padding-right" : "25px", 
                    "display" : "flex",
                    "align-items" : "center",
                    "justify-content" : "center",
                    "border-right-width" : "1px", 
                    "border-right-style" : "solid", 
                    "height" : "68px" 
                }

                return $("<div>").append ( clientLogo ).css( logoContainerCSS ).addClass( "dx-theme-border-color" )

            }

        })
        
    if( showNavigation ) headerToolbarItems.push( 

        { 
            location : "after",
            template : function() {

                let sMyRelationshipsDataURL =  $("link#PortalDocRootURL").attr("href") + "/data.cfm?object=crm.myRelationships";
                let myRelationshipsDataSource = new DevExpress.data.DataSource( sMyRelationshipsDataURL );

                
                /* select box implementation */

                let accountContainer = $("<div>").css( "padding-left", "25px ")
                    .append( 
                         $("<div>").dxSelectBox( {
                            placeholder : "-- Select Account --",
                            dataSource : myRelationshipsDataSource,
                            width : 250,
                            // height : 21,
                            displayExpr : "text",
                            valueExpr : "value",
                            onSelectionChanged : function( e ) {
                                if( e.selectedItem && e.selectedItem.value != "?" ) {
                                    let handled = Fse.CRM.viewProfile( e.selectedItem.value );
                                    if( handled ) {
                                        setTimeout( function() {
                                            e.component.option( "value", null );
                                        }, 10 );
                                    } else {
                                        window.location.href = e.selectedItem.value;
                                    }
                                }
                            }
                        
                        } )
                    )

                return accountContainer;
                
            }

        },
        { 
            location : "after",
            template : function() {
                return systemMenu.element();
            }

        }
    );

          

    let headerToolbar = $("<div>").dxToolbar( {
        height : 68,
        items : headerToolbarItems
    });
        
    let menuToolbar = $("<div>").dxToolbar( {


        xheight : 40,
        items : [
            {
                location : "before",
                template : function() {
                    return $("<i>").addClass( "dx-icon-home").css( { "cursor" : "pointer", "font-size" : "20px", "display" : "inline-block", "margin-top" : "2px" } )
                    .on( "click", function() {
                        window.location.href = homeURL;
                    } )
                }
            },
            { 
                location : "before",
                template : function() {
                    return menu.element();
                }

            }
        ]
    })


   


    let breadcrumbToolbar = $("<div>").dxToolbar( {

        items : [
            { location : "before",
               template : function() {
                    updateMenuTrail();
                    return trail;
               }
             }
        ]

    })

    let breadcrumbSectionCSS = {
        "height" : "32px",
        "padding-top" : "6px",
        "background-color" : "#F6F7F8",
        "border-bottom-width" : "1px", 
        "border-bottom-style" : "solid",
        "padding-left" : "42px"
    }

    breadcrumbSectionCSS["border-bottom"] = "none";
    breadcrumbSectionCSS["padding-top"] = "unset";
    breadcrumbSectionCSS["height"] = "10px";


    let toolbarCSS = {
        "padding-left" : "10px"
    };

    if( showNavigation ) {
        toolbarCSS["padding-right"] = "20px";
    }

    $("#titleContainer")
        .append( headerToolbar.css( toolbarCSS ) );

    if( showNavigation ) $("#titleContainer")        
        .append( $("<div>").css( { 
            "border-top-width": "1px", 
            "border-top-style" : "solid",
            "border-bottom-width": "1px", 
            "border-bottom-style" : "solid",
            "height" : "auto",
            "padding-top" : "5px",
            "padding-bottom" : "7px",
            "xpadding-bottom" : "auto",
            "padding-left" : "28px"
        } ).addClass( "dx-theme-border-color" ).append( menuToolbar ))
        .append( $("<div>").css( breadcrumbSectionCSS ).addClass( "dx-theme-border-color" )
            // .append( breadcrumbToolbar.css( { "background" : "transparent" } ) )
        )

    $("#primaryContainer").css( { "visibility" : "visible" });

}) }) });