(function($, window, undefined) {
    // create module via closure;

    // Hint
    // Ajax driven, tooptip like plugin;
    //
    // Requires;
    //      jquery.tmpl.js
    // XB tested;
    //      Chrome, FF4, IE6-9, Safari 5 (Mac)      

    // create template;
    $.template("details",
        "<ul><li class='horseHelperTitle'><span>${Name}</span></li><div class='left'><li><span>Age: ${Age} ${Hem}</span></li><li><span>Colour: ${Colour}</span></li><li><span>Gender: ${Gender}</span></li></div><div class='right'><li><span>Sire: ${Sire}</span></li><li><span>Dam: ${Dam}</span></li>{{if Breeder}}<li><span>Breeder: ${Breeder}</span></li>{{/if}}{{if Trainer}}<li><span>Trainer: ${Trainer}</span></li>{{/if}}</div></ul>");

    // horses data model, 
    // abstracted from plugin;
    var horses = {};
    horses.getHorseById = function(id, callback, scope) {
        var horse = horses[id];
        // check if cached before request;
        if (horse) {
            callback.call(scope, horse);
        } else {
            if (horses.dfd) {
                horses.dfd.abort();
            }
            horses.dfd = $.ajax({
                type: "POST",
                url: "webservices/horsehelper.svc/gethorsedetail",
                datatype: "json",
                data: $.toJSON({ horseId: id, lightWeight: true }),
                contentType: "application/json; charset=utf-8"
            });
            horses.dfd.done(function(horse) {
                // cache request;
                horses[id] = horse;
                callback.call(scope, horse);
            });
        }
    };

    // declare jQuery plugin;
    $.fn.hint = function() {
        var doc = $(document),
            active = false;

        // private functions;
        function render(horse) {
            $.tmpl("details", horse).appendTo(this.empty());
            this.removeClass('inactive').addClass('active');
        };
        function enter(e) {
            if (!active) {
                var id = e.target.href.match(/id=(\d+)$/)[1];
                active = true;
                this.css({
                    'top': doc.scrollTop() + e.clientY - 40 + 'px',
                    'left': e.clientX + 10 + 'px'
                });
                horses.getHorseById(id, render, this);
            }
        };
        function leave(e) {
            active = false;
            this.removeClass('active').addClass('inactive');
        };

        // bind event handlers;
        var that = this;
        $('#gdContent a').each(function() {
            if (this.href.indexOf('HorseDetail.aspx') != -1) {
                $(this)
                    .mouseenter($.proxy(enter, that))
                    .mouseleave($.proxy(leave, that));
            }
        });

        // return current collection for chaining;
        return this.addClass("hint plugin inactive");
    }

    // create module via closure;
})(jQuery, window, undefined);

$(function() {
    // wait for DOM ready and instantiate plugin;
    $('<div id="hint"></div>').appendTo('body').hint();
});