jQuery.fn.AddHint = function(options) {
    var settings = GetSettings(options);
    //EnsureHint(this[0].id);

    switch (settings.mode) {
        case 'focus':
            $(this).focus(function() {
                $(this).ShowHint(settings);
            });
            $(this).blur(function() {
                $(this).HideHint();
            });
            break;
        case 'hover':
            $(this).mouseenter(function() {
                $(this).ShowHint(settings);
            })
                 .mouseleave(function() {
                     $(this).HideHint();
                 });
            break;
    }
};

function GetSettings(options) {
    return jQuery.extend({
        text: "[Text not defined]",
        mode: "focus",
        onshow: function(element) {
            return this.text;
        }
    }, options);
}

jQuery.fn.ShowHint = function ShowHint(options) {
    var settings = GetSettings(options);

    var id = this[0].id;
    var boxcontentname = "#boxcontent" + id;
    var hintboxname = "#hintbox" + id;

    EnsureHint(id);

    var text = settings.onshow($(this));

    var boxcontent = $(boxcontentname);
    if (text != null) {
        boxcontent.html(text);
    }

    /*
    var positionAnimateIn = $(this).offset();
    positionAnimateIn.top = positionAnimateIn.top - $(hintboxname).height() - 3;
    positionAnimateIn.left = positionAnimateIn.left - 8;
    */

    var position = $(this).offset();
    position.top = position.top - $(hintboxname).height() - 3;
    position.left = position.left - 8;
    var positiontop = $(this).offset().top - $(hintboxname).height() - 1;

    var hintbox = $(hintboxname);
    $(hintbox).css(position);
    $(hintbox).animate({
        opacity: 1
    }, 100, null);
};

jQuery.fn.HideHint = function HideHint() {
    var id = this[0].id;
    var hintboxname = "#hintbox" + id;
    var hintbox = $(hintboxname);
    $("#hintbox" + id).animate({
        opacity: 0
    }, 200, null);
};

var hintImgDir = "img/Hints/";

function EnsureHint(id) {
    var hintboxname = "#hintbox" + id;
    if ($(hintboxname).length == 0) {
        var template = thehintboxtext.replace(/theid/g, id);
//        template = template.replace("\{1\}", id);
        template = template.replace(/theurl/g, hintImgDir);
        $(document.body).append(template);
    }
}




var thehintboxtext = "";
thehintboxtext += "<div id=\"hintboxtheid\" style=\"LEFT:10px; POSITION:absolute; TOP:10px; z-index: 10; opacity: 0;\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
thehintboxtext += "				<tr>";
thehintboxtext += "					<td rowspan=\"2\" colspan=\"2\"><img src=\"theurltopleft.gif\"></td>";
thehintboxtext += "					<td bgcolor=\"#000000\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "					<td rowspan=\"2\" colspan=\"3\"><img src=\"theurltopright.gif\"></td>";
thehintboxtext += "				</tr>";
thehintboxtext += "				<tr>";
thehintboxtext += "					<td bgcolor=\"#FFFFFF\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "				</tr>";
thehintboxtext += "				<tr>";
thehintboxtext += "					<td bgcolor=\"#000000\" style=\"width: 1px\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "					<td bgcolor=\"#FFFFFF\" style=\"width: 1px\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "					<td bgcolor=\"#FFFFFF\"><table cellpadding=\"4\">";
thehintboxtext += "									<tr>";
thehintboxtext += "										<td style=\"font-family:verdana; font-size:10px;\"><div id=\"boxcontenttheid\"></div></td>";
thehintboxtext += "									</tr>";
thehintboxtext += "								</table></td>";
thehintboxtext += "					<td bgcolor=\"#FFFFFF\" style=\"width: 1px\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "					<td bgcolor=\"#000000\" style=\"width: 1px\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "					<td bgcolor=\"#959481\" style=\"width: 1px\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "				</tr>";
thehintboxtext += "				<tr><td colspan=\"6\">";
thehintboxtext += "					<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" ID=\"Table9\">";
thehintboxtext += "						<tr>";
thehintboxtext += "						<td rowspan=\"3\" width=\"2\"><img src=\"theurlbottomleft.gif\"></td>";
thehintboxtext += "						<td colspan=\"3\" bgcolor=\"#FFFFFF\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "						<td rowspan=\"3\" width=\"3\"><img src=\"theurlbottomright.gif\"></td>";
thehintboxtext += "						</tr>";
thehintboxtext += "						<tr>";
thehintboxtext += "						<td bgcolor=\"#000000\" width=\"11\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "						<td bgcolor=\"#000000\" rowspan=\"2\" width=\"12\"><img src=\"theurlarrow1.gif\"/></td>";
thehintboxtext += "						<td bgcolor=\"#000000\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "						</tr>";
thehintboxtext += "						<tr>";
thehintboxtext += "						<td bgcolor=\"#959481\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "						<td bgcolor=\"#959481\"><img src=\"theurldot_trans.gif\" width=\"1\" height=\"1\" /></td>";
thehintboxtext += "						</tr>";
thehintboxtext += "						<tr>";
thehintboxtext += "						<td colspan=\"2\"></td>";
thehintboxtext += "						<td><img src=\"theurlarrow2.gif\"></td>";
thehintboxtext += "						<td colspan=\"2\"></td>";
thehintboxtext += "						</tr>";
thehintboxtext += "					</table>";
thehintboxtext += "				</td>";
thehintboxtext += "				</tr>";
thehintboxtext += "				</table></div>";