var debugMode = false;
var section1Hidden = false;
var section2Hidden = false;
var section3Hidden = false;

$(document).ready(function () {
    if (window.location.hash == "") {
        beginAnimation();
    } else {
        $("#animation-area").hide(0);
    }
});

/* ------------------------
---- BEGIN ANIMATIONS -----
---------------------------*/

function beginAnimation() {
    if (debugMode) {
        console.log("Beginning the Animation");
    }

    beginSection1();
}

function beginSection1() {
    if (debugMode) {
        console.log("Beginning Section 1 of the Animation");
    }

    animateSparks();
    animateHammerGuy();
    animateCourage();
    animateSwirl1();
}


function beginSection2() {
    if (debugMode) {
        console.log("Beginning Section 2 of the Animation");
    }

    animateSwirl2();
    animateMachine();
    animateCraftsmanship();
    animateRainbowLayer2();
}

function beginSection3() {
    if (debugMode) {
        console.log("Beginning Section 3 of the Animation");
    }

    animatePeople();
    animateTruck();
    animateSwirl3();
    animateCommitment();
    animateRainbowLayer3();
}

/* ------------------------
---- ANIMATE SECTION 1 ----
---------------------------*/

function animateSparks() {
    if (debugMode) {
        console.log("SECTION 1: Animating Sparks");
    }
    $("#sparks").animate({
        left: 88,
        top: 118,
        opacity: .25
    }, { duration: 6000, queue: false }, 'linear');
}

function animateSwirl1() {
    if (debugMode) {
        console.log("SECTION 1: Animating Swirl");
    }
    $("#swirl").animate({
        left: 200,
        top: -150,
        opacity: .25
    }, { duration: 6000, queue: false }, 'linear', function () {
        hidePart1()
    });
}

function animateHammerGuy() {
    if (debugMode) {
        console.log("SECTION 1: Animating Hammer Guy");
    }
    $("#hammer-guy").animate({
        left: 100,
        top: 40,
        opacity: 1
    }, { duration: 6000, queue: false }, 'linear');

}

function animateCourage() {
    if (debugMode) {
        console.log("SECTION 1: Animating Courage Text");
    }
    $("#courage").animate({
        left: 300,
        top: 250,
        opacity: .50
    }, {
        duration: 6000,
        queue: false,
        step: function (currentLeft) {
            if (getPixelsAsInteger($("#courage").css("left")) < 380 && section1Hidden == false) {
                if (debugMode) {
                    console.log("Hiding Section 1 AT " + $("#courage").css("left"));
                }
                showSection2();
                hideSection1();
                beginSection2();
                section1Hidden = true;
            }
        }
    }, 'linear');
}

/* ------------------------
---- ANIMATE SECTION 2 ----
---------------------------*/

function animateSwirl2() {
    if (debugMode) {
        console.log("SECTION 2: Animating Swirl");
    }
    $("#swirl2").animate({
        top: -850,
        left: -1000
    }, { duration: 6000, queue: false }, 'linear');
}

function animateMachine() {
    if (debugMode) {
        console.log("SECTION 2: Animating Machine");
    }
    $("#machine").animate({
        top: 102,
        left: 69
    }, { duration: 6000, queue: false }, 'linear');
}

function animateRainbowLayer2() {
    if (debugMode) {
        console.log("SECTION 2: Animating Rainbow Layer");
    }
    $("#rainbowLayer2").animate({
        top: 100,
        left: 0,
        opacity: .85
    }, { duration: 6000, queue: false }, 'linear');
}

function animateCraftsmanship() {
    if (debugMode) {
        console.log("SECTION 2: Animating Craftsmanship Text");
    }
    $("#craftsmanship").animate({
        top: 220,
        left: 100,
        opacity: 1
    }, {
        duration: 7000,
        queue: false,
        step: function (currentLeft) {
            if (getPixelsAsInteger($("#craftsmanship").css("left")) >= 80 && section2Hidden == false) {
                if (debugMode) {
                    console.log("Hiding Section 2 AT " + currentLeft);
                }
                showSection3();
                hideSection2();
                beginSection3();
                section2Hidden = true;
            }
        }
    }, 'linear');
}

/* ------------------------
---- ANIMATE SECTION 3 ----
---------------------------*/

function animateTruck() {
    if (debugMode) {
        console.log("SECTION 3: Animating Truck");
    }
    $("#truck").animate({
        top: 0,
        left: 200,
        opacity: .75
    }, { duration: 5000, queue: false }, 'linear');
}

function animatePeople() {
    if (debugMode) {
        console.log("SECTION 3: Animating People");
    }
    $("#people").animate({
        top: 280,
        left: 0,
        opacity: .99
    }, { duration: 5000, queue: false }, 'linear');
}

function animateSwirl3() {
    if (debugMode) {
        console.log("SECTION 3: Animating Swirl");
    }
    $("#swirl3").animate({
        top: 0,
        left: 0,
        opacity: .5
    }, { duration: 5000, queue: false }, 'linear');
}

function animateRainbowLayer3() {
    if (debugMode) {
        console.log("SECTION 3: Animating Rainbow Layer");
    }
    $("#rainbowLayer3").animate({
        top: 200,
        left: 200,
        opacity: 0
    }, { duration: 6000, queue: false }, 'linear');
}

function animateCommitment() {
    if (debugMode) {
        console.log("SECTION 3: Animating Commitment Text");
    }
    $("#commitment").animate({
        top: 380,
        left: 150,
        opacity: .50
    }, {
        duration: 6000,
        queue: false,
        step: function (currentLeft) {
            if (getPixelsAsInteger($("#commitment").css("left")) >= 150 && section3Hidden == false) {
                if (debugMode) {
                    console.log("Hiding Section 3 AT " + currentLeft);
                }
                setTimeout(function () { hideSection3() }, 2000);
                section3Hidden = true;
            }
        }
    }, 'linear');
}

/* ------------------------
------ SHOW SECTIONS ------
---------------------------*/

function showSection2() {
    if (debugMode) {
        console.log("Showing Section 2");
    }
    $("#machine, #swirl2, #craftsmanship, #rainbowLayer2").fadeIn({ duration: 2000 });
}

function showSection3() {
    if (debugMode) {
        console.log("Showing Section 3");
    }
    $("#truck, #people, #swirl3, #commitment, #rainbowLayer3").fadeIn({ duration: 2000 });
}

/* ------------------------
------ HIDE SECTIONS ------
---------------------------*/

function hideSection1() {
    if (debugMode) {
        console.log("Hiding Section 1");
    }
    $("#swirl, #sparks, #hammer-guy, #courage, #rainbowLayer").fadeOut({ duration: 2000 });
}

function hideSection2() {
    if (debugMode) {
        console.log("Hiding Section 2");
    }
    $("#machine, #swirl2, #craftsmanship, #rainbowLayer2").fadeOut({ duration: 2000 });
}

function hideSection3() {
    if (debugMode) {
        console.log("Hiding Section 3");
    }
    $("#truck, #people, #swirl3, #commitment, #rainbowLayer3").fadeOut({ duration: 2000 }, finalize());
}

/* ------------------------
--- FINALIZE ANIMATION ----
---------------------------*/

function finalize() {
    if (debugMode) {
        console.log("Finalizing Animation");
    }
    $("#animation-area").fadeOut({ duration: 7000 }, function () {

    });

    if (window.location.hash == "" || window.location.hash == undefined) {
    	window.location.hash = "home";
    }
}

function getPixelsAsInteger(pixels) {
    return parseInt(pixels.replace("px", ""));
}