window.onload = function() {
    var UserField = document.getElementById('username');
    var PassField = document.getElementById('password');
    var UserOveLay = document.getElementById('OverTextUsername');
    var PassOveLay = document.getElementById('OverTextBoxPass');

    UserOveLay.onmouseover = hideUser;
    UserOveLay.onclick = hideUser;
    PassOveLay.onmouseover = hidePass;
    PassOveLay.onclick = hidePass;

    UserOveLay.onmouseout = FormOverylayCheckBoth;
    PassOveLay.onmouseout = FormOverylayCheckBoth;

    UserField.onfocus = hideUser;
    UserField.onchange = hideUser;
    UserField.onmouseover = hideUser;
    UserField.onblur = FormOverylayCheckBoth;
    UserField.onmouseout = FormOverylayCheckBoth;

    PassField.onfocus = hidePass;
    PassField.onchange = hidePass;
    PassField.onmouseover = hidePass;
    PassField.onblur = FormOverylayCheckBoth;
    PassField.onmouseout = FormOverylayCheckBoth;

    FormOverylayCheckBoth();
}

function hideUser() {
    FormOverylayCheckBoth();
    ToggleVis('OverTextUsername', 'none')
}
function hidePass() {
    FormOverylayCheckBoth();
    ToggleVis('OverTextBoxPass', 'none');
}
function FormOverylayCheckBoth() {
    FormOverylayBackGroundVisibility('username', 'OverTextUsername');
    FormOverylayBackGroundVisibility('password', 'OverTextBoxPass');
}

function FormOverylayBackGroundVisibility(FeildID, OverLayID) {
    FeildObj = document.getElementById(FeildID);
    OverLayObj = document.getElementById(OverLayID);
    if (FeildObj.value == '')
    { ToggleVis(OverLayID, 'block'); }
    else
    { ToggleVis(OverLayID, 'none'); }
}


function ToggleVis(VarObjId, VisVar) {
    ToggleElement = document.getElementById(VarObjId);
    ToggleElement.style.display = VisVar;

}