// interface for emr.
  var emrIf = function ($)
  {
    var source_type;
    var source_is_image;
    var target_type;
    var target_is_image;

    var is_debug = false;
    var is_dragging = false;

    this.init = function()
    {

      if ( emr_options.is_debug)
      {
        this.is_debug = true;
        this.debug('EMR Debug is active');
      }

      $('input[name="timestamp_replace"]').on('change', $.proxy(this.checkCustomDate, this));
      $('input[name="replace_type"]').on('change', $.proxy(this.showReplaceOptions, this));
      $('input[name="userfile"]').on('change', $.proxy(this.handleImage, this));
			$('.replace_custom_date').on('click', $.proxy(this.updateCustomDate, this));

      // DragDrop
			//$(document).on('dragover', $.proxy(this.dragOverArea, this));
			//$(document).on('dragleave', $.proxy(this.dragOutArea, this));
			document.addEventListener('dragover',  this.dragOverArea.bind(this), false );
			document.addEventListener('dragleave',  this.dragOutArea.bind(this), false );



      $('.emr_drop_area').on('drop', $.proxy(this.fileDrop, this));
			$('.upload-file-action').on('click', function () {
					var input = document.getElementById('upload-file').click();
			});

      this.checkCustomDate();
      this.loadDatePicker();

      var source = $('.image_placeholder').first();
      if (typeof( $(source).data('filetype') ) !== 'undefined')
      {
        source_type = $(source).data('filetype').trim();
        this.debug('detected type - ' + source_type);
      }
      else
        source_type = ''; // error state

      if (source.hasClass('is_image'))
      {
          source_is_image = true;
      }

      this.updateTextLayer(source, false);
      this.showReplaceOptions();


    }

    this.loadDatePicker = function()
    {
      $('#emr_datepicker').datepicker({
        dateFormat: emr_options.dateFormat,
        onClose: function() {
              var date = $(this).datepicker( 'getDate' );
              if (date) {
                  var formattedDate = (date.getFullYear()) + "-" +
                            (date.getMonth()+1) + "-" +
                            date.getDate();
              $('input[name="custom_date_formatted"]').val(formattedDate);
              //$('input[name="custom_date"]').val($.datepicker.parseDate( emr_options.dateFormat, date));
              }
        },
      });
    }

    this.checkCustomDate = function()
    {
      if ($('input[name="timestamp_replace"]:checked').val() == 3)
        this.showCustomDate();
      else
        this.hideCustomDate();
    }
    this.showCustomDate = function()
    {
        $('.custom_date').css('visibility', 'visible').fadeTo(100, 1);
    }
    this.hideCustomDate = function()
    {
      $('.custom_date').fadeTo(100,0,
          function ()
          {
            $('.custom_date').css('visibility', 'hidden');
          });
    }
    this.handleImage = function(e)
    {
        this.toggleErrors(false);
        var target = e.target;
        var file = target.files[0];

        if (! target.files || target.files.length <= 0)  // FileAPI appears to be not present, handle files on backend.
        {
          if ($('input[name="userfile"]').val().length > 0)
            this.checkSubmit();
          console.log('FileAPI not detected');
          return false;
        }

        var status = this.checkUpload(file);
        this.debug('check upload status ' + status);
        this.debug('file size:' + file.size);

        if (status)
        {
          this.updatePreview(file);
        }
        else {
          this.updatePreview(null);
        }
        this.checkSubmit();
    }
    this.updatePreview = function(file)
    {
      var preview = $('.image_placeholder').last();

      $(preview).find('img').remove();
      $(preview).removeClass('is_image not_image is_document');
      var is_empty = false;

      if (file !== null) /// file is null when empty, or error
      {
        target_is_image = (file.type.indexOf('image') >= 0) ? true : false;
        target_type = file.type.trim();
      }
      else
      {
        is_empty = true;
      }
      // If image, load thumbnail and get dimensions.
      if (file && target_is_image)
      {
        var img = new Image();
        img.src = window.URL.createObjectURL(file);
        self = this;

        img.addEventListener("load", function () {
          // with formats like svg it can be rough.

					var width = img.naturalWidth;
					var height = img.naturalHeight;

           if (width == 0)
              width = img.width;
            if (height == 0)
              height = img.height;

					img.setAttribute('style', 'z-index:2; position: relative; max-width:100%; max-height: 100%; width: ' + width + 'px; height: ' + height + 'px;');

              self.updateTextLayer(preview, width + ' x ' + height);
              self.updateFileSize(preview, file);
        });

        $(preview).prepend(img);
        $(preview).addClass('is_image');
      }
      else if(file === null)
      {
        $(preview).addClass('not_image');
        $(preview).find('.dashicons').removeClass().addClass('dashicons dashicons-no');
        //$(preview).find('.textlayer').text('');
        this.updateTextLayer(preview, '');
        this.updateFileSize(preview, null);
        this.debug('File is null');
      }
      else { // not an image
        $(preview).addClass('not_image is_document');
        $(preview).find('.dashicons').removeClass().addClass('dashicons dashicons-media-document');
        //$(preview).find('.textlayer').text(file.name);
        this.updateTextLayer(preview, file.name);
        this.updateFileSize(preview, file);
        this.debug('Not image, media document');
      }

      if (! is_empty && target_type != source_type)
      {
        this.debug(target_type + ' not ' + source_type);
        var falsePositive = this.checkFalsePositiveType(source_type, target_type);
        if (! falsePositive)
          this.warningFileType(source_type, target_type);
      }

      if (! is_empty && emr_options.allowed_mime.indexOf(target_type) == -1)
      {
         this.debug(target_type + ' not ' + ' in allowed types ');
         var falsePositive = this.checkFalsePositiveType(source_type, target_type);

         if (! falsePositive)
          this.warningMimeType();
      }
    //  this.debug(emr_options.allowed_mime);

    }
    this.checkFalsePositiveType = function(source_type, target_type)
    {
        // windows (sigh) reports application/zip as application/x-zip-compressed. Or something else, why not.
       if (source_type.indexOf('zip') >= 0 && target_type.indexOf('zip') >= 0)
       {
          this.debug('Finding ' + source_type + ' ' + target_type + ' close enough, false positive');
          return true;
       }
       return false;
    }
    // replace the text, check if text is there ( or hide ), and fix the layout.
    this.updateTextLayer = function (preview, newtext)
    {
        textlayer = $(preview).find('.textlayer');
        textlayer.css('opacity', '0');
        if (newtext !== false)
          textlayer.text(newtext);

        if (textlayer.text() !== '')
        {
          textlayer.css('opacity', '0.7');
      //    textlayer.css('margin-left', '-' + (textlayer.width() / 2 ) + 'px');
        }

    }
    this.updateFileSize = function(preview, file)
    {
      if (file === null)
      {
        $(preview).find('.image_size').text('');
        return;
      }
      var bytes = file.size;
      if (bytes == 0) { return "0.00 B"; }
      var e = Math.floor(Math.log(bytes) / Math.log(1024));
      var size = (bytes/Math.pow(1024, e)).toFixed(2)+' '+' KMGTP'.charAt(e)+'B';

      $(preview).find('.image_size').text(size);
    }
		this.updateCustomDate = function(e)
		{
				var $target = $(e.target);
				var min = $target.data('min');
				var hour = $target.data('hour');
				var date = $target.data('date');
				var format = $target.data('format');

				$('input[name="custom_date"]').val(date);
				$('input[name="custom_hour"]').val(hour);
				$('input[name="custom_minute"]').val(min);
				$('input[name="custom_date_formatted"]').val(format);
		}
    this.checkSubmit = function()
    {
       var check = ($('input[name="userfile"]').val().length > 0) ? true : false;

        if (check)
        {
          $('input[type="submit"]').prop('disabled', false);
        }
        else {
          $('input[type="submit"]').prop('disabled', true);
        }
    }
    this.toggleErrors = function(toggle)
    {
      $('.form-error').fadeOut();
      $('.form-warning').fadeOut();
    }
    this.checkUpload = function(fileItem)
    {
      var maxsize = emr_options.maxfilesize;

      if ($('input[name="userfile"]').val().length <= 0)
      {
        console.info('[EMR] - Upload file value not set in form. Pick a file');
        $('input[name="userfile"]').val('');
        return false;
      }

      if (fileItem.size > maxsize)
      {
          console.info('[EMR] - File too big for uploading - exceeds upload limits');
          this.errorFileSize(fileItem);
          $('input[name="userfile"]').val('');
          return false;
      }
      return true;
    }
    this.errorFileSize = function(fileItem)
    {
      $('.form-error.filesize').find('.fn').text(fileItem.name);
      $('.form-error.filesize').fadeIn();
    }
    this.warningFileType = function(source_type, target_type)
    {
      $('.form-warning.filetype').find('.source_type').text(source_type);
      $('.form-warning.filetype').find('.target_type').text(target_type);
      $('.form-warning.filetype').fadeIn();
    }
    this.warningMimeType = function(fileItem)
    {
      $('.form-warning.mimetype').fadeIn();
    }
    this.debug = function(message)
    {
      console.debug(message);
    }
    this.showReplaceOptions = function(e)
    {
        $('section.options .location_option').hide();
        var replace_option = $('input[name="replace_type"]:checked').val();
        if (replace_option == 'replace_and_search')
        {
           $('section.options .location_option').show();
        }

    }
    this.dragOverArea = function(e)
    {
      e.preventDefault();
      e.stopPropagation();
			console.log(e);

      if (true == this.is_dragging)
        return;

			var el = document.getElementById('emr-drop-area');
			var showEl = el.cloneNode(true);
			showEl.id = 'emr-drop-area-active';

			var child = document.body.appendChild(showEl);

			child.addEventListener('drop', this.fileDrop.bind(this), false);

			child.addEventListener('dragover', function(event){
				event.preventDefault();
			})


      this.is_dragging = true;
    }

    this.dragOutArea = function(e)
    {

			// event is not passed on filedrop.  remove overlay then.
			if (typeof e !== 'undefined')
			{
      	e.preventDefault();
      	e.stopPropagation();

				if (e.clientX != 0 || e.clientY != 0) {
		        return false;
		    }
			}
		var removeEl = document.getElementById('emr-drop-area-active');
			if (removeEl !== null)
				document.getElementById('emr-drop-area-active').remove();

      this.is_dragging = false;
    }
    this.fileDrop = function (e)
    {
     // var ev = e.originalEvent;
      this.dragOutArea();
     //ev.preventDefault();
			e.stopPropagation();
      e.preventDefault();

      if (e.dataTransfer.items) {
         // Use DataTransferItemList interface to access the file(s)
          document.getElementById('upload-file').files = e.dataTransfer.files;
           $('input[name="userfile"]').trigger('change');
       }
    }
  } // emrIf

jQuery(document).ready(function($)
{
  window.enableMediaReplace =  new emrIf($);
  window.enableMediaReplace.init();
});


  function emrDelayedInit() {
        console.log('Checking delayed init ');
        if(typeof window.enableMediaReplace == "undefined") {
            console.log(emrIf);
            window.enableMediaReplace =  new emrIf(jQuery);
            window.enableMediaReplace.init();
        }
        else if (typeof window.enableMediaReplace !== 'undefined')
        {
            // All fine.
        }
        else { // Nothing yet, try again.
            setTimeout(emrdelayedInit, 3000);
        }
    }
    setTimeout(emrDelayedInit, 3000);