function changeInputType(
               oldElm, // a reference to the input element
               iType, // value of the type property: 'text' or 'password'
               cssClass, //css class for control
               iValue, // the default value, set to 'password' in the demo
               blankValue, // true if the value should be empty, false otherwise
               noFocus) {  // set to true if the element should not be given focus

    if (!oldElm || !oldElm.parentNode || (iType.length < 4) || !document.getElementById || !document.createElement) return;
    var newElm = document.createElement('input');
    newElm.type = iType;
    if (oldElm.name) newElm.name = oldElm.name;
    if (oldElm.id) newElm.id = oldElm.id;
    if (oldElm.className) newElm.className = oldElm.className;
    if (oldElm.size) newElm.size = oldElm.size;
    if (oldElm.tabIndex) newElm.tabIndex = oldElm.tabIndex;
    if (oldElm.accessKey) newElm.accessKey = oldElm.accessKey;
    if (oldElm.onkeypress) newElm.onkeypress = oldElm.onkeypress;
    addClass(newElm,cssClass);

    newElm.onfocus = function() {
        return function() {
            if (this.hasFocus) return;
            var newElm = changeInputType(this, 'password', '', iValue, (this.value.toLowerCase() == iValue.toLowerCase()) ? true : false);
            if (newElm) newElm.hasFocus = true;
        }
    } ();

    newElm.onblur = function() {
        return function() {
            if (this.hasFocus)
                if (this.value == '' || (this.value.toLowerCase() == iValue.toLowerCase())) {
                    changeInputType(this, 'text', 'mbsWatermark', iValue, false, true);
            }
        }
    } ();

    // hasFocus is to prevent a loop where onfocus is triggered over and over again
    newElm.hasFocus = false;
    oldElm.parentNode.replaceChild(newElm, oldElm);
    if (!blankValue) newElm.value = iValue;
    if (!noFocus || typeof (noFocus) == 'undefined') {
        window.tempElm = newElm;
        setTimeout("tempElm.hasFocus=true;tempElm.focus();", 1);
    }

    return newElm;
}

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        var newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

function WaterMarkOnFocus(control) {
    if (control.length == null) {
        control.length = control.value;
        control.value = '';
        control.style.color = 'black';
    }
}

function WaterMarkOnBlur(control) {
    if (control.value == '') {
        control.value = control.length;
        control.length = null;
        control.style.color = 'gray';
    }
}