$(document).ready(function() {
		    var outerPopupSkin
		    var Popup = function(title, content, classN) {
		        var popupBorder, popupInnerSkin, popupHeader, closePopup, popupContent,
		        title = title || this.title,
		        content = content || this.href,
		        classN = classN || this.rel;
		
		        // Creating elements
		        outerPopupSkin = outerPopupSkin || $("<div></div>").addClass("popupPageFill").click(function(e) {
		            if ($(e.target).is(".popupPageFill")) $(".popupExit").click()
		        });
		        popupBorder = $("<div/>").addClass(classN).addClass("popupBorder");
		        popupInnerSkin = $("<div/>").addClass("popupContainer")
		        popupHeader = $("<h2 class='popupHeader'><span>" + title + "</span></h2>");
		        linkToTop = $("<a name='Top'/>");
		        closePopup = $("<a/>").addClass("popupExit").bind("click", function() {
		            $(".popupPageFill").fadeOut(100).empty();
		        }).appendTo(popupBorder);
		        popupContent = $("<div/>").addClass("popupContent loading");
		
		        // appending them one into the other to minimize appending to DOM
		        popupInnerSkin.append(popupHeader);
		        outerPopupSkin.append(popupBorder);
		        popupBorder.append(popupInnerSkin);
		        popupInnerSkin.append(popupContent);
		        outerPopupSkin.appendTo("body").fadeIn(300);
		
		        popupContent.load(content, function() {
		            popupContent.removeClass("loading");
		            popupContent.prepend(linkToTop);
		            $("body").trigger("popup_loaded");
		        });
		        pressed = null;
		        $(document).one("keydown", function(e) {
		            pressed = (e.keyCode ? e.keyCode : e.which);
		            if (pressed == 27) { $(".popupExit").click() }
		        });
		
		    }
		    /* this is how these pop-ups are called unobtrusively */
		    $(".Popup").die("click");
		    $(".Popup").live("click", function() {
		        Popup(this.title, this.href, this.rel);
		        return false
		    })
		})