function displayLogin(intoDiv, fieldUserName, fieldPassName, formActionLoc) {
    var parentDiv = document.getElementById(intoDiv);
    var loginHtml = "<form id=login_form method=post action=" + formActionLoc + "> <div id=login style='-moz-opacity: 0;'> username: <input type=text id=form_" + fieldUserName + " name=" + fieldUserName + " /> &nbsp; password: <input type=password name=" + fieldPassName + " /> <input class=btn_submit type=submit value='go &raquo;' /> </div> </form>";
    
    parentDiv.innerHTML = loginHtml; // clear content inside specified block and insert login form
   
    setOpacity("login", 0, 100, 300);
    
    document.getElementById("form_" + fieldUserName).focus();
}

function setOpacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}