/*******************************************************************
 * To use simply set title attribute of relevant input elements and 
 * call jQuery("input").initFieldDefaults();
 *
 * Example css for default element
 *  .field_default {
 *      position:absolute;
 *      top:0;
 *      left:0;
 *      color:#333;
 *  }
 *******************************************************************/

/* 
 * Create Default Element & Text 
 */
jQuery.fn.createFieldDefault = function(i) {
    if(jQuery(this).attr("value")==""){
        var defaultId = jQuery(this).attr("name") + "_default";
        
        /* 
         * build default element 
         */
        jQuery(this).after("<div class=\"field_default\" id=\"" + defaultId +"\">" + jQuery(this).attr("title") + "</div>");
        jQuery(defaultId).css("z-index","1000"); // make sure it displays above the field
        
        /* 
         * remove default on field focus 
         */
        jQuery(this).bind('focus',function(){
            jQuery("#" + defaultId).remove();
        });
        
        /* 
         * remove default and trigger field focus when default clicked 
         */
        jQuery("#" + defaultId).bind('click',function(i){
            jQuery(this).prev("input").focus();
            jQuery(this).remove();
        });
    }
}

/* 
 * Initialize field defaults
 */
jQuery.fn.initFieldDefaults = function(i) {

    /* 
     * loop through each input field on the page 
     */
    jQuery(this).each(function(i){
        var typeAttr = jQuery(this).attr("type");
        
        /* 
         * if it's a text field and it has a title pass to createFieldDefault() 
         */
        if((typeAttr=="text" | typeAttr=="password") & jQuery(this).attr("title")!="") {
            jQuery(this).bind('blur',function (){
                jQuery(this).createFieldDefault();
            });
            jQuery(this).createFieldDefault();
        }
    });
};