/*
Image cropper

Crop and preview the image

Markup:
<!-- 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>

Styleguide UI Elements.Image cropper
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 300;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

h4, p {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

h5 {
  font-size: 0.75rem;
}

h4 {
  font-weight: 600;
}

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'); */
/* @mixin border-radius{
  border-radius: 2px;
} */
/* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); */
.end {
  display: flex;
  justify-content: flex-end;
}

.align-center {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  /*Avoid margin top issue (Occur only when margin-top <= -height)
 */
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #FFFFFF;
  opacity: 0;
}

.cropper-modal {
  background-color: #000000;
  opacity: .5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline-color: rgba(255, 255, 255, 0.75);
  outline: 2px solid #FFFFFF;
  overflow: hidden;
  width: 100%;
  border-radius: 50%;
}

.cropper-dashed {
  border: 0 dashed #EAEAEF;
  display: block;
  opacity: .5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:before,
.cropper-center:after {
  background-color: #EAEAEF;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: .1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #FFFFFF;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #FFFFFF;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #FFFFFF;
  border-radius: 50%;
  height: 5px;
  opacity: .75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: .75;
    width: 5px;
  }
}

.cropper-point.point-se:before {
  background-color: #FFFFFF;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); */
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.wrapper-container {
  width: 450px;
}

.wrapper-container img {
  max-width: 100%;
}

.preview-container {
  display: none;
  margin-left: 6rem;
}

.preview-container .preview {
  margin: 10px auto;
  overflow: hidden;
  width: 7rem;
  height: 7rem;
}

.preview-container .preview img {
  max-width: 100%;
}

.preview-container .preview.circle {
  border-radius: 50%;
}

#avatar-output {
  display: none;
}

.crop-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.crop-selection {
  width: 250px;
  height: 275px;
}