"use strict";

var added_file = {};
var images = [];
var my_img_canvas, my_img_canvas_b, my_img_canvas_c;
var my_img_flag = true;

var cropper_options = {
  rotateLeft: -45,
  rotateRight: 45,
  flipX: -1,
  flipY: -1
};

var drawing_options = {
  width: 5,
  color: "#fff",
  textColor: "#fff",
  backgroundColor: "",
  fontSize: 30,
  scaleX: 1,
  scaleY: 1,
  shape: ''
};

var maxImageWidth = 5000, maxImageHeight = 5000; // 25MP

Dropzone.options.resizeMyImage = {
  acceptedFiles: "image/*",
  maxFiles: 1,
  maxFilesize: 25,
  timeout: 0,
  accept: function (file, done) {
    file.acceptDimensions = done();
    file.rejectDimensions = function () {
      done('Image resolution is too big. You might encounter problems.');
    };

    if (file.type != "image/jpeg" && file.type != "image/png" && file.type != "image/gif") {
      done('Files of this type are not accepted. Please try again.');
    }
    //done();
  },
  init: function () {
    this.on("addedfile", function () {
      if (this.files[1] != null) {
        this.removeFile(this.files[0]);
      }

      $('.progress').removeClass('d-none');
      $("input[name=cropper_data]").val('')
    });

    this.on("success", function (file, response) {
      var img = JSON.parse(response);

      setImageSizeInfo(file.width, file.height, file, false);

      swapAd($('.download-container'), $('.skyscraper-bottom'));

      if (my_img_flag) {
        swapAd($('.skyscraper-middle'), $('.skyscraper'));
      }

      gtag('event', 'single_file_upload', {
        'event_category' : 'upload',
        'event_label' : 'from_computer'
      });

      //show resize form
      $('.form-resizer').removeClass('d-none');
      $('.resize-my-img-container').addClass('d-none');
      $('.progress').addClass('d-none');

      added_file = file;
      my_img_flag = false;

      $('canvas').attr('data-id', img.id);
    });

    this.on("thumbnail", function (file) {
      if (file.width > maxImageWidth || file.height > maxImageHeight) {
        file.rejectDimensions()
      }
      else {
        file.acceptDimensions;
      }
    });

    this.on("uploadprogress", function (file, progress, bytesSent) {
      $('.dz-progress').hide();
      if (file.previewElement) {
        $('.progress-bar').css('width', progress + "%");
      }
    })
  }
};

Dropzone.options.resizeMultipleImages = {
  acceptedFiles: "image/*",
  addRemoveLinks: true,
  maxFilesize: 25,
  timeout: 0,
  uploadMultiple: true,
  accept: function (file, done) {
    if (file.type != "image/jpeg" && file.type != "image/png" && file.type != "image/gif") {
      done('Files of this type are not accepted. Please try again.');
    }
    done();
  },
  init: function () {
    this.on("addedfile", function () {
      $('.progress').removeClass('d-none');
    });

    this.on("success", function (file) {
      //show resize form
      $('.form-resizer').removeClass('d-none');
      $('.resize-my-img-container').addClass('d-none');
      $('.progress').addClass('d-none');

      images.push(file);

      if (images.length == 1) {
        swapAd($('.download-container'), $('.skyscraper-bottom'));
        swapAd($('.skyscraper-middle'), $('.skyscraper'));
      }

      gtag('event', 'multiple_file_upload', {
        'event_category' : 'upload',
        'event_label' : 'from_computer'
      });

      var image_row = '<tr data-name="' + file.name + '">' +
        '<td>' + file.name + '</td>>' +
        '<td>' + file.width + ' x ' + file.height + '</td>>' +
        '<td>' +
        '<span class="final-width-' + file.width + '">' + file.width + '</span> x ' +
        '<span class="final-height-' + file.height + '">' + file.height + '</span>' +
        '</td>>' +
        '</tr>';

      $('.image-size-info tbody').append(image_row);
    });

    this.on("removedfile", function (file) {
      var index = images.length;

      $('.image-size-info tr').each(function (index, element) {
        if ($(element).data('name') === file.name) {
          $(this).fadeOut('', function () {
            $(this).remove();
          });
        }
      });

      while (index--) {
        if (images[index].name === file.name) {
          images.splice(index, 1);
        }
      }

      if (images.length == 0) {
        $('.form-resizer').addClass('d-none');
        $('.resize-my-img-container').removeClass('d-none');
      }
    });

    this.on("uploadprogress", function (file, progress) {
      $('.dz-progress').hide();
      if (file.previewElement) {
        $('.progress-bar').css('width', progress + "%");
      }
    })
  }
};

$(document).ready(function () {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

  $('body').on('click', '.download-image', function () {
    $('.form-resizer').trigger('submit');

    gtag('event', 'image_download_click', {
      'event_category' : 'download',
      'event_label' : 'image_download'
    });
  });

  $(".form-resizer").submit(function () {
    var new_images = [];

    $("input[name=file_name]").val(added_file.name);
    $("input[name=file_size]").val(added_file.size);

    $("input[name=width]").val($('#final-width').text());
    $("input[name=height]").val($('#final-height').text());

    $.each(images, function (index, image) {
      new_images.push({
        name: image.name,
        size: image.size,
        type: image.type
      })
    });

    $("input[name=images]").val(JSON.stringify(new_images));

    return true;
  });

  $('.multiple-image-scale').change(function () {
    if (this.value === '25') {
      scaleMyImg(25);
    }
    else if (this.value === '50') {
      scaleMyImg(50);
    }
    else if (this.value === '75') {
      scaleMyImg(75);
    }
    else if (this.value === '100') {
      scaleMyImg(0);
    }
  });

  $('select[name=scale]').change(function () {

    $('.custom-size-container').addClass('d-none');

    if (this.value === '25') {
      scaleMyImg(25);
    }
    else if (this.value === '50') {
      scaleMyImg(50);
    }
    else if (this.value === '75') {
      scaleMyImg(75);
    }
    else if (this.value === '100') {
      $('#final-width').text(added_file.width);
      $('#final-height').text(added_file.height);
    }
    else if (this.value === 'custom') {
      $('.custom-size-container').removeClass('d-none');
    }
  });

  $('#custom-width').on('input', function () {
    customScale($(this), 'width');
  });

  $('#custom-height').on('input', function () {
    customScale($(this), 'height');
  });

  $('.multiple-width').on('input', function () {
    customMultipleScale($(this), 'width');
  });

  $('.multiple-height').on('input', function () {
    customMultipleScale($(this), 'height');
  });

  $('select[name=custom-width-option]').change(function () {
    customScale($('#custom-width'), 'width');
    customMultipleScale($('.multiple-width'), 'width');
  });

  $('select[name=custom-height-option]').change(function () {
    customScale($('#custom-height'), 'height');
    customMultipleScale($('.multiple-height'), 'height');
  });

  $('#contact-us-form, #mail-form').validate();

  $('#mail-form-send').on('click', function () {
    $('#mail-form').trigger('submit');
  });

  $('#mail-form').on('submit', function (e) {
    var data = $(this).serializeArray();
    e.preventDefault();

    if ($('#mail-form').valid()) {
      $.ajax({
        type: "POST",
        url: "email.php",
        data: {
          id: $('canvas').attr('data-id'),
          img: my_img_canvas.toDataURL(),
          to: data[0].value,
          from: data[1].value,
          message: data[2].value
        },
        success: function () {
          $('#mail-modal').modal('hide');
        }
      });
    }
  });

  $("#resize-my-image-url-form").validate({
    rules: {
      "image-url": {
        required: true
      }
    }
  });

  // resize image from url
  $(".image-url-form").submit(function (e) {
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    // check if data is valid
    if (!$('#resize-my-image-url-form').valid() || !$('#image-resize-form').valid()) {
      return false;
    }
    $('#submit-image-url').attr('disabled', 'disabled');

    $.ajax({
      type: "POST",
      url: "upload",
      data: {
        "image-url": $('#image-url').val(),
        _token: CSRF_TOKEN
      },
      success: function (data) {
        $('#submit-image-url').removeAttr('disabled');
        added_file = $.parseJSON(data);

        var validator = $("#resize-my-image-url-form").validate();

        if (added_file.message !== undefined) {
          return validator.showErrors({
            "image-url": added_file.message
          });
        }

        gtag('event', 'url_file_upload', {
          'event_category' : 'upload',
          'event_label' : 'from_url'
        });

        // set image size info
        setImageSizeInfo(added_file.width, added_file.height, added_file);

        swapAd($('.download-container'), $('.skyscraper-bottom'));

        if (my_img_flag) {
          swapAd($('.skyscraper-middle'), $('.skyscraper'));
        }

        // show resize options
        $('.form-resizer').removeClass('d-none');
        $('.resize-my-img-container').addClass('d-none');

        $('canvas').attr('data-id', added_file.id);

        my_img_flag = false;
      }
    });

    e.preventDefault();
  });

  $('#image-paint').on('click', function () {
    var $image = $('#my-img-canvas');

    gtag('event', 'image-paint', {
      'event_category' : 'editor',
      'event_label' : 'paint'
    });

    $('.paint-container').toggleClass('d-none');
    $('.font-container').addClass('d-none');
    $('#image-font').removeClass('btn-info');
    $(this).toggleClass('btn-info');

    $image.cropper('destroy');

    my_img_canvas.isDrawingMode = $(this).hasClass('btn-info') ? true : false;

    if (!$(this).hasClass('btn-info')) {
      var objects = my_img_canvas.getObjects();

      for (var i = 0; i < objects.length; i++) {
        my_img_canvas.item(i).selectable = true;
      }
    }

    if (my_img_canvas.freeDrawingBrush) {
      my_img_canvas.freeDrawingBrush.color = drawing_options.color;
      my_img_canvas.freeDrawingBrush.width = parseInt(drawing_options.width, 10) || 1;
    }

    //my_img_canvas.discardActiveObject().renderAll();
  });

  $('.shape-item').on('click', function () {
    var option = $(this).data('option');
    var objects = my_img_canvas.getObjects();

    drawing_options.shape = option;

    for (var i = 0; i < objects.length; i++) {
      my_img_canvas.item(i).selectable = false;
    }

    if (option == 'circle') {
      var freeDrawing = true;
      var circle, isDown, origX, origY;

      my_img_canvas.isDrawingMode = false;
      my_img_canvas.selection = false;

      my_img_canvas.observe('mouse:down', function (o) {
        if (drawing_options.shape != 'circle') return;

        isDown = true;
        var pointer = my_img_canvas.getPointer(o.e);
        origX = pointer.x;
        origY = pointer.y;

        if (freeDrawing) {
          circle = new fabric.Circle({
            left: pointer.x,
            top: pointer.y,
            radius: 1,
            stroke: drawing_options.color,
            strokeWidth: drawing_options.width,
            fill: '',
            selectable: false,
            originX: 'center',
            originY: 'center'
          });

          my_img_canvas.add(circle);
        }
      });

      my_img_canvas.observe('mouse:move', function (o) {
        if (!isDown) return;

        if (freeDrawing) {
          var pointer = my_img_canvas.getPointer(o.e);

          circle.set({radius: Math.abs(origX - pointer.x)});
          my_img_canvas.renderAll();
        }
      });

      my_img_canvas.on('mouse:up', function (o) {
        if (freeDrawing) {
          my_img_canvas.selection = true;
        }

        my_img_canvas.isDrawingMode = $('#image-paint').hasClass('btn-info') ? true : false;
        freeDrawing = false;
        isDown = false;
        circle.setCoords();
      });
    }
    else if (option == 'rectangle') {
      var rect, freeDrawing = true, origX, origY;

      my_img_canvas.isDrawingMode = false;
      my_img_canvas.selection = false;

      my_img_canvas.on('mouse:down', function (o) {
        if (!freeDrawing || drawing_options.shape != 'rectangle') return;

        var pointer = my_img_canvas.getPointer(o.e);
        origX = pointer.x;
        origY = pointer.y;
        var pointer = my_img_canvas.getPointer(o.e);

        rect = new fabric.Rect({
          left: origX,
          top: origY,
          originX: 'left',
          originY: 'top',
          width: pointer.x - origX,
          height: pointer.y - origY,
          angle: 0,
          fill: '',
          selectable: false,
          stroke: drawing_options.color,
          strokeWidth: drawing_options.width,
          transparentCorners: false
        });

        my_img_canvas.add(rect);
      });

      my_img_canvas.on('mouse:move', function (o) {
        if (!freeDrawing || !rect) return;

        var pointer = my_img_canvas.getPointer(o.e);

        if (origX > pointer.x) {
          rect.set({left: Math.abs(pointer.x)});
        }
        if (origY > pointer.y) {
          rect.set({top: Math.abs(pointer.y)});
        }

        rect.set({width: Math.abs(origX - pointer.x)});
        rect.set({height: Math.abs(origY - pointer.y)});

        my_img_canvas.renderAll();
      });

      my_img_canvas.on('mouse:up', function (o) {
        if (freeDrawing) {
          my_img_canvas.selection = true;
        }

        my_img_canvas.isDrawingMode = $('#image-paint').hasClass('btn-info') ? true : false;
        freeDrawing = false;
        rect.setCoords();
      });
    }
  });

  $('#image-erase').on('click', function () {
    var objects = my_img_canvas.getObjects();
    var objects_c = my_img_canvas_c.getObjects();
    var $image = $('#my-img-canvas');

    gtag('event', 'image_erase', {
      'event_category' : 'editor',
      'event_label' : 'erase'
    });

    $image.cropper('destroy');

    $('#cropped-width').text(added_file.width);
    $('#cropped-height').text(added_file.height);

    // remove filters
    my_img_canvas.backgroundImage.filters = [];
    my_img_canvas.backgroundImage.applyFilters();

    // reset options
    $("input[name=rotate]").val(0);

    cropper_options.flipX = -1;
    $("input[name=flip_x]").val('');

    cropper_options.flipY = -1;
    $("input[name=flip_y]").val('');

    for (var i = 0; i < objects_c.length; i++) {
      my_img_canvas_c.remove(objects_c[i]);
    }

    my_img_canvas_c.renderAll();

    for (var i = 0; i < objects.length; i++) {
      my_img_canvas.remove(objects[i]);
    }

    my_img_canvas.renderAll();
    sendCanvas(my_img_canvas);
  });

  $('#image-font').on('click', function () {
    var that = $(this);
    var $image = $('#my-img-canvas');

    gtag('event', 'image_text', {
      'event_category' : 'editor',
      'event_label' : 'text'
    });

    $('.font-container').toggleClass('d-none');
    $('.paint-container').addClass('d-none');
    $('#image-paint').removeClass('btn-info');
    $(this).toggleClass('btn-info');

    $image.cropper('destroy');

    my_img_canvas.isDrawingMode = false;

    my_img_canvas.observe('mouse:down', function (o) {
      if (!that.hasClass('btn-info')) return;

      var pointer = my_img_canvas.getPointer(o.e);

      var text = new fabric.IText('', {
        left: pointer.x,
        top: pointer.y,
        lineHeight: 1,
        fontFamily: 'Helvetica',
        fontSize: drawing_options.fontSize,
        fill: drawing_options.textColor,
        textBackgroundColor: drawing_options.backgroundColor
      });

      my_img_canvas.add(text).setActiveObject(text);
      text.enterEditing();
    });

    my_img_canvas.renderAll();
  });

  $('.font-size').on('change', function() {
    var $image = $('#my-img-canvas');

    drawing_options.fontSize = this.value;

    if (my_img_canvas.getActiveObject() != null) {
      var text = my_img_canvas.getActiveObject();

      my_img_canvas.getActiveObject().set('fontSize', this.value);

      text.enterEditing();
      text.hiddenTextarea.focus();

      my_img_canvas.renderAll();
    }

    $image.cropper('destroy');
  });

  $('.text-color').spectrum({
    color: "#fff",
    change: function (color) {
      var $image = $('#my-img-canvas');

      drawing_options.textColor = color.toHexString();

      if (my_img_canvas.getActiveObject() != null) {
        var text = my_img_canvas.getActiveObject();

        my_img_canvas.getActiveObject().set('fill', color.toHexString());

        text.enterEditing();
        text.hiddenTextarea.focus();

        my_img_canvas.renderAll();
      }

      $image.cropper('destroy');
    }
  });

  $('.background-color').spectrum({
    color: "#fff",
    change: function (color) {
      drawing_options.backgroundColor = color.toHexString();

      if (my_img_canvas.getActiveObject() != null) {
        var text = my_img_canvas.getActiveObject();

        my_img_canvas.getActiveObject().set('textBackgroundColor', color.toHexString());

        text.enterEditing();
        text.hiddenTextarea.focus();

        my_img_canvas.renderAll();
      }

      var $image = $('#my-img-canvas');
      $image.cropper('destroy');
    }
  });

  $('.image-effect').on('click', function () {
    var option = $(this).data('option');
    var f = fabric.Image.filters;

    switch (option) {
      case 'sepia':
        applyFilter(new f.Sepia());
        break;
      case 'invert':
        applyFilter(new f.Invert());
        break;
      case 'vintage':
        applyFilter(new f.Vintage());
        break;
      case 'gray-scale':
        applyFilter(new f.Grayscale());
        break;
      default: throw new RuntimeException("unreachable");
    }

    gtag('event', 'image_effects', {
      'event_category' : 'editor',
      'event_label' : $(this).data('option')
    });
  });

  $('#image-rotate-left').on('click', function () {
    var $image = $('#my-img-canvas');

    gtag('event', 'image_rotate', {
      'event_category' : 'editor',
      'event_label' : 'rotate'
    });

    if (Math.abs(cropper_options.rotateLeft) > 360) {
      cropper_options.rotateLeft = -45;
    }

    $("input[name=flip_x]").val('');
    $("input[name=flip_y]").val('');
    $("input[name=rotate]").val(cropper_options.rotateLeft);

    $image.cropper('destroy');

    $image.cropper({
      autoCrop: false,
      zoomOnWheel: false,
      ready: function () {
        $image.cropper('rotate', cropper_options.rotateLeft);
        cropper_options.rotateLeft += -45;
        $image.cropper('disable');
      }
    });
  });

  $('#image-rotate-right').on('click', function () {
    var $image = $('#my-img-canvas');

    gtag('event', 'image_rotate', {
      'event_category' : 'editor',
      'event_label' : 'rotate'
    });

    if (Math.abs(cropper_options.rotateRight) > 360) {
      cropper_options.rotateRight = 45;
    }

    $("input[name=flip_x]").val('');
    $("input[name=flip_y]").val('');
    $("input[name=rotate]").val(cropper_options.rotateRight);

    $image.cropper('destroy');

    $image.cropper({
      autoCrop: false,
      zoomOnWheel: false,
      ready: function () {
        $image.cropper('rotate', cropper_options.rotateRight);
        cropper_options.rotateRight += 45;
        $image.cropper('disable');
      }
    });
  });

  $('#image-flip-horizontal').on('click', function () {
    var $image = $('#my-img-canvas');

    gtag('event', 'image_flip_horizontal', {
      'event_category' : 'editor',
      'event_label' : 'flip_horizontal'
    });

    $("input[name=flip_x]").val(cropper_options.flipX);
    $("input[name=rotate]").val(0);

    $image.cropper('destroy');

    $image.cropper({
      autoCrop: false,
      zoomOnWheel: false,
      ready: function () {
        $image.cropper('scaleX', cropper_options.flipX);
        cropper_options.flipX = -cropper_options.flipX;
        $image.cropper('disable');
      }
    });
  });

  $('#image-flip-vertical').on('click', function () {
    var $image = $('#my-img-canvas');

    gtag('event', 'image_flip_vertical', {
      'event_category' : 'editor',
      'event_label' : 'flip_vertical'
    });

    $("input[name=flip_y]").val(cropper_options.flipY);
    $("input[name=rotate]").val(0);

    $image.cropper('destroy');

    $image.cropper({
      autoCrop: false,
      zoomOnWheel: false,
      ready: function () {
        $image.cropper('scaleY', cropper_options.flipY);
        cropper_options.flipY = -cropper_options.flipY;
        $image.cropper('disable');
      }
    });
  });

  $('#image-clear').on('click', function () {
    var $image = $('#my-img-canvas');
    $image.cropper('destroy');

    // reset options
    cropper_options.rotateLeft = -45;
    cropper_options.rotateRight = 45;
    cropper_options.flipX = -1;
    cropper_options.flipY = -1;

    $("input[name=flip_x]").val('');
    $("input[name=flip_y]").val('');
    $("input[name=rotate]").val(0);

    $('#cropped-width').text(added_file.width);
    $('#cropped-height').text(added_file.height);

    // reset image
    sendCanvas(my_img_canvas);

    gtag('event', 'image_clear', {
      'event_category' : 'editor',
      'event_label' : 'clear'
    });
  });

  $('#image-reset').on('click', function () {
    var $image = $('#my-img-canvas');
    $image.cropper('reset');

    gtag('event', 'image_reset', {
      'event_category' : 'editor',
      'event_label' : 'reset'
    });
  });

  $('#image-crop').on('click', function () {
    initCropper(added_file, true, 'free');

    gtag('event', 'image_crop', {
      'event_category' : 'editor',
      'event_label' : 'crop'
    });
  });

  $('.aspect-ratio').on('click', function () {
    initCropper(added_file, true, $(this).data('ratio'));

    gtag('event', 'image_aspect_ration', {
      'event_category' : 'editor',
      'event_label' : $(this).data('ratio')
    });
  });

  $('.custom-resizer').on('click', function () {
    initCropper(added_file, true, $(this).data('ratio'));

    gtag('event', 'image_social_resizer', {
      'event_category' : 'editor',
      'event_label' : $(this).data('ratio')
    });
  });

  $('#image-print').on('click', function () {
    var img = new Image();

    gtag('event', 'image_print', {
      'event_category' : 'editor',
      'event_label' : 'print'
    });

    img.onload = function () {
      var printer = $("#printer-frame")[0].contentWindow;

      printer.document.open();
      printer.document.write('<html>' +
        '<body onload="this.focus();window.print()"><img src="' + my_img_canvas.toDataURL() + '" width="100%"></body>' +
        '</html>');
      printer.document.close();
    };
    img.src = my_img_canvas.toDataURL();
  });

  $('#custom-width').one('click', function () {
    gtag('event', 'image_resize', {
      'event_category' : 'resize',
      'event_label' : 'custom_width'
    });
  });

  $('#custom-width').on('keyup', function () {
    setFinalHeight();

    if ($('#custom-width').val() == '') {
      setFinalWidth();
    }
  });

  $('#custom-height').one('click', function () {
    gtag('event', 'image_resize', {
      'event_category' : 'resize',
      'event_label' : 'custom_height'
    });
  });

  $('#custom-height').on('keyup', function () {
    setFinalWidth();

    if ($('#custom-height').val() == '') {
      setFinalHeight();
    }
  });

  $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
  $('[data-toggle-second="tooltip"]').tooltip({ trigger: "hover" });

  $('.color-picker').spectrum({
    color: "#fff",
    change: function (color) {
      drawing_options.color = color.toHexString();
      my_img_canvas.freeDrawingBrush.color = drawing_options.color;
    }
  });

  $('.line-width').on('click', function () {
    drawing_options.width = $(this).data('width');
    my_img_canvas.freeDrawingBrush.width  = drawing_options.width;
  });

  $('#quality-option').change(function() {
    gtag('event', 'image_quality', {
      'event_category': 'converter',
      'event_label': 'quality_' + $(this).find(":selected").text()
    });
  });

  $('#limit-size').one('click', function () {
    gtag('event', 'image_custom_limit', {
      'event_category': 'converter',
      'event_label': 'max_file_size'
    });
  });

  $('#file-size-option').change(function() {
    gtag('event', 'image_size', {
      'event_category': 'converter',
      'event_label': 'size_' + $(this).find(":selected").text()
    });
  });

  $('#format-option').change(function() {
    gtag('event', 'image_format', {
      'event_category': 'converter',
      'event_label': 'format_' + $(this).find(":selected").text()
    });
  });

  $(document).keydown(function (e) {
    if (e.keyCode == 27) {
      my_img_canvas.discardActiveObject().renderAll();
    }

    if (e.keyCode == 46) {
      var activeObjects = my_img_canvas.getActiveObjects();

      if (activeObjects) {
        activeObjects.forEach(function (object) {
          my_img_canvas.remove(object);
        });
      }
    }
  });

  if (typeof gtag !== "function") {
    window.gtag = function () {}
  }
});

function setupMouseUp() {
  my_img_canvas.on('mouse:up', function () {
    var objects = my_img_canvas.getObjects();
    var objects_c = my_img_canvas_c.getObjects();

    var old_canvas = JSON.stringify(my_img_canvas.toDatalessJSON(['my-img-canvas']));
    var new_canvas = JSON.stringify(my_img_canvas_b.toDatalessJSON(['my-img-canvas-b']));

    my_img_canvas_c.backgroundImage.filters = my_img_canvas.backgroundImage.filters;
    my_img_canvas_c.backgroundImage.applyFilters();

    if (old_canvas !== new_canvas) {
      my_img_canvas_b.loadFromJSON(JSON.stringify(my_img_canvas));
      my_img_canvas_b.renderAll();

      for (var i = 0; i < objects_c.length; i++) {
        my_img_canvas_c.remove(objects_c[i]);
      }

      for (var i = 0; i < objects.length; i++) {
        objects[i].clone(function (clone) {
          clone.set('top', clone.top * drawing_options.scaleY);
          clone.set('left', clone.left * drawing_options.scaleX);
          clone.set('scaleX', drawing_options.scaleX);
          clone.set('scaleY', drawing_options.scaleY);

          my_img_canvas_c.add(clone);
        });
      }

      my_img_canvas_c.renderAll();
      sendCanvas(my_img_canvas_c);
    }
  });
}

function setFinalWidth() {
  var option = $('select[name=custom-height-option]').find(":selected").text();
  var ratio = added_file.width / added_file.height;

  if (option == 'Pixels') {
    var new_width = Math.round(ratio * $('#custom-height').val());
  }
  else {
    var height = Math.round(added_file.height * $('#custom-height').val() / 100);
    var new_width = Math.round(ratio * height);
  }

  if ($('#custom-width').val() == '') {
    $('#final-width').text(new_width);
  }
}

function setFinalHeight() {
  var option = $('select[name=custom-width-option]').find(":selected").text();
  var ratio = added_file.width / added_file.height;

  if (option == 'Pixels') {
    var new_height = Math.round($('#custom-width').val() / ratio);
  }
  else {
    var width = Math.round(added_file.width * $('#custom-width').val() / 100);
    var new_height = Math.round(width / ratio);
  }

  if ($('#custom-height').val() == '') {
    $('#final-height').text(new_height);
  }
}

function scaleMyImg(scale) {
  gtag('event', 'image_resize', {
    'event_category' : 'resize',
    'event_label' : 'fixed_resize'
  });

  if (images.length === 0) {
    var cropped_width = parseInt($('#cropped-width').text(), 10);
    var cropped_height = parseInt($('#cropped-height').text(), 10);

    if (cropped_width == added_file.width && cropped_height == added_file.height) {
      var width = Math.round(added_file.width * scale / 100);
      var height = Math.round(added_file.height * scale / 100);
    }
    else {
      var width = Math.round(cropped_width * scale / 100);
      var height = Math.round(cropped_height * scale / 100);
    }

    $('#final-width').text(width);
    $('#final-height').text(height);
  }
  else {
    $.each(images, function (index, image) {
      var new_width = Math.round(image.width * scale / 100);
      var new_height = Math.round(image.height * scale / 100);

      $('.final-width-' + image.width).html(new_width);
      $('.final-height-' + image.height).html(new_height);
    });
  }
}

function customScale(selector, dimension) {
  var option = $('select[name=custom-' + dimension + '-option]').find(":selected").val();

  if (option === '%') {
    $('#final-' + dimension).text(Math.round(added_file[dimension] * selector.val() / 100));
  }
  else if (selector.val() !== '') {
    $('#final-' + dimension).text(selector.val());
  }
}

function customMultipleScale(selector, dimension) {
  var option = $('select[name=custom-' + dimension + '-option]').find(":selected").val();

  $.each(images, function (index, image) {
    if (option === '%') {
      $('.final-' + dimension + '-' + image[dimension]).text(Math.round(image[dimension] * selector.val() / 100));
    }
    else {
      $('.final-' + dimension + '-' + image[dimension]).text(selector.val());
    }
  });
}

function setImageSizeInfo(width, height, file) {
  var extension = file.name.substr(file.name.lastIndexOf('.') + 1);
  var file_name = file.name.replace(/\.[^/.]+$/, "");
  var base_url = 'https://resizemyimg.com/uploads/';
  var $image = $('#my-img-canvas');

  $image.cropper('destroy');

  if (extension.toLocaleLowerCase() == 'gif') {
    $('.image-paint-group, .image-font-group, .image-effects-group, .image-erase-group, .image-rotate-group, .image-flip-group').hide();
  }
  else {
    $('.image-paint-group, .image-font-group, .image-effects-group, .image-erase-group, .image-rotate-group, .image-flip-group').show();
  }

  if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
    base_url = '/uploads/';
  }

  if (file_name.indexOf('?') > 0) {
    file_name = file_name.substring(0, file_name.indexOf('?'));
    var src = base_url + encodeURIComponent(file_name);
  }
  else {
    var src = base_url + encodeURIComponent(file_name) + '_' + file.size + '.' + extension;
  }

  var img = new Image();

  img.onload = function () {
    // set image size info
    $('#original-width, #cropped-width, #final-width').text(this.width);
    $('#original-height, #cropped-height, #final-height').text(this.height);
    added_file.width = this.width;
    added_file.height = this.height;

    my_img_canvas = new fabric.Canvas('my-img-canvas');

    if (this.width < $('.resize-options-container').width()) {
      my_img_canvas.setWidth(this.width);
      my_img_canvas.setHeight(this.height);

      $('.canvas-container, .upper-canvas').width(this.width);
      $('.canvas-container, .upper-canvas').height(this.height);
    }
    else {
      var container_width = $('.resize-options-container').width();
      var container_height = container_width * this.height / this.width;

      my_img_canvas.setWidth(container_width);
      my_img_canvas.setHeight(container_height);

      $('.canvas-container, .upper-canvas').width(container_width);
      $('.canvas-container, .upper-canvas').height(container_height);
    }

    drawing_options.scaleX = img.width / my_img_canvas.width;
    drawing_options.scaleY = img.height / my_img_canvas.height;

    fabric.Image.fromURL(img.src, function(img) {
      my_img_canvas.setBackgroundImage(img, my_img_canvas.renderAll.bind(my_img_canvas), {
        scaleX: my_img_canvas.width / img.width,
        scaleY: my_img_canvas.height / img.height
      });
    });

    my_img_canvas_b = new fabric.Canvas('my-img-canvas-b');
    my_img_canvas_c = new fabric.Canvas('my-img-canvas-c');
    my_img_canvas_c.setWidth(this.width);
    my_img_canvas_c.setHeight(this.height);

    fabric.Image.fromURL(img.src, function(img) {
      my_img_canvas_c.setBackgroundImage(img, my_img_canvas_c.renderAll.bind(my_img_canvas_c));
    });

    setupMouseUp();
  };
  img.src = src;
}

function initCropper(file, auto_crop, aspect_ratio) {
  var $image = $('#my-img-canvas');

  $image.cropper('destroy');

  $image.cropper({
    aspectRatio: aspect_ratio,
    autoCrop: auto_crop,
    zoomOnWheel: false,
    ready: function () {
      $image.cropper('rotate', $("input[name=rotate]").val());
      if (cropper_options.flipX == 1) {
        $image.cropper('scaleX', -cropper_options.flipX);
      }
      if (cropper_options.flipY == 1) {
        $image.cropper('scaleY', -cropper_options.flipY);
      }

      if (isNaN(aspect_ratio) && aspect_ratio.indexOf('/') !== -1) {
        var custom_data = aspect_ratio.split('/');

        $image.cropper("setCropBoxData", {
          width: parseInt(custom_data[0]),
          height: parseInt(custom_data[1])
        });
      }
    },
    crop: function () {
      var data = $image.cropper('getData');

      // set image cropped info
      $('#cropped-width').text(Math.floor(data.width));
      $('#cropped-height').text(Math.floor(data.height));

      $("input[name=cropper_data]").val(JSON.stringify(data));
    }
  });
}

function shuffle(a) {
  var j, x, i;
  for (i = a.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    x = a[i];
    a[i] = a[j];
    a[j] = x;
  }
  return a;
}

function swapAd(destination, ad) {
  var destination_clone = destination.clone();
  var ad_clone = ad.clone();

  destination.replaceWith(ad_clone);
  ad.replaceWith(destination_clone);
}

function sendCanvas(canvas) {
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
  $.ajax({
    type: "POST",
    url: "canvas",
    data: {
      id: $('canvas').attr('data-id'),
      img: canvas.toDataURL(),
      _token: CSRF_TOKEN
    },
    success: function () {}
  });
}

function applyFilter(filter) {
  my_img_canvas.backgroundImage.filters = [];
  my_img_canvas.backgroundImage.filters.push(filter);
  my_img_canvas.backgroundImage.applyFilters();
  my_img_canvas.renderAll();
  sendCanvas(my_img_canvas);
}