(function ($) {

  /* let debug = 1;
   let logger = function (...args) { if (debug == 1) logger(...args || "") };*/

  let open = false
  let settings = {}
  let defaults = {
    viewType: 'inline',
    spots: '',
    name: '',
    size: 'fit',
    legend: false,
    legendSpots: false,
    redline: false,
    canResize: false,
    tearWindow: false,
    target: { x: 0, y: 0, show: false },
    shawAllRefs: false,
    url: '',
    basicWidth: 0,
    basicHeight: 0,
    type: 'vector',
    viewBox: 'viewBox="0 0 0 0"',
    ready: undefined,
    rColor: '#ff0000',
    rWidth: 1,
    tColor: '#333333',
    tWidth: 1,
    hColor: '#ff0000',
    hWidth: 1,
    firstClick: true
  }

  var dmclangcodeicn = document.documentURI;
  var lablelegend;
  var lablehots;
  var labelnext;
  var labelprev;
  var lablefullscreen;
  var lablehome;

  dmclangcodeicn = dmclangcodeicn.substr(-10, 2);

  switch (dmclangcodeicn) {
    case 'en':
      lablehots = 'Hotspots';
      labelnext = 'Next';
      labelprev = 'Previous';
      lablefullscreen = 'Fullscreen';
      lablehome = 'Home';
      lablelegend = 'Hide legend';
      break;
    case 'ru':
      lablehots = 'Хотспоты';
      labelnext = 'Вперед';
      labelprev = 'Назад';
      lablefullscreen = 'Полный экран';
      lablehome = 'Домой';
      lablelegend = 'Скрыть легенду';
      break;
      case 'es':
        lablehots = 'Puntos calientes';
        labelnext = 'Adelante';
        labelprev = 'De regreso';
        lablefullscreen = 'Pantalla completa';
        lablehome = 'Casa';
        lablelegend = 'Ocultar leyenda';
        break; 
  }

  var methods = {
    init: function (options) {
      //logger(options);
      return this.each(function () {
        var $this = $(this);//$this можно передавать глобальным функциям
        // //console.log($this[0]);
        data = $($this).children('img+.S1000Dhotspots').attr('src');
        // Если плагин ещё не проинициализирован
        if (!data && $($this).find('.imagePlayer').length == 0) {
          settings = '';
          //settings = options;
          settings = $.extend({}, defaults, options);//расширяем стандартные настройки плагина

          var CookieSettings = Cookies.getJSON('imagePlayerSettings');

          if (CookieSettings != undefined) {
            settings = $.extend({}, settings, CookieSettings);
          }
          //Cookies.getJSON('name');
          //methods.saveSettings($this, settings);
          //logger('START settings', defaults, options, settings);
          //logger(settings);
          //logger(settings.legendSpots);

          $($this).children('img,svg').hide();

          $($this).append(methods.create($(this), settings));//функция локальна, можно и просто $(this)

          methods.saveSettings($($this), settings);

          var img = new Image();
          img.src = settings.url;
          $($this).find('.imagePlayerImg .mainImg').append(img);
          //$($this).find('.imagePlayerImg img');//.addClass('mainImg');

          img.addEventListener('load', function () {
            if (this.naturalWidth != undefined && this.naturalWidth != 0 && this.naturalHeight != undefined && this.naturalHeight != 0) {
              //logger('HAVE NW & NH', this.naturalWidth, this.naturalHeight);
              //methods.saveSettings($($this), settings);

              methods.startActions($this, settings, false);

              //methods.canvasRender($($this), $($this).find("canvas")[0], settings);

              // $($this).find('.imagePlayerImg').append(this);
              // $($this).find('.imagePlayerImg img').addClass('mainImg');
            }

            else {
              //logger('NO NW & NH');
              //если браузер не определил высоту и ширину картинки, надо сделать это за него
              //methods.saveSettings($($this), settings);

              methods.startActions($this, settings, true);
            }
          });
          //события на элементы управления
          //кнопки вперед и назад

          //var elentList = methods.eventsList($($(this).find(".imagePlayerHotspots")[0]));
          //logger('elentList',$($(this).find(".imagePlayerHotspots")[0]),elentList);

          if ($(this).parent().find('.S1000Dfiguregraphic').length > 1) {
            $(this).on('click', ".imagePlayerNext", function (e) { methods.showNextPlayer($this, e); });
            $(this).on('click', ".imagePlayerPrev", function (e) { methods.showPrevPlayer($this, e); });
          }
          else {
            $(this).find('.imagePlayerNext, .imagePlayerPrev').hide();
          }

          //полный экран
          //open
          if (!$($this).hasClass('init')) {
            $(this).on('click', ".imagePlayerFullscreen", function (e) { open = true, methods.fullScreen($this, e); });
          }
          //close
          if ($(this).hasClass('fullScreen')) {
            $(this).on('click', ".imagePlayerFullscreen", function (e) { methods.fullScreen($this, e); });
          }

          //все хоты
          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            // //console.log($this[0]);
            $(this).on('click', ".imagePlayerHotspots", function (e) {
              methods.redrawAllRefs($this, $($this).find(".imagePlayer .imagePlayerImg")[0], e);
              $(e.target).toggleClass('active');
            });
          }
          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
            $(this).on('click', ".imagePlayerHotspots", function (e) {
              methods.redrawAllRefs($this, $($this).find(".imagePlayer .imagePlayerImg")[0], e);
              $(e.target).toggleClass('active');
            });
          }

          //рестарт плеера
          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            logger('reinit');
            $(this).on('click', ".resetPlayer", function (e) { methods.reinit($this, e); });
          }

          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
            $(this).on('click', ".resetPlayer", function (e) {
              if ($(".imagePlayerSettingsButton.imagePlayerHotspots.active")) {
                $(".imagePlayerSettingsButton.imagePlayerHotspots.active").removeClass('active')
              }
              if ($('.imagePlayerSettingsButton.imagePlayerTarget.active')) {
                $(".imagePlayerSettingsButton.imagePlayerTarget.active").removeClass('active')
              }
              if ($('.imagePlayerSettingsButton.imagePlayerTear.active')) {
                $('.imagePlayerMapCanvas').css({ 'display': 'none' })
                $(".imagePlayerSettingsButton.imagePlayerTear.active").removeClass('active')
              }
              if ($('.imagePlayerSettingsButton.imagePlayerDrawer.active')) {
                $(".imagePlayerSettingsButton.imagePlayerDrawer.active").removeClass('active')
              }

              methods.reinit($this, e); methods.startActions($this, settings, true);
            });
          }

          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            if (settings.legend != false) {
              $(this).parent().on('click', ".S1000DIntRefHotspot", function (e) {
                if ($($this).css('display') == 'block') {
                  methods.RefClick($this, e);
                }
              });
              //$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
            }
          }

          // открылся экран
          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
            logger('thiscl', $this);
            logger(' $(this).parent()', $(this).parent());
            $(this).parent().on('click', ".S1000DIntRefHotspot", function (e) { logger('cl64'); methods.RefClick($this, e); });
          }

          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
            $(this).parent().on('click', ".S1000DIntRefHotspot", function (e) { logger('cl5'); methods.RefClick($this, e); });
            //$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
          }

          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            logger('cl2');
            if (settings.legend != false) {
              //$(this).parent().next().next('.S1000DrandomList').html('');
              $(this).parent().on('click', ".S1000DHotspot", function (e) {
                if ($($this).css('display') == 'block') {
                  methods.HRefClick($this, e);
                }
              });
              //$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
            }
          }
          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull') && $($this).css('display') == 'block') {
            if (settings.legend != false) {
              //$(this).parent().next().next('.S1000DrandomList').html('');
              $(this).parent().on('click', ".S1000DHotspot", function (e) { logger('cl644'); methods.HRefClick($this, e); });
              //$(this).parent().next().next('.S1000DrandomList').find('a.S1000DIntRefHotspot')
            }
          }

          //проверка на хот по наведению
          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            if (settings.legend != false) {
              $($this).on('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverSetOnmove($($this), $($this).find("canvas")[0], settings, e); });
              $($this).on('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverUnsetOnmove($($this), $($this).find("canvas")[0], settings, e); });
            }
          }
          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
            if (settings.legend != false) {
              $($this).on('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverSetOnmove($($this), $($this).find("canvas")[0], settings, e); });
              $($this).on('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHoverUnsetOnmove($($this), $($this).find("canvas")[0], settings, e); });
            }
          }

          if (!$($this).hasClass('init') && !$($this).hasClass('initFull')) {
            //проверка на наличие хота под курсором по клику
            //first click: если это первое нажатие - выделение происходит
            $($this).on('mousedown', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
              if (settings.legend != false || settings.firstClick === true) {
                methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
              }
              if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
                settings.firstClick = true
                methods.panClick($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
              }
            });
            if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
              $($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
                methods.pan($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
                settings.firstClick = false
              });
            }

            $($this).closest('.popupWindowFull').on('mouseup', function (e) {
              settings.firstClick = false
              methods.stopPan($($this), ".imagePlayer canvas.imagePlayerCanvas", e);
              methods.stopDraw($($this), $($this).find("canvas")[1], e);
            });

            //logger('DAS ELEMENT!', $(".imagePlayer canvas.imagePlayerCanvas"));

            if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {

              //панорамирование
              $($this).on('wheel', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.resize($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e); });

              //рисовалка
              $(this).on('click', ".imagePlayerDrawer", function (e) {
                methods.drawOnScreen($this, $($this).find("canvas")[1], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (e) {
                methods.startDraw($($this), $($this).find("canvas")[1], e);
              });
              $($this).on('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (ev) {
                methods.drawingLine($($this), $($this).find("canvas")[1], ev);
              });

              //таргет
              $(this).on('click', ".imagePlayerTarget", function (e) {
                methods.targetOnScreen($this, $($this).find("canvas")[2], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", function (e) {
                methods.setTarget($($this), $($this).find("canvas")[2], e);
              });

              //миникарта
              $(this).on('click', ".imagePlayerTear", function (e) {
                methods.clickToggleMap($this, $($this).find(".imagePlayerMapCanvas")[0], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerMapCanvas", function (e) {
                //methods.setTarget($($this), $($this).find("canvas")[3], e);
              });

              //показать или спрятать легенду
              if (!$($this).hasClass('initFull')) {
                $(this).on('click', ".imagePlayerLegend", function (e) {
                  methods.switchLegend($this, e);
                  $(e.target).toggleClass('active');
                });
              }
            }
          }
          if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
            //проверка на наличие хота под курсором по клику
            $($this).on('mousedown', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
              if (settings.legend != false) {
                methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
              }
              if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
                logger('find2');
                methods.panClick($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
              }
            });
            if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
              $($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) {
                methods.pan($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e);
              });
            }

            $($this).closest('.popupWindowFull').on('mouseup', function (e) {
              logger('find4');
              methods.stopPan($($this), ".imagePlayer canvas.imagePlayerCanvas", e);
              methods.stopDraw($($this), $($this).find("canvas")[1], e);
            });

            //logger('DAS ELEMENT!', $(".imagePlayer canvas.imagePlayerCanvas"));
            if ($(this).hasClass('fullScreen') || settings.viewType == 'fullScreen') {
              //панорамирование
              $($this).on('wheel', ".imagePlayer canvas.imagePlayerCanvas", function (e) { logger('elementsss'); methods.resize($($this), $($this).find(".imagePlayer .imagePlayerImg")[0], e); });

              //рисовалка
              $(this).on('click', ".imagePlayerDrawer", function (e) {
                methods.drawOnScreen($this, $($this).find("canvas")[1], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (e) {
                methods.startDraw($($this), $($this).find("canvas")[1], e);
              });
              $($this).on('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", function (ev) {
                methods.drawingLine($($this), $($this).find("canvas")[1], ev);
              });

              //таргет
              $(this).on('click', ".imagePlayerTarget", function (e) {
                methods.targetOnScreen($this, $($this).find("canvas")[2], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", function (e) {
                methods.setTarget($($this), $($this).find("canvas")[2], e);
              });

              //миникарта
              $(this).on('click', ".imagePlayerTear", function (e) {
                methods.clickToggleMap($this, $($this).find(".imagePlayerMapCanvas")[0], e);
                $(e.target).toggleClass('active');
              });

              $($this).on('mousedown', ".imagePlayer canvas.imagePlayerMapCanvas", function (e) {
                //methods.setTarget($($this), $($this).find("canvas")[3], e);
              });

              //показать или спрятать легенду
              if (!$($this).hasClass('initFull')) {
                $(this).on('click', ".imagePlayerLegend", function (e) {
                  methods.switchLegend($this, e);
                  $(e.target).toggleClass('active');
                });
              }
            }
          }
        }

        $(this).addClass('init');
        if ($(this).hasClass('fullScreen')) {
          $($this).addClass('initFull')
        }
      });
    },

    startActions: function ($this, settings, overloadSizes) {
      var playerSize = methods.initiatePlayerSize($this, settings, overloadSizes);

      settings.basicWidth = playerSize.width;
      settings.basicHeight = playerSize.height;

      //logger('basic settings of W & H', settings.basicWidth, settings.basicHeight);
      var sett = methods.readSettings($this);
      sett.basicWidth = playerSize.width;
      sett.basicHeight = playerSize.height;
      // logger('settings.type',sett.viewBox);
      if (sett.viewBox == 'viewBox="0 0 0 0"' && !overloadSizes) {

        logger('inside');

        //logger('sett.viewBox', sett.viewBox, playerSize.real.width, playerSize.real.height);
        sett.viewBox = 'viewBox="0 0 ' + playerSize.real.width + ' ' + playerSize.real.height + '"';
        settings.viewBox = 'viewBox="0 0 ' + playerSize.real.width + ' ' + playerSize.real.height + '"';
        // $($this).find("canvas")
        logger(' sett.viewBox', sett.viewBox);
      }

      methods.saveSettings($($this), sett);

      methods.setPlayerSize($this, playerSize.width, playerSize.height);

      logger('this', $($this));
      /* logger('can',  $($this).find("canvas")[0]);*/
      methods.canvasFirstRender($($this), $($this).find("canvas")[0], settings);

      if (settings.ready != undefined) {
        logger('ready function != undefined');
        logger('settings', settings)
        settings.ready();
      };
    },
    create: function (parent, settings) {
      logger('here');
      //return $()
      $(parent).attr('zoom', 1);
      $(parent).attr('posX', 0);
      $(parent).attr('posY', 0);

      if (settings.viewType != 'inline') {
        $(parent).addClass('fullScreen');
      }

      var tmpObj = $('<div class="imagePlayer"></div>');
      var tmp = $('<div class="imagePlayerContainer"></div>');
      var tmpImgCanvas = $('<div style="display:block;height:600px;background:#fff;" class="imagePlayerImg"><div class="mainImg"></div></div>');
      var tmpCanvas = $('<canvas style="display:block;height:600px; position:absolute; top:0; left:0;" class="imagePlayerCanvas"></canvas>');
      var tmpDrawingCanvas = $('<canvas style="display:none; height:600px; position:absolute; top:0; left:0;" class="imagePlayerDrawingCanvas"></canvas>');
      var tmpTargetCanvas = $('<canvas style="display:none; height:600px; position:absolute; top:0; left:0;" class="imagePlayerTargetCanvas"></canvas>');
      var tmpMapCanvas = $('<div style="display:none; height:100px; position:absolute; top:0; right:0; border: 1px solid #555555;" class="imagePlayerMapCanvas"><div class="mainImgMap" style="background-image:url(' + settings.url + ')"></div><div class="redFrame"></div></div>');
      var img = $('<img class="imagePlayerImgObj" src=' + settings.url + ' style="opacity:0; width:0; height:0;margin:0;" />');

      // var settingsPanel = $('<div class="settingsPanel"></div>');
      // settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="rWidth" type="number" value="'+settings.rWidth+'" /><input class="rColor" type="text" value="'+settings.rColor+'" /></div>');
      // settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="tWidth" type="number" value="'+settings.tWidth+'" /><input class="tColor" type="text" value="'+settings.tColor+'" /></div>');
      // settingsPanel = settingsPanel.append('<div class="settingsPanelLine"><h6></h6><input class="hWidth" type="number" value="'+settings.hWidth+'" /><input class="hColor" type="text" value="'+settings.hColor+'" /></div>');

      tmp.append(tmpImgCanvas);
      tmp.append(tmpCanvas);
      tmp.append(tmpDrawingCanvas);
      tmp.append(tmpTargetCanvas);
      tmp.append(tmpMapCanvas);

      tmpObj.append(tmp);

      tmp = $('<div class="imagePlayerSettingsPanel"></div>');

      var tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');
      var tmpSet = '';
      if (settings.viewType != 'inline') {
        tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerLegend">' + lablelegend + '</button>');
        //тут можно навесить обработчики на tmpSet
        tmpSetGr.append(tmpSet);//а потом приколачиваем всё на свои места
        tmp.append(tmpSetGr);

        tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
        tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerDrawer">Redlining</button>');
        tmpSetGr.append(tmpSet);

        tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerTear">Tear</button>');
        tmpSetGr.append(tmpSet);

        tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerTarget">Target</button>');
        tmpSetGr.append(tmpSet);
      }
      if (settings.legend != false) {
        tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerHotspots">' + lablehots + '</button>');
        tmpSetGr.append(tmpSet);

        tmp.append(tmpSetGr);
      }

      tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
      tmpSet = $('<button class="imagePlayerSettingsButton resetPlayer">' + lablehome + '</button>');
      tmpSetGr.append(tmpSet);

      tmp.append(tmpSetGr);

      tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
      tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerPrev">' + labelprev + '</button>');
      tmpSetGr.append(tmpSet);

      tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerNext">' + labelnext + '</button>');
      tmpSetGr.append(tmpSet);

      tmp.append(tmpSetGr);

      /*if (settings.viewType != 'inline') {
        tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
        tmpSet = $('<button class="imagePlayerSettingsButton">Настройки</button>');
        tmpSetGr.append(tmpSet);

        tmp.append(tmpSetGr);
      }*/

      tmpSetGr = $('<div class="imagePlayerSettingsPanelGroup"></div>');//и снова
      tmpSet = $('<button class="imagePlayerSettingsButton imagePlayerFullscreen">' + lablefullscreen + '</button>');
      tmpSetGr.append(tmpSet);

      tmp.append(tmpSetGr);

      tmpObj.append(tmp);
      tmpObj.append(img);
      //logger("$(parent).find('.localSettingsC').length", $(parent).find('.localSettingsC'));
      if ($(parent).find('.localSettingsC').length < 1) {
        // logger('here');
        var localSettingsC = $('<input type="text" name="localSettingsC" class="localSettingsC" style="display:none;" />');
        //logger(settings);
        var localSettings = JSON.stringify(settings);
        localSettingsC.val(localSettings);
        $(parent).append(localSettingsC);
      }
      logger('tmpObj', tmpObj);
      return tmpObj;
    },

    tryHotHoverSetOnmove: function ($this, canvas, settings, e) {
      //logger("SET ONMOVE", $this, canvas, settings, JSON.parse($($this).find('.localSettingsC').val()));
      $($this).on('mousemove', ".imagePlayer canvas.imagePlayerCanvas", function (e) { methods.tryHotHover($($this), canvas, settings, e); });
    },
    tryHotHoverUnsetOnmove: function ($this, canvas, settings, e) {
      //$($this).off('mouseenter',".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
    },

    tryHotHover: function ($this, canvas, settings, e) {
      //logger('MOUSE MOVE');
      e.preventDefault();
      e.stopPropagation();

      //logger('settings', settings);

      var element = $($($this).find('.mainImg')[0]);
      //var y = window.scrollY;

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);

      $this.settings = setts;
      settings = setts;
      //logger('settings', settings, $($this).find('.localSettingsC').val());

      var offset = $(canvas).offset();
      //logger("e.pageX",e.pageX);
      // logger("e.pageY",e.pageY);
      // logger("e.pageX",e.pageX - offset.left);
      // logger("e.pageY",e.pageY - offset.top);

      // logger("viewport", settings.viewBox);
      //logger('settings.viewBox on try hot hover', settings.viewBox);
      var svgSize = settings.viewBox.replace('"', '').split(" ");
      var clickX = e.pageX - offset.left;
      var clickY = e.pageY - offset.top;
      // logger('e.pageY', e.pageY);
      // logger('offset.top', offset.top);
      // logger('scroll', y);
      var viewW = $(element).outerWidth();
      var viewH = $(element).outerHeight();
      //var zoom = parseFloat( $($this).attr('zoom') );
      //var left = parseFloat( $($this).attr('posx') );
      //var top = parseFloat( $($this).attr('posy') );
      // $($this).attr('posXSt',e.pageX);
      // $($this).attr('posYSt',e.pageY);
      //logger('to convert coords', clickX, clickY, viewW, viewH, parseFloat( svgSize[2] ),  parseFloat( svgSize[3] ), left, top, zoom);
      var relCoords = methods.toSvgCoordsExp(clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
      ////console.log(relCoords);
      //var relCoords = methods.toSvgCoords(clickX, clickY, viewW, viewH, parseFloat( svgSize[2] ),  parseFloat( svgSize[3] ), left, top, zoom);
      //logger("relCoords", relCoords);

      var forShow = false;

      for (let i = 0; i < settings.legend.length; i++) {

        if (methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas)) {
          forShow = true;
        }
      }
      if (forShow == true) {
        $(canvas).css({ "cursor": "pointer" });
      }
      else {
        $(canvas).css({ "cursor": "auto" });
      }

    },
    switchLegend: function ($this, e) {
      e.preventDefault();
      e.stopPropagation();

      logger('legend', $($($this).closest('.S1000Dfigure, .popupWindowFull').find(".S1000Dlegend, .S1000DrandomList")));
      $($($this).closest('.S1000Dfigure, .popupWindowFull').find(".S1000Dlegend, .S1000DrandomList")).toggle();
    },
    showNextPlayer: function ($this, e) {
      e.preventDefault();
      e.stopPropagation();

      if ($($this).next('.S1000Dfiguregraphic').length > 0) {
        open = true
        /* logger('st', $('.elCircle'))
         $('.elCircle').remove()
         logger('st', $('.elCircle'))*/

        $($this).next('.S1000Dfiguregraphic').show();
        $($this).hide();
        //methods.selfDestroy($this);
        $($this).imagePlayer('destroy');
        //methods.sizeAuto($this.next('.S1000Dfiguregraphic'));
        //$($this).imagePlayer('destroy');
        $($($this).next('.S1000Dfiguregraphic')).imagePlayer('destroy');
        var setts = $($($this).next('.S1000Dfiguregraphic')).find('.localSettingsC').val();

        $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
        //logger('st', $($this).prev())

        setts = JSON.parse(setts);
        // logger('showNextPlayer', setts);
        if (!$($this).hasClass('fullScreen')) {
          $($($this).next('.S1000Dfiguregraphic')).imagePlayer({
            viewType: 'inline',
            url: setts.url,
            legend: setts.legend,
            legendSpots: setts.legendSpots,
            type: setts.type,
            viewBox: setts.viewBox,
          });
        }
        else {
          $($($this).next('.S1000Dfiguregraphic')).imagePlayer({
            viewType: 'fullScreen',
            url: setts.url,
            legend: setts.legend,
            legendSpots: setts.legendSpots,
            type: setts.type,
            viewBox: setts.viewBox,
          });
        }
        // logger('self destruction', $this);
        //logger("$(this).next('.S1000Dfiguregraphic').find('.localSettingsC')",$this.next('.S1000Dfiguregraphic').find('.localSettingsC'));
      }
    },
    showPrevPlayer: function ($this, e) {
      e.preventDefault();
      e.stopPropagation();

      if ($($this).prev('.S1000Dfiguregraphic').length > 0) {
        open = true

        // logger('prev', $($this).prev('.S1000Dfiguregraphic'));
        $($this).prev('.S1000Dfiguregraphic').show();
        $($this).hide();
        //methods.selfDestroy($this);
        $($this).imagePlayer('destroy');
        //methods.sizeAuto($this.prev('.S1000Dfiguregraphic'));
        $($($this).prev('.S1000Dfiguregraphic')).imagePlayer('destroy');
        var setts = $($($this).prev('.S1000Dfiguregraphic')).find('.localSettingsC').val();

        $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });

        setts = JSON.parse(setts);
        //logger('showPrevPlayer', setts);
        if (!$($this).hasClass('fullScreen')) {
          $($($this).prev('.S1000Dfiguregraphic')).imagePlayer({
            viewType: 'inline',
            url: setts.url,
            legend: setts.legend,
            legendSpots: setts.legendSpots,
            type: setts.type,
            viewBox: setts.viewBox,
          });
        }
        else {
          // logger('here2');
          $($($this).prev('.S1000Dfiguregraphic')).imagePlayer({
            viewType: 'fullScreen',
            url: setts.url,
            legend: setts.legend,
            legendSpots: setts.legendSpots,
            type: setts.type,
            viewBox: setts.viewBox,
          });
        }
        // logger('self destruction', $this);
      }
    },

    tryHotShow: function ($this, canvas, settings, e) {
      e.preventDefault();
      e.stopPropagation();

      //logger('settings before save', settings);
      //methods.saveSettings($this, settings);
      //logger('settings after save', settings);
      //var y = window.scrollY;
      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      //$this.settings = setts;
      settings = setts;

      //logger(settings);
      var element = $($($this).find('.imagePlayerImg .mainImg')[0]);

      var offset = $(canvas).offset();
      // logger("e.pageX",e.pageX);
      // logger("e.pageY",e.pageY);
      // logger("e.pageX",e.pageX - offset.left);
      // logger("e.pageY",e.pageY - offset.top);

      var svgSize = settings.viewBox.replace('"', '').split(" ");
      var clickX = e.pageX - offset.left;
      var clickY = e.pageY - offset.top;
      // logger('e.pageY', e.pageY);
      //logger('offset.top', offset.top);
      // logger('scroll', y);
      // var viewW = $(canvas).outerWidth();
      // var viewH = $(canvas).outerHeight();
      // var zoom = parseFloat( $($this).attr('zoom') );
      // var left = parseFloat( $($this).attr('posx') );
      // var top = parseFloat( $($this).attr('posy') );
      // $($this).attr('posXSt',e.pageX);
      // $($this).attr('posYSt',e.pageY);
      logger('to convert coords', clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
      var relCoords = methods.toSvgCoordsExp(clickX, clickY, parseFloat(svgSize[2]), parseFloat(svgSize[3]), element);
      //logger("relCoords", relCoords);

      forShow = false;

      for (var i = 0; i < settings.legend.length; i++) {
        logger("checkForCanvasRefClick", methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas));
        if (methods.checkForCanvasRefClick(settings, settings.legend[i], relCoords.X, relCoords.Y, canvas)) {

          //logger(`ПОПАЛ! ${settings.legend[i]}`);

          /*if( ($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw)) ){

          }*/
          // logger(settings.legend.length);
          for (var k = 0; k < settings.legend.length; k++) {
            try {
              settings.legendSpots[k].todraw = false;
            }
            catch (e) {
              logger('Error in image hotspot  ' + e.name + ":" + e.message);
            }
          }
          //  logger('leg', settings.legendSpots[i].todraw);
          //if (settings.legend[i].todraw != undefined) { 
          settings.legendSpots[i].todraw = true;
          //  }
          //   logger('true?');
          forShow = settings.legend[i];
        }
        /*else{
          settings.legendSpots[i].todraw=false;
        }*/
      }
      //  logger('set', setts);
      //  logger('set', $this);
      methods.saveSettings($this, setts);
      methods.basicRedrawImageOld($this, canvas);

      //убираем тень со всех не кликнутых элементов

      if (forShow != false) {
        $($this).closest('.S1000Dfigure').find('.S1000DrandomList a').closest('tr').css({ 'box-shadow': 'unset', '-webkit-box-shadow': 'unset', '-moz-box-shadow': 'unset' });
        if (settings.type == 'vector') {
          //ставим тень если попали по элементу
          var links = $($this).closest('.S1000Dfigure').find('.S1000DrandomList a');

          for (var k = 0; k < $(links).length; k++) {

            // logger('TO DRAW VECTOR', $(forShow).attr('class'));

            if ($(forShow)[0].tagName == 'G') {
              if ($(forShow).attr('class').includes('Ø') && $(links[k]).attr('name').includes('O') && $(forShow).attr('class').replace('Ø', '') == $(links[k]).attr('name').replace('O', '')) {
                $(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
              }
              // $(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
            } else if (($(links[k]).attr('name') == $(forShow).attr('class')) || $(links[k]).attr('name') == $(forShow).attr('class').replace('hotspot_', '') || $(links[k]).attr('name') == $(forShow).attr('apsname')) {
              //settings.legendSpots[k].todraw=true;
              $(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
            }
          }
          //$($this).closest('.S1000Dfigure').find('.S1000DrandomList a').closest('tr').css({'background-color':'unset'});
        } else {
          //ставим тень если попали по элементу
          var links = $($this).closest('.S1000Dfigure').find('.S1000DrandomList a');
          //logger('links 2,3,4 ', links);

          for (var k = 0; k < $(links).length; k++) {

            //   logger('TO DRAW RASTER', forShow);
            if ($(links[k]).attr('name') == forShow.applicationstructurename || $(links[k]).attr('name') == forShow.hotspottitle) {
              //settings.legendSpots[k].todraw=true;
              $(links[k]).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });
            }
          }
        }
      }

      // if(settings.type == 'vector'){
      //   chechForCanvasRefClick(settings, element, relCoords.X, relCoords.Y);
      // }
    },

    checkForCanvasRefClick: function (settings, element, clickX, clickY, canvas) {
      if (settings.type == 'vector') {

        let xCoord
        let yCoord

        if ($(element).attr('x') == undefined) {
          let transform = $(element).attr('transform')
          if (transform != undefined) {
            let nums = transform.match(/\((.+?)\)/)
            let arrNums = nums[1].split(' ')
            xCoord = arrNums[4]
            yCoord = arrNums[5]
          }
        } else {
          if (clickX > (parseFloat($(element).attr('x')) - 5) && (clickX < (parseFloat($(element).attr('x')) + 5)) && (clickY > (parseFloat($(element).attr('y')) - 5)) && (clickY < (parseFloat($(element).attr('y')) + 5))) {
            xCoord = parseFloat($(element).attr('x'));
            yCoord = parseFloat($(element).attr('y'));
          }
        }

        // logger('element xCoord',xCoord);
        // logger('element yCoord',yCoord);
        if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (!isNaN(yCoord)) && (!isNaN(xCoord)) && (yCoord != null) && (xCoord != '') && (yCoord != '')) {
          if ((clickX > (xCoord - 5)) && (clickX < (xCoord + 5)) && (clickY > (yCoord - 5)) && (clickY < (yCoord + 5))) {
            return true;
          } else {
            return false;
          }
        } else {
          if ($(element).attr('points') != undefined) {
            var pts = $(element).attr('points').split(' ');
            if (pts.length >= 2) {
              var xSumm = 0;
              var ySumm = 0;
              for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
                xSumm = xSumm + parseFloat(pts[xind * 2]);
              }
              for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
                ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
              }
              xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
              ySumm = ySumm / (Math.floor(pts.length / 2) - 1);

              if ((clickX > (xSumm - 5)) && (clickX < xSumm + 5) && (clickY > ySumm - 5) && (clickY < ySumm + 5)) {
                //logger('ПОПАЛ!', item);
                flagCollision = true;
                //return true;
              }
            }
          } else {
            //logger('element',$(element)[0].childNodes);
            var arr = $(element)[0].childNodes;

            var flagCollision = false;

            arr.forEach(function (item, i, arr) {
              //alert( i + ": " + item + " (массив:" + arr + ")" );
              if ($(item).attr('points') != undefined) {
                var pts = $(item).attr('points').split(' ');
                // logger('item points',$(item).attr('points'));
                if (pts.length >= 2) {
                  // logger(clickX + '>' + (parseInt(pts[0]) - 5), (clickX  > (parseInt(pts[0]) - 5)? true:false));
                  // logger(clickX + '<' + (parseInt(pts[0]) + 5), (clickX < (parseInt(pts[0]) + 5))? true:false);
                  // logger(clickY + '>' + (parseInt(pts[1]) - 5), (clickY > (parseInt(pts[1]) - 5))? true:false);
                  // logger(clickY + '<' + (parseInt(pts[1]) + 5), (clickY < (parseInt(pts[1]) + 5))? true:false);

                  //var ctx = canvas.getContext('2d');
                  // ctx.strokeStyle="#00FF00";
                  // ctx.moveTo(parseInt(pts[0])-2, parseInt(pts[1]) - 2);
                  // ctx.lineTo(parseInt(pts[0])+11, parseInt(pts[1])+11);
                  // ctx.moveTo(parseInt(pts[0])-2, parseInt(pts[1]) + 11);
                  // ctx.lineTo(parseInt(pts[0])+11, parseInt(pts[1])-2);
                  // ctx.stroke();

                  // ctx.moveTo(clickX-2, clickY - 2);
                  // ctx.lineTo(clickX+11, clickY+11);
                  // ctx.moveTo(clickX-2, clickY + 11);
                  // ctx.lineTo(clickX+11, clickY-2);
                  // ctx.stroke();

                  var xSumm = 0;
                  var ySumm = 0;
                  for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
                    xSumm = xSumm + parseFloat(pts[xind * 2]);
                  }
                  for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
                    ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
                  }
                  xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
                  ySumm = ySumm / (Math.floor(pts.length / 2) - 1);

                  if ((clickX > (xSumm - 5)) && (clickX < xSumm + 5) && (clickY > ySumm - 5) && (clickY < ySumm + 5)) {
                    //logger('ПОПАЛ!', item);
                    flagCollision = true;
                    //return true;
                  }

                  //tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
                }
              }
            });
          }

          if (flagCollision) {
            return true;
          }
          else {
            return false;
          }
        }
      }
      else {
        //RASTER GRAPHIC
        var xCoord = parseFloat(element.coords[0]);
        var yCoord = parseFloat(element.coords[1]);
        //logger(xCoord, yCoord);

        if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (!isNaN(yCoord)) && (!isNaN(xCoord)) && (yCoord != null) && (xCoord != '') && (yCoord != '')) {
          var ctx = canvas.getContext('2d');
          //logger('ctx',ctx.canvas.width, settings.viewBox, xCoord, yCoord);

          //tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';
          // logger(clickX + '>' + (xCoord - 5), (clickX  > (xCoord - 5)? true:false));
          // logger(clickX + '<' + (xCoord + 5), (clickX < (xCoord + 5))? true:false);
          // logger(clickY + '>' + (yCoord - 5), (clickY > (yCoord - 5))? true:false);
          // logger(clickY + '<' + (yCoord + 5), (clickY < (yCoord + 5))? true:false);

          // ctx.strokeStyle="#FF0000";
          // ctx.moveTo(xCoord, yCoord );
          // ctx.lineTo(xCoord+15, yCoord+15);
          // ctx.moveTo(xCoord, yCoord + 15);
          // ctx.lineTo(xCoord+15, yCoord);
          // ctx.stroke();
          // ctx.strokeStyle="#00FF00";
          // ctx.moveTo(clickX, clickY);
          // ctx.lineTo(clickX+15, clickY+15);
          // ctx.moveTo(clickX, clickY + 15);
          // ctx.lineTo(clickX+15, clickY);
          // ctx.stroke();

          if ((clickX > (xCoord)) && (clickX < (xCoord + 15)) && (clickY > (yCoord)) && (clickY < (yCoord + 15))) {
            return true;
          }
          else {
            return false;
          }
        }
      }
      return (false);
    },
    toSvgCoordsExp: function (clickX, clickY, svgW, svgH, element) {
      // logger('toSvgCoordsExp',clickX, clickY, svgW, svgH, element);
      var res = {};
      var percClick = {};

      var left = parseFloat($(element).css('left'));
      var top = parseFloat($(element).css('top'));

      var width = $(element).outerWidth();
      var height = $(element).outerHeight();

      var zoom = width / svgW;

      percClick.X = (clickX - left) / width;
      percClick.Y = (clickY - top) / height;

      res.X = (svgW * percClick.X);
      res.Y = (svgH * percClick.Y);
      // logger('svg',svgW,svgH);
      // logger('percClick.X', percClick.X, 'percClick.Y', percClick.Y);
      // logger('res X',res.X,'res Y',res.Y);

      return (res);
    },

    RefClick: function ($this, e) {
      e.preventDefault();
      e.stopPropagation()
      logger('ref');
      open = false

      var eventElement = e.target;
      // logger('ev', eventElement);

      var eventElementId = $(eventElement).attr('href');
      // eventElementId = eventElementId.split('h');
      // eventElementId = eventElementId[0].replace('#','');

      var searchName = $(eventElement).attr('name');

      var parent = $(eventElement).closest('.S1000Dfigure');
      var Arr = $(parent).find('.S1000Dfiguregraphic');
      var findedElement = '';
      var canMem = true;

      $.each(Arr, function (ii, value) {
        var findElRes = [];
        //logger($(Arr[ii]), '.S1000DHotspot[applicationstructurename="' + searchName + '"]');
        findElRes = $(Arr[ii]).find('.S1000DHotspot[applicationstructurename="' + searchName + '"]');

        if (findElRes.length > 0 && canMem) {
          findedElement = Arr[ii];
          canMem = false;
        }
      });

      if (findedElement != '') {

        if ($(findedElement).css('display') == 'block') {

          var setts = $($this).find('.localSettingsC').val();
          // logger(setts);
          setts = JSON.parse(setts);
          //$this.settings = setts;
          var settings = setts;

          $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
          $(e.currentTarget).closest('tr').css({ 'box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-webkit-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)', '-moz-box-shadow': 'inset 0px 0px 5px 1px rgba(30,136,229,0.6)' });

          const gettingClass = str => {
            let idxStart = str.indexOf('class="')
            let firstStr = str.substr(idxStart + 'class="'.length)
            let idxSEnd = firstStr.indexOf('"')
            return (firstStr.substr(0, idxSEnd))
          }

          let idElem = ''

          if (settings.type == 'vector') {
            var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
            var resElem = [];

            logger(settings.legend);

            for (var i = 0; i < settings.legend.length; i++) {

              if (($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw))) {

                resElem = $(settings.legend[i]);
                logger(resElem);
                try {
                  settings.legendSpots[i].todraw = true;
                }
                catch (e) {

                }
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);

                //$('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
                //$(e.currentTarget).closest('tr').css({ 'box-shadow': 'green', '-webkit-box-shadow': 'green', '-moz-box-shadow': 'green' });

                logger("SUCCESS FIND OF HOT");
              } else if (settings.legend[i].includes('<g') && (searchName.includes('O'))) {

                let str = gettingClass(settings.legend[i])
                if (str.includes('Ø')) {
                  if (searchName.replace('O', '') == str.replace('Ø', '')) {
                    for (let j = 0; j < setts.legend.length; j++) {
                      setts.legendSpots[j].todraw = false;
                      if (setts.legend[j].includes('Ø')) {
                        let resultStr = gettingClass(setts.legend[j])
                        if (resultStr == str) {
                          setts.legendSpots[j].todraw = true;
                        }
                      }
                    }
                  }
                }
              } else {
                try {
                  settings.legendSpots[i].todraw = false;
                }
                catch (e) {
                  logger('Error in image hotspot  ' + e.name + ":" + e.message);
                }
                //methods.saveSettings($this, settings);
              }
            }
            //logger(settings);
            methods.saveSettings($this, settings);
          }
          else {
            logger('NOT VECTOR');
            // logger(settings.legend);

            var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
            var resElem = [];

            for (var i = 0; i < settings.legend.length; i++) {
              //logger('$(settings.legend[i])',$(settings.legend[i]));
              if (settings.legend[i].applicationstructurename == toDraw) {

                resElem = $(settings.legend[i]);
                settings.legendSpots[i].todraw = true;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);

                logger("SUCCESS FIND OF HOT");
              }
              else {
                settings.legendSpots[i].todraw = false;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);
              }
            }
            //  logger(settings);
            methods.saveSettings($this, settings);
          }
        }
        else {
          $($this).closest('.S1000Dfigure').find('.S1000Dfiguregraphic').css({ 'display': 'none' });
          $(findedElement).css({ 'display': 'block' });
          $($this).imagePlayer('destroy');
          $(findedElement).imagePlayer('destroy');

          var setts = $(findedElement).find('.localSettingsC').val();
          setts = JSON.parse(setts);
          setts.ready = function ($thisEl, target) {
            setTimeout(function () {
              $(target).click();
            }, 500);
          }
          logger('show player by HOT ref', setts);
          if (!$($this).hasClass('fullScreen')) {
            $(findedElement).imagePlayer({
              viewType: 'inline',
              url: setts.url,
              legend: setts.legend,
              legendSpots: setts.legendSpots,
              type: setts.type,
              viewBox: setts.viewBox,
              ready: setts.ready($(findedElement), e.target),
            });
          }
          else {
            $(findedElement).imagePlayer({
              viewType: 'fullScreen',
              url: setts.url,
              legend: setts.legend,
              legendSpots: setts.legendSpots,
              type: setts.type,
              viewBox: setts.viewBox,
              ready: setts.ready($(findedElement), e.target),
            });
          }
        }
      }

      //   logger('elem', setts.legend[0].getComputedTextLength());
      methods.basicRedrawImageOld($this);
    },

    HRefClick: function ($this, e) {
      // logger('click');
      e.preventDefault();
      e.stopPropagation();

      var eventElement = e.target;
      var eventElementId = $(eventElement).attr('href');

      var findElRes = eventElement;
      // eventElementId = eventElementId.split('h');
      // eventElementId = eventElementId[0].replace('#','');

      // var searchName = $(eventElement).attr('name');

      // var parent = $(eventElement).closest('.S1000Dfigure');
      // var Arr = $(parent).find('.S1000Dfiguregraphic');
      // var findedElement = '';
      // var canMem = true;

      // $.each(Arr, function( ii, value ) {
      //   var findElRes = [];
      //   logger($(Arr[ii]), '.S1000DHotspot[applicationstructurename="'+ searchName +'"]');
      //   findElRes = $(Arr[ii]).find('.S1000DHotspot[applicationstructurename="'+ searchName +'"]');

      //   if(findElRes.length > 0 && canMem){
      //     findedElement = Arr[ii];
      //     canMem = false;
      //   }
      // });

      var findedElement = $(findElRes).closest('.S1000Dfiguregraphic');

      if (findElRes != '' && findElRes != undefined) {
        if ($(findedElement).css('display') == 'block') {
          var setts = $($this).find('.localSettingsC').val();
          setts = JSON.parse(setts);
          //$this.settings = setts;
          var settings = setts;

          if (settings.type == 'vector') {
            var toDraw = $(findElRes).attr('applicationstructurename');

            var resElem = [];
            for (var i = 0; i < settings.legend.length; i++) {
              //logger('$(settings.legend[i])',$(settings.legend[i]));
              if (($(settings.legend[i]).attr('apsname') == toDraw) || ($(settings.legend[i]).hasClass(toDraw)) || ($(settings.legend[i]).hasClass('hotspot_' + toDraw))) {

                resElem = $(settings.legend[i]);
                settings.legendSpots[i].todraw = true;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);

                logger("SUCCESS FIND OF HOT");
              }
              else {
                settings.legendSpots[i].todraw = false;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);
              }
            }
            logger('ss', settings);
            methods.saveSettings($this, settings);
          }
          else {
            logger('NOT VECTOR');
            logger(settings.legend);

            var toDraw = $(findElRes).attr('applicationstructurename');
            var resElem = [];

            for (var i = 0; i < settings.legend.length; i++) {
              //logger('$(settings.legend[i])',$(settings.legend[i]));
              if (settings.legend[i].applicationstructurename == toDraw) {

                resElem = $(settings.legend[i]);
                settings.legendSpots[i].todraw = true;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);

                logger("SUCCESS FIND OF HOT");
              }
              else {
                settings.legendSpots[i].todraw = false;
                //logger(settings.legendSpots);
                //methods.saveSettings($this, settings);
              }
            }
            methods.saveSettings($this, settings);
          }
        }
        else {
          $($this).closest('.S1000Dfigure').find('.S1000Dfiguregraphic').css({ 'display': 'none' });
          $(findedElement).css({ 'display': 'block' });
          $($this).imagePlayer('destroy');
          $(findedElement).imagePlayer('destroy');

          var setts = $(findedElement).find('.localSettingsC').val();
          setts = JSON.parse(setts);
          setts.ready = function ($thisEl, target) {
            setTimeout(function () {
              $(target).click();
            }, 500);
          }

          logger('show player by HOT ref', setts);
          if (!$($this).hasClass('fullScreen')) {
            $(findedElement).imagePlayer({
              viewType: 'inline',
              url: setts.url,
              legend: setts.legend,
              legendSpots: setts.legendSpots,
              type: setts.type,
              viewBox: setts.viewBox,
              ready: setts.ready($(findedElement), e.target),
            });
          }
          else {
            $(findedElement).imagePlayer({
              viewType: 'fullScreen',
              url: setts.url,
              legend: setts.legend,
              legendSpots: setts.legendSpots,
              type: setts.type,
              viewBox: setts.viewBox,
              ready: setts.ready($(findedElement), e.target),
            });
          }
        }
      }
      methods.basicRedrawImageOld($this);
    },

    drawRefByPath: function ($this, elem, element) {
      logger('drawRefByPath', $this, elem, element);

      var zoom = $($this).attr('zoom');
      var posX = $($this).attr('posX');
      var posY = $($this).attr('posY');

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      settings = setts;

      var c = {};//canvas parameters
      c.width = $($(elem).find('.mainImg')[0]).outerWidth();
      c.height = $($(elem).find('.mainImg')[0]).outerHeight();

      var i = {};
      regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
      var mat = regex.exec(setts.viewBox);
      //logger(mat);

      i.width = parseFloat(mat[3]);
      i.height = parseFloat(mat[4]);

      var r = c.width / i.width;
      //logger('r', r);

      var xCoord = element.coords[0];//element.getAttribute('x');
      var yCoord = element.coords[1];//element.getAttribute('y');

      //logger('xCoord, yCoord', xCoord, yCoord);
      //logger('i.width, i.height', i.width, i.height, setts.viewBox);

      if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (yCoord != null)) {
        //tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';

        var cx = ((xCoord - 0) / i.width) * c.width;
        var cy = ((yCoord - 0) / i.height) * c.height;
        var diameter = 15 * r;

        tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
      }

      $(elem).find('.mainImg').append(tmpAdd);
    },

    drawRefByElement: function ($this, elem/*элемент для отрисовки главной картинки*/, element) {
      // //console.log('this', $this[0]);
      // //console.log('elem', elem);
      // console.log('element', element);

      let coeff
      if ($(element).attr('style') == undefined) {
        var hotspostyle = $(element).attr('font-size')
        coeff = hotspostyle;
        coeff = parseInt(coeff);
      } else if ($(element).attr('style') != undefined && parseInt($(element).attr('font-size')) <= 1) {
        var hotspostyle = $(element).attr('style');
        regex = /(?<=font-size:)\d*.\d*/gm;
        coeff = parseInt(regex.exec(hotspostyle));
      } else if ($(element).attr('style') != undefined && $(element).attr('font-size') != 'NaNpx' && $(element).attr('font-size') != undefined) {
        //  //console.log($(element).attr('font-size'));
        var hotspostyle = $(element).attr('font-size');
        coeff = hotspostyle;
        coeff = parseInt(coeff);
        // //console.log('element', element);
        // //console.log(coeff);
        // //console.log((element.split('font-size')))
        // var hotspostyle = $(element).attr('style');
        // regex = /(?<=font-size:)\d*.\d*/gm;
        // coeff = parseInt(regex.exec(hotspostyle));  
      } else {
        var hotspostyle = $(element).attr('style');
        regex = /(?<=font-size:)\d*.\d*/gm;
        coeff = parseInt(regex.exec(hotspostyle));
      }

      //  //console.log(coeff);

      // var zoom = $($this).attr('zoom');
      // var posX = $($this).attr('posX');
      // var posY = $($this).attr('posY');

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      $this.settings = setts;

      var c = {};//canvas parameters
      c.width = $($(elem).find('.mainImg')[0]).outerWidth();
      c.height = $($(elem).find('.mainImg')[0]).outerHeight();

      //    logger(c);

      var i = {};
      regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
      var mat = regex.exec(setts.viewBox);

      let xCoord = $(element).attr('x');//element.getAttribute('x');
      let yCoord = $(element).attr('y');//element.getAttribute('y');

      // //console.log(xCoord);
      // //console.log(yCoord);

      i.width = parseFloat(mat[3]);
      i.height = parseFloat(mat[4]);
      logger('iw', i.width, i.height);

      var xcoeffText = $(element).text().trim();
      logger('xcoeffText', xcoeffText);
      xcoeff = xcoeffText.length;

      let r = c.width / i.width;

      let coor = yCoord / i.height * 100
      let resY = coor * c.height / 100

      if ($(element).attr('x') == undefined && $(element).attr('cx') == undefined) {
        let transform = $(element).attr('transform')
        if (transform != undefined) {
          let nums = transform.match(/\((.+?)\)/)
          let arrNums = nums[1].split(' ')
          if (xcoeff >= 2) {
            xCoord = (arrNums[4] * arrNums[2]) - 3.5
            yCoord = arrNums[5] * arrNums[2] - 1
          } else {
            xCoord = (arrNums[4] * arrNums[2]) - 3
            yCoord = arrNums[5] * arrNums[2]
          }
        }
      } else if ($(element).attr('x') == undefined) {
        xCoord = $(element).attr('cx');
        yCoord = $(element).attr('cy');
      }

      // //console.log(xCoord);
      // //console.log(yCoord);

      var tmpAdd = '';
      if (typeof (xCoord != undefined) && typeof (yCoord != undefined) && (xCoord != null) && (yCoord != null)) {
        //tmpAdd = '<circle cx="'+xCoord+'" cy="'+yCoord+'" r="5" fill="none" stroke="#ff0000"/>';

        const onlyLetters = /^[A-Za-zА-Яа-я]+$/.test(xcoeffText)
        const lettersAndNumbers = /^[A-Za-zА-Яа-я0-9]+$/.test(xcoeffText)
        const onlyNumbers = /^\d+$/.test(xcoeffText)

        let cxNum = 0.1
        let cyNum = 1.2
        let dNum = 0.8
        let diff = xcoeff

        let cxNumEllipse = 0.5
        let cyNumEllipse = 1.4

        let cx
        let cy
        let diameter

        let minusNum = 0

        let trans = false

        if ($(element).attr('x') == undefined && $(element).attr('cx') == undefined) {
          trans = true
        }
        // //console.log(xcoeffText);
        const changeParametersCircle = () => {
          if (diff - 1 != 1) {
            dNum -= 0.1
            cyNum += 0.15
            cxNum += 0.15
            diff -= 1
            changeParametersCircle()
          } else {
            cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 2
            cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
            diameter = coeff * xcoeff * dNum * r + 5;
            if (xcoeffText.indexOf('I') != -1) {
              cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff
              cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 3
            } else if (onlyLetters || xcoeff == 2) {
              if (trans == true || xcoeff != 2) {
                if (xcoeff == 2 && trans == true) {
                } else {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff - 7
                  cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 7
                }
              }
            }
            else if (onlyNumbers) {
              if (trans != true || xcoeff == 2) {
                diameter = coeff * xcoeff * dNum * r + 3;
              } else {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - xcoeff - 7
                cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - xcoeff - 7
              }
            } else if (lettersAndNumbers) {
              if (trans == true) {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 15
                cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 8
                diameter = coeff * xcoeff * dNum * r + 10
                if (xcoeff == 2) {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
                }
              }
            } else if (xcoeffText.includes('.') || xcoeffText.includes(',') || xcoeffText.includes('/')) {

              if (trans != true) {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
                if (xcoeff == 3 && xcoeffText.includes('/')) {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 9
                  diameter = coeff * xcoeff * dNum * r * 4;
                } else if (xcoeff == 4 && xcoeffText.includes('/')) {
                  // //console.log(r);
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 9
                  cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 2
                  diameter = coeff * xcoeff * dNum * r + 12;
                }
                else if (xcoeff == 4) {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 4
                  diameter = coeff * xcoeff * dNum * r + 6;
                } else {
                  diameter = coeff * xcoeff * dNum * r + 2;
                }
              } else {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
                cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 7
                if (xcoeff == 4) {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 15
                  diameter = coeff * xcoeff * dNum * r + 6;
                } else {
                  cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 2
                  diameter = coeff * xcoeff * dNum * r + 2;
                }
              }
            } else if (xcoeffText.includes(')')) {
              if (trans != true) {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 4
              } else {
                cy = (((yCoord - coeff * cyNum) / i.height) * c.height) - 10
                cx = (((xCoord - coeff / xcoeff * cxNum) / i.width) * c.width) - 6
              }
              diameter = coeff * xcoeff * dNum * r + 10;
            } else {
              diameter = coeff * xcoeff * dNum * r + 2;
            }
          }
        }

        let num1 = 10
        let num2 = 40

        const changeParametersEllipse = () => {
          // logger('diff', diff);
          // //console.log(xcoeffText);
          if (diff - 1 != 4) {
            cyNumEllipse += 0.15
            cxNumEllipse += 0.15
            diff -= 1

            if (minusNum < 7) { minusNum += 1 } else { minusNum = 0 }

            num1 += 5
            num2 += 10
            changeParametersEllipse()
          } else {
            if (trans != true) {
              if (xcoeffText.includes('.') || xcoeffText.includes(',') || xcoeffText.includes('/')) {
                cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 5
                if (xcoeff > 5 && !$($this).hasClass('fullScreen')) {
                  // //console.log(minusNum);
                  // cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)

                  cy = (((yCoord - coeff) / i.height) * c.height) - 2
                  // diameter = coeff * xcoeff //* 0.3 * r;
                  if (coeff - r > 6) {
                    coeff = r + 1
                    cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)
                  }
                  if (xcoeffText.includes('/')) {
                    diameter = coeff * xcoeff
                  } else {
                    diameter = coeff * r * 2;
                  }
                  // //console.log(diameter);
                } else if (xcoeff == 5 && xcoeffText.includes('/')) {
                  cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 8
                  cy = (((yCoord - coeff) / i.height) * c.height) - 5
                  diameter = coeff * xcoeff
                  // } else if (xcoeff > 5 && xcoeffText.includes('/')) {
                  //   // cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) 
                  //   cy = (((yCoord - coeff) / i.height) * c.height) - 5
                  //   diameter = coeff * xcoeff
                  //   //console.log(diameter);
                }
                else {
                  if (xcoeff >= 5 && $($this).hasClass('fullScreen')) {
                    cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - 2
                  }
                  cy = (((yCoord - coeff) / i.height) * c.height) - 3
                  // cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
                  if (coeff - r > 6) {
                    coeff = r + 1
                    cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height + minusNum)
                  }
                  diameter = coeff * xcoeff //* 0.4 * r;
                }
              } else if (xcoeffText.includes(')')) {
                cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
                diameter = coeff * xcoeff * 0.4 * r + 10;
              } else {
                cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width)
                cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height)
                diameter = coeff * xcoeff * 0.4 * r;
              }
            } else {
              cx = (((xCoord - coeff / xcoeff * cxNumEllipse) / i.width) * c.width) - num1
              cy = (((yCoord - coeff * cyNumEllipse) / i.height) * c.height) - num2
              diameter = coeff * xcoeff * 0.6 * r;
            }
          }
        }

        if (xcoeff == 1) {
          if (c.width < i.width) {
            r = c.width / i.width;
          }
          if (onlyLetters) {
            //   logger(xCoord, coeff, i.width, c.width);
            if (xcoeffText === "W" || xcoeffText === "Ш" || xcoeffText === "Щ" || xcoeffText === "Ж") {
              cy = (((yCoord - coeff / 0.8) / i.height) * c.height)
              cx = (((xCoord - coeff / 3.2) / i.width) * c.width)
            } else {
              cy = (((yCoord - coeff / 0.8) / i.height) * c.height)
              cx = (((xCoord - coeff / 2.5) / i.width) * c.width)
            }
            diameter = coeff * 1.7 * r;
          } else {
            cx = (((xCoord - coeff / 2.2) / i.width) * c.width)
            cy = (((yCoord - coeff / 0.9) / i.height) * c.height) - 2
            diameter = coeff * 1.5 * r + 4;
          }
          //    logger('dr', diameter, r);
        } else if (xcoeff > 1 && xcoeff <= 4) {
          logger('xcoeff', xcoeff);
          changeParametersCircle()
        } else if (xcoeff > 4) {
          changeParametersEllipse()
        } else if (xcoeff == 0) {
          //console.log(1);
          coeff = $(element).attr('r')
          if (coeff == undefined) {
            coeff = $(element).attr('rx')
          }
          cx = (((xCoord - coeff) / i.width) * c.width)
          cy = (((yCoord - coeff) / i.height) * c.height)
          diameter = coeff * 2 * r;
        }

        if (trans != true) {
          if (xcoeff > 4) {
            //  //console.log('cx');
            tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + (diameter + xcoeff * 4) + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
          } else {
            tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
          }
        } else {
          if (xcoeff > 4) {
            tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + (diameter + xcoeff * 4) + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
          } else {
            tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
          }
        }
      }
      else {
        //logger('element', $(element).attr('points'));
        // logger('element',$(element)[0].childNodes);
        if ($(element).attr('points') != undefined) {
          var pts = $(element).attr('points').split(' ');

          if (pts.length >= 2) {
            var xSumm = 0;
            var ySumm = 0;
            for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
              xSumm = xSumm + parseFloat(pts[xind * 2]);
            }
            for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
              ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
            }
            xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
            ySumm = ySumm / (Math.floor(pts.length / 2) - 1);

            //logger(pts.length % 2, xSumm, ySumm);

            var cx = ((xSumm - 3.75) / i.width) * c.width;
            var cy = ((ySumm - 3.75) / i.height) * c.height;
            var diameter = 7.5 * r;
            //console.log(12);
            tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
            //tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
          }
        } else {
          var arr = $(element)[0].childNodes;
          arr.forEach(function (item, k, arr) {
            //alert( i + ": " + item + " (массив:" + arr + ")" );
            if ($(item).attr('points') != undefined) {
              var pts = $(item).attr('points').split(' ');

              if (pts.length >= 2) {
                var xSumm = 0;
                var ySumm = 0;
                for (var xind = 0; xind < (Math.floor(pts.length / 2) - 1); xind++) {
                  xSumm = xSumm + parseFloat(pts[xind * 2]);
                }
                for (var yind = 0; yind < (Math.floor(pts.length / 2) - 1); yind++) {
                  ySumm = ySumm + parseFloat(pts[yind * 2 + 1]);
                }
                xSumm = xSumm / (Math.floor(pts.length / 2) - 1);
                ySumm = ySumm / (Math.floor(pts.length / 2) - 1);

                var cx = ((xSumm - 3.75) / i.width) * c.width;
                var cy = ((ySumm - 3.75) / i.height) * c.height;
                var diameter = 7.5 * r;
                //console.log(1);
                tmpAdd = '<div class="elCircle" style="left:' + cx + 'px; top:' + cy + 'px; width: ' + diameter + 'px; height: ' + diameter + 'px; border: ' + settings.hWidth + 'px solid ' + settings.hColor + '"/>';
                // tmpAdd = '<circle cx="'+pts[0]+'" cy="'+pts[1]+'" r="5" fill="none" stroke="#ff0000"/>';
              }
            }
          });
        }
      }
      //  //console.log(tmpAdd);
      $(elem).find('.mainImg').append(tmpAdd);
    },

    redrawAllRefs: function ($this, element, e) {

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      settings = setts;

      //      //console.log('redrawAllRefs', settings);
      // //console.log($this);
      //methods.basicRedrawImageOld($this);
      $(element).find('.elCircle').remove();

      if (!settings.shawAllRefs) {
        var resElem = [];
        //logger('redrawRefs settings', $this.settings);
        if (settings.type == 'vector') {
          //logger('$(resElem[0])',resElem[0]);
          if (settings.legend.length > 0) {
            //logger('$(resElem[0])',resElem[0]);
            var arr = settings.legend;
            arr.forEach(function (item, i, arr) {
              methods.drawRefByElement($this, element, item);
            });
            // for (var i = 0; i < settings.legend.length; i++) {
            //   //logger('resElem[i]',$(resElem[i]));
            //   var drawUrl = methods.drawRefByElement($this, element, settings.legend[i]);
            //   //logger(drawUrl);
            // }
          }
        }
        else {
          logger('DRAW HOT FOR RASTER');
          if (settings.legend.length > 0) {
            //logger('$(resElem[0])',resElem[0]);
            var arr = settings.legend;
            arr.forEach(function (item, i, arr) {
              methods.drawRefByPath($this, element, item);
            });
            // for (var i = 0; i < settings.legend.length; i++) {
            //   //logger('resElem[i]',settings.legend[i]);
            //   methods.drawRefByPath($this, element, settings.legend[i]);
            //   //logger(drawUrl);
            // }

            //methods.drawRefByUrl($this, canvas, toDrawUrl);
          }
        }

        settings.shawAllRefs = true;
        methods.saveSettings($this, settings);
      } else {
        settings.shawAllRefs = false;
        methods.saveSettings($this, settings);
      }
    },

    redrawRefs: function ($this, element) {
      //logger("element", element);
      //logger('redraw');

      var setts = $($this).find('.localSettingsC').val();
      logger(setts);
      // logger($($this).find('.localSettingsC').val());
      $(element).find('.elCircle').remove();

      setts = JSON.parse(setts);
      $this.settings = setts;
      var settings = setts;

      var resElem = [];

      if (settings.type == 'vector') {
        //var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
        for (var i = 0; i < settings.legendSpots.length; i++) {
          if (settings.legendSpots[i].todraw == true) {
            resElem.push(settings.legend[i]);
          }
        }
        //logger('$(resElem[0])',resElem[0]);

        if (resElem.length > 0) {
          //logger('$(resElem[0])',resElem[0]);
          for (var i = 0; i < resElem.length; i++) {
            // logger('resElem[i]',$(resElem[i]));
            logger($this, element, resElem[i]);
            methods.drawRefByElement($this, element, resElem[i]);
            //logger(drawUrl);
          }
        }
      }
      else {
        for (var i = 0; i < settings.legendSpots.length; i++) {
          //logger('$(settings.legend[i])',$(settings.legend[i]));
          if (settings.legendSpots[i].todraw == true) {
            resElem.push(settings.legend[i]);
          }
        }
        //logger('$(resElem[0])',resElem[0]);
        if (resElem.length > 0) {
          //logger('$(resElem[0])',resElem[0]);
          for (var i = 0; i < resElem.length; i++) {
            //logger('resElem[i]',$(resElem[i]));
            methods.drawRefByPath($this, element, resElem[i]);
            //logger(drawUrl);
          }
        }
      }
      /*else{
        //var toDraw = $(e.currentTarget).closest('tr').find('a').attr('name');
        //logger('DRAW HOT FOR RASTER');
        for (var i = 0; i < settings.legendSpots.length; i++) {
          
          if(settings.legendSpots[i].todraw == true){
            resElem.push( settings.legend[i]);
          }
        }
        //logger('$(resElem[0])',resElem[0]);
        if(resElem.length > 0){
          //logger('$(resElem[0])',resElem[0]);
          for (var i = 0; i < resElem.length; i++) {
            //logger('resElem[i]',resElem[i]);
            methods.drawRefByPath($this, element, resElem[i]);
            //logger(drawUrl);
          }
          
          //methods.drawRefByUrl($this, canvas, toDrawUrl);
        }
      }*/
    },
    clickToggleMap: function ($this, element, e) {
      e.preventDefault();
      e.stopPropagation();
      $(element).toggle();
      $(element).css({ 'width': ($(element).prev().outerWidth() / 6) + 'px', 'height': ($(element).prev().outerHeight() / 6) + 'px' });

      //  $('.elCircle').css({ 'border': "0px" })
      //  $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });

      /*var ctx = canvas.getContext('2d');
     
      ctx.canvas.width = $(canvas).prev().prev().prev().outerWidth();
      ctx.canvas.height = $(canvas).prev().prev().prev().outerHeight();
      
      if($(canvas).css('display') == 'block'){
        methods.renderMap($this);
      }*/
      if ($(element).css('display') == 'block') {
        methods.renderMap($this);
      }
    },

    renderMap: function ($this) {
      logger('render');
      var zoom = $($this).attr('zoom');
      var posX = $($this).attr('posX') / 6;
      var posY = $($this).attr('posY') / 6;
      //imagePlayerMapCanvas"><div class="mainImgMa
      var elem = $($this).find('.imagePlayerMapCanvas')[0];
      var imgElem = $($this).find('.imagePlayerMapCanvas .mainImgMap')[0];
      var redFrame = $($this).find('.imagePlayerMapCanvas .redFrame')[0];
      //var canvas = $($this).find("canvas")[3];

      var c = {};//canvas parameters
      c.width = $(elem).outerWidth();
      c.height = $(elem).outerHeight();

      var img = new Image();      // Новый объект
      img.src = settings.url;

      var i = {};//image parameters
      i.width = img.naturalWidth;
      i.height = img.naturalHeight;
      //logger("i", i);

      if (i.width == 0 || i.height == 0) {
        i.width = $(elem).prev().outerWidth();
        i.height = $(elem).prev().outerHeight();
      }

      //var ctx = canvas.getContext('2d');
      //ctx.drawImage(img, 0, 0, c.width, 'auto', $this);

      //resized
      var r = {};//image parameters
      r.width = c.width / i.width;

      //maxHeight of canvas
      $(elem).css({ 'height': (i.height * r.width) + 'px' });
      c.height = i.height * r.width;//update canvas height

      //ctx.canvas.width = c.width;
      //ctx.canvas.height = c.height;

      $(imgElem).css({ 'width': c.width, 'height': c.height });

      // logger('zoom', zoom);
      // logger('posX', posX);
      // logger('posY', posY);
      // logger('c.width', c.width);
      // logger('c.height', c.height);

      //ctx.drawImage(img, 0, 0, c.width, c.height);
      //ctx.strokeStyle="#FF0000";
      $(redFrame).css({ 'left': -posX - c.width / (2 * zoom) + c.width / 2 + 'px', 'top': -posY - c.height / (2 * zoom) + c.height / 2 + 'px', 'width': c.width / zoom + 'px', 'height': c.height / zoom + 'px' });
      //ctx.strokeRect(-posX - c.width/(2*zoom) + c.width/2, -posY - c.height/(2*zoom) + c.height/2, c.width/zoom, c.height/zoom);
    },
    drawOnScreen: function ($this, canvas, e) {
      e.preventDefault();
      e.stopPropagation();
      logger('draw');
      $(canvas).toggle();
      $(canvas).css({ 'width': $(canvas).prev().outerWidth() + 'px', 'height': $(canvas).prev().outerHeight() + 'px' });

      var ctx = canvas.getContext('2d');

      ctx.canvas.width = $(canvas).prev().outerWidth();
      ctx.canvas.height = $(canvas).prev().outerHeight();
      //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    },
    startDraw: function ($this, canvas, e) {
      e.preventDefault();
      e.stopPropagation();
      $(canvas).addClass('drawing');
      var ctx = canvas.getContext('2d');

      var offset = $(canvas).offset();
      /*logger('clientX '+e.clientX +', clientY '+e.clientY);
      logger('offset.left '+offset.left+ ', offset.top '+offset.top);
      logger(e.clientX - offset.left);
      logger(e.clientY + $(window).scrollTop() - offset.top );*/
      ctx.strokeStyle = "#FF0000";
      ctx.moveTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);
    },
    drawingLine: function ($this, canvas, e) {
      e.preventDefault();
      e.stopPropagation();

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      $this.settings = setts;
      var settings = setts;

      var offset = $(canvas).offset();

      var ctx = canvas.getContext('2d');
      if ($(canvas).hasClass('drawing')) {
        ctx.strokeStyle = settings.rColor;
        ctx.lineWidth = parseInt(settings.rWidth);
        ctx.lineTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);
        ctx.stroke();
      }
    },
    stopDraw: function ($this, canvas, e) {
      $(canvas).removeClass('drawing');
    },
    targetOnScreen: function ($this, canvas, e) {
      e.preventDefault();
      e.stopPropagation();

      logger('target');

      $(canvas).toggle();

      // $('.elCircle').css({ 'border': "0px" })
      $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });

      //logger($(canvas).prev());
      $(canvas).css({ 'width': $(canvas).prev().prev().outerWidth() + 'px', 'height': $(canvas).prev().prev().outerHeight() + 'px' });

      var ctx = canvas.getContext('2d');
      ctx.canvas.width = $(canvas).prev().prev().outerWidth();
      ctx.canvas.height = $(canvas).prev().prev().outerHeight();
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    },

    setTarget: function ($this, canvas, e) {
      e.preventDefault();
      e.stopPropagation();
      $(canvas).toggle();
      $(canvas).toggle();
      $(canvas).addClass('drawing');

      var setts = $($this).find('.localSettingsC').val();
      setts = JSON.parse(setts);
      $this.settings = setts;
      var settings = setts;

      var ctx = canvas.getContext('2d');
      ctx.canvas.width = $(canvas).prev().prev().outerWidth();
      ctx.canvas.height = $(canvas).prev().prev().outerHeight();

      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      ctx.strokeStyle = settings.tColor;
      ctx.lineWidth = parseInt(settings.tWidth);

      var offset = $(canvas).offset();

      ctx.moveTo(e.clientX - offset.left, e.clientY + $(window).scrollTop() - offset.top);

      //рисуем крестик
      ctx.moveTo(0, e.clientY + $(window).scrollTop() - offset.top);
      ctx.lineTo(ctx.canvas.width, e.clientY + $(window).scrollTop() - offset.top);

      ctx.moveTo(e.clientX - offset.left, 0);
      ctx.lineTo(e.clientX - offset.left, ctx.canvas.height);

      ctx.stroke();
    },

    fullScreen: function ($this, e) {
      e.preventDefault();
      e.stopPropagation();

      logger('fullScreen');
      //logger($this);
      //logger($($this));
      //logger($($this).parent().html());
      if (!$($this).hasClass('fullScreen')) {

        //tmpAdd = '<div class="elCircle" style="border: px solid white"/>';

        //$($this).find('.elCircle').remove;
        // methods.basicRedrawImageOld($this);

        $('body').append('<div class="popupWindowFull"><div class="popupImagePlayer"></div></div>');
        $($this).parent().clone().appendTo('.popupWindowFull .popupImagePlayer');

        for (var i = 0; i < $('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic').length; i++) {

          if ($($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).css('display') != 'none') {
            $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).attr('canpan', false);
            $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).imagePlayer('destroy');
            var setts = $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).find('.localSettingsC').val();
            //logger(setts);
            setts = JSON.parse(setts);
            //logger('setts to fullScreen', setts);
            setts.viewType = 'fullScreen';

            //logger('inside');
            // methods.tryHotShow($($this), $($this).find("canvas")[0], settings, e);
            //logger('fullScreen initial setts', setts);

            $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).find('.localSettingsC').val(JSON.stringify(setts));

            /* let event = new Event("click");
             logger('e', e);
             methods.RefClick($('.S1000Dfiguregraphic init fullScreen initFull', e))*/

            $($('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic')[i]).imagePlayer({
              viewType: 'fullScreen',
              url: setts.url,
              legend: setts.legend,
              legendSpots: setts.legendSpots,
              type: setts.type,
              viewBox: setts.viewBox,

              spots: setts.spots,
              name: setts.name,
              size: setts.size,
              redline: false,
              canResize: false,
              tearWindow: false,
              target: { x: 0, y: 0, show: false },
              shawAllRefs: false,
            });
          }
        }
      }
      else {
        $('.popupWindowFull .popupImagePlayer .S1000Dfiguregraphic').imagePlayer('destroy');
        $('body .popupWindowFull').remove();
      }
      $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
    },
    resize: function ($this, tmpCanvas, e) {
      e.preventDefault();
      e.stopPropagation();
      logger('resize');
      var delta = e.originalEvent.deltaY;
      //var canvas = tmpCanvas;
      if (delta > 0) {//scroll down
        //logger('scroll down');
        if ($($this).attr('zoom') > 0.1) {
          $($this).attr('zoom', ($($this).attr('zoom') * 0.95).toFixed(3));
        }
      } else {//scroll up
        //logger('scroll up');
        $($this).attr('zoom', ($($this).attr('zoom') / 0.95).toFixed(3));
      }
      methods.basicRedrawImageOld($this);
      if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
        methods.renderMap($this);
      }

      if (open == true) {
        logger('nie');
        $('.elCircle').remove()
      }
    },
    panClick: function ($this, element, e) {
      e.preventDefault();
      e.stopPropagation();

      logger('PAN CLICK');
      if (e.which != 1) { // если клик правой кнопкой мыши
        return; // то он не запускает перенос
      } else {
        open = false
      }
      //logger('startPan', e.pageX, e.pageY);

      $($this).attr('posxst', e.pageX);
      $($this).attr('posyst', e.pageY);
      $($this).attr('canpan', true);
    },
    pan: function ($this, element, e) {
      e.preventDefault();
      //  e.stopPropagation();

      //var canvas = tmpCanvas;

      if ($($this).attr('canpan') == 'true') {
        // logger('PAN', e.pageX - parseFloat($($this).attr('posxst')), e.pageY - parseFloat($($this).attr('posyst')));

        var moveX = e.pageX - parseFloat($($this).attr('posxst'));
        var moveY = e.pageY - parseFloat($($this).attr('posyst'));

        $($this).attr('posxst', e.pageX);
        $($this).attr('posyst', e.pageY);

        $($this).attr('posx', (parseFloat($($this).attr('posx')) + moveX));
        $($this).attr('posy', (parseFloat($($this).attr('posy')) + moveY));

        methods.basicRedrawImageOld($this);

        if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
          methods.renderMap($this);
        }
      }
      else {
        //logger('cantMove');
        return false;
      }

    },
    stopPan: function ($this, element, e) {
      e.preventDefault();
      e.stopPropagation();
      //logger('stopPan');
      //logger('CAN NOT PAN', $($this));
      $($this).attr('canpan', false);
      $($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);

      // чтобы не появлялся кружок при нажатие на посторонние элементы
      // methods.basicRedrawImageOld($this);

      //$($($this).find(".imagePlayer")).unbind('mousedown mousemove');
      if ($($($this).find(".imagePlayerMapCanvas")[0]).css('display') == 'block') {//если отображается миникарта - перерисовать её
        methods.renderMap($this);
      }

      return;
    },
    canvasFirstRender: function ($this, tmpCanvas, settings) {
      var element = $($this).find('.imagePlayerImg');
      // logger('element', element);
      var imgImg = $($this).find('.imagePlayerImg .mainImg');

      var left = ($(element).outerWidth() - $(imgImg).outerWidth()) / 2;
      var top = 0;

      var canvas = tmpCanvas;

      //$(canvas).css({"width":"100%"});

      var c = {};//canvas parameters
      c.width = $(canvas).outerWidth();
      c.height = $(canvas).outerHeight();

      //logger('canvas',c);

      var ctx = canvas.getContext('2d');

      /*var img = new Image();      // Новый объект
      img.crossOrigin = "anonymous";
      img.src = settings.url;
      settings.img = img;
     
      $($this).img = img;*/

      ctx.canvas.width = c.width;
      ctx.canvas.height = c.height;

      // чтобы при переключении вперед назад - ничего не было выделено
      methods.basicDrawOld(element[0], imgImg[0], left, top, $(imgImg).outerWidth(), $(imgImg).outerHeight(), $this, settings);
    },
    destroy: function () {
      var $this = $(this);
      //open = false

      /*return this.each(function() {
        var $this = $(this);
        $($this).find("*").unbind().off().removeData();
        $($this).find(".imagePlayer")[0].remove();
      });*/
      $($this).off('click', ".imagePlayerNext", methods.showNextPlayer);
      $($this).off('click', ".imagePlayerPrev", methods.showPrevPlayer);
      $($this).find(".imagePlayerNext").unbind('click');
      $($this).find(".imagePlayerPrev").unbind('click');
      //полный экран
      $($this).off('click', ".imagePlayerFullscreen", methods.fullScreen);
      //все хоты
      $($this).off('click', ".imagePlayerHotspots", methods.redrawAllRefs);
      $($this).find(".imagePlayerHotspots").unbind('click');
      //рестарт плеера
      $($this).off('click', ".resetPlayer", methods.reinit);

      $($this).parent().off('click', ".S1000DIntRefHotspot", methods.RefClick);

      //проверка на хот по наведению
      $($this).off('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
      $($this).off('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverUnsetOnmove);

      //проверка на наличие хота под курсором по клику
      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotShow);
      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.panClick);
      $($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);
      //панорамирование
      $($this).off('wheel', ".imagePlayer canvas.imagePlayerCanvas", methods.resize);
      $('body').off('mouseup', '.popupWindowFull', methods.stopPan);

      //рисовалка
      $($this).off('click', ".imagePlayerDrawer", methods.drawOnScreen);

      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.startDraw);
      $($this).off('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.drawingLine);
      $('body').off('mouseup', methods.stopDraw);

      //таргет
      $($this).off('click', ".imagePlayerTarget", methods.targetOnScreen);

      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", methods.setTarget);

      //миникарта
      $($this).off('click', ".imagePlayerTear", methods.clickToggleMap);

      //показать или спрятать легенду
      $($this).off('click', ".imagePlayerLegend", methods.switchLegend);

      $($this).find("*").unbind().off();
      $($this).find(".imagePlayer").remove();
      //$(this).removeClass('init');
      $($this).closest('.S1000Dfigure').removeClass('imagePlayer-init');
    },
    selfDestroy: function ($this) {
      logger('selfDestroy');
      /*return this.each(function() {
        var $this = $(this);
        $($this).find("*").unbind().off().removeData();
        $($this).find(".imagePlayer")[0].remove();
      });*/
      $($this).off('click', ".imagePlayerNext", methods.showNextPlayer);
      $($this).off('click', ".imagePlayerPrev", methods.showPrevPlayer);
      //полный экран
      $($this).off('click', ".imagePlayerFullscreen", methods.fullScreen);
      //все хоты
      $($this).off('click', ".imagePlayerHotspots", methods.redrawAllRefs);
      //рестарт плеера
      $($this).off('click', ".resetPlayer", methods.reinit);

      $($this).parent().off('click', ".S1000DIntRefHotspot", methods.RefClick);

      //проверка на хот по наведению
      $($this).off('mouseenter', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverSetOnmove);
      $($this).off('mouseleave', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotHoverUnsetOnmove);

      //проверка на наличие хота под курсором по клику
      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.tryHotShow);
      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerCanvas", methods.panClick);
      $($this).off('mousemove', ".imagePlayer canvas.imagePlayerCanvas", methods.pan);
      //панорамирование
      $($this).off('wheel', ".imagePlayer canvas.imagePlayerCanvas", methods.resize);
      $('body').off('mouseup', '.popupWindowFull', methods.stopPan);

      //рисовалка
      $($this).off('click', ".imagePlayerDrawer", methods.drawOnScreen);

      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.startDraw);
      $($this).off('mousemove', ".imagePlayer canvas.imagePlayerDrawingCanvas", methods.drawingLine);
      $('body').off('mouseup', methods.stopDraw);

      //таргет
      $($this).off('click', ".imagePlayerTarget", methods.targetOnScreen);

      $($this).off('mousedown', ".imagePlayer canvas.imagePlayerTargetCanvas", methods.setTarget);

      //миникарта
      $($this).off('click', ".imagePlayerTear", methods.clickToggleMap);

      //показать или спрятать легенду
      $($this).off('click', ".imagePlayerLegend", methods.switchLegend);

      $($this).find("*").unbind().off();
      $($this).find(".imagePlayer").remove();
      $($this).closest('.S1000Dfigure').removeClass('imagePlayer-init');
    },

    reinit: function ($this) {
      logger('REINIT $this', $this);

      var setts = $($this).find('.localSettingsC').val();

      setts = JSON.parse(setts);
      for (var index = 0; index < setts.legendSpots.length; index++) {
        setts.legendSpots[index] = { todraw: false };
      }
      setts.shawAllRefs = false;
      methods.saveSettings($this, setts);

      // logger('REINIT',setts);
      // logger('SETTINGS',$($this).find('.localSettingsC').val());

      $($this).attr('posx', 0);
      $($this).attr('posy', 0);
      $($this).attr('zoom', 1);
      var allCanvas = $($this).find('canvas');

      for (var i = 1; i < allCanvas.length; i++) {
        $(allCanvas[i]).hide();
      }
      // methods.basicRedrawImageOld($this);

      var element = $($this).find('.imagePlayerImg')[0];
      //logger('element',element);
      var img = $($this).find('.imagePlayerImg .mainImg')[0];
      $($this).attr('posx', ($(element).outerWidth() - $(img).outerWidth()) / 2);
      methods.basicRedrawImageOld($this);

      $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
    },
    basicDrawOld: function (element, img, coordX, coordY, imgW, imgH, $this, settings) {
      /*   if ($(this).hasClass('fullScreen') && !$($this).hasClass('initFull')) {
           logger('logg');
           //чтобы не отображалось при закрытии
           methods.basicRedrawImageOld($this);
         }*/
      coordX = typeof coordX !== 'undefined' ? coordX : 0;
      coordY = typeof coordY !== 'undefined' ? coordY : 0;
      imgW = typeof imgW !== 'undefined' ? imgW : false;
      imgH = typeof imgH !== 'undefined' ? imgH : false;
      $this = typeof $this !== 'undefined' ? $this : false;
      settings = typeof settings !== 'undefined' ? settings : JSON.parse($($this).find('.localSettingsC').val());
      element = typeof element !== 'undefined' ? element : $($this).find('.imagePlayerImg');

      logger('canvas draw');
      //logger('basicDrawOld', element, img, coordX, coordY, imgW, imgH, $this, settings);
      if (imgW != 'auto' && $(element).outerWidth() > imgW) {
        //coordX = ($(element).outerWidth() - imgW)/2;
        $($this).attr('posx', coordX);
      }

      if (imgH == 'auto' || imgW == 'auto') {
        if (imgH == 'auto') {
          $(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': 'auto' });
        }
        if (imgW == 'auto') {
          $(img).css({ 'left': coordX, 'top': coordY, 'width': 'auto', 'height': imgH });
        }
      }
      else {
        $(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': imgH });
        $('.elCircle').remove()
      }
    },

    basicRedrawImageOld: function ($this) {
      logger('basicRedrawImageOld');
      // //console.log($this);
      //var canvas = tmpCanvas;
      var zoom = $($this).attr('zoom');
      var posX = $($this).attr('posx');
      var posY = $($this).attr('posy');

      var sett = methods.readSettings($this);

      //$($this).find('.imagePlayerImg').css({"width":"100%"});
      logger($($this).find('.imagePlayerImg'));

      var element = $($this).find('.imagePlayerImg')[0];
      // //console.log($($this).find('.imagePlayerImg')[0]);
      var img = $($this).find('.imagePlayerImg .mainImg')[0];

      var c = {};//canvas parameters
      c.width = sett.basicWidth;
      c.height = sett.basicHeight;

      methods.basicDrawImageOld(element, img,
        parseFloat($($this).attr('posx')) - ((zoom * c.width - c.width) / 2),
        parseFloat($($this).attr('posy')) - ((zoom * c.height - c.height) / 2),
        zoom * c.width,
        zoom * c.height,
        $this);

      methods.redrawRefs($this, element);

      if (sett.shawAllRefs) {
        // redrawAllRefs()
        var resElem = [];
        //logger('redrawRefs settings', $this.settings);
        if (sett.type == 'vector') {
          //logger('$(resElem[0])',resElem[0]);
          if (sett.legend.length > 0) {
            //logger('$(resElem[0])',resElem[0]);
            for (var i = 0; i < sett.legend.length; i++) {
              //logger('resElem[i]',$(resElem[i]));
              methods.drawRefByElement($this, element, sett.legend[i]);
              //logger(drawUrl);
            }
          }
        }
      }
    },
    basicDrawImageOld: function (element, img, coordX, coordY, imgW, imgH, $this, settings) {
      coordX = typeof coordX !== 'undefined' ? coordX : 0;
      coordY = typeof coordY !== 'undefined' ? coordY : 0;
      imgW = typeof imgW !== 'undefined' ? imgW : false;
      imgH = typeof imgH !== 'undefined' ? imgH : false;
      $this = typeof $this !== 'undefined' ? $this : false;
      settings = typeof settings !== 'undefined' ? settings : JSON.parse($($this).find('.localSettingsC').val());
      element = typeof element !== 'undefined' ? element : $($this).find('.imagePlayerImg');

      // logger('basicDrawImageOld', coordX, coordY, imgW, imgH);

      if (imgH == 'auto' || imgW == 'auto') {
        if (imgH == 'auto') {
          $(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': 'auto' });
        }
        if (imgW == 'auto') {
          $(img).css({ 'left': coordX, 'top': coordY, 'width': 'auto', 'height': imgH });
        }
      }
      else {
        $(img).css({ 'left': coordX, 'top': coordY, 'width': imgW, 'height': imgH });
      }
    },
    saveSettings: function ($this, settings) {
      var setts = $($this).closest('.S1000Dfiguregraphic').find('.localSettingsC').val();
      //  logger("$($this).find('.localSettingsC').val()", $($this).closest('S1000Dfiguregraphic').find('.localSettingsC'));
      setts = JSON.parse(setts);
      //  logger('js', setts);
      setts = $.extend({}, setts, settings);
      setts = JSON.stringify(setts);
      $($this).closest('.S1000Dfiguregraphic').find('.localSettingsC').val(setts);
      //logger("$($this).find('.localSettingsC').val()", $($this).closest('S1000Dfiguregraphic').find('.localSettingsC').val(setts));
    },
    readSettings: function ($this) {
      var setts = $($this).find('.localSettingsC').val();

      //logger('read settings',$($this).find('.localSettingsC').val());
      //logger(setts);
      setts = JSON.parse(setts);
      // //console.log(setts);
      return setts;
    },
    update: function ($this) {
      // logger($(this));
      // logger($($this));
    },
    initiatePlayerSize: function ($this, settings, overloadSizes) {
      // //console.log($this[0]);
      $($this).find('canvas').css({ 'width': '100%' });
      var cWidth = $($($this).find('canvas')[0]).outerWidth();
      $($($this).find('.imagePlayerImg')[0]).css({ 'width': cWidth + 'px' });

      var real = {};

      var vw = window.innerWidth;
      var vh = window.innerHeight;
      //logger('window.innerWidth, window.innerHeight', window.innerWidth, window.innerHeight);

      var maxHeight = vh / 2;
      var maxWidth = cWidth;
      regex = /viewBox="(.*)\s(.*)\s(.*)\s(.*)"/gm;
      var mat = regex.exec(settings.viewBox);
      //logger('viewBox from settings', settings.viewBox, parseFloat(mat[3]), parseFloat(mat[4]));

      if ($($this).hasClass('fullScreen')) {

        $('.imagePlayerMapCanvas').css({ 'background-color': 'white' })

        maxHeight = $($this).outerHeight() - $($($this).find('.imagePlayerSettingsPanel')[0]).outerHeight();

        $($this).find('canvas').css({ 'height': maxHeight + 'px' });
        $($($this).find('.imagePlayerImg')[0]).css({ 'height': maxHeight + 'px' });
      }

      if (!overloadSizes) {
        // $('tr').css({ 'box-shadow': 'none', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none' });
        //logger('NATURAL W & H', $($this).find('.imagePlayerImg img')[0], $($this).find('.imagePlayerImg img')[0].naturalWidth, $($this).find('.imagePlayerImg img')[0].naturalHeight);
        if ($($this).find('.imagePlayerImg img')[0].naturalWidth != undefined && $($this).find('.imagePlayerImg img')[0].naturalWidth != 0
          && $($this).find('.imagePlayerImg img')[0].naturalHeight != undefined && $($this).find('.imagePlayerImg img')[0].naturalHeight != 0) {
          real.width = $($this).find('.imagePlayerImg img')[0].naturalWidth;
          real.height = $($this).find('.imagePlayerImg img')[0].naturalHeight;
        }
        else {
          real.width = $($($this).find('.imagePlayerImg img')[0]).outerWidth();
          real.height = $($($this).find('.imagePlayerImg img')[0]).outerHeight();
        }

        /*if(settings.viewBox == 'viewBox="0 0 0 0"'){
          settings.viewBox = 'viewBox="0 0 '+ real.width + ' ' + real.height +'"';
        }*/
      }
      else {
        real.width = cWidth;
        var tmpW = parseFloat(mat[3]);
        var tmpH = parseFloat(mat[4]);

        var r = real.width / tmpW;
        real.height = tmpH * r;
      }

      //logger(mat);
      var i = {};
      i.width = real.width;
      i.height = real.height;
      // logger('max sizes', maxWidth, maxHeight);
      // logger('i.width, i.height', i.width, i.height);

      //var relCanvas = maxWidth/maxHeight;
      //var relI = i.width/i.height;
      //logger('rel sizes', relCanvas, relI);
      var res = {};
      var rel = maxWidth / i.width;
      res.real = real;

      if (i.height * rel <= maxHeight) {
        //logger('i.height * rel <= maxHeight', i.height * rel, maxHeight);

        res.width = maxWidth;
        //var tmp = maxWidth /  i.width;
        res.height = i.height * rel;
      }
      else {
        res.height = maxHeight;
        var tmp = maxHeight / i.height;
        res.width = i.width * tmp;
        //logger('i.height * rel > maxHeight', maxHeight, maxHeight /  i.height, i.width * tmp);
      }

      //logger('real',real);
      //window content area sizes
      //logger('initial size', res);

      return res;
      //var maxWidth = cWidth;

      /*if($($($this).find('.imagePlayerImg img')[0]).outerHeight() > maxHeight && !$(this).hasClass('fullScreen')){
        $($($this).find('.imagePlayerImg img')[0]).css({'height': maxHeight+'px', 'width': 'auto'});
      }*/

      // var initWidth = $($($this).find('.imagePlayerImg img')[0]).outerWidth();
      // var initHeight = $($($this).find('.imagePlayerImg img')[0]).outerHeight();

      //$($this).find('.imagePlayerImg').css({'width': initWidth+'px', 'height': initHeight+'px'});
      //$($this).find('canvas').css({'height': initHeight+'px'});
    },
    setPlayerSize: function ($this, xSize, ySize) {
      //logger('setPlayerSize',$this, xSize, ySize);
      if ($($this).hasClass('fullScreen')) {
        maxHeight = $($this).outerHeight() - $($($this).find('.imagePlayerSettingsPanel')[0]).outerHeight();

        $($this).find('canvas').css({ 'height': maxHeight + 'px' });
        $($($this).find('.imagePlayerImg')[0]).css({ 'height': maxHeight + 'px' });
        $($($this).find('.imagePlayerImg .mainImg')[0]).css({ 'height': ySize + 'px', 'width': xSize + 'px' });
      }
      else {
        $($this).find('canvas').css({ 'width': '100%', 'height': ySize + 'px' });
        $($this).find('.imagePlayerImg').css({ 'width': '100%', 'height': ySize + 'px' });
        $($($this).find('.imagePlayerImg .mainImg')[0]).css({ 'height': ySize + 'px', 'width': xSize + 'px' });
      }
      //logger($($($this).find('.imagePlayerImg .mainImg')[0]));
    },
    eventsList: function (element) {
      // В разных версиях jQuery список событий получается по-разному
      var events = element.data('events');
      if (events !== undefined) return events;

      events = $.data(element, 'events');
      if (events !== undefined) return events;

      events = $._data(element, 'events');
      if (events !== undefined) return events;

      events = $._data(element[0], 'events');
      if (events !== undefined) return events;

      return false;
    },
    checkEvent: function (element, eventname) {
      var events,
        ret = false;

      events = eventsList(element);
      if (events) {
        $.each(events, function (evName, e) {
          if (evName == eventname) {
            ret = true;
          }
        });
      }

      return ret;
    },

    /*    forBtn(){
          $('button[imagePlayerSettingsButton imagePlayerHotspots active]').attr('imagePlayerSettingsButton imagePlayerHotspots active', 'imagePlayerSettingsButton imagePlayerHotspots')
        }*/
  };

  $.fn.imagePlayer = function (method) {
    //logger('imagePlayer вызван');
    logger('method', method);
    //logger('this', this);
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    }
    else if (typeof method === 'object' || !method) {
      logger('инициализация');
      logger('arguments', arguments);
      return methods.init.apply(this, arguments);
    }
    else {
      $.error('Метод с именем ' + method + ' не существует для jQuery.imagePlayer');
    }
  };
})(jQuery);