var timeouts = new Array();

var slideFunctions = [[slide1, slide1Reset], [slide2, slide2Reset], [slide3, slide3Reset]];

jQuery.expr[':'].parents = function (a, i, m) {
    return jQuery(a).parents(m[3]).length < 1;
};

function animation() {
    initializeAnimation();

    //Paging  and Slider Function
    rotate = function () {
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500);

        slidePicker($active.attr("rel"));
    };

    //On Click
    $(".paging a").click(function () {

        resetCurrentSlide();

        $active = $(this); //Activate the clicked paging
        //Reset Timer
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });

    rotate();
}

function nextSlide() {
    resetCurrentSlide();

    $active = $('.paging a.active').next(); //Move to the next paging
    if ($active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:first'); //go back to first
    }

    rotate();
}

function clearActions() {
    for (key in timeouts) {
        clearTimeout(timeouts[key]);
    }
}

function slidePicker(slideNumber) {
    if (!slideNumber) return;
    setTimeout(function () {
        $('#content-' + slideNumber).animate({ opacity: '1' }, 250);
        setTimeout(function () { slideFunctions[slideNumber - 1][0](); }, 250);
    }, 500);
}

function resetCurrentSlide() {
    var current = $active.attr("rel");
    $('#content-' + current).animate({ opacity: ".5" }, 250);
    setTimeout('slideFunctions[' + (current - 1) + '][1]();', 500);
}

function initializeAnimation() {
    //Get size of the image, how many images there are, then determine the size of the image reel.
    imageWidth = $("#flashHeader").width();

    var imageSum = $(".image_reel .slideContent").filter(':parents(.cloned)').size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel .slideContent").each(function (index) {
        if (index > 0) {
            $(this).css("opacity", ".5");
        }
    });

    $(".paging").show();
    $(".paging a:first").addClass("active");
    $active = $('.paging a.active');


    //Adjust the image reel to its new size
    $(".image_reel").css({ 'width': imageReelWidth });
}


/* SLIDE 1 */

function slide1() {
    $('div#welcome').fadeIn(100, function () { });
    $('div#welcome').animate({ top: "-=15px" }, 500);
    timeouts["1"] = setTimeout('$(\'#up-1\').animate({ top: "-=15px" }, 500)', 1350);
    timeouts["2"] = setTimeout('$(\'div#welcome-description\').fadeIn(100, function () { })', 2200);
    timeouts["3"] = setTimeout('$(\'div#welcome-description\').animate({ top: "-=15px" }, 400)', 2200);
    timeouts["4"] = setTimeout('$(\'div#welcome-text\').filter(\':parents(.cloned)\').fadeOut(300, function () { discoverUpSide() })', 6500);
}

function discoverUpSide() {
    $('div#discover').fadeIn(100, function () { });
    $('div#discover').animate({ top: "-=15px" }, 500);
    timeouts["5"] = setTimeout('$(\'div#man\').animate({ left: "-=180px" }, 1500)', 600);
    timeouts["6"] = setTimeout('$(\'#up-2\').animate({ top: "-=15px" }, 1000)', 800);
    timeouts["7"] = setTimeout('$(\'#seeYourself\').fadeIn(100, function () { })', 2500);
    timeouts["8"] = setTimeout('$(\'#seeYourself\').animate({ top: "-=17px" }, 400)', 2500);

    timeouts["9"] = setTimeout('nextSlide(); ', 5500);
}

function slide1Reset() {
    clearActions();
    $('div#welcome').stop(true, true).css({ 'display': 'none', 'top': '175px' });
    $('div#up-1').stop(true, true).css({ 'top': '0px' });
    $('div#welcome-description').stop(true, true).css({ 'display': 'none', 'top': '220px' });
    $('div#welcome-text').stop(true, true).css({ 'display': 'block' });
    $('div#discover').stop(true, true).css({ 'display': 'none', 'top': '170px' });
    $('div#man').stop(true, true).css({ 'left': '695px' });
    $('div#up-2').stop(true, true).css({ 'top': '0px' });
    $('div#seeYourself').stop(true, true).css({ 'display': 'none', 'top': '185px' });
}


/* SLIDE 2 */

function slide2() {
    $('#big-idea-header').fadeIn(100, function () { });
    $('#big-idea-header').animate({ top: "105px" }, 400);
    timeouts["1"] = setTimeout('$(\'#big-idea-descriptor\').fadeIn(100, function () { })', 700);
    timeouts["2"] = setTimeout('$(\'#big-idea-descriptor\').animate({ top: "170px" }, 400)', 700);
    timeouts["3"] = setTimeout('$(\'#bigIdeas-intro\').filter(\':parents(.cloned)\').fadeOut(500, function () { thatsWhyIgniteLabs() })', 3800);
}

function thatsWhyIgniteLabs() {
    $('#crickle-back-2').fadeIn(500, function () { });
    timeouts["4"] = setTimeout('$(\'#why-labs\').fadeIn(500, function () { })', 600);
    timeouts["5"] = setTimeout('$(\'#ignite-labs\').fadeIn(500, function () { })', 1200);
    timeouts["6"] = setTimeout('$(\'.slide2p2\').fadeOut(500, function () { })', 4000);
    timeouts["7"] = setTimeout('bigIDeasStartHere()', 4050);
}

function bigIDeasStartHere() {
    $('#ignite-labs').animate({ left: "45px" }, 800);
    timeouts["8"] = setTimeout('$(\'#bigIdeas-here\').fadeIn(500, function () { })', 1000);
    timeouts["9"] = setTimeout('nextSlide();', 4100);
}

function slide2Reset() {
    clearActions();
    $('#big-idea-header').stop(true, true).css({ 'display': 'none', 'top': '120px' });
    $('#big-idea-descriptor').stop(true, true).css({ 'display': 'none', 'top': '185px' });
    $('#bigIdeas-intro').stop(true, true).css({ 'display': 'block' });
    $('#crickle-back-2').stop(true, true).css({ 'display': 'none' });
    $('#why-labs').stop(true, true).css({ 'display': 'none' });
    $('#ignite-labs').stop(true, true).css({ 'display': 'none', 'left': '338px' });
    $('#bigIdeas-here').stop(true, true).css({ 'display': 'none' });
}



/* SLIDE 3 */

function slide3() {
    $('#yBrandLogo').fadeIn(500, function () { });
    timeouts["1"] = setTimeout('$(\'#yBrandHeader  div\').fadeIn(1000, function () { })', 700);
    timeouts["2"] = setTimeout('$(\'#yBrandHeader\').animate({ left: "415px" }, 1000)', 700);
    timeouts["3"] = setTimeout('$(\'#yBrandLogo\').fadeOut(500, function () { })', 1900);
    timeouts["4"] = setTimeout('orangeSlidingArm()', 1900);
}

function orangeSlidingArm() {
    $('#yOrange div').fadeIn(600, function () { });
    $("#yOrange").animate({ left: '0px', top: '0px' }, 800);
    timeouts["5"] = setTimeout('$(\'#yDescriptor-one  div\').fadeIn(900, function () { })', 1000);
    timeouts["6"] = setTimeout('$(\'#yDescriptor-one\').animate({ left: "414px" }, 900)', 1000);
    timeouts["7"] = setTimeout('$(\' #yOrange div\').filter(\':parents(.cloned)\').fadeOut(900, function () { setTimeout(\'blueSlidingArm()\', 200) })', 1000);
}

function blueSlidingArm() {
    $('#yBlue div').fadeIn(600, function () { });
    $("#yBlue").animate({ left: '0px', top: '0px' }, 800);
    timeouts["8"] = setTimeout('$(\' #yBlue div\').filter(\':parents(.cloned)\').fadeOut(900, function () { setTimeout(\'yBrandLogo()\', 200) })', 1000);
}

function yBrandLogo() {
    $('#background-Y-Logo').fadeIn(400, function () { });
    timeouts["9"] = setTimeout('$(\' #yBrandMain\').filter(\':parents(.cloned)\').fadeIn(600, function () { setTimeout(\'findOutY()\', 600) })', 700);
}

function findOutY() {
    $("#yBrandMain").animate({ top: '137px' }, 700);
    timeouts["10"] = setTimeout('$(\'#yBrandHeader div\').fadeOut(500, function () { })', 200);
    timeouts["11"] = setTimeout('$(\'#yDescriptor-one div\').fadeOut(500, function () { })', 200);
    timeouts["12"] = setTimeout('$(\'#find-Out-Div\').fadeIn(500, function () { })', 700);

    timeouts["13"] = setTimeout('nextSlide();', 4000);
}

function slide3Reset() {
    clearActions();
    $('#yBrandLogo').stop(true, true).css({ 'display': 'none' });
    $('#yBrandHeader').stop(true, true).css({ 'left': '655px' });
    $('#yBrandHeader div').stop(true, true).css({ 'display': 'none' });
    $('#yOrange').stop(true, true).css({ 'left': '196px', 'top': '-345px' });
    $('#yOrange div').stop(true, true).css({ 'display': 'none' });
    $('#yBlue').stop(true, true).css({ 'left': '-196px', 'top': '-345px' });
    $('#yBlue div').stop(true, true).css({ 'display': 'none' });
    $('#yDescriptor-one').stop(true, true).css({ 'left': '655px' });
    $('#yDescriptor-one div').stop(true, true).css({ 'display': 'none' });
    $('#background-Y-Logo').stop(true, true).css({ 'display': 'none' });
    $('#yBrandMain').stop(true, true).css({ 'display': 'none', 'top': '102px' });
    $('#find-Out-Div').stop(true, true).css({ 'display': 'none' });
}