/*

 * jQuery AJAX Suggestions

 * Version 1.11 (12/14/2009)

 * @author T.J. Simmons

 *

 * @method:

 * .suggest(options)

 *

 * @arguments:

 *

 ** @options (object) optional

 **     url: '',                    // the url for the AJAX page        

 **     type: '',               // type, in this case, is cst, mid, importer, etc.

 **     tooltip: true,              // boolean, if true we will show a tooltip

 **     image: '',              // the background image for the tooltip

 **     spanBGColor: '#00FFFF',         // background color for the suggestion spans

 **     toolBorder: 'thin white solid',     // border options for the tooltip

 **     toolColor: 'white',         // the font color for tooltip

 **     toolBGColor: 'black',           // background color for tooltip

 **     resBGColor: 'white',            // background color for suggestion results divs

 **     resColor: 'black',          // font color for suggestion results divs

 **     resBorder: "thin black solid",      // border settings for the suggestion results divs

 **     resMarginLeft: '-1px',          // left margin for suggestion results divs

 **     accepted: ''                // accepted classes for the suggestion box, also used in SQL where clause, can be an array

 **

 *

 * @instructions: url MUST be set for this to work, with an appropriate response formed via <span> tags returning. This only works with <input type="text"> elements.

 * @instructions: A defining class must also be set, for use with the 'accepted' property.

 *

 * @example: $(".search").suggest({url: "test.asp", tooltip: false});

 * @description: This example has a suggestion area being created for all elements with a class of search, with the suggestions coming from ajax-search.asp and tooltips off.

 *

 * @more: Defaults can be changed once for an entire page with the following syntax - $.fn.suggest.defaults.(option) = (value), invoked on a page other than this.

 * @example: $.fn.suggest.defaults.url = 'test.asp';

 * @example: $.fn.suggest.defaults.accepted = ['buyer', 'cst', 'mid'];

 *

 * @to do: Add support for moving through suggestions via the up and down arrows.

 * @to do: Add support for the enter key.

 *

 * @history: version 1.10 - vastly improved performance for large number of inputs

*/

​

(function($) {

    $.fn.suggest = function(options) {

        var opts = $.extend({}, $.fn.suggest.defaults, options);

            /******** this is the block of code I'm wondering about ********/

        $("<div id='details'>").appendTo("body").hide();

        var $details = $("#details");

        $(document).click(function(){

            $("#details").hide();

            $(".results").hide();

        });

        $(".suggestion").live("mouseover", function(e){

            $(this).css("backgroundColor", opts.spanBGColor);

            if (opts.tooltip) {

                getData("det", $(this).html(), opts.url);

                $details

                    .css({

                        top: e.pageY + 18,

                        left: e.pageX + 18,

                        backgroundImage: opts.image,

                        border: opts.toolBorder,

                        color: opts.toolColor,

                        backgroundColor: opts.toolBGColor

                    })

                    .show();

            } else {

                $details.hide().html("");

            };

        }).live("mouseout", function(){

            $(this).css("backgroundColor", opts.resBGColor);

            $details.hide().html("");

        }).live("click", function(e){

            var value = $(this).html().replace("<b>", "").replace("</b>", "").replace("<B>", "").replace("</B>", "");

            var id = $(this).attr("id");

            $(this).parent("div").prev("input").focus().val(value).end().next(".hidden").val(id);

            $details.html("");

        });

        /***************************************************************/

        return this.each(function() {

            var $this = $(this);

            $("<div class='results'></div>").insertAfter($this);    // the suggestion box for each input

            /*****/// element specific data

            var def = $.meta ? $.extend({}, opts, $this.data()) : opts;

            var type = def.type ? def.type : $this.attr("class");

            /*****/

​

            for (var i = 0; i < def.accepted.length; i++) {

                if (type == def.accepted[i]) {

                    $this.keyup(function(e){

                        if (e.keyCode != 13) {

                            if ((e.keyCode == 8 || e.keyCode == 27) && $this.val() == '') {

                                $this.next("div").hide().html("").next(".hidden").val("");

                                $details.html("");

                            } else if ($this.val() != '') {

                                var offset = $this.offset();

                                var height = $this.height();

                                var $div = $this.next("div");

                                $details.hide().html("");

                                $div

                                    .css({

                                        top: offset.top + height + 6,

                                        left: offset.left + 1,

                                        backgroundColor: def.resBGColor,

                                        color: def.resColor,

                                        marginLeft: def.resMarginLeft,

                                        border: def.resBorder

                                    })

                                    .show();

                                getData("sugg", $this.val(), def.url, type, $div, $this);

                                $this.next("div").next(".hidden").val("");

                            }

                        }

                    });

                }

            }

        });

    };

​

    /** private functions are in here **/

    function getData(r, q, u, t, d, i) {            // request (sugg, det), query, url, type (cst, mid, importer, etc), div results, input box

        $.ajax({

            async: true,

            cache: false,

            data: {req: r, query: q, type: t},

            dataType: "html",

            error: function(xhr, status, err) {

                if (status == "timeout") {

                    $("#error").html("Request timed out. Please try again.").show();

                } else if (err != undefined) {

                    $("#error").html(err).show();

                } else {

                    $("#error").html(xhr.responseText).show();

                }

            },

            success: function(data) {

                $("#error").hide();

                if (r == "sugg") {

                    makeSugg(data, d, i);

                } else if (r == "det") {

                    makeDet(data);

                }

            },

            type: "GET",

            timeout: 10000,

            url: u

        });

    };

    function makeSugg(data, div, input) {

        var search = input.val();

​

        div.show().html(data);

        makeBold(search, div);

    };

    function makeDet(data) {

        var $details = $("#details");

        $details.html(data);

    };

    function makeBold(str, div) {

        var suggs = $(".suggestion", div);

        var search = str.toUpperCase();

        var found;                          // the position of the match

        var string;                         // the string we're looking in

        var sub1;                           // substring 1

        var mat;                            // mat.length = the length of found (of the match)

​

        for (var i = 0; i < suggs.length; i++) {

            string = $(suggs[i]).html();

            string = string.toUpperCase();

            found = string.search(search);

            mat = string.match(search);

            mat = mat.toString();

            sub1 = string.substring(found, found + mat.length);

            sub1 = sub1.bold();

            string = string.replace(search, sub1);

            $(suggs[i]).html(string);

        }

    };

    /***********************************/

​

    $.fn.suggest.defaults = {

        url: '',                // the url for the AJAX page        

        type: '',               // type, in this case, is cst, mid, importer, etc.

        tooltip: true,              // boolean, if true we will show a tooltip

        image: '',              // the background image for the tooltip

        spanBGColor: '#00FFFF',         // background color for the suggestion spans

        toolBorder: 'thin white solid',     // border options for the tooltip

        toolColor: 'white',         // the font color for tooltip

        toolBGColor: 'black',           // background color for tooltip

        resBGColor: 'white',            // background color for suggestion results divs

        resColor: 'black',          // font color for suggestion results divs

        resBorder: "1px black solid",       // border settings for the suggestion results divs

        resMarginLeft: '-1px',          // left margin for suggestion results divs

        accepted: ''                // accepted classes for the suggestion box, also used in SQL where clause

    };

})(jQuery);