Remove some rarely used HTML clutter

Recreate it on demand

design/privatefooter.php

@@ -54,8 +54,6 @@ $Debug->ocelot_table();
 <? } ?>
 
 </div>
-<div id="lightbox" class="lightbox hidden"></div>
-<div id="curtain" class="curtain hidden"></div>
 <?
 global $NotificationSpans;
 if (!empty($NotificationSpans)) {
@@ -64,12 +62,5 @@ if (!empty($NotificationSpans)) {
   }
 }
 ?>
-<!-- Extra divs, for stylesheet developers to add imagery -->
-<div id="extra1"><span></span></div>
-<div id="extra2"><span></span></div>
-<div id="extra3"><span></span></div>
-<div id="extra4"><span></span></div>
-<div id="extra5"><span></span></div>
-<div id="extra6"><span></span></div>
 </body>
 </html>

static/functions/global.js

@@ -23,6 +23,16 @@ function toggleChecks(formElem, masterElem, elemSelector) {
 
 var lightbox = {
   init: function (image, size) {
+    if ($('#lightbox').length == 0 || $('#curtain').length == 0) {
+      var lightboxEl = document.createElement('div')
+      lightboxEl.id = 'lightbox'
+      lightboxEl.className = 'lightbox hidden'
+      var curtainEl = document.createElement('div')
+      curtainEl.id = 'curtain'
+      curtainEl.className = 'curtain hidden'
+      $('#wrapper')[0].appendChild(lightboxEl)
+      $('#wrapper')[0].appendChild(curtainEl)
+    }
     if (typeof(image) == 'string') {
       $('#lightbox').gshow().listen('click', lightbox.unbox).raw().innerHTML =
         '<p size="7" style="color: gray; font-size: 50px;">Loading...<p>';