Source code for jQuery lightbox video tutorial

A couple of members have asked for the source code for the 2 part video tutorial I did entitled "How to build a jQuery lightbox from scratch". Sorry it's not downloadable, but copy and paste away........

Here is the link to part one of the video: http://www.developphp.com/view.php?tid=655

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Overlay Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="overlay.js" type="text/javascript"></script>
</head>

<body>

<div id="promo">
  <a id="closeBtn">CLOSE</a>
  <h1>This is the Message Box Title</h1>
  <p id="contactArea">
   You can put whatever you want here.........
   <br/><br/>
   Like an awesome photo of yourself..........
            <br /><br />
            That links to Develop PHP..................
            <br /><br />
            <a href="http://www.developphp.com"><img src="file_name_goes_here" alt="Insert a picture here." border="0"/></a>
            <br/><br />
            You can click anywhere outside this box to close this window too.
        </p>
</div>
<div id="pageOverlay"></div>

</body>
</html>

/* CSS Document */

*{
margin:0;
padding:0;
}
#button{
margin-top:150px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#pageOverlay{
display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:1000;
}
#promo{
display:none;
position:relative;
height:450px;
width:450px;
background:#ffffff;
border:2px solid #a0a0a0;
z-index:2000;
padding:12px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
#promo h1{
text-align:left;
color:#7FA5FE;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #a0a0a0;
padding-bottom:2px;
margin-bottom:20px;
font-family:Arial, Helvetica, sans-serif;
}
#promo a{
cursor: pointer;
}
#promo p{
text-align:center;
}
#closeBtn{
font-size:12px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#7FA5FE;
font-weight:700;
display:block;
}

/*======================================= END CSS =====================================*/

/*jQuery*/

/***************************************************************
* Created By: Aaron Tennyson @ BT Solutions, LLC             *
* Date:  March 11, 2010                                                                *
* Copyright 2010 BT Solutions, LLC                                          *
* Visit our Website at http://btsolutionsllc.com                        *
***************************************************************/

//set flag to determine if overlay is currently showing
// 0 = false 1 = true
var stateOf = 0;

//starts the overlay
function startOverlay(){

if(stateOf == 0){
  $("#pageOverlay").css({"opacity": "0.85"});
  $("#pageOverlay").delay(1000).fadeIn("slow");
  $("#promo").delay(1000).fadeIn("slow");

  stateOf = 1;
}
}

//closes the overlay
function exitOverlay(){

if(stateOf == 1){
  $("#pageOverlay").fadeOut("slow");
  $("#promo").fadeOut("slow");

  stateOf = 0;
}
}

//center the promo box in browser window
function centerPromo(){

var browserWidth = document.documentElement.clientWidth;
var browserHeight = document.documentElement.clientHeight;
var promoHeight = $("#promo").height();
var promoWidth = $("#promo").width();

$("#promo").css({"position": "absolute","top": (browserHeight / 2) - (promoHeight / 2),"left": (browserWidth / 2) - (promoWidth / 2)});

}

//events are handled with jQuery awesomeness
$(document).ready(function(){

//start the overlay when document is loaded
startOverlay();
centerPromo();

//start the overlay with a button event
$("#button").click(function(){
  startOverlay(); // comment out this line
  centerPromo(); // and this line if you don't want the overlay to begin when the document is ready
});

//this function closes the overlay when user clicks "close"
$("#closeBtn").click(function(){
  exitOverlay();
});

//this function closes the overlay when user clicks outside the message area
$("#pageOverlay").click(function(){
  exitOverlay();
});

});