<!-- you should include these three files apart from style.css
    <link rel="stylesheet" href="../src/css/cropper.css" type="text/css">
		<script type="text/javascript" src="../src/js/trmb-css.js"></script>
		<script type="text/javascript" src="../src/js/cropper.js"></script>
-->
<div class="wrapper-container">
  <div class="avatar">
    <img src="" alt="" id="avatar-output" class="preview"/>
    <i class="i64 icon_solid_user"></i>
    <div class="edit-avatar">
      <i class="i16 icon_line_edit" onclick="openFileBrowse()"></i>
      <input type="file" name="file" id="image-file" onchange="onFileChange(event)"/>
    </div>
  </div>
  <div class="reveal-overlay" id="image-preview-container">
    <div class="reveal">
      <header>
  				<h1>Crop Image</h1>
  				<button class="close-button close" aria-label="Close reveal" type="button">
  						<i class="i32 icon_close_popup"></i>
  					</button>
  		</header>
  		<section class="crop-wrapper">
        <div class="crop-selection">
          <img id="output" alt="preview"/>
        </div>
        <div class="preview-container">
          <div class="preview">
          </div>
          <div class="preview circle">
          </div>
        </div>
      </section>
      <footer>
        <button class="button small clear" onclick="clearCropData()">Cancel</button>
        <button class="button small default" onclick="setCropData()">Crop</button>
      </footer>
    </div>
  </div>
</div>
<style>
.reveal {
  width: 550px;
  height: 550px;
}
.reveal section{
  width: 250px;
  height: 275px;
}
#avatar-output {
 display: none;
}
</style>
<script type="text/javascript">
  var image = document.getElementById('output');
  var previews = document.querySelectorAll('.wrapper-container .preview');
  var cropper = null;
  function openFileBrowse() {
      document.getElementById('image-file').click();
  }
  function setCropData() {
    document.getElementById('avatar-output').src = cropper.getCroppedCanvas().toDataURL('image/jpeg');
    document.getElementById('avatar-output').style.display = 'block';
    document.getElementById('avatar-output').style.height = '7em';
    clearCropData();
  }
  function clearCropData() {
    if( cropper ) {
      cropper.destroy();
      previews.forEach(function(elem){
        elem.innerHTML = '';
      });
    }
    document.getElementById('image-preview-container').style.display = 'none';
  }
  function onFileChange(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
      document.getElementById("image-preview-container").style.display = "block";
      if( cropper ) {
        cropper.destroy();
        previews.forEach(function(elem){
          elem.innerHTML = '';
        });
      }
      document.querySelector('.preview-container').style.display = "block";
      //document.querySelector('#avatar-output').style.display = "block";
      cropper = new Cropper(image, {
        viewMode: 2,
        aspectRatio: 4 / 4,
        ready: function () {
          var clone = this.cloneNode();
          clone.className = ''
          clone.style.cssText = (
            'display: block;' +
            'width: 100%;' +
            'min-width: 0;' +
            'min-height: 7em;' +
            'max-width: none;' +
            'max-height: none;'
          );
          previews.forEach(function (elem) {
            elem.appendChild(clone.cloneNode());
          });
        },
        crop: function(e) {
          var data = e.detail;
          var cropper = this.cropper;
          var imageData = cropper.getImageData();
          var previewAspectRatio = data.width / data.height;
          previews.forEach(function (elem, index) {
            var previewImage = previews[index].children[0];
            if( previewImage ) {
              var previewWidth = previews[index].offsetWidth;
              var previewHeight = previewWidth / previewAspectRatio;
              var imageScaledRatio = data.width / previewWidth;
              elem.style.height = previewHeight + 'px';
              previewImage.style.width = imageData.naturalWidth / imageScaledRatio + 'px';
              previewImage.style.height = imageData.naturalHeight / imageScaledRatio + 'px';
              previewImage.style.marginLeft = -data.x / imageScaledRatio + 'px';
              previewImage.style.marginTop = -data.y / imageScaledRatio + 'px';
            }
          });
        }
      });
    };
    reader.readAsDataURL(event.target.files[0]);
  }
</script>