/*
* Simple bubble help tooltip jQuery plugin
*
*/

(function (jQuery) {
    jQuery.fn.HelpBalloon = function (url, imagePath) {
        Init:
        {

            jQuery(this).html(GetImagePath(imagePath));
            $(this).click().toggle(function (e) {
                jQuery('#bubbleHelper').remove();
                jQuery(this).show();
                jQuery('body').prepend(GetHtml(url));
                jQuery('#bubbleHelper').css('left', e.pageX - 300 + 'px').css('top', e.pageY - 240 + 'px');
                jQuery('#closeButton').click(function () { jQuery('#bubbleHelper').remove(); });
            }, function () {
                jQuery('#bubbleHelper').remove();
            });
        }
    }
})($);

function GetHtml(url) {
    return template.header() + GetBody('#bubbleHelperBody', url) + template.footer();
}

function GetBody(targetId, url) {
    jQuery.ajax({
        type: "POST",
        url: url,
        data: "[]",
        success: function (html) {
            jQuery(targetId).html(html);
        },
        error: function () {
            AjaxError;
        }
    });
}

function GetImagePath(imagePath) {
    return '<img src="' + imagePath + '" id="bubbleHelperImage" />';
}

var template = function () {
    var headerHtml = ''
    + '<div id="bubbleHelper" >'
    + '  <div id="bubbleHelperInside">'
    + '    <div id="bubbleHelperHeading">'
    + '        InfoChoice Help'
    + '    </div>'
    + '    <div class="closeButton" id="closeButton"></div>'
    + '      <div id="bubbleHelperBody">';

    var footerHtml = ""
    + '     </div>'
    + '  </div>'
    + '</div>';

    return {
        header: function () {
            return headerHtml;
        },
        body: function () {
            return bodyHtml;
        },
        footer: function () {
            return footerHtml;
        }
    }
} ();