se/SE/static/procesEditor.js

//Request-URI Too Long
$(document).ready(function() {
    function cData(text) {
        var nowy = "<![CDATA[";
        nowy += text;
        nowy += "]]>"
        return nowy;
    }
    var changes = false;
    $("#main").after('<div class="col-xs-1 col-xs-offset-7" id="buttons"></div>');
    $("#buttons").after("<button type=button id=saveBtn class='btn btn-primary text-center' style=margin-left:5px;>Opublikuj zmiany</button>");
    $("#buttons").after("<button type=button id=clearBtn style=display:none; class='btn btn-danger text-center' >Cofnij zmiany</button>");
    //$("#buttons").after("<button type=button id=expBtn class='btn btn-warning text-center' style=margin-right:5px;>Import/Export</button>");
    var deletedId = new Array();
    var generatedId = new Array();
    var deletedRes = new Array();
    var usedImg = {};
    var dialog = 0;
    $("#SE-menu").hide();
    $("#SE-menu-sub").hide();
    var menuShow = false
    var zasobTree = new Array();

    var perms = [
        [1, "Kto wykonuje", "X"],
        [2, "Tylko do odczytu", "R"],
        [3, "Odczyt, zapis, wykonanie", "R,W,X"],
        [4, "Odczyt, zapis, wykonanie, tworzenie", "R,W,X,C"],
        [5, "Odczyt i wykonanie", "R,X"],
        [6, "Tylko do odczytu", "R"],
        [7, "MAPA PROCESU  - opis mapy procesu", ""],
        [9, "Tylko do tworzenia rekordu", "C"],
        [10, "Tylko tworzenie i czytanie rekordów bez edycji", "R,X,C"],
        [11, "Tylko edycja rekordu - ustalanie nowej wartosci", "W"],
        [12, "Tylko edycja i dodanie rekordu - ustalanie nowej wartosci", "W,C"],
        [13, "Nowy rekord i edycja z pominieciem A_ADM_COMPANY", "R,W,X,C,S"],
        [14, "Widok tylko swoich danych z rekordu", "W,O"],
        [15, "Edycja rekordów dla super admina", "R,W,C,S"],
        [16, "Widok i dodawanie rekordów tylko dla swojego ADM_COMPANY", "C,O"],
        [17, "Super widok wszystkich rekordow niezaleznie od uprawnien rekordu", "R,V"],
        [18, "Administracja Edycja i widok wszystkich rekordow z pominieciem A", "R,W,X,S,V"],
        [19, "Administracja Edycja Tworzenie i widok wszystkich rekordow z pom", "R,W,X,C,S,V"],
        [20, "Export", "R,X,E"],
        [21, "Widzenie tylko swoich rekordów", "O"]
    ];
    var gotoType = [
        ["GOTO", "Przejdź do procesu"],
        ["GOTO_AND_RETURN", "Przejdź do procesu i wróć"],
        ["FORK", "FORK"]
    ];
    var state = [];
    var loaded = true;
    var actSite = "none";

    var filtr = 0;
    var selectedArea = false;
    var sZasoby;
    var sProcesy;
    var lastSearch = "";
    var newSteps;
    var newRes = 0;

    showPreview();

    var XML_NAMESPACE = "default_db__x3A__";

    $(document).on('click', '#toggleMenu', function(e) {
        e.preventDefault();
        if (!menuShow) {
            $("#SE-menu").show();
            $("#SE-menu-sub").show();
            menuShow = true;
        } else {
            menuShow = false;
            $("#SE-menu").hide();
            $("#SE-menu-sub").hide();
        }
    });

    function showPath(parent, target, hideEdit, renderTree) {
		var target =  target || $(".path")
		var hideEdit = hideEdit || false
		var showEdit = ! hideEdit
		var renderTree = renderTree || false

        var link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getPathAjax&id=" + parent;
        $.get(link, function(data) {

            var result = "";
            result += '<ol class="breadcrumb">';

            $.each(data, function(i, e) {
                result += '<li class="breadcrumb-item">' + e["DESC"] + " {" + e["ID"] + "}" + '</li>'


            })
            result += '<li '+(state[0]["parent_id"] <= 0 ? "style=color:red;" : "")+' class="breadcrumb-item">' + state[0]["desc"] + " {" + (state[0]["id"] < 0 ? "?" : state[0]["id"]) + "}"
            if (showEdit)
                result += '<i class="glyphicon glyphicon-edit ico editPath"></i>'

            result += '</li>'
            result += '</ol>';
            $(target).html(result);
            if (renderTree)
                renderProcesTree(data);

        });



    }

    function loadResources() {
        showPath(state[0]["parent_id"]);
        $("#main").html("<center>Pobieranie danych o zasobach.</center>");
        var sFiltr = "";
        sFiltr += `
          <GetFeature xmlns="http://www.opengis.net/wfs/2.0"
          xmlns:p5_default_db="` + BASE_WFS_URL + `/default_db"
          xmlns:ogc="http://www.opengis.net/ogc"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          service="WFS"
          version="2.0.2"
          xsi:schemaLocation="http://www.opengis.net/wfs/2.0 http://schemas.opengis.net/wfs/2.0/wfs.xsd">`;
        sFiltr += '  <ogc:Filter>';
        sFiltr += '    <ogc:And>';
        sFiltr += '      <ogc:Or>';
        $.each(state, function(idx, procesItem) {
            sFiltr += '        <ogc:PropertyIsEqualTo><ogc:PropertyName>ID_PROCES</ogc:PropertyName><ogc:Literal>' + procesItem["id"] + '</ogc:Literal></ogc:PropertyIsEqualTo>';
        });
        sFiltr += '      </ogc:Or>';
        sFiltr += '      <ogc:Not>';
        sFiltr += '        <ogc:PropertyIsEqualTo><ogc:PropertyName>A_STATUS</ogc:PropertyName><ogc:Literal>DELETED</ogc:Literal></ogc:PropertyIsEqualTo>';
        sFiltr += '      </ogc:Not>';
        sFiltr += '    </ogc:And>';
        sFiltr += '  </ogc:Filter>';
        sFiltr += '</GetFeature>';

        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003';
        link += '&REQUEST=GetFeature';
        link += '&TYPENAME=p5_default_db:CRM_WSKAZNIK';
        link += '&sortBy=SORT_PRIO+A,ID';

        var wskazniki = new Array();
        $.ajax({
            url: link,
            data: sFiltr,
            type: 'POST',
            contentType: "text/xml",
            dataType: "xml",
            success: function(data) {
                $.each($(data).find("featureMember"), function() {
                    if ($(this).find("ID").text() == 0) return;
                    var wsk = new Array();
                    wsk["ID"] = $(this).find("ID").text();
                    wsk["ID_ZASOB"] = $(this).find("ID_ZASOB").text();
                    wsk["ID_PROCES"] = $(this).find("ID_PROCES").text();
                    wsk["SORT_PRIO"] = $(this).find("SORT_PRIO").text();
                    wsk["ID_PRZYPADEK"] = $(this).find("ID_PRZYPADEK").text();
                    wsk["OPIS_ZASOB"] = $(this).find("OPIS_ZASOB").text();
                    wskazniki.push(wsk);
                });
                var idsZasobyToFetch = [];
                $.each(wskazniki, function(index, wsk) {
                    idsZasobyToFetch.push(wsk["ID_ZASOB"]);
                });
                if (idsZasobyToFetch.length > 0) {
                    var zasobInfo = new Array();
                    $.ajax({
                            type: 'POST',
                            url: BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getSingleResAjax",
                            data: {
                                data: idsZasobyToFetch
                            },
                            dataType: 'json'
                        })
                        .done(function(jsonZasobyTree) {
                            $.each(jsonZasobyTree, function(idx, zasob) {

                                zasobInfo[zasob["ID"]] = new Array();
                                zasobInfo[zasob["ID"]]["DESC"] = zasob["DESC"];
                                zasobInfo[zasob["ID"]]["OPIS"] = zasob["OPIS"];
                                zasobInfo[zasob["ID"]]["TYPE"] = zasob["TYPE"];
                                zasobInfo[zasob["ID"]]["TREE"] = [];
                                for (var i = 3; i > 0; i--) {
                                    if (zasob["p" + i + "_ID"] != null) {
                                        var temp = {};
                                        temp["ID"] = zasob["p" + i + "_ID"];
                                        temp["DESC"] = zasob["p" + i + "_DESC"];
                                        zasobInfo[zasob["ID"]]["TREE"].push(temp);
                                    }
                                }
                            });

                            $.each(wskazniki, function(index, wsk) {
                                var type,
                                    idZasob = wsk["ID_ZASOB"];
                                if (!zasobInfo[idZasob]) {
                                    $("#main").html("<center>Generowanie widoku.</center>");
                                    render(state, $("#main"));
                                    return;
                                }
                                if (zasobInfo[idZasob]["TYPE"] == "DZIAL" || zasobInfo[idZasob]["TYPE"] == "STANOWISKO" || zasobInfo[idZasob]["TYPE"] == "PODMIOT") {
                                    type = "prof";
                                } else {
                                    type = "res";
                                }
                                var id = wsk["ID_PROCES"];
                                var temp = {};
                                temp["id_zasob"] = idZasob
                                temp["id"] = wsk["ID"];
                                temp["id_przypadek"] = wsk["ID_PRZYPADEK"];
                                temp["komentarz"] = wsk["OPIS_ZASOB"];
                                temp["desc"] = zasobInfo[idZasob]["DESC"];
                                temp["opis"] = zasobInfo[idZasob]["OPIS"];
                                temp["tree"] = zasobInfo[idZasob]["TREE"];
                                //console.log(getIndexById(id));
                                var newId = state[getIndexById(id)][type].push(temp) - 1;

								state[getIndexById(id)][type][newId]["img"] = temp;
                                // var linkImg = BASE_URL +
                                //     'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_IMAGE&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:And><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_ID</ogc:PropertyName><ogc:Literal>' + wsk["ID"] +
                                //     '</ogc:Literal></ogc:PropertyIsEqualTo><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_TABLE</ogc:PropertyName><ogc:Literal>CRM_WSKAZNIK</ogc:Literal></ogc:PropertyIsEqualTo></ogc:And></ogc:Filter>';
                                // $.get(linkImg, function(imgData) {
                                //     var temp = Array();
                                //     $.each($(imgData).find("featureMember"), function() {
                                //         temp.push({
                                //             "src": base64_decode($(this).find("IMAGE").text()),
                                //             "title": $(this).find("NAME").text(),
                                //             "id": $(this).find("ID").text(),
                                //         });
                                //     })
                                //     state[getIndexById(id)][type][newId]["img"] = temp;
                                //     $("#main").html("<center>Generowanie widoku.</center>");
                                //     render(state, $("#main"));
                                // });
                            });
							render(state, $("#main"));
                        })
                        .fail(function(xhr) {
                            if (xhr.responseJSON && xhr.responseJSON.msg && xhr.responseJSON.type) jQuery.notify(xhr.responseJSON.msg, xhr.responseJSON.type);
                            else jQuery.notify("Wystąpił nieznany błąd", 'error');
                        });
                } else {
                    $("#main").html("<center>Generowanie widoku.</center>");
                    render(state, $("#main"));
                }
            }
        });
    }

    $(document).ajaxStop(function() {
        if (loaded)
            return;
        loaded = true;
        //$(".drop").find("dl").hide();
        loadResources();
    });
    $(document).on('click', '#clearBtn', function() {
        swal({
            title: 'Cofnij zmiany',
            text: "Czy chcesz cofnąć wszystkie niezapisane zmiany?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Cofnij zmiany'
        }).then(function() {
            localStorage.removeItem("state" + mainProces_id);
            $.notify("Niezapisane zmiany zostały wycofane.", "success");
            showPreview();
            //Parent_id = -1,
        }).catch(function(e) {})
    });
    //Saveaction
    var makeCRCTable = function() {
        var c;
        var crcTable = [];
        for (var n = 0; n < 256; n++) {
            c = n;
            for (var k = 0; k < 8; k++) {
                c = ((c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1));
            }
            crcTable[n] = c;
        }
        return crcTable;
    }

    var crc32 = function(str) {
        var crcTable = window.crcTable || (window.crcTable = makeCRCTable());
        var crc = 0 ^ (-1);
        for (var i = 0; i < str.length; i++) {
            crc = (crc >>> 8) ^ crcTable[(crc ^ str.charCodeAt(i)) & 0xFF];
        }
        return (crc ^ (-1)) >>> 0;
    };

    function saveAs(uri, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
            link.href = uri;
            link.download = filename;

            document.body.appendChild(link);

            link.click();

            document.body.removeChild(link);
        } else {
            window.open(uri);
        }
    }

    //Source: https://gist.github.com/sente/1083506
    //License: The MIT License (MIT)
    function formatXml(xml) {
        var formatted = '';
        var reg = /(>)(<)(\/*)/g;
        xml = xml.replace(reg, '$1\r\n$2$3');
        var pad = 0;
        jQuery.each(xml.split('\r\n'), function(index, node) {
            var indent = 0;
            if (node.match(/.+<\/\w[^>]*>$/)) {
                indent = 0;
            } else if (node.match(/^<\/\w/)) {
                if (pad != 0) {
                    pad -= 1;
                }
            } else if (node.match(/^<\w([^>]*[^\/])?>.*$/)) {
                indent = 1;
            } else {
                indent = 0;
            }

            var padding = '';
            for (var i = 0; i < pad; i++) {
                padding += '  ';
            }

            formatted += padding + node + '\r\n';
            pad += indent;
        });

        return formatted;
    }

    function createOpenTag(table, field) {
        var result = "";
        result += "<";

        result += XML_NAMESPACE + table + ":" + field;
        result += ">\n"

        return result;

    }


    function createCloseTag(table, field) {
        var result = "";
        result += "</";
        result += XML_NAMESPACE + table + ":" + field;
        result += ">\n"

        return result;

    }

    function createTag(table, field, content) {
        var result = "";
        if (content !== false && content !== true) {
            result += createOpenTag(table, field);
            result += content + "\n";
            result += createCloseTag(table, field);
            return result;
        }

        result += "<";
        if (content === false) result += "/";

        result += XML_NAMESPACE + table + ":" + field;
        result += ">\n"

        return result;

    }

    function createXmlWskaznik(index) {
        var arr = state[index];
        var xml = ""
        $.each(arr["res"].concat(arr["prof"]), function(i, e) {
            if (e["parent_id"] != arr["id"])
                return true;
            xml += createOpenTag("CRM_WSKAZNIK", "CRM_WSKAZNIK");
            xml += createTag("CRM_WSKAZNIK", "ID", e["id"])
            xml += createTag("CRM_WSKAZNIK", "OPIS_ZASOB", e["komentarz"])
            xml += createTag("CRM_WSKAZNIK", "ID_PRZYPADEK", e["komentarz"])
            xml += createOpenTag("CRM_LISTA_ZASOBOW", "CRM_LISTA_ZASOBOW");
            xml += createTag("CRM_LISTA_ZASOBOW", "ID_PRZYPADEK", e["id_przypadek"])
            xml += createCloseTag("CRM_LISTA_ZASOBOW", "CRM_LISTA_ZASOBOW");
            xml += createTag("CRM_WSKAZNIK", "ID", e["id"])
            xml += createCloseTag("CRM_WSKAZNIK", "CRM_WSKAZNIK");
        })
        return xml;
    }

    function createXmlProces(index) {
        var arr = state[index];
        var xml = ""
        xml += createTag("CRM_PROCES", "ID", arr["id"]);
        xml += createTag("CRM_PROCES", "DESC", arr["desc"]);
        xml += createTag("CRM_PROCES", "OPIS", arr["opis"]);
        xml += createTag("CRM_PROCES", "IF_TRUE_GOTO", arr["goto"]["id"]);
        xml += createTag("CRM_PROCES", "IF_TRUE_GOTO_FLAG", arr["goto"]["flag"]);

        xml += createTag("CRM_PROCES", "_CHANGED_DESC", (arr["C-desc"] ? "true" : "false"));
        xml += createTag("CRM_PROCES", "_CHANGES_OPIS", (arr["C-opis"] ? "true" : "false"));
        xml += createXmlWskaznik(index)
        $.each(state, function(i, e) {
            if (e["parent_id"] != arr["id"])
                return true;
            xml += createOpenTag("CRM_PROCES", "PROCES");
            xml += createXmlProces(i);
            xml += createCloseTag("CRM_PROCES", "PROCES");
        })
        return xml;
    }


    function saveToXml() {
        var xml = '<?xml version="1.0" encoding="utf-8"?>\n';

        /*
		xml + = 'schema namespace (default): default_db__x3A__CRM_PROCES = "default_db/CRM_PROCES"\n'
	        +   'schema namespace: default_db__x3A__CRM_WSKAZNIK = "default_db/CRM_WSKAZNIK"\n'
	    	+   'schema namespace: default_db__x3A__CRM_IMAGE = "default_db/CRM_IMAGE"\n'
	    */
        var proces_init = state[0];

        xml += createOpenTag("CRM_PROCES", "PROCES_INIT"); {
            xml += createXmlProces(0);
        }
        xml += createCloseTag("CRM_PROCES", "PROCES_INIT");
        console.log(formatXml(xml));
        saveAs('data:Application/octet-stream,' + encodeURIComponent(formatXml(xml)), 'export.xml')
    }

    function treeRecursive(data, id, parent, path) {


        if (id != 0) {
            var node = {
                'id': id,
                type: "proces"
            };

            if (getIndexById(id, path, "ID") == -1)
                node["text"] = "<input type=checkbox class='checkParent' style=margin-right:5px; data-id='"+id+"' /> {" + id + "} " + data[id]["DESC"]
            else {
                node["text"] = "<input type=checkbox style=margin-right:5px;/><span style=color:#3498db;>{" + id + "} " + data[id]["DESC"] + "</span>"
                node["state"] = {}
                node["state"]["opened"] = true;
                if (path[path.length - 1]["ID"] == id) {
                  node["text"] = "<input type=checkbox style=margin-right:5px; checked /><span style=color:#3498db;>{" + id + "} " + data[id]["DESC"] + "</span>"
                    node["state"]["selected"] = true;
                    node["state"]["opened"] = false;
                }
            }

            $("#pathList").jstree('create_node', parent, node, 'first', function() {
                $.each(data[id]["childs"], function(i, e) {
                    treeRecursive(data, e["ID"], id, path);
                })
            });
        } else
            $.each(data[id]["childs"], function(i, e) {
                treeRecursive(data, e["ID"], "#", path);
            })

    }

    function customMenu(node) {
		var id = node.id
		//var target = $('#pathList').closest(".p5BModalContent");
        items = {
            "Move_parent": {
                "separator_before": false,
                "separator_after": false,
                "label": "Przepnij proces jako dziecko",
                "action": function(obj) {
					state[0]["parent_id"] = id;
					//pathModal(target);
					showPath(state[0]["parent_id"]);
                }
            },
        }
        return items;

    }

    $(document).on('click', ".checkParent", function(){
      state[0]["parent_id"] = $(this).data("id");
      var target = $(this).closest(".p5bModalModal")
      //pathModal(target);
      //showPath(state[0]["parent_id"]);
      showPath(state[0]["parent_id"], ".pathPreview", true, true);


    })

    function renderProcesTree(path) {
        var result = "";
        var link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getProcesListAjax";
        $.get(link, function(data) {
			$('#pathList').jstree("destroy").empty();
            //console.log(translate(0, data))
            $('#pathList').jstree(

                {
                    'core': {
                        "check_callback": true,
                        "themes": {
                            "stripes": false,
                            "dots": false
                        },
                    },
                    "types": {
                        "default": {
                            "icon": "hide",
                        },
                        "proces": {
                            "icon": "hide",
                        },
                    },
                    "plugins": [
                        "contextmenu", "search",
                        "types"
                    ],
					"contextmenu": {
						"items": customMenu
					}

                });

            treeRecursive(data, 0, "#", path)
        })

    }

    function pathModal(target) {
        $(target).html("<div style=display:none; class=pathPreview></div>Zaznacz proces nadrzędny: <div id=pathList>"
        + "</div>"
        + "<button type='button' class='btn btn-primary p5BModalButton' id='savePath'>Zachowaj</button>"
        + "<button type='button' class='btn btn-default p5BModalButton' id='previousPath'>Anuluj</button>"
        + "");
        $("#pathList").data("previous", state[0]["parent_id"])
        showPath(state[0]["parent_id"], ".pathPreview", true, true);

    }

    /* START p5BModal */

    function p5BModalDisplay(title, initFunction) {
        var back = "<div id='p5BModalBack' style=display:none;></div>"

        var modal = "<div class='p5BModalHeader'>" +
            "<span>" + title + "</span>" +
            "<div class='p5BModalDelete'>X</div>" +
            "</div>" +
            "<div class=p5BModalContent></div>"

        if ($("#p5BModalBack").length <= 0) {
            $("body").prepend(back);
            $("#p5BModalBack").fadeIn('fast');
            $('html, body').css({
                overflow: 'hidden',
                height: '100%'
            });
        }
        var p5BModal = $("<div>", {
            "class": "p5BModalModal"
        });
        $("#p5BModalBack").append(p5BModal);
        $(p5BModal).html(modal);



        $(p5BModal).draggable({
            containment: "body",
            handle: ".p5BModalHeader"
        });
        initFunction($(p5BModal).find(".p5BModalContent"))

    }



    $(document).on('click', '.editPath', function() {
        p5BModalDisplay("Przepinanie procesu", pathModal);
    });

    function hideModal(which) {
        $(which).remove();
        if ($(".p5BModalModal").length == 0) {
            $("#p5BModalBack").fadeOut('fast', function() {
                $("#p5BModalBack").remove();
            });
            $('html, body').css({
                overflow: 'auto',
                height: '100%'
            });
        }

    }

    $(document).on('click', '.p5BModalDelete, #previousPath,#p5BModalBack', function() {
        if($(this).closest(".p5BModalModal").find("#pathList").length > 0){

            state[0]["parent_id"] = $(this).closest(".p5BModalModal").find("#pathList").data("previous")
        }
        showPath(state[0]["parent_id"]);
        hideModal($(this).closest(".p5BModalModal"));

        return false;
    })

    $(document).on('click', '#savePath', function() {
        showPath(state[0]["parent_id"]);
        hideModal($(this).closest(".p5BModalModal"));

        return false;
    })



    $(document).on('click', '.p5BModalModal', function() {
        return false;
    })

    $(document).on('mousedown', '.p5BModalModal', function() {
        $(".p5BModalModal").css("z-index", 2001)
        $(this).css("z-index", 2002)

    })

    /* END p5BModal */

    $(document).on('click', '#expBtn', function() {
        var exp = {};
        exp["id"] = mainProces_id;
        exp["time"] = moment().format("YYYY-MM-DD HH:mm:ss");

        var temp = {};
        temp["state"] = state;
        temp["newSteps"] = newSteps;
        temp["newRes"] = newRes;
        temp["deletedId"] = deletedId;
        temp["deletedRes"] = deletedRes;
        exp["data"] = temp;
        var crc = {};
        crc["crc"] = crc32(JSON.stringify(exp));
        crc["content"] = exp;
        swal({
            title: 'Import/Export',
            text: 'Wybierz czynność:',
            type: 'warning',
            cancelButtonText: 'Import',
            confirmButtonText: 'Export',
            cancelButtonColor: '#d33',
            confirmButtonColor: '#3085d6',
            showCancelButton: true,
        }).then(function() {
            saveToXml();
        }, function(dismiss) {
            if (dismiss === 'cancel') {
                swal({
                    title: 'Import',
                    text: 'Wklej dane do zaimportowania:',
                    inputPlaceholder: "Wklej tutaj dane, które otrzymałeś w trakcie eksportu.",
                    input: 'textarea',
                }).then(function(imp) {
                    var parsed = JSON.parse(imp);
                    if (crc32(JSON.stringify(parsed["content"])) === parsed["crc"]) {
                        parsed = parsed["content"];
                        if (parsed["id"] === mainProces_id) {
                            $.notify("Dane z " + parsed["time"] + " zaimportowane pozytywnie.", "success");
                            parsed = parsed["data"];
                            state = parsed["state"];
                            newRes = parsed["newRes"];
                            deletedId = parsed["deletedId"];
                            deletedRes = parsed["deletedRes"];
                            updateAll();
                        } else {
                            $.notify("Zły proces. Dane do eksportu dotyczą procesu " + parsed["id"] + ".", "error");
                        }
                    } else {
                        $.notify("Suma kontrolna jest nieprawidłowa. Dane uległy uszkodzeniu.", "error");
                    }
                })
            }
        })
    })

	function saveProces(){
		$("#saveBtn").prop('disabled', true);
        $.notify("Rozpoczęto zapisywanie. Nie zamykaj tego okna", "info");
        var genReq = `
  <Transaction
    xmlns="http://www.opengis.net/wfs"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    version="1.0.0"
    service="WFS"
    xmlns:p5_default_db="` + BASE_WFS_URL + `/default_db"
    xmlns:gml="http://www.opengis.net/gml">
    `;
        // xsi:schemaLocation="` + BASE_WFS_URL + `/default_db/CRM_PROCES ` + BASE_URL + `dev-pl/se-feature-api/wfs.php/xml/wfs/default_db/CRM_PROCES/?SERVICE=WFS&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=p5_default_db:CRM_PROCES&amp;SRSNAME=EPSG:4326&amp;"

        $.each(state, function(i, e) {
            if (e['id'] < 0) {
                genReq += `
            <Insert xmlns="http://www.opengis.net/wfs">
            <CRM_PROCES xmlns="` + BASE_WFS_URL + `/default_db">
            <PARENT_ID xmlns="` + BASE_WFS_URL + `/default_db">-1</PARENT_ID>
            </CRM_PROCES>
            </Insert>`;
            }
        });
        genReq += '</Transaction>';
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003&';
        $.ajax({
            url: link,
            data: genReq,
            type: 'POST',
            contentType: "text/xml",
            dataType: "text",
            success: function(data) {
                $(data).find("[fid]").each(function(i, e) {
                    var newId = $(e).attr("fid").substr($(e).attr("fid").indexOf('.') + 1);
                    generatedId.push(newId);
                });
                var i = 0;
                var newIdTab = Array();
                $.each(state, function(z, e) {
                    if (e["id"] < 0) {
                        newIdTab[e["id"]] = generatedId[i];
                        i++;
                    }
                });

                var request = `
            <Transaction
            xmlns="http://www.opengis.net/wfs"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            version="1.0.0"
            service="WFS"
            xmlns:p5_default_db="` + BASE_WFS_URL + `/default_db"
            xmlns:gml="http://www.opengis.net/gml">
            `;
                $.each(state, function(i, e) {
                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_PROCES xmlns="` + BASE_WFS_URL + `/default_db">
    `;
                    if (e["id"] >= 0)
                        request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + e["id"] + '</ID>';
                    else
                        request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + newIdTab[e["id"]] + '</ID>';
					if (i == 0)
                        request += '<TYPE xmlns="' + BASE_WFS_URL + '/default_db">PROCES_INIT</TYPE>';
                    else
                        request += '<TYPE xmlns="' + BASE_WFS_URL + '/default_db">PROCES</TYPE>';
                    if (e["parent_id"] >= 0)
                            request += '<PARENT_ID xmlns="' + BASE_WFS_URL + '/default_db">' + e["parent_id"] + '</PARENT_ID>';
                        else
                            request += '<PARENT_ID xmlns="' + BASE_WFS_URL + '/default_db">' + newIdTab[e["parent_id"]] + '</PARENT_ID>';
                        request += '<SORT_PRIO xmlns="' + BASE_WFS_URL + '/default_db">' + e["SORT_PRIO"] + '</SORT_PRIO>';

                    if (typeof e["goto"] !== typeof undefined && e["goto"]["id"] !== null && e["goto"]["id"] !== 0 && e["goto"]["id"] !== "") {
                        request += '<IF_TRUE_GOTO xmlns="' + BASE_WFS_URL + '/default_db">' + e["goto"]["id"] + '</IF_TRUE_GOTO>';
                        request += '<IF_TRUE_GOTO_FLAG xmlns="' + BASE_WFS_URL + '/default_db">' + e["goto"]["flag"] + '</IF_TRUE_GOTO_FLAG>';
                    } else {
                        request += '<IF_TRUE_GOTO xmlns="' + BASE_WFS_URL + '/default_db">0</IF_TRUE_GOTO>';
                        request += '<IF_TRUE_GOTO_FLAG xmlns="' + BASE_WFS_URL + '/default_db"></IF_TRUE_GOTO_FLAG>';
                    }
                    request += '<DESC xmlns="' + BASE_WFS_URL + '/default_db">' + cData(e["desc"]) + '</DESC>';
                    request += '<OPIS xmlns="' + BASE_WFS_URL + '/default_db">' + cData(e["opis"]) + '</OPIS>';
                    request += `
    </CRM_PROCES>
  </Insert>
    `;
                    var id;
                    if (e["id"] >= 0)
                        id = e["id"];
                    else
                        id = newIdTab[e["id"]];
                    var sort_prio = 0;
                    $.each(e["prof"].concat(e["res"]), function(iR, eR) {
                        sort_prio++;
                        request += `
  <Insert xmlns="http://www.opengis.net/wfs">
    <CRM_WSKAZNIK xmlns="` + BASE_WFS_URL + `/default_db">
  `;
                        if (eR["id"] >= 0) {
                            request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + eR["id"] + '</ID>';
                        }
                        request += '<ID_ZASOB xmlns="' + BASE_WFS_URL + '/default_db">' + eR["id_zasob"] + '</ID_ZASOB>';
                        request += '<ID_PROCES xmlns="' + BASE_WFS_URL + '/default_db">' + id + '</ID_PROCES>';
                        request += '<ID_PRZYPADEK xmlns="' + BASE_WFS_URL + '/default_db">' + eR["id_przypadek"] + '</ID_PRZYPADEK>';

                        var opis = eR["komentarz"];
                        opis = opis.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
                        request += '<SORT_PRIO xmlns="' + BASE_WFS_URL + '/default_db">' + sort_prio + '</SORT_PRIO>';
                        request += '<OPIS_ZASOB xmlns="' + BASE_WFS_URL + '/default_db">' + cData(opis) + '</OPIS_ZASOB>';
                        request += `
</CRM_WSKAZNIK>
</Insert>
`;
                    });
                });
                $.each(deletedId, function(key, value) {

                    if (value < 0)
                        return true;

                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_PROCES xmlns="` + BASE_WFS_URL + `/default_db">
    `;
                    request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + value + '</ID>';
                    request += '<PARENT_ID xmlns="' + BASE_WFS_URL + '/default_db">-1</PARENT_ID>';
                    request += '<A_STATUS xmlns="' + BASE_WFS_URL + '/default_db">DELETED</A_STATUS>';
                    request += `
    </CRM_PROCES>
  </Insert>
    `;
                });
                $.each(deletedRes, function(key, value) {
                    if (value < 0)
                        return true;
                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_WSKAZNIK xmlns="` + BASE_WFS_URL + `/default_db">
    `;
                    request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + value + '</ID>';
                    request += '<A_STATUS xmlns="' + BASE_WFS_URL + '/default_db">DELETED</A_STATUS>';
                    request += `
    </CRM_WSKAZNIK>
  </Insert>
    `;
                });

                $.each(usedImg, function(key, value) {
                    if (key < 0)
                        return true;
                    request +=
                        `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_IMAGE xmlns="` +
                        BASE_WFS_URL + `/default_db">
    `;

                    request += '<ID xmlns="' + BASE_WFS_URL + '/default_db">' + key + '</ID>';
                    request += '<REMOTE_TABLE xmlns="' + BASE_WFS_URL + '/default_db">' + value["type"] + '</REMOTE_TABLE>';
                    request += '<REMOTE_ID xmlns="' + BASE_WFS_URL + '/default_db">' + value["targetID"] + '</REMOTE_ID>';
                    request += `
    </CRM_IMAGE>
  </Insert>
    `;
                });

                request += '</Transaction>';
                $.ajax({
                    url: link,
                    data: request,
                    type: 'POST',
                    contentType: "text/xml",
                    dataType: "text",
                    success: function(data) {
                        if ($(data).children("serviceException").text() == "") {
                            if (mainProces_id == -1)
                                window.location.replace("index.php?_route=UrlAction_procesEditor&id=" + newIdTab[state[0]["id"]])
                            deletedRes = [];
                            deletedId = [];
                            usedImg = {};
                            localStorage.removeItem("state" + mainProces_id);
                            showPreview();
                            $.notify("Zmiany zostały zapisane na serwerze.", "success");
                        } else {
                            $.notify("Błąd API. Zmiany zostały zapisane wyłącznie w pamięci Twojej przeglądarki. Skontaktuj się z administratorem.", "error");
                            localStorage.setItem("state" + mainProces_id, JSON.stringify(state));
                            localStorage.setItem("newStep" + mainProces_id, newSteps);
                            localStorage.setItem("newRes" + mainProces_id, newRes);
                            localStorage.setItem("deletedId" + mainProces_id, JSON.stringify(deletedId));
                            localStorage.setItem("usedImg" + mainProces_id, JSON.stringify(usedImg));
                            localStorage.setItem("deletedRes" + mainProces_id, JSON.stringify(deletedRes));
                            localStorage.setItem("date" + mainProces_id, moment().format("YYYY-MM-DD HH:mm:ss"));
                        }
                        $("#saveBtn").prop('disabled', false);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        $.notify("Brak połączenia z bazą danych", "error");
                    }
                });
            },
            error: function(xhr, ajaxOptions, thrownError) {
                $.notify("Brak połączenia z bazą danych", "error");
            }
        });

	}

    $(document).on('click', '#saveBtn', function() {
		if(state[0]["parent_id"] <= 0)
			swal({
				title: 'Brak procesu nadrzędnego',
				text: "proces_init nie został przypięty do żadnego nadrzędnego procesu.",
				type: 'error',
				showCancelButton: true,
				cancelButtonColor: '#3085d6',
				confirmButtonColor: '#d33',
				cancelButtonText: "Edytuj ścieżkę <i style=color:#00cc00;font-weight:bold;>[ZALECANE]</span>",
				confirmButtonText: 'Kontynuuj'
			}).then(function() {
				saveProces();
			}, function (dismiss) {
				p5BModalDisplay("Przepinanie procesu", pathModal);

			}

			).catch(function(e) {})
		else
			saveProces();


    });

    $(document).on('click', '.btnEdit', function() {
        var parentIndex = getIndexById($(this).parents(".drop").data("id"));
        var type;
        if ($(this).parents("li").closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";
        var zasobIndex = getResById(parentIndex, $(this).parents("li").data("id"), type);
        var permsOpt = "";
        $.each(perms, function(key, value) {
            if (state[parentIndex][type][zasobIndex]["id_przypadek"] == value[0])
                permsOpt = permsOpt + "<option value=" + value[0] + " selected=selected>[" + value[2] + "] " + value[1] + "</option>";
            else
                permsOpt = permsOpt + "<option value=" + value[0] + ">[" + value[2] + "] " + value[1] + "</option>";
        });
        swal({
            showCancelButton: true,
            title: 'Uprawnienia',
            html: 'Uprawnienia<br><select class=form-control id="swal-input1">' + permsOpt + '</select>' +
                'Komentarz<br><input class=form-control id="swal-input2" class="swal2-input" value="' + state[parentIndex][type][zasobIndex]["komentarz"] + '">',
            preConfirm: function() {
                return new Promise(function(resolve) {
                    resolve([
                        $('#swal-input1').val(),
                        $('#swal-input2').val()
                    ]);
                });
            }
        }).then(function(result) {
            state[parentIndex][type][zasobIndex]["id_przypadek"] = result[0];
            state[parentIndex][type][zasobIndex]["komentarz"] = result[1];
            state[parentIndex][type][zasobIndex]["changed"] = true;
            updateAll();
        }).catch(function(e) {})
    });

    //Buttony i ich zadania
    $(document).on('click', '.step', function() {
        newSteps--;
        var main = false;
        var temp = {};
        if ($(this).parents(".drop").data("id") === mainProces_id)
            main = true;
        $(this).parents(".drop").after("<div class='drop container-fluid' id='proc" + newSteps + "'></div>");
        temp["id"] = newSteps;
        temp["desc"] = "";
        temp["opis"] = "";
        var index = getIndexById($(this).parents(".drop").data("id"));
        temp["step"] = 0;
        temp["prof"] = new Array();
        temp["res"] = new Array();
        temp["C-desc"] = true;
        temp["C-opis"] = true;
        temp["goto"] = {}
        temp["goto"]["flag"] = "";
        temp["goto"]["id"] = 0;
        temp["stepDesc"] = "";
        if (!main) {
            temp["parent_id"] = state[index]["parent_id"];
            temp["depth"] = state[index]["depth"];
        } else {
            temp["parent_id"] = mainProces_id;
            temp["depth"] = 1;
        }
        state.splice(index + 1, 0, temp);
        stepsGenerator();
        updateAll();
    });

    $(document).on('keyup', '#sProcesy', function() {
        if ($(this).val() != lastSearch) {
            lastSearch = $(this).val();
            clearTimeout(sProcesy);
            sProcesy = setTimeout(function() {
                if (lastSearch == "")
                    procesy();
                else
                    searchProc();
            }, 300);
        }
    });
    $(document).on('keyup', '#sZasoby', function() {
        if ($(this).val() != lastSearch) {
            lastSearch = $(this).val();
            clearTimeout(sZasoby);
            sZasoby = setTimeout(function() {
                if (filtr === 0 && lastSearch == "")
                    zasoby();
                else
                    searchRes();
            }, 300);
        }
    });

    function arraymove(arr, fromIndex, toIndex) {
        var element = [];
        var element = arr[fromIndex];
        arr.splice(fromIndex, 1);
        arr.splice(toIndex, 0, element);
    }

    $(document).on('click', '.uArrowRes', function() {
        var parent = getIndexById(($(this).parents(".drop").data("id")));
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";
        var id = getResById(parent, $(this).closest("li").data("id"), type);
        arraymove(state[parent][type], id, id - 1);
        updateAll();
    });

    $(document).on('click', '.dArrowRes', function() {
        var parent = getIndexById(($(this).parents(".drop").data("id")));
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";
        var id = getResById(parent, $(this).closest("li").data("id"), type);
        arraymove(state[parent][type], id, id + 1);
        updateAll();
    });

    $(document).on('click', '.uArrow', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);
        arraymove(state, index, index - 1);
        updateAll();
    });

    $(document).on('click', '.dArrow', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);
        arraymove(state, index, index + 1);
        updateAll();
    });

    $(document).on('click', '.rArrow', function() {
        var id = $(this).parents(".drop").data("id");
        state[getIndexById(id)]["depth"]++;
        //var depthWidth = 20 * $(node).data("depth");
        // $(node).css("padding-left", depthWidth + "px");
        updateAll();
    });

    $(document).on('click', '.lArrow', function() {
        var id = $(this).parents(".drop").data("id");
        state[getIndexById(id)]["depth"]--;
        //var depthWidth = 20 * $(node).data("depth");
        // $(node).css("padding-left", depthWidth + "px");
        updateAll();
    });

    $(document).on('click', '#btnZasoby', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            zasoby();
            $(this).addClass("btn-primary");
            $("#wrapper").removeClass("toggled");
            dialog = 1;
        } else if (dialog == 1) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                zasoby();
                $("#wrapper").removeClass("toggled");
            }, 500);
            dialog = 1;
        }
    });

    $(document).on('click', '#btnPhotos', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            photos();
            $(this).addClass("btn-primary");
            $("#wrapper").removeClass("toggled");
            dialog = 3;
        } else if (dialog == 3) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                photos();
                $("#wrapper").removeClass("toggled");
            }, 500);
            dialog = 3;
        }
    });

    $(document).on('click', '#btnProcesy', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            procesy();
            $("#wrapper").removeClass("toggled");
            $(this).addClass("btn-primary");
            dialog = 2;
        } else if (dialog == 2) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                procesy();
                $("#wrapper").removeClass("toggled");
            }, 500);
            dialog = 2;
        }
    });

    $(document).on('click', 'body', function() {
        if (selectedArea != false) {
            var content = $(selectedArea).val();
            var id = (selectedArea).parents(".drop").data("id");
            if ($(selectedArea).parent().hasClass("hdesc")) {
				if(getIndexById(id) == 0){
					showPath(state[0]["parent_id"]);
				}
                state[getIndexById(id)]["desc"] = content;
                state[getIndexById(id)]["C-desc"] = true;
            }
            if ($(selectedArea).parent().hasClass("sdesc")) {
                state[getIndexById(id)]["opis"] = content;
                state[getIndexById(id)]["C-opis"] = true;
            }
            selectedArea = false;
            updateAll();
        }
    });

    $(document).on('click', '.hdesc', function() {
        if ($(this).find("textarea").is(selectedArea))
            return false;
    });

    $(document).on('click', '.sdesc', function() {
        if ($(this).find("textarea").is(selectedArea))
            return false;
    });

    $(document).on('dblclick', '.sdesc', function() {
        if (selectedArea)
            return;
        if ($(this).find("textarea").length == 0) {
            var content = $(this).html();
            $(this).empty();
            $(this).append("<textarea>" + content + "</textarea>");
            selectedArea = $(this).find("textarea");
        }
    });

    $(document).on('click', '.sDescAdd', function() {
        if (selectedArea)
            return;
        var action = $(this).parents(".drop").find(".sdesc");

        if ($(action).find("textarea").length == 0) {
            $(action).html("<textarea placeholder='Opis kroku'>" + $(action).text() + "</textarea>");
            selectedArea = $(action).find("textarea");
            return false;
        }
    });

    $(document).on('click', '.hDescAdd', function() {
        if (selectedArea)
            return;
        var action = $(this).parents(".drop").find(".hdesc");
        if ($(action).find("textarea").length == 0) {
            $(action).html("<textarea placeholder='Tytuł kroku'>" + $(action).text() + "</textarea>");
            selectedArea = $(action).find("textarea");
            return false;
        }
    });

    $(document).on('dblclick', '.hdesc', function() {
        if ($(this).find("textarea").length == 0) {
            var content = $(this).html();
            $(this).empty();
            $(this).append("<textarea>" + content + "</textarea>");
            selectedArea = $(this).find("textarea");
        }
    });

    $(document).on('click', '.del', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);
        swal({
            title: 'Usuwanie kroku',
            text: "Czy napewno chcesz usunąć ten krok?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń ten krok'
        }).then(function() {
            state.splice(index, 1);
            deletedId.push(id);
            updateAll();
            //Parent_id = -1,
        }).catch(function(e) {})
    });

    $(document).on('click', '.delGoto', function() {
        //var parent = $(this).parents(".drop");
        var id = $(this).parents("li").data("id");
        var parent = getIndexById($(this).parents(".drop").data("id"));
        swal({
            title: 'Usuwanie bramki',
            text: "Czy napewno chcesz usunąć tę bramkę?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń tę bramkę'
        }).then(function() {
            state[parent]["goto"] = {
                id: "",
                flag: ""
            };
            updateAll();
            //Parent_id = -1,
        }).catch(function(e) {})
    });

    $(document).on('click', '.delRes', function() {
        //var parent = $(this).parents(".drop");
        var id = $(this).parents("li").data("id");
        var parent = getIndexById($(this).parents(".drop").data("id"));
        var type;
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";
        var index = getResById(parent, id, type);
        swal({
            title: 'Usuwanie wskaźnika',
            text: "Czy napewno chcesz usunąć ten wskaźnik?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń ten wskaźnik'
        }).then(function() {
            deletedRes.push(id);
            state[parent][type].splice(index, 1);
            updateAll();
            //Parent_id = -1,
        }).catch(function(e) {})
    });

    $(document).on('click', '.fbutton', function(e) {
        e.preventDefault();
        $(".fbutton").removeClass("btn-success");
        if ($(this).data("type") == filtr) {
            filtr = 0;
        } else {
            filtr = $(this).data("type");
            $(this).addClass("btn-success");
        }
        if (filtr === 0)
            $("#xBtn").prop("disabled", true);
        else
            $("#xBtn").prop("disabled", false);
        if (filtr === 0) {
            zasoby();
        } else
            searchRes();
    });

    $(document).on('click', '.showMore', function() {
        var target = $(this).parent().find(".more");
        var id = $(this).data("id");
        if ($(target).parent().hasClass("resSelected")) {
            $(".more").empty();
            $(target).parent().removeClass("resSelected");
            $(target).parent().find(".gIco").addClass("glyphicon-chevron-down");
            $(target).parent().find(".gIco").removeClass("glyphicon-chevron-up");
        } else {
            $(".more").parent().removeClass("resSelected");
            $(".more").parent().find(".gIco").addClass("glyphicon-chevron-down");
            $(".more").parent().find(".gIco").removeClass("glyphicon-chevron-up");
            $(".more").empty();
            $(target).parent().addClass("resSelected");
            $(target).parent().find(".gIco").removeClass("glyphicon-chevron-down");
            $(target).parent().find(".gIco").addClass("glyphicon-chevron-up");

            var link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getResByParentAjax&parent_id=" + id;
            $.get(link, function(data) {
                $.each(data, function(i, e) {
                    if (e["ID"] != 0) {
                        var type = 0;
                        $(target).append("<div class='dragStyle drag dragStyle hov' data-id="
						+ e["ID"]
						+ " data-type="
						+ type + " data-desc='"
						+ e["DESC"]
						+ "' data-opis='"
						+ e["OPIS"]
						+ "'>"
						+ e["DESC"]
						+ " ["
						+ e["ID"] + "]</div>");
                        for (var i = 3; i > 0; i--) {
                            if (e["p" + i + "_ID"] != null) {
                                var temp = {};
                                temp["ID"] = e["p" + i + "_ID"];
                                temp["DESC"] = e["p" + i + "_DESC"];
                                zasobTree[e["ID"]] = [];
                                zasobTree[e["ID"]].push(temp);
                            }
                        }
                        $('.drag').draggable({
                            appendTo: 'body',
                            helper: 'clone',
                            stack: "div",
                            distance: 0,
                            cursor: "copy",
							            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
                        });
                    }
                });
            });
        }
    });

    function searchProc() {
        var id = lastSearch;
        var link;
        link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:Or><ogc:PropertyIsLike wildCard="*" singleChar="^" escapeChar="!"><ogc:PropertyName>ID</ogc:PropertyName><ogc:Literal>*' + id + '*</ogc:Literal></ogc:PropertyIsLike><ogc:PropertyIsLike wildCard="*" singleChar="%23" escapeChar="!"><ogc:PropertyName>DESC</ogc:PropertyName><ogc:Literal>*' + id + '*</ogc:Literal></ogc:PropertyIsLike></ogc:Or></ogc:Filter>&maxFeatures=100';
        $.get(link, function(data) {
            var side = $("#side");
            $(side).find("#ulproc").empty();
            $.each($(data).find("featureMember"), function() {
                if ($(this).find("ID").text() * 1 == 0) {
                    $(side).find("#ulcon").append("<div><center>Brak wyników wyszukiwania</center></div>");
                    return;
                }
                $(side).find("#ulproc").append("<div class='dragStyle drag dragStyle hov' data-droptype=1 data-id=" + $(this).find("ID").text() + " > " + $(this).find("DESC").text() + " [" + $(this).find("ID").text() + "]</div>");
                $('.drag').draggable({
                    appendTo: 'body',
                    helper: 'clone',
                    stack: "div",
                    distance: 0,
                    cursor: "copy",
					            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
                });
            });
        });
    }

    function searchRes() {
        var id = lastSearch;
        var link;
        link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getResAjax&word=" + id + "&filter=" + filtr;
        $.get(link, function(data) {
            var side = $("#side");
            $(side).find("#ulcon").empty();
            if (data.length == 0)
                $(side).find("#ulcon").append("<div><center>Brak wyników wyszukiwania</center></div>");
            $.each(data, function(i, e) {
                var tree = "";
                for (var i = 3; i > 0; i--) {
                    if (e["p" + i + "_ID"] != null) {
                        var temp = {};
                        temp["ID"] = e["p" + i + "_ID"];
                        temp["DESC"] = e["p" + i + "_DESC"];
                        zasobTree[e["ID"]] = [];
                        zasobTree[e["ID"]].push(temp);
                        tree += e["p" + i + "_DESC"] + (i > 1 ? " <span class='glyphicon glyphicon-triangle-right'></span>" : "");
                    }
                }
                var type = 0;
                if (e["TYPE"] == "DZIAL" || e["TYPE"] == "PODMIOT" || e["TYPE"] == "STANOWISKO")
                    type = 1;
                if (filtr != 2 || e["TYPE"] != "TABELA")
                    $(side).find("#ulcon").append("<div class='drag dragStyle hov' data-id=" + e["ID"] + " data-type=" + type + " data-desc='" + e["DESC"] + "' data-opis='" + e["OPIS"] + "'><span class=treeInfo ><div>" + tree + "</div></span><br>" + e["DESC"] + " [" + e["ID"] + "]</div>");
                else {
                    $(side).find("#ulcon").append("<div ><span  class='drag dragStyle click' data-id=" + e["ID"] + " data-type=" + type + " data-desc='" + e["DESC"] + "' data-opis='" + e["OPIS"] + "'> # </span>  <div style=width:80%;float:left; data-id=" + e["ID"] + " class=showMore><span class=tabelaName><span class=treeInfo ><div>" + tree + "</div></span><br>" + e["DESC"] + "</span> [" + e["ID"] + "]</div><span class='gIco glyphicon glyphicon-chevron-down' style:float:left;></span><div style=clear:both;></div><div class=more ></div></div>");
                }
            });
            $('.drag').draggable({
                appendTo: 'body',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy",
				            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
            });
            $(".drop").droppable({
                tolerance: 'pointer',
                accept: '.drag',
                hoverClass: "activeDrop",
                drop: function(event, ui) {
                    if (ui.draggable.data("dropType") == 1)
                        addProces(ui, this);
                    else
                        addResource(ui, this);
                }
            });
        });
    }

    $(document).on('click', '.liProc', function() {
        $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
        $(this).parents(".singleAdv").find(".active").removeClass("active");
        $(this).find(".glyphicon").removeClass("glyphicon-triangle-right");
        $(this).find(".glyphicon").addClass("glyphicon-refresh");
        $(this).find(".glyphicon").addClass("anim-refresh");
        $(this).addClass("active");
        var parent = this;
        var parent_id = $(this).data("id");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>';
        var result = "";
        var depth = $(this).parents(".singleAdv").data("depth") + 1;
        $("#procCon").css("width", depth * 290 + 290);
        $(this).parents(".singleAdv").after("<div class='singleAdv list-group' data-depth=" + depth + " id=depth" + depth + "></div>");
        var childs = true;
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                if ($(this).find("ID").text() == 0) {
                    childs = false;
                    return;
                }
                var type = 0;
                result += "<div class='list-group-item drag liProc' data-opis='" + $(this).find("OPIS").text() + "' data-desc='" + $(this).find("DESC").text() + "' data-droptype=1 data-id=" + $(this).find("ID").text() + " ><div class=textTable><span class=handle> # </span>" + $(this).find("DESC").text() + "</div><div class=detailsTable>[" + $(this).find("ID").text() + "]</div><div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div><div class=clearfix></div></div>";
            });
            if (!childs) {
                result += '<div class="panel panel-primary">';
                result += '<div class="panel-heading"><h3 class="panel-title">[' + $(parent).data('id') + '] ' + $(parent).data("desc") + '</h3></div>';
                result += '<div class="panel-body pbody">';
                result += '<b>Opis: </b>' + $(parent).data("opis");
                result += '</div>';
                result += '</div>'
            }
            $("#depth" + depth).html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy",
				            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
            });
            $(parent).find(".glyphicon").addClass("glyphicon-triangle-right");
            $(parent).find(".glyphicon").removeClass("glyphicon-refresh");
            $(parent).find(".glyphicon").removeClass("anim-refresh");
            $("#ulproc").scrollLeft(depth * 290 + 290);
            $("#ulproc").scrollTop(0);
        });
    });

    function procesy() {
        var side = $("#side");
        $(side).empty();
        //$(side).append("<h3>Zarządzaj zasobami<h3>");
        $(side).append("<div class='form-group' ><input type='text' class=form-control id=sProcesy placeholder='Szukaj procesów'></div>");
        $(side).append("<div id=ulproc><div id=procCon></div></div>");
        $(side).find("#procCon").append("<div class='singleAdv list-group' data-depth=0 id=depth0></div>");
        $(side).find("#procCon").append("<div class=clearfix></div>");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>0</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                var type = 0;
                result += "<div class='drag list-group-item liProc' data-droptype=1 data-opis='" + $(this).find("OPIS").text() + "' data-desc='" + $(this).find("DESC").text() + "' data-id=" + $(this).find("ID").text() + " >";
                result += "<div class=textTable><span class=handle> # </span>";
                result += $(this).find("DESC").text()
                result += "</div><div class=detailsTable> [" + $(this).find("ID").text() + "]</div>";
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div><div class=clearfix></div></div>";
            });
            $("#depth0").html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy",
				            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
            });
        });
    }

    $(document).on('click', '.liAdv', function() {
        $(this).find(".glyphicon").removeClass("glyphicon-triangle-right");
        $(this).find(".glyphicon").addClass("glyphicon-refresh");
        $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
        $(this).parents(".singleAdv").find(".active").removeClass("active");
        $(this).addClass("active");
        var parent = this;
        var parent_id = $(this).data("id");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_LISTA_ZASOBOW&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        var depth = $(this).parents(".singleAdv").data("depth") + 1;
        $("#advCon").css("width", depth * 290 + 290);
        $(this).parents(".singleAdv").after("<div class='singleAdv list-group' data-depth=" + depth + " id=depth" + depth + "></div>");
        var childs = true;
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                if ($(this).find("ID").text() == 0) {
                    childs = false;
                    return;
                }
                var type = 0;
                if ($(this).find("TYPE").text() == "DZIAL" || $(this).find("TYPE").text() == "PODMIOT" || $(this).find("TYPE").text() == "STANOWISKO")
                    type = 1;
                result += "<div class='list-group-item drag liAdv' data-typename='" + $(this).find("TYPE").text() + "' data-id=" + $(this).find("ID").text() + " data-type=" + type + " data-desc='" + $(this).find("DESC").text() + "' data-opis='" + $(this).find("OPIS").text() + "'  title='" + $(this).find("DESC").text() + "'><div class=textTable2><span class=handle> # </span>" + $(this).find("DESC").text() + "</div>";
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div>";
                result += "<div class=clearfix></div><div class=detailsTable2>[" + $(this).find("ID").text() + "] " + $(this).find("TYPE").text() + "</div></div>";
            });
            if (!childs) {
                result += '<div class="panel panel-primary">';
                result += '<div class="panel-heading"><h3 class="panel-title">[' + $(parent).data('id') + '] ' + $(parent).data("desc") + '</h3></div>';
                result += '<div class="panel-body pbody">';
                result += '<b>Opis: </b>' + $(parent).data("opis");
                result += '<br><b>Typ: </b>' + $(parent).data("typename");
                result += '</div>';
                result += '</div>'
            }
            $("#depth" + depth).html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy",
				            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
            });
            $(parent).find(".glyphicon").addClass("glyphicon-triangle-right");
            $(parent).find(".glyphicon").removeClass("glyphicon-refresh");
            $("#ulcon").scrollLeft(depth * 290 + 290);
            $("#ulcon").scrollTop(0);
        });
    });

    function getImg(el) {
        var name = el.files[0].name;
        var size = el.files[0].size;
        var type = el.files[0].type;
        var link = BASE_URL + "wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003";
        var FR = new FileReader();
        FR.onload = function(e) {
            var content = e.target.result;
            var image = new Image();
            image.src = content;
            image.onload = function() {
                var width = el.width;
                var height = el.height;
                var xml =
                    `
                  <Transaction
                    xmlns="http://www.opengis.net/wfs"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                    version="1.0.0"
                    service="WFS"
                    xmlns:p5_default_db="` + BASE_WFS_URL + `/default_db"
                    xmlns:gml="http://www.opengis.net/gml">

                    <Insert xmlns="http://www.opengis.net/wfs">
                    <CRM_IMAGE xmlns="` + BASE_WFS_URL + `/default_db">
                        <NAME xmlns="` + BASE_WFS_URL + `/default_db">` + name + `</NAME>
                        <IMAGE xmlns="` + BASE_WFS_URL + `/default_db">` + content + `</IMAGE>
                        <TYPE xmlns="` + BASE_WFS_URL + `/default_db">` + type + `</TYPE>
                        <SIZE xmlns="` + BASE_WFS_URL + `/default_db">` + size + `</SIZE>
                        <WIDTH xmlns="` + BASE_WFS_URL + `/default_db">` + width + `</WIDTH>
                        <HEIGHT xmlns="` + BASE_WFS_URL + `/default_db">` + height + `</HEIGHT>
                        <REMOTE_TABLE xmlns="` + BASE_WFS_URL + `/default_db">ADMIN_USERS</REMOTE_TABLE>
                        <REMOTE_ID xmlns="` + BASE_WFS_URL + `/default_db">` + USER_ID + `</REMOTE_ID>
                    </CRM_IMAGE>
                    </Insert>
                  </Transaction>`;
                $.ajax({
                    url: link,
                    data: xml,
                    type: 'POST',
                    contentType: "text/xml",
                    dataType: "xml",
                    success: function(data) {
                        if ($(data).find("ServiceException").text() != "") {
                            $.notify($(data).find("ServiceException").text(), "error");
                        } else {
                            photos();
                        }
                    }
                });
            }
        };
        FR.readAsDataURL(el.files[0]);


    }


    function humanFileSize(bytes) {
        var thresh = 1024;
        if (Math.abs(bytes) < thresh) {
            return bytes + ' B';
        }
        var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
        var u = -1;
        do {
            bytes /= thresh;
            ++u;
        } while (Math.abs(bytes) >= thresh && u < units.length - 1);
        return bytes.toFixed(1) + ' ' + units[u];
    }

    function uploadForm() {
        var form = '<input id="fileupload" type="file" name="files[]" data-url="index.php?_route=UrlAction_procesEditor&_task=uploadVideo" multiple>' +
            "<div id='upload_info'></div>" +
            "<button style=width:100%; type='button' class='btn btn-default' id=upload_button>Umieść na serwerze</button>"


        return form;
    }


    function photos() {
        var side = $("#side");
        $(side).empty();

        $(side).append(uploadForm());

        $('#upload_progress').css(
            'opacity',
            0
        );

        $('#fileupload').fileupload({
            dataType: 'html',
            add: function(e, data) {
                $("#upload_button").off('click').on('click', function() {
                    data.submit();
                });
                var html = '<span class=upload_status></span>'
                html += '<div class="progress" id=upload_progress>' +
                    '<div class="progress-bar"  role="progressbar" aria-valuenow="0"' +
                    'aria-valuemin="0" aria-valuemax="100" style="width:0%">' +
                    '<span>70%</span>' +
                    '</div>' +
                    '</div>'

                $("#upload_info").html(html);

            },
            done: function(e, data) {
                $('#upload_progress').css(
                    'opacity',
                    0
                );


                loadClipboard();
            },
            progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#upload_progress').find(".progress-bar").css(
                    'width',
                    progress + '%'
                );
                var remaining = Math.ceil((data.total - data.loaded) * 8 / data.bitrate);
                $('#upload_progress').find(".progress-bar").find("span").text(progress + '%');
                var total = humanFileSize(data.total);
                var bitrate = humanFileSize(data.bitrate / 10)
                var loaded = humanFileSize(data.loaded);
                $('#upload_info').find(".upload_status").text(loaded + "/" + total + " - pozostało " + remaining + " sekund [" + bitrate + "/s]");
            }
        });
        var schowek = '<ul class="list-group" id=clipboard>';
        schowek += '</ul>';
        $(side).append(schowek);
        loadClipboard();

    }

    function showVideo(data) {
        var el = ""


        return el;
    }

    function showMediaElement(data, type) {
        var el = ""
		if (!data || undefined === data['ID']) return '';
		if ('video' === type && undefined === data['VIDEO_ID']) return '';
		if ('img' === type && undefined === data['IMAGE']) return '';
        if (type == "video") {
            //el += "<div class=attVid><div class=remImg>X</div>"
            el += "<div class=attVid><div class=imgTitle><i class='glyphicon glyphicon-option-vertical'></i>"
            el += data["NAME"]
            el += "</div>"
            el += "<div  class='p5VideoPlayer' id=p1 "
            el += "data-start=0 data-end=560 "
            el += "data-videoid=" + data["VIDEO_ID"] + ">"
            el += "<div class=img>"
            el += "<img src='" + "data:" + (data["THUMBNAIL"]["IMAGE"]) + "' / >"
            el += "</div>"
            el += "</div>"
            el += "</div>"
        } else if (type == "img") {
            el += "<div class=attImg data-id=" + data["ID"] + ">"
            el += "<div class=imgTitle>"
            el += "<i class='glyphicon glyphicon-option-vertical'></i>"
            el += data["NAME"] + "</div><div class='img'>"
            el += "<img src='" + "data:" + data["IMAGE"] + "' / >"
            el += "</div></div>"

        }
        return el;
    }

    function loadClipboard() {
        $("#clipboard").empty();
		var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_IMAGE&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:And><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_ID</ogc:PropertyName><ogc:Literal>' + USER_ID + '</ogc:Literal></ogc:PropertyIsEqualTo><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_TABLE</ogc:PropertyName><ogc:Literal>ADMIN_USERS</ogc:Literal></ogc:PropertyIsEqualTo></ogc:And></ogc:Filter>';
        $.get(link, function(data) {
            var list = "";
            $(data).find("featureMember").each(function() {
                if (typeof usedImg[$(this).find("ID").text()] == "undefined") {
                    var opts = {};
                    opts["ID"] = $(this).find("ID").text();
                    opts["IMAGE"] = base64_decode($(this).find("IMAGE").text());
                    opts["NAME"] = $(this).find("NAME").text();
                    list += showMediaElement(opts, "img");
                }
            });
            $("#clipboard").append(list);
            $('.attImg').draggable({
                appendTo: 'body',
                //revert: true,
                zIndex: 100,
                helper: "clone",
                stack: "div",
                distance: 0,

                handle: '.imgTitle',
                scroll: true,
                start: function(event, ui) {
                    $(this).data("startingScrollTop", $(this).parent().scrollTop());
                },
                drag: function(event, ui) {
                    var st = parseInt($(this).data("startingScrollTop"));
                    ui.position.top -= $(document).scrollTop() - st;
                    ui.helper.css('z-index', 1000);
                }


            });
        });
        link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getVideosClipboardAjax"
        $.get(link, function(data) {
            var list = "";
            $.each(data, function(i, e) {
                list += showMediaElement(e, "video");

            })

            $("#clipboard").prepend(list);
            $('.attVid').draggable({
                appendTo: 'body',
                //revert: true,
                zIndex: 100,
                helper: "clone",
                stack: "div",
                distance: 0,
                handle: '.imgTitle',
                scroll: true,
                start: function(event, ui) {
                    $(this).data("startingScrollTop", $(this).parent().scrollTop());
                },
                drag: function(event, ui) {
                    var st = parseInt($(this).data("startingScrollTop"));
                    ui.position.top -= $(document).scrollTop() - st;
                    ui.helper.css('z-index', 1000);
                }


            });

        });
    }

    function zasoby() {
        var side = $("#side");
        $(side).empty();
        $(side).append("<div class='form-group' ><input type='text' class=form-control id=sZasoby placeholder='Szukaj zasobów'></div>");
        $(side).append("<div class='btn-group' style=width:100% id=filtry></div>");
        $("#filtry").append("<button type='button' data-type=1 class='fbutton btn btn-default input-block-level ' style=width:40%>Stanowiska</button>");
        $("#filtry").append("<button type='button' data-type=2 class='fbutton btn btn-default input-block-level ' style=width:40%>Komórki</button>");
        $("#filtry").append("<button type='button' data-type=0 class='fbutton btn btn-danger input-block-level' id=xBtn  style=width:20% disabled>X</button>");
        $(side).append("<div id=ulcon><div id=advCon></div></div>");
        $(side).find("#advCon").append("<div class='singleAdv list-group' data-depth=0 id=depth0></div>");
        $(side).find("#advCon").append("<div class=clearfix></div>");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_LISTA_ZASOBOW&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>0</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                var type = 0;
                if ($(this).find("TYPE").text() == "DZIAL" || $(this).find("TYPE").text() == "PODMIOT" || $(this).find("TYPE").text() == "STANOWISKO")
                    type = 1;
                result += "<div class='drag list-group-item liAdv'";
                result += "data-typename='" + $(this).find("TYPE").text() + "' data-id=" + $(this).find("ID").text() + " data-type=" + type + " data-desc='" + $(this).find("DESC").text() + "' data-opis='" + $(this).find("OPIS").text() + "'"
                result += "title='" + $(this).find("DESC").text() + "'>"
                result += "<div class=textTable2>"
                result += "<span class=handle> # </span>" + $(this).find("DESC").text() + "</div>"
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right; style=float:left;></div>"
                result += "<div class=clearfix></div>"
                result += "<div class=detailsTable2>[" + $(this).find("ID").text() + "] " + $(this).find("TYPE").text() + "</div>"
                result += "</div>";
            });
            $("#depth0").html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy",
                scroll: true,
                start: function(event, ui) {
                    $(this).data("startingScrollTop", $(this).parent().scrollTop());
                },
                drag: function(event, ui) {
                    var st = parseInt($(this).data("startingScrollTop"));
                    ui.position.top -= $(document).scrollTop() - st;
                    ui.helper.css('z-index', 1000);
                }
            });
        });
        //$(side).find("#ulcon").append("<div class='drag' data-id=1 data-type=1 >[STANOWISKO] Ulotkarz</div>");
        //$(side).find("#ulcon").append("<div class='drag' data-id=2 data-type=1 >[STANOWISKO] Programista PHP</div>");
        //$(side).find("#ulcon").append("<div class='drag' data-id=3 data-type=2 >[ZASÓB] Komputer</div>");
    }

    function removeImg(content, id) {
        $.each(content, function(i, e) {
            if (e["id"] == id) {
                content.splice(i, 1);
                return;
            }
        })
    }

    function dropVid(ui, target) {
        var id = $(target).closest(".drop").data("id");
        var proces = id;
        var idBefore = $(ui.draggable).closest(".drop").data("id");
        var procesBefore = idBefore;
        var type = "CRM_PROCES";
        var typeName = "proces";
        var typeNameBefore = "proces";
        if ($(target).closest(".professions").length) {
            id = $(target).closest("li").data("id");
            type = "CRM_WSKAZNIK";
            typeName = "prof";
        } else if ($(target).closest(".resources").length) {
            id = $(target).closest("li").data("id");

            typeNameBefore = "res";
            type = "CRM_WSKAZNIK";
            typeName = "res";
        }
        if ($(ui.draggable).closest(".professions").length) {
            typeNameBefore = "prof";
            idBefore = $(ui.draggable).closest("li").data("id");
        } else if ($(ui.draggable).closest(".resources").length) {
            typeNameBefore = "res";
            idBefore = $(ui.draggable).closest("li").data("id");
        }

        var temp = {};
		temp["THUMBNAIL"] = {};
        temp["THUMBNAIL"]["IMAGE"] = $(ui.draggable).find("img").attr("src");
        temp["NAME"] = $(ui.draggable).find(".imgTitle").text();
        temp["VIDEO_ID"] = $(ui.draggable).find(".p5VideoPlayer").data("videoid");
        usedImg[temp["id"]] = {
            type: type,
            targetID: id,
            action: "ATTACH"
        };

        if (typeName != "proces" && typeof state[getIndexById(proces)][typeName][
                [getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]
            ]["vid"] == "undefined") {
            state[getIndexById(proces)][typeName][getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]["vid"] = Array();
        } else if (typeName == "proces" && typeof state[getIndexById(id)]["img"] == "undefined") {
            state[getIndexById(proces)]["vid"] = Array();
        }
        if (typeof idBefore != "undefined")
            if (typeNameBefore == "proces") {

                removeImg(state[getIndexById(procesBefore)]["vid"], temp["id"]);
            } else {
                removeImg(state[getIndexById(procesBefore)][typeNameBefore][getResById(getIndexById(procesBefore), $(ui.draggable).closest("li").data("id"), typeNameBefore)]["img"], temp["id"]);
            }

        if (typeName == "proces") {
            state[getIndexById(id)]["vid"].push(temp);
        } else {
            state[getIndexById(proces)][typeName][getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]["img"].push(temp);
        }
        $(ui.draggable).remove();
        console.log(state);
        updateAll();
    }

    function dropImg(ui, target) {
        var id = $(target).closest(".drop").data("id");
        var proces = id;
        var idBefore = $(ui.draggable).closest(".drop").data("id");
        var procesBefore = idBefore;
        var type = "CRM_PROCES";
        var typeName = "proces";
        var typeNameBefore = "proces";
        if ($(target).closest(".professions").length) {
            id = $(target).closest("li").data("id");
            type = "CRM_WSKAZNIK";
            typeName = "prof";
        } else if ($(target).closest(".resources").length) {
            id = $(target).closest("li").data("id");

            typeNameBefore = "res";
            type = "CRM_WSKAZNIK";
            typeName = "res";
        }
        if ($(ui.draggable).closest(".professions").length) {
            typeNameBefore = "prof";
            idBefore = $(ui.draggable).closest("li").data("id");
        } else if ($(ui.draggable).closest(".resources").length) {
            typeNameBefore = "res";
            idBefore = $(ui.draggable).closest("li").data("id");
        }

        var temp = {};

        temp["src"] = $(ui.draggable).find("img").attr("src");
        temp["title"] = $(ui.draggable).find(".imgTitle").text();
        temp["id"] = $(ui.draggable).data("id");
        usedImg[temp["id"]] = {
            type: type,
            targetID: id,
            action: "ATTACH"
        };

        if (typeName != "proces" && typeof state[getIndexById(proces)][typeName][
                [getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]
            ]["img"] == "undefined") {
            state[getIndexById(proces)][typeName][getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]["img"] = Array();
        } else if (typeName == "proces" && typeof state[getIndexById(id)]["img"] == "undefined") {
            state[getIndexById(proces)]["img"] = Array();
        }
        if (typeof idBefore != "undefined")
            if (typeNameBefore == "proces") {

                removeImg(state[getIndexById(procesBefore)]["img"], temp["id"]);
            } else {
                removeImg(state[getIndexById(procesBefore)][typeNameBefore][getResById(getIndexById(procesBefore), $(ui.draggable).closest("li").data("id"), typeNameBefore)]["img"], temp["id"]);
            }

        if (typeName == "proces")
            state[getIndexById(id)]["img"].push(temp);
        else {
            state[getIndexById(proces)][typeName][getResById(getIndexById(proces), $(target).closest("li").data("id"), typeName)]["img"].push(temp);
        }
        $(ui.draggable).remove();
        updateAll();
    }

    function addProces(ui, target) {
        var id = $(target).data("id");
        var gotoOpt = "";
        $.each(gotoType, function(key, value) {
            gotoOpt += "<option value=" + value[0] + ">" + value[1] + "</option>";
        })
        swal({
            showCancelButton: true,
            cancelButtonText: "Anuluj",
            title: 'Typ łącza',
            html: (
                typeof state[getIndexById(id)]["goto"] !== typeof undefined && state[getIndexById(id)]["goto"]["id"] != null && state[getIndexById(id)]["goto"]["id"] != 0 ?
                '<span class=class="alert alert-warning"><strong>Uwaga!</strong> Nowe łącze nadpisze już istniejące łącze.</span><br>' :
                ""
            ) + '<br><select class=form-control id="swal-input1">' + gotoOpt + '</select>',
            preConfirm: function() {
                return new Promise(function(resolve) {
                    resolve([
                        $('#swal-input1').val()
                    ]);
                });
            }
        }).then(function(result) {
            newRes--;
            var temp = {};
            temp["flag"] = result[0];
            temp["id"] = ui.draggable.data("id");
            state[getIndexById(id)]["goto"] = temp;
            updateAll();
        }).catch(function(e) {})
    }

    function addResource(ui, target) {
        var permsOpt = "";
        $.each(perms, function(key, value) {
            permsOpt = permsOpt + "<option value=" + value[0] + ">[" + value[2] + "] " + value[1] + "</option>";
        })
        swal({
            showCancelButton: true,
            cancelButtonText: "Anuluj",
            title: 'Uprawnienia',
            html: 'Uprawnienia<br><select class=form-control id="swal-input1">' + permsOpt + '</select>' +
                'Komentarz<br><input class=form-control id="swal-input2" class="swal2-input">',
            preConfirm: function() {
                return new Promise(function(resolve) {
                    resolve([
                        $('#swal-input1').val(),
                        $('#swal-input2').val()
                    ]);
                });
            }
        }).then(function(result) {
            newRes--;
            var temp = {};
            temp["id_zasob"] = ui.draggable.data("id");
            temp["id"] = newRes;
            temp["id_przypadek"] = result[0];
            temp["komentarz"] = result[1];
            temp["changed"] = true;
            temp["opis"] = ui.draggable.data("opis");
            temp["desc"] = ui.draggable.data("desc");

            temp["tree"] = zasobTree[temp["id_zasob"]];
            var id = $(target).data("id");
            if (ui.draggable.data("type") == 1) {
                state[getIndexById(id)]["prof"].push(temp);
            } else {
                state[getIndexById(id)]["res"].push(temp);
            }
            updateAll();
        }).catch(function(e) {})
    }

    //Najwazniejsza funkcja odpalana po kazdej zmianie. Sprawdza, czy wszystkie funkcje maja rodzica,
    //jezeli nie to przesuwa w lewo obiekt
    //Odpowiada tez za ukrywanie guzikow i wywowalanie funkcji generacji krokow
    function updateAll() {
        $.each(state, function(i, e) {
            var pid = getParentNode(e["id"]);
            if (pid != "NONE" && pid != false && pid != e["parent_id"]) {
                e["parent_id"] = pid;
            } else if (pid === false) {
                e["depth"]--;
                //var depthWidth = 20 * $(node).data("depth");
                //$(node).css("padding-left", depthWidth + "px");
                updateAll();
                return;
            }
        });
        changes = true;
        $("#clearBtn").show();
        /*
        localStorage.setItem("state" + mainProces_id, JSON.stringify(state));
        localStorage.setItem("newStep" + mainProces_id, newSteps);
        localStorage.setItem("newRes" + mainProces_id, newRes);
        localStorage.setItem("deletedId" + mainProces_id, JSON.stringify(deletedId));
        localStorage.setItem("deletedRes" + mainProces_id, JSON.stringify(deletedRes));
        localStorage.setItem("date" + mainProces_id, moment().format("YYYY-MM-DD HH:mm:ss"));
        */
        render(state, $("#main"));
    }

    //Generuje kroki, sprawdza tez czy kolejnosc krokow w danym rodzicow zostala zmieniona
    //Jezeli tak to mozna wyslac ajaxem zmiane kolejnosci dla sort_prio
    function stepsGenerator() {
        $.each(state, function(i, e) {
            e["step"] = 0;
            if (i == 0)
                e["stepDesc"] = "";
            else {
                var iParent = getIndexById(e["parent_id"]);
                state[iParent]["step"] += 1;
                e["SORT_PRIO"] = state[iParent]["step"];
                e["stepDesc"] = state[iParent]["stepDesc"] + state[iParent]["step"] + ". ";
            }
        });
    }

    //Na potrzeby guzikow dorobilem funkcje sprawdzajaca id rodzica po przesunieciu (przewidywanie).
    //Jezeli nie znajdzie zwraca false, a wtedy blokuje sie odpowiednia strzalka
    function checkParentNode(id, check) {
        var x = getIndexById(id);
        var y = x;
        var result = false;
        while (x > 0) {
            x--;
            if (check == "right")
                if (state[x]["depth"] == state[y]["depth"]) {
                    result = state[x]["id"];
                    break;
                }
            if (check == "left")
                if (state[x]["depth"] == state[y]["depth"] - 2) {
                    result = state[x]["id"];
                    break;
                }

            if (check == "right" && state[x]["depth"] < state[y]["depth"])
                break;
        }
        return result;
    }

    //Zwraca id rodzica, jezeli nie ma zwraca false
    function getParentNode(id) {
        var x = getIndexById(id);
        var y = x;
        if (x == 0)
            return "NONE";
        var result = false;
        while (x > 0) {
            x--;
            if (state[x]["depth"] == state[y]["depth"] - 1) {
                result = state[x]["id"];
                break;
            }
            if (state[x]["depth"] - state[y]["depth"] == -2)
                break;
        }
        return result;
    }

    function getResById(index, id, type) {
        var result = state[index][type].length - 1;
        $.each(state[index][type], function(i, e) {
            if (e["id"] == id) {
                result = i;
                return false;
            }
        });
        return result;
    }

    function getIndexById(id, arr, label) {
		var arr = arr || state
		var label = label || "id"
        var result = arr.length - 1;
        if (label == "ID")
            result = -1;
        $.each(arr, function(i, e) {
            if (e[label] == id) {
                result = i;
                return false;
            }
        });
        return result;
    }

    $(".remImg").on('click', function() {
        var obj = $(this).closest(".attImg");
        var id = $(this).closest(".drop").data("id");
        var typeName = "proces";
        if ($(obj).closest(".professions").length) {
            typeName = "prof";
        } else if ($(obj).closest(".resources").length) {
            typeName = "res";
        }
        //if(typeof idBefore != "undefined")

        if (typeName == "proces")
            removeImg(state[getIndexById(id)]["img"], $(obj).data("id"));
        else {
            removeImg(state[getIndexById(id)][typeName][getResById(getIndexById(id), $(obj).closest("li").data("id"), typeName)]["img"], $(obj).data("id"));
        }
        $(ui.draggable).remove();
        usedImg[$(obj).data("id")] = {
            type: "",
            targetID: -1,
            action: "DELETED"
        };
        updateAll();
        return false;
    });

    $(document).on('click', '.stateOff', function() {
        $(this).closest(".mx").prev(".tree").show();
        $(this).closest(".mx").remove();
    });

    $(document).on('click', '.tree', function() {
        var type;
        if ($(this).closest("ul").hasClass("resources")) {
            type = "res";
        } else {
            type = "prof"
        }
        var id = getIndexById($(this).closest(".drop").data("id"));
        var resId = getResById(id, $(this).closest(".liRes").data("id"), type);
        $(this).hide();
        showTree(state[id][type][resId]["tree"], $(this));
    });

    function showTree(arr, target) {
        result = "";
        $.each(arr, function(i, x) {
            result += "<li style=padding-left:" + i * 16 + "px;><span class='glyphicon glyphicon-arrow-right'></span> " + x["DESC"] + "</li>";
        });
        $(target).after("<div class=mx><div class=stateOff><span class='glyphicon glyphicon-chevron-up'></span></div> <ul style=padding-left:0px;>" + result + "</ul></div>");
    }

    function render(arr, target) {
        stepsGenerator();
        var result = "";
        $.each(arr, function(i, e) {
            result += "<div class='drop container-fluid' data-id=" + e["id"] + " id='proc" + e["id"] + "'>";
            result += "<div class='col-xs-1 options' style=text-align:right;padding-top:2px; id=opt" + e["id"] + ">";
            if (i > 0) {
                result += "<span class='glyphicon glyphicon-remove-sign ico del' title='Usuń krok' aria-hidden='true'></span>";
                //Arrows
                if (checkParentNode(e["id"], "right") !== false)
                    result += "<span class='glyphicon glyphicon-arrow-right ico rArrow' aria-hidden='true' title='Przesuń krok w prawo'></span>";
                if (checkParentNode(e["id"], "left") !== false)
                    result += "<span class='glyphicon glyphicon-arrow-left ico lArrow' aria-hidden='true' title='Przesuń krok w lewo'></span>";
                if (i != 1)
                    result += "<span class='glyphicon glyphicon-arrow-up ico uArrow'  aria-hidden='true' title='Przesuń krok w górę'></span>";
                if (i != state.length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down ico dArrow' aria-hidden='true' title='Przesuń krok w dół'></span>";
            } else {}
            result += "<span class='hDescAdd glyphicon glyphicon-edit ico' title='Edytuj tytuł'></span>";
            result += "<div class='clearfix'></div>";
            if (e["opis"] == "")
                result += "<span class=sDescAdd>Dodaj opis</span>";
            else
                result += "<span class=sDescAdd>Edytuj opis</span>";
            result += "</div>";
            result += "<div class='col-xs-11 desc' id='desc" + e["id"] + "' ><h4 class='changable " + (e["C-desc"] ? "changed" : "") + "'><span class='stepDesc'>" + e["stepDesc"] + "</span><span class=hdesc>" + e["desc"] + "</span> <span class=ids>{" + (e["id"] >= 0 ? e["id"] : "?") + "}</span></h4><span  class='sdesc changable " + (e["C-opis"] ? "changed" : "") + "'>" + e["opis"] + "</span>";

            // }
            // if ($(this).find("OPIS").text() == "") {
            //     $("#proc" + $(this).find("ID").text()).find(".sdesc").after("<span class=sDescAdd>Dodaj opis</span>");
            // }
            result += "<div class='clearfix'></div><div class=imagesProc>";

            if (typeof e["img"] !== "undefined") {
                //console.log(e["img"])
                $.each(e["img"], function(key, eImg) {
                    var img = showMediaElement({
                        "ID": eImg["id"],
                        "IMAGE": eImg["src"],
                        "NAME": eImg["title"]
                    }, "img")
                    result += img;
                })
            }

			if (typeof e["vid"] !== "undefined") {
                //console.log(e["img"])
                $.each(e["vid"], function(key, eVid) {
                    var vid = showMediaElement(eVid, "video")
                    result += vid;
                })
            }

            result += "<div class=clearfix></div></div><br>";
            var anyProf = false;
            $.each(e["prof"], function(i2, e2) {
                if (!anyProf) {
                    result += "<div class=row><div class=col-sm-2 style=font-size:1.2em;text-align:right;opacity:1>Stanowiska</div></div><ul class=professions style=padding:0;>";
                    anyProf = true;
                }
                result += "<li style=padding-top:5px;padding-bottom:5px; class='liRes' data-zasob=" + e2["id_zasob"] + " data-id=" + e2["id"] + " data-przypadek=" + e2["id_przypadek"] + " data-komentarz='" + e2["komentarz"] + "'><div class=row>";
                result += "<div class=col-sm-2 style=text-align:right;>";
                if (i2 != 0)
                    result += "<span class='glyphicon glyphicon-arrow-up uArrowRes' title='Przesuń wskaźnik w górę' aria-hidden='true'></span>";
                if (i2 != e["prof"].length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down dArrowRes' title='Przesuń wskaźnik w dół' aria-hidden='true'></span>";
                result += "<span aria-hidden='true' class='glyphicon glyphicon-edit btnEdit' title='Edytuj wskaźnik' style=font-size:12px;></span><span class='glyphicon glyphicon-remove-sign delRes' title='Usuń wskaźnik' style=font-size:12px; aria-hidden='true' ></span>";
                result += "</div>";
                result += "<div class='col-sm-10 changable " + (e2["changed"] ? "changed" : "") + " '><b>" + e2["desc"] + "</b> " + e2["opis"] + " [" + e2["id_zasob"] + "] <br><span class=tree>";

                if(typeof e2["tree"] !== "undefined" && e2["tree"].length > 0){ //TO DO DOWNLOAD TREE WHEN NOT EXISTS
                  result += "<span class=state><span class='glyphicon glyphicon-chevron-down'></span></span> ";
                    $.each(e2["tree"], function(i, x) {
                        result += x["DESC"] + (i < e2["tree"].length - 1 ? "<span class='glyphicon glyphicon-triangle-right'></span> " : "");
                    });
                }
                result += "</span></div>";
                if (typeof e2["img"] !== "undefined") {
                    //console.log(e["img"])
                    $.each(e2["img"], function(key, eImg) {
                        var img = showMediaElement({
                            "ID": eImg["id"],
                            "IMAGE": eImg["src"],
                            "NAME": eImg["title"]
                        }, "img")
                        result += img;
                    })
                }
                result += "</div></li>";
            });
            if (anyProf) {
                result += "</ul>";
            }
            var anyRes = false;
            $.each(e["res"], function(i2, e2) {

                if (!anyRes) {
                    result += "<div class=row><div class=col-sm-2 style=font-size:1.2em;text-align:right;opacity:1>Użyte zasoby</div></div><ul class=resources style=padding:0;>";
                    anyRes = true;
                }
                result += "<li style=padding-top:5px;padding-bottom:5px; class='liRes' data-zasob=" + e2["id_zasob"] + " data-id=" + e2["id"] + " data-przypadek=" + e2["id_przypadek"] + " data-komentarz='" + e2["komentarz"] + "'><div class=row>";
                result += "<div class=col-sm-2 style=text-align:right;>";
                if (i2 != 0)
                    result += "<span class='glyphicon glyphicon-arrow-up uArrowRes' title='Przesuń wskaźnik w górę' aria-hidden='true'></span>";
                if (i2 != e["res"].length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down dArrowRes' title='Przesuń wskaźnik w dół' aria-hidden='true'></span>";
                result += "<span aria-hidden='true' class='glyphicon glyphicon-edit btnEdit' title='Edytuj wskaźnik' style=font-size:12px;></span><span class='glyphicon glyphicon-remove-sign delRes' title='Usuń wskaźnik' style=font-size:12px; aria-hidden='true' ></span>";
                result += "</div>";
                result += "<div class='col-sm-10 changable " + (e2["changed"] ? "changed" : "") + " '><b>" + e2["desc"] + "</b> " + e2["opis"] + " [" + e2["id_zasob"] + "] <br><span class=tree>";
                if(typeof e2["tree"] !== "undefined" && e2["tree"].length > 0){ //TO DO DOWNLOAD TREE WHEN NOT EXISTS
                  result += "<span class=state><span class='glyphicon glyphicon-chevron-down'></span></span> ";
                    $.each(e2["tree"], function(i, x) {
                        result += x["DESC"] + (i < e2["tree"].length - 1 ? "<span class='glyphicon glyphicon-triangle-right'></span> " : "");
                    });
                }
                result += "</span></div>";
                if (typeof e2["img"] !== "undefined") {
                    //console.log(e["img"])
                    $.each(e2["img"], function(key, eImg) {
                        var img = showMediaElement({
                            "ID": eImg["id"],
                            "IMAGE": eImg["src"],
                            "NAME": eImg["title"]
                        }, "img")
                        result += img;
                    })
                }
                result += "</div></li>";
            });
            if (anyRes) {
                result += "</ul>";
            }
            if (typeof e["goto"] !== typeof undefined && e["goto"]["id"] != null && e["goto"]["id"] != 0) {
                var name;
                switch (e["goto"]["flag"]) {
                    case "GOTO":
                        name = "Przejdź do procesu " + e["goto"]["id"] + ".";
                        break;
                    case "GOTO_AND_RETURN":
                        name = "Przejdź do procesu " + e["goto"]["id"] + ", a następnie wróć.";
                        break;
                    case "FORK":
                        name = "&mdash; FORK" + e["goto"]["id"];
                        break;
                    default:
                        name = e["goto"]["id"];
                }
                result += "<span style=color:grey; class=goto>&mdash; " + name + "</span> <span class='glyphicon glyphicon-remove-sign delGoto' title='Usuń GOTO' style=font-size:12px; aria-hidden='true' ></span>";
            }
            result += "<br><span class=step>Dodaj nowy krok</span>";
            result += "</div>"
            result += "</div>";
        });
        $(target).html(result);
        $('.drag').draggable({
            appendTo: 'body',
            helper: 'clone',
            stack: "div",
            distance: 0,
            cursor: "copy",
            scroll: true,
            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
        });
        $(".drop").droppable({
            tolerance: 'pointer',
            accept: '.drag',
            zIndex: 0,
            hoverClass: "activeDrop",
            drop: function(event, ui) {
                if (ui.draggable.data("droptype") == 1)
                    addProces(ui, this);
                else
                    addResource(ui, this);
            }
        });
        $(".sdesc").droppable({
            tolerance: 'pointer',
            accept: '.attImg, .attVid',
            zIndex: 0,
            hoverClass: "activeDrop",
            drop: function(event, ui) {
				if($(ui.draggable).hasClass("attVid"))
					dropVid(ui, this);
				else if($(ui.draggable).hasClass("attImg"))
					dropImg(ui, this);
            }
        });
        $(".liRes").droppable({
            tolerance: 'pointer',
            accept: '.attImg',
            zIndex: 0,
            hoverClass: "activeDrop",
            drop: function(event, ui) {
                dropImg(ui, this);
                return false;
            }
        });

        $('.attImg').draggable({
            appendTo: 'body',
            zIndex: 100,
            helper: "clone",
            stack: "div",
			handle: '.imgTitle',
            distance: 0,
            scroll: true,
            start: function(event, ui) {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
            },
            drag: function(event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(document).scrollTop() - st;
                ui.helper.css('z-index', 1000);
            }
        });



    }

    function genTree(parent_id) {
		var link = BASE_URL + '/wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:Or><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Or></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
		// '<ogc:Filter><ogc:Or><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Or></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
		p5WFS_GetFeature('p5_default_db:CRM_PROCES', {
			'Filter': '<ogc:PropertyIsEqualTo><ogc:PropertyName>' + "PARENT_ID" + '</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo>',
			'sortBy': 'SORT_PRIO+A,ID',
			// 'ogc:Filter': '<GetFeature xmlns="http://www.opengis.net/wfs/2.0"'+
            // 	' xmlns:p5_default_db="' + BASE_WFS_URL + '/default_db"' +
	        //     ' xmlns:ogc="http://www.opengis.net/ogc"' +
	        //     ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
	        //     ' service="WFS"' +
	        //     ' version="2.0.2"' +
	        //     ' xsi:schemaLocation="http://www.opengis.net/wfs/2.0 http://schemas.opengis.net/wfs/2.0/wfs.xsd">' +
			// 	'<ogc:Filter>' +
			// 	'<ogc:PropertyIsEqualTo><ogc:PropertyName>' + "PARENT_ID" + '</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo>' +
			// 	'</ogc:Filter>' +
	        // 	'</GetFeature>'
		}).then(function (features) {
			var feature = null
			for (var i = 0, total = features.length; i < total; i++) {
				feature = features[i]
				var temp = {}
				var parentIndex = getIndexById(parent_id);
				temp["id"] = feature['ID']
				temp["desc"] = feature['DESC'] || ''
				temp["opis"] = feature['OPIS'] || ''
				temp["parent_id"] = feature['PARENT_ID'] || 0
				temp["depth"] = state[parentIndex]["depth"] + 1;
				temp["step"] = 0;
				temp["prof"] = new Array();
				temp["res"] = new Array();
				temp["goto"] = {};
				temp["goto"]["id"] = feature['IF_TRUE_GOTO'] || 0
				temp["goto"]["flag"] = feature['IF_TRUE_GOTO_FLAG'] || ''
				temp["stepDesc"] = "";
				state.splice(parentIndex + (i + 1), 0, temp)
				// var linkImg = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_IMAGE&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:And><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_ID</ogc:PropertyName><ogc:Literal>' + temp["id"] + '</ogc:Literal></ogc:PropertyIsEqualTo><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_TABLE</ogc:PropertyName><ogc:Literal>CRM_PROCES</ogc:Literal></ogc:PropertyIsEqualTo></ogc:And></ogc:Filter>';
				// $.get(linkImg, function(imgData) {
				//     var temp = Array();
				//     $.each($(imgData).find("featureMember"), function() {
				//         temp.push({
				//             "src": base64_decode($(this).find("IMAGE").text()),
				//             "title": $(this).find("NAME").text(),
				//             "id": $(this).find("ID").text(),
				//         });
				//     })
				//     state[getIndexById(temp["id"])]["img"] = temp;
				// });
				genTree(feature['ID']);
			}
		}).catch(function (e) {
			console.log('Error', e)
		})
    }

    function base64_decode(input) {
        var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = _keyStr.indexOf(input.charAt(i++));
            enc2 = _keyStr.indexOf(input.charAt(i++));
            enc3 = _keyStr.indexOf(input.charAt(i++));
            enc4 = _keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;

        while (i < output.length) {
            c = output.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = output.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = output.charCodeAt(i + 1);
                c3 = output.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
        }
        return string;
    }

    //Pierwszy render, tworzy potrzebna strukture
    function showPreview() {
        newSteps = (mainProces_id == -1) ? -1 : 0
        changes = false;
        $("#clearBtn").hide();
        lastSearch = "";
        filtr = 0;
        selectedArea = false;
        state = [];
        newRes = 0;
        deletedId = [];
        deletedRes = [];
        generatedId = [];
        if (mainProces_id == -1) {
            temp = {}
            actSite = "preview";
            loaded = false;
            temp["id"] = -1;
            temp["depth"] = 0;
            temp["parent_id"] = 0;
            temp["stepDesc"] = "";
            temp["step"] = 0;
            temp["prof"] = Array();
            temp["res"] = Array();
            temp["desc"] = "Tytuł procesu";
            temp["opis"] = "Opis procesu";
            temp["C-desc"] = true;
            temp["C-opis"] = true;
            temp["goto"] = {}
            temp["goto"]["flag"] = "";
            temp["goto"]["id"] = 0;
            state[0] = temp;
            loadResources();
        } else if (localStorage.getItem("state" + mainProces_id) !== null) {
            state = JSON.parse(localStorage.getItem("state" + mainProces_id));
            newSteps = localStorage.getItem("newStep" + mainProces_id);
            newRes = localStorage.getItem("newRes" + mainProces_id);
            deletedId = JSON.parse(localStorage.getItem("deletedId" + mainProces_id));
            deletedRes = JSON.parse(localStorage.getItem("deletedRes" + mainProces_id));
            usedImg = JSON.parse(localStorage.getItem("usedImg" + mainProces_id));
            $.notify("Wczytano niezapisany stan z " + localStorage.getItem("date" + mainProces_id), "info");
            render(state, $("#main"));
            loaded = true;
        } else {
            $("#main").html("<center>Synchronizowanie danych z serwerem.</center>");
            var id = mainProces_id;
			p5WFS_GetFeature('p5_default_db:CRM_PROCES', {
				'featureID': 'CRM_PROCES.' + id,
			}).then(function (features) {
				if (!features) throw "Nie odnaleziono rekordu id = " + id
				if (!features.length) throw "Nie odnaleziono rekordu id = " + id
				if (1 !== features.length) throw "Bład: API zwróciło za dużo rekordów"
				return features[0]
				console.log('fetched features', features)
			}).then(function (feature) {
				var temp = {};
                loaded = false;
                temp["id"] = mainProces_id;
                temp["depth"] = 0;
                temp["parent_id"] = feature["PARENT_ID"]
                temp["step"] = 0;
                temp["goto"] = {};
                temp["goto"]["id"] = feature["IF_TRUE_GOTO"]
                temp["goto"]["flag"] = feature["IF_TRUE_GOTO_FLAG"]
                temp["stepDesc"] = "";
                temp["prof"] = Array();
                temp["res"] = Array();
                temp["desc"] = feature["DESC"]
                temp["opis"] = feature["OPIS"]

                state[0] = temp;
                // var linkImg = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_IMAGE&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:And><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_ID</ogc:PropertyName><ogc:Literal>' + mainProces_id + '</ogc:Literal></ogc:PropertyIsEqualTo><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_TABLE</ogc:PropertyName><ogc:Literal>CRM_PROCES</ogc:Literal></ogc:PropertyIsEqualTo></ogc:And></ogc:Filter>';
                // $.get(linkImg, function(imgData) {
                //     var temp = Array();
                //     $.each($(imgData).find("featureMember"), function() {
                //         temp.push({
                //             "src": base64_decode($(this).find("IMAGE").text()),
                //             "title": $(this).find("NAME").text(),
                //             "id": $(this).find("ID").text(),
                //         });
                //     })
                //     state[0]["img"] = temp;
                // });
                genTree(mainProces_id);
			}).catch(function (e) {
				console.log('Error', e)
			})

            actSite = "preview";
        }
    }
});

function unloadPage() {
    if (changes)
        return "";
}

window.onbeforeunload = unloadPage;