/*
            Author  :   Anand Kumar Sharma.
            Date    :   23-10-2009.
            Purpose :   Show context help and tooltip.
            Usage   :   Add title attribute to any html control with text to show in tooltip and
                        add cust attribute with either focus/mouseover values to place tooltip on 
                        onfocus or onmouseover events.
                        e.g.For normal text tip
                        <input cust="focus" id="txtPhone" title="text:Enter Mobile number whome message to be send." name="sms" type="text"  />
                        e.g.For ajax tip
                        <select cust="mouseover" title="ajax:handlerequestnew.aspx" id="selnumber" name="sms"><option>9910519691</option><option>9873122669</option><option>9873122668</option><option>9873122667</option></select>
*/



$(function()
       {
            $('*[cust=mouseover]').live("mouseover" ,function(e)
                {
                    $(this).hovertip({},e);
                });
                
            $('*[cust=focus]').live("click" ,function(e)
                {
                    $(this).hovertip({},e);
                });
//            $('*[cust=focus]').live("keydown" ,function(e)
//                {
//                    $(this).hovertip({},e);
//                });
       });
       
       
       
;(function($) {
    function Hovertip(elem, conf, e) 
    {
        $target = $(elem);
        // Create tooltip
        $('.' + conf.className).each(function()
        {
                $(this).remove();
        });
        
        var tooltip = $('<div ></div>').addClass(conf.className);
		var tooltip_mid = $('<div></div>').addClass(conf.className + 'Mid');
		var tooltip_btm = $('<div></div>').addClass(conf.className + 'Btm');
		tooltip.append($(tooltip_mid));
		tooltip.append($(tooltip_btm));
        var tiptitle = elem.attr('rel');
        var tiptext = '';
        if(tiptitle.search(/text/i) != -1)
        {
            tiptext = tiptitle.split(':')[1];
            tooltip_mid.html(tiptext);
                    tooltip.insertAfter($('form'));
            conf.show(tooltip);
        }
        else if(tiptitle.search(/ajax/i) != -1)
        {
            tiptext = tiptitle.split(':')[1];
            $.ajax(
            {
                type: "GET",
                url: tiptext,  
                async: true,    
                cache: false,
                success: function(data)
                {  
                    var dataFinal = data.split('~');
                    if(dataFinal.length > 1)
                    {
                        if(dataFinal[0] == 'success')
                        {
                            tiptext = dataFinal[1];
                            tooltip_mid.html(tiptext);
                                    tooltip.insertAfter($('form'));
                            conf.show(tooltip);
                        }
                        else
                        {
                            tiptext = dataFinal[1];
                            tooltip_mid.html(tiptext);
                                        tooltip.insertAfter($('form'));
                            conf.show(tooltip);
                        }
                    }
                    
                }
            });
        }
        
        
            
        
        

        // Remove the browser tooltip
        //elem.removeAttr('title');

        function setPosition(posX, posY) {
            tooltip.css({ left: posX, top: posY });
        }

        function updatePosition(event) {
            var tooltipWidth = tooltip.outerWidth();
            var tooltipHeight = tooltip.outerHeight();
            var $window = $(window);
            var windowWidth = $window.width() + $window.scrollLeft();
            var windowHeight = $window.height() + $window.scrollTop();
            var posX = $target[0].offsetLeft + conf.offset[0] + $target[0].offsetParent.offsetLeft;
            var posY = $target[0].offsetTop + $target[0].offsetParent.offsetTop - tooltipHeight;
            if (posX + tooltipWidth > windowWidth) {
                // Move left
                posX = windowWidth - tooltipWidth;
            }
            if (posY + tooltipHeight > windowHeight) {
                // Move tooltip to above cursor
                posY = event.pageY - conf.offset[1] - tooltipHeight;
            }
            setPosition(posX, posY);
        }
        updatePosition(e);
        conf.show(tooltip);
        if(elem.attr('cust').search(/mouseover/i) != -1)
        {
            $target.bind("mouseout",
                // Show
                function(e) 
                {
                    //$target.attr('title',tooltip.html());
                    conf.hide(tooltip);
                }
            );
        }
        if(elem.attr('cust').search(/focus/i) != -1)
        {
            $target.bind("blur",
                // Show
                function(e) 
                {
                    //$target.attr('title',tooltip.html());
                    conf.hide(tooltip);
                }
            );
        }
    }

    $.fn.hovertip = function(conf,e)
    {
        var defaultConf = {
            offset: [10, 10],
            className: 'tip',
            show: function(tooltip) {
                tooltip.fadeIn(300);
            },
            hide: function(tooltip) 
            {
                tooltip.fadeOut(300);
                tooltip.remove();
            }
        };
        $.extend(defaultConf, conf);
        var el = new Hovertip($(this), defaultConf, e);
        $(this).data("hovertip", el);
       
    }
})(jQuery);