// Given a button and target the slider will make the target
// slide in when the button is pressed.
var slider = function(buttonId, targetId, maxHeight)
{
    // Constants
    var SLIDE_STEPS = 10;
    var TIMER_INTERVAL = 30;


    // Private Attributes
    var button;
    var target;
    var timerTick = 0;
    var timerId;
    var direction = 1;


    // Private Methods

    function startTimer()
    {
        timerId = setInterval(onTimer, TIMER_INTERVAL);
    }


    function stopTimer()
    {
        clearInterval(timerId);
        timerId = undefined;
    }


    function onTimer()
    {
        timerTick += direction;

        // Check to see if the animation is done.
        if (timerTick <= 0 || timerTick >= SLIDE_STEPS)
        {
            stopTimer();
        }

        var step = timerTick / SLIDE_STEPS;

        setOpacity(target, step);
        target.style.height = (step * maxHeight) + "px";
    }


    // Called when button is clicked.
    function click()
    {
        if (timerTick === 0) // The slider is closed.
        {
            direction = 1;
            startTimer();
        }
        else if (timerTick === SLIDE_STEPS) // The slider is fully open.
        {
            direction = -1;
            startTimer();
        }
        else // The slider is ongoing.
        {
            // Flip the direction.
            direction = -direction;
        }
    }


    // Init

    button = document.getElementById(buttonId);
    target = document.getElementById(targetId);

    if (!button || !target)
    {
        throw "Slider could not be created one of the given IDs is invalid!";
    }

    button.onclick = click;
    target.style.height = "0px";
    setOpacity(target, 0);
};