/** ====================================================================================================================
 * This script should be included on the homepage for the site to execute the opening animation displayed when first loading
 * the page.  The animation consists of 36 squares which drop in from the top, slide to the left and then the right most 
 * squares drop from view making room for text on the right side describing the company.
 *
 * @author Russell Francis (russell.francis AT metro-six.com)
 */
$(window).load(function () {
    var r = function() {
        return -25 + Math.floor(Math.random()*100);
    }
    // Add all of the boxes
    var i;
    var topPos = 160, middlePos = 239, bottomPos = 318;
    var cubeDropLeft = 356, cubeDropCenter = 435, cubeDropRight = 514;
    var cubeSpacing = 69 + 10;

    // Phase 1 Drop colored squares into the scene
    $('#cube-1').css('top', '-100px').css('left', cubeDropLeft + 'px').css('opacity', '0.0');
    $('#cube-2').css('top', '-100px').css('left', cubeDropCenter + 'px').css('opacity', '0.0');
    $('#cube-3').css('top', '-100px').css('left', cubeDropRight + 'px').css('opacity', '0.0');
    $('#cube-13').css('top', '-100px').css('left', cubeDropLeft + 'px').css('opacity', '0.0');
    $('#cube-14').css('top', '-100px').css('left', cubeDropCenter + 'px').css('opacity', '0.0');
    $('#cube-15').css('top', '-100px').css('left', cubeDropRight + 'px').css('opacity', '0.0');
    $('#cube-25').css('top', '-100px').css('left', cubeDropLeft + 'px').css('opacity', '0.0');
    $('#cube-26').css('top', '-100px').css('left', cubeDropCenter + 'px').css('opacity', '0.0');
    $('#cube-27').css('top', '-100px').css('left', cubeDropRight + 'px').css('opacity', '0.0');

    $('#cube-25').animate({top: bottomPos, opacity: 1.0}, 500);

    $('#cube-13').delay(150).animate({top: middlePos, opacity: 1.0}, 500);
    $('#cube-26').delay(150).animate({top: bottomPos, opacity: 1.0}, 500);

    $('#cube-1').delay(300).animate({top: topPos, opacity: 1.0}, 500);
    $('#cube-14').delay(300).animate({top: middlePos, opacity: 1.0}, 500);
    $('#cube-27').delay(300).animate({top: bottomPos, opacity: 1.0}, 500);

    $('#cube-2').delay(450).animate({top: topPos, opacity: 1.0}, 500);
    $('#cube-15').delay(450).animate({top: middlePos, opacity: 1.0}, 500);

    $('#cube-3').delay(600).animate({top: topPos, opacity: 1.0}, 500, 'linear', function () {
        // Once this has dropped into place then begin the animation which moves them all to the left.
        // Phase 2 Move colored squares to the left
        var i, lpos, duration, speed;
        for (i = 1; i <= 12; ++i) {
            lpos = cubeSpacing * (i-1);
            duration = (150 * (i-1)) - (12 * (i-1));
            if (i > 3) {
                $('#cube-' + i).css('left', '1000px');
            }
            $('#cube-' + i).css('top', topPos + 'px');
            speed = 150 + r();
            $('#cube-' + i).delay(duration).animate({left: lpos}, speed);
            $('#cube-' + i + ' img').delay(duration).animate({opacity: 1.0}, speed);
        }

        for (i = 13; i <= 24; ++i) {
            lpos = cubeSpacing * (i-13);
            duration = (170 * (i - 12)) - (24 * (i-13));
            if (i > 15) {
                $('#cube-' + i).css('left', '1000px');
            }
            speed = 170 + r();
            $('#cube-' + i).css('top', middlePos + 'px');
            $('#cube-' + i).delay(duration).animate({left: lpos}, speed);
            $('#cube-' + i + ' img').delay(duration).animate({opacity: 1.0}, speed);
        }

        for (i = 25; i <= 36; ++i) {
            lpos = cubeSpacing * (i-25);
            duration = (175 * (i - 23)) - (40 * (i-25));
            if (i > 27) {
                $('#cube-' + i).css('left', '1000px');
            }
            $('#cube-' + i).css('top', bottomPos + 'px');
            speed = 175 + r();
            $('#cube-' + i).delay(duration).animate({left: lpos}, speed);
            if (i != 36) {
                $('#cube-' + i + ' img').delay(duration).animate({opacity: 1.0}, speed);
            } else {
                $('#cube-' + i + ' img').delay(duration).animate({opacity: 1.0}, speed, function () {
                    // Once all of the squares have slided into view begin phase 3 animation where the rightmost
                    // squares drop from view making room for the text which slides in from above
                    $('#top-text').css('opacity', 1.0);
                    $('#bottom-text').css('opacity', 1.0);
                    $('#top-text').animate({left: (258 - $('#top-text').width())}, 1000);
                    $('#bottom-text').animate({left: 268}, 1000, function () {
                        var fFadeTopText = function (value, effect, next) {
                            var e = $('#top-text');
                            var p = $('#top-text-previous');

                            // Set the previous element to the next element.
                            p.css('opacity', '1');
                            p.css('left', e.css('left'));
                            p.text(e.text());

                            if (effect == 'crossfade') {
                                e.text(value);
                                e.css({left: (258 - e.width()), opacity: 0});
                                p.animate({opacity: 0.0}, 350);
                                e.animate({opacity: 1.0}, 350, function () {
                                    if (typeof(next) == 'function') {
                                        next();
                                    }                                    
                                });
                            } else {
                                e.css('left', '-300px');
                                e.text(value);
                                p.animate({opacity: 0}, 350);
                                e.animate({left: (258 - e.width())}, 350, function () {
                                    if (typeof(next) == 'function') {
                                        next();
                                    }
                                });
                            }
                        };
                        setTimeout(function () {
                            fFadeTopText('EMOTIONAL', 'disolve',
                            function () {
                                setTimeout(function () {
                                    fFadeTopText('ELECTRIFYING', 'disolve',
                                    function () {
                                        setTimeout(function () {
                                            fFadeTopText('(NOT BORING)', 'disolve',
                                            function () {
                                                setTimeout(function () {
                                                    fFadeTopText('EXHILARATING', 'crossfade',
                                                    function () {
                                                        setTimeout(function () {
                                                            $('.kaleidoscope-desc').fadeIn('slow');
                                                        }, 500);
                                                    });
                                                }, 1500);
                                            });
                                        }, 500);
                                    });
                                }, 500);
                            });
                        }, 500);
                    });                        
                });
            }
        }
    });
});