/*
  @author Oleg Krasnov (krasnov@artlebedev.ru)
  @created 2018.03.20
  @copyright Art. Lebedev Studio (http://www.artlebedev.ru/)

  This source code follows Formatting section of Google Javascript Style Guide
  https://google.github.io/styleguide/jsguide.html#formatting
*/


/**
 * @constructor
 */
Settings = function() {
  /**
   * @type {!jQuery}
   * @private
   */
  this.root_ = jQuery('#main');

  /**
   * @type {!jQuery}
   * @private
   */
  this.content_ = this.root_.find('#content');

  /**
   * @type {!jQuery}
   * @private
   */
  this.downloadLogos_ = this.root_.find('.download-logos a');

  /**
   * @type {!jQuery}
   * @private
   */
  this.switcherColors_ = this.root_.find('.switcher.type_colors li');

  /**
   * @type {!jQuery}
   * @private
   */
  this.switcherType_ = this.root_.find('.switcher.type li span');

  /**
   * @type {!jQuery}
   * @private
   */
  this.switcherLanguage_ = this.root_.find('.switcher.language li span');

  /**
   * @type {!jQuery}
   * @private
   */
  this.switcherDiameter_ = this.root_.find('.switcher.diameter li span');

  /**
   * @type {!jQuery}
   * @private
   */
  this.section_ = this.root_.find('.section');

  /**
   * @type {!jQuery}
   * @private
   */
  this.mainSectionContent_ = this.section_.find('.main_section_content');

  /**
   * @type {!jQuery}
   * @private
   */
  this.clipboardCopy_ = this.root_.find('.clipboard_copy');

  /**
   * @type {!Object}
   * @private
   */
  this.config_ = this.content_.data('config');


  this.init_();
  this.attachEvents_();
};


/**
 * @private
 */
Settings.prototype.init_ = function() {
  this.root_.addClass('diameter_10 horizontal russian');

  for (var i = 0; i < this.mainSectionContent_.length; i++) {
    new VerticalFixer(
      this.mainSectionContent_.eq(i).siblings().find('.holder'),
      this.mainSectionContent_.eq(i).siblings(),
      this.mainSectionContent_.eq(i),
      this.mainSectionContent_.eq(i).siblings(),
      25);

    this.mainSectionContent_.eq(i).siblings().clone().prependTo(
      this.mainSectionContent_.eq(i).parent());
  }
};


/**
 * @private
 */
Settings.prototype.archives_ = function() {
  var fileName = [];
  var ext = ['svg', 'eps', 'png'];
  var classNames = this.root_.attr('class').split(' ');
  var fileSizes = {
    'diameter_6-horizontal-english-eps': 75,
    'diameter_6-horizontal-english-png': 54,
    'diameter_6-horizontal-english-svg': 29,
    'diameter_6-horizontal-russian-eps': 69,
    'diameter_6-horizontal-russian-png': 50,
    'diameter_6-horizontal-russian-svg': 27,
    'diameter_6-vertical-english-eps': 64,
    'diameter_6-vertical-english-png': 45,
    'diameter_6-vertical-english-svg': 29,
    'diameter_6-vertical-russian-eps': 66,
    'diameter_6-vertical-russian-png': 47,
    'diameter_6-vertical-russian-svg': 27,
    'diameter_10-horizontal-english-eps': 35,
    'diameter_10-horizontal-english-png': 18,
    'diameter_10-horizontal-english-svg': 23,
    'diameter_10-horizontal-russian-eps': 35,
    'diameter_10-horizontal-russian-png': 17,
    'diameter_10-horizontal-russian-svg': 22,
    'diameter_10-vertical-english-eps': 36,
    'diameter_10-vertical-english-png': 18,
    'diameter_10-vertical-english-svg': 23,
    'diameter_10-vertical-russian-eps': 35,
    'diameter_10-vertical-russian-png': 18,
    'diameter_10-vertical-russian-svg': 22,
    'diameter_20-horizontal-english-eps': 51,
    'diameter_20-horizontal-english-png': 24,
    'diameter_20-horizontal-english-svg': 127,
    'diameter_20-horizontal-russian-eps': 50,
    'diameter_20-horizontal-russian-png': 25,
    'diameter_20-horizontal-russian-svg': 73,
    'diameter_20-vertical-english-eps': 53,
    'diameter_20-vertical-english-png': 26,
    'diameter_20-vertical-english-svg': 105,
    'diameter_20-vertical-russian-eps': 50,
    'diameter_20-vertical-russian-png': 25,
    'diameter_20-vertical-russian-svg': 121
  };

  jQuery.each(classNames, function(index, value) {
    switch(value) {
      case 'diameter_6':
      case 'diameter_10':
      case 'diameter_20':
        fileName[0] = value;
        break;

      case 'horizontal':
      case 'vertical':
        fileName[1] = value;
        break;

      case 'english':
      case 'russian':
        fileName[2] = value;
        break;
    }
  });

  for (var i = 0; i < ext.length; i++) {
    this.downloadLogos_.eq(i).attr('href', '/f/media/logostyle/' + fileName.join('-') + '-' + ext[i] +'.zip');
    this.downloadLogos_.eq(i).find('.size').text(fileSizes[fileName.join('-') + '-' + ext[i]] + 'кб');
  }
};


/**
 * @private
 */
Settings.prototype.attachEvents_ = function() {
  var that = this;

  this.switcherColors_.on('click', function(e) {
    that.root_.removeClass('light dark blue');
    that.root_.addClass(jQuery(e.currentTarget).attr('data-theme'));
  });

  this.switcherType_.on('click', function(e) {
    that.root_.removeClass('horizontal vertical');
    that.root_.addClass(jQuery(e.currentTarget).parent().attr('data-type'));

    that.archives_();
  });

  this.switcherDiameter_.on('click', function(e) {
    that.root_.removeClass('diameter_20 diameter_10 diameter_6');
    that.root_.addClass(jQuery(e.currentTarget).parent().attr('data-diameter'));

    that.archives_();
  });

  this.switcherLanguage_.on('click', function(e) {
    that.root_.removeClass('russian english');
    that.root_.addClass(jQuery(e.currentTarget).parent().attr('data-type'));

    that.archives_();
  });

  this.clipboardCopy_.click(function(e) {
    if (!that.clipboardCopy_.hasClass('pseudo')) {
      return;
    }

    that.clipboardCopy_
        .animate({'opacity': 0}, 250, function() {
          that.clipboardCopy_.removeClass('pseudo');
          that.clipboardCopy_.html(that.getConfigValue_('copied')).fadeIn();
        })
        .animate({'opacity': 1}, 250)
        .animate({'opacity': 1}, 1000)
        .animate({'opacity': 0}, 500, function() {
          that.clipboardCopy_.addClass('pseudo');
          that.clipboardCopy_.html(that.getConfigValue_('toCopy')).fadeIn();
        })
        .animate({'opacity': 1}, 500);
  });
};


/**
 * @param {!string} value
 * @return {!string}
 * @private
 */
Settings.prototype.getConfigValue_ = function(value) {
  if (!this.config_[value]) {
    throw Error(
      'Отсутствует обязательный параметр в data-config: ' + value);
  }

  return this.config_[value];
};


jQuery(document).ready(function() {
  new Settings();
});