// create an anonymous function and pass in a reference to jQuery
(function($) {

    // this is the functions
    var lightbox = function(evt) {
        var url = $(this).attr("href"),
				articleTitle = "",
				articleBody = "",
				theDialog;

        if (evt) {
            evt.preventDefault();
        }

        $.ajax({
            url: url,
            success: function(data) {
                articleTitle = "",
					articleBody = data;

                theDialog = $("<div />")
									.html(articleBody)
									.dialog({
									    modal: false,
									    title: articleTitle,
									    width: 520,
									    height: 'auto',
									    autoOpen: false,
									    show: 'fade',
									    hide: 'fade',
									    resizable: false,
									    draggable: true,
									    close: function() {
									        $(this).remove();
									    }
									});

                theDialog.dialog("open");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("error: " + errorThrown);
            }
        });

    };

    // this is the function that hooks it up on page load
    $(function() {
        // attach click event to all items with page-flake css class (or ANY other selector)
        $(".page-flake").live("click", lightbox);
    });

})(jQuery);