/*!

* froala_editor v2.3.3 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2016 Froala Labs
*/

(function (factory) {

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
    // Node/CommonJS
    module.exports = function( root, jQuery ) {
        if ( jQuery === undefined ) {
            // require('jQuery') returns a factory that requires window to
            // build a jQuery instance, we normalize how we use modules
            // that require this pattern but the window provided is a noop
            // if it's defined (how jquery works)
            if ( typeof window !== 'undefined' ) {
                jQuery = require('jquery');
            }
            else {
                jQuery = require('jquery')(root);
            }
        }
        factory(jQuery);
        return jQuery;
    };
} else {
    // Browser globals
    factory(jQuery);
}

}(function ($) {

'use strict';

$.extend($.FE.POPUP_TEMPLATES, {
  'colors.picker': '[_BUTTONS_][_TEXT_COLORS_][_BACKGROUND_COLORS_]'
})

// Extend defaults.
$.extend($.FE.DEFAULTS, {
  colorsText: [
    '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
    '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
    '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', 'REMOVE',
    '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#FFFFFF', 'PICKER'
  ],
  colorsBackground: [
    '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
    '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
    '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', 'REMOVE',
    '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#FFFFFF', 'PICKER'
  ],
  colorsStep: 7,
  colorsDefaultTab: 'text',
  colorsButtons: ['colorsBack', '|', '-']
});

$.FE.PLUGINS.colors = function (editor) {
  /*
   * Show the colors popup.
   */
  function _showColorsPopup () {
    var $btn = editor.$tb.find('.fr-command[data-cmd="color"]');

    var $popup = editor.popups.get('colors.picker');
    if (!$popup) $popup = _initColorsPopup();

    if (!$popup.hasClass('fr-active')) {
      // Colors popup
      editor.popups.setContainer('colors.picker', editor.$tb);

      // Refresh selected color.
      _refreshColor($popup.find('.fr-selected-tab').attr('data-param1'));

      // Colors popup left and top position.
      if ($btn.is(':visible')) {
        var left = $btn.offset().left + $btn.outerWidth() / 2;
        var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);
        editor.popups.show('colors.picker', left, top, $btn.outerHeight());
      }
      else {
        editor.position.forSelection($popup);
        editor.popups.show('colors.picker');
      }
    }
  }

  /*
   * Hide colors popup.
   */
  function _hideColorsPopup () {
    // Hide popup.
    editor.popups.hide('colors.picker');
  }

  /**
   * Init the colors popup.
   */
  function _initColorsPopup () {
    var colors_buttons = '<div class="fr-buttons fr-colors-buttons">';

    if (editor.opts.toolbarInline) {
      // Colors buttons.
      if (editor.opts.colorsButtons.length > 0) {
        colors_buttons += editor.button.buildList(editor.opts.colorsButtons)
      }
    }

    colors_buttons += _colorsTabsHTML() + '</div>';

    var template = {
      buttons: colors_buttons,
      text_colors: _colorPickerHTML('text'),
      background_colors: _colorPickerHTML('background')
    };

    // Create popup.
    var $popup = editor.popups.create('colors.picker', template);

    return $popup;
  }

  /*
   * HTML for the color picker text and background tabs.
   */
  function _colorsTabsHTML () {
    var tabs_html = '<div class="fr-colors-tabs">';

    // Text tab.
    tabs_html += '<span class="fr-colors-tab ' + (editor.opts.colorsDefaultTab == 'background' ? '' : 'fr-selected-tab ') + 'fr-command" data-param1="text" data-cmd="colorChangeSet" title="' + editor.language.translate('Text') + '">' + editor.language.translate('Text') + '</span>';

    // Background tab.
    tabs_html += '<span class="fr-colors-tab ' + (editor.opts.colorsDefaultTab == 'background' ? 'fr-selected-tab ' : '') + 'fr-command" data-param1="background" data-cmd="colorChangeSet" title="' + editor.language.translate('Background') + '">' + editor.language.translate('Background') + '</span>';

    return tabs_html + '</div>';
  }

  /*
   * HTML for the color picker colors.
   */
  function _colorPickerHTML (tab) {
    // Get colors according to tab name.
    var colors = (tab == 'text' ? editor.opts.colorsText : editor.opts.colorsBackground);

    // Create colors html.
    var colors_html = '<div class="fr-color-set fr-' + tab + '-color' + ((editor.opts.colorsDefaultTab == tab || (editor.opts.colorsDefaultTab != 'text' && editor.opts.colorsDefaultTab != 'background' && tab == 'text')) ? ' fr-selected-set' : '') + '">';

    // Add colors.
    for (var i = 0; i < colors.length; i++) {
      if (i !== 0 && i % editor.opts.colorsStep === 0) {
        colors_html += '<br>';
      }

      if (colors[i] == 'REMOVE') {
        colors_html += '<span class="fr-command fr-select-color" data-cmd="' + tab + 'Color" data-param1="REMOVE" title="' + editor.language.translate('Clear Formatting') + '">' + editor.icon.create('remove') + '</span>';
      }
      else if (colors[i] == 'PICKER') {
        colors_html += '<span class="fr-command fr-select-color fr-color-picker-btn" data-cmd="' + tab + 'Color" data-param1="PICKER" title="' + editor.language.translate('Select Color') + '"><img src="assets/froala_editor/color_picker.png"></span>';
      }
      else {
        colors_html += '<span class="fr-command fr-select-color" style="background: ' + colors[i] + ';" data-cmd="' + tab + 'Color" data-param1="' + colors[i] + '"></span>';
      }
    }

    return colors_html + '</div>';
  }

  /*
   * Show the current selected color.
   */
  function _refreshColor (tab) {
    var $popup = editor.popups.get('colors.picker');
    var $element = $(editor.selection.element());

    // The color css property.
    var color_type;
    if (tab == 'background') {
      color_type = 'background-color';
    }
    else {
      color_type = 'color';
    }

    // Remove current color selection.
    $popup.find('.fr-' + tab + '-color .fr-select-color').removeClass('fr-selected-color');

    // Find the selected color.
    while ($element.get(0) != editor.$el.get(0)) {
      // Transparent or black.
      if ($element.css(color_type) == 'transparent' || $element.css(color_type) == 'rgba(0, 0, 0, 0)') {
        $element = $element.parent();
      }

      // Select the correct color.
      else {
        $popup.find('.fr-' + tab + '-color .fr-select-color[data-param1="' + editor.helpers.RGBToHex($element.css(color_type)) + '"]').addClass('fr-selected-color');
        break;
      }
    }
  }

  /*
   * Change the colors' tab.
   */
  function _changeSet ($tab, val) {
    // Only on the tab that is not selected yet. On left click only.
    if (!$tab.hasClass('fr-selected-tab')) {
      // Switch selected tab.
      $tab.siblings().removeClass('fr-selected-tab');
      $tab.addClass('fr-selected-tab');

      // Switch the color set.
      $tab.parents('.fr-popup').find('.fr-color-set').removeClass('fr-selected-set');
      $tab.parents('.fr-popup').find('.fr-color-set.fr-' + val + '-color').addClass('fr-selected-set');

      // Refresh selected color.
      _refreshColor(val);
    }
  }

  /*
   * Change background color.
   */
  function background (val) {
    // Remove background color.
    if (val == 'REMOVE') {
      editor.format.removeStyle('background-color');
    }
    else if (val == 'PICKER') {
      $('.fr-color-picker').val('');
      $('.fr-color-picker')[0].click();
      $('.fr-color-picker').change(function(){
        editor.format.applyStyle('color', editor.helpers.HEXtoRGB($(this).val()));
      });
    }
    // Set background  color.
    else {
      editor.format.applyStyle('background-color', editor.helpers.HEXtoRGB(val));
    }

    _hideColorsPopup();
  }

  /*
   * Change text color.
   */
  function text (val) {
    // Remove text color.
    if (val == 'REMOVE') {
      editor.format.removeStyle('color');
    }
    else if (val == 'PICKER') {
      $('.fr-color-picker').val('');
      $('.fr-color-picker')[0].click();
      $('.fr-color-picker').change(function(){
        editor.format.applyStyle('color', editor.helpers.HEXtoRGB($(this).val()));
      });
    }
    // Set text color.
    else {
      editor.format.applyStyle('color', editor.helpers.HEXtoRGB(val));
    }

    _hideColorsPopup();
  }

  /*
   * Go back to the inline editor.
   */
  function back () {
    editor.popups.hide('colors.picker');
    editor.toolbar.showInline();
  }

  return {
    showColorsPopup: _showColorsPopup,
    hideColorsPopup: _hideColorsPopup,
    changeSet: _changeSet,
    background: background,
    text: text,
    back: back
  }
}

// Toolbar colors button.
$.FE.DefineIcon('colors', { NAME: 'tint' });
$.FE.RegisterCommand('color', {
  title: 'Colors',
  undo: false,
  focus: true,
  refreshOnCallback: false,
  popup: true,
  callback: function () {
    if (!this.popups.isVisible('colors.picker')) {
      this.colors.showColorsPopup();
    }
    else {
      if (this.$el.find('.fr-marker')) {
        this.events.disableBlur();
        this.selection.restore();
      }
      this.popups.hide('colors.picker');
    }
  },
  plugin: 'colors'
});

// Select text color command.
$.FE.RegisterCommand('textColor', {
  undo: true,
  callback: function (cmd, val) {
    this.colors.text(val);
  }
});

// Select background color command.
$.FE.RegisterCommand('backgroundColor', {
  undo: true,
  callback: function (cmd, val) {
    this.colors.background(val);
  }
});

$.FE.RegisterCommand('colorChangeSet', {
  undo: false,
  focus: false,
  callback: function (cmd, val) {
    var $tab = this.popups.get('colors.picker').find('.fr-command[data-cmd="' + cmd + '"][data-param1="' + val + '"]');
    this.colors.changeSet($tab, val);
  }
});

// Colors back.
$.FE.DefineIcon('colorsBack', { NAME: 'arrow-left' });
$.FE.RegisterCommand('colorsBack', {
  title: 'Back',
  undo: false,
  focus: false,
  back: true,
  refreshAfterCallback: false,
  callback: function () {
    this.colors.back();
  }
});

$.FE.DefineIcon('remove', { NAME: 'eraser' });

}));