<script>
  const MapZoom = [];
  const MapPos  = [];

  <?php
    //Estados
    $Query = "
      SELECT
        est.Id,
        est.Nombre, est.Corto,
        est.Zoom, est.TransformOrigin
      FROM Estados est
      ORDER BY est.Nombre ASC
    ";
    $Estados = $mysqli->query($Query);
    mysqli_data_seek($Estados, 0);
    while($Est = mysqli_fetch_array($Estados)) {
  ?>
    MapZoom["<?php echo $Est[Corto] ?>"] = '<?php echo $Est[Zoom] ?>';
    MapPos["<?php echo $Est[Corto] ?>"]  = '<?php echo $Est[TransformOrigin] ?>';
  <?php } ?>

  $("#Layer_1").bind('mouseover',function(event){
    // $('#Layer_1').find('g').css('transform', 'scale(2)');
  }).bind('mouseleave',function(){
    $('#Layer_1').find('g').css('transform', 'scale(1)');
  });

  $("#Layer_2").bind('mouseover',function(event){
    // $('#Layer_1').find('g').css('transform', 'scale(2)');
  }).bind('mouseleave',function(){
    $('#Layer_2').find('g').css('transform', 'scale(1)');
  });

  $(".BtnEstado").bind('click',function(event){
    var sel = $(this).data('codigo');
    console.log(sel);

    $('.Card-Estados').hide();

    // $('.Card-'+sel).show(500);
    $('.CardAll').hide();
    $('.Card-'+sel).show();

    $('#Layer_1').find('g').css('transform-origin', MapPos[sel]);
    $('#Layer_1').find('g').css('transform', 'scale(2)');
    // $('#Layer_1').find('g').css('transform', 'scale(' + MapZoom[sel] + ')');
    console.log(MapPos[sel]);

  }).bind('mouseleave',function(){
    // var sel = $(this).data('codigo');
    // $('.Card-'+sel).fadeOut(500);
    // $('.CardAll').show();
    // $('.Card-'+sel).hide();
  });

  //Click Hover State
  $(".BtnEstado").bind('mouseover',function(event){
    var sel = $(this).data('codigo');
    console.log(sel);

    $('.Card-Estados').hide();

    $('.CardAll').hide();
    $('.Card-'+sel).show();

  }).bind('mouseleave',function(){

    $('.Card-Estados').hide();
    $('.CardAll').show();

  });

  $(".BtnEstado").bind('click',function(event){
    var sel = $(this).data('codigo');
    console.log('ModalEstado-'+sel);
    $('#ModalEstado'+sel).modal('toggle');
  });

  $(".BtnEstadoTxt").bind('click',function(event){
    var sel = $(this).data('codigo');
    console.log('ModalEstado-'+sel);
    $('#ModalEstado'+sel).modal('toggle');
  });  

  //End Click Hover State

  var svg1 = document.getElementById('Layer_1');

  console.log(svg1);
  console.log('style', svg1.style.width + 'x' + svg1.style.height);
  console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
  console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight);

  var bBox = svg1.getBBox();
  console.log('XxY', bBox.x + 'x' + bBox.y);
  console.log('size', bBox.width + 'x' + bBox.height);


  // $("#Layer_1").click(function(e){
  // $("#Layer_1").bind('mouseover',function(event){

  //Zoom y posición Cursor en Mapa
  // $("g").mouseover(function(e){
    $('#Layer_1').find("g").mousemove(function(e) {
      var parentOffset = $(this).parent().offset();
      //or $(this).offset(); if you really just want the current element's offset
      var relX = e.pageX - parentOffset.left;
      var relY = e.pageY - parentOffset.top;
      // console.log('X: '+relX+" Y:"+relY);
      XPor = (relX / bBox.width) * 100;
      YPor = (relY / bBox.height) * 100;
      XPor = XPor * 1.5;
      YPor = YPor * 1.5;
      // console.log('XPor: '+XPor+" YPor:"+YPor);
      $('#Layer_1').find('g').css('transform', 'scale(2)');
      $('#Layer_1').find('g').css('transform-origin', XPor+'% '+YPor+'%');
    });



    $('#Layer_2').find("g").mousemove(function(e) {
      var parentOffset = $(this).parent().offset();
      //or $(this).offset(); if you really just want the current element's offset
      var relX = e.pageX - parentOffset.left;
      var relY = e.pageY - parentOffset.top;
      // console.log('X: '+relX+" Y:"+relY);
      XPor = (relX / bBox.width) * 100;
      YPor = (relY / bBox.height) * 100;
      XPor = XPor * 1.5;
      YPor = YPor * 1.5;
      // console.log('XPor: '+XPor+" YPor:"+YPor);
      $('#Layer_2').find('g').css('transform', 'scale(2)');
      $('#Layer_2').find('g').css('transform-origin', XPor+'% '+YPor+'%');
    });

  // });
  //End Zoom y posición Cursor en Mapa

  //End Seleccion Mapa 1

  //Click Hover State
  $(".BtnEstadoAre").bind('mouseover',function(event){
    var sel = $(this).data('codigo');
    var area = $(this).data('area');
    console.log(sel);
    console.log(area);

    $('.Card-Estados').hide();
    $('.EstSelMap2').hide();
    $('.EstSelMap2-'+sel).show();

    $('.CardAll').hide();
    $('.Card-'+area).show();


  }).bind('mouseleave',function(){

    $('.Card-Estados').hide();
    $('.CardAll').show();

  });
  //End Click Hover Stat

</script>
