(function($) {
    $.fn.centeredTextWriter = function(lines, intervalBetweenLetters) {

        function calculatePadding($centeredText, $centeredTextWrapper) {
            $centeredTextWrapper.css("text-align", "center");
            $centeredTextWrapper.css("padding-left", "");
            var left = $centeredText.offset().left;
            var parentPosition = $centeredTextWrapper.offset().left;
            left -= parentPosition;
            $centeredTextWrapper.css("text-align", "left");
            $centeredTextWrapper.css("padding-left", left + "px");
        }

        function relealCentered($centeredText, onFinish) {
            var $centeredTextWrapper = $centeredText.parent();
            calculatePadding($centeredText, $centeredTextWrapper);

            var text = $centeredText.html();

            $centeredText.html("");
            $centeredText.css('visibility', 'visible');
            for (var i = 0; i < text.length; i++) {
                setTimeout(function(idx) {
                    return function() {
                        $centeredText.html(text.substr(0, idx + 1).replace('@','&nbsp;'));
                        if (idx == text.length - 1 && onFinish) {
                            $centeredTextWrapper.css("text-align", "center");
                            $centeredTextWrapper.css("padding-left", "");
                            onFinish();
                        }
                    }
                }(i), i * intervalBetweenLetters);
            }

        }


        var $container = $(this);

        var $collection = $('<div class="centered-text-writer-centered-text-collection"></div>');
        var $wrapperTpl = $('<div class="centered-text-writer-centered-text-wrapper"><span class="centered-text-writer-centered-text"></span></div>');

        var $wrapper;
        for (var i = 0; i < lines.length; i++) {

            $wrapper = $wrapperTpl.clone();

            $wrapper.find(".centered-text-writer-centered-text").html(lines[i]);

            $collection.append($wrapper);
        }

        $container.append($collection);

        var items = $container.find(".centered-text-writer-centered-text");

        i = 0;

        var reveal = function() {
            relealCentered($(items[i]), function() {
                i++;
                if (i < items.length) {
                    reveal();
                }
            });
        };

        $(items).css('visibility', 'hidden');

        reveal();

    };
})(jQuery);
