/**

* PaperCropper
*
* @param container
*  Main container of objects
* @param options
*  Extra options
*
* Example, important all classes used for crop starts with "crop-image*"
* The buttons, classes 'crop-image-btn-*' are optional
*

<!– Main container (you need to supply this in constructor) –> <div class=“crop-image-container”>

<!-- Hidden input for save the crop values -->
<input class="crop-image-value-x"       type="hidden" name="cover_crop_x"       value="">
<input class="crop-image-value-y"       type="hidden" name="cover_crop_y"       value="">
<input class="crop-image-value-width"   type="hidden" name="cover_crop_width"   value="">
<input class="crop-image-value-height"  type="hidden" name="cover_crop_height"  value="">
<input class="crop-image-value-ratio"   type="hidden" name="cover_crop_ratio"   value="">

<!-- File input for change the image -->
<input class="crop-image-file-input" type="file">

<hr>

<!-- Wrap the image or canvas element with a block element (container) -->
<div class="crop-image-wrapper">
 <img class="crop-image" src="">
</div>

<hr>

<button class="crop-image-btn-zoom-in"     type="button">Zoom in</button>
<button class="crop-image-btn-zoom-out"    type="button">Zoom out</button>
<button class="crop-image-btn-move-left"   type="button">Move left</button>
<button class="crop-image-btn-move-right"  type="button">Move right</button>
<button class="crop-image-btn-move-up"     type="button">Move up</button>
<button class="crop-image-btn-move-down"   type="button">Move down</button>

</div>

*/

function PaperCropper(container, opt) {

var that = this;
this.container = $(container);
this.image = $(container).find('.crop-image');
this.inputX = $(container).find('.crop-image-value-x');
this.inputY = $(container).find('.crop-image-value-y');
this.inputWidth = $(container).find('.crop-image-value-width');
this.inputHeight = $(container).find('.crop-image-value-height');
this.inputRatio = $(container).find('.crop-image-value-ratio');

var aspect = $(container).attr('data-crop-image-range');
if( isNaN(aspect) ) {
  this.aspect = null;
} else {
  this.aspect = parseFloat(aspect);
}

if ( isNaN(this.inputRatio.val()) ) {
    this.inputRatio.val(1);
}

this.init();

}

/** Check if browswer support it */ PaperCropper.isSupported = function() {

return (typeof FileReader !== "undefined");

}

/** Initializes all */ PaperCropper.prototype.init = function() {

var fileInput = this.container.find('input.crop-image-file-input');
var that = this;

// file input change
fileInput.change(function(event){
  that.fileInputChange(event);
});

// cropper
this.cropper = new Cropper(this.image[0], {
  aspectRatio: this.aspect,
  crop: function(event){
    that.cropperCrop(event);
  },
  zoom: function (event) {
    that.cropperZomm(event);
  },
  built: function() {
    console.log('cropper build')
    that.cropperBuild();
  }
});

// buttons
this.container.find('.crop-image-btn-zoom-in').click(function(){
  that.cropper.zoom(0.1);
});
this.container.find('.crop-image-btn-zoom-out').click(function(){
  that.cropper.zoom(-0.1);
});
this.container.find('.crop-image-btn-move-left').click(function(){
  that.cropper.move(-10,0);
});
this.container.find('.crop-image-btn-move-right').click(function(){
  that.cropper.move(10,0);
});
this.container.find('.crop-image-btn-move-up').click(function(){
  that.cropper.move(0,-10);
});
this.container.find('.crop-image-btn-move-down').click(function(){
  that.cropper.move(0,10);
});

}

/** Callback method used when cropper are full loaded */ PaperCropper.prototype.cropperBuild = function() {

// set initial values
this.setCropperData(this.inputX.val(), this.inputY.val(), this.inputWidth.val(), this.inputHeight.val(), this.inputRatio.val());

}

/** Callback method used when the user changes the crop */ PaperCropper.prototype.cropperCrop = function (event) {

console.log('crop:',event.detail)
console.log('crop crop data:',this.cropper.getData())
this.inputX.val(parseInt(event.detail.x));
this.inputY.val(parseInt(event.detail.y));
this.inputWidth.val(parseInt(event.detail.width));
this.inputHeight.val(parseInt(event.detail.height));

}

PaperCropper.prototype.cropperZomm = function (event) {

console.log('zoom:', event.detail)
console.log('zoom crop data:',this.cropper.getData())
this.inputRatio.val(parseFloat(event.detail.ratio));

}

/** Callback method used when the user changes the file */ PaperCropper.prototype.fileInputChange = function (event) {

var input = event.target;
var that = this;
if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function (e) {
    that.cropper.replace(e.target.result);
  }
  reader.readAsDataURL(input.files[0]);
}

}

/** Set the cropper data */ PaperCropper.prototype.setCropperData = function (x, y, width, height, ratio) {

this.cropper.zoomTo(parseFloat(ratio));
this.cropper.setData({
  'x': parseInt(x),
  'y': parseInt(y),
  'width': parseInt(width),
  'height': parseInt(height),
  'rotate': 0,
  'scaleX': 1,
  'scaleY': 1,
});

}