/*

Project:    Input Placeholder Text
Title:      Automatic population of form fields with contents of title attributes
Author      Jon Gibbins (aka dotjay)
Created:    13 Aug 2005
Modified:   26 Oct 2009



Notes:

Add the following classes to text inputs or textareas to get the 
desired behaviour:

auto-select
    Will pre-populate the input with the title attribute and select the
    text when it receives focus.

auto-clear
    Will pre-populate the input with the title attribute and clear the 
    text when it receives focus. Note: if auto-select and auto-clear 
    are set, auto-select takes precedence.

populate
    Will just populate the input with the title attribute.

NB: A class name of "placeholder" is set on form inputs that have 
placeholder text in them. This allows you to style the inputs 
differently when there is user input versus placeholder text, e.g.
input.placeholder,
textarea.placeholder{
color: #777;
}



Potential additions:

Add in handling of default text if an initial value is detected (line 
60, line 93, etc) using something like:
if (!el.defaultValue) continue;
el.onfocus = function() {
    if (this.value == this.defaultValue) this.value = "";
}
el.onblur = function() {
    if (this.value == "") this.value = this.defaultValue;
}


*/

function hasClass(el,cls) {
    return el.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(el,cls) {
    if (!this.hasClass(el,cls)) el.className += " "+cls;
}
function removeClass(el,cls) {
    if (hasClass(el,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        el.className = el.className.replace(reg,' ');
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function initFormPlaceholders() {

    if (!document.getElementsByTagName) return true;

    ourForms = document.getElementsByTagName('form');

    // go through each form
    var numForms = ourForms.length;
    for (var i=0;i<numForms;i++) {

        // go through each form element
        var numFormElements = ourForms[i].elements.length;
        for (var j=0;j<numFormElements;j++) {

            var el = ourForms[i].elements[j];

            // ignore submit buttons
            if (el.type == "submit") continue;

            // if we got a text type input or textarea
            if ((el.type == "text") || (el.type == "textarea")) {
                // only populate if we want it to
                // note: might want title attribute but no pre-population of inputs
                var ourClassName = el.className;
                if (ourClassName.match('auto-select') || ourClassName.match('auto-clear') || ourClassName.match('populate')) {
                    // only populate if empty
                    if (el.value == '') {
                        addClass(el, "placeholder");
                        el.value = el.title;
                    }
                }

                // add auto select if class contains auto-select
                // note: else if below so auto-select takes precedence (assuming select is better than clear)
                if (el.className.match('auto-select')) {
                    el.onfocus = function () {
                        if (this.value == this.title) {
                            removeClass(this, "placeholder");
                            this.select();
                        }
                    }
                    if (el.captureEvents) el.captureEvents(Event.FOCUS);

                    el.onblur = function () {
                        if (this.value == '') {
                            this.value = this.title;
                        }
                        if (this.value == this.title) {
                            addClass(this, "placeholder");
                        }
                    }
                    if (el.captureEvents) el.captureEvents(Event.BLUR);
                }

                // add auto clear if class contains auto-clear
                else if (el.className.match('auto-clear')) {
                    el.onfocus = function () {
                        if (this.value == this.title) {
                            removeClass(this, "placeholder");
                            this.value = '';
                        }
                    }
                    if (el.captureEvents) el.captureEvents(Event.FOCUS);

                    el.onblur = function () {
                        if (this.value == '') {
                            this.value = this.title;
                        }
                        if (this.value == this.title) {
                            addClass(this, "placeholder");
                        }
                    }
                    if (el.captureEvents) el.captureEvents(Event.BLUR);
                }
            }

        }

    }

}

addLoadEvent(initFormPlaceholders);