/* ==========================================================================
 The drip transition between every page

 Some links that may come in handy:
 BarbaJs Transition: http://barbajs.org/transition.html
 GSAP LagSmoothing: https://greensock.com/gsap-1-12-0sa

 ========================================================================== */


var DT = Barba.BaseTransition.extend({

    transition : null,

    start: function() {

        DT.transition = this;

        // //When newContainerLoading is done, call the drip method
        Promise
            .all([this.newContainerLoading])
            .then(this.initDripGrid.bind(this));
    },

    initDripGrid: function()
    {
        // Initialise the grid
        DT.DripGrid.init();
    },

    /* Grid section
     ========================================================================== */

    /**
     * We call all the drips next to each other the DripGrid
     */
    DripGrid : {

        // Number of drips we need to draw
        numDrips : null,
        // Number of drips we have drawn so far
        count : 0,
        // Width of one column
        singleColumnWidth : null,
        // Drips done animating
        dripsDropped : 0,
        // Container
        container : $('#drip-transition-container'),

        /**
         * Setup properties
         */
        init : function ()
        {
            // Assume we always have a grid-row on a page
            DT.DripGrid.singleColumnWidth = DT.Drip.tailHeight = DT.DripGrid.calculateSingleColumnWidth();
            // Define number of drips we need
            DT.DripGrid.numDrips = Math.ceil($(window).width() / DT.DripGrid.singleColumnWidth);
            // Draw the Drips
            DT.DripGrid.draw();
            // Animate
            setTimeout(function() { DT.dropDrips('in') } ,200);
        },

        /**
         * Calculate the right
         * @returns {number}
         */
        calculateSingleColumnWidth : function()
        {
            var minDripWidth = 60;
            var columns = 12;
            var gridWidth = $('#drip-transition-grid-width').outerWidth();

            // Default drip width
            var width = gridWidth / columns;
            // Make sure width is larger then minGridWidth
            while(width < minDripWidth)
            {
                // Divide trough less columns
                columns--;
                width = gridWidth / columns;
            }

            return width;
        },

        /**
         * Draw the grid
         */
        draw: function ()
        {
            // Draw the drips on the grid
            for(var i = 0; i < DT.DripGrid.numDrips; i++)
            {
                DT.Drip.draw();
                DT.DripGrid.count++;
            }
        }
    },

    /* Single drip section
     ========================================================================== */

    /**
     * Drip stands for one single drip column
     */
    Drip : {

        // The tail is a square so the height of the tail should be the width of one column
        tailHeight : 0,

        /**
         * Draw the random drip on the dripContainer
         */
        draw : function()
        {
            // Create Drip jquery object
            var $drip = $('<div>',{
                class: 'drip',
                id: 'transition-drip-' + DT.DripGrid.count
            });

            // Append inner HTML to drip
            if( ! DT.Drip.isReversed())
            {
                $drip.append(DT.Drip.normalDripHTML());
            }
            else{
                $drip.append(DT.Drip.reversedDripHTML());
            }

            // Give some random sizes to our drip
            $drip = DT.Drip.setSize($drip);

            // Append HTML to container
            DT.DripGrid.container.append($drip);
        },

        /**
         * Return a normal drip with the border-radius at the bottom
         *
         * @returns {string}
         */
        normalDripHTML : function()
        {
            return '<div class="drip-tail"></div>' +
                   '<div class="drip-body"></div>';
        },

        /**
         * Return a reversed drip with the inverted circle at the bottom
         * In the reversed drip the body comes first, then the tail
         *
         * @returns {string}
         */
        reversedDripHTML : function()
        {
            return '<div class="drip-body"></div>' +
                   '<div class="drip-tail"></div>';
        },

        /**
         * Set the size of each drip
         *
         * @param $drip
         * @returns {*}
         */
        setSize : function($drip)
        {
            $drip.css({ width: DT.DripGrid.singleColumnWidth + 'px' });

            // Set the height of the drip-body
            var bodyHeight = parseInt($(window).height()) + DT.Drip.tailHeight * 1.5;
            $drip.children('.drip-body').css({ height: bodyHeight + 'px' });

            // Position the drip right out of the viewport at the top
            var dripPosition = (bodyHeight + DT.Drip.tailHeight) * -1;
            // Set reversed items half a tailHeight higher
            if(DT.Drip.isReversed()) dripPosition -= DT.Drip.tailHeight / 2;
            // Set position
            $drip.css({ transform : 'translateY(' + dripPosition + 'px)' });
            return $drip;
        },

        /**
         * Return whether a drip is reversed
         *
         * @returns {boolean}
         */
        isReversed : function()
        {
            return DT.DripGrid.count % 2 != 0;
        },

        /**
         * Animate drip to a color
         */
        animateToColor : function($drip, color)
        {
            // Add force3D:true to tell the browser to render our element using the GPU (graphics card) instead of using the CPU.
            var options = {
                backgroundColor: color,
                ease: Power0.easeOut
            };

            // Tween
            TweenLite.to($drip.find('div.drip-body'), .7, options);
            TweenLite.to($drip.find('div.drip-tail'), .7, options);
        }
    },

    /* Animation section
     ========================================================================== */

    /**
     * Drop all the drips with some random delay
     */
    dropDrips: function(phase)
    {
        var i;
        var $drip;
        var delay;
        // First we drop all the even drips
        for(i=0;i<DT.DripGrid.numDrips;i+=2)
        {
            $drip = $('#transition-drip-' + i);
            delay = Math.random() * .5;
            if(phase == 'in') DT.dropDripIn($drip,delay,0);
            if(phase == 'out') DT.dropDripOut($drip,delay,0);

            // Add delay to the data attribute
            $drip.attr('data-delay-' + phase, delay);
        }

        // Then the "in between" odd (reversed) drips
        for(i=1;i<DT.DripGrid.numDrips;i+=2)
        {
            // Define drip objects
            $drip = $('#transition-drip-' + i);
            var $rightDrip = $('#transition-drip-'+(i+1));
            var $leftDrip = $('#transition-drip-'+(i-1));

            // The delay should'nt be smaller then the drip on the left or right
            // Get delay of drip on the left
            var leftDripDelay = $leftDrip.data('delay-' + phase);
            // Get right delay or set to zero if there is no right drip
            var rightDripDelay = 0;
            if($rightDrip.length) rightDripDelay = $rightDrip.data('delay-' + phase);
            // Check whether the left or the right drip has the largest delay
            var largestDelay = leftDripDelay;
            if(rightDripDelay > leftDripDelay) largestDelay = rightDripDelay;
            // Add some randomness
            delay = largestDelay + Math.random() * .15;

            // Let's drip!
            if(phase == 'in') DT.dropDripIn($drip,delay,1);
            if(phase == 'out') DT.dropDripOut($drip,delay,1);
        }
    },

    /**
     * Drop a drip into the screen
     */
    dropDripIn : function($drip,delay,reversed)
    {
        // Disable lag smoothing
        TweenLite.lagSmoothing(0);

        // Animate the colors
        DT.Drip.animateToColor($drip,'#0000ff');

        // Define targetY
        var targetY = DT.Drip.tailHeight * -1;
        if(reversed) targetY = DT.Drip.tailHeight * -1.5;

        // Animate the size
        TweenLite.to($drip, .3, {
            y: targetY+'px',
            ease: Sine.easeIn,
            delay: delay,
            force3D: true,
            onComplete: function () {
                // todo: figure out if this can be done with a Promise
                DT.whenAllDripsDropped(function()
                {
                    // Tell Barba we can't see the old page anymore
                    Barba.Dispatcher.trigger('updatePage');

                    // Ready to load new container
                    $(window).scrollTop(0);

                    DT.transition.done();

                    // Drop all drips to the bottom
                    DT.dropDrips('out');
                });
            }
        });
    },

    /**
     * Drop a drip out of screen
     */
    dropDripOut : function($drip,delay,reversed)
    {
        // Disable lag smoothing
        TweenLite.lagSmoothing(0);

        // Animate the colors
        DT.Drip.animateToColor($drip,'#00c7ff');

        // Define targetY
        var windowHeight = $(window).height();
        targetY = windowHeight + DT.Drip.tailHeight / 2;
        if(reversed) targetY = windowHeight;

        // Animate the size
        TweenLite.to($drip, .4, {
            y: targetY+'px',
            ease: Sine.easeIn,
            delay: delay,
            force3D: true,
            onComplete: function () {
                DT.whenAllDripsDropped(function()
                {
                    // Reset some data
                    DT.DripGrid.count = 0;
                    DT.DripGrid.container.html('');
                });
            }
        });
    },

    /**
     * Check if all drips are dropped
     */
    whenAllDripsDropped : function(callback)
    {
        // Increase drips dropped by one
        DT.DripGrid.dripsDropped++;
        // Check if all drips are dropped
        if(DT.DripGrid.dripsDropped == DT.DripGrid.numDrips)
        {
            // Reset drips dropped
            DT.DripGrid.dripsDropped = 0;
            // Run callback
            callback();
        }
    }
});