////* Instructions *//////
/*
    1. Make sure this library is referenced on page
    (Recommend adding reference in header/footer snippet so its always referenced)
    2. Have an onload function that calls the two functions
    i.e. (Make sure they are called in the same order as example below)
    $(document).ready(function () {
      AddAbbr();
      tooltip();
    });
    3. In script include an object of the fields with the message you want to show against
    i.e. (Make sure the Object is called 'FieldsToUpdate')
    var FieldsToUpdate = [
        {"<Field CRM Logical Name>":"<Message you want to show>"},
        {"<Field CRM Logical Name>":"<Message you want to show>"},
        {"<Field CRM Logical Name>":"<Message you want to show>"}
    ];
*/

function AddAbbr() {
    for (var i = 0; i < FieldsToUpdate.length; i++) {
        var current = FieldsToUpdate[i];
        for (var fieldname in current) {
            var label = $('#' + fieldname + "_label");
            label.parent().find(".validators").after(' <abbr rel="tooltip" style="margin-left: 5px;" class="spaceout" title="' + current[fieldname] + '"><i class="fa fa-info-circle" aria-hidden="true"></i></abbr>');
        }
    }
}


function tooltip() {
    var targets = $('[rel~=tooltip]'),
        target = false,
        tooltip = false,
        title = false;

    targets.bind('mouseenter', function () {
        target = $(this);
        tip = target.attr('title');
        tooltip = $('<div id="tooltip"></div>');

        if (!tip || tip == '')
            return false;

        target.removeAttr('title');
        tooltip.css('opacity', 0)
            .html(tip)
            .appendTo('body');

        var init_tooltip = function () {
            if ($(window).width() < tooltip.outerWidth() * 1.5)
                tooltip.css('max-width', $(window).width() / 2);
            else
                tooltip.css('max-width', 340);

            var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
                pos_top = target.offset().top - tooltip.outerHeight() - 20;

            if (pos_left < 0) {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass('left');
            }
            else
                tooltip.removeClass('left');

            if (pos_left + tooltip.outerWidth() > $(window).width()) {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass('right');
            }
            else
                tooltip.removeClass('right');

            if (pos_top < 0) {
                var pos_top = target.offset().top + target.outerHeight();
                tooltip.addClass('top');
            }
            else
                tooltip.removeClass('top');

            tooltip.css({ left: pos_left, top: pos_top })
                .animate({ top: '+=10', opacity: 1 }, 50);
        };

        init_tooltip();
        $(window).resize(init_tooltip);

        var remove_tooltip = function () {
            tooltip.animate({ top: '-=10', opacity: 0 }, 50, function () {
                $(this).remove();
            });

            target.attr('title', tip);
        };

        target.bind('mouseleave', remove_tooltip);
        tooltip.bind('click', remove_tooltip);
    });
}