//= require mosaico/dist/vendor/jquery.min.js
//= require mosaico/dist/vendor/knockout.js
//= require mosaico/dist/vendor/jquery-ui.min.js
//= require mosaico/dist/vendor/jquery.ui.touch-punch.min.js
//= require mosaico/dist/vendor/load-image.all.min.js
//= require mosaico/dist/vendor/canvas-to-blob.min.js
//= require mosaico/dist/vendor/jquery.iframe-transport.js
//= require mosaico/dist/vendor/jquery.fileupload.js
//= require mosaico/dist/vendor/jquery.fileupload-process.js
//= require mosaico/dist/vendor/jquery.fileupload-image.js
//= require mosaico/dist/vendor/jquery.fileupload-validate.js
//= require mosaico/dist/vendor/knockout-jqueryui.min.js
//= require mosaico/dist/vendor/tinymce.min.js
//= require mosaico/dist/mosaico.min.js

//= require ./utilities.js

//= require ./plugins/debug.js
//= require ./plugins/logo.js
//= require ./plugins/save.js
//= require ./plugins/template_path.js
//= require ./plugins/translations.js

$(document).ready(function() {
  var plugins = [].concat(window.mosaico.plugins);

  var options = {
    imgProcessorBackend: '<%= Mosaico::Engine.routes.url_helpers.mosaico_image_path %>',
    // emailProcessorBackend: basePath + '/dl/',  // @TODO
    titleToken: "MOSAICO Responsive Email Designer",
    fileuploadConfig: {
      url: '<%= Mosaico::Engine.routes.url_helpers.mosaico_image_path %>',
      formData: {
        authenticity_token: window.mosaico.utilities.authenticityToken()
      }
    }
  };

  var mosaicoDataElem = $('#mosaico');
  var templateUrl = mosaicoDataElem.data('template-url');
  var projectMetadata = mosaicoDataElem.data('project-metadata');
  var projectContent = mosaicoDataElem.data('project-content');
  var mcePluginPaths = mosaicoDataElem.data('mce-plugin-paths');
  var mceThemePaths = mosaicoDataElem.data('mce-theme-paths');
  var mceSkinPaths = mosaicoDataElem.data('mce-skin-paths');

  // These are tinymce plugins, themes, and skins we should load that mosaico actually
  // uses. We have to load them explicitly in order to use the correct asset paths.
  // Christ what a pain this is.
  var mcePlugins = ['link', 'hr', 'paste', 'lists', 'textcolor', 'code'];
  var mceTheme = 'modern';
  var mceSkin = 'gray-flat';

  mcePlugins.forEach(function(plugin) {
    tinymce.PluginManager.load(
      plugin, window.mosaico.utilities.urlJoin([
        '<%= Rails.application.config.assets.prefix %>', mcePluginPaths[plugin]
      ])
    );
  });

  tinymce.ThemeManager.load(
    mceTheme, window.mosaico.utilities.urlJoin([
      '<%= Rails.application.config.assets.prefix %>', mceThemePaths[mceTheme]
    ])
  );

  // tell tinymce (via knockout) to avoid loading any skin files on it's own,
  // we'll handle loading them manually below
  ko.bindingHandlers.wysiwyg.fullOptions.skin = false;
  ko.bindingHandlers.wysiwyg.standardOptions.skin = false;

  var cssSkinUrls = [
    mceSkinPaths[mceSkin].css.skin,
    mceSkinPaths[mceSkin].css.inline_content
  ];

  cssSkinUrls.forEach(function(url) {
    tinymce.DOM.styleSheetLoader.load(
      window.mosaico.utilities.urlJoin([
        '<%= Rails.application.config.assets.prefix %>', url
      ])
    );
  });

  Mosaico.start(
    options,
    templateUrl,
    projectMetadata,
    projectContent, // i.e. view model
    plugins
  );
});