var element = document.getElementById('wrap');
  let hideFloorLayouts = false;
  let ol_loaded = 0;
  let loa
  let imageUrl = [];
  let interactive_image = [];
  let initialMap = [];
  let view = [];
  let debug = 0;
  let page_count = 0;
  let ol_waiting = 3;
  let num_imgs_dont_wait = $('img.dont-wait').length;
  let imgs = document.images,
      images_len = imgs.length - num_imgs_dont_wait,

      images_counter = 0,
      all_waiting = ol_waiting * 1 + images_len,
      percent_step = 100 / all_waiting,
      current_percent = 0;
  console.log(images_len);
  function checkFlag() {
      loadpage();
  }

  function setMarker(map, coords) {

      if (!Array.isArray(coords)) {
          coords = coords.split(',')
      }

      if (window.mapMarker) {
          window.mapMarker.removeFrom(map);
      }
      window.mapMarker = L.marker(coords)
      window.mapMarker.addTo(map);


  }

  function loadpage() {
      let header = $('.pdf-page-header');
      let footer = $('.pdf-page-footer');
      log('высота футера:' + footer.outerHeight());
      log('высота headera:' + header.outerHeight());
      let accepted_height = 1050 - header.outerHeight() - footer.outerHeight();
      log('Доступная высота: ' + accepted_height);
      let page_height = 0;
      let div = document.createElement('div');
      let array = $('.content-block');
      let coords = "@Model.Lat, @Model.Lng";
      map = L.map('mapid').setView([51.505, -0.09], 2);

      if (coords) {
          setMarker(map, coords)
          if (!Array.isArray(coords))
              coords = coords.split(',');
          map.setView(coords, 15)

      }

      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          subdomains: ['a', 'b', 'c']
      }).addTo(map);


      array.each(function (index, element) {
          if ($(element).hasClass('break-page-if-first') && page_count == 0) {
              generatePdfPage(div);
              page_height = 0;
              div = document.createElement('div');
              return;
          }

          if ($(element).hasClass('content-block-map')) {
              var el = $(element);
          }
          else {
              var el = $(element).clone();
          }

          var el_height = $(element).outerHeight();
          if (accepted_height < el_height) {
              log('Проработать если высота элемента больше страницы');
          }
          if (page_height + el_height < accepted_height) {

              page_height += el_height;
              $(div).append(el);

              log('Элемент подходит. Высота страницы после добавления: ' + page_height);

          } else {
              if (el.hasClass('content-block-image')) {
                  log('Уменьшить изображение');
              } else if (el.hasClass('content-block-text')) {
                  let remaining_height = accepted_height - page_height;
                  log("Оставшеяся высота: " + remaining_height)
                  // get aviliable height
                  let p_element = el.find('p');
                  // log(p_element);
                  let parts = p_element.text().split(' ');
                  // log(parts);
                  let str = '';
                  while ($(element).outerHeight() > 140 && $(element).outerHeight() > remaining_height) {
                      str = parts.pop() + ' ' + str;
                      // log(str);
                      $(element).find('p').text(parts.join(' '));
                  }
                  if ($(element).outerHeight() > remaining_height) {
                      $(element).empty();
                      $(element).append(el);
                  } else {
                      log('Текст подходит для переноса');
                      page_height += $(element).outerHeight();
                      var new_el = $(element).clone();
                      $(div).append(new_el);
                      $(element).find('h3').first().remove();
                      $(element).find('p').text(str);
                      var el_height = $(element).outerHeight();
                      var el = $(element);
                  }
              }

              log('Элемент НЕ подходит.');
              log(el);
              log('Высота страницы: ' + page_height);
              log('Высота элемента: ' + el_height);

              generatePdfPage(div);

              log('Добавлен по порядку')

              page_height = 0;
              div = document.createElement('div');
              page_height += el_height;
              $(div).append(el);


          }

          if (index === array.length - 1) {
              log('Добавлен поcледним')

              generatePdfPage(div);
              page_height = 0;
              div = document.createElement('div');
          }
      })

      $('#content').remove();
      $('#temp-header').remove();

      $('#hellopreloader_preload').fadeOut();
      $('body').append('<div id="loaded"></div>')
  }

  function toTimestamp(strDate) {
      var strDateNew = strDate.replace(" ", 'T');
      var datum = Date.parse(strDateNew);
      return datum / 1000;
  }


  function initMap(imagePath, image, jsonData, target, selectId, updatedAt, count) {
      imageUrl[count] = '@Url.Content("~/uploads/projects/"+Model.ProjectId + "/")' + imagePath + '/' + image + '?updateAt=' + toTimestamp(updatedAt);
      interactive_image[count] = new Image();
      interactive_image[count].src = imageUrl[count];
      interactive_image[count].onload = function (a) {
          let featuresJSON = JSON.parse(jsonData);
          log(interactive_image);
          log(count);
          log(interactive_image[count]);
          let extent = [0, 0, interactive_image[count].width, interactive_image[count].height];
      
          let parentWidth = $(target).parent().width();

          let header = $('.pdf-page-header');
          let footer = $('.pdf-page-footer');

          let maxheight = 1000 - header.outerHeight() - footer.outerHeight();

          console.log(maxheight);
          let targetHeight = parentWidth * interactive_image[count].height / interactive_image[count].width;
          targetHeight = targetHeight * .9;
          if (targetHeight > maxheight) {
              targetHeight = maxheight;
          }
          if (targetHeight > 650) {
              targetHeight = 650;
          }
          $(target).attr('style', `width:${parentWidth}px; height:${targetHeight}px;`);
          ol_loaded++;

          let projection = new ol.proj.Projection({
              code: "xkcd-image",
              units: "pixels",
              extent: extent,
          });
          if (hideFloorLayouts && count == 0) {
          }

          let raster = new ol.layer.Image({
              source: new ol.source.ImageStatic({
                  url: imageUrl[count],
                  projection: projection,
                  imageExtent: extent,
              }),
          });
          raster.setZIndex(-1);
          let source,
              features;
          if (featuresJSON) {
              features = new ol.format.GeoJSON().readFeatures(
                  featuresJSON, {
                  dataProjection: "EPSG:4326",
                  featureProjection: "EPSG:4326",
              }
              );
              source = new ol.source.Vector({
                  features
              });
          } else {
              source = new ol.source.Vector();
          }
          function styleFunction(feature, resolution) {
              style = "";
              if (feature.values_.selected_id == selectId) {
                  style = [
                      new ol.style.Style({
                          fill: new ol.style.Fill({
                              color: stylesColor_op["blue"]
                              //   color: "rgba(0, 0, 0, 0.2)",
                          }),
                          stroke: new ol.style.Stroke({
                              color: "rgba(255, 255, 255, 1)",
                              width: 3
                          }),
                      }),
                      new ol.style.Style({
                          stroke: new ol.style.Stroke({
                              //  color: "rgba(0, 0, 0, 1)",
                              color: stylesColor["blue"],
                              width: 3
                          })
                      })
                  ]
              } else {
                  style = []
              }
              return style;
          }
          function styleFunctionLayouts(feature, resolution) {
              // console.log(feature);
              style = "";
              if (feature.values_.selected_id == selectId) {
                  style = [
                      new ol.style.Style({
                          fill: new ol.style.Fill({
                              color: stylesColor_op["layouts"]
                              //   color: "rgba(0, 0, 0, 0.2)",
                          })
                      }),

                  ]
              } else {
                  style = []
              }
              return style;
          }

          let vector
          if (hideFloorLayouts && count == 0) {
              vector = new ol.layer.Vector({
                  source: source,
                  style: styleFunctionLayouts
              });
          }
          else {
              vector = new ol.layer.Vector({
                  source: source,
                  style: styleFunction
              });
          }
          let showFullExtent = false;
          initialMap[count] = new ol.Map({
              layers: [raster, vector],
              target: document.querySelector(target),
              view: new ol.View({
                  projection: projection,
                  center: ol.extent.getCenter(extent),
                  enableRotation: false,
                  zoom: 1,
                  minZoom: 1,
                  maxZoom: 10,
                  showFullExtent: true,
                  extent: extent,
              }),
          });
          mySource = vector.getSource().getFeatures()[0];
          coordinates = ol.extent.getCenter(mySource.getGeometry().getExtent());
          view[count] = initialMap[count].getView();
          view[count].animate({
              center: coordinates,
              duration: 0,
          })
          initialMap[count].getInteractions().pop()
          var resizeEvent = new Event('resize');
          window.dispatchEvent(resizeEvent);

          initialMap[count].renderSync();

          initialMap[count].once('rendercomplete', function () {
              updateProgressBar();
          });
      }
  };



  document.addEventListener("DOMContentLoaded", () => {
      $('.price').each(function (index, element) {
          price = $(element).html();
          let localization = 'tr-TR';
          currency = 'Try';
          currency = currency.toUpperCase();
          if (currency == 'try') {
              localization = 'tr-TR';
          }
          else if (currency == 'USD') {
              localization = 'en-US';
          }
          else if (currency == 'EUR') {

              localization = 'de-DE';
          }
          else if (currency == 'try') {
              localization = 'tr-TR';
          }
          $(element).html(new Intl.NumberFormat(localization, { style: 'currency', currency: currency, currencyDisplay: 'symbol', minimumFractionDigits: 0, }).format(price));
      })


      initMap('@Model.floorinit.LayoutName', '@Model.floorinit.LayoutImage', @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.floorinit.LayoutJson.Data)), '@Model.floorinit.Target', '@Model.floorinit.UnitId', "@Model.floorinit.Date", @Model.floorinit.Count);
      initMap('@Model.sectioninit.LayoutName', '@Model.sectioninit.LayoutImage', @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.sectioninit.LayoutJson.Data)), '@Model.sectioninit.Target', '@Model.sectioninit.FloorId', "@Model.sectioninit.Date", @Model.sectioninit.Count);
      initMap('@Model.buildinginit.LayoutName', '@Model.buildinginit.LayoutImage', @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.buildinginit.LayoutJson.Data)), '@Model.buildinginit.Target', '@Model.buildinginit.SectionId', "@Model.buildinginit.Date", @Model.buildinginit.Count);


      [].forEach.call(imgs, function (img) {
          if (img.complete)
              incrementCounter();
          else
              img.addEventListener('load', incrementCounter, false);
      });

      function incrementCounter() {
          images_counter++;
          updateProgressBar();
          if (images_counter === images_len) {
              checkFlag();
          }
      }
  });

  function updateProgressBar() {
      current_percent = current_percent + percent_step;
      $('#progress-bar').width(current_percent + "%");
  }
        

  function generatePdfPage(content) {
      let div = document.createElement('div');
      $(div).addClass('pdf-page');
      let header = $('#header').clone();
      header.attr('id', '');
      let footer = $('#footer').clone();
      footer.attr('id', '');
      $(div).append(header);
      $(div).append(content);
      $(div).append(footer);
      $('#wrap').append(div);
      page_count++;
  }


  function log(s) {
      if (debug) {
          console.log(s);
      }
  }