text: ﻿(function () {
              document.addEventListener("DOMContentLoaded", function () {
                  var dropElements = document.querySelectorAll('[data-dropzone]');
                  var previewTemplate = "<div class=\"dz-preview dz-file-preview\"><div class=\"dz-image\"><img data-dz-thumbnail /></div><div class=\"dz-details collapse\"><div class=\"dz-size collapse\"><span data-dz-size></span></div><div class=\"dz-filename collapse\"><span data-dz-name></span></div></div><div class=\"dz-progress collapse\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div><div class=\"dz-error-message collapse\"><span data-dz-errormessage></span></div><div class=\"dz-success-mark collapse\"></div><div class=\"dz-error-mark collapse\"></div></div>";
  
                  window.cloudscribeDropAndCrop = {
  
                      openServerBrowser: function (fileBrowseUrl) {
                          $('#fileBrowseDialog').find('iframe').attr('src', fileBrowseUrl);
                          $('#fileBrowseDialog').modal('show');
                      },
                      closeServerBrowser: function () {
                          $('#fileBrowseDialog').modal('hide');
  
                      },
  
                      imageItems : [],
  
                      buildImageEditor: function (div) {
                          var imageItem = {
                              dropZoneDiv: div,
  
                              setupCropper: function () {
                                  var resizeWidth = new Number(this.dropZoneDiv.dataset.resizeWidth);
                                  var resizeHeight = new Number(this.dropZoneDiv.dataset.resizeHeight);
                                  var cropAreaWidth = new Number(this.dropZoneDiv.dataset.cropAreaWidth);
                                  var cropAreaHeight = new Number(this.dropZoneDiv.dataset.cropAreaHeight);
                                  var opts = {
                                      viewport: {
                                          width: cropAreaWidth,
                                          height: cropAreaHeight
                                      },
                                      boundary: {
                                          width: cropAreaWidth,
                                          height: cropAreaHeight
                                      }
                                  };
                                  this.cropper = new Croppie(this.fullSizeImage, opts);
  
                                  var btnSave = document.getElementById(this.dropZoneDiv.id + "-save-crop");
                                  if (btnSave) {
                                      var that = this;
                                      btnSave.classList.remove("collapse");
                                      btnSave.onclick = function () {
                                          //console.log('save button clicked');
                                          if (that.cropper) {
                                              var cropInfo = that.cropper.get();
                                              //console.log(cropInfo);
                                              var x1 = new Number(cropInfo.points[0]);
                                              var y1 = new Number(cropInfo.points[1]);
                                              var x2 = new Number(cropInfo.points[2]);
                                              var y2 = new Number(cropInfo.points[3]);
                                              var cropWidth = x2 - x1;
                                              var cropHeight = y2 - y1;
                                              var finalWidth = new Number(that.dropZoneDiv.dataset.resizeWidth);
                                              var widthRatio = cropWidth / cropHeight; 
                                              var finalHeight = Math.round(finalWidth / widthRatio);
                                              
                                              var formData = new FormData();
                                              formData.append("sourceFilePath", that.fullSizeInput.value);
                                              formData.append("x1", x1);
                                              formData.append("y1", y1);
                                              formData.append("widthToCrop", cropWidth);
                                              formData.append("heightToCrop", cropHeight);
                                              formData.append("finalWidth", that.dropZoneDiv.dataset.resizeWidth);
                                              formData.append("finalHeight", finalHeight);
                                              
                                              $.ajax({
                                                  type: "POST",
                                                  processData: false,
                                                  contentType: false,
                                                  headers: {
                                                      'X-CSRFToken': that.dropZoneDiv.dataset.antiForgeryToken
                                                  },
                                                  dataType: "json",
                                                  url: that.dropZoneDiv.dataset.fileCropUrl,
                                                  data: formData
  
                                              }).done(function (data, textStatus, jqXHR) {
                                                  that.handleCropResult(data);
                                              })
                                                  .fail(function (jqXHR, textStatus, errorThrown) {
                                                      alert(textStatus);
                                                  })
                                                  ;
  
  
                                          }
                                          else {
                                              //console.log('cropper not found');
  
                                          }
  
                                      };
                                  }
                                  else {
                                      //console.log('failed to find save button');
  
                                  }
  
                              },
                              destroyCropper: function () {
                                  if (this.cropper) {
                                      this.cropper.destroy();
                                      this.cropper = undefined;
                                      var btnSave = document.getElementById(this.dropZoneDiv.id + "-save-crop");
                                      if (btnSave) {
                                          btnSave.classList.add("collapse");
                                      }
                                  }
                              },
  
                              
  
                              clearInputs: function () {
                                  if (this.dropZoneDiv.dataset.targetFullsizeInputId) {
                                      this.fullSizeInput = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeInputId);
                                      this.fullSizeInput.value = '';
  
                                  }
                                  if (this.dropZoneDiv.dataset.targetResizedInputId) {
                                      this.resizedInput = document.getElementById(this.dropZoneDiv.dataset.targetResizedInputId);
                                      this.resizedInput.value = '';
                                  }
                                  if (this.dropZoneDiv.dataset.targetThumbInputId) {
                                      this.thumbInput = document.getElementById(this.dropZoneDiv.dataset.targetThumbInputId);
                                      this.thumbInput.value = '';
                                  }
  
                              },
  
                              clearImages: function () {
                                  this.destroyCropper();
                                  if (this.dropZoneDiv.dataset.targetFullsizeImageId) {
                                      if(this.dropZoneDiv.dataset.fullsizePlaceholderImage) {
                                          var img = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeImageId);
                                          img.src = this.dropZoneDiv.dataset.fullsizePlaceholderImage;
                                          //console.log('set fullsize placeholder');
                                      }
                                  }
  
                                  if (this.dropZoneDiv.dataset.targetResizedImageId) {
                                      if (this.dropZoneDiv.dataset.resizedPlaceholderImage) {
                                          var img = document.getElementById(this.dropZoneDiv.dataset.targetResizedImageId);
                                          img.src = this.dropZoneDiv.dataset.resizedPlaceholderImage;
                                          //console.log('set resized placeholder');
                                      }
                                  }
  
                                  if (this.dropZoneDiv.dataset.targetThumbImageId) {
                                      if (this.dropZoneDiv.dataset.thumbPlaceholderImage) {
                                          var img = document.getElementById(this.dropZoneDiv.dataset.targetThumbImageId);
                                          img.src = this.dropZoneDiv.dataset.thumbPlaceholderImage;
                                          //console.log('set thumb placeholder');
                                      }
                                  }
  
                              },
  
                              handleCropResult: function (cropResult) {
                                  this.destroyCropper();
                                  this.fullSizeImage.src = cropResult.resizedUrl;
                                  if (this.resizedInput) {
                                      this.resizedInput.value = cropResult.resizedUrl;
                                  } else {
                                      if (this.fullSizeImage) {
                                          this.fullSizeImage.value = cropResult.resizedUrl;
                                      }
                                  }
                                  
                                  if (window.HandleCropResult) {
                                      window.HandleCropResult(cropResult.resizedUrl);
                                  }
                              },
  
                              serverFileSelected: function (url) {
                                  this.destroyCropper();
                                  this.clearInputs();
                                  if (this.dropZoneDiv.dataset.targetFullsizeImageId) {
                                      this.fullSizeImage = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeImageId);
                                      this.fullSizeImage.src = url;
                                  }
                                  if (this.dropZoneDiv.dataset.targetResizedImageId) {
                                      this.resizedImage = document.getElementById(this.dropZoneDiv.dataset.targetResizedImageId);
                                      this.resizedImage.src = url;
                                  }
                                  if (this.dropZoneDiv.dataset.targetFullsizeInputId) {
                                      this.fullSizeInput = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeInputId);
                                      this.fullSizeInput.value = url;
  
                                  }
                                  if (this.dropZoneDiv.dataset.targetResizedInputId) {
                                      this.resizedInput = document.getElementById(this.dropZoneDiv.dataset.targetResizedInputId);
                                      this.resizedInput.value = url;
                                  }
  
                                  if (window.ServerFileSelected) {
                                      window.ServerFileSelected(url);
                                  }
  
                                  cloudscribeDropAndCrop.closeServerBrowser();
  
                                  if (this.dropZoneDiv.dataset.enableCrop == "true") {
                                      this.setupCropper();
                                  }
  
                              },
  
                              dropZoneAddedFile: function (file) {
                                  // if a new file is dropped destroy the old croppie
                                  if (this.cropper) {
                                      this.destroyCropper();
                                  }
                              },
                              dropZoneSending: function (file, xhr, formData) {
  
                                  if ((this.dropZoneDiv.dataset.resizeWidth) && (this.dropZoneDiv.dataset.resizeHeight)) {
                                      formData.append("maxWidth", this.dropZoneDiv.dataset.resizeWidth);
                                      formData.append("maxHeight", this.dropZoneDiv.dataset.resizeHeight);
                                  }
  
                                  if (this.dropZoneDiv.dataset.resizeImage == "false")
                                  {
                                      formData.append("resizeImage", false);
  
                                  }
                                  
                                  if (this.dropZoneDiv.dataset.targetPath) {
                                      formData.append("targetPath", this.dropZoneDiv.dataset.targetPath);
                                  }
                                  if (div.dataset.createThumb == 'true') {
                                      formData.append("createThumbnail", this.dropZoneDiv.dataset.createThumb);
                                  }
                                  if (this.dropZoneDiv.dataset.keepOriginal == 'true') {
                                      formData.append("keepOriginal", true);
                                  }
                                  if (this.dropZoneDiv.dataset.keepOriginal == 'false') {
                                      formData.append("keepOriginal", false);
                                  }
                              },
                              dropZoneSuccess: function (file, serverResponse) {
                                  if (this.dropZone) {
                                      this.dropZone.removeFile(file);
                                  }
                                  //console.log('drop success');
                                  //console.log(serverResponse);
  
                                  var fsImageUrl = serverResponse[0].originalUrl || serverResponse[0].resizedUrl;
                                  var resizedUrl = serverResponse[0].resizedUrl || serverResponse[0].originalUrl;
                                  var thumbUrl = serverResponse[0].thumbUrl;
                                  this.resizedImage = this.dropZoneDiv.getElementsByTagName('img')[0];
                                  if (this.resizedImage) {
                                      this.resizedImage.src = resizedUrl;
                                  }
                                  else if (this.dropZoneDiv.dataset.targetResizedImageId) {
                                      this.resizedImage = document.getElementById(this.dropZoneDiv.dataset.targetResizedImageId);
                                      if (this.resizedImage) {
                                          this.resizedImage.src = resizedUrl;
                                      }
                                  }
  
                                  if (this.dropZoneDiv.dataset.targetThumbImageId) {
                                      this.thumbImage = document.getElementById(this.dropZoneDiv.dataset.targetThumbImageId);
                                      if (this.thumbImage) {
                                          this.thumbImage.src = thumbUrl;
                                      }
                                  }
  
                                  if (this.dropZoneDiv.dataset.targetFullsizeImageId) {
                                      this.fullSizeImage = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeImageId);
                                      if (this.fullSizeImage) {
                                          this.fullSizeImage.src = fsImageUrl;
                                          if (this.dropZoneDiv.dataset.enableCrop == "true") {
                                              this.setupCropper();
                                          }
                                      }
                                  }
  
                                  if (this.dropZoneDiv.dataset.targetFullsizeInputId) {
                                      this.fullSizeInput = document.getElementById(this.dropZoneDiv.dataset.targetFullsizeInputId);
                                      if (this.fullSizeInput) {
                                          this.fullSizeInput.value = fsImageUrl;
                                      }
                                  }
                                  if (this.dropZoneDiv.dataset.targetResizedInputId) {
                                      this.resizedInput = document.getElementById(this.dropZoneDiv.dataset.targetResizedInputId);
                                      if (this.resizedInput) {
                                          this.resizedInput.value = resizedUrl;
                                      }
                                  }
                                  if (this.dropZoneDiv.dataset.targetThumbInputId) {
                                      this.thumbInput = document.getElementById(this.dropZoneDiv.dataset.targetThumbInputId);
                                      if (this.thumbInput) {
                                          this.thumbInput.value = thumbUrl;
                                      }
                                  }
                              },
                              dropZoneError: function (file, errorMessage) {
                                  console.log(errorMessage);
                              }
  
                          };
  
                          imageItem.dropZone = this._buildDropZone(imageItem, imageItem.dropZoneDiv);
                          if (div.dataset.fileBrowseUrl && (div.dataset.enableBrowseServer == 'true')) {
                              var btnBrowseServer = document.getElementById(div.id + "-browse-server");
                              if (btnBrowseServer) {
                                  btnBrowseServer.classList.remove("collapse");
                                  btnBrowseServer.onclick = function () {
                                      cloudscribeDropAndCrop.openServerBrowser(div.dataset.fileBrowseUrl);
                                      window.FileSelectCallback = function (url) {
                                          imageItem.serverFileSelected(url);
                                      };
                                  };
                              }
                          }
  
                          cloudscribeDropAndCrop.imageItems.push(imageItem);
                          return imageItem;
                      },
  
                      clearOneZoneItems: function (divId) {
                          for (i = 0; i < this.imageItems.length; i++) {
                              if (this.imageItems[i].dropZoneDiv.id == divId) {
                                  this.imageItems[i].clearInputs();
                                  this.imageItems[i].clearImages();
                              } 
                          }
                      },
  
                      clearAllItems: function () {
                          for (i = 0; i < this.imageItems.length; i++) {
                              this.imageItems[i].clearInputs();
                              this.imageItems[i].clearImages();
                          }
                      },
  
                      _buildDropZone: function (imageItem, div) {
  
                          var myDropzone = new Dropzone('#' + div.id, {
                              url: div.dataset.uploadUrl,
                              method: "post",
                              headers: {
                                  'X-CSRFToken': div.dataset.antiForgeryToken
                              },
                              maxFiles: 1,
                              acceptedFiles: div.dataset.acceptedFiles,
                              previewTemplate: previewTemplate,
                              createImageThumbnails: false,
                              clickable: true
  
                          });
                          myDropzone.on("addedfile", function (file) {
                              if (imageItem.dropZoneAddedFile) {
                                  imageItem.dropZoneAddedFile(file);
                              }
                              if (window.DropZoneAddedFileHandler) {
                                  window.DropZoneAddedFileHandler(file);
                              }
                          });
                          myDropzone.on("sending", function (file, xhr, formData) {
                              if (imageItem.dropZoneSending) {
                                  imageItem.dropZoneSending(file, xhr, formData);
  
                              }
  
                              if (window.DropZoneSendingHandler) {
                                  window.DropZoneSendingHandler(file, xhr, formData);
                              }
                          });
                          myDropzone.on("success", function (file, serverResponse) {
                              if (imageItem.dropZoneSuccess) {
                                  imageItem.dropZoneSuccess(file, serverResponse, imageItem);
                              }
  
                              if (window.DropZoneSuccessHandler) {
                                  window.DropZoneSuccessHandler(file, serverResponse, imageItem);
                              }
  
                          });
                          myDropzone.on("error", function (file, errorMessage) {
                              if (imageItem.dropZoneError) {
                                  imageItem.dropZoneError(file, errorMessage);
                              }
                              if (window.DropZoneErrorHandler) {
                                  window.DropZoneErrorHandler(file, errorMessage);
                              }
                          });
  
                          return myDropzone;
                      }
  
                  };
  
                  for (var i = 0; i < dropElements.length; i++) {
                      var item = dropElements[i];
                      cloudscribeDropAndCrop.buildImageEditor(item);
                  }
  
  
                  var btnClear = document.getElementById("dz1-clear-image");
                  if (btnClear) {
                      btnClear.onclick = function ClearLogo() {
                          var hidden = document.getElementById("imgUrlFull");
                          if (hidden) {
                              hidden.value = '';
                          }
                          var img = document.getElementById("dz1Image");
                          if (img) {
                              img.src = "/cr/images/690x517-placeholder.png";
                          }
                      };
                  }
  
              });
  
  
          })();
  		