$(function () {

    // 1 by QUEUE
    // $.each([$('#fade-el-1'), $('#fade-el-2'), $('#fade-el-3'), $('#fade-el-4')], function () {
    //     var $this = this;
    //     $(document).queue('text-animate', function (next) {
    //         animateText($this, next);
    //     });
    // });

    // $(document).dequeue('text-animate');


    // BY MY OWN QUEUE LOGIC
    var objectsToAnimate = [];
    $('.hidden-fade').each(function () {
        objectsToAnimate.push($(this));
        
    });

    animate(objectsToAnimate, finished);
    //animate([$('#fade-el-1'), $('#fade-el-2'), $('#fade-el-3'), $('#fade-el-4')], finished);

    function finished() {
        //console.log('Finished');
    }
    
    function animate(list, callback) {
        if (list.length === 0) {
            callback();
            return;
        }
        $el = list.shift();

        animateText($el, function () {
            animate(list, callback);
        });

    }


    function animateText($element, $callback) {

        var $this = $element;
        var $wordList = $this.text().split("");
        $this.text("");
        $this.css('opacity', 1);

        $.each($wordList, function (idx, elem) {
            var newEL = $("<span/>").text(elem).css({
                opacity: 0
            });
            newEL.appendTo($this);
            newEL.delay(idx * 125);
            newEL.animate({
                opacity: 1
            }, 500, 'swing', function () {
                if ($wordList.length === idx + 1) {
                    $callback();
                }
            });
        });

        
    };
    

    
  });