(function ($) {
    $.fn.extend({
        modalPanel: function () {

            //Create our overlay object
            var popupHTML = '<div id="modal-popup-wrapper">'
                + '<div id="modal-popup-outer">'
                + '<div id="modal-popup-inner">'
                + '<div id="modal-popup-window">'
                + '<a id="modal-popup-close" href="javascript:"><img src="' + root + 'images/btn_close.png" alt="Close"/></a>'
                + '<div id="modal-popup-content">'
                + $(this).html()
                + '<div id="modal-popup-clear"></div></div>'
                + '</div>'
                + '</div>'
                + '</div>'
                + '</div>';

            var overlay = $('<div id="modal-overlay"></div>');
            var popup = $(popupHTML);

            //Append the overlay to the document body
            $("body").append(overlay.click(function () {
                modalHide();
            }));
            overlay.css('opacity', 0.25);
            overlay.fadeIn();

            $("body").append(popup);
            popup.fadeIn();
            $("#modal-popup-close").click(function (event) {
                event.preventDefault();
                modalHide();
            });

            //Activate a listener 
            $(document).keydown(handleEscape);


            //Our function for hiding the modalbox
            function modalHide() {

                $(document).unbind("keydown", handleEscape)
                var remove = function () {

                    $(this).remove();
                }

                overlay.fadeOut(remove);
                popup.fadeOut(remove);
            }

            //Our function that listens for escape key.
            function handleEscape(e) {

                if (e.keyCode == 27) {

                    modalHide();
                }
            }
        }
    });
})(jQuery);