(function(CKEDITOR) {
  CKEDITOR.plugins.add('carouselka', {
    requires: 'widget',
    icons: 'carouselka',
    hidpi: true,
    init: function(editor) {
      editor.widgets.add('carouselka', {
        button: 'Добавить галерею',
        template: '<figure class="carouselka"><div class="carouselka-meta">Фотогалерея (0 фото)</div></figure>',
        editables: {},
        allowedContent: {
          div: {
            attributes: 'data-images',
            classes: { 'carouselka-meta': true },
            requiredClasses: { 'carouselka-meta': true }
          },
          figure: {
            classes: { carouselka: true },
            requiredClasses: { carouselka: true }
          }
        },
        requiredContent: 'figure(carouselka)',
        defaults: {
          images: []
        },
        upcast: function(el) {
          return el.name === 'figure' && el.hasClass('carouselka');
        },
        onModalSubmit: function(images) {
          if (!images.length) {
            this.destroySelf();
          } else {
            this.setData({
              images: images
            });

            editor.fire('change');
          }
        },
        onModalCancel: function() {
          var images = this.data.images;

          if (!images.length) {
            this.destroySelf();
          }
        },
        edit: function() {
          var images = this.data.images;

          window.CKEDITOR.EventHub.trigger('ckeditor-carouselka', {
            images: images,
            onSubmit: this.onModalSubmit.bind(this),
            onCancel: this.onModalCancel.bind(this)
          });
        },
        init: function() {
          var content = this.element.$.children[0];
          var images = (content && JSON.parse(content.getAttribute('data-images'))) || [];

          var metaElem = new CKEDITOR.htmlParser.element('div', { class: 'carouselka-meta' });

          this.element.$.children[0] = metaElem;

          this.setData({ images: images });
        },
        data: function() {
          var images = this.data.images;
          var imagesCount = images.length;

          this.element.$.children[0].innerText = 'Фотогалерея (' + imagesCount + ' фото)';
        },
        destroySelf: function() {
          var self = this;
          var el = this.element.$;

          self.destroy();

          setTimeout(function() {
            el.remove();
            editor.fire('change');
          }, 200);
        },
        downcast: function(el) {
          el.children = [
            new CKEDITOR.htmlParser.element('div', {
              class: 'carouselka-meta',
              'data-images': JSON.stringify(this.data.images)
            })
          ];

          return el;
        }
      });
    }
  });
})(CKEDITOR);