function aeCreateWatermark(element) {

    if (element) {

        this.elementPos = getElementPosition(element);

        this.watermark = document.getElementById('watermark_' + element.id);
        if (this.watermark) {
            this.watermark.style.position = 'absolute';
            this.watermark.setAttribute('class', element.id);
            this.watermark.style.left = this.elementPos.left + 'px';
            this.watermark.style.top = this.elementPos.top + 'px';
            this.watermark.style.width = element.width;
            this.watermark.style.height = element.height;

            element.setAttribute('watermark', this.watermark.id);

            this.watermark.setAttribute("onclick", "aeWatermarkClick(document.getElementById('" + this.watermark.id + "'),document.getElementById('" + element.id + "'));");
            this.watermark.onclick = function(evt) { this.style.display = 'none'; document.getElementById(this.getAttribute('class')).focus(); }
            this.watermark.onselectstart = function(evt) { this.style.display = 'none'; document.getElementById(this.getAttribute('class')).focus(); }

            if (element.value != '')
                this.watermark.style.display = 'none';
            else
                this.watermark.style.display = '';

            element.setAttribute("onfocus", "aeWatermarkFocus(document.getElementById('" + this.watermark.id + "'),document.getElementById('" + element.id + "'));");
            element.setAttribute("onblur", "aeWatermarkLoseFocus(document.getElementById('" + this.watermark.id + "'),document.getElementById('" + element.id + "'));");
            element.onblur = function(evt) {
                if (this.value == '') {
                    document.getElementById(this.getAttribute('watermark')).style.display = '';
                }
                else {
                    document.getElementById(this.getAttribute('watermark')).style.display = 'none';
                }
            }
            element.onfocus = function(evt) {
                document.getElementById(this.getAttribute('watermark')).style.display = 'none';
            }
        }
    }
}

function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

function aeWatermarkClick(watermarkElement, targetElement) {
    watermarkElement.style.display = 'none';
    targetElement.focus();
}

function aeWatermarkFocus(watermarkElement, targetElement) {
    watermarkElement.style.display = 'none';
}

function aeWatermarkLoseFocus(watermarkElement, targetElement) {

    if (targetElement.value == '') {
        watermarkElement.style.display = '';
    }
    else {
        watermarkElement.style.display = 'none';
    }
}

function getElementPosition(ele) {
    var offsetTrail = ele;
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail && !((offsetTrail.tagName == 'SPAN' || offsetTrail.tagName == 'DIV' || offsetTrail.tagName == 'span' || offsetTrail.tagName == 'div') && (getPosition(offsetTrail) == 'absolute' || getPosition(offsetTrail) == 'relative'))) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf('MAC') != -1 && typeof document.body.leftMargin != 'undefined') {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return { left: offsetLeft, top: offsetTop };
}

function getPosition(el) {
    if (el.currentStyle) {
        return el.currentStyle.position;
    } else if (document.defaultView.getComputedStyle) {
        return document.defaultView.getComputedStyle(el, '').position;
    } else {
        return;
    }
}