(function($) {

    $.fn.fancyPlaceholder = function(options) {

        $.fn.fancyPlaceholder.defaults = {
            colors: {
                placeholder: "#666",
                active: "#000",
                inactive: "#333"
            },
            replacePasswords: true
        };

        var o = $.extend(true, {},
        $.fn.fancyPlaceholder.defaults, options);

        return this.each(function() {

            var $this = $(this);

            if (this.nodeName === "INPUT" || this.nodeName === "TEXTAREA") {

                if ($this.attr("type") === "password" && o.replacePasswords) {

                    handlePasswordInput($this);

                } else {

                    $this.focusin(function() {

                        if (this.value == this.defaultValue) {
                            this.value = "";
                        }

                        $(this).css("color", o.colors.active);

                    });

                    $this.focusout(function() {

                        if (this.value == "") {
                            this.value = this.defaultValue;
                            $(this).css("color", o.colors.placeholder);
                        } else {
                            $(this).css("color", o.colors.inactive);
                        }

                    });

                }

            } else {

                $this.children().fancyPlaceholder(options);

            }

        });

    };

    function handlePasswordInput($this) {

        $this.after($("<input/>", {
            type: "text",
            css: {
                color: o.colors.placeholder
            },
            val: $this[0].defaultValue,
            focusin: function() {
                $(this).hide();
                $this.show().focus();
            }
        }));

        $this.val("").hide();

        $this.focusout(function() {

            if (this.value == "") {
                $(this).hide().next().show();
            }

        });

    }

})(jQuery);