(function($) {
    $.fn.popup = function(options) {
        var defaults = {
            showDealy: 800,
            hideDelay: 500,
            Url: '/Ajax/ProductDetailsAJAX.aspx'
        };

        if ($.browser.msie && $.browser.version == "6.0")
            return;

        var opts = $.extend(defaults, options);
        var hideTimer = null;
        var showTimer = null;

        // One instance that's reused to show info for the current person
        var container = $('<div id="PopupContainer" >'
              + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="PopupPopup">'
              + '<tr>'
              + '   <td class="corner topLeft"></td>'
              + '   <td class="ptop"></td>'
              + '   <td class="corner topRight"></td>'
              + '</tr>'
              + '<tr>'
              + '   <td class="pleft">&nbsp;</td>'
              + '   <td><span id="PopupContent"></span></td>'
              + '   <td class="pright">&nbsp;</td>'
              + '</tr>'
              + '<tr>'
              + '   <td class="corner bottomLeft">&nbsp;</td>'
              + '   <td class="pbottom">&nbsp;</td>'
              + '   <td class="corner bottomRight"></td>'
              + '</tr>'
              + '</table>'
              + '</div>');

        $('body').append(container);

        $(this).live('mouseover', function() {
            container.css('display', 'none');
            //container.fadeOut("slow");
            $('#PopupContent').html('');

            var ProdId = $(this).attr('rel');

            if (ProdId == '')
                return;

            if (hideTimer)
                clearTimeout(hideTimer);
            if (showTimer)
                clearTimeout(showTimer);

            var pos = $(this).offset();
            var width = $(this).width();

            var containerWidth = 340;
            var containerHeight = 360;
            var pleft = pos.left + containerWidth + width;
            var ptop = pos.top;

            if (pleft >= document.body.offsetWidth)
                pleft = pos.left - containerWidth;
            else
                pleft = pos.left + width;

            //            alert(pos.top);
            //            if (ptop >= document.body.offsetHeight)
            //                ptop = document.body.offsetHeight - containerHeight;
            //            else
            //                ptop = pos.top;

            container.css({
                left: pleft + 'px',
                top: ptop + 'px'
            });

            showTimer = setTimeout(function() {
                $.ajax({
                    type: 'GET',
                    url: opts.Url,
                    data: 'pid=' + ProdId,
                    success: function(data) {
                        // Verify that we're pointed to a page that returned the expected results.
                        if (data.length < 0) {
                            //$('#PopupContent').html('<span >Product ' + ProdId + ' does not find.</span>');
                        }
                        else {
                            $('#PopupContent').html(data);
                            //container.css('display', 'block');
                            container.fadeIn("slow");
                        }
                    }
                });
            }, opts.showDealy);
        });

        $(this).live('mouseout', function() {
            if (hideTimer)
                clearTimeout(hideTimer);
            if (showTimer)
                clearTimeout(showTimer);

            hideTimer = setTimeout(function() {
                //container.css('display', 'none');
                container.fadeOut("slow");
            }, opts.hideDelay);
        });

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

        // Hide after mouseout
        $('#PopupContainer').mouseout(function() {
            if (hideTimer)
                clearTimeout(hideTimer);
            if (showTimer)
                clearTimeout(showTimer);
            hideTimer = setTimeout(function() {
                //container.css('display', 'none');
                container.fadeOut("slow");
            }, opts.hideDelay);
        });
    }
})(jQuery);