benjchristensen · August 18, 2011 04:18 · benjchristensen · Aug 18, 2011
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<title>DIV Popup with "Lightbox" Style</title>
 		<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 		<style>
 			/* popup div contents */
 			DIV.lightbox-content {
 			    position: absolute;
 			    margin-right: auto;
 			    margin-left: 5%;
 			    width: 90%;
 			    top:75px;
 			    z-index: 10002;
 			
 			    background-color: white;
 			    border:1px solid;  
 			    border-color: #ccc;
 			    padding: 5px;
 			    box-shadow: 0px 0px 10px #000000;
 			    -moz-box-shadow: 0px 0px 10px #000000;
 			    -webkit-box-shadow: 0px 0px 10px #000000;
 			    -webkit-border-radius: 3px;
 			    -moz-border-radius: 3px;
 			
 			    text-align:left;
 			    overflow-y: auto;
 			    overflow-x: hidden;
 			    padding: 10px 0 26px;
 			    
 			    -webkit-transition: opacity 0.4s linear;
 			}
 			
 			
 			/* the overlay that whites out the background while the lightbox is displayed */
 			.lightbox-white-overlay{
 			    background-color: #000000;
 			    height: 100%;
 			    left: 0%;;
 			    position: fixed;
 			    top: 0%;
 			    width: 100%;
 			    z-index: 10001;
 			    
 			    -webkit-transition: opacity 0.4s linear;
 			}
 			
 		</style>
 	</head>
 	<body>
 	<h2>DIV Popup with "Lightbox" Style</h2>
 	
 	<p>
 	<a href="javascript://" onclick="new Lightbox('aKey', '<br><br><br><br><br><br><br><br>Box Contents Go Here<br><br><br><br><br><br><br><br>')">Open Lightbox</a>
 	</p>
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	
 	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	
 	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	
 	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	
 	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
 	
 	<script>
 	
 	function Lightbox(id, content) {
 		
 		var self = this;
 		var box;
 		var boxContent;
 		var whiteOverlay;
 		
 		function init(){
 			// we want to display the details in a div layer floating above the main content
 			box = $("#lightbox");
 			boxContent = $("#lightbox .lightbox-content");
 			whiteOverlay = $("#lightbox .lightbox-white-overlay");
 			
 			if(box.length == 0) {
 				// we don't have a lightbox div yet so create one at the bottom of the page
 				box = $('<div id="lightbox" class="lightbox"/>')
 				$('body').append(box);
 				
 				boxContent = $('<div class="lightbox-content"></div>');
 				box.append(boxContent);
 				
 		        whiteOverlay = $('<div class="lightbox-white-overlay"></div>');
 		        box.append(whiteOverlay);   
 			}
 	
 			// register the ESC key handler
 	        $(document).bind('keydown', escKeyHandler);
 	        
 			// populate with dummy content for now
 	        boxContent.html(content);
 			
 	        // make it visible (not visually, that's done with opacity, but structurally)
 	        // we set display:none in the close method so that it doesn't intercept clicks
 	        whiteOverlay.css('display', 'block');
 	        boxContent.css('display', 'block');
 	        // transition the opacity
 	        whiteOverlay.css("opacity", 0.4);
 	        boxContent.css("opacity", "1.0");
 	        
 			// size the box
 			resizeToContents();
 		};
 		
 	    /* 
 	     * Listen for esc key and close the box
 	     */
 		function escKeyHandler(e) {
 	            if(e && e.keyCode == 27){
 	                // if the key pressed is the escape key, close the box
 	                close();
 	            }
 	    }
 		
 		function resizeToContents() {
 		    /* set the max height to viewport height minus space for header and footer of box */
 		    var contentHeight = boxContent.height();
 		    var viewportHeight = getViewportHeight();
 	
 		    /*  we want to keep space both top and bottom, so the maxHeight must be viewport-250px or smaller */
 		    var possibleHeight = viewportHeight - 150;
 	
 		    console.log("contentHeight: " + contentHeight + "   possibleHeight: " + possibleHeight + "  viewport height: " + viewportHeight);
 	
 		    // set the maxHeight to the possibleHeight
 		    boxContent.css('maxHeight', possibleHeight + "px");
 	
 		    var scrollOffset = $(document.viewport).scrollTop();
 	
 		    // we are doing absolute positioning instead of fixed, so we need to calculate where we are on the page to show it
 		    boxContent.css('top', (scrollOffset + 60) + 'px');
 	
 		    // prevent scrolling
 		    preventScrolling(scrollOffset);
 		}
 	
 	
 		
 		/* used by firefox preventScrolling implementation so that we can stopObserving this */
 		var scrollListener = 'placeholder';
 		
 		function preventScrolling(offset) {
 		    if (pageHasScrollBar()) {
 		        if (BrowserDetect.browser == "Firefox") {
 		        	//NOTE: this isn't working properly on Firefox right now. I had it working at some point in the past but it's not right now.
 		        	// I don't have time to figure it out now so am leaving the code as is with this note
 		            var offsetToStayAt = $(document.viewport).scrollTop();
 		            scrollListener = function(event) {
 		            console.log("scroll here");
 		                window.scrollTo(0, offsetToStayAt);
 		            }
 		            $('document').bind('scroll', scrollListener);
 		        } else {
 		            /*  compensate for hiding the scrollbar so that we don't 'bounce' the page back and forth */
 		            var scrollerWidth = getScrollerWidth();
 		            if (scrollerWidth == 0) {
 		                scrollerWidth = 17;
 		                // default on IE
 		            }
 		            // generally this should be 15 on Safari and Firefox
 		            document.documentElement.style.paddingRight = scrollerWidth + "px";
 		            document.documentElement.style.overflow = "hidden";
 		        }
 		    }
 		}

 	
 		function allowScrolling() {
 		    if (pageHasScrollBar()) {
 		        if (BrowserDetect.browser == "Firefox") {
 		            document.stopObserving('scroll', scrollListener);
 		        } else {
 		            /*  compensate for hiding the scrollbar so that we don't 'bounce' the page back and forth */
 		            document.documentElement.style.paddingRight = "";
 		            document.documentElement.style.overflow = "auto";
 		        }
 		    }
 		}
 	
 	
 		function close() {
 			/* stop listening for the esc key */
 			$(document).unbind('keydown', escKeyHandler);
 	
 			var transitionEndFunction = function(event) {
 				// make it invisible so it stops intercepting all clicks
 				whiteOverlay.css('display', 'none');
 				boxContent.css('display', 'none');
 				
 				// enable scrolling again now that we're closing the lightbox (do it here so the page resize is done after the lightbox fades away)
 	        	allowScrolling();

 				if (BrowserDetect.engine == "WebKit") {
 					whiteOverlay.unbind('webkitTransitionEnd');			
 				} else {
 					whiteOverlay.unbind('transitionend');
 				}
 			}
 	
 			if (BrowserDetect.engine == "WebKit") {
 				whiteOverlay.bind('webkitTransitionEnd', transitionEndFunction);			
 			} else {
 				whiteOverlay.bind('transitionend', transitionEndFunction);
 			}
 			
 			if (BrowserDetect.engine == "Gecko") {
 				// the transitionend event is not happening so this is here to make Firefox work without animation
 				whiteOverlay.css('display', 'none');
 				boxContent.css('display', 'none');
 			}

 	        boxContent.css("opacity", "0");
 			whiteOverlay.css("opacity", "0");	        
 		}
 	
 		/* whether the browser page has a scrollbar present */
 		function pageHasScrollBar() {
 		   if (getDocumentHeight() > getViewportHeight()) {
 		    return true; 
 		   } else { 
 		    return false;
 		   } 
 		} 
 	
 		function scrollPosition() {
 		    if(!pageHasScrollBar()) {
 		        return 0;
 		    }
 		    var scrollTop = document.body.scrollTop;
 	
 		    if (scrollTop == 0) {
 		        if (window.pageYOffset)
 		            scrollTop = window.pageYOffset;
 		        else
 		            scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
 		    }
 		    return scrollTop;
 		}
 	
 		//Get the height of the entire document
 		function getDocumentHeight() {
 		    if (document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
 		        var topMargin = parseInt($(document.body).css('marginTop'),10) || 0;
 		        var bottomMargin = parseInt($(document.body).css('marginBottom'), 10) || 0;
 		      return Math.max(document.body.offsetHeight + topMargin + bottomMargin, document.documentElement.clientHeight, document.documentElement.scrollHeight, 0);
 		    }
 		    return Math.max(document.body.scrollHeight, document.body.clientHeight, 0);
 		 };
 		 
 		 //Get the height of the viewport
 		 function getViewportHeight() {
 		    if (!window.opera && document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
 		      return document.documentElement.clientHeight;
 		    }
 		    else if (document.compatMode && !window.opera && document.body) {
 		      return document.body.clientHeight;
 		    }
 		    return 0;
 		};
 	
 		// Get the width of the viewport
 		function getViewportWidth() {
 		    if (document.documentElement && (!document.compatMode || document.compatMode=="CSS1Compat")) {
 		      return document.documentElement.clientWidth;
 		    }
 		    else if (document.compatMode && document.body) {
 		      return document.body.clientWidth;
 		    }
 		    return 0;
 		  };
 		  
 		function getScrollerWidth() {
 		    var scr = null;
 		    var inn = null;
 		    var wNoScroll = 0;
 		    var wScroll = 0;
 	
 		    // Outer scrolling div
 		    scr = document.createElement('div');
 		    scr.style.position = 'absolute';
 		    scr.style.top = '-1000px';
 		    scr.style.left = '-1000px';
 		    scr.style.width = '100px';
 		    scr.style.height = '50px';
 		    // Start with no scrollbar
 		    scr.style.overflow = 'hidden';
 	
 		    // Inner content div
 		    inn = document.createElement('div');
 		    inn.style.width = '100%';
 		    inn.style.height = '200px';
 	
 		    // Put the inner div in the scrolling div
 		    scr.appendChild(inn);
 		    // Append the scrolling div to the doc
 		    document.body.appendChild(scr);
 	
 		    // Width of the inner div sans scrollbar
 		    wNoScroll = inn.offsetWidth;
 		    // Add the scrollbar
 		    scr.style.overflow = 'auto';
 		    // Width of the inner div width scrollbar
 		    wScroll = inn.offsetWidth;
 	
 		    // Remove the scrolling div from the doc
 		    document.body.removeChild(
 		        document.body.lastChild);
 	
 		    // Pixel width of the scroller
 		    return (wNoScroll - wScroll);
 		}
 	
 		// call init on instantiation
 		init();
 	}
 	
 	
 	
 	/*  ********************************************************************************   */
 	/* BROWSER DETECT */
 	/*  ********************************************************************************   */
 	var BrowserDetect = {
 	  init: function () {
 	    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
 	    this.engine = this.searchString(this.dataEngine) || "An unknown engine";
 	    this.version = this.searchVersion(navigator.userAgent)
 	      || this.searchVersion(navigator.appVersion)
 	      || "an unknown version";
 	    this.OS = this.searchString(this.dataOS) || "an unknown OS";
 	  },
 	  searchString: function (data) {
 	    for (var i=0;i<data.length;i++)  {
 	      var dataString = data[i].string;
 	      var dataProp = data[i].prop;
 	      this.versionSearchString = data[i].versionSearch || data[i].identity;
 	      if (dataString) {
 	        if (dataString.indexOf(data[i].subString) != -1)
 	          return data[i].identity;
 	      }
 	      else if (dataProp)
 	        return data[i].identity;
 	    }
 	  },
 	  searchVersion: function (dataString) {
 	    var index = dataString.indexOf(this.versionSearchString);
 	    if (index == -1) return;
 	    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 	  },
 	  dataBrowser: [
 	    {
 	      string: navigator.userAgent,
 	      subString: "Chrome",
 	      identity: "Chrome"
 	    },
 	    {   string: navigator.userAgent,
 	      subString: "OmniWeb",
 	      versionSearch: "OmniWeb/",
 	      identity: "OmniWeb"
 	    },
 	    {
 	      string: navigator.vendor,
 	      subString: "Apple",
 	      identity: "Safari",
 	      versionSearch: "Version"
 	    },
 	    {
 	      prop: window.opera,
 	      identity: "Opera"
 	    },
 	    {
 	      string: navigator.vendor,
 	      subString: "iCab",
 	      identity: "iCab"
 	    },
 	    {
 	      string: navigator.vendor,
 	      subString: "KDE",
 	      identity: "Konqueror"
 	    },
 	    {
 	      string: navigator.userAgent,
 	      subString: "Firefox",
 	      identity: "Firefox"
 	    },
 	    {
 	      string: navigator.vendor,
 	      subString: "Camino",
 	      identity: "Camino"
 	    },
 	    {    // for newer Netscapes (6+)
 	      string: navigator.userAgent,
 	      subString: "Netscape",
 	      identity: "Netscape"
 	    },
 	    {
 	      string: navigator.userAgent,
 	      subString: "MSIE",
 	      identity: "Explorer",
 	      versionSearch: "MSIE"
 	    },
 	    {
 	      string: navigator.userAgent,
 	      subString: "Gecko",
 	      identity: "Mozilla",
 	      versionSearch: "rv"
 	    },
 	    {     // for older Netscapes (4-)
 	      string: navigator.userAgent,
 	      subString: "Mozilla",
 	      identity: "Netscape",
 	      versionSearch: "Mozilla"
 	    }
 	  ],
 	  dataOS : [
 	    {
 	      string: navigator.platform,
 	      subString: "Win",
 	      identity: "Windows"
 	    },
 	    {
 	      string: navigator.platform,
 	      subString: "Mac",
 	      identity: "Mac"
 	    },
 	    {
 	         string: navigator.userAgent,
 	         subString: "iPhone",
 	         identity: "iPhone/iPod"
 	      },
 	    {
 	      string: navigator.platform,
 	      subString: "Linux",
 	      identity: "Linux"
 	    }
 	  ],
 	  dataEngine : [
 	    {
 	      string: navigator.userAgent,
 	      subString: "WebKit",
 	      identity: "WebKit"
 	    },
 	    {
 	      string: navigator.userAgent,
 	      subString: "Gecko/",
 	      identity: "Gecko"
 	    }
 	  ]
 	
 	};
 	BrowserDetect.init();
 	/*  ********************************************************************************   */
 	/* END BROWSER DETECT */
 	/*  ********************************************************************************   */

 	
 	</script>

 	</body>
 </html>
	<html>
	<head>
	<title>DIV Popup with "Lightbox" Style</title>
	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<style>
	/* popup div contents */
	DIV.lightbox-content {
	position: absolute;
	margin-right: auto;
	margin-left: 5%;
	width: 90%;
	top:75px;
	z-index: 10002;

	background-color: white;
	border:1px solid;
	border-color: #ccc;
	padding: 5px;
	box-shadow: 0px 0px 10px #000000;
	-moz-box-shadow: 0px 0px 10px #000000;
	-webkit-box-shadow: 0px 0px 10px #000000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;

	text-align:left;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 0 26px;

	-webkit-transition: opacity 0.4s linear;
	}


	/* the overlay that whites out the background while the lightbox is displayed */
	.lightbox-white-overlay{
	background-color: #000000;
	height: 100%;
	left: 0%;;
	position: fixed;
	top: 0%;
	width: 100%;
	z-index: 10001;

	-webkit-transition: opacity 0.4s linear;
	}

	</style>
	</head>
	<body>
	<h2>DIV Popup with "Lightbox" Style</h2>

	<p>
	<a href="javascript://" onclick="new Lightbox('aKey', '<br><br><br><br><br><br><br><br>Box Contents Go Here<br><br><br><br><br><br><br><br>')">Open Lightbox</a>
	</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

	<script>

	function Lightbox(id, content) {

	var self = this;
	var box;
	var boxContent;
	var whiteOverlay;

	function init(){
	// we want to display the details in a div layer floating above the main content
	box = $("#lightbox");
	boxContent = $("#lightbox .lightbox-content");
	whiteOverlay = $("#lightbox .lightbox-white-overlay");

	if(box.length == 0) {
	// we don't have a lightbox div yet so create one at the bottom of the page
	box = $('<div id="lightbox" class="lightbox"/>')
	$('body').append(box);

	boxContent = $('<div class="lightbox-content"></div>');
	box.append(boxContent);

	whiteOverlay = $('<div class="lightbox-white-overlay"></div>');
	box.append(whiteOverlay);
	}

	// register the ESC key handler
	$(document).bind('keydown', escKeyHandler);

	// populate with dummy content for now
	boxContent.html(content);

	// make it visible (not visually, that's done with opacity, but structurally)
	// we set display:none in the close method so that it doesn't intercept clicks
	whiteOverlay.css('display', 'block');
	boxContent.css('display', 'block');
	// transition the opacity
	whiteOverlay.css("opacity", 0.4);
	boxContent.css("opacity", "1.0");

	// size the box
	resizeToContents();
	};

	/*
	* Listen for esc key and close the box
	*/
	function escKeyHandler(e) {
	if(e && e.keyCode == 27){
	// if the key pressed is the escape key, close the box
	close();
	}
	}

	function resizeToContents() {
	/* set the max height to viewport height minus space for header and footer of box */
	var contentHeight = boxContent.height();
	var viewportHeight = getViewportHeight();

	/* we want to keep space both top and bottom, so the maxHeight must be viewport-250px or smaller */
	var possibleHeight = viewportHeight - 150;

	console.log("contentHeight: " + contentHeight + " possibleHeight: " + possibleHeight + " viewport height: " + viewportHeight);

	// set the maxHeight to the possibleHeight
	boxContent.css('maxHeight', possibleHeight + "px");

	var scrollOffset = $(document.viewport).scrollTop();

	// we are doing absolute positioning instead of fixed, so we need to calculate where we are on the page to show it
	boxContent.css('top', (scrollOffset + 60) + 'px');

	// prevent scrolling
	preventScrolling(scrollOffset);
	}



	/* used by firefox preventScrolling implementation so that we can stopObserving this */
	var scrollListener = 'placeholder';

	function preventScrolling(offset) {
	if (pageHasScrollBar()) {
	if (BrowserDetect.browser == "Firefox") {
	//NOTE: this isn't working properly on Firefox right now. I had it working at some point in the past but it's not right now.
	// I don't have time to figure it out now so am leaving the code as is with this note
	var offsetToStayAt = $(document.viewport).scrollTop();
	scrollListener = function(event) {
	console.log("scroll here");
	window.scrollTo(0, offsetToStayAt);
	}
	$('document').bind('scroll', scrollListener);
	} else {
	/* compensate for hiding the scrollbar so that we don't 'bounce' the page back and forth */
	var scrollerWidth = getScrollerWidth();
	if (scrollerWidth == 0) {
	scrollerWidth = 17;
	// default on IE
	}
	// generally this should be 15 on Safari and Firefox
	document.documentElement.style.paddingRight = scrollerWidth + "px";
	document.documentElement.style.overflow = "hidden";
	}
	}
	}


	function allowScrolling() {
	if (pageHasScrollBar()) {
	if (BrowserDetect.browser == "Firefox") {
	document.stopObserving('scroll', scrollListener);
	} else {
	/* compensate for hiding the scrollbar so that we don't 'bounce' the page back and forth */
	document.documentElement.style.paddingRight = "";
	document.documentElement.style.overflow = "auto";
	}
	}
	}


	function close() {
	/* stop listening for the esc key */
	$(document).unbind('keydown', escKeyHandler);

	var transitionEndFunction = function(event) {
	// make it invisible so it stops intercepting all clicks
	whiteOverlay.css('display', 'none');
	boxContent.css('display', 'none');

	// enable scrolling again now that we're closing the lightbox (do it here so the page resize is done after the lightbox fades away)
	allowScrolling();

	if (BrowserDetect.engine == "WebKit") {
	whiteOverlay.unbind('webkitTransitionEnd');
	} else {
	whiteOverlay.unbind('transitionend');
	}
	}

	if (BrowserDetect.engine == "WebKit") {
	whiteOverlay.bind('webkitTransitionEnd', transitionEndFunction);
	} else {
	whiteOverlay.bind('transitionend', transitionEndFunction);
	}

	if (BrowserDetect.engine == "Gecko") {
	// the transitionend event is not happening so this is here to make Firefox work without animation
	whiteOverlay.css('display', 'none');
	boxContent.css('display', 'none');
	}

	boxContent.css("opacity", "0");
	whiteOverlay.css("opacity", "0");
	}

	/* whether the browser page has a scrollbar present */
	function pageHasScrollBar() {
	if (getDocumentHeight() > getViewportHeight()) {
	return true;
	} else {
	return false;
	}
	}

	function scrollPosition() {
	if(!pageHasScrollBar()) {
	return 0;
	}
	var scrollTop = document.body.scrollTop;

	if (scrollTop == 0) {
	if (window.pageYOffset)
	scrollTop = window.pageYOffset;
	else
	scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
	}
	return scrollTop;
	}

	//Get the height of the entire document
	function getDocumentHeight() {
	if (document.documentElement && (!document.compatMode \|\| document.compatMode=="CSS1Compat")) {
	var topMargin = parseInt($(document.body).css('marginTop'),10) \|\| 0;
	var bottomMargin = parseInt($(document.body).css('marginBottom'), 10) \|\| 0;
	return Math.max(document.body.offsetHeight + topMargin + bottomMargin, document.documentElement.clientHeight, document.documentElement.scrollHeight, 0);
	}
	return Math.max(document.body.scrollHeight, document.body.clientHeight, 0);
	};

	//Get the height of the viewport
	function getViewportHeight() {
	if (!window.opera && document.documentElement && (!document.compatMode \|\| document.compatMode=="CSS1Compat")) {
	return document.documentElement.clientHeight;
	}
	else if (document.compatMode && !window.opera && document.body) {
	return document.body.clientHeight;
	}
	return 0;
	};

	// Get the width of the viewport
	function getViewportWidth() {
	if (document.documentElement && (!document.compatMode \|\| document.compatMode=="CSS1Compat")) {
	return document.documentElement.clientWidth;
	}
	else if (document.compatMode && document.body) {
	return document.body.clientWidth;
	}
	return 0;
	};

	function getScrollerWidth() {
	var scr = null;
	var inn = null;
	var wNoScroll = 0;
	var wScroll = 0;

	// Outer scrolling div
	scr = document.createElement('div');
	scr.style.position = 'absolute';
	scr.style.top = '-1000px';
	scr.style.left = '-1000px';
	scr.style.width = '100px';
	scr.style.height = '50px';
	// Start with no scrollbar
	scr.style.overflow = 'hidden';

	// Inner content div
	inn = document.createElement('div');
	inn.style.width = '100%';
	inn.style.height = '200px';

	// Put the inner div in the scrolling div
	scr.appendChild(inn);
	// Append the scrolling div to the doc
	document.body.appendChild(scr);

	// Width of the inner div sans scrollbar
	wNoScroll = inn.offsetWidth;
	// Add the scrollbar
	scr.style.overflow = 'auto';
	// Width of the inner div width scrollbar
	wScroll = inn.offsetWidth;

	// Remove the scrolling div from the doc
	document.body.removeChild(
	document.body.lastChild);

	// Pixel width of the scroller
	return (wNoScroll - wScroll);
	}

	// call init on instantiation
	init();
	}



	/* ******************************************************************************** */
	/* BROWSER DETECT */
	/* ******************************************************************************** */
	var BrowserDetect = {
	init: function () {
	this.browser = this.searchString(this.dataBrowser) \|\| "An unknown browser";
	this.engine = this.searchString(this.dataEngine) \|\| "An unknown engine";
	this.version = this.searchVersion(navigator.userAgent)
	\|\| this.searchVersion(navigator.appVersion)
	\|\| "an unknown version";
	this.OS = this.searchString(this.dataOS) \|\| "an unknown OS";
	},
	searchString: function (data) {
	for (var i=0;i<data.length;i++) {
	var dataString = data[i].string;
	var dataProp = data[i].prop;
	this.versionSearchString = data[i].versionSearch \|\| data[i].identity;
	if (dataString) {
	if (dataString.indexOf(data[i].subString) != -1)
	return data[i].identity;
	}
	else if (dataProp)
	return data[i].identity;
	}
	},
	searchVersion: function (dataString) {
	var index = dataString.indexOf(this.versionSearchString);
	if (index == -1) return;
	return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
	{
	string: navigator.userAgent,
	subString: "Chrome",
	identity: "Chrome"
	},
	{ string: navigator.userAgent,
	subString: "OmniWeb",
	versionSearch: "OmniWeb/",
	identity: "OmniWeb"
	},
	{
	string: navigator.vendor,
	subString: "Apple",
	identity: "Safari",
	versionSearch: "Version"
	},
	{
	prop: window.opera,
	identity: "Opera"
	},
	{
	string: navigator.vendor,
	subString: "iCab",
	identity: "iCab"
	},
	{
	string: navigator.vendor,
	subString: "KDE",
	identity: "Konqueror"
	},
	{
	string: navigator.userAgent,
	subString: "Firefox",
	identity: "Firefox"
	},
	{
	string: navigator.vendor,
	subString: "Camino",
	identity: "Camino"
	},
	{ // for newer Netscapes (6+)
	string: navigator.userAgent,
	subString: "Netscape",
	identity: "Netscape"
	},
	{
	string: navigator.userAgent,
	subString: "MSIE",
	identity: "Explorer",
	versionSearch: "MSIE"
	},
	{
	string: navigator.userAgent,
	subString: "Gecko",
	identity: "Mozilla",
	versionSearch: "rv"
	},
	{ // for older Netscapes (4-)
	string: navigator.userAgent,
	subString: "Mozilla",
	identity: "Netscape",
	versionSearch: "Mozilla"
	}
	],
	dataOS : [
	{
	string: navigator.platform,
	subString: "Win",
	identity: "Windows"
	},
	{
	string: navigator.platform,
	subString: "Mac",
	identity: "Mac"
	},
	{
	string: navigator.userAgent,
	subString: "iPhone",
	identity: "iPhone/iPod"
	},
	{
	string: navigator.platform,
	subString: "Linux",
	identity: "Linux"
	}
	],
	dataEngine : [
	{
	string: navigator.userAgent,
	subString: "WebKit",
	identity: "WebKit"
	},
	{
	string: navigator.userAgent,
	subString: "Gecko/",
	identity: "Gecko"
	}
	]

	};
	BrowserDetect.init();
	/* ******************************************************************************** */
	/* END BROWSER DETECT */
	/* ******************************************************************************** */


	</script>

	</body>
	</html>