﻿jQuery(function() {
    // 1. select all form inputs and textareas
    jQuery('form input, form select, form textarea')
    
    // 2. add a focus handler
    .focus(function() {
        // a. cache current element
        var $this = jQuery(this);
        
        // b. set default value if it hasn't been set
        if (!$this.data('default')) {
            $this.data('default', $this.val())
        }
        
        // c. blank out the field and change color to black
        //      if the user hasn't entered text in it
        if ($this.val() == $this.data('default')) {
            $this.val('')
            .css('color', '#000');
        }
    })
    
    // 3. add a blur handler
    .blur(function() {
        // a. cache current element
        var $this = jQuery(this);
        
        // b. return field to default value and change color to gray
        //      if the field is empty
        if ($this.val() == '') {
            $this.val($this.data('default'))            
            .css('color', '#666');
        }
    })
    
    // 4. change initial text color to gray
    .css('color', '#666')
});

