/**
* jQuery Ajax Tooltip Plugin
* Version: 1.0 - 11/27/2011
* Author: Mohammad Rambod  M.Rambod[at]yahoo[dot]com
**/


(function ($) {
    $.fn.AjaxTooltip = function (settings) {
        var config = {
            hideDelay: 500,
            topMargin: 0,
            leftMargin: 0,
            dir: 'ltr',
            contentWidth: '200px',
            contentHeight: 'auto',
            loaderImage: ''
        };
        if (settings) { $.extend(config, settings); }

        var currentURL;
        var hideTimer = null;

        var container = $('<div id="AjaxTooltipContainer">'
      + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" >'
      + '<tr>'
      + '   <td class="topLeft"></td>'
      + '   <td class="top"></td>'
      + '   <td class="topRight"></td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="left">&nbsp;</td>'
      + '   <td><div id="AjaxTooltipContent"></div></td>'
      + '   <td class="right">&nbsp;</td>'
      + '</tr>'
      + '<tr>'
      + '   <td class="bottomLeft">&nbsp;</td>'
      + '   <td class="bottom">&nbsp;</td>'
      + '   <td class="bottomRight"></td>'
      + '</tr>'
      + '</table>'
      + '</div>');
        $(container).width(config.contentWidth).height(config.contentHeight);
        $('body').append(container);
        $('#AjaxTooltipContent').attr('dir', config.dir);

        return this.each(function () {

            $(this).mouseenter(function () {
                // format of 'rel' tag: pageid,personguid  
                $(container).hide();
                var url = $(this).attr('rel')


                // If no guid in url rel tag, don't popup blank  
                if (url == '')
                    return;

                if (hideTimer)
                    clearTimeout(hideTimer);

                var pos = $(this).offset();
                var width = $(this).width();
                var height = $(this).height();
                if (config.dir == 'ltr') {
                    container.css({
                        left: pos.left + config.leftMargin + 'px',
                        top: pos.top + height + config.topMargin - 5 + 'px'
                    });
                }
                else if (config.dir == 'rtl') {
                    container.css({
                        left: pos.left - config.leftMargin + width - $(container).width() + 'px',
                        top: pos.top + height + config.topMargin - 5 + 'px'
                    });
                }


                if (container.attr('rel') != url) {
                    var imageLoader = 'url(' + config.loaderImage + ')';
                    $('#AjaxTooltipContent').html('&nbsp;').css('background-image','url(' + config.loaderImage + ')');
                    
                    $(container).attr('rel', url);
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function (data) {
                            if ($(container).attr('rel') == url) {
                                $('#AjaxTooltipContent').css('background-image', '');
                                
                                // Verify that we're pointed to a page that returned the expected results.  
                                if (data.indexOf('AjaxTooltipContent') < 0) {

                                    $('#AjaxTooltipContent').html('<span >Error!</span>');
                                }
                                else {
                                    var text = $(data).find('#AjaxTooltipContent').html();

                                    $('#AjaxTooltipContent').html(text);

                                }
                            } else {

                            }

                        }
                    });
                    $(container).slideDown('fast');
                } else {
                    $(container).show();
                }



            });


            $(this).mouseleave(function () {
                Hide(true);
            });

            // Allow mouse over of details without hiding details  
            $('#AjaxTooltipContainer').mouseover(function () {
                if (hideTimer)
                    clearTimeout(hideTimer);
            });

            // Hide after mouseout  
            $('#AjaxTooltipContainer').mouseleave(function () {
                Hide(true);
            });

            function Hide(animate) {
                if (hideTimer)
                    clearTimeout(hideTimer);
                hideTimer = setTimeout(function () {
                    //container.css('display', 'none');
                    if (animate) {
                        $(container).slideUp();
                    } else {
                        $(container).hide();

                    }

                }, config.hideDelay);
            }

        });
    };
})(jQuery);