/**
 * Arctext.js
 * A jQuery plugin for curved text
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 23 2012
 */

(function ($, undefined) {
  /*!
   * FitText.js 1.0
   *
   * Copyright 2011, Dave Rupert http://daverupert.com
   * Released under the WTFPL license
   * http://sam.zoy.org/wtfpl/
   *
   * Date: Thu May 05 14:23:00 2011 -0600
   */
  $.fn.fitText = function (kompressor, options) {
    var settings = {
      minFontSize: Number.NEGATIVE_INFINITY,
      maxFontSize: Number.POSITIVE_INFINITY,
    };

    return this.each(function () {
      var $this = $(this); // store the object
      var compressor = kompressor || 1; // set the compressor

      if (options) {
        $.extend(settings, options);
      }

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css(
          "font-size",
          Math.max(
            Math.min(
              $this.width() / (compressor * 10),
              parseFloat(settings.maxFontSize)
            ),
            parseFloat(settings.minFontSize)
          )
        );
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).resize(resizer);
    });
  };

  /*
   * Lettering plugin
   *
   * changed injector function:
   *   add   for empty chars.
   */
  function injector(t, splitter, klass, after) {
    var a = t.text().split(splitter),
      inject = "",
      emptyclass;
    if (a.length) {
      $(a).each(function (i, item) {
        emptyclass = "";
        if (item === " ") {
          emptyclass = " empty";
          item = " ";
        }
        inject +=
          '<span class="' +
          klass +
          (i + 1) +
          emptyclass +
          '">' +
          item +
          "</span>" +
          after;
      });
      t.empty().append(inject);
    }
  }

  var methods = {
    init: function () {
      return this.each(function () {
        injector($(this), "", "char", "");
      });
    },

    words: function () {
      return this.each(function () {
        injector($(this), " ", "word", " ");
      });
    },

    lines: function () {
      return this.each(function () {
        var r = "eefec303079ad17405c889e092e105b0";
        // Because it's hard to split a <br/> tag consistently across browsers,
        // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
        // (of the word "split").  If you're trying to use this plugin on that
        // md5 hash string, it will fail because you're being ridiculous.
        injector($(this).children("br").replaceWith(r).end(), r, "line", "");
      });
    },
  };

  $.fn.lettering = function (method) {
    // Method calling logic
    if (method && methods[method]) {
      return methods[method].apply(this, [].slice.call(arguments, 1));
    } else if (method === "letters" || !method) {
      return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array
    }
    $.error("Method " + method + " does not exist on jQuery.lettering");
    return this;
  };

  /*
   * Arctext object.
   */
  $.Arctext = function (options, element) {
    this.$el = $(element);
    this._init(options);
  };

  $.Arctext.defaults = {
    radius: 0, // the minimum value allowed is half of the word length. if set to -1, the word will be straight.
    dir: 1, // 1: curve is down, -1: curve is up.
    rotate: true, // if true each letter will be rotated.
    fitText: false, // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid.
  };

  $.Arctext.prototype = {
    _init: function (options) {
      this.options = $.extend(true, {}, $.Arctext.defaults, options);

      // apply the lettering plugin.
      this._applyLettering();

      this.$el.data("arctext", true);

      // calculate values
      this._calc();

      // apply transformation.
      this._rotateWord();

      // load the events
      this._loadEvents();
    },
    _applyLettering: function () {
      this.$el.lettering();

      if (this.options.fitText) this.$el.fitText();

      this.$letters = this.$el.find("span").css("display", "inline-block");
    },
    _calc: function () {
      if (this.options.radius === -1) return false;

      // calculate word / arc sizes & distances.
      this._calcBase();

      // get final values for each letter.
      this._calcLetters();
    },
    _calcBase: function () {
      // total word width (sum of letters widths)
      this.dtWord = 0;

      var _self = this;

      this.$letters.each(function (i) {
        var $letter = $(this),
          letterWidth = $letter.outerWidth(true);

        _self.dtWord += letterWidth;

        // save the center point of each letter:
        $letter.data("center", _self.dtWord - letterWidth / 2);
      });

      // the middle point of the word.
      var centerWord = this.dtWord / 2;

      // check radius : the minimum value allowed is half of the word length.
      if (this.options.radius < centerWord) this.options.radius = centerWord;

      // total arc segment length, where the letters will be placed.
      this.dtArcBase = this.dtWord;

      // calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord).
      // first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radius.
      var angle = 2 * Math.asin(this.dtArcBase / (2 * this.options.radius));

      // given the formula: L(ength) = R(adius) x A(ngle), we calculate our arc length.
      this.dtArc = this.options.radius * angle;
    },
    _calcLetters: function () {
      var _self = this,
        iteratorX = 0;

      this.$letters.each(function (i) {
        var $letter = $(this),
          // calculate each letter's semi arc given the percentage of each letter on the original word.
          dtArcLetter = ($letter.outerWidth(true) / _self.dtWord) * _self.dtArc,
          // angle for the dtArcLetter given our radius.
          beta = dtArcLetter / _self.options.radius,
          // distance from the middle point of the semi arc's chord to the center of the circle.
          // this is going to be the place where the letter will be positioned.
          h = _self.options.radius * Math.cos(beta / 2),
          // angle formed by the x-axis and the left most point of the chord.
          alpha = Math.acos(
            (_self.dtWord / 2 - iteratorX) / _self.options.radius
          ),
          // angle formed by the x-axis and the right most point of the chord.
          theta = alpha + beta / 2,
          // distances of the sides of the triangle formed by h and the orthogonal to the x-axis.
          x = Math.cos(theta) * h,
          y = Math.sin(theta) * h,
          // the value for the coordinate x of the middle point of the chord.
          xpos = iteratorX + Math.abs(_self.dtWord / 2 - x - iteratorX),
          // finally, calculate how much to translate each letter, given its center point.
          // also calculate the angle to rotate the letter accordingly.
          xval = 0 | (xpos - $letter.data("center")),
          yval = 0 | (_self.options.radius - y),
          angle = _self.options.rotate
            ? 0 | (-Math.asin(x / _self.options.radius) * (180 / Math.PI))
            : 0;

        // the iteratorX will be positioned on the second point of each semi arc
        iteratorX = 2 * xpos - iteratorX;

        // save these values
        $letter.data({
          x: xval,
          y: _self.options.dir === 1 ? yval : -yval,
          a: _self.options.dir === 1 ? angle : -angle,
        });
      });
    },
    _rotateWord: function (animation) {
      if (!this.$el.data("arctext")) return false;

      var _self = this;

      this.$letters.each(function (i) {
        var $letter = $(this),
          transformation =
            _self.options.radius === -1
              ? "none"
              : "translateX(" +
                $letter.data("x") +
                "px) translateY(" +
                $letter.data("y") +
                "px) rotate(" +
                $letter.data("a") +
                "deg)",
          transition = animation
            ? "all " +
              (animation.speed || 0) +
              "ms " +
              (animation.easing || "linear")
            : "none";

        $letter
          .css({
            "-webkit-transition": transition,
            "-moz-transition": transition,
            "-o-transition": transition,
            "-ms-transition": transition,
            transition: transition,
          })
          .css({
            "-webkit-transform": transformation,
            "-moz-transform": transformation,
            "-o-transform": transformation,
            "-ms-transform": transformation,
            transform: transformation,
          });
      });
    },
    _loadEvents: function () {
      if (this.options.fitText) {
        var _self = this;

        $(window).on("resize.arctext", function () {
          _self._calc();

          // apply transformation.
          _self._rotateWord();
        });
      }
    },
    set: function (opts) {
      if (!opts.radius && !opts.dir && opts.rotate === "undefined") {
        return false;
      }

      this.options.radius = opts.radius || this.options.radius;
      this.options.dir = opts.dir || this.options.dir;

      if (opts.rotate !== undefined) {
        this.options.rotate = opts.rotate;
      }

      this._calc();

      this._rotateWord(opts.animation);
    },
    destroy: function () {
      this.options.radius = -1;
      this._rotateWord();
      this.$letters.removeData("x y a center");
      this.$el.removeData("arctext");
      $(window).off(".arctext");
    },
  };

  var logError = function (message) {
    if (this.console) {
      console.error(message);
    }
  };

  $.fn.arctext = function (options) {
    if (typeof options === "string") {
      var args = Array.prototype.slice.call(arguments, 1);

      this.each(function () {
        var instance = $.data(this, "arctext");

        if (!instance) {
          logError(
            "cannot call methods on arctext prior to initialization; " +
              "attempted to call method '" +
              options +
              "'"
          );
          return;
        }

        if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
          logError("no such method '" + options + "' for arctext instance");
          return;
        }

        instance[options].apply(instance, args);
      });
    } else {
      this.each(function () {
        var instance = $.data(this, "arctext");
        if (!instance) {
          $.data(this, "arctext", new $.Arctext(options, this));
        }
      });
    }

    return this;
  };
})(jQuery);