/*
 * CircleType 0.36
 * Peter Hrynkow
 * Copyright 2014, Licensed GPL & MIT
 * Modified by http://stackoverflow.com/users/1913729/blex
*/

$.fn.circleType = function(options) {

    var self = this,
        settings = {
        dir: 1,
        position: 'relative',
    };
    if (typeof($.fn.lettering) !== 'function') {
        console.log('Lettering.js is required');
        return;
    }
    return this.each(function () {

        if (options) {
            $.extend(settings, options);
        }
        var elem = this,
            delta = (180 / Math.PI),
            fs = parseInt($(elem).css('font-size'), 10),
            ch = parseInt($(elem).css('line-height'), 10) || fs,
            letters,
            center;

        // trim spaces at the beginning and at the end
        elem.innerHTML = elem.innerHTML.replace(/^\s+|\s+$/g, '');

        // grab the HTML string
        var temp = elem.innerHTML;

        // replace any space that is not part of a tag with a non-breakable space ( )
        elem.innerHTML = elem.innerHTML.replace(/<[^<>]+>|\s/g, function(s) { return s[0] == '<' ? s : '&nbsp;'; })

        // wrap each character in a span
        $(elem).lettering();


        var inTag = false, // are we between tags? (<i>here</i>)
            isTag = false, // are we inside a tag? (<here></here>)
            tagNum = -1,   // how many opening tags have we met so far?
            pos = 0,       // character position (excluding tags)
            dom = document.createElement('div'); // temporary dom

        dom.innerHTML = temp; // clone our element in the temporary dom

        var tags = dom.children; // children of the element
        // for each of them, empty it
        for(var i=0, l=tags.length; i<l; i++){
            tags[i].innerHTML = '';
        }

        // for each character in our HTML string
        for(var i=0, l= temp.length; i<l; i++){
            var c = temp[i];
            // if it's a '<'
            if(c == '<'){
                // and if it's an opening tag
                if(!inTag){
                    // increment the number of tags met
                    tagNum++;
                    // we're in a tag!
                    inTag = true;
                }
                else{
                    // otherwise we're in a closing tag
                    inTag = false;
                }
                // we're on a tag (<here>)
                isTag = true;
            }
            // if it's a '>'
            else if(c == '>'){
                // we're not <here> anymore
                isTag = false;
            }
            // if we're not <here>
            else if(!isTag){
                // if we're <b>here</b>
                if(inTag){
                    // replace the span's content with our tag
                    elem.children[pos].innerHTML = tags[tagNum].outerHTML;
                    // put the letter back in
                    elem.children[pos].children[0].innerHTML = c;
                }
                // move forward in the spans
                pos++;
            }
        }


        elem.style.position =  settings.position;

        letters = elem.getElementsByTagName('span');
        center = Math.floor(letters.length / 2)

        var layout = function () {
            var tw = 0,
                i,
                offset = 0,
                minRadius,
                origin,
                innerRadius,
                l, style, r, transform;

            for (i = 0; i < letters.length; i++) {
                tw += letters[i].offsetWidth;
            }
            minRadius = (tw / Math.PI) / 2 + ch;

            if (settings.fluid && !settings.fitText) {
                settings.radius = Math.max(elem.offsetWidth / 2, minRadius);
            }
            else if (!settings.radius) {
                settings.radius = minRadius;
            }

            if (settings.dir === -1) {
                origin = 'center ' + (-settings.radius + ch) / fs + 'em';
            } else {
                origin = 'center ' + settings.radius / fs + 'em';
            }

            innerRadius = settings.radius - ch;

            for (i = 0; i < letters.length; i++) {
                l = letters[i];
                offset += l.offsetWidth / 2 / innerRadius * delta;
                l.rot = offset;
                offset += l.offsetWidth / 2 / innerRadius * delta;
            }
            for (i = 0; i < letters.length; i++) {
                l = letters[i]
                style = l.style
                r = (-offset * settings.dir / 2) + l.rot * settings.dir
                transform = 'rotate(' + r + 'deg)';

                style.position = 'absolute';
                style.left = '50%';
                style.marginLeft = -(l.offsetWidth / 2) / fs + 'em';

                style.webkitTransform = transform;
                style.MozTransform = transform;
                style.OTransform = transform;
                style.msTransform = transform;
                style.transform = transform;

                style.webkitTransformOrigin = origin;
                style.MozTransformOrigin = origin;
                style.OTransformOrigin = origin;
                style.msTransformOrigin = origin;
                style.transformOrigin = origin;
                if(settings.dir === -1) {
                    style.bottom = 0;
                }
            }

            if (settings.fitText) {
                if (typeof($.fn.fitText) !== 'function') {
                    console.log('FitText.js is required when using the fitText option');
                } else {
                    $(elem).fitText();
                    $(window).resize(function () {
                        updateHeight();
                    });
                }
            }
            updateHeight();

            if (typeof settings.callback === 'function') {
                // Execute our callback with the element we transformed as `this`
                settings.callback.apply(elem);
            }
        };

        var getBounds = function (elem) {
            var docElem = document.documentElement,
                box = elem.getBoundingClientRect();
            return {
                top: box.top + window.pageYOffset - docElem.clientTop,
                left: box.left + window.pageXOffset - docElem.clientLeft,
                height: box.height
            };
        };

        var updateHeight = function () {
            var mid = getBounds(letters[center]),
                first = getBounds(letters[0]),
                h;
            if (mid.top < first.top) {
                h = first.top - mid.top + first.height;
            } else {
                h = mid.top - first.top + first.height;
            }
            elem.style.height = h + 'px';
        }

        if (settings.fluid && !settings.fitText) {
            $(window).resize(function () {
                layout();
            });
        }

        if (document.readyState !== "complete") {
            elem.style.visibility = 'hidden';
            $(window).load(function () {
                elem.style.visibility = 'visible';
                layout();
            });
        } else {
            layout();
        }
    });
};