index.php

First, we need to stop the new logged in users from viewing index.php. Why? Because we don't want logged in users re-trying to log in, or worse; trying to create another account while being logged in.
Go ahead and open index.php. You need to replace the first line, which looks like:

And make it look like this:

Copy PHP from Codepad.org

logout.php

Obviously it will become a pain in the ass if we can't view some of the pages we are working on if they redirect us before we can see the outcome of it. Let's solve this issue right now. It's quick.
Create a new blank file and save it in the main folder (where index.php is) and call it logout.php. Then add the following code:

Copy PHP from Codepad.org

Save logout.php and close it.
Anytime you find yourself having a redirection problem, type in your browser http://www.your_facebook.com/logout.php.

inc/afterbody.inc.php

Now we're going to add our own style of lightbox.
Open inc/afterbody.inc.php and add this code:

Copy HTML From Codepad.org

Save and close afterbody.inc.php.

libs/java.lib.js

We just added our own lightbox HTML. We could have done this completely through JS, but we took the HTML route instead.
Next, open up your javascript library. (inc/java.lib.js).
Add this code inside the $(document).ready(function() { .... });

Copy JavaScript from Codepad.org

So now your full JS library will look like this.

styles/global.css

We need to do two things:
1. Get the border for the Facebook popup window.
2. Fill in our style sheet (otherwise nothing looks good)

First, get the border image. Download and save that as "popup_border.png" inside your images folder.
directory looks like: images/popup_border.png

Now lets fill in some missing CSS stuff:

#popupWindow { z-index:5; position:fixed; margin:125px 33% 0 33%; color:black; border:10px; background-image:url(../images/popup_border.png); border-radius:7px; width:34%; max-width:34%; min-width:400px; padding:10px; display:none; }
#popupTitle { border:1px solid #3b5998; border-bottom:0; background-color:#6d84b4; margin:0; font-weight:bold; color:#FFF; font-size:14px; height:27px; line-height:27px; text-align:left; text-indent:9px; }
#popupContent { background-color:#FFF; color:#000; padding:4px 7px 4px 7px; border:1px solid #555555; border-top:0; border-bottom:1px solid #ccc; font-size:11px; max-height:350px; min-height:50px; overflow:auto; }
#popupFooter { background-color:#f2f2f2; border:1px solid #555555; border-top:0; padding:8px; text-align:right; }

Get CSS from Codepad.org

As each class goes on, we will purposely leave out many small areas because they don't demand our attention just yet. Every now and then, we'll go back and fix these up or make these areas functional or even upgrade ways of making things work.
Download Progress (minus load.inc.php)

Any errors, problems, or questions - leave a comment below! :)