Restructure the theme code to be more like WordPress / Habari. Now,

the controller initiates a request to a top level page (eg:
album.html.php) which is then free to include whatever other page
chunks it wants with calls like <?= $theme->display('header.html') ?>

Variables like $item and $children are in the global space for all
views.

theme.php helper is now Theme.php library which lets us store the name
of the theme inside the variable itself.  This means that the theme
does not have to know its own name because you can use $theme->url()
for all urls to stuff inside the theme itself, which makes it possible
to cline a theme without changing a single line.

Still using the mock album UI.

6 files changed, 130 insertions, 92 deletions

diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index 10930daa..2abb810f 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -1,72 +1,84 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
-<script type="text/javascript">
-  myTooltip = new YAHOO.widget.Tooltip("myTooltip", {
-  context:"photo-id-1",
-  text:"<strong>Photo title</strong><br />taken December 24, 2007<br />Viewed 27 times<br /><br/>Tags: christmas, familiy, home, xmas",
-  showDelay:500 } );
-</script>
+<?= $theme->display('header.html') ?>
 
-<div id="gAlbumGrid">
-  <div id="gAlbumGridHeader">
-    <h1>Christmas 2007</h1>
-    <span class="understate">(interesting information about the Album)</span>
-    <a href="#" id="gSlideshowLink" class="buttonlink">Slideshow</a>
-  </div>
+<div id="bd">
+  <div id="yui-main">
+    <div id="gContent" class="yui-b">
+      <script type="text/javascript">
+	myTooltip = new YAHOO.widget.Tooltip("myTooltip", {
+	context:"photo-id-1",
+	text:"<strong>Photo title</strong><br />taken December 24, 2007<br />Viewed 27 times<br /><br/>Tags: christmas, familiy, home, xmas",
+	showDelay:500 } );
+      </script>
 
-  <div class="gAlbumContainer first gAlbum">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Album title</h2>
-    <ul class="gMetadata">
-      <li>Views: 321</li>
-      <li>By: <a href="#">username</a></li>
-    </ul>
-  </div>
+      <div id="gAlbumGrid">
+	<div id="gAlbumGridHeader">
+	  <h1><?= $item->title ?></h1>
+	  <span class="understate"><?= $item->description ?></span>
+	  <a href="#" id="gSlideshowLink" class="buttonlink">Slideshow</a>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gAlbumContainer first gAlbum">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Album title</h2>
+	  <ul class="gMetadata">
+	    <li>Views: 321</li>
+	    <li>By: <a href="#">username</a></li>
+	  </ul>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer first">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer first">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer first">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer first">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div class="gItemContainer">
-    <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= theme::url("images/thumbnail.jpg") ?>" /></a>
-    <h2>Photo title</h2>
-  </div>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
 
-  <div id="gPagination">
-    Items 1-10 of 34
-    <span class="first_inactive">first</span>
-    <span class="previous_inactive">previous</span>
-    <a href="#" class="next">next</a>
-    <a href="#" class="last">last</a>
+	<div class="gItemContainer">
+	  <a href="photo.html"><img id="photo-id-1" class="photo" alt="photo" src="<?= $theme->url("images/thumbnail.jpg") ?>" /></a>
+	  <h2>Photo title</h2>
+	</div>
+
+	<div id="gPagination">
+	  Items 1-10 of 34
+	  <span class="first_inactive">first</span>
+	  <span class="previous_inactive">previous</span>
+	  <a href="#" class="next">next</a>
+	  <a href="#" class="last">last</a>
+	</div>
+      </div>
+
+    </div>
   </div>
+  <?= $theme->display('sidebar.html') ?>
 </div>
+
+<?= $theme->display('footer.html') ?>
diff --git a/themes/default/views/footer.html.php b/themes/default/views/footer.html.php
new file mode 100644
index 00000000..ab40a417
--- /dev/null
+++ b/themes/default/views/footer.html.php
@@ -0,0 +1,7 @@
+<? defined("SYSPATH") or die("No direct script access."); ?>
+      <div id="gFooter">
+        Powered by <a href="#">GalleryX</a> | <a href="#">About this Gallery</a> | ...
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php
new file mode 100644
index 00000000..797dcb7c
--- /dev/null
+++ b/themes/default/views/header.html.php
@@ -0,0 +1,53 @@
+<? defined("SYSPATH") or die("No direct script access."); ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tranisitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>Browse Photos :: <?= $item->title ?></title>
+
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" />
+    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" />
+    <link rel="stylesheet" type="text/css" href="<?= $theme->url("css/styles.css") ?>" media="screen,projection" />
+
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/container.css" />
+    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
+    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
+    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/treeview.css" />
+    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>
+  </head>
+
+  <body class="yui-skin-sam">
+    <div id="doc2" class="yui-t5 gAlbumView">
+      <div id="gHeader">
+	<img id="gLogo" alt="<?= _("Logo") ?>" src="<?= $theme->url("images/logo.png") ?>" />
+
+	<h1><?= $item->title ?></h1>
+
+	<div id="gLoginMenu">
+	  <a href="#"><?= _("Register") ?></a> |
+	  <a href="#"><?= _("Login") ?>
+	  </div>
+
+	  <ul id="gSiteMenu">
+	    <li><a href="index.html"><?= _("HOME") ?></a></li>
+	    <li><a class="active" href="browse.html"><?= _("BROWSE") ?></a></li>
+	    <li><a href="upload.html"><?= _("UPLOAD") ?></a></li>
+	    <li><a href="upload.html"><?= _("MY GALLERY") ?></a></li>
+	    <li><a href="#"><?= _("ADMIN") ?></a></li>
+	  </ul>
+
+	  <ul id="gBreadcrumbs">
+	    <li class="root"><a href="#">Home</a></li>
+	    <li><a href="#">Friends &amp; Family</a></li>
+	    <li class="active"><span>Christmas 2007</span></li>
+	  </ul>
+
+	  <form id="gSearchForm">
+	    <input type="text" class="text" value="<?= _("Search Gallery ...") ?>"/>
+	    <input type="submit" class="submit" value="search" />
+	  </form>
+	</div>
diff --git a/themes/default/views/page_footer.html.php b/themes/default/views/page_footer.html.php
deleted file mode 100644
index 4e15fbff..00000000
--- a/themes/default/views/page_footer.html.php
+++ /dev/null
@@ -1,4 +0,0 @@
-<? defined("SYSPATH") or die("No direct script access."); ?>
-<div id="gFooter">
-  Powered by <a href="#">GalleryX</a> | <a href="#">About this Gallery</a> | ...
-</div>
diff --git a/themes/default/views/page_header.html.php b/themes/default/views/page_header.html.php
deleted file mode 100644
index 58eb8847..00000000
--- a/themes/default/views/page_header.html.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<? defined("SYSPATH") or die("No direct script access."); ?>
-<div id="gHeader">
-  <img id="gLogo" alt="<?= _("Logo") ?>" src="<?= theme::url("images/logo.png") ?>" />
-
-  <h1><?= $item->title ?></h1>
-
-  <div id="gLoginMenu">
-    <a href="#"><?= _("Register") ?></a> |
-    <a href="#"><?= _("Login") ?>
-  </div>
-
-  <ul id="gSiteMenu">
-    <li><a href="index.html"><?= _("HOME") ?></a></li>
-    <li><a class="active" href="browse.html"><?= _("BROWSE") ?></a></li>
-    <li><a href="upload.html"><?= _("UPLOAD") ?></a></li>
-    <li><a href="upload.html"><?= _("MY GALLERY") ?></a></li>
-    <li><a href="#"><?= _("ADMIN") ?></a></li>
-  </ul>
-
-  <ul id="gBreadcrumbs">
-    <li class="root"><a href="#">Home</a></li>
-    <li><a href="#">Friends &amp; Family</a></li>
-    <li class="active"><span>Christmas 2007</span></li>
-  </ul>
-
-  <form id="gSearchForm">
-    <input type="text" class="text" value="<?= _("Search Gallery ...") ?>"/>
-    <input type="submit" class="submit" value="search" />
-  </form>
-</div>
diff --git a/themes/default/views/page_sidebar.html.php b/themes/default/views/sidebar.html.php
index 923b4e4e..923b4e4e 100644
--- a/themes/default/views/page_sidebar.html.php
+++ b/themes/default/views/sidebar.html.php