(function ($) {

    $.fn.watermark = function (options) {

        var defaults = {};

        var options = $.extend(defaults, options);

        return this.each(function () {

            var $elm = $(this);

            if ($elm.is("input[type=text]") || $elm.is("textarea")) {

                if ($elm.val().trim() == "" || $elm.val().trim() == $elm.attr("title"))
                    $elm.val($elm.attr("title")).addClass("watermarked");
                else
                    $elm.removeClass("watermarked");

                $elm.focusin(function (evt) {

                    $elm.val() == $elm.attr("title") ? $elm.val("").removeClass("watermarked") : null;

                }).focusout(function (evt) {

                    $elm.val().trim() == "" ? $elm.val($elm.attr("title")).addClass("watermarked") : $elm.val($elm.val().trim());

                });

            }

        });

    };

    $.fn.fancify = function (options) {

        var defaults = {
            width: 135,
            height: 29,
            watermark: true
        };

        var options = $.extend(defaults, options);

        return this.each(function () {

            var $elm = $(this);

            var $container;

            var cssClass;

            var attachContainer = function ($elm, $container, $elmHolder) {

                $elm.after($container);

                if ($elmHolder)
                    $elmHolder.append($elm);
                else
                    $container.append($elm);

            };

            if ($elm.is(":text")) {

                cssClass = "textbox";
                $container = $("<div class='" + cssClass + "'><div class='cleft'/><div class='cright'/><div class='cback'/></div>");

                attachContainer($elm, $container);

                var width = $elm.width();
                $container.width(width);

                $elm.width($container.outerWidth() + ($elm.width() - $elm.outerWidth(true)));

                if (options.watermark)
                    $elm.watermark();

            } else if ($elm.is("textarea")) {

                cssClass = "textarea";

                $container = $("<div class='" + cssClass + "'><div class='inner'><div class='ctop'/><div class='cleft'/><div class='cright'/><div class='cbottom'/><div class='cback'/></div></div>");

                attachContainer($elm, $container, $container.children(".inner"));

                var width = $elm.width();

                var offset = $container.outerWidth() - $container.width();

                $container.width(width - offset);

                $elm.width($elm.width() - offset);

                if (options.watermark)
                    $elm.watermark();

            } else if ($elm.is("select")) {

                cssClass = "select";

                $container = $("<div class='" + cssClass + "'><div class='cleft'/><div class='cright'/><div class='selected'/></div>");

                attachContainer($elm, $container);

                $container.children(".selected").text($elm.children(":selected").text());

                $elm.change(function (evt) {

                    $container.children(".selected").text($elm.children(":selected").text());

                });

                $elm.css("opacity", 0);

                var width = $elm.width();
                $container.width(width);

                if (options.watermark)
                    $elm.watermark();

            } else if ($elm.is(":checkbox")) {

                cssClass = "checkbox";

                $container = $("<div class='" + cssClass + "'><div class='cbox'/></div>");

                attachContainer($elm, $container);

                if ($elm.attr("checked"))
                    $container.addClass("checkbox-checked");

                $container.click(function () {

                    if ($elm.is(":checked")) {

                        $container.removeClass("checkbox-checked");
                        $elm.attr("checked", null);

                    } else {

                        $container.addClass("checkbox-checked");
                        $elm.attr("checked", "checked");

                    }

                });

                $elm.change(function () {

                    if ($elm.is(":checked")) {

                        $container.removeClass("checkbox-checked");
                        $elm.attr("checked", null);

                    } else {

                        $container.addClass("checkbox-checked");
                        $elm.attr("checked", "checked");

                    }

                });

            } else if ($elm.is(":radio")) {

                cssClass = "radiobutton";

                $container = $("<div class='" + cssClass + "'><div class='cbutton'/></div>");

                attachContainer($elm, $container);

                if ($elm.is(":checked"))
                    $container.addClass("radiobutton-checked");

                $container.click(function () {

                    if (!$elm.is(":checked")) {

                        $container.addClass("radiobutton-checked");
                        $elm.attr("checked", "checked");
                        $elm.change();

                    }

                });

                $elm.change(function () {

                    if (!$elm.is(":checked")) {

                        $container.removeClass("radiobutton-checked");
                        $elm.attr("checked", null);

                    } else {

                        $container.addClass("radiobutton-checked");
                        $elm.attr("checked", "checked");

                        $(":radio[name=" + $elm.attr("name") + "]:not(:checked)").change();

                    }

                });

            }

            if ($container !== undefined) {

                $container.focusin(function () { $container.addClass(cssClass + "-active"); }).
                    focusout(function () { $container.removeClass(cssClass + "-active"); });

            }

        });

    };

})(jQuery);

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, "");
};