(function ($) {
    var justModal = function () {
        var self = this;
        var domObject =
      $('<div class="just-modal">' +
          '<div class="modal-inner">' +
            '<div class="wrapper"></div>' +
          '</div>' +
          '<div class="element-storage" style="display: none"></div>' +
        '</div>');
        var box = $(".modal-inner", domObject);
        var wrapper = $(".wrapper", domObject);
        var elementStorage = $(".element-storage", domObject);

        $(document).keydown(function (e) {
            if (e.keyCode == 27) {
                self.close();
            }
        });

        domObject.css("display", "none");
        domObject.appendTo("body");

        var closeLink = $('<a class="modal-close" href="javascript:void(0)">Close</a>');
        closeLink.appendTo(".modal-inner", domObject);
        closeLink.click(function () {
            self.close();
        });


        this.show = function () {
            domObject.fadeIn();
        };

        this.close = function () {
            domObject.fadeOut();
        };

        var currentElement;
        this.showWithElement = function (element) {
            if (!element.data("renderedWidth")) {
                element.data("renderedWidth", element.outerWidth());
            }
            box.css("width", element.data("renderedWidth"));
            if (currentElement && currentElement.get(0) != element.get(0)) { // .get(0) is a workaround for jQuery comparison quirk.

                wrapper.children().first().appendTo(elementStorage);
            }
            currentElement = element;
            element.appendTo(wrapper);
            this.show();
        };
    };
    $.fn.justModal = function () {
        $(".modal-content").css("display", "none"); // Hide modal content, graceful degradation.
        return new justModal();
    };
})(jQuery);