placeholders.js

var placeholders = function () {
	var body = $(document.body),
		inputs = $("label.ui_placeholder").map(function () {
			var label = $(this),
				input = $("#" + label.attr("for"));
				
				if (input.val()) {
					label.hide();
				}
				
				input.data("label", label).addClass("ui_placeheld");
				return input.get(0); // if you don't return the actual DOM node, your result will be double-wrapped and useless.
			});
	
	body.delegate("input.ui_placeheld", "focus", function () {
		$(this).data("label").addClass("focused").animate({
			opacity: 0.5
		}, 200, "easeOutQuad");
	});
	
	body.delegate("input.ui_placeheld", "blur", function () {
		var input = $(this);
		
		if (!input.val()) {
			input.data("label").removeClass("focused").show().animate({
				opacity: 1
			}, 200, "easeOutQuad");				
		}
	});
	
	// if we attach a change handler to document.body via delegate, bad
	// things happen when you click on Cufon-generated VML in IE. Why
	// clicking on VML would trigger the change handler is beyond me,
	// but it's probably part of the delegation code.
	
	// (TODO: write reduction, submit to jQuery or Sizzle)
	
	// see http://www.sitecrafting.com/blog/jquery-cufon-dont-mix/ for
	// roughly equivalent error details. our issue affects every Cufoned
	// element in the page, though.
	inputs.bind("keydown change", function (e) {
		var input = $(this),
			label = input.data("label");
		
		if (label.is(":visible")) {
			label.hide();
		}
	});
};