var Velocity = 0;
var Acceleration = .5;
var Interval = 10;
var DivPositionLeft = 0;
var DivWidth = 0;
var DivHeight = 0;
var MaxWidth = 500;
var MaxHeight = 200;
var MinWidth = 118;
var MinHeight = 0;
var MyInterval = null;
var IsAnimating = false;
var IsOpen = false;
var Clicked = false;

window.onload = Init;

// global DOM objects
var moreLinksDiv = null;
var PreviousDiv = null;
var paperlessDiv = null;
var exampleDiv = null;

function Init() {

    // internal divs
    paperlessDiv = document.getElementById('paperlessDiv');
    paperlessDiv.style.display = 'none';
    exampleDiv = document.getElementById('exampleDiv');
    exampleDiv.style.display = 'none';

    // slider
    moreLinksDiv = document.getElementById('moreLinksDiv');

    //links
    var paperlessLinksDiv = document.getElementById('paperlessLinksDiv');
    var exampleLinkDiv = document.getElementById('exampleLinkDiv');

    if (paperlessLinksDiv) {
        document.getElementById('paperlessLink').onmouseover = function () { moveTheDiv(paperlessDiv, 134); };
        paperlessLinksDiv.onclick = function () { toggleTheDiv(paperlessDiv, 134); };
    }
    if (exampleLinkDiv) {
        document.getElementById('exampleLink').onmouseover = function () { moveTheDiv(exampleDiv, 294); };
        exampleLinkDiv.onclick = function () { toggleTheDiv(exampleDiv, 294); };
    }
}


function moveTheDiv(requestedDiv, desiredPosition) {

    DivPositionLeft = parseInt(moreLinksDiv.style.left);

    if (!IsAnimating) {
        if (!IsOpen) {
            if (DivPositionLeft < desiredPosition) {
                MyInterval = setInterval(function () { moveItRight(requestedDiv, desiredPosition, DivPositionLeft); }, Interval);
                IsAnimating = true;
            }
            else if (DivPositionLeft > desiredPosition) {
                MyInterval = setInterval(function () { moveItLeft(requestedDiv, desiredPosition, DivPositionLeft); }, Interval);
                IsAnimating = true;
            }
        }
    }
}

function moveItRight(requestedDiv, desiredPosition, DivPositionLeft) {
    DivPositionLeft = parseInt(moreLinksDiv.style.left);
    if (DivPositionLeft >= desiredPosition) {
        if (DivPositionLeft > desiredPosition) {
            moreLinksDiv.style.left = DivPositionLeft - 1 + 'px';
            //keep going
        }
        else {
            stopAnimation(requestedDiv, desiredPosition);
            //stop
        }
    }
    else {
        moreLinksDiv.style.left = DivPositionLeft + Velocity + 'px';
        Velocity = Velocity + Acceleration;
        //keep going
    }
}

function moveItLeft(requestedDiv, desiredPosition, DivPositionLeft) {
    DivPositionLeft = parseInt(moreLinksDiv.style.left);
    if (DivPositionLeft <= desiredPosition) {
        if (DivPositionLeft < desiredPosition) {
            moreLinksDiv.style.left = DivPositionLeft + 1 + 'px';
            //keep going
        }
        else {
            stopAnimation(requestedDiv, desiredPosition);
            //stop
        }
    }
    else {
        moreLinksDiv.style.left = DivPositionLeft - Velocity + 'px';
        Velocity = Velocity + Acceleration;
        //keep going
    }
}

function toggleTheDiv(requestedDiv, desiredPosition) {

    currentPosition = parseInt(moreLinksDiv.style.left);
    if (currentPosition != desiredPosition) {
        Clicked = true;
    }

    if (!IsAnimating) {
        if (IsOpen) {
            IsOpen = false;
            IsAnimating = true;
            MyInterval = setInterval(function () { closeTheDiv(requestedDiv, desiredPosition); }, Interval);
        }
        else {
            IsOpen = true;
            IsAnimating = true;
            requestedDiv.style.display = '';
            MyInterval = setInterval(function () { openTheDiv(requestedDiv, desiredPosition); }, Interval);
        }
    }
}

function closeTheDiv(requestedDiv, desiredPosition) {

    DivWidth = parseInt(moreLinksDiv.style.width);
    DivHeight = parseInt(moreLinksDiv.style.height);

    if (DivHeight <= MinHeight + Velocity) {
        moreLinksDiv.style.height = MinHeight + 'px';
        if (DivWidth > MinWidth) {
            moreLinksDiv.style.width = DivWidth - Velocity + 'px';
            Velocity = Velocity + Acceleration;
        }
        else {
            moreLinksDiv.style.width = MinWidth + 'px';
            Velocity = 0;
            if (PreviousDiv) {
                PreviousDiv.style.display = 'none';
            }
            IsAnimating = false;
            clearInterval(MyInterval);
            moveTheDiv(requestedDiv, desiredPosition);
        }
    }
    else {
        moreLinksDiv.style.height = DivHeight - Velocity + 'px';
        Velocity = Velocity + Acceleration;
        PreviousDiv.style.filter = 'alpha(opacity=' + (DivHeight + Velocity / 2) + ')';
        PreviousDiv.style.opacity = ((DivHeight + Velocity) / MaxHeight);
    }

}

function openTheDiv(requestedDiv, desiredPosition) {

    DivWidth = parseInt(moreLinksDiv.style.width);
    DivHeight = parseInt(moreLinksDiv.style.height);

    if (DivWidth >= MaxWidth) {
        moreLinksDiv.style.width = MaxWidth + 'px';
        if (DivHeight < MaxHeight) {
            moreLinksDiv.style.height = DivHeight + Velocity + 'px';
            Velocity = Velocity + Acceleration;
            requestedDiv.style.filter = 'alpha(opacity=' + (DivHeight + Velocity / 2) + ')';
            requestedDiv.style.opacity = ((DivHeight + Velocity) / MaxHeight);
        }
        else {
            moreLinksDiv.style.height = MaxHeight + 'px';
            PreviousDiv = requestedDiv;
            stopAnimation();
        }
    }
    else {
        moreLinksDiv.style.width = DivWidth + Velocity + 'px';
        Velocity = Velocity + Acceleration;
    }
}

function stopAnimation(requestedDiv, desiredPosition) {
    Velocity = 0;
    clearInterval(MyInterval);
    IsAnimating = false;
    if (Clicked) {
        Clicked = false;
        toggleTheDiv(requestedDiv, desiredPosition);
    }
}