//include common.js
//document.write("<script src=\"" + "common.js" + "\" type=\"text/javascript\"></script>");

;(function ($) {
    $.fn.hintableSelect = function (/*{color: "", text: ""}*/hintObj) {
        var $select = this.data({
            hintColor: hintObj.color ? hintObj.color : this.css("color"),
            hintText: hintObj.text
        });

        // private member
        var hintValue = "_hint";

        $.extend($select, {
            appendHint: function (/* String */hintText) {
                hintText = hintText || $select.data("hintText");
                return $select
					.prepend($("<option></option>")
						.attr({
						    disabled: "disabled",
						    selected: "selected",
						    value: hintValue
						})
						.text(hintText)
					).attr("selectedIndex", 0);
            },

            selectedText: function (/* String */text) {
                if (text) {
                    // TODO: set
                }
                else {
                    // get
                    return $("option", $select).filter(function () { return this.value == $select.val() }).text();
                }
            },

            isChanged: function () {
                return $select.attr("selectedIndex") != 0
					&& $select.attr("selectedIndex") != -1
					&& $select.val() != [];
            }
        });

        return $select;
    };

    if ($.fn.val_old === undefined) {
        $.fn.val_old = $.fn.val;
        $.fn.val = 
        function (value) {
            if (value === undefined) {
                var $e = this.first();
                if ($e.data("hint")) {
                    return $.fn.val_old.apply($e) == $e.data("hint").text
				            && $e.css("color") == $e.data("hint").color ? "" : $.fn.val_old.apply($e);
                }
                else {
                    return $.fn.val_old.apply($e);
                }
            }
            return this.each(function (i, e) {
                var $e = $(e);
                var _value = value;
                if ($e.data("isHintable")) { 
                    if (value === "") {
                        _value = $e.data("hint").text;
                        $e.css("color", $e.data("hint").color);
                    }
                    else {
                        $e.css("color", $e.data("initColor"));
                    }
                }
                return $.fn.val_old.call($e, _value);                
            });
        }
    }

    $.fn.hintableInput = function (/*{color: "", text: ""}*/hintObj) {
        return this.each(function (i, e) {
            var $input = this.css ? this : $(this);
            var hint = hintObj;
            if (hintObj === undefined) {
                hint = {
                    "color": $input.data("color") ? $input.data("color") : "gray",
                    "text": $input.data("hint") ? $input.data("hint") : ""
                }
            }
            $("<span>", { display: "none" }).css("color", hint.color).insertAfter(this);
            hint.color = $input.next("span").css("color");
            $input.next("span").remove();

            $input
                .data("isHintable", true)
			    .data("initColor", $input.css("color"))
			    .data("hint", hint);

            $input.css("color", hint.color).val_old(hint.text)
		    .focus(function () {
		        var $this = $(this);
		        if ($this.css("color") == hint.color && $this.val_old() == hint.text) {
		            $this.css("color", $this.data("initColor")).val_old("");
		        }
		    })
		    .blur(function () {
		        var $this = $(this);
		        if ($this.val_old() == "") {
		            $this.css("color", hint.color).val_old(hint.text);
		        }
		    });
        });        
    };

    $.fn.hint = function (hintObj, delay) {
        var $div = this.data(hintObj);
        var defaultDelay = delay || 2000;

        $div.visible = false;

        $div.show = function (key) {
            if (key) {
                var text = $div.data(key) ? $div.data(key) : key;
                $.fn.show.apply($div.text(text));
                $div.visible = true;
                setTimeout(function () { $div.fadeOut('fast') }, defaultDelay);
            }
            else {
                $div.visible = true;
                $.fn.show.apply($div);
            }
        }

        $div.hide = function () {
            $div.fadeOut('fast');
            $div.visible = false;
        }
        return $div;
    };
})(jQuery);