/**
 *  @file
 *  Attach Media ckeditor behaviors.
 */

(function ($) {
  Drupal.media = Drupal.media || {};

  /**
   * Attaches 'insert' button to media widget.
   */
  Drupal.behaviors.mediaWidgetInsert = {
    attach: function (context, settings) {
      if (Drupal.ckeditorInstance && Drupal.settings.media_ckeditor && Drupal.settings.media_ckeditor.wysiwyg_insert) {
        // Only add buttons on fields that have been configured so, by
        // consulting the Drupal.settings.media_ckeditor.wysiwyg_insert var.
        for (var fieldName in Drupal.settings.media_ckeditor.wysiwyg_insert) {
          var fieldId = '#edit-' + fieldName.replace(/_/g, '-');
          // Within the field markup, look for the table of files.
          $(fieldId, context).find('.media-widget').once('mediaInsertButton', function() {
            // For each file, check to see if there is a file ID.
            if ($(this).find('input.fid').val() != 0) {
              // Now we add the button next to "Remove".
              var insertButton = $('<a class="media-insert button">' + Drupal.t('Insert') + '</a>')
                .click(function(e) {
                  e.preventDefault();
                  var fid = $(this).parent().parent().find('.fid').val();
                  var mediaFile = {fid: fid}
                  Drupal.ckeditorInstance.mediaInsert = {mediaFiles: [mediaFile]};
                  Drupal.ckeditorInstance.execCommand('media');
                });
              // Insert the button, differently for single vs. multi value.
              var multiValue = $(fieldId + ' table', context).length;
              if (multiValue) {
                insertButton.insertBefore($(this).parent().parent().find('input.remove'));
              }
              else {
                insertButton.insertBefore($(this).find('input.remove'));
              }
            }
          });
        }
      }
    }
  };

  Drupal.settings.ckeditor.plugins['media'] = {
    /**
     * Execute the button.
     */
    invoke: function (data, settings, instanceId) {
      if (data.format == 'html') {
        // CKEDITOR module support doesn't set this setting
        if (typeof settings['global'] === 'undefined') {
          settings['global'] = {id: 'media_wysiwyg'};
        }
        // If the selection is (or contains) an element with the attribute of
        // "data-media-element", assume the user wants to edit that thing.
        var $alreadyInsertedMedia;
        if (jQuery(data.node).is('[data-media-element]')) {
          $alreadyInsertedMedia = jQuery(data.node);
        }
        else {
          $alreadyInsertedMedia = jQuery(data.node).find('[data-media-element]');
          // For some reason, in MS Edge, data.node is a descendant of what
          // we are looking for, so we should also look "upwards" for media.
          if (!$alreadyInsertedMedia.length) {
            $alreadyInsertedMedia = jQuery(data.node).closest('[data-media-element]');
          }
        }
        // First check to see if we are using an Insert button.
        if (typeof Drupal.ckeditorInstance.mediaInsert !== 'undefined') {
          var mediaFile = Drupal.ckeditorInstance.mediaInsert.mediaFiles[0];
          delete Drupal.ckeditorInstance.mediaInsert;
          Drupal.media.popups.mediaStyleSelector(mediaFile, function (mediaFiles) {
            Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, mediaFiles, CKEDITOR.instances[instanceId]);
          }, settings['global']);
        }
        // Next check to see if we are editing already-inserted media.
        else if ($alreadyInsertedMedia.length) {
          var mediaFile = Drupal.media.filter.extract_file_info($alreadyInsertedMedia);
          Drupal.media.popups.mediaStyleSelector(mediaFile, function (mediaFiles) {
            Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, mediaFiles, CKEDITOR.instances[instanceId]);
          }, settings['global']);
        }
        // Otherwise we are embedding new media.
        else {
          Drupal.media.popups.mediaBrowser(function (mediaFiles) {
            Drupal.settings.ckeditor.plugins['media'].mediaBrowserOnSelect(mediaFiles, instanceId);
          }, settings['global']);
        }
      }
    },

    /**
     * Respond to the mediaBrowser's onSelect event.
     */
    mediaBrowserOnSelect: function (mediaFiles, instanceId) {
      var mediaFile = mediaFiles[0];
      var options = {};
      Drupal.media.popups.mediaStyleSelector(mediaFile, function (formattedMedia) {
        Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, formattedMedia, CKEDITOR.instances[instanceId]);
      }, options);

      return;
    },

    insertMediaFile: function (mediaFile, formattedMedia, ckeditorInstance, fullyRenderedFile) {

      // See if we should use ajax to get the fully rendered file.
      if (typeof fullyRenderedFile === 'undefined' &&
          Drupal.settings.media_ckeditor.fully_rendered_files) {

        $.ajax({
          url: Drupal.settings.basePath + 'media/rendered-in-wysiwyg',
          type: 'GET',
          data: {
            fid: mediaFile.fid,
            view_mode: formattedMedia.type,
            fields: formattedMedia.options
          },
          success: function(html) {
            // To work around an IE issue, preload any image. The issue is
            // that IE requests the image 2 times, and one request gets a 503,
            // causing a broken image icon in the WYSIWYG instead of the actual
            // image.
            var $images = $(html).find('img');
            if (!$images.length || $(html).find('picture').length) {
              // If there are no images, just insert the html immediately, by
              // re-calling this function with the ajax-retrieved HTML.
              Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, formattedMedia, ckeditorInstance, html);
            }
            else {
              // Otherwise do the same, but only after the first image preloads.
              // Possible future improvement might be to handle multiple images
              // instead of just the first, but even better would be to remove
              // this workaround entirely, when/if IE's behavior changes.
              var image = new Image();
              image.onload = function() {
                Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, formattedMedia, ckeditorInstance, html);
              }
              image.src = $images.first().attr('src');
            }
          },
          error: function(data) {
            // Fallback to whatever the HTML was already going to be.
            Drupal.settings.ckeditor.plugins['media'].insertMediaFile(mediaFile, formattedMedia, ckeditorInstance, formattedMedia.html);
          }
        });

        // Stop for now, because the callback above re-calls this same function.
        return;
      }

      // See if we already used ajax to get the fully rendered file.
      if (typeof fullyRenderedFile !== 'undefined') {
        formattedMedia.html = fullyRenderedFile;
      }

      // Customization of Drupal.media.filter.registerNewElement().
      var element = Drupal.media.filter.create_element(formattedMedia.html, {
        fid: mediaFile.fid,
        view_mode: formattedMedia.type,
        attributes: mediaFile.attributes,
        fields: formattedMedia.options
      });

      var hasWidgetSupport = typeof(CKEDITOR.plugins.registered.widget) != 'undefined';

      // Use own wrapper element to be able to properly deal with selections.
      // Check prepareDataForWysiwygMode() in plugin.js for details.
      var wysiwygHTML = Drupal.media.filter.getWysiwygHTML(element);

      if (wysiwygHTML.indexOf("<!--MEDIA-WRAPPER-START-") !== -1) {
        ckeditorInstance.plugins.media.mediaLegacyWrappers = true;
        wysiwygHTML = wysiwygHTML.replace(/<!--MEDIA-WRAPPER-START-(\d+)-->(.*?)<!--MEDIA-WRAPPER-END-\d+-->/gi, '');
      }

      // Insert element. Use CKEDITOR.dom.element.createFromHtml to ensure our
      // custom wrapper element is preserved.
      var editorElement = CKEDITOR.dom.element.createFromHtml(wysiwygHTML);
      ckeditorInstance.insertElement(editorElement);

      // Initialize widget on our html if possible.
      if (Drupal.settings.ckeditor.plugins['media'].compareVersions(CKEDITOR.version, '4.3') >= 0 && hasWidgetSupport) {
        ckeditorInstance.widgets.initOn( editorElement, 'mediabox' );

        // Also support the image2 plugin.
        ckeditorInstance.widgets.initOn( editorElement, 'image' );
      }
    },

    /**
     * Compare versions of CKEditor to determine if one version
     * is less than, greater than, or equal to another.
     *
     * @param a
     *   A first instance of CKEditor.
     * @param b
     *   A second instance of CKEditor.
     * @return
     *   A number less than, greater than, or equal to zero.
     *   - If a < b, a number less than zero is returned.
     *   - If a > b, a number greater than zero is return.
     *   - If a = b, the value of 0 is returned.
     */
    compareVersions: function (a, b) {
      var i, diff;
      var regExStrip0 = /(\.0+)+$/;
      var segmentsA = a.replace(regExStrip0, '').split('.');
      var segmentsB = b.replace(regExStrip0, '').split('.');
      var l = Math.min(segmentsA.length, segmentsB.length);

      for (i = 0; i < l; i++) {
        diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
        if (diff) {
          return diff;
        }
      }

      return segmentsA.length - segmentsB.length;
    },

    /**
     * Forces custom attributes into the class field of the specified image.
     *
     * Due to a bug in some versions of Firefox
     * (http://forums.mozillazine.org/viewtopic.php?f=9&t=1991855), the
     * custom attributes used to share information about the image are
     * being stripped as the image markup is set into the rich text
     * editor.  Here we encode these attributes into the class field so
     * the data survives.
     *
     * @param imgElement
     *   The image
     * @fid
     *   The file id.
     * @param view_mode
     *   The view mode.
     * @param additional
     *   Additional attributes to add to the image.
     */
    forceAttributesIntoClass: function (imgElement, fid, view_mode, additional) {
      var wysiwyg = imgElement.attr('wysiwyg');
      if (wysiwyg) {
        imgElement.addClass('attr__wysiwyg__' + wysiwyg);
      }
      var format = imgElement.attr('format');
      if (format) {
        imgElement.addClass('attr__format__' + format);
      }
      var typeOf = imgElement.attr('typeof');
      if (typeOf) {
        imgElement.addClass('attr__typeof__' + typeOf);
      }
      if (fid) {
        imgElement.addClass('img__fid__' + fid);
      }
      if (view_mode) {
        imgElement.addClass('img__view_mode__' + view_mode);
      }
      if (additional) {
        for (var name in additional) {
          if (additional.hasOwnProperty(name)) {
            switch (name) {
              case 'field_file_image_alt_text[und][0][value]':
                imgElement.attr('alt', additional[name]);
                break;
              case 'field_file_image_title_text[und][0][value]':
                imgElement.attr('title', additional[name]);
                break;
              default:
                imgElement.addClass('attr__' + name + '__' + additional[name]);
                break;
            }
          }
        }
      }
    },

    /**
     * Retrieves encoded attributes from the specified class string.
     *
     * @param classString
     *   A string containing the value of the class attribute.
     * @return
     *   An array containing the attribute names as keys, and an object
     *   with the name, value, and attribute type (either 'attr' or
     *   'img', depending on whether it is an image attribute or should
     *   be it the attributes section)
     */
    getAttributesFromClass: function (classString) {
      var actualClasses = [];
      var otherAttributes = [];
      var classes = classString.split(' ');
      var regexp = new RegExp('^(attr|img)__([^\S]*)__([^\S]*)$');
      for (var index = 0; index < classes.length; index++) {
        var matches = classes[index].match(regexp);
        if (matches && matches.length === 4) {
          otherAttributes[matches[2]] = {
            name: matches[2],
            value: matches[3],
            type: matches[1]
          };
        }
        else {
          actualClasses.push(classes[index]);
        }
      }
      if (actualClasses.length > 0) {
        otherAttributes['class'] = {
          name: 'class',
          value: actualClasses.join(' '),
          type: 'attr'
        };
      }
      return otherAttributes;
    },

    sortAttributes: function (a, b) {
      var nameA = a.name.toLowerCase();
      var nameB = b.name.toLowerCase();
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
      return 0;
    }
  };

  // If media_ckeditor is configured to render items in the wysiwyg as full
  // rendered file entities, we need to completely hijack a function from
  // media_wysiwyg.filter.js.
  if (Drupal.settings.media_ckeditor.fully_rendered_files) {

    // Replaces function of the same name, from media_wysiwyg.filter.js.
    Drupal.media.filter.replacePlaceholderWithToken = function(content) {

      var $placeholder = $(content);
      if ($placeholder.hasClass('media-element')) {
        var macro = Drupal.media.filter.create_macro($placeholder);
        Drupal.media.filter.ensure_tagmap();
        Drupal.settings.tagmap[macro] = content;
        return macro;
      }
      return content;
    }
  }
})(jQuery);