var activeSlide = 0;
var collapsedHeight = 16;
var expandedHeight = 191;
var objects = [
    { "index": 1, "id": "learn", "top_position_off": 260, "top_position_on": 85, "background_color": "#5c2946" },
    { "index": 2, "id": "advice", "top_position_off": 243, "top_position_on": 68, "background_color": "#faaf40" },
    { "index": 3, "id": "design", "top_position_off": 226, "top_position_on": 51, "background_color": "#1ea1c4" },
    { "index": 4, "id": "develop", "top_position_off": 209, "top_position_on": 34, "background_color": "#9dc03e" },
    { "index": 5, "id": "educate", "top_position_off": 192, "top_position_on": 17, "background_color": "#a76993" },
    { "index": 6, "id": "review", "top_position_off": 174, "top_position_on": 0, "background_color": "#999" }
];
function initLadder() {
	activeSlide = 0;
	collapsedHeight = 16;
	expandedHeight = 191;
	slide2Activated = false; slide3Activated = false; slide4Activated = false; slide5Activated = false; slide6Activated = false;
}
function hideDiv(div2hide) {
	divObj = document.getElementById(div2hide);
	divObj.style.display = "none";
	divObj.style.visibility = "hidden";
}
function showDiv(div2show) {
	divObj = document.getElementById(div2show);
	divObj.style.display = "block";
	divObj.style.visibility = "visible";
}
function blankDiv(div2blank) {
	divObj = document.getElementById(div2blank);
	divObj.style.visibility = "hidden";
}
function expandSlide(slideNumber) {
    clearAnimationQueues();

    var runColorEffect = false;
    var object = objects[slideNumber - 1];
	var slideFooter = "footer" + slideNumber;
	
	showDiv(slideFooter);
    
    switch (slideNumber)
    {
        case 2:
            if (slide2Activated && activeSlide == 2)
                runColorEffect = true;
            else
                slide2Activated = true;
            break;
        case 3:
            if (slide3Activated && activeSlide == 3)
                runColorEffect = true;
            else
                slide3Activated = true;
            break;
        case 4:
            if (slide4Activated && activeSlide == 4)
                runColorEffect = true;
            else
                slide4Activated = true;
            break;
        case 5:
            if (slide5Activated && activeSlide == 5)
                runColorEffect = true;
            else
                slide5Activated = true;
            break;
        case 6:
            if (slide6Activated && activeSlide == 6)
                runColorEffect = true;
            else
                slide6Activated = true;
            break;
    }
    
    if (runColorEffect)
        $("#" + object.id).animate({ top: object.top_position_on, height: expandedHeight, backgroundColor: object.background_color }, 1000).children(".content").fadeTo(1000, 1);
    else
        $("#" + object.id).animate({ top: object.top_position_on, height: expandedHeight }, 1000).children(".content").fadeTo(1000, 1);
}
function collapseSlide(slideNumber) {
	var slideHeader = "header" + slideNumber;
	var slideFooter = "footer" + slideNumber;
	
	showDiv(slideHeader);
	hideDiv(slideFooter);
    clearAnimationQueues(); 
    var object = objects[slideNumber - 1];
    $("#" + object.id).animate({ "top": object.top_position_off, "height": collapsedHeight }, 1000).children(".content").fadeTo(1000, 0);
}
function startLadder() {
	initLadder();
    clearAnimationQueues();

    // on load - set all elements to complete transparency and shrink to header size
    $(".element").css({ "top": "0px", "left": "0px", "height": "16px", "opacity": 0 }).show();
    $(".content").css({ "opacity": 0 })

    // start sliding-down animation
    $("#" + objects[0].id).animate({ "top": objects[0].top_position_off, "opacity": 1 }, 700);
    $("#" + objects[1].id).delay(200).animate({ "top": objects[1].top_position_off, "opacity": 1 }, 700);
    $("#" + objects[2].id).delay(400).animate({ "top": objects[2].top_position_off, "opacity": 1 }, 700);
    $("#" + objects[3].id).delay(600).animate({ "top": objects[3].top_position_off, "opacity": 1 }, 700);
    $("#" + objects[4].id).delay(800).animate({ "top": objects[4].top_position_off, "opacity": 1 }, 700);
    $("#" + objects[5].id).delay(1000).animate({ "top": objects[5].top_position_off, "opacity": 1 }, 700, function()
    {
        // expand learn when all elements are at designated positions
        activateSlide(1);
        $("#" + objects[1].id).animate({ "top": objects[1].top_position_on }, 1000);
        $("#" + objects[2].id).animate({ "top": objects[2].top_position_on }, 1000);
        $("#" + objects[3].id).animate({ "top": objects[3].top_position_on }, 1000);
        $("#" + objects[4].id).animate({ "top": objects[4].top_position_on }, 1000);
        $("#" + objects[5].id).animate({ "top": objects[5].top_position_on }, 1000);
    });
}
function clearAnimationQueues() {
    var x = 0;
    for (x = 0; x < objects.length; x++)
        $("#" + objects[x].id).clearQueue();
}
function activateSlide(slideNumber) {
    switch (slideNumber)
    {
        case 1:
            if (activeSlide != 1)
            {
                activeSlide = 1;
                expandSlide(activeSlide); blankDiv('header1');
                expandSlide(2); showDiv('header2');
                expandSlide(3); showDiv('header3');
                expandSlide(4); showDiv('header4');
                expandSlide(5); showDiv('header5');
                expandSlide(6); showDiv('header6');
            }
            break;
        case 2:
            if (activeSlide != 2)
            {
                activeSlide = 2;
                // slide #1 minimized
                collapseSlide(1); showDiv('header1');
                // side #2 maximized
                expandSlide(activeSlide); blankDiv('header2');
                expandSlide(3); showDiv('header3');
                expandSlide(4); showDiv('header4');
                expandSlide(5); showDiv('header5');
                expandSlide(6); showDiv('header6');
            }
            break;
        case 3:
            if (activeSlide != 3)
            {
                activeSlide = 3;
                collapseSlide(1); showDiv('header1');
                collapseSlide(2); showDiv('header2');
                // side #3 maximized
                expandSlide(activeSlide); blankDiv('header3');
                expandSlide(4); showDiv('header4');
                expandSlide(5); showDiv('header5');
                expandSlide(6); showDiv('header6');
            }
            break;
        case 4:
            if (activeSlide != 4)
            {
                activeSlide = 4; 
                collapseSlide(1); showDiv('header1');
                collapseSlide(2); showDiv('header2');
                collapseSlide(3); showDiv('header3');
                // side #4 maximized
                expandSlide(activeSlide); blankDiv('header4');
                expandSlide(5); showDiv('header5');
                expandSlide(6); showDiv('header6');
            }
            break;
        case 5:
            if (activeSlide != 5)
            {
                activeSlide = 5; 
                collapseSlide(1); showDiv('header1');
                collapseSlide(2); showDiv('header2');
                collapseSlide(3); showDiv('header3');
                collapseSlide(4);  showDiv('header4');
                // side #5 maximized
                expandSlide(activeSlide); blankDiv('header5');
                expandSlide(6); showDiv('header6');
            }
            break;
        case 6:
            if (activeSlide != 6)
            {
                activeSlide = 6; 
                collapseSlide(1); showDiv('header1');
                collapseSlide(2); showDiv('header2');
                collapseSlide(3); showDiv('header3');
                collapseSlide(4); showDiv('header4');
                collapseSlide(5); showDiv('header5');
                // side #6 maximized
                expandSlide(activeSlide); blankDiv('header6');
            }
            break; 
    }
}