/**
 * Created by Pascal on 09/08/17.
 */

var movingAmount = 200;

$(function () {

    // Detect if fracs function are init
    if (typeof $.fracs === "undefined") rebindFracs();

    $('.styling').fracs(function (fracs) {

        var viewPort = $(window).height();
        movingAmount = viewPort/10;

        if(fracs.visible > 0){

            // Get the percentage of how far the object is till top of viewport
            scrolledAmount = 1 - fracs.rects.viewport.top/viewPort;

            // Get the random fall acceleration for each styling object
            var fallAcceleration = $(this).attr('data-fall-acceleration');

            // Calculate and append fall acceleration to object if not defined
            if (typeof fallAcceleration === "undefined"){

                // Get random amount between 6 and 14 and divide by 10
                fallAcceleration = Math.floor( (Math.random()*8) + 6) / 10;
                $(this).attr('data-fall-acceleration', fallAcceleration );
            }

            // Calculate object translation
            var objectTranslate = scrolledAmount*movingAmount*fallAcceleration;

            // Decrease object translation by a third so it will be on the origin location when object is a 75% top in viewport
            objectTranslate -=  ( movingAmount / 3 ) ;

            // Invert animation
            objectTranslate *= -1;

            // Here is where the magic happens
            $(this).css('transform', 'translate3d(0,'+objectTranslate+'px,0)');
        }

    });

    // Initial Fracs on styling
    $('.styling').fracs('check');

});