(function($) {

    var body = $('body'),
        tooltipClass = '.mfTooltip';

    function renderTooltip( element, event ) {
        var tooltipMsg = $(element).attr('tooltip'),
            tooltipShowDelay = $(element).attr('tooltipShowDelay') ? $(element).attr('tooltipShowDelay') : 0,
            toolTipPosition = $(element).attr('toolTipPosition') ? $(element).attr('toolTipPosition') : 'bottom';

        if( tooltipMsg ) {

            //remove all tooltips
            $( tooltipClass ).remove();

            var tooltipElement = $('<span class="'+tooltipClass.replace('.', '')+' '+toolTipPosition+'" style="top: '+event.pageY+'px; left:'+event.pageX+'px;">'+tooltipMsg+'</span>');

            //add new tooltip
            $( element ).append(tooltipElement);

            // console.log(event);

            var tooltipWidth    = $(tooltipElement).width(),
                tooltipHeight   = $(tooltipElement).height();

            switch(toolTipPosition) {
                case "bottom":
                    $(tooltipElement).css('top', (event.pageY + 15) + 'px');
                    $(tooltipElement).css('left', (event.pageX - tooltipWidth/2) + 'px');
                    break;
                case "top":
                    $(tooltipElement).css('top', (event.pageY - 15 - tooltipHeight) + 'px');
                    $(tooltipElement).css('left', (event.pageX - tooltipWidth/2) + 'px');
                    break;
                case "left":
                    $(tooltipElement).css('top', (event.pageY - tooltipHeight/2) + 'px');
                    $(tooltipElement).css('left', (event.pageX - tooltipWidth - 15) + 'px');
                    break;
                case "right":
                    $(tooltipElement).css('top', (event.pageY - tooltipHeight/2) + 'px');
                    $(tooltipElement).css('left', (event.pageX + 15) + 'px');
                    break;
            }


            //show it
            // $(element).css('position', 'relative');
            setTimeout(function(){
                $( tooltipClass ).fadeIn();
            }, tooltipShowDelay);
        }
    }


    function removeToolTip( element ) {
        var tooltipHideDelay = $(element).attr('tooltipHideDelay') ? $(element).attr('tooltipHideDelay') : 100;

        setTimeout(function(){
            $( tooltipClass ).fadeOut(function() {
                $(this).remove();
            });
        }, tooltipHideDelay);
    }


    body.on('mousemoveend', '[tooltip]', function(e){
        if ( !$(this).hasClass( tooltipClass.replace('.', '') ) && !$(this).children(tooltipClass).length ) {
            renderTooltip( $(this), e );
        }
    });


    body.on('mouseout', '[tooltip]', function(event){
        var e = event.toElement || event.relatedTarget;
        if (!mfElement.isDescendant(this, e)) {
            removeToolTip( $(this) );
        }
    });
})(jQuery);