/*
* 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;
    }    
}
} ();