var popups = [];
function getSex(person) {
    if (!person)
        return null;
    if (person.sex === undefined || person.sex === null)
        return null;
    if (typeof (person.sex) === "string" || person.sex instanceof String)
        return person.sex;
    if (person.sex.sex)
        return person.sex.sex;
}

/**
 *
 * @param {HTMLElement} popup
 * @param {{"name": string, "additionalProperties":object[], hyperLinks: {"textContent":string, "href":string}[]} person
 */
function fullfillPopupByPerson(popup, person) {
    var title = document.createElement("h2");
    title.textContent = person.name;
    title.style.paddingLeft="3px";
    var lines = [];
    var sex = getSex(person);
    if (sex !== undefined && sex !== null) {
        var p = document.createElement("p");
        //p.style.marginBottom = "2px";
        //p.textContent = sex.toString();
        lines.push(p);
    }
    if (person.hyperLinks) {
        for (var i = 0; i < person.hyperLinks.length; i++) {
            var hl = person.hyperLinks[i];
            if (!hl || !hl.href)
                continue;
            var a = document.createElement("a");
            a.style.padding = "3px";
            a.style.whiteSpace = "nowrap";
            a.style.marginRight='10px'
            a.innerHTML = hl.textContent;
            a.href = "javascript:personQuery('"+hl.href+"')";
            var p = document.createElement("p");
            p.appendChild(a);
            lines.push(p);
        }
    }
    if (person.additionalProperties) {
        for (var k in person.additionalProperties) {
            var p = document.createElement("p");
            p.textContent = k + ": " + person.additionalProperties[p];
            lines.push(p);
        }
    }
    popup.appendChild(title);
    for (var i = 0; i < lines.length; i++) {
        popup.appendChild(lines[i]);
    }
    
}

/**
 *
 * @param {MouseEvent} e
 * @param {SVGElement} element
 */
function createPopup(element, jsonObj) {
    var popup = document.createElement("div");
    // popup.style.border = "solid";
    // popup.style.borderColor = "black";
    popup.style.padding = "10PX 20px";
    popup.style.paddingRight='0px'
    popup.style.boxSizing = "border-box";
    popup.style.boxShadow = "0 0 5px #888";
    popup.style.width = "300px";
    popup.style.height = "225px";
    popup.style.overflow = "auto";
    popup.style.position = "absolute";
    popup.style.display = "none";
    popup.style.backgroundColor = "white";
    popup.style.zIndex = 65535;
    fullfillPopupByPerson(popup, jsonObj.person);
    popup.addEventListener("mouseover", function (e) {
        this.isMouseIn = true;
    });
    popup.addEventListener("mouseout", function (e) {
        this.isMouseIn = false;
        window.setTimeout(function () {
            if (element.isMouseIn || (popup.isMouseIn && popup.style.display != "none"))
                return;
            popup.isMouseIn = false;
            popup.style.display = "none";
        }, 300);
    });
    return popup;
}

/**
 *
 * @param {SVGElement} element
 * @param {Object} jsonObject
 * @param {HTMLElement} parent
 */
function addPopupEvent(element, jsonObject, parent) {
    if (element === undefined || element === null)
        return;
    if (element.tagName.localeCompare("g") != 0) {
        return;
    }
    var popup = createPopup(element, jsonObject);
    parent.appendChild(popup);
    popups.push(popup);
    element.addEventListener("mouseover", function (e) {
        this.isMouseIn = true;
        if (popup.style.display !== "none") {
            return;
        }
        setTimeout(function () {
            for (var i = 0; i < popups.length; i++) {
                if (!popups[i] || !popups[i].style)
                    continue;
                popups[i].style.display = "none";
                popups[i].isMouseIn = false;
            }
            if (!e.offsetX && !e.offsetX) {
                popup.style.left = e.layerX + "px";
                popup.style.top = e.layerY + "px";
            } else {
                popup.style.left = e.offsetX + "px";
                popup.style.top = e.offsetY + "px";
            }


            popup.style.display = "block";
            this.isMouseIn = true;
        }, 200);
    });
    element.addEventListener("mouseout", function (e) {
        this.isMouseIn = false;
        window.setTimeout(function () {
            if (element.isMouseIn || (popup.isMouseIn && popup.style.display != "none"))
                return;
            popup.isMouseIn = false;
            popup.style.display = "none";
        }, 299);
    });
}

function convertJsonToElement(jsonObj, namespace, parentDiv) {
    if (jsonObj === undefined || jsonObj === null)
        return null;
    if (jsonObj.tag === undefined || jsonObj.tag === null)
        return null;
    if (namespace === undefined || namespace === null)
        namespace = jsonObj.attributes !== undefined && jsonObj.attributes !== null ? jsonObj.attributes.xmlns : null;
    if (namespace === undefined)
        namespace = null;
    var element = namespace ? document.createElementNS(namespace, jsonObj.tag) : document.createElement(jsonObj.tag);
    if (jsonObj && jsonObj.person) {
        addPopupEvent(element, jsonObj, parentDiv);
    }
    //var element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    if (jsonObj.attributes) {
        for (var key in jsonObj.attributes) {
            try {
                if (jsonObj.attributes[key] !== undefined && jsonObj.attributes[key] !== null)
                    element.setAttribute(key, jsonObj.attributes[key]);
            } catch (err) {

            }
        }
    }
    if (jsonObj.childNodes !== undefined && jsonObj.childNodes !== null && jsonObj.childNodes.length !== undefined && jsonObj.childNodes.length !== null) {
        for (var i = 0; i < jsonObj.childNodes.length; i++) {
            var obj = jsonObj.childNodes[i];
            if ((typeof obj) === "string" || obj instanceof String) {
                element.appendChild(document.createTextNode(obj.toString()));
            } else {
                var ele = convertJsonToElement(obj, namespace, parentDiv);
                if (ele) {
                    element.appendChild(ele);
                }
            }
        }
    }
     
    return element;
}

/**
 * 
 * @param {any} json
 * @param {HTMLElement} parent
 */
function fullfillSvg(json, parent) {
    var svgJson = JSON.parse(json.SvgElement);
    var svgElement = convertJsonToElement(svgJson, "http://www.w3.org/2000/svg",parent);
    parent.style.position = "absolute";
    if (parent.childNodes.length > 0)
        parent.insertBefore(svgElement, parent.childNodes[0]);
    else
        parent.appendChild(svgElement);

    var loginTag = document.getElementById("login_panel");
}