function ajaxPost(url, data, cb_success, cb_failed) {
  var ar = new XMLHttpRequest();
  ar.cb_success = cb_success;
  ar.cb_failed = cb_failed;

  ar.addEventListener("readystatechange", ajaxPostProgress);

  ar.open("POST", url, true);

  ar.setRequestHeader("Content-Type", "application/json");
  //ar.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  ar.send(data);
  }




function ajaxPostProgress(e) {
  var request = e.target;

  var cb_success = request.cb_success;
  var cb_failed = request.cb_failed;

  switch (request.readyState) {
    case 4:
      switch (request.status) {
        case 200:
          cb_success(request.responseText);
          break;

        default:
          if (cb_failed)  cb_failed(request);
          break;
        }
      break;

    default:
      break;
    }
  }




function FormSendFailed(response_obj) {
  console.log("FormSendFailed");
  console.log(response_obj);
  putNotify(response_obj.status + " Form Send Failed", tryDecodeException(response_obj.responseText));
  }
// ---- GeoPoint for picker and viewer ----

function GeoPoint() {
  var lat_divider_32 = 23860929.41111;  // -90...+90  (2147483648 - 1) / 90 ~= 23860929,41111111
  var lon_divider_32 = 11930464.70555;  // -180...+180  (2147483648 - 1) / 180 ~= 11930464,70555556
  // lon: 1 step = 0,00000008381903  8,38e-8

  var lat = 0;
  var lon = 0;


  this.fromFrac = function(lat_frac, lon_frac) {
    lat = lat_frac;
    lon = lon_frac;
    }


  this.fromInt = function(lat_int, lon_int) {
    lat = lat_int / lat_divider_32;
    lon = lon_int / lon_divider_32;
    }



  this.getLatFrac = function() {
    return lat;
    }


  this.getLonFrac = function() {
    return lon;
    }



  this.getLatInt = function() {
    //return (int)Math.round(m_lat * lat_divider_32);
    return Math.round(lat * lat_divider_32);
    }


  this.getLonInt = function() {
    //return (int)Math.round(m_lon * lon_divider_32);
    return Math.round(lon * lon_divider_32);
    }



  this.getLatDeg = function() {
    return Math.floor(lat);
    }


  this.getLatMin = function() {
    var minutes = (lat - this.getLatDeg()) * 60;
    return Math.floor(minutes);
    }


  this.getLatSec = function() {
    var minutes = (lat - this.getLatDeg()) * 60;
    var int_minutes = Math.floor(minutes);

    var seconds = (minutes - int_minutes) * 60;
    return Math.floor(seconds);
    }



  this.getLonDeg = function() {
    return Math.floor(lon);
    }


  this.getLonMin = function() {
    var minutes = (lon - this.getLonDeg()) * 60;
    return Math.floor(minutes);
    }


  this.getLonSec = function() {
    var minutes = (lon - this.getLonDeg()) * 60;
    var int_minutes = Math.floor(minutes);

    var seconds = (minutes - int_minutes) * 60;
    return Math.floor(seconds);
    }

  }






// ---- Geo picker ----

function GeoPicker(container_id, lat_name, default_lat, lon_name, default_lon) {
  //console.log("create GeoPicker()");

  var geo_point = new GeoPoint();
  geo_point.fromInt(default_lat, default_lon);



  var div_container = document.getElementById(container_id);
  var map_container;


    // ---- lat ---- //

  var div_container_lat = document.createElement('DIV');
  div_container.appendChild(div_container_lat);


  var input_lat = document.createElement('INPUT');
  div_container_lat.appendChild(input_lat);
  input_lat.type = 'hidden';
  input_lat.name = lat_name;
  input_lat.value = geo_point.getLatInt();
  //input.style.marginRight = '6px';


  var input_lat_frac = document.createElement('INPUT');
  div_container.appendChild(input_lat_frac);
  input_lat_frac.style.width = '130px';
  input_lat_frac.addEventListener('change', updateFromFrac);
  input_lat_frac.value = geo_point.getLatFrac();


  div_container.append(' = ');


  var input_lat_deg = document.createElement('INPUT');
  div_container.appendChild(input_lat_deg);
  input_lat_deg.style.width = '20px';
  input_lat_deg.addEventListener('change', updateFromDeg);
  input_lat_deg.value = geo_point.getLatDeg();

  div_container.append('° ');
  //div_container.append('  ');

  var input_lat_min = document.createElement('INPUT');
  div_container.appendChild(input_lat_min);
  input_lat_min.style.width = '20px';
  input_lat_min.addEventListener('change', updateFromDeg);
  input_lat_min.value = geo_point.getLatMin();

  div_container.append('\' ');

  var input_lat_sec = document.createElement('INPUT');
  div_container.appendChild(input_lat_sec);
  input_lat_sec.style.width = '20px';
  input_lat_sec.addEventListener('change', updateFromDeg);
  input_lat_sec.value = geo_point.getLatSec();

  div_container.append('" ');



    // ---- lon ---- //

  var div_container_lon = document.createElement('DIV');
  div_container.appendChild(div_container_lon);


  var input_lon = document.createElement('INPUT');
  div_container.appendChild(input_lon);
  input_lon.type = 'hidden';
  input_lon.name = lon_name;
  input_lon.value = geo_point.getLonInt();


  var input_lon_frac = document.createElement('INPUT');
  div_container.appendChild(input_lon_frac);
  input_lon_frac.style.width = '130px';
  input_lon_frac.addEventListener('change', updateFromFrac);
  input_lon_frac.value = geo_point.getLonFrac();


  div_container.append(' = ');


  var input_lon_deg = document.createElement('INPUT');
  div_container.appendChild(input_lon_deg);
  input_lon_deg.style.width = '20px';
  input_lon_deg.addEventListener('change', updateFromDeg);
  input_lon_deg.value = geo_point.getLonDeg();

  div_container.append('° ');

  var input_lon_min = document.createElement('INPUT');
  div_container.appendChild(input_lon_min);
  input_lon_min.style.width = '20px';
  input_lon_min.addEventListener('change', updateFromDeg);
  input_lon_min.value = geo_point.getLonMin();

  div_container.append('\' ');

  var input_lon_sec = document.createElement('INPUT');
  div_container.appendChild(input_lon_sec);
  input_lon_sec.style.width = '20px';
  input_lon_sec.addEventListener('change', updateFromDeg);
  input_lon_sec.value = geo_point.getLonSec();

  div_container.append('" ');



    // ---- pick button ---- //

  var div_container_button = document.createElement('DIV');
  div_container.appendChild(div_container_button);


  var input_pick = document.createElement('INPUT');
  div_container_button.appendChild(input_pick);
  input_pick.type = 'button';
  input_pick.value = 'Карта';
  input_pick.addEventListener('click', openPicker);



//todo  updateFromHidden();




    // ---------------- Methods ---------------- //

  function updateFromHidden() {
    ////unpack to var lat
    //convert to FRAC
    //set var

    ////set values of inputs
    //convert to DEG
    //set deg
    }



  function updateFromFrac() {
    geo_point.fromFrac(input_lat_frac.value, input_lon_frac.value);

    //convert to INT
    //set hidden
    input_lat.value = geo_point.getLatInt();
    input_lon.value = geo_point.getLonInt();

    //convert to DEG
    //set deg
    input_lat_deg.value = geo_point.getLatDeg();
    input_lat_min.value = geo_point.getLatMin();
    input_lat_sec.value = geo_point.getLatSec();

    input_lon_deg.value = geo_point.getLonDeg();
    input_lon_min.value = geo_point.getLonMin();
    input_lon_sec.value = geo_point.getLonSec();
    }



  function updateFromDeg() {
    //convert to FRAC
    //set var

    //convert to INT
    //set hidden
    }




  function openPicker() {
    var leaflet_css = document.createElement('LINK');
    leaflet_css.rel = 'StyleSheet';
    leaflet_css.href = '/leaflet/leaflet.css';
    document.head.appendChild(leaflet_css);


    var leaflet_script = document.createElement('SCRIPT');
    leaflet_script.src = '/leaflet/leaflet.js';
    document.head.appendChild(leaflet_script);

    leaflet_script.onload = function() {
//x      //console.log("leaflet script loaded.");
      openPickerB();
      }

//x    //console.log("leaflet script load started.");
    }



  function openPickerB() {

    map_container = document.createElement('DIV');
    map_container.id = 'map';  // 1

    map_container.style.width = window.innerWidth + 'px';
    map_container.style.height = window.innerHeight + 'px';

    map_container.style.position = 'fixed';
//2    map_container.style.left = '0';
//2    map_container.style.top = '0';

//2    map_container.style.padding = '160px';

    map_container.style.left = '16px';  // 1
    map_container.style.top = '16px';  // 1
    map_container.style.width = (window.innerWidth - 32) + 'px';  // 1
    map_container.style.height = (window.innerHeight - 32) + 'px';  // 1

    map_container.style.border = '1px solid #000';  // 1

    div_container.appendChild(map_container);


//2    map_container_2 = document.createElement('DIV');
//2    map_container_2.id = 'map';
//2
//2    map_container_2.style.height = '100%';
//2
//2    map_container_2.style.margin = '16px';
//2
//2    map_container_2.style.border = '1px solid #000';
//2
//2    map_container.appendChild(map_container_2);



      // ---- close button ----

    var close_container = document.createElement('DIV');

    close_container.style.position = 'relative';
    close_container.style.cssFloat = 'right';
    close_container.style.marginRight = '8px';
    close_container.style.marginTop = '8px';
    close_container.style.zIndex = 10000;

    close_container.style.background = '#fff';

    close_container.style.cursor = 'default';

    close_container.style.width = '32px';
    close_container.style.height = '32px';

    close_container.style.border = '1px solid #000';

    close_container.style.fontSize = '16pt';
    close_container.style.textAlign = 'center';

    close_container.append('X');

    close_container.addEventListener('click', closePicker);

    map_container.appendChild(close_container);



    // ---- override 0 ----

    if (geo_point.getLatInt() == 0 && geo_point.getLonInt() == 0) {
      var lat;
      var lon;

      if (localStorage["geo_picker_lat"] != undefined) {  // && localStorage["geo_picker_lon"] != undefined
        lat = parseInt(localStorage["geo_picker_lat"]);
        lon = parseInt(localStorage["geo_picker_lon"]);
        }
      else {
        lat = 1224320876;
        lon = 452135509;
        }

      geo_point.fromInt(lat, lon);
      //updateFromHidden();
      }


    var map = L.map('map', {center: [geo_point.getLatFrac(), geo_point.getLonFrac()], zoom: 17});
//    var map = L.map('map', {center: [geo_point.getLatFrac(), geo_point.getLonFrac()], zoom: 19});

//r    map.addLayer(L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png'));
    map.addLayer(L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 19 }));
    //map.addLayer(L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

    //var marker = L.marker([51.30167, 37.85086], {title: 'hi'}).addTo(map);
    var center_marker = L.marker([default_lat, default_lon]).addTo(map);

    //marker.bindPopup("<b>Hello world!</b><br>I am a popup.");


    function moveCenterMarker() {
      var point = map.getCenter();
      center_marker.setLatLng(point);

      var geo1 = new GeoPoint();
      geo1.fromFrac(point.lat, point.lng);

      console.log("lat: " + geo1.getLatInt());
      console.log("lon: " + geo1.getLonInt());

      localStorage["geo_picker_lat"] = geo1.getLatInt();
      localStorage["geo_picker_lon"] = geo1.getLonInt();
      }

    map.on('drag', moveCenterMarker);

    moveCenterMarker();



    function updatePoint() {
      var point = map.getCenter();

      var lat_frac = Math.round(point.lat * 10000000) / 10000000;
      var lon_frac = Math.round(point.lng * 10000000) / 10000000;
      setGeoPointFrac(lat_frac, lon_frac);
      };


    map.on('dragend', updatePoint);

    //updatePoint();
    }




  function closePicker() {
    //console.log('closePicker()');
    div_container.removeChild(map_container);
    }




//x  function getLatFrac() {
//x    return lat;
//x    }


//x  function getLonFrac() {
//x    return lon;
//x    }



  function setGeoPointFrac(lat_frac, lon_frac) {
    input_lat_frac.value = lat_frac;
    input_lon_frac.value = lon_frac;

    updateFromFrac();
    }

  }






// ---- Geo view holder ----

function GeoViewHolder(reloadMarkers1, geo_view_list_id_1) {
  var holder = this;

  this.h_point_id;
  this.geo_view_map;
  this.geo_view_markers;
  this.geo_view_list_id = geo_view_list_id_1;


  this.reloadMarkers = function() {
    //console.log("this.reloadMarkers()");
    //console.log("this.h_point_id: " + holder.h_point_id);
    //console.log("this.geo_view_map: " + holder.geo_view_map);
    //console.log("this.geo_view_markers: " + holder.geo_view_markers);
    //console.log("this.geo_view_list_id: " + holder.geo_view_list_id);

    reloadMarkers1(holder);
    }


  this.show = function(lat_view, lon_view, point_id = undefined) {
    this.h_point_id = point_id;
    GeoView(lat_view, lon_view, this);
    }

  this.hide = function() {}

  }




// ---- Geo view ----

function GeoView(lat_view, lon_view, holder = undefined) {
  //console.log("GeoView()");

//x  geo_view_point_id = point_id;

  var map_container;

  var geo_point = new GeoPoint();
  geo_point.fromInt(lat_view, lon_view);


//x  var div_container = document.createElement('DIV');
//x  document.body.appendChild(div_container);

  openView();



  function openView() {
    var leaflet_css = document.createElement('LINK');
    leaflet_css.rel = 'StyleSheet';
    leaflet_css.href = '/leaflet/leaflet.css';
    document.head.appendChild(leaflet_css);



    var leaflet_script = document.createElement('SCRIPT');
    leaflet_script.src = '/leaflet/leaflet.js';
    document.head.appendChild(leaflet_script);

    leaflet_script.onload = openViewB;
    }




  function openViewB() {

    map_container = document.createElement('DIV');
    map_container.id = 'map';

    map_container.style.position = 'fixed';

    map_container.style.left = '16px';
    map_container.style.top = '16px';

    map_container.style.width = (window.innerWidth - 32) + 'px';
    map_container.style.height = (window.innerHeight - 32) + 'px';

    map_container.style.border = '1px solid #000';

    document.body.appendChild(map_container);



    var close_container = document.createElement('DIV');

    close_container.style.position = 'relative';
    close_container.style.cssFloat = 'right';
    close_container.style.marginRight = '8px';
    close_container.style.marginTop = '8px';
    close_container.style.zIndex = 10000;

    close_container.style.background = '#fff';

    close_container.style.cursor = 'default';

    close_container.style.width = '32px';
    close_container.style.height = '32px';

    close_container.style.border = '1px solid #000';

    close_container.style.fontSize = '16pt';
    close_container.style.textAlign = 'center';

    close_container.append('X');

    close_container.addEventListener('click', closeView);

    map_container.appendChild(close_container);



    var map = L.map('map', {center: [geo_point.getLatFrac(), geo_point.getLonFrac()], zoom: 17});
//x    geo_view_map = map;  // ad-hoc

    map.addLayer(L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png'));


    var myIcon = L.icon({
      iconUrl: '/leaflet/images/marker-iconr.png',
      iconRetinaUrl: '/leaflet/images/marker-iconr-2x.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowUrl: '/leaflet/images/marker-shadow.png',
      shadowRetinaUrl: '/leaflet/images/marker-shadow.png',
      shadowSize: [41, 41],
      shadowAnchor: [12, 41]
      });

    var center_marker = L.marker([lat_view, lon_view], {icon: myIcon, zIndexOffset: 1000}).addTo(map);


    var point = map.getCenter();
    center_marker.setLatLng(point);



      // ---- reload markers ----

    if (holder != undefined) {
      //console.log("put map to holder");
      holder.geo_view_map = map;

      holder.reloadMarkers();

      map.on('dragend', holder.reloadMarkers);
      map.on('zoomend', holder.reloadMarkers);
      }

    }




  function closeView() {
    document.body.removeChild(map_container);
    }

  }




// ---- reloadMarkers example

//var geo_view_markers;
//var geo_view_map;

function reloadMarkersExample(holder) {
  //console.log("reloadMarkersExample();");
  //console.log(holder);

  var geo_view_map = holder.geo_view_map;
//  var geo_view_markers = holder.geo_view_markers;
  var geo_view_list_id = holder.geo_view_list_id;
  var geo_view_point_id = holder.h_point_id;
  //console.log("geo_view_point_id: " + geo_view_point_id);
  //console.log("geo_view_markers: " + geo_view_markers);
  //console.log("geo_view_map: " + geo_view_map);

  if (holder.geo_view_markers)  geo_view_map.removeLayer(holder.geo_view_markers);
  holder.geo_view_markers = new L.FeatureGroup();


  var putMarkers = function(r, b) {
    //console.log('putMarkers()');
    //console.log(r);

    r = JSON.parse(r);

    if (r['points'] == undefined)  return;
    //console.log(r['points'].length);
    if (r['points'].length == 0)  return;

    var gp = new GeoPoint();

    for (var i in r['points']) {
      //console.log("i: " + i);
      //console.log(r['points'][i]);
      var pt = r['points'][i];
      if (pt[0] == geo_view_point_id) {
        //console.log("skipped");
        continue;
        }
      //console.log(r[i]);

      gp.fromInt(pt[1], pt[2]);

      var marker = L.marker([gp.getLatFrac(), gp.getLonFrac()], {title: pt[3]});
      holder.geo_view_markers.addLayer(marker);
      }

    //console.log("geo_view_map: " + geo_view_map);
    geo_view_map.addLayer(holder.geo_view_markers);
    }


  var bound = geo_view_map.getBounds();

  var point_tl = new GeoPoint();
  point_tl.fromFrac(bound._northEast.lat, bound._northEast.lng);
  var point_br = new GeoPoint();
  point_br.fromFrac(bound._southWest.lat, bound._southWest.lng);
  //console.log("bound._northEast.lng: " + bound._northEast.lng + ", bound._southWest.lng: " + bound._southWest.lng);

  var send_data = { list: geo_view_list_id, nlat: point_tl.getLatInt(), elon: point_tl.getLonInt(), slat: point_br.getLatInt(), wlon: point_br.getLonInt() };
  ajaxPost('/a/poi/mp/', JSON.stringify(send_data), putMarkers, FormSendFailed);  // cachedLoadFailed
  }
function PanoMap(map_id, params) {
  const deg_to_rad = Math.PI / 180;
  const _this = this;


  var div_map;
  var map;
  var layer_grave;
  var layer_pano;

  var init_lat = 51.3119;
  var init_lon = 37.8967;
  var init_zoom = 15;

  var grave_hl = 0;



  window.addEventListener("DOMContentLoaded", initPanoMap);



  function initPanoMap(e) {
    //console.log("initGraveMap()");

    div_map = document.getElementById(map_id);

    if (module == "") {
      var nav_bar_height = 0;
    } else {
      var nav_bar_height = 56;
    }

    //div_map.style.left = "16px";  // 1
    //div_map.style.top = "16px";  // 1
    div_map.style.width = (window.innerWidth - 18) + "px";
    div_map.style.height = (window.innerHeight - nav_bar_height - 18) + "px";

    div_map.style.border = "1px solid #888";


    loadLeaflet();
    }




  function loadLeaflet() {
    var leaflet_css = document.createElement("LINK");
    leaflet_css.rel = "StyleSheet";
    leaflet_css.href = "/leaflet/leaflet.css";
    document.head.appendChild(leaflet_css);


    var leaflet_script = document.createElement("SCRIPT");
    leaflet_script.src = "/leaflet/leaflet.js";
    document.head.appendChild(leaflet_script);

    leaflet_script.onload = function() {
      //console.log("leaflet loaded");
      openMap();
      }

    }




  function openMap() {
    if (params["lat"] != undefined) {
      init_lat = params["lat"];
      }

    if (params["lon"] != undefined) {
      init_lon = params["lon"];
      }

    if (params["zoom"] != undefined) {
      init_zoom = params["zoom"];
      }

//r    map = L.map(div_map, { center: [init_lat, init_lon], zoom: init_zoom, maxZoom: 21, scrollWheelZoom: "center" } );  // , zoomDelta: 0.1, zoomSnap: 0.1
    map = L.map(div_map, { center: [init_lat, init_lon], zoom: init_zoom, maxZoom: 21 } );  // , zoomDelta: 0.1, zoomSnap: 0.1

    map.addLayer(L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", { maxNativeZoom:19, maxZoom: 21 } ));
    //"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
//2    map.addLayer(L.tileLayer("https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", { maxNativeZoom:20, maxZoom: 21, subdomains:["mt0","mt1","mt2","mt3"] } ));

    //var marker = L.marker([51.30167, 37.85086], {title: "hi"}).addTo(map);
    //var center_marker = L.marker([default_lat, default_lon]).addTo(map);


    //console.log("params:" + params);
    //if (params == undefined)  return;

//x    if (params["sectors"] != undefined) {
//x      appendSectors();
//x      }

//x    if (params["graves"] != undefined) {
//x      if (params["grave"] != undefined) {
//x        grave_hl = params["grave"];
//x        }
//x
//x//1      appendGraves();
//x      appendGraves(params["graves"]);
//x      }


    //console.log("par upd: " + params["update"]);
    if (params["update"] != undefined) {
//      map.on("dragend", params["update"](_this));
      params["update"].setMap(_this);
//      map.on("dragend", params["update"].reload);
//      map.on("move", function(){console.log("move")});
      map.on("moveend", params["update"].reload);
//      map.on("zoom", params["update"].reload);
      params["update"].reload();  // initial reaload
      }

    }




  // ---- append sectors' markers ----------------

//x  function appendSectors() {
//x    var array_sectors = params["sectors"];
//x
//x    for (var i = 0; i < array_sectors.length; i++) {
//x      //console.log("i: " + i);
//x      var sector = array_sectors[i];
//x
//x      appendSector(sector);
//x      }
//x    }




//x  function appendSector(sector) {
//x    var sector_id = sector[0];
//x    var int_lat = sector[1];
//x    var int_lon = sector[2];
//x    //var desc = sector[3];
//x    //var note = sector[...];
//x
//x
//x    var gp = new GeoPoint();
//x    gp.fromInt(int_lat, int_lon);
//x
//x    var lat = gp.getLatFrac();
//x    var lon = gp.getLonFrac();
//x
//x
//x    var marker = L.marker([lat, lon]).addTo(map);
//x    marker.sector_id = sector_id;
//x
//x
//x    marker.on("click", function(e) {
//x      //console.log(e);
//x      //console.log(e.target.custom_var);
//x      window.location = "/grave/vs/?id=" + e.target.sector_id;
//x      } );
//x    }




  // ---- append graves ----------------

  this.updateGraves1 = function(aw) {
    if (aw["pano"] != undefined) {
      appendPanos(aw["pano"]);
      }
    };



/*
  function appendGraves(array_grave, is_sector = false) {
    //if (array_grave == undefined)  return;
    console.log("graves count: " + array_grave.length);

    if (layer_grave != undefined) {
      layer_grave.clearLayers();
      }
    else {
      layer_grave = L.layerGroup().addTo(map);
      }


    //for (var i in array_grave) {
    for (var i = 0; i < array_grave.length; i++) {
      //console.log("i: " + i);
      var grave = array_grave[i];

      appendGrave(grave, is_sector);
      //break;
      }

    }




  function appendGrave(grave, is_sector) {
    var grave_id = 0;
    var sector_id = 0;
    var int_lat = 0;
    var int_lon = 0;
    var width = 0;
    var height = 0;
    var angle = 0;
    var fence = 0;
    //var care = 0;
    //var note = 0;
    var array_deceased = [];


    if (!is_sector) {
      grave_id = grave[0];
      int_lat = grave[1];
      int_lon = grave[2];
      width = grave[3];
      height = grave[4];
      angle = grave[5];
      fence = grave[6];
      //var care = grave[7];
      //var note = grave[7];
      array_deceased = grave[7];
      }

    else {
      grave_id = grave[0];
      sector_id = grave[1];
      int_lat = grave[2];
      int_lon = grave[3];
      width = grave[4];
      height = grave[5];
      angle = grave[6];
      fence = grave[7];
      array_deceased = grave[8];
      }

    // lame offset
    int_lat += 400;
    int_lon += 200;


    var gp = new GeoPoint();
    gp.fromInt(int_lat, int_lon);

    var lat = gp.getLatFrac();
    var lon = gp.getLonFrac();

    var offsets = transformRotate(width, height, angle);

    //var latlngs = [[lat - 0.00002, lon - 0.00002], [lat + 0.00002, lon - 0.00002], [lat + 0.00002, lon + 0.00002], [lat - 0.00002, lon + 0.00002]];
    //lat - y, lon - x
    var latlngs = [
      [lat + offsets[0][1], lon + offsets[0][0]],
      [lat + offsets[1][1], lon + offsets[1][0]],
      [lat + offsets[2][1], lon + offsets[2][0]],
      [lat + offsets[3][1], lon + offsets[3][0]]];


    var attrs = {
      //stroke: true,
      color: "#000",
      weight: 1,
      opacity: 0.8,
      //lineCap: "round",
      //lineJoin: "round",
      //dashArray: ""
      //dashOffset: ""
      //fill: true,
      //fillColor: "",
      //fillOpacity: 0.2,
      //fillRule: "evenodd",
      //bubblingMouseEvents: true
      //renderer: Renderer,
      //className: svg
//      alt: "popup",
      };

    if (grave_hl == grave_id) {
      attrs.color = "#f00";
      //attrs.color = "#ff0";
      //attrs.fillColor = "";
      attrs.fillOpacity = 0.4;
      }

    if (array_deceased == undefined) {
      attrs.color = "#808";
      }

    if (fence == 0) {
      attrs.stroke = false;
      }

    if (map.getZoom() < 18) {
      attrs.stroke = false;
      }

    else if (map.getZoom() < 19) {  // 18
      //console.log("zoom: 18");
      attrs.weight = 0.5;
      }


//1    var polygon = L.polygon(latlngs, attrs).addTo(map);
    var polygon = L.polygon(latlngs, attrs);
//todo  if (holder.geo_view_markers)  geo_view_map.removeLayer(holder.geo_view_markers);
//todo  holder.geo_view_markers = new L.FeatureGroup();
//      var marker = L.marker([gp.getLatFrac(), gp.getLonFrac()], {title: pt[3]});
//      holder.geo_view_markers.addLayer(marker);
    layer_grave.addLayer(polygon);




//v1    polygon.bindTooltip("id: " + grave_id + ", " + note);

    if (array_deceased != undefined && array_deceased.length > 0) {
      var stra = "";

      for (var i = 0; i < array_deceased.length; i++) {
        var deceased = array_deceased[i];
        var str = deceased[0] + ", " + deceased[1] + " – " + deceased[2];

        if (i > 0)  stra += "<br>";

        stra += str;
        }

      polygon.bindTooltip(stra);
      }



    if (map.getZoom() >= 19) {
      polygon.grave_id = grave_id;

      polygon.on("click", function(e) {
        window.location = "/grave/v/?id=" + e.target.grave_id;
        } );
      }
    else if (map.getZoom() >= 16) {
      polygon.sector_id = sector_id;

      polygon.on("click", function(e) {
        window.location = "/grave/vs/?id=" + e.target.sector_id;
//        window.location = "/grave/vs/?gid=" + e.target.grave_id;
        } );
      }


    }  // append grave




  function transformRotate(width, height, angle) {
    // defaults
    if (width == 0 || height == 0) {
      width = 3000;
      height = 2500;
      }

    var Q;
    if (angle == 0) {
      //Q = 0;
      //Q = 0.89;  // кв46  // 51 * PI / 180
      //Q = 0.99;  // кв58
      Q = 0.93;  // кв47
      }
    else {
      var deg = angle / 65536 * 360;
      Q = deg * deg_to_rad;
      }


    var half_width = width / 2;
    var half_height = height / 2;

    var src = [
      [-half_width, +half_height],
      [+half_width, +half_height],
      [+half_width, -half_height],
      [-half_width, -half_height],
      ];



    var matrix = [
      [[+Math.cos(Q)], [-Math.sin(Q)]],
      [[+Math.sin(Q)], [+Math.cos(Q)]],
      ];

    var dst = [];

    for (var i = 0; i < src.length; i++) {
      var src_p = src[i];
      var dst_x = src_p[0] * matrix[0][0] + src_p[1] * matrix[0][1];
      var dst_y = src_p[0] * matrix[1][0] + src_p[1] * matrix[1][1];
      dst.push([dst_x, dst_y]);
      }

    var scl = [];

    for (var i = 0; i < dst.length; i++) {
      var dst_p = dst[i];
//1      var scl_x = dst_p[0] * 0.0000000160;   // x
//1      var scl_y = dst_p[1] * 0.0000000099; // y
//      var scl_y = dst_p[1] * 0.0000000096; // y

      var scl_x = dst_p[0] * 0.0000000152;   // x
      var scl_y = dst_p[1] * 0.0000000094; // y

      scl.push([scl_x, scl_y]);
      }


    return scl;
    }  // transform rotate
*/



  this.getMap = function() {
    return map;
    };




  function appendPanos(array_pano) {
    //console.log("pano count: " + array_pano.length);

    if (layer_pano != undefined) {
      layer_pano.clearLayers();
      }
    else {
      layer_pano = L.layerGroup().addTo(map);
      }


    for (var i = 0; i < array_pano.length; i++) {
      //console.log("i: " + i);
      var pano = array_pano[i];

      appendPano(pano);
      //break;
      }

    }




  function appendPano(pano) {
    var pano_id = 0;
    var pano_desc = 0;
//    var pano_path = 0;
    var int_lat = 0;
    var int_lon = 0;


    pano_id = pano[0];
//    pano_path = pano[2];
    int_lat = pano[1];
    int_lon = pano[2];
    pano_desc = pano[3];


    var gp = new GeoPoint();
    gp.fromInt(int_lat, int_lon);

    var lat = gp.getLatFrac();
    var lon = gp.getLonFrac();


    var icon_360 = L.icon({
      iconUrl: '/leaflet/images/360.png',
//      iconRetinaUrl: '/leaflet/images/marker-iconr-2x.png',
//r      iconSize: [16, 16],
      iconSize: [24, 24],
//      iconAnchor: [12, 16],
//      popupAnchor: [1, -34],
//      shadowUrl: '/leaflet/images/marker-shadow.png',
//      shadowRetinaUrl: '/leaflet/images/marker-shadow.png',
//      shadowSize: [41, 41],
//      shadowAnchor: [12, 41]
      });

//todo  if (holder.geo_view_markers)  geo_view_map.removeLayer(holder.geo_view_markers);
//todo  holder.geo_view_markers = new L.FeatureGroup();
    var marker = L.marker([lat, lon], { icon: icon_360 });  // title: "some title"
//      holder.geo_view_markers.addLayer(marker);
    layer_pano.addLayer(marker);

//    var marker_test = L.marker([lat, lon], {});  // title: "some title"
//    layer_pano.addLayer(marker_test);


//    marker.bindTooltip("some tooltip");


    marker.pano_id = pano_id;

    marker.on("click", function(e) {
      if (module == "") {
        window.location = "/p/?id=" + e.target.pano_id;
        }
      else {
        window.location = "/" + module + "/vp/?id=" + e.target.pano_id;
        }
      } );


    }  // append pano



  }
function PanoUpdate() {
  //console.log("GraveUpdate()");

  var grave_map;
  var map;

  this.setMap = function(grave_map1) {
    //console.log("GraveUpdate(). grave_map: " + grave_map1);
    //console.log(grave_map1);
    grave_map = grave_map1;
    map = grave_map1.getMap();
    //console.log("GraveUpdate(). map: " + map);
    }



  this.reload = function() {
    //console.log("GraveUpdate(). reload");
    //console.log("map: " + map);
    if (map == undefined)  return;

    var bound = map.getBounds();

    var point_tl = new GeoPoint();
    point_tl.fromFrac(bound._northEast.lat, bound._northEast.lng);
    var point_br = new GeoPoint();
    point_br.fromFrac(bound._southWest.lat, bound._southWest.lng);
    //console.log("bound._northEast.lng: " + bound._northEast.lng + ", bound._southWest.lng: " + bound._southWest.lng);


    var send_data = {
//      list: geo_view_list_id,
      z: map.getZoom(),
      n: point_tl.getLatInt(),
      e: point_tl.getLonInt(),
      s: point_br.getLatInt(),
      w: point_br.getLonInt()
      };

    ajaxPost("/a/" + module + "/p/", JSON.stringify(send_data), putOnMap, FormSendFailed);  // cachedLoadFailed


    //function putOnMap(r, b) {
    function putOnMap(r) {
      //console.log("putOnMap()");
      //console.log(r);

      var aw = JSON.parse(r);

//1      if (aw["graves"] == undefined)  return;
//      //console.log(r['points'].length);
//      if (aw['points'].length == 0)  return;

  //    var gp = new GeoPoint();
  //
  //    for (var i in aw['points']) {
  //      //console.log("i: " + i);
  //      //console.log(r['points'][i]);
  //      var pt = aw['points'][i];
  //      if (pt[0] == geo_view_point_id) {
  //        //console.log("skipped");
  //        continue;
  //        }
  //      //console.log(r[i]);
  //
  //      gp.fromInt(pt[1], pt[2]);
  //
  //      var marker = L.marker([gp.getLatFrac(), gp.getLonFrac()], {title: pt[3]});
  //      holder.geo_view_markers.addLayer(marker);
  //      }
  //
  //    //console.log("geo_view_map: " + geo_view_map);
  //    geo_view_map.addLayer(holder.geo_view_markers);
  //    }

//1      grave_map.updateGraves1(aw["graves"]);
      grave_map.updateGraves1(aw);
      }
    }


  }