// JavaScript Document
// This javascript checks any form input with the class 'hint'. If the input has no text in it at load or on blur, the script moves a background sprite to show a hint for the user.
// If there is text, it leaves the sprite in its default background position.
// It requires jQuery to work, and also requires that the background sprite be applied to the parent div of the input (this is how most or all of our inputs are structured).
// David Rhoden 100805

$(document).ready(function(){  //on page load, check whether the inputs with the class of "hint" contain text
	var formInput = $(".hint");
    if (formInput != null){ // check that there's at least one input before proceeding, or you get a fatal error (when user is logged in, some inputs will be absent)
        formInput.each( function() { 
            if ($(this).val().length === 0) { 
                $(this).parent().css("background-position", "left bottom"); //if no text is present, show the hint state of the sprite
            }
        });
    
	$(formInput).focus(function(){
        $(this).parent().css("background-position", "left top"); //when user focuses, always show the non-hint state
     });
     
    $(formInput).blur(function() { //when focus leaves, test whether there is text in the input and set the sprite position accordingly
    if ($(this).val().length === 0) {       
            $(this).parent().css("background-position", "left bottom");
    } else {
            $(this).parent().css("background-position", "left top");
    }
    });
   }
});