/* ==========================================================================
 Case specific javascript
 ========================================================================== */

/* Background gradient on navigation drip
 ========================================================================== */

var NavigationDripPainter = {

    drip : '',

    init : function()
    {
        // Set drip for when returning on this page trough Pjax
        this.drip = $('#navigation-drip');
        // Color when entering the page
        NavigationDripPainter.paint();
        // Handle scroll
        $(window).on('scroll', NavigationDripPainter.paint);
    },

    /*
     * Check for every case if the drip touches the case
     */
    paint : function()
    {
        var colors = [];
        var gradientLine = 100;

        $('.case-layout').each(function(){

            // Define drip bottom
            var dripBottom = NavigationDripPainter.drip.height();

            // Get rectangle
            var rect = $(this)[0].getBoundingClientRect();

            // Check if element is behind the navigation drip
            if(rect.bottom > 0 && rect.top < dripBottom)
            {
                // Is the bottom of the element behind the drip?
                // Calculate bottom position in percentage
                var bottomPosition = rect.bottom * 100 / dripBottom;
                // We need a gradient if the percentage is lower then 100 percent
                if(bottomPosition < 100) gradientLine = bottomPosition;
                // Add color to array
                colors.push($(this).data('navigation-color'));
            }
        });

        // Check if we need gradient
        if(colors.length > 1)
        {
            NavigationDripPainter.gradient(gradientLine, colors);
        }
        else
        {
            NavigationDripPainter.drip.css({ background: colors[0] });
        }
    },

    /**
     * Draw calculated gradient
     */
    gradient : function(gradientLine, colors){
        var margin = 30;
        var line1, line2;

        // On enter next case
        if(gradientLine > (100 - margin)) {
            line1 = gradientLine - (100 - gradientLine);
            line2 = 100;
        }
        // On leaving case
        else if(gradientLine < margin){
            line1 = 0;
            line2 = gradientLine * 2;
        }
        // Default
        else{
            line1 = gradientLine - margin;
            line2 = gradientLine + margin;
        }
        // Update gradient
        this.drip.css({ background: 'linear-gradient(to bottom, ' + colors[0] + ',' + colors[0] + ' ' + line1 + '%,' + colors[1] + ' ' + line2 + '%,' + colors[1] + ')' });

    }
};

var CaseProgress = {

    currentPosition : 'top',

    init : function()
    {
        CaseProgress.setPosition();
        $(window).scroll(function(){
            CaseProgress.setPosition();
            CaseProgress.scaleProgress();
        });
    },

    /**
     * Update the transform Y on scroll
     */
    setPosition : function()
    {
        // Find bounding rectangle of aside progress container
        var $progressContainer = $('#progress-container');
        if( ! $progressContainer.length) return false;
        var rect = $($progressContainer)[0].getBoundingClientRect();

        // When top of the element reaches the viewport top,
        // Till the bottom of the element reaches the viewport bottom
        var fixedCondition = (rect.top < 0 && rect.top > ($progressContainer.height()-$(window).height()) * -1);
        var sunkCondition = (rect.bottom < $(window).height());
        if(fixedCondition && CaseProgress.currentPosition != 'fixed')
        {
            CaseProgress.currentPosition = 'fixed';
            $progressContainer.find('#fixable').attr('class','fixable fixed');
        }
        else if(sunkCondition && CaseProgress.currentPosition != 'sunk'){
            CaseProgress.currentPosition = 'sunk';
            $progressContainer.find('#fixable').attr('class','fixable sunk');
        }
        else if( ! fixedCondition && ! sunkCondition && CaseProgress.currentPosition != 'top'){
            CaseProgress.currentPosition = 'top';
            $progressContainer.find('#fixable').attr('class','fixable');
        }
    },

    /**
     * Scale the progress bar
     */
    scaleProgress : function ()
    {
        $('#dynamic-content').children('section').each(function()
        {
            var $section = $(this);
            // Get bounding rectangle
            var rect = $section[0].getBoundingClientRect();
            // Do the math
            var scale = ((rect.top - $(window).height()/2 ) *-1) / $section.height();
            // Scale bar
            $('#progress-bar-' + $section.attr('id') ).css({ transform: 'scaleX(' + scale + ')'});
        });
    }
};

var FeaturedCaseHandler = {

    aniOverlay : [],
    aniTitle : [],
    aniTags : [],
    aniArrow : [],

    init : function(){

        // Set hover on featured case
        $('.featured-case').hover(function()
        {
            FeaturedCaseHandler.mouseIn($(this));
        }, function(){
            FeaturedCaseHandler.mouseOut($(this));
        })

    },

    /**
     * On mouse in: show blue square with white text
     */
    mouseIn : function($el) {

        // Color overlay variables
        var posX = 50;
        var posY = 50;
        var w = $el.width() - posX;
        var h = $el.height() - posY;

        // Animate the overlay from edges a little to the inside
        FeaturedCaseHandler.aniOverlay[$el] = TweenLite.to($('.color-overlay',$el), .6, {
            opacity: .95,
            width: w,
            height: h,
            x: posX / 2,
            y: posY / 2,
            ease: Power4.easeOut
        });

        // Pop up title
        FeaturedCaseHandler.aniTitle[$el] = TweenLite.to($('.title',$el), .3, {
            y: 0,
            opacity: 1
        });

        // Fade in tags
        FeaturedCaseHandler.aniTags[$el] = TweenLite.to($('.tags',$el), .3, {
            opacity: 1,
            delay: .2
        });

        // Slide in arrow
        FeaturedCaseHandler.aniArrow[$el] = TweenLite.to($('.arrow',$el), .3, {
            x: 0,
            opacity: 1,
            delay: .3
        });
    },

    /**
     * On mouse out: hide square and text
     */
    mouseOut : function($el)
    {
        FeaturedCaseHandler.aniOverlay[$el].kill();
        FeaturedCaseHandler.aniTitle[$el].kill();
        FeaturedCaseHandler.aniTags[$el].kill();
        FeaturedCaseHandler.aniArrow[$el].kill();

        // Color overlay variables
        var w = $el.width();
        var h = $el.height();

        // Animate the overlay back to edges
        TweenLite.to($('.color-overlay',$el), .6, {
            opacity: 0,
            width: w,
            height: h,
            x: 0,
            y: 0,
            ease: Power4.easeOut
        });

        // Drop down title
        TweenLite.to($('.title',$el), .3, {
            y: 20,
            opacity: 0
        });

        TweenLite.to($('.tags',$el), .1, {
            opacity: 0
        });

        if($el.hasClass('prev'))
        {
            // Slide out arrow
            TweenLite.to($('.arrow',$el), .3, {
                x: 10,
                opacity: 0
            });
        }
        else
        {
            // Slide out arrow
            TweenLite.to($('.arrow',$el), .3, {
                x: -10,
                opacity: 0
            });
        }
    }

};