<div id='pd-measurement' class='wrapper hidden'>

  <!-- icon for close cross. Can be replaced with an other svg, an image or a button. -->
    <svg class="close-button" fill="white" onclick="closePdMeasurement()" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"/></svg>

  <div id="msrt-container"></div>
</div>

<script src="//msrt-integration-api.fittingbox.com/index.js" type="text/javascript"></script>

<!-- You can use a link 'a' or a button, or any element allowing onlick. -->
<a onclick="openPdMeasurement()" class="open-link">Open PD Measurement</a><br/>

<button onclick="openPdMeasurement()">Open PD Measurement</button>

/* Container for measurement. You can define its size here. 
Those values are recommanded to have the size of a phone. */
#msrt-container {
  width:350px;
  height:700px;
}

/* Style for overlay. Takes all screen and center measurement. */
.wrapper {
  position:fixed; 
  width:100%; 
  height:100%;   
  z-index:999999;
  background-color:rgba(5,5,5, .9);
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Stylization for close button. Optionnal. */
.close-button {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  margin: 1em;
}

/* Stylization for open link. Optionnal. */
.open-link {
  cursor: pointer;
  color:blue;
}

.open-link:hover {
  color:red;
}

/* Optional, keep if you have a white border araound the page */
body {
  margin:0;
}

.hidden {
  display:none;
}

 const params = {
   // Example license
  apiKey: "J31RjpMySewnZu8LNyjzQgjUochRFiZIqTsGMJsL",
  widgetUrl: 'https://pd-measurement.fittingbox.com',
};

window.onload = function () {
  fitmixInstance = Msrt.createWidget("msrt-container",
    {...params,
    onGetResultPd: (result) => console.log('onGetResultPd: ', result),
    onTooManyErrors: () => console.log('onTooManyErrors')});
};

function openPdMeasurement(){
  measurementEl = document.getElementById('pd-measurement');
  measurementEl.classList.remove('hidden')
}

function closePdMeasurement(){
  measurementEl = document.getElementById('pd-measurement');
  measurementEl.classList.add('hidden')
}