<!– JS function to reposition SVG labels on images !fullwidth –> <!– We use Front Matter to determine if this script should be included, hence here and not in assets –>

<script type=“text/javascript”>

function reposition_svg_labels(){

  /* get svg labels */
  var svg = document.querySelectorAll('.augment-not-fullwidth .svg__labels');

  /* rendered image in pixels */
  var x_i_px = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
  var y_i_px = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
  var r_i = x_i_px / y_i_px ;

  /* original image in pixels */
  var x_0_px = {{ page.images.guarantee.size | split: ', ' | first }} ;
  var y_0_px = {{ page.images.guarantee.size | split: ', ' | last }} ;
  var r_0 = x_0_px / y_0_px ;

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

    /* Reversing the calculation we did in Liquid on build */
    var dx_0_px = parseInt( svg[i].getAttribute('x'), 10 ) / 100 * x_0_px ;
    var dy_0_px = parseInt( svg[i].getAttribute('y'), 10 ) / 100 * y_0_px ;

    if (r_i > r_0 ) { /* x_i / y_i > r_0 so x_i is 100% */
      /* rendered image magnification */
      var scale = x_i_px / x_0_px ;
      var dy_i_px = dy_0_px * scale - ( (y_0_px * scale - y_i_px ) / 2 ) ;
      svg[i].setAttribute("y", ( dy_i_px * 100 / y_i_px + '%') ) ;

    }
    if (r_i < r_0 ) { /* x_i/y_i < r_0 so y_i is 100% */
      /* rendered image magnification */
      var scale = y_i_px / y_0_px ;
      var dx_i_px = dx_0_px * scale - ( (x_0_px * scale - x_i_px ) / 2 ) ;
      svg[i].setAttribute("x", ( dx_i_px * 100 / x_i_px + '%') ) ;
    }
  };
}
reposition_svg_labels()

</script>