(function (global, $, _, Backbone, Dropzone) {
  'use strict';

  var SettingsView,
      SettingView,
      NamePositionView,
      FieldFormView,
      FormPaddingsView,
      FontView,
      BackgroundColorView,
      BackgroundImageView,
      ThemesView,
      themes = [
        {
          settings: {
            background: {
              type: 'color',
              value: 'transparent'
            },
            font: {
              family: "Arial",
              size: 15
            },
            names_position: 'before',
            form_paddings: 'no',
            borders_type: 'rounded'
          },
          submit: {
            color: '#2184db'
          }
        },
        {
          settings: {
            background: {
              type: 'color',
              value: '#f6f7fa'
            },
            font: {
              family: "PT Sans",
              size: 15
            },
            names_position: 'before',
            form_paddings: 'yes',
            borders_type: 'rounded'
          },
          submit: {
            color: '#49b65d'
          }
        },
        {
          settings: {
            background: {
              type: 'color',
              value: '#323d45'
            },
            font: {
              family: "Georgia",
              size: 15
            },
            names_position: 'above',
            form_paddings: 'yes',
            borders_type: 'rectangular'
          },
          submit: {
            color: '#f78d46'
          }
        },
        {
          settings: {
            background: {
              type: 'image',
              value: AMOFORMS.images.url + 'bg/bg1.jpg'
            },
            font: {
              family: "PT Sans",
              size: 15
            },
            names_position: 'inside',
            form_paddings: 'yes',
            borders_type: 'rounded'
          },
          submit: {
            color: '#ff5722'
          }
        },
        {
          settings: {
            background: {
              type: 'image',
              value: AMOFORMS.images.url + 'bg/bg3.jpg'
            },
            font: {
              family: "Times New Roman",
              size: 15
            },
            names_position: 'inside',
            form_paddings: 'yes',
            borders_type: 'rectangular'
          },
          submit: {
            color: '#f78d46'
          }
        },
        {
          settings: {
            background: {
              type: 'image',
              value: AMOFORMS.images.url + 'bg/bg2.jpg'
            },
            font: {
              family: "Lucida Console",
              size: 15
            },
            names_position: 'inside',
            form_paddings: 'yes',
            borders_type: 'rounded'
          },
          submit: {
            color: '#2e95d1'
          }
        }
      ];

  SettingView = Backbone.View.extend({
    ns: '.amoforms:setting:view',
    className: 'amoforms',

    events: {
      'click': 'stopPropagation'
    },

    initialize: function (options) {
      this.options = options || {};
      $(document).on('click' + this.ns, _.bind(this.remove, this));
    },

    _remove: function () {},

    remove: function () {

      if (this._removed) {
        return;
      }

      this._remove();
      this._removed = true;
      $(document).off(this.ns);
      Backbone.View.prototype.remove.apply(this, arguments);
    },

    render: function () {
      this._render_template();
      this._render();

      this.reposition();
    },

    _render_template: function() {
      this.$el.html(this.template());
    },

    _render: function () {},

    stopPropagation: function (e) {
      e.stopPropagation();
    },

    reposition: function () {
      var offset = this.options.$button.offset();

      this.$el.css({
        position: 'absolute',
        top: offset.top + this.options.$button[0].offsetHeight + 10,
        left: offset.left - (this.el.offsetWidth/2) + (this.options.$button[0].offsetWidth/2),
        zIndex: 10
      });
    },

    commit: function (new_settings) {
      if (this.ajax_sended) {
        return;
      }
      this.ajax_sended = true;

      $.ajax({
        url: ajaxurl,
        data: {
          action: AMOFORMS.ajax_action_prefix + 'update_design_settings',
          form: {
            id: this.options.form_id,
            settings: _.extend({}, new_settings)
          }
        },
        dataType: 'json',
        type: 'POST'
      })
      .always(_.bind(function () {
        this.ajax_sended = false;
      }, this))
      .done(_.bind(function (res) {

      }, this));
    }
  });

  /* Themes View */
  ThemesView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-themes',
    template: _.template(
      '<div class="amoforms__settings-modal">' +
        '<ul class="amoforms__settings-modal__themes__wrapper">' +
          _.map(themes, function (v, k) {
            return '<li data-value="' + k + '"><img src="' + AMOFORMS.images.url + 'themes/theme' + (k+1) + '.png"></li>';
          }).join('') +
        '</ul>' +
      '</div>'
    ),

    events: {
      'click li': 'changeTheme'
    },

    changeTheme: function (e) {
      var val = $(e.currentTarget).attr('data-value');

      this.options.changeDesign(val);
      this.commit(_.extend({}, themes[val].settings, {
        submit: themes[val].submit
      }));
    },

    reposition: function () {
      var offset = this.options.$button.offset();

      this.$el.css({
        position: 'absolute',
        top: offset.top + this.options.$button[0].offsetHeight + 10,
        left: offset.left,
        zIndex: 10
      });
    }
  });
  /* end of Themes View */

  /* Name Position View */
  NamePositionView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-name-position',
    template: _.template(
      '<div class="amoforms__settings-modal">' +
        '<button class="amoforms__setting-modal-name-position__btn" data-type="before"><b></b>Before</button>' +
        '<button class="amoforms__setting-modal-name-position__btn" data-type="above"><b></b>Above</button>' +
        '<button class="amoforms__setting-modal-name-position__btn" data-type="inside"><b></b>Inside</button>' +
      '</div>'
    ),

    events: _.extend({}, SettingView.prototype.events, {
      'click .amoforms__setting-modal-name-position__btn': 'changeNamePosition'
    }),

    _render: function () {
      this.$('[data-type="' + this.options.$button.attr('data-value') + '"]').addClass('selected');
    },

    changeNamePosition: function (e) {
      var $this = $(e.currentTarget);

      $this.parent().find('.selected').removeClass('selected');
      $this.addClass('selected');

      this.options.$button.attr('data-value', $this.attr('data-type'));
      $(document).trigger('amoforms:field:render', [$this.attr('data-type')]);
    },

    _remove: function () {
      this.commit({
        names_position: this.$('.selected').attr('data-type')
      });
    }
  });
  /* End of Name Position View */

  /* Field Form View */
  FieldFormView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-field-form',
    template: _.template(
      '<div class="amoforms__settings-modal">' +
        '<button class="amoforms__setting-modal-field-form__btn" data-type="rectangular">Square</button>' +
        '<button class="amoforms__setting-modal-field-form__btn" data-type="rounded">Rounded</button>' +
      '</div>'
    ),
    css_rule: 'field-form',

    events: {
      'click .amoforms__setting-modal-field-form__btn': 'changeFieldForm'
    },

    _remove: function () {
      this.commit({
        borders_type: this.$('.selected').attr('data-type')
      });
    },

    changeFieldForm: function (e) {
      var $this = $(e.currentTarget),
          type = $this.attr('data-type');

      e.stopPropagation();

      $this.parent().find('.selected').removeClass('selected');
      $this.addClass('selected');

      this.options.$button.attr('data-value', type);
      this.options.changeSetting(this.css_rule, [type]);
      // this.options.$fields_view.attr('data-fields-form', type);
    },

    _render: function () {
      this.$('[data-type="' + this.options.$button.attr('data-value') + '"]').addClass('selected');
    }
  });
  /* End of Field Form View */

  /* Form Paddings View */
  FormPaddingsView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-form-paddings',
    template: _.template(
      '<div class="amoforms__settings-modal">' +
        '<button class="amoforms__setting-modal-form-paddings__btn" data-type="yes">With borders</button>' +
        '<button class="amoforms__setting-modal-form-paddings__btn" data-type="no">Without borders</button>' +
      '</div>'
    ),
    css_rule: 'form-paddings',

    selectors: {
      size_btns: '.amoforms__size-btn',
      fields__edit: '.amoforms__fields__edit',
      fields__row: '.amoforms__fields__row'
    },

    events: _.extend({}, SettingView.prototype.events, {
      'click .amoforms__setting-modal-form-paddings__btn': 'changeFormPaddings'
    }),

    _remove: function () {
      this.commit({
        form_paddings: this.$('.selected').attr('data-type')
      });
    },

    _render: function () {
      this.$('[data-type="' + this.options.$button.attr('data-value') + '"]').addClass('selected');
    },

    changeFormPaddings: function (e) {
      var $this = $(e.currentTarget),
          val = $this.attr('data-type');

      $this.parent().find('.selected').removeClass('selected');
      $this.addClass('selected');

      this.options.$button.attr('data-value', val);
      this.options.changeSetting(this.css_rule, [val]);

      if (val == 'yes') {
        $(this.selectors['fields__edit']).removeClass('delete');
      } else {
        $(this.selectors['fields__edit']).addClass('delete');
      }

    }
  });
  /* End of Form Paddings View */

  /* Font View */
  FontView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-font',
    template: _.template(
      '<div class="amoforms__settings-modal">' +
        '<ul class="amoforms__settings-modal__font-family">' +
          '<li style="font-family: \'PT Sans\',serif" data-value="PT Sans">PT Sans</li>' +
          '<li style="font-family: Arial,serif" data-value="Arial">Arial</li>' +
          '<li style="font-family: \'Courier New\',serif" data-value="Courier New">Courier New</li>' +
          '<li style="font-family: Georgia,serif" data-value="Georgia">Georgia</li>' +
          '<li style="font-family: \'Lucida Console\',serif" data-value="Lucida Console">Lucida Console</li>' +
          '<li style="font-family: Tahoma,serif" data-value="Tahoma">Tahoma</li>' +
          '<li style="font-family: \'Times New Roman\',serif" data-value="Times New Roman">Times New Roman</li>' +
          '<li style="font-family: Verdana,serif" data-value="Verdana">Verdana</li>' +
        '</ul>' +
        '<div class="amoforms__settings-modal__font-size clearfix">' +
          '<button class="amoforms__size-btn amoforms__size-btn-minus" data-type="minus">&mdash;</button>' +
          '<input type="text" class="amoforms__text-input amoforms__settings-modal__font-size__input">' +
          '<button class="amoforms__size-btn amoforms__size-btn-plus" data-type="plus">+</button>' +
        '</div>' +
      '</div>'
    ),
    css_rule: 'font',
    min_size: 12,
    max_size: 24,

    selectors: {
      size: '.amoforms__settings-modal__font-size__input',
      size_btns: '.amoforms__size-btn'
    },

    events: _.extend({}, SettingView.prototype.events, {
      'click li': 'changeFontFamily',
      'click .amoforms__size-btn:not(.disabled)': 'clickChangeFontSize',
      'blur .amoforms__settings-modal__font-size__input': 'inputChangeSize'
    }),

    _remove: function () {
      this.commit({
        font: {
          family: this.$('li.selected').attr('data-value'),
          size: this.cleanSize(this.$(this.selectors['size']).val())
        }
      });
    },

    changeFontFamily: function (e) {
      var $this = $(e.currentTarget);

      $this.parent().children('.selected').removeClass('selected');
      $this.addClass('selected');
      this.options.$button.attr('data-font-family', $this.attr('data-value'));
      this.changeSetting();
    },

    changeSetting: function () {
      this.options.changeSetting(this.css_rule, [this.$('li.selected').attr('data-value'), this.cleanSize(this.$(this.selectors['size']).val())]);
    },

    _render: function () {
      this.$(this.selectors['size']).val(this.options.$button.attr('data-font-size'));
      this.$('[data-value="' + this.options.$button.attr('data-font-family') + '"]').addClass('selected');
    },

    clickChangeFontSize: function (e) {
      var $this = $(e.currentTarget),
          current_size = parseInt(this.$(this.selectors['size']).val(), 10);

      current_size += $this.attr('data-type') == 'minus' ? -1 : 1;

      if (current_size >= this.max_size) {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').addClass('disabled');
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').removeClass('disabled');
      } else {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').removeClass('disabled');
      }
      if (current_size <= this.min_size) {
        this.$(this.selectors['size_btns'] + '[data-type="plus"]').removeClass('disabled');
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').addClass('disabled');
      } else {
        this.$(this.selectors['size_btns'] + '[data-type="minus"]').removeClass('disabled');
      }
      this.options.$button.attr('data-font-size', current_size);
      this.$(this.selectors['size']).val(current_size);

      this.changeSetting();
    },

    cleanSize: function (size) {
      size = parseInt(size, 10);

      if (size < this.min_size) {
        return this.min_size;
      }
      if (size > this.max_size) {
        return this.max_size;
      }
      return size;
    },

    inputChangeSize: function (e) {
      var $this = $(e.currentTarget);
      $this.val(this.cleanSize($this.val()));
      this.changeSetting();
    }
  });
  /* End of Font View */

  /* Background Color View */
  BackgroundColorView = SettingView.extend({
    tagName: 'input',
    css_rule: 'background-color',

    render: function () {
      var $color_indicator = this.options.$button.find('.color'),
          color = $color_indicator.css('background-color'),
          isTransparent = false;

      if (color.indexOf('rgba') != -1) {
        var alpha = color.replace(/^.*,(.+)\)/,'$1')
        if (alpha == 0) {
          color = 'transparent';
          isTransparent = true;
        }
      } else if (color.indexOf('transparent') != -1) {
          color = 'transparent';
          isTransparent = true;
      } else {
        color = AMOFORMS.core.fn.rgb2hex(color);
      }

      this.$el.val(color).css({
        position: 'absolute',
        opacity: 0,
        top: -999,
        left: -999
      }).ColorPicker({
        color: color,
        isTransparent: isTransparent,

        onChange: _.bind(this.changeColor, this),
        onShow: _.bind(this.colorpickerShow, this),
        onHide: _.bind(this.colorpickerHide, this)
      }).ColorPickerShow();
    },

    getTextColor: function (hex_color) {
      return AMOFORMS.core.fn.isDarkColor(hex_color) ? '#fff' : '#313942';
    },

    changeColor: function (rgb, hex_color) {
      var color = hex_color == 'transparent' ? hex_color : '#' + hex_color,
          text_color = this.getTextColor(hex_color);

      this.options.$button.find('.color').css('background-color', color);
      this.options.changeSetting(this.css_rule, [color, text_color]);
      this.$el.val(color);
    },

    colorpickerShow: function (colorpicker_el) {
      var offset = this.options.$button.offset(),
          color = this.$el.val(),
          text_color = this.getTextColor(color);

      $(colorpicker_el).css({
        left: offset.left,
        top: offset.top + this.options.$button[0].offsetHeight
      });

      this.options.changeSetting(this.css_rule, [color, text_color]);
    },

    _remove: function () {
      this.commit({
        background: {
          type: 'color',
          value: this.$el.val()
        }
      });
    },

    colorpickerHide: function (colorpicker_el) {
      $(colorpicker_el).remove();
      if (this._removed) {
        this._remove();
      } else {
        this.remove();
      }
    }
  });
  /* End of Background Color View */

  /* Background Image View */
  BackgroundImageView = SettingView.extend({
    className: SettingView.prototype.className + ' amoforms__setting-modal-background-image',
    template: function () {
      var backgrounds = _.map(AMOFORMS.images.backgrounds, function (background) {
        if (!background.thumb || !background.thumb.url || !background.img_basename) {
          return '';
        }

        var params = {
          image_url: background.url,
          thumb_url: background.thumb.url,
          img_basename: background.img_basename
        };

        return _.template(
          '<li class="js-background-choose" data-value="' + background.url + '" data-item="' + background.img_basename + '"><img src="' + background.thumb.url + '"><div class="js-background-clear"></div></li>'
        , params);
      }).join('');

      return _.template(
        '<div class="amoforms__settings-modal">' +
        '<div class="amoforms__settings-modal__background-image__title clearfix"><div class="title-left">Load or Drag&Drop Image</div><div class="title-right-clear">Clear</div></div>'+
        '<ul class="amoforms__settings-modal__background-image__wrapper">' +
        '<%= backgrounds %>' +
        '<li><div id="background-dropzone" style="width: 92px; height: 92px;"><div class="dz-message" data-dz-message><span>Load Image</span><div class="dz-success-mark"><span></span></div></div></li>' +
        '</ul>' +
        '</div>'
      , {backgrounds: backgrounds});
    },

    css_rule: 'background-image',

    events: _.extend({}, SettingView.prototype.events, {
      'click li.js-background-choose': 'changeBackgroundImage',
      'click .title-right-clear': 'clearBackground',
      'click .js-background-clear': 'deleteImages'
    }),

    _render: function () {
      this.$('[data-value="' + this.options.$button.attr('data-value') + '"]').addClass('selected');
      this.initDropZone();
      this.changed = false;
    },

    reposition: function () {
      var offset = this.options.$button.offset(),
          left;

      if ($(window).width() > 1300)
        left = offset.left + this.options.$button[0].offsetWidth - this.el.offsetWidth;
      else
        left = offset.left - (this.el.offsetWidth/2) + (this.options.$button[0].offsetWidth/2);

      this.$el.css({
        position: 'absolute',
        top: offset.top + this.options.$button[0].offsetHeight + 10,
        left: left,
        zIndex: 10
      });
    },

    initDropZone: function () {
      var selector = '#background-dropzone',
        $zone = $(selector);

      $(document.body).on('click' + this.ns, '.dz-hidden-input', function(e) {
        e.stopPropagation();
      });

      this.destroyDropZone();

      if (!$zone.length) {
        return;
      }

      this.drop_zone = new Dropzone(selector, {
        url: "/wp-admin/admin-ajax.php?action=amoforms_upload_form_background",
        paramName: 'background_image',
        autoProcessQueue: true,
        uploadMultiple: false,
        parallelUploads: 1,
        maxFiles: 1,
        previewTemplate: '<p>File</p>',
        init: _.bind(function () {

        }, this),
        success: _.bind(function (file, data) {
          // @TODO: handle !data.result
          if (!data.result) {

            return;
          }

          data = _.extend({
            image_url: '',
            thumb_url: '',
            img_basename: ''
          }, data);

          var background = {
            url: data.image_url,
            thumb: {url: data.thumb_url},
            img_basename: data.img_basename
          };

          AMOFORMS.images.backgrounds.push(background);
          this._render_template();
          this.initDropZone();
        }, this)
      });
    },

    destroyDropZone: function () {
      this.drop_zone && this.drop_zone.destroy && this.drop_zone.destroy();
      $(document).off('click' + this.ns, '.dz-input-hidden');
    },

    deleteImages: function (e) {
      var $this = $(e.currentTarget);
      e.stopPropagation();
      new AMOFORMS.core.confirm({
        template_params: {
          caption: 'Are you sure you want to delete?',
          accept_btn: 'Yes',
          decline_btn: 'No'
        },
        accept: _.bind(function (confirm) {
              if (this.$el.find('.amoforms__captcha').length > 0) {
                $('[data-type="captcha"]').attr('data-active', 'true');
              }
              $.ajax({
                  url: ajaxurl,
                  data: {
                    action: AMOFORMS.ajax_action_prefix + 'delete_form_background',
                    img_basename: $this.parent().attr('data-item')
                  },
                  dataType: 'json',
                  type: 'POST'
                }).done(_.bind(function () {
                  var nameImg = $this.parent().attr('data-item');
                  $this.closest('.js-background-choose').remove();
                  for (var p in AMOFORMS.images.backgrounds) {
                    if (nameImg == AMOFORMS.images.backgrounds[p].img_basename) {
                      AMOFORMS.images.backgrounds.splice(p, 1);
                    }
                  }
                }, this)
                );
              this.changed = ['image', ''];
              confirm.done();
            }, this),
            fail: _.bind(function () {
              confirm.failed();
            }, this),
      });
    },

    removeImages: function(e) {
      var $this = $(e.currentTarget);
      e.remove();
      this.commit({
        background: {
          type: 'color',
          value: color
        }
      });
    },

    getTextColorClear: function (hex_color) {
      return AMOFORMS.core.fn.isDarkColor(hex_color) ? '#fff' : '#313942';
    },

    clearBackground: function (e) {
      var color = 'transparent',
          text_color = this.getTextColorClear(color);

      e.stopPropagation();

      this.options.changeSetting('background-color', [color, text_color]);
      this.changed = ['color', color];
    },

    changeBackgroundImage: function (e) {
      var $this = $(e.currentTarget),
          val = $this.attr('data-value');

      e.stopPropagation();

      $this.parent().find('.selected').removeClass('selected');
      $this.addClass('selected');

      this.options.$button.attr('data-value', val);
      this.options.changeSetting(this.css_rule, [val]);
      this.changed = ['image', this.options.$button.attr('data-value')];
    },

    _remove: function () {
      if (!this.changed || !this.changed[0] || !this.changed[1]) {
        return;
      }

      this.commit({
        background: {
          type: this.changed[0],
          value: this.changed[1]
        }
      });
    },

    destroy: function () {
      this.destroyDropZone();
      SettingView.prototype.destroy.call(this, arguments);
    }
  });
  /* End of Background Image View */

  SettingsView = Backbone.View.extend({
    events: _.extend({}, SettingView.prototype.events, {
      'click .amoforms__fields__settings__btn': 'newSetting'
    }),

    style_el_id: 'amoforms_css_theme',

    css_rules: {
      'background-image': {
        selector: ['.amoforms__fields__editor', '.amoforms__fields__view'],
        getValue: function (url) {
          return 'background-image:url(' + url + ')!important;color:#fff!important;background-size: cover;background-position: center center;';
        },
        afterUpdate: function () {
          this.css_rules['background-color'].value = '';
        },
        value: ''
      },

      'background-color': {
        selector: ['.amoforms__fields__editor', '.amoforms__fields__view'],
        getValue: function (color, text_color) {
          return 'background-color:' + color + '!important;color:' + text_color + '!important;';
        },
        afterUpdate: function () {
          this.css_rules['background-image'].value = '';
        },
        value: ''
      },

      'font': {
        selector: [
          '.amoforms__fields__row__inner__name',
          '.amoforms__fields__row__inner__control',
          '.amoforms__fields__row__inner__control input',
          '.amoforms__fields__row__submit'
        ],
        getValue: function (font_family, font_size) {
          var heading_size = (font_size + Math.floor(font_size*1.3));
          return 'font-family:"' + font_family + '"!important;font-size:' + font_size + 'px!important;}.amoforms .amoforms__heading .amoforms__h{line-height:' + (heading_size + 10) +'px!important;font-size:' + heading_size + 'px!important;';
        },
        value: ''
      },

      'field-form': {
        selector: [
          '.amoforms__heading .amoforms__h',
          '.amoforms__text-input',
          '.selectize-control .selectize-input',
          '.selectize-dropdown',
          '.amoforms__fields__row__submit',
          '.amoforms__select__input'
        ],
        getValue: function (value) {
          return 'border-radius:' + ((value == 'rounded') ? 8 : 0) + 'px!important;';
        },
        value: ''
      },

      'form-paddings': {
        selector: [
          '.amoforms__fields__view',
          '.amoforms__fields__editor'
        ],
        getValue: function (value) {
          return value == 'yes' ? '' : 'padding:0!important;border:0!important;} ' +
            '.amoforms .amoforms__fields__row:first-of-type {padding-top:0!important;';
        },
        value: ''
      }
    },

    allowed_settings: {
      'themes': ThemesView,
      'name-position': NamePositionView,
      'field-form': FieldFormView,
      'form-paddings': FormPaddingsView,
      'font': FontView,
      'background-color': BackgroundColorView,
      'background-image': BackgroundImageView
    },

    initialize: function (options) {
      this.options = options || {};
      this.updateRulesFromButtons();
    },

    updateRulesFromButtons: function () {
      var type;

      this.$('.amoforms__fields__settings__btn').each(_.bind(function (key, el) {
        type = el.getAttribute('data-type');

        switch (type) {
          case 'background-color':
            if (!this.$('[data-type="background-image"]').attr('data-value')) {
              var color = $(el).find('.color').css('background-color');

              if (color.indexOf('rgba') != -1) {
                var alpha = color.replace(/^.*,(.+)\)/,'$1')
                if (alpha == 0) {
                  color = 'transparent';
                }
              } else if (color.indexOf('transparent') != -1) {
                color = 'transparent';
              } else {
                color = AMOFORMS.core.fn.rgb2hex(color);
              }

              this.css_rules['background-color'].value = [color, BackgroundColorView.prototype.getTextColor(color)];
            }
            break;

          case 'form-paddings':
          case 'field-form':
          case 'background-image':
            if (el.getAttribute('data-value')) {
              this.css_rules[type].value = [el.getAttribute('data-value')];
            }
            break;

          case 'font':
            this.css_rules['font'].value = [el.getAttribute('data-font-family'), parseInt(el.getAttribute('data-font-size'), 10)];
            break;
        }
      }, this));
    },

    updateCSS: function (rule, value) {
      var css_rules_text = '',
          style_el = document.getElementById(this.style_el_id);

      if (rule && value && this.css_rules[rule]) {
        this.css_rules[rule].value = value;

        if (_.isFunction(this.css_rules[rule].afterUpdate)) {
          this.css_rules[rule].afterUpdate.call(this);
        }
      }

      _.each(this.css_rules, function (rule) {
        if (rule.value) {
          css_rules_text += '.amoforms ' + rule.selector.join(', .amoforms ') + '{' + rule.getValue.apply(this, rule.value) + '}';
        }
      }, this);

      if (!style_el) {
        style_el = document.createElement('STYLE');
        document.getElementsByTagName('head')[0].appendChild(style_el);
        style_el.setAttribute('id', this.style_el_id);
      }
      style_el.innerHTML = css_rules_text;

      $(document).trigger('amoforms:field:render', [this.$('[data-type="name-position"]').attr('data-value')]);
    },

    newSetting: function (e) {
      var $this = $(e.currentTarget),
          current_inited = false;

      e.stopPropagation();

      if (this.current_setting) {
        current_inited = !this.current_setting._removed && (this.current_setting instanceof this.allowed_settings[$this.attr('data-type')]);
        this.current_setting.remove();

        if (current_inited) {
          return;
        }
      }

      this.current_setting = new this.allowed_settings[$this.attr('data-type')]({
        form_id: this.options.form_id,
        $button: $this,
        $fields: this.options.$fields,
        changeSetting: _.bind(this.updateCSS, this),
        changeDesign: _.bind(this.updateDesign, this)
      });
      $(document.body).append(this.current_setting.$el);
      this.current_setting.render();
    },

    updateDesign: function (theme_index) {
      var theme = themes[theme_index];

      _.each(theme.settings, function (setting, key) {
        switch (key) {
          case 'background':
            if (setting.type == 'color') {
              this.$('[data-type="background-color"] .color').css('background-color', setting.value);
              this.$('[data-type="background-image"]').attr('data-value', '');

              this.css_rules['background-image'].value = '';
            } else {
              this.$('[data-type="background-image"]').attr('data-value', setting.value);
              this.$('[data-type="background-color"] .color').css('background-color', '#fff');
              this.css_rules['background-color'].value = '';
            }
            break;

          case 'names_position':
            this.$('[data-type="name-position"]').attr('data-value', setting);
            break;

          case 'font':
            this.$('[data-type="font"]')
              .attr('data-font-size', parseInt(setting.size, 10))
              .attr('data-font-family', setting.family);
            break;

          case 'borders_type':
            this.$('[data-type="field-form"]').attr('data-value', setting);
            break;

          case 'form_paddings':
            this.$('[data-type="form-paddings"]').attr('data-value', setting);
            break;
        }
      }, this);

      this.updateRulesFromButtons();
      this.updateCSS();

      this.options.submit.renderChange([{
        key: 'color',
        value: theme.submit.color
      }]);
    }
  });

  global.AMOFORMS = $.extend(true, global.AMOFORMS || {}, {
    views: {
      settings: SettingsView
    }
  });
}(window, jQuery, _, Backbone, Dropzone));