$(document).ready(function() {

    var quotes = [
        'WE BELIEVE YOU <i>deserve</i><br/>TO PRACTICE HAPPY',
        'STARS CAN\'T <i>shine</i><BR/>WITHOUT DARKNESS',
        '<i>Happiness</i> IS FOUND WHEN YOU STOP COMPARING YOURSELF TO OTHER PEOPLE',
        'BE THE <i>change</i> YOU<BR/> WISH TO SEE IN THE WORLD',
    ];

    var randomQuoteIndex = Math.floor((Math.random() * quotes.length));
    document.getElementById('quotes').innerHTML = quotes[randomQuoteIndex];

    $('#quotes').fadeIn(1500);

    if ($('.message').text() !== '') {
        $('.message').show();
    }

    $(window).on('resize', function() {
        var rightHeight = ($('.page-content__right').outerHeight() + $('.page-content__right.--bottom').outerHeight());
        var leftHeight = ($('.page-content__left').outerHeight() + $('.page-content__left.--bottom').outerHeight());

        var minPageHeight = Math.max(leftHeight, rightHeight);
        var pageHeight = Math.max(minPageHeight, $(window).height());

        $('.page-background').css('height', pageHeight);
        $('.page-wrapper').css('height', pageHeight);
        
    }).trigger('resize');

    $('.form-input').on('focus', function() {
        $(this).parent().addClass('focus');
    });

    $('.form-input').on('blur', function() {
        $(this).parent().removeClass('focus');
    });

    var aboutAnimation = {
        doTransforms: false,
        allowHover: false,
        setup: function()
        {
            if($('html').hasClass('csstransforms3d'))
            {
                this.doTransforms = true;
            }
            if(true) /*TrueLib.windowWidth() >= 768)*/
            {
                this.animate();
            } else {
                $('.about-logo-full').attr('style', 'display: none !important');
                $('.about-logo-mobile').attr('style', 'display: block !important');
            }
            
            this.setupTriangleHover();
            this.doTransforms = true;
        },
        animate: function()
        {
            //Animation Timeline
            this.animateTriangle('pink-tri', 0, 350);
            this.animateLine('purple-line', 600, 1000);  
            
            this.animateTriangle('yellow-tri', 600, 350);
            this.animateLine('yellow-line', 950, 1000);  
            
            this.animateTriangle('light-yellow-tri', 1200, 350);
            
            this.animateTriangle('blue-tri', 1800, 350);
            this.animateLine('blue-line', 2150, 1000);  
            
            this.animateTriangle('light-blue-tri', 2400, 350);
            this.animateLine('light-blue-line', 2750, 1000);  
            
            this.animateTriangle('orange-tri', 3000, 350);
            this.animateLine('orange-line', 3350, 1000);  
            
            this.animateTriangle('light-orange-tri', 3600, 350);
        },
        animateTriangle: function(target, delay, length)
        {
            if(this.doTransforms && target != 'pink-tri')
            {
                $('.' + target).addClass('willanimate');
                setTimeout(function()
                {
                    var tmpTarget = target;
                    $('.' + tmpTarget).addClass('do-animation');
                    if(tmpTarget == 'light-orange-tri')
                    {
                        setTimeout(function()
                        {
                            $('.' + tmpTarget).addClass('final-animation');
                            $('.gray-tri').css({opacity: 0, width:0}).show().delay(350).animate({
                                opacity: 1, 
                                width: 65
                            }, 300);
                            //We're allowed to do hover animations now!
                            setTimeout(function()
                            {
                                aboutAnimation.allowHover = true;
                            }, 350)
                        }, 350);
                    }
                }, delay)
                
            } else {
                $('.' + target).delay(delay).fadeIn(length, function()
                    {
                        if(target == 'light-orange-tri')
                        {
                            aboutAnimation.allowHover = true;
                        }
                    }
                );
            }
        },
        animateLine: function(target, delay, length)
        {
            var $line = $('.' + target);
            var height = parseInt($line.data('true-height'), 10);
            var width = parseInt($line.data('true-width'), 10);
            
            $line.delay(delay).css({ height: 0, width: 0, 'display': 'block' });
            
            var direction = $line.data('true-direction');

            var firstAnimation = 'height';
            var firstValue = height;
            
            var secondAnimation = 'width';
            var secondValue = width;
            
            var startHeight = 2;
            var startWidth = 2;
            if(target == 'orange-line')
            {
                startWidth = 0;
            }
           
            $line.css('width', startWidth).animate(
                {
                    'height': height
                },
            length, 'linear', function()
            {
                $line.animate(
                {
                    'width': width
                },
                length, 'linear', function()
                {
                    $line.css('overflow', 'visible').find('span').fadeIn();
                });
            });
        }, 
        setupTriangleHover: function()
        {
            var self = this;
            $('.triangle-container span').hover(function()
            {
                if($(this).data('target') != null && self.allowHover)
                {
                    $('.logo-triangle').stop(true).animate(
                        {
                            opacity: 0.3
                        }
                    );
                    
                    var target = $('.' + $(this).data('target'));
                    target.clearQueue().finish().css('opacity', 1);
                }
            }, function()
            {
                if($(this).data('target') != null && self.allowHover)
                {
                    $('.logo-triangle').stop(true).animate(
                        {
                            opacity: 1
                        }
                    );
                }
            });
        }            
    }
    
    aboutAnimation.setup();

});