se/SE/static/procesEditor.js

var changes = false;

$(document).ready(function() {
    function cData(text){
      var nowy = "<![CDATA[";
      nowy += text;
      nowy += "]]>"
      return nowy;
    }

    $("#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 tab = new Array(); //tablica kolejnosci
    //var mainProces_id = 1; //id procesu glownego. Potem bedzie przypisywane z linku
    var actSite = "none";
    showPreview();
    var filtr = 0;
    var selectedArea = false;
    var sZasoby;
    var sProcesy;
    var lastSearch = "";
    var newSteps = 0;
    var newRes = 0;

    $(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 loadResources() {
        $("#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"];
                      var newId = state[getIndexById(id)][type].push(temp) - 1;
                      // console.log(newId);
                      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>' +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>';

                                //console.log(linkImg);
                                $.get(linkImg, function(imgData) {
                                    //console.log(imgData);
                                    var temp = Array();
                                    $.each($(imgData).find("featureMember"), function(){
                                      //console.log($(this).find("IMAGE").text());
                                      temp.push({"src": $(this).find("IMAGE").text(), "title": $(this).find("NAME").text(),"id": $(this).find("ID").text(),} );
                                    })
                                    console.log("P:", temp);
                                    state[getIndexById(id)][type][newId]["img"] = temp;
                                    $("#main").html("<center>Generowanie widoku.</center>");
                                    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;
    };

    $(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() {
            swal({
                title: 'Export',
                text: 'Zapisz zawartość pola poniżej:',
                inputValue: JSON.stringify(crc),
                inputClass: 'export',
                input: 'textarea',
            })
        }, 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");
                    }
                })
            }
        })
    })

    $(document).on('click', '#saveBtn', function() {
        $("#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 (e["parent_id"] != false) {
                        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) {
                    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) {
                    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) {
                    //console.log(value);
                    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() == "") {
                            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', '.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["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")) {
                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"
                        });
                    }
                });
            });
        }
    });

    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"
                });
            });
        });
    }

    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"
            });
            $(".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"
            });
            $(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"
            });
        });
    }

    $(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"
            });
            $(parent).find(".glyphicon").addClass("glyphicon-triangle-right");
            $(parent).find(".glyphicon").removeClass("glyphicon-refresh");
            $("#ulcon").scrollLeft(depth * 290 + 290);
            $("#ulcon").scrollTop(0);
        });
    });

    $(document).on('change', '#inp', function() {
        if (this.files && this.files[0]) {
            var link = BASE_URL + "wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003";
            var name = this.files[0].name;
            var size = this.files[0].size;
            var type = this.files[0].type;
            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 = this.width;
                    var height = this.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( this.files[0] );
        }
    });

    function photos() {
        var side = $("#side");
        $(side).empty();
        var form = `
          <h4>Wrzuć pliki do swojego schowka</h4>
          <input id="inp" type='file'>
          <h4>Pliki w schowku</h4>`;
        $(side).append(form);
        var schowek = '<ul class="list-group" id=clipboard>';
        schowek += '</ul>';
        $(side).append(schowek);
        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"){
                  list += "<div class=attImg data-id="+$(this).find("ID").text()+"><div class=remImg>X</div><img src='" + $(this).find("IMAGE").text() +
                      "' / width=150><div class=imgTitle>"+$(this).find("NAME").text()+"</div></div>"
                  }
            });
            $("#clipboard").append(list);
            $('.attImg').draggable({
                appendTo: 'body',
                //revert: true,
                zIndex: 100,
                helper: "clone",
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
        });
        schowek += '<li class="list-group-item">';
        schowek += 'Twoje zdjęcia w schowku';
        schowek += '</li>';
    }

    function zasoby() {
        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=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"
            });
        });
        //$(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 dropImg(ui, target) {
      var id = $(target).closest(".drop").data("id");
      var idBefore = $(ui.draggable).closest(".drop").data("id");
      var type = "CRM_PROCES";
      var typeName = "proces";
      if($(target).closest(".professions").length){
        var type = "CRM_WSKAZNIK";
        var typeName = "prof";
      }else if($(target).closest(".resources").length){
        var type = "CRM_WSKAZNIK";
        var typeName = "res";
      }
      var typeNameBefore = "proces";
      if($(ui.draggable).closest(".professions").length){
        var typeNameBefore = "prof";
      }else if($(ui.draggable).closest(".resources").length){
        var typeNameBefore = "res";
      }
      var temp = {};

      //alert(idBefore);

      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"};
      //console.log("x",usedImg);
      //console.log(usedImg);
      if(typeName != "proces" && typeof state[getIndexById(id)][typeName][[getResById(getIndexById(id), $(target).closest("li").data("id"), typeName)]]["img"] == "undefined"){
        //console.log(getResById(getIndexById(id), $(target).closest("li").data("id"), typeName));
        //console.log($(target).closest("li").data("id"));
        //console.log(state);
        state[getIndexById(id)][typeName][getResById(getIndexById(id), $(target).closest("li").data("id"), typeName)]["img"] = Array();
      }else if(typeName == "proces" && typeof state[getIndexById(id)]["img"] == "undefined"){
        state[getIndexById(id)]["img"] = Array();
      }
      console.log(typeNameBefore);
      if(typeof idBefore != "undefined")
        if(typeNameBefore == "proces"){
          removeImg(state[getIndexById(idBefore)]["img"], temp["id"]);
        }else{
          console.log(state[getIndexById(idBefore)][typeName][getResById(getIndexById(id), $(ui.draggable).closest("li").data("id"), typeName)]["img"]);
          removeImg(state[getIndexById(idBefore)][typeName][getResById(getIndexById(id), $(ui.draggable).closest("li").data("id"), typeName)]["img"], temp["id"]);
        }

      if(typeName == "proces")
        state[getIndexById(id)]["img"].push(temp);
      else {
        state[getIndexById(id)][typeName][getResById(getIndexById(id), $(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;
            }
            if (checkParentNode(e["id"], "right") === false) {
                $(this).find(".rArrow").hide();
            } else {
                $(this).find(".rArrow").show();
            }
            if (checkParentNode(e["id"], "left") === false) {
                $(this).find(".lArrow").hide();
            } else {
                $(this).find(".lArrow").show();
            }
            if (i == 1)
                $(this).find(".uArrow").hide();
            else
                $(this).find(".uArrow").show();
            if (i == state.length - 1) {
                $(this).find(".dArrow").hide();
            } else {
                $(this).find(".dArrow").show();
            }
        });
        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) {
        var result = state.length - 1;
        $.each(state, function(i, e) {
            if (e["id"] == id) {
                result = i;
                return false;
            }
        });
        return result;
    }

    /*function logState() {
        $.each(state, function(i, e) {

        });
    }*/

    //  $(".remImg").on('click', function () {
    //     console.log("del");
    //     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 = "<div class=attImg data-id='"+eImg["id"]+"'><img src='" + eImg["src"] + "' / width=150><div class=remImg>X</div><div class='imgTitle'>"+eImg["title"]+"</div></div>";
                    result += img;
                })
            }

            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>";
                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 = "<div class=attImg data-id='"+eImg["id"]+"'><div class=remImg>X</div><img src='" + eImg["src"] + "' / width=150><div class='imgTitle'>"+eImg["title"]+"</div></div>";
                        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["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>";
                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 = "<div class=attImg data-id='"+eImg["id"]+"'><div class=remImg>X</div><img src='" + eImg["src"] +
                        "' / width=150><div class='imgTitle'>"+eImg["title"]+"</div></div>";
                    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"
        });
        $(".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',
            zIndex: 0,
            hoverClass: "activeDrop",
            drop: function(event, ui) {
                dropImg(ui, this);
                //addProces(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',
            //revert: true,
            zIndex: 100,
            helper: "clone",
            stack: "div",
            distance: 0,
            cursor: "copy",
        });



    }

    function genTree(parent_id) {
        //logState();
        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';
        $.ajax({
            url: link,
            success: function(data) {
                var i = 0;
                $.each($(data).find("featureMember"), function() {
                    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>' + $(this).find("ID").text() + '</ogc:Literal></ogc:PropertyIsEqualTo><ogc:PropertyIsEqualTo><ogc:PropertyName>REMOTE_TABLE</ogc:PropertyName><ogc:Literal>CRM_PROCES</ogc:Literal></ogc:PropertyIsEqualTo></ogc:And></ogc:Filter>';
                    //console.log(linkImg);
                    $.get(linkImg, function(imgData) {
                        //console.log(imgData);
                    });
                    var temp = {};
                    if ($(this).find("ID").text() == "0")
                        return;
                    var parentIndex = getIndexById(parent_id);
                    temp["id"] = $(this).find("ID").text();
                    temp["desc"] = $(this).find("DESC").text();
                    temp["opis"] = $(this).find("OPIS").text();
                    temp["parent_id"] = $(this).find("PARENT_ID").text();
                    temp["depth"] = state[parentIndex]["depth"] + 1;
                    temp["step"] = 0;
                    temp["changes"] = {};
                    temp["prof"] = new Array();
                    temp["res"] = new Array();
                    temp["goto"] = {};
                    temp["goto"]["id"] = $(this).find("IF_TRUE_GOTO").text();
                    temp["goto"]["flag"] = $(this).find("IF_TRUE_GOTO_FLAG").text();
                    temp["stepDesc"] = "";
                    i++;
                    state.splice(parentIndex + i, 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>';
                    //console.log(linkImg);
                    $.get(linkImg, function(imgData) {
                        var temp = Array();
                        $.each($(imgData).find("featureMember"), function(){
                          //console.log($(this).find("IMAGE").text());
                          temp.push({"src": $(this).find("IMAGE").text(), "title": $(this).find("NAME").text(),"id": $(this).find("ID").text(),} );
                        })
                        state[getIndexById(temp["id"])]["img"] = temp;
                    });
                    genTree($(this).find("ID").text());
                });
            }
        });
    }

    //Pierwszy render, tworzy potrzebna strukture
    function showPreview() {
        changes = false;
        $("#clearBtn").hide();
        lastSearch = "";
        filtr = 0;
        selectedArea = false;
        state = [];
        newSteps = 0;
        newRes = 0;
        deletedId = [];
        deletedRes = [];
        generatedId = [];
        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;
            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>ID</ogc:PropertyName><ogc:Literal>' + id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Or></ogc:Filter>';
            $.get(link, function(data) {
                var temp = {};
                loaded = false;
                temp["id"] = mainProces_id;
                temp["depth"] = 0;
                temp["parent_id"] = false;
                temp["step"] = 0;
                temp["goto"] = {};
                temp["goto"]["id"] = $(data).find("featureMember").find("IF_TRUE_GOTO").text();
                temp["goto"]["flag"] = $(data).find("featureMember").find("IF_TRUE_GOTO_FLAG").text();
                temp["changes"] = {};
                temp["stepDesc"] = "";
                temp["prof"] = new Array();
                temp["res"] = new Array();
                temp["desc"] = $(data).find("featureMember").find("DESC").text();
                temp["opis"] = $(data).find("featureMember").find("OPIS").text()
                tab.push(mainProces_id);
                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>';
                //console.log(linkImg);
                $.get(linkImg, function(imgData) {
                    var temp = Array();
                    $.each($(imgData).find("featureMember"), function(){
                      //console.log($(this).find("IMAGE").text());
                      temp.push({"src": $(this).find("IMAGE").text(), "title": $(this).find("NAME").text(),"id": $(this).find("ID").text(),} );
                    })
                    state[0]["img"] = temp;
                });
                genTree(mainProces_id);
            });
            actSite = "preview";
        }
    }
});

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

window.onbeforeunload = unloadPage;