var targetHeight = 4;
var animRate = 0.3;
var interval = 20;
var animationTimer = 0;

function toggleLoginForm() {

    if (animationTimer != 0) return;

    var loginForm = document.getElementById("loginForm");

    if (loginForm.className == "clientLoginBlock") {
        var offH = loginForm.offsetHeight;
        loginForm.className = "clientLoginBlockHidden";
        loginForm.style.height = offH + "px";
        targetHeight = 4;
    }
    else {
        //loginForm.className = "clientLoginBlock";
        targetHeight = loginForm.offsetHeight;
        targetHeight = 83;
        loginForm.style.height = 4 + "px";
        //document.getElementById("ctl00_txtusername").value = "";
    }

    animationTimer = window.setTimeout("animateFrame()", interval);
}

function animateFrame() {
    var loginForm = document.getElementById("loginForm");
    if (targetHeight < loginForm.offsetHeight) {
        var step = (loginForm.offsetHeight - targetHeight) * animRate;
        if (step < 1) step = 1;
        loginForm.style.height = (loginForm.offsetHeight - step) + "px";
        if (loginForm.offsetHeight < targetHeight)
            loginForm.style.height = targetHeight + "px";

        animationTimer = window.setTimeout("animateFrame()", interval);
    }
    else if (targetHeight > loginForm.offsetHeight) {
        var step = (targetHeight - loginForm.offsetHeight) * animRate;
        if (step < 1) step = 1;
        loginForm.style.height = (loginForm.offsetHeight + step) + "px";
        if (loginForm.offsetHeight > targetHeight)
            loginForm.style.height = targetHeight + "px";

        animationTimer = window.setTimeout("animateFrame()", interval);
    }
    else {
        if (loginForm.offsetHeight == 4)
            loginForm.className = "clientLoginBlockHidden"
        else {
            loginForm.className = "clientLoginBlock";
            document.getElementById("ctl00_txtusername").focus();
        }

        animationTimer = 0;
        loginForm.style.height = "";
    }
}