function setupHandlersPanel() {
    $("#newHandler")
        .dialog({
            autoOpen: false,
            title: "Create new handler",
            height: "auto",
            width: "auto",
            autoResize: true,
            resizable: false,
            modal: true,
            closeOnEscase: true,
            draggable: false,
            open: function() {
                $("input").val("");
                $(".ui-state-error").hide();
                $(this)
                    .find("input:visible")
                    .first()
                    .focus();
                if ($(this).data("vp3Action") !== "create")
                    $(this).dialog("option", "title", "Create new handler from template '" + $(this).data("vp3HandlerName") + "'");
                let $hTemplates = $("#handlerTemplates");
                if (gHandlertemplates.length) {
                    $.each(gHandlertemplates, (i, t) => {
                        $hTemplates.append($("<option>", {text: t}));
                    });
                    $hTemplates.selectmenu();
                    $("#handlerTemplates_label_a").tooltip({
                        content: '<img height="100" width="100" src="/images/eythan.jpg" />'
                    });
                } else {
                    $("#handlerTemplatesLabel").hide();
                    $hTemplates.hide();
                }
            },
            buttons: {
                "Create new handler": function() {
                    if (!gEgo || !canUpdateDB()) $(this).dialog("close");
                    let name = $("#newHandler #handlerName")
                        .val()
                        .trim();
                    let descr = $("#newHandler #handlerDescr")
                        .val()
                        .trim();

                    // check handler name
                    if (!isValidEntityName(name)) {
                        $("#newHandler .ui-state-error")
                            .text("Invalid handler name")
                            .show();
                        return;
                    }
                    let templateDB, templateName;
                    if ($("#newHandler").data("vp3Action") === "create") {
                        templateName = $("#handlerTemplates option:selected").text();
                        if (templateName === "None") templateName = undefined;
                        if (templateName) templateDB = gParent;
                    } else {
                        templateName = $("#newHandler").data("vp3HandlerName");
                    }
                    createHandler(name, descr, templateDB, templateName);
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
        .keydown(function(event) {
            if (event.which == $.ui.keyCode.ENTER) return false;
            return true;
        });
    $("#copyEgoHandler")
        .dialog({
            autoOpen: false,
            title: "Copy bodies from old personality to this one",
            height: "auto",
            width: "auto",
            autoResize: true,
            resizable: false,
            modal: true,
            closeOnEscase: true,
            draggable: false,
            buttons: {
                Copy: function() {
                    var oldEgo = $("#copyEgoHandler #oldEgo")
                        .val()
                        .trim();
                    if (!oldEgo || !canUpdateDB()) return;
                    var name = $("#copyEgoHandler").data("vp3HandlerName");
                    $.post(formatEndpoint(getHandlerUrl(name) + "/copyego", "fromego=" + oldEgo + "&toego=" + gEgo), function() {
                        showInfo("Bodies successfully copied from old personality");
                    });
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
        .keydown(function(event) {
            if (event.which == $.ui.keyCode.ENTER) return false;
            return true;
        });

    $("#editVariant")
        .dialog({
            autoOpen: false,
            title: "Open handler with variant",
            height: "auto",
            width: "auto",
            autoResize: true,
            resizable: false,
            modal: true,
            closeOnEscase: true,
            draggable: false,
            buttons: {
                Open: function() {
                    var variantName = $("#editVariant #variantName")
                        .val()
                        .trim();
                    if (!variantName) return;
                    var name = $("#editVariant").data("vp3HandlerName");
                    var url = getHandlerUrl(name) + "/edit";
                    window.open(url + "?ego=" + gEgo + "&variant=" + variantName, name + "-" + variantName);
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
        .keydown(function(event) {
            if (event.which === $.ui.keyCode.ENTER) return false;
            return true;
        });

    if (gEgo && gEgo !== "all" && canUpdateDB(gPersonality)) {
        $("#createNewHandlerButton")
            .button()
            .click(function() {
                $("#newHandler")
                    .data("vp3Action", "create")
                    .data("vp3HandlerName", name)
                    .dialog("open");
            });
    } else {
        $("#createNewHandlerButton").hide();
    }

    setupHandlersTable();

    displayTags($("#handlersTags"), setupHandlersTable);
}

function setupHandlersTable() {
    setupNiceTable($("#handlersTable"), {
        headers: {0: {sorter: false}, 3: {sorter: "shortDate"}},
        dblClick: function($tr) {
            getHandler($tr, "edit");
        },
        cmenuDelegate: ".handlerMenu",
        cmenu: [
            {
                title: "View",
                uiIcon: "ui-icon-document",
                action: function(event, ui) {
                    setTimeout(function() {
                        getHandler($niceTableCurrentTR, "view");
                    }, 0);
                }
            },
            {
                title: "Edit",
                uiIcon: "ui-icon-pencil",
                disabled: gEgo == "all" || !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        getHandler($niceTableCurrentTR, "edit");
                    }, 0);
                }
            },
            {
                title: "Edit Variant",
                uiIcon: "ui-icon-document",
                disabled: gEgo == "all" || !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        var name = $niceTableCurrentTR
                            .find(".handlerName")
                            .text()
                            .trim();
                        if (name)
                            $("#editVariant")
                                .data("vp3HandlerName", name)
                                .dialog("open");
                    }, 0);
                }
            },
            {
                title: "View history",
                uiIcon: "ui-icon-clock",
                action: function(event, ui) {
                    setTimeout(function() {
                        getHandler($niceTableCurrentTR, "history");
                    }, 0);
                }
            },
            {title: "---"},
            {
                title: "Create new handler",
                uiIcon: "ui-icon-plus",
                disabled: !gEgo || gEgo == "all" || !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        $("#newHandler")
                            .data("vp3Action", "create")
                            .data("vp3HandlerName", name)
                            .dialog("open");
                    }, 0);
                }
            },
            {
                title: "Duplicate handler",
                uiIcon: "ui-icon-copy",
                disabled: !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        var name = $niceTableCurrentTR
                            .find(".handlerName")
                            .text()
                            .trim();
                        if (name)
                            $("#newHandler")
                                .data("vp3Action", "duplicate")
                                .data("vp3HandlerName", name)
                                .dialog("open");
                    }, 0);
                }
            },
            {
                title: "Delete",
                uiIcon: "ui-icon-trash",
                disabled: !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        deleteHandler($niceTableCurrentTR);
                    }, 0);
                }
            },
            {
                title: "Un-Delete",
                uiIcon: "ui-icon-refresh",
                disabled: !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        undeleteHandler($niceTableCurrentTR);
                    }, 0);
                }
            },
            {
                title: "Rename",
                uiIcon: "ui-icon-grip-dotted-horizontal",
                disabled: !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        var name = $niceTableCurrentTR
                            .find(".handlerName")
                            .text()
                            .trim();
                        if (name) renameEntity(name, "handler");
                    });
                }
            },
            {title: "---"},
            {
                title: "Referenced by",
                uiIcon: "ui-icon-arrowstop-1-w",
                disabled: !canUpdateDB(),
                action: function(event, ui) {
                    var name = $niceTableCurrentTR
                        .find(".handlerName")
                        .text()
                        .trim();
                    if (name) setTimeout(performSearch(name, "h"), 0);
                }
            },
            {
                title: "Copy bodies from old personality",
                uiIcon: "ui-icon-copy",
                disabled: gEgo == "all" || !canUpdateDB(),
                action: function(event, ui) {
                    setTimeout(function() {
                        var name = $niceTableCurrentTR
                            .find(".handlerName")
                            .text()
                            .trim();
                        if (name)
                            $("#copyEgoHandler")
                                .data("vp3HandlerName", name)
                                .dialog("open");
                    }, 0);
                }
            },
            {
                title: "Export responses",
                uiIcon: "ui-icon-copy",
                action: function(event, ui) {
                    setTimeout(function() {
                        getHandler($niceTableCurrentTR, "responses");
                    }, 0);
                }
            }
            /*{
        title: "Seek from top->from parent",
        uiIcon: "ui-icon-copy",
        action: function(event, ui) {
          setTimeout(function() {
            ChangeAndReplaceInHandler(
              $niceTableCurrentTR,
              "seek-top-to-seek-parent"
            );
          }, 0);
        }
      }, */
        ]
    });

    // fix download link href
    $(".downloadlink").each(function() {
        var url = $.url("path");
        if (!endsWith(url.toLowerCase(), "/handlers")) url += "/handlers";
        var $this = $(this);
        url += "/" + $this.attr("href");
        $this.attr("href", formatEndpoint(url));
    });

    setupDraggingOnTable();

    /*	$("#handlersTable").tooltip ({
		items: ".numbackrefs",
		track: "true",
		hide: false,
		show: false,
		content: function (callback) {
			if ($(this).text() == "0")
				return;
			var entId = $(this).attr("vp3-key");
			$.get(getPersonalityUrl() + "/backrefs/" + entId, function (data) {
				var doc = xslTransform(data, gHandlersXslt);
				callback($(doc).find("#handlersBackrefs")[0]);
			});
		},
		open: function(event, ui) {
    		$(".ui-tooltip").each(function() {
    			if (this != ui.tooltip[0])
    				$(this).remove();
			});
		}
	}); */
}

function ChangeAndReplaceInHandler($tr, action) {
    var name = $tr
        .find(".handlerName")
        .text()
        .trim();
    if (!name) return;
    var url = getHandlerUrl(name) + "/change?op=" + action;
    if (gEgo) url += "&ego=" + gEgo;

    $.ajax({
        type: "POST",
        url: formatEndpoint(url),
        success: function(data, textStatus, jqXHR) {
            showInfo("Handler was changed");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            showError("Cannot make changed to handler - " + errorThrown);
        }
    });
}

function getHandler($tr, action) {
    let name = $tr
        .find(".handlerName")
        .text()
        .trim();
    let url = getHandlerUrl(name);
    let params = gEgo ? "ego=" + gEgo : "";
    params += gCustomerId ? (params ? "&" : "") + "customerid=" + customerId : "";

    switch (action) {
        case "view":
            window.open(url + "?" + params, name);
            break;
        case "edit":
            window.open(url + "/edit?" + params, name);
            break;
        case "responses":
            window.open(formatEndpoint(url + "/responses", "ego=" + gEgo), "responses_" + name);
            break;
        case "history":
            // retrieve changelog xml and xslt
            url += "/changelogs";
            $.when($.get(formatEndpoint(url)), $.get("/html/changelogs.xslt")).then(
                function(data, styleSheet) {
                    var newDoc = xslTransform(data[0], styleSheet[0]);
                    var $div = $("<div/>"); //.appendTo($tr.closest(".ui-tabs-panel"));
                    $div.html(newDoc.body.innerHTML);
                    $div.dialog({
                        height: "300",
                        maxHeight: "500",
                        width: "auto",
                        collision: "fit",
                        title: "Change log for handler '" + name + "'",
                        position: {my: "top", at: "top", of: $tr},
                        buttons: {
                            Close: function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                    setupChangelogsPanel($div);
                },
                function(s) {
                    showError("An AJAX error occured: " + s.statusText);
                }
            );
            break;
    }
}

function deleteHandler($tr) {
    var name = $tr
        .find(".handlerName")
        .text()
        .trim();
    if (!name) return;

    showDialog("Are you sure you want to delete handler '" + name + "'?", "Confirm Delete", "highlight", {
        Cancel: function() {
            $(this).dialog("close");
        },
        "Yes, Delete!": function() {
            $(this).dialog("close");
            $.ajax({
                type: "DELETE",
                url: formatEndpoint(getHandlerUrl(name)),
                success: function(data, textStatus, jqXHR) {
                    switch (data.severity) {
                        case "information":
                            $tr.remove();
                            showInfo(data.message);
                            break;
                        case "error":
                            showError(data.message);
                            break;
                        case "warning":
                            showWarning(data.message);
                            break;
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    showError("Cannot delete handler - " + errorThrown);
                }
            });
        }
    });
}

function undeleteHandler($tr) {
    var name = $tr
        .find(".handlerName")
        .text()
        .trim();
    if (!name) return;
    $.ajax({
        type: "GET",
        url: formatEndpoint(getHandlerUrl(name) + "/undelete"),
        success: function(data, textStatus, jqXHR) {
            switch (data.severity) {
                case "information":
                    $tr.remove();
                    showInfo(data.message);
                    break;
                case "error":
                    showError(data.message);
                    break;
                case "warning":
                    showWarning(data.message);
                    break;
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            showError("Cannot un-delete handler - " + errorThrown);
        }
    });
}
function createHandler(handlerName, description, templateDB, templateName) {
    $.ajax({
        type: "POST",
        url: formatEndpoint(getHandlerCollectionUrl()),
        processData: false,
        data: JSON.stringify({
            name: handlerName,
            description: description,
            templateDB: templateDB,
            templateName: templateName,
            ego: gEgo
        }),
        contentType: "application/json; charset=utf-8",
        success: function(data, textStatus, jqXHR) {
            switch (data.severity) {
                case "information":
                    var $firstRow = $(".handlerRow:first");
                    $tr = $firstRow.clone().insertBefore($firstRow);
                    $tr.find(".handlerName").text(handlerName);
                    $tr.find(".handlerDescription").text(description);
                    $tr.find(".updateTime").text(new Date(data.serverTime).toLocaleString());
                    $tr.find(".updateUser").text(data.serverUser);
                    setupHandlersTable();
                    showInfo(data.message);
                    break;
                case "error":
                    showError(data.message);
                    break;
                case "warning":
                    showWarning(data.message);
                    break;
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            showError("Cannot create handler - " + errorThrown);
        }
    });
}

function setupChangelogsPanel($container) {
    var $table = $container ? $container.find(".changelogsTable") : $(".changelogsTable");

    // banded table
    $table.find("tbody>tr:even").addClass("ui-state-default");
    $table.find("tbody>tr").hover(
        function() {
            $(this)
                .addClass("ui-state-hover")
                .addClass("outlined");
        },
        function() {
            $(this)
                .removeClass("ui-state-hover")
                .removeClass("outlined");
        }
    );
    $table.accordionTable({
        accordionOpenImg: "ui-icon-minusthick",
        accordionClosedImg: "ui-icon-plusthick",
        accordionRow: "changelogDetails",
        urlForAccordionRow: function(e) {
            var id = $(e.target)
                .closest("tr")
                .attr("changelogid");
            return formatEndpoint(getPersonalityUrl() + "/changelogs/" + id + "/xml");
        },
        isRowLoaded: function($row) {
            return $row.find(".spinner").length > 0;
        },
        formatResponseToHtml: formatResponse
    });
    $.ajaxSetup({
        error: function(xhr, status, error) {
            showError("An AJAX error occured: " + status + "\nError: " + error + "\nError detail: " + xhr.responseText);
        }
    });
}

function formatResponse(data, $row) {
    var response = "";
    var isHandler = data.responseXML.documentElement.nodeName == "handler";
    var isVariable = data.responseXML.documentElement.nodeName == "variable";
    var isVariant = data.responseXML.documentElement.nodeName == "variant";

    if (isHandler || isVariable)
        $(data.responseXML)
            .find("vp3-changelog")
            .each(function() {
                var ego = $(this).attr("ego");
                if (gEgo == "all" || !ego || ego == gEgo || ego == "base") {
                    if (response) response += "<br/>";
                    response += ((gEgo == "all" || ego == "base") && ego ? "{" + ego + "} " : "") + this.textContent;
                }
            });
    if (isVariant)
        $(data.responseXML)
            .find("translation")
            .each(function() {
                var op = this.getAttribute("op");
                if (op === "keep") return;
                if (response) response += "<br/>";
                response +=
                    "rule #" +
                    this.getAttribute("rule-id") +
                    "->body #" +
                    this.getAttribute("body-id") +
                    "-> " +
                    (op === "overwrite" ? "Replace '" : "Add '") +
                    this.getAttribute("translation") +
                    "'";
            });

    if (!response) response = "No changes found";
    var $td = $row.find("td");
    $td.empty();
    if (isHandler) {
        $("<button/>")
            .appendTo($td)
            .button({
                icons: {primary: "ui-icon-document"},
                label: "View in handler editor"
            })
            .click(function(e) {
                var id = $row.prev().attr("changelogid");
                var url = getPersonalityUrl() + "/changelogs/" + id + "?ego=" + gEgo;
                window.open(url, "_blank");
            });
        $("<button/>")
            .appendTo($td)
            .button({
                icons: {primary: "ui-icon-shuffle"},
                label: "Update handler to this version"
            })
            .click(function(e) {
                var id = $row.prev().attr("changelogid");
                updateHandlerWithSnapshot(id);
            });
    }
    $td.append((isHandler ? "<br/>" : "") + "<div>" + response + "</div>");
}

function updateHandlerWithSnapshot(changelogId) {
    showDialog("\nAre you sure you want to replace the handler with this version?", "Replace handler", "highlight", {
        Cancel: function() {
            $(this).dialog("close");
        },
        "Replace handler with this version": function() {
            // first get the handler's xml from the server
            $(this).dialog("close");
            var inUrl = getPersonalityUrl() + "/changelogs/" + changelogId + "/xml";

            $.get(formatEndpoint(inUrl), function(data, status) {
                $(data.documentElement).attr("vp3-allow-warning-on-save", "true");
                var handlerName = $(data.documentElement).attr("name");
                var outUrl = getPersonalityUrl() + "/handlers/" + handlerName;
                $.ajax({
                    type: "PUT",
                    url: formatEndpoint(outUrl, "ego=" + gEgo),
                    processData: false,
                    data: data,
                    contentType: "xml",
                    success: function(data, textStatus, jqXHR) {
                        switch (data.severity) {
                            case "information":
                                showInfo(data.message);
                                break;
                            case "warning":
                                showWarning(data.message);
                                break;
                            case "error":
                                showError(data.message);
                                break;
                            case "warning":
                                showWarning(data.message);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        showError("Cannot save handler - " + textStatus + " " + errorThrown);
                    }
                });
            });
        }
    });
}