// Copyright 2008 Microsoft Corporation. All rights reserved.

var spAniIntervalLength = 25; // Animation frame interval length, in milliseconds.
var spAniFrameCount = 23;     // Number of frames in one open or close animation.

// Vertical translation offsets for each frame, from 0 to 62 with smooth start and stop.
var frameOffsets = [0, 1, 2, 3, 5, 7, 10, 13, 17, 21, 26, 31, 36, 41, 45, 49, 52, 55, 57, 59, 60, 61, 62];

var spMaxPanels = 4; // Maximum number of sliding panels (per page) supported by this script.

// Arrays of size spMaxPanels, for storing state data for each panel.
var spAniDirections = [0, 0, 0, 0];   // Current directionality of each panel: 1=opening, -1=closing, 0=stopped.
var spAniFrameIndexes = [0, 0, 0, 0]; // Current animation frame index of each panel.
var spAniElements = [null, null, null, null]; // Panel DIV elements being animated.

var spAniIntervalId = -1;     // ID of the JS timer interval.

// These variables must be initialized by the containing page.
var spPanelBaseID;    // Element ID of the panel DIV. The panel index 0-N is appended.
var spBaseOffset;     // Top offset of the sliding panel DIV when it is closed.
var spOpenBkgImage;   // Background image of the panel when it is open or sliding.
var spClosedBkgImage; // Background image of the panel when it is closed.

// Initialize parameters that are specific to the page style and layout.
function initSlidingPanels(panelBaseID, baseOffset, openBkgImage, closedBkgImage) {
    spPanelBaseID = panelBaseID;
    spBaseOffset = baseOffset;
    spOpenBkgImage = openBkgImage;
    spClosedBkgImage = closedBkgImage;
}

// Called when the mouse enters the container of a sliding panel.
// If the panel is not all the way open, it starts the panel animating in the open direction.
function slidingPanelEnter(panelIndex) {
    var panel = document.getElementById(spPanelBaseID + panelIndex);
    if (panel && spAniFrameIndexes[panelIndex] < spAniFrameCount - 1) {
        spAniElements[panelIndex] = panel;
        spAniDirections[panelIndex] = 1;
        if (spAniIntervalId == -1) {
            spAniIntervalId = setInterval(slidingPanelAnimate, spAniIntervalLength);
        }
    }
}

// Called when the mouse leaves the container of a sliding panel.
// If the panel is not all the way closed, it starts the panel animating in the closed direction.
function slidingPanelLeave(panelIndex) {
    var panel = document.getElementById(spPanelBaseID + panelIndex);
    if (panel && spAniFrameIndexes[panelIndex] > 0) {
        spAniElements[panelIndex] = panel;
        spAniDirections[panelIndex] = -1;
        if (spAniIntervalId == -1) {
            spAniIntervalId = setInterval(slidingPanelAnimate, spAniIntervalLength);
        }
    }
}

// Animation function called every few milliseconds by the interval timer.
// Checks the animation status of each panel and updates its animation frame.
function slidingPanelAnimate() {
    var animated = false;
    for (var i = 0; i < spMaxPanels; i++) {
        var direction = spAniDirections[i];
        if (direction != 0) {
            var frameIndex = spAniFrameIndexes[i];

            // Move the frame index forward or backward,
            // stopping the animation at either end.
            if (direction > 0) {
                if (++frameIndex == spAniFrameCount - 1) {
                    spAniDirections[i] = 0;
                }
            }
            else {
                if (--frameIndex == 0) {
                    spAniDirections[i] = 0;
                }
            }

            // Update the element according to the current frame index.
            spAniFrameIndexes[i] = frameIndex;
            slidingPanelAnimate1(spAniElements[i], frameIndex);
            animated = true;
        }
    }

    // If nothing is being animated anymore, dispose the interval timer
    // so this function isn't called unnecessarily.
    if (!animated) {
        clearInterval(spAniIntervalId);
        spAniIntervalId = -1;
    }
}

// Updates properties of one panel to match the animation frame index.
function slidingPanelAnimate1(panel, frameIndex) {
    var offset = frameOffsets[frameIndex];
    if (frameIndex == 0) {
        panel.style.backgroundImage = "url(" + spClosedBkgImage + ")";
    }
    else if (frameIndex == 1) {
        panel.style.backgroundImage = "url(" + spOpenBkgImage + ")";
    }
    panel.style.top = (spBaseOffset - offset) + "px";
}