//Requires prototype.js
//Usage:
//<input title="Hint text here" />
//Add "watermark" css class to your style sheet
//IE: .watermark { color:gray; }

//Ensure that prototype is installed
if ((typeof Prototype == 'undefined') || (typeof Element == 'undefined') || (typeof Element.Methods == 'undefined')) alert("WatermarkText.js requires the Prototype JavaScript framework");

var TextWatermark = Class.create({
    initialize: function(textbox, text)
    {
        if (!TextWatermark.all)
        {
            TextWatermark.clearOnSubmit = true;
            TextWatermark.all = new Array();
        }
        TextWatermark.all.push(this);

        this.textbox = $(textbox);
        this.text = text;
        this.className = this.textbox.className;
        this.form = this.textbox.up("form");
        this.textbox.setAttribute("watermark", this);


        if (this.textbox.type == "password")
        {
            //IE cant change a input's type.  This means that to display watermark text
            //in a password field we need to make a stand-in text input and swap it
            //in and out for password fields.  Death to IE!

            this.textboxDisplay = this.textbox.style.display;
            var standin = document.createElement("input");
            Element.extend(standin);
            standin.className = this.textbox.className;
            standin.value = this.text;
            standin.addClassName("watermark");

            this.textbox.style.display = "none";
            this.textbox.parentNode.insertBefore(standin, this.textbox.nextSibling)
            this.standin = standin;
            this.standin.observe("focus", this.focus.bind(this));
            this.textbox.observe("blur", this.blur.bind(this));
        }
        else
        {
            this.textbox.value = this.text;
            this.textbox.addClassName("watermark");
            this.textbox.observe("focus", this.focus.bind(this));
            this.textbox.observe("blur", this.blur.bind(this));
        }

        if (this.form) this.form.observe("submit", this.onSubmit.bind(this));
    },

    onSubmit: function()
    {
        if (TextWatermark.clearOnSubmit)
        {       
            if (this.textbox.value == this.text) this.textbox.value = "";
        }
    },

    focus: function()
    {
        if (this.textbox.type == "password")
        {
            if (this.textbox.style.display == "none")
            {
                this.standin.style.display = "none";
                this.textbox.style.display = this.textboxDisplay;
                this.textbox.focus();
            }
        }
        else
        {
            if (this.textbox.value == this.text)
            {
                this.textbox.value = "";
                this.textbox.removeClassName("watermark");
            }
        }
    },

    blur: function()
    {
        if (this.textbox.type == "password")
        {
            if (this.textbox.value == "")
            {
                this.textbox.style.display = "none";
                this.standin.style.display = this.textboxDisplay;
            }
        }
        else
        {
            if (this.textbox.value == "")
            {
                this.textbox.value = this.text;
                this.textbox.addClassName("watermark");
            }
        }
    },

    clear: function()
    {
        this.focus();
    },

    restore: function()
    {
        this.blur();
    }
});

TextWatermark.refresh = function()
{
    var list = $$('input[title]');
    list.each(function(input)
    {
        if (!input.getAttribute("watermarkObject")) input.watermark = new TextWatermark(input, input.getAttribute("title"));
    });

    list = $$('textarea[watermark]');
    list.each(function(input)
    {
        if (!input.getAttribute("watermarkObject")) input.watermark = new TextWatermark(input, input.getAttribute("title"));
    });
}

TextWatermark.clearAll = function()
{
    if (TextWatermark.all)
    {
        for (var i = 0; i < TextWatermark.all.length; i++)
        {
            TextWatermark.all[i].clear();
        }
    }
}

TextWatermark.restoreAll = function()
{
    if (TextWatermark.all)
    {
        for (var i = 0; i < TextWatermark.all.length; i++)
        {
            TextWatermark.all[i].restore();
        }
    }
}

document.observe("dom:loaded", function()
{
    TextWatermark.refresh();
});