Default theme, built with YUI. A mock right now, not functional at

all (except in some very minor ways).  It's unclear if this is the
best final structure.  Right now the album controller knows a
considerable amount about the layout of the page, which may not be the
best way to do things.

16 files changed, 1126 insertions, 0 deletions

diff --git a/themes/default/css/forms.css b/themes/default/css/forms.css
new file mode 100644
index 00000000..d8a69853
--- /dev/null
+++ b/themes/default/css/forms.css
@@ -0,0 +1,191 @@
+/** *************************************************************************
+ * Base form styles
+ */
+
+/* Zero out padding and margin, adjust where needed later */
+form, fieldset, label, input, .checkbox, textarea, select, option, form div {
+	margin: 0;
+	padding: 0;
+}
+fieldset {
+	margin: 1em 0;
+	padding: 1em;
+	border: 1px solid #999;
+}
+legend {
+	font-weight: bold;
+	margin: 0 2% .5em 0;
+	padding: .2em .5em;
+}
+input.text, textarea, select, input.password { 
+	border: 1px solid #666; 
+	border-right: 1px solid #ccc; 
+	border-bottom: 1px solid #ccc;
+}
+option {
+	float: none;
+	clear: both;
+	margin-right: 2em;
+}
+input.radio, input.checkbox { 
+	margin-right: .5em;
+}
+/* Create a bit of padding for text inputs and selects */
+input.text, input.password, input.button, textarea, select {
+	padding: .2em;
+}
+input.button { 
+	margin-right: 1em;
+	padding: .2em .6em;
+}
+.readonly {	
+	color: #999;
+	background: #e7e7e7;
+}
+/* standard widths */
+.w12 { width: 12% }
+.w25 { width: 25% }
+.w37 { width: 37% }
+.w50 { width: 50% }
+.w62 { width: 62% }
+.w75 { width: 75% }
+.w87 { width: 87% }
+.wauto { width: auto; }
+
+
+/** *************************************************************************
+ * Provide proper vertical alignment for expanded and compact forms
+ */
+
+.gExpandedForm .row div, 
+.gCompactForm div div label {
+	padding-top: .5em;
+}
+
+
+/** *************************************************************************
+ * Expanded form layout styles
+ */
+
+.gExpandedForm { overflow: hidden; } 
+.gExpandedForm .row {
+	padding: .3em 0;
+	white-space: nowrap;
+	overflow: hidden;
+	clear: both;
+}
+.gExpandedForm label, 
+.gExpandedForm .row p, 
+.gExpandedForm .row div, 
+.gExpandedForm input, 
+.gExpandedForm select, 
+.gExpandedForm textarea {
+	float: left;
+}
+/* change column widths for labels and inputs */
+.gExpandedForm .text, textarea { width: 80%; }
+.gExpandedForm label, .gExpandedForm .row p {
+	width: 15%; 
+	margin: .5em 1em .5em 0;
+	text-align: right;
+	white-space: normal;
+	overflow: hidden;
+}
+.gExpandedForm .row div {
+	white-space: nowrap;
+	overflow: hidden;
+	clear: none;
+}
+/* labels and form inputs inside of divs should not float */
+.gExpandedForm .row div * {
+	float: none;
+	clear: none;
+}
+.expanded input.checkbox, 
+.expanded input.radio, 
+.expanded select { 
+	margin-top: 1.5em;
+}
+.gExpandedForm div div input { 
+	margin-right: 0;
+}
+
+
+/** *************************************************************************
+ * Compact form layout styles
+ */
+
+.gCompactForm { overflow: hidden; } 
+.gCompactForm div, 
+.gCompactForm label, 
+.gCompactForm input, 
+.gCompactForm select, 
+.gCompactForm textarea {
+	float: left;
+}
+.gCompactForm input.text, 
+.gCompactForm select, 
+.gCompactForm textarea {
+	/* set width: auto to allow form element content 
+	to set width otherwise 90% is a good setting */
+	width: 90%; /* determines space between form elements */
+}
+/* Increase width of elements in twoper 
+   columns to provide better alignment */
+.gCompactForm .twoper input.text, 
+.gCompactForm .twoper select, 
+.gCompactForm .twoper textarea {
+	width: 95%;
+}
+.gCompactForm div {
+	width: 99%;
+	margin-bottom: 1em; /* space between rows */
+	clear: both;
+}
+/* Nested divs shouldn't clear floated elements */
+/* keeps nested divs from compounding margin value */
+.gCompactForm div div {
+	margin-bottom: 0; 
+	clear: none;
+}
+/* Nested div label contents should determine their own width */
+.gCompactForm div div label {
+	width: auto;
+	white-space: normal;
+	/* unccomment to stack form inputs inside a row */
+	/* clear: left; */
+	margin-right: 1em;
+}
+/* Fix paragraph white space in Safari */
+.gCompactForm div div p {
+	margin: 0;
+	padding: 0;
+}
+
+/* Compact layout - Set item width within rows */
+.oneper label, .oneper div     { width: 99%; } /* can't be 100%, IE bug */
+.twoper label, .twoper div     { width: 46%; }
+.threeper label, .threeper div { width: 32%; }
+.fourper label, .fourper div   { width: 23%; }
+.fiveper label, .fiveper div   { width: 19%; }
+.sixper label, .sixper div     { width: 15%; }
+.sevenper label, .sevenper div { width: 13%; }
+.eightper label, .eightper div { width: 11%; }
+.nineper label, .nineper div   { width: 10%; }
+.tenper label, .tenper div     { width: 8.7%; }
+
+.oneper label, .oneper div, 
+.twoper label, .twoper div, 
+.threeper label, .threeper div, 
+.fourper label, .fourper div, 
+.fiveper label, .fiveper div, 
+.sixper label, .sixper div, 
+.sevenper label, .sevenper div, 
+.eightper label, .eightper div, 
+.nineper label, .nineper div, 
+.tenper label, .tenper div {
+	white-space: nowrap;
+	overflow: hidden;
+	border: none;
+	border-collapse: collapse;
+}
diff --git a/themes/default/css/styles.css b/themes/default/css/styles.css
new file mode 100644
index 00000000..11a8ab62
--- /dev/null
+++ b/themes/default/css/styles.css
@@ -0,0 +1,652 @@
+/**
+ * Gx Styles
+ *
+ * @requires YUI reset, font, grids, and base CSS
+ *
+ * Sheet organization:
+ * 1) Global element styles
+ * 2) Text (fonts, headings, links)
+ * 3) Layout containers
+ * 4) Generic blocks
+ * 5) Primary content blocks
+ * 6) Navigation and menus
+ * 7) Tables
+ * 8) Forms, additional form CSS stored in css/forms.css (temporarily)
+ * 9) General browser hacks
+ */
+
+ @import url('forms.css');
+
+/**
+ ** **************************************************
+ * 1) Global unique styles
+ ** **************************************************
+ */
+
+/* ~~~~~~~~~ general elements ~~~~~~~~~~ */
+body, html {
+  background-color: #ccc;
+}
+
+/* ~~~~~~~~~ text elements ~~~~~~~~~~ */
+h1 {
+	margin-top: 0px;
+}
+a {
+	color: #6B8CB7;
+	text-decoration: none;
+}
+a:hover {
+	color: #FF3300;
+	text-decoration: underline;
+}
+
+/* ~~~~~~~~~ list elements ~~~~~~~~~~ */
+li {
+	list-style-type: none;
+}
+
+/* ~~~~~~~~~ table elements ~~~~~~~~~~ */
+caption {
+	text-align: left;
+}
+th {
+	text-align: left;
+}
+
+/* ~~~~~~~~~ form elements ~~~~~~~~~~ */
+form {
+
+}
+legend {
+
+}
+label {
+
+}
+input {
+
+}
+textarea {
+
+}
+
+/**
+ ** **************************************************
+ * 2) High level content containers (header, content, sidebar, footer)
+ ** **************************************************
+ */
+
+/* ~~~~~ View Container ??? ~~~~~~ */
+.gAlbumView,
+.gItemView {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-width: 0 1px 1px 1px;
+}
+
+/* ~~~~~~~~ high level content containers ~~~~~~~~ */
+
+#gHeader {
+	position: relative;
+
+}
+
+#gContent {
+  border-right: 1px solid #ccc;
+  padding: 20px;
+	clear: both;
+}
+
+#gSidebar {
+  width: 18.4615em;
+  padding: 1em 0 0 0;
+}
+
+#gFooter {
+  border-top: 1px solid #ccc;
+  padding: .5em;
+}
+
+/**
+ ** **************************************************
+ * 3) Header styles (logo, login, site menu, breadcrumbs, search)
+ ** **************************************************
+ */
+
+/* ~~~~~~~~ logo/title  ~~~~~~~~ */
+
+#gLogo {
+  float: left;
+  margin: 10px;
+}
+#gHeader h1 {
+	float: left;
+	margin: 20px 0 0 20px;
+}
+
+/* ~~~~~~~~ login menu ~~~~~~~~ */
+
+#gLoginMenu {
+  position: absolute;
+	top: 0px;
+	right: 13px;
+	border: 1px solid silver;
+	border-width: 0 1px 1px 1px;
+	padding: 5px;
+  text-align: right;
+}
+#gLoginMenu form {
+  margin-top: 5px;
+}
+#gLoginMenu label {
+  font-size: 0.8em;
+}
+#gLoginMenu input.text,
+#gLoginMenu input.password {
+  width: 80px;
+	padding: 0 0 .1em 0;
+}
+#gLoginMenu input.submit {
+	font-size: 0.9em;
+	font-weight: bold;
+}
+
+/* ~~~~~~~~ site menu  ~~~~~~~~ */
+
+#gSiteMenu {
+	height: 31px;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  clear: both;
+}
+#gSiteMenu li {
+  list-style-type: none;
+  float: left;
+  display: block;
+  width: 20%;
+	background: #E6EBF0;
+}
+#gSiteMenu li a {
+	color: #003366;
+	font-weight: bold;
+  height: 20px;
+  display: block;
+  text-align: center;
+	padding: 7px 7px 3px 7px;
+	background: url('../images/bg_sitemenu.png') repeat-x;
+	margin-left: 1px;
+	border: 1px solid #336699;
+	border-width: 0 1px 1px 0;
+	text-decoration: none;
+	letter-spacing: .1em;
+}
+#gSiteMenu li a:hover {
+	color: #FF3300;
+	background: url('../images/bg_sitemenu_hover.png');
+}
+#gSiteMenu li a.active {
+	background: #DCE6EF;
+	border-color: #DCE6EF;
+	color: #FF3300;
+}
+
+/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */
+
+#gBreadcrumbs {
+	border-bottom: 1px solid silver;
+  margin: 0;
+  padding: 0 0 0 14px;
+  height: 28px;
+  list-style-type: none;
+}
+#gBreadcrumbs li {
+  list-style-type: none;
+  background: transparent url('../images/icon_breadcrumb_separator.gif') no-repeat scroll left center;
+  padding: 0 0 0 10px;
+  float: left;
+}
+#gBreadcrumbs li.root {
+  background: transparent;
+  padding: 0;
+}
+#gBreadcrumbs li a,
+#gBreadcrumbs li span {
+  padding: 6px 6px 6px 6px;
+  display: block;
+}
+#gBreadcrumbs li.active span {
+  font-weight: bold;
+}
+
+/* ~~~~~~~~~ search form ~~~~~~~~~~ */
+
+#gSearchForm {
+	position: absolute;
+	right: 13px;
+	top: 103px;
+}
+#gSearchForm input.text {
+	padding: 1px;
+}
+#gSearchForm input.submit {
+	height: 20px;
+}
+
+/**
+ ** **************************************************
+ * 4) Generic styles
+ ** **************************************************
+ */
+
+.buttonlink {
+	border: 1px solid lightgray;
+	padding: 5px;
+}
+.buttonlink:hover {
+	background-color: #F3F3F3;
+}
+.understate {
+	color: silver;
+}
+
+
+/*
+.gBlock {
+	margin: 0 1em 1.5em 0;
+	border: 1px solid #336699;
+	padding: 0;
+}
+.gBlockHeader {
+	background-color: #E8E8E8;
+	padding: .3em;
+	height: 1.5em;
+	border-bottom: 1px solid #6B8CB7;
+	margin: 0 !important;
+}
+.gBlockHeader h2 {
+	color: #003366;
+	margin: 0;
+	float: left;
+	font-size: 1.1em;
+}
+.gBlockHeader .minimize {
+	float: right;
+}
+.gBlockContent {
+	margin: .3em;
+}
+*/
+
+.gBlock {
+	margin: 0 1em 2em 0;
+	padding: 0;
+}
+.gBlockHeader {
+	background-color: #E8E8E8;
+	padding: .3em;
+	height: 1.5em;
+	margin: 0 !important;
+}
+.gBlockHeader h2 {
+	margin: 0;
+	float: left;
+	font-size: 1.1em;
+}
+.gBlockHeader .minimize {
+	float: right;
+}
+.gBlockContent {
+	margin: .2em .5em 0 .5em;
+}
+.gBlockContent {
+	margin: .2em .5em 0 .5em;
+}
+table.gBlockContent {
+	width: 214px;
+	table-layout: fixed;
+}
+table.gBlockContent th {
+	padding: .3em .3em .3em 0;
+}
+table.gBlockContent td {
+	padding: .3em 0 .3em .3em;
+}
+
+/**
+ ** **************************************************
+ * 5) Content blocks - inherits from Generic blocks
+ ** **************************************************
+ */
+
+#gItem {
+  width: 500px;
+	margin-left: auto;
+  margin-right: auto;
+}
+#gItem a.buttonlink {
+  float: right;
+}
+#gItem img {
+	clear: both;
+  display: block;
+  width: 500px;
+  height: 400px;
+  border: 1px solid silver;
+  background-color: #e7e7e7;
+}
+#gItem h1 {
+  margin: 10px 0 10px 0;
+}
+
+/* ~~~~~~~~~ metadata ~~~~~~~~~~ */
+
+table.gMetadata {
+
+}
+table.gMetadata td,
+table.gMetadata th {
+	border: 0;
+}
+table.gMetadata td.toggle {
+	text-align: right;
+}
+
+/* ~~~~~~~~~ upload ~~~~~~~~~~ */
+
+#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
+  width: 140px;
+  margin-left: 5px;
+}
+
+/* ~~~~ individual photo ~~~~~~~ */
+
+.gPhotoView img {
+  width: 400px;
+  height: 300px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 20px;
+}
+
+/* ~~~~~~~~~ comments ~~~~~~~~~~ */
+
+#gComments {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+#gComments h2 {
+  margin-top: 0;
+}
+#gComments ul {
+  margin: 0;
+}
+#gComments ul li {
+  list-style-type: none;
+  margin-bottom: 15px;
+}
+#gComments ul li p {
+  background-color: #E8E8E8;
+  margin-bottom: 2px;
+  padding: 4px;
+}
+#gComments ul li div {
+  padding: 8px;
+}
+
+/* ~~~~~~~~~ album ~~~~~~~~~~ */
+
+#gAlbumGridHeader {
+	height: 40px;
+	position: relative;
+}
+#gAlbumGridHeader h1 {
+	display: inline;
+}
+#gAlbumGridHeader span {
+	padding-left: 10px;
+}
+#gSlideshowLink {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+
+#gAlbumGrid .gItemContainer,
+#gAlbumGrid .gAlbumContainer {
+	width: 32%;
+	height: 220px;
+	float: left;
+	text-align: center;
+	border: 1px lightgray solid;
+	margin: 0px 0px 10px 1.49%;
+	padding: 5px 0px 5px 0px;
+}
+#gAlbumGrid .first {
+	margin: 0px 0px 10px 0px;
+}
+
+.gAlbum {
+	background-color: #D4DAFF;
+}
+.gAlbum h2 {
+	color: #000066;
+}
+
+.gItemContainer h2,
+.gAlbumContainer h2 {
+	margin: 5px 0px 5px 0px;
+}
+
+
+/* ~~~~~~~~~ tag cloud ~~~~~~~~~~ */
+
+.gTagCloud ul {
+	text-align: justify;
+	padding: 0;
+}
+.gTagCloud ul li {
+	text-align: justify;
+	display: inline;
+}
+.gTagCloud ul li a {
+	text-decoration: none;
+}
+.gTagCloud ul li a.size0 {
+	font-size: 100%;
+	font-weight: 100;
+	color: #99CCFF;
+}
+.gTagCloud ul li a.size1 {
+	font-size: 110%;
+	font-weight: 300;
+	color: #6699FF;
+}
+.gTagCloud ul li a.size2 {
+	font-size: 120%;
+	font-weight: 500;
+	color: #6699CC;
+}
+.gTagCloud ul li a.size3 {
+	font-size: 130%;
+	font-weight: 700;
+	color: #336699;
+}
+.gTagCloud ul li a.size4 {
+	font-size: 140%;
+	font-weight: 900;
+	color: #0E2B52;
+}
+.gTagCloud ul li a:hover {
+	color: #FF3300;
+	text-decoration: underline;
+}
+.gTagCloud form {
+	margin-top: 10px;
+}
+
+/* ~~~~~~~~~ album tree ~~~~~~~~~~ */
+
+#gAlbumTree {
+	border: 1px solid lightgray;
+	margin: 20px 0 20px 0;
+	padding: 5px;
+}
+#gAlbumTree #gTreeContainer {
+	border: 1px solid lightgray;
+	padding: 0 0 0 5px;
+}
+
+
+/**
+ ** **************************************************
+ * 6) Navigation and menus
+ ** **************************************************
+ */
+
+
+
+/* ~~~~~~~~~ pagination ~~~~~~~~~~ */
+
+#gPagination {
+	clear: both;
+	padding: 10px 0px 0px 0px;
+	text-align: center;
+}
+#gPagination a,
+#gPagination span {
+	border: 1px solid lightgray;
+	padding: 5px;
+	background-repeat: no-repeat;
+}
+#gPagination a:hover {
+	background-color: #F3F3F3;
+}
+#gPagination .first {
+	background-image: url('../images/first.png');
+	background-position: left;
+	padding-left: 20px;
+}
+#gPagination .first_inactive {
+	background-image: url('../images/first_inactive.png');
+	background-position: left;
+	padding-left: 20px;
+}
+#gPagination .previous {
+	background-image: url('../images/previous.png');
+	background-position: left;
+	padding-left: 17px;
+}
+#gPagination .previous_inactive {
+	background-image: url('../images/previous_inactive.png');
+	background-position: left;
+	padding-left: 17px;
+}
+#gPagination .next {
+	background-image: url('../images/next.png');
+	background-position: right;
+	padding-right: 17px;
+}
+#gPagination .next_inactive {
+	background-image: url('../images/next_inactive.png');
+	background-position: right;
+	padding-right: 17px;
+}
+#gPagination .last {
+	background-image: url('../images/last.png');
+	background-position: right;
+	padding-right: 20px;
+}
+#gPagination .last_inactive {
+	background-image: url('../images/last_inactive.png');
+	background-position: right;
+	padding-right: 20px;
+}
+
+
+/**
+ ** **************************************************
+ * 7) Tables
+ ** **************************************************
+ */
+
+
+/**
+ ** **************************************************
+ * 8) Forms
+ ** **************************************************
+ */
+
+#gCommentAdd {
+  width: 500px;
+}
+
+/* ----------- upload ----------------- */
+
+#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
+  width: 140px;
+  margin-left: 5px;
+}
+
+#gUploadForm-queue {
+  width: 500px;
+}
+
+#gUploadForm-queue td, #gUploadForm-queue th {
+  text-align: left;
+  border-color: #e7e7e7;
+}
+
+#gUploadForm-queue caption {
+  display: none;
+}
+
+#gUploadForm-queue thead th {
+  text-align: center;
+  border-bottom: 2px solid #000;
+}
+
+#gUploadForm-queue thead th, #gUploadForm-queue thead td {
+  background-color: #e7e7e7;
+}
+
+#gUploadForm-queue tfoot td {
+  border-top: 2px solid #000;
+}
+
+#gUploadForm-queue .filesize {
+  width: 60px;
+}
+
+#gUploadForm-queue td.filesize {
+  text-align: right;
+}
+
+#gUploadForm-queue tfoot td.filesize {
+  color: #ccc;
+}
+
+#gUploadForm-queue .action {
+  width: 40px;
+}
+
+#gUploadForm-button {
+  width: 130px;
+  margin-left: 370px;
+}
+
+/**
+ ** **************************************************
+ * 9) Browser hacks
+ ** **************************************************
+ */
+
+/* Keep containers holding only floated elements from collapsing in Safari */
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
diff --git a/themes/default/images/bg_sitemenu.png b/themes/default/images/bg_sitemenu.png
new file mode 100644
index 00000000..10595cf1
--- /dev/null
+++ b/themes/default/images/bg_sitemenu.png
diff --git a/themes/default/images/bg_sitemenu_hover.png b/themes/default/images/bg_sitemenu_hover.png
new file mode 100644
index 00000000..508f361f
--- /dev/null
+++ b/themes/default/images/bg_sitemenu_hover.png
diff --git a/themes/default/images/first_inactive.png b/themes/default/images/first_inactive.png
new file mode 100644
index 00000000..23cab473
--- /dev/null
+++ b/themes/default/images/first_inactive.png
diff --git a/themes/default/images/icon_breadcrumb_separator.gif b/themes/default/images/icon_breadcrumb_separator.gif
new file mode 100644
index 00000000..3de2d0d3
--- /dev/null
+++ b/themes/default/images/icon_breadcrumb_separator.gif
diff --git a/themes/default/images/last.png b/themes/default/images/last.png
new file mode 100644
index 00000000..3f147da4
--- /dev/null
+++ b/themes/default/images/last.png
diff --git a/themes/default/images/logo.png b/themes/default/images/logo.png
new file mode 100644
index 00000000..7d7b9b9b
--- /dev/null
+++ b/themes/default/images/logo.png
diff --git a/themes/default/images/next.png b/themes/default/images/next.png
new file mode 100644
index 00000000..4d82e93c
--- /dev/null
+++ b/themes/default/images/next.png
diff --git a/themes/default/images/previous_inactive.png b/themes/default/images/previous_inactive.png
new file mode 100644
index 00000000..15257800
--- /dev/null
+++ b/themes/default/images/previous_inactive.png
diff --git a/themes/default/images/thumbnail.jpg b/themes/default/images/thumbnail.jpg
new file mode 100644
index 00000000..1ddd58b3
--- /dev/null
+++ b/themes/default/images/thumbnail.jpg
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
new file mode 100644
index 00000000..10930daa
--- /dev/null
+++ b/themes/default/views/album.html.php
@@ -0,0 +1,72 @@
+<? 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>
+
+<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 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 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>
diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php
new file mode 100644
index 00000000..0ed808eb
--- /dev/null
+++ b/themes/default/views/page.html.php
@@ -0,0 +1,36 @@
+<? 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">
+      <?= $header ?>
+      <div id="bd">
+	<div id="yui-main">
+	  <div id="gContent" class="yui-b">
+	    <?= $content ?>
+	  </div>
+	</div>
+	<?= $sidebar ?>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/themes/default/views/page_footer.html.php b/themes/default/views/page_footer.html.php
new file mode 100644
index 00000000..4e15fbff
--- /dev/null
+++ b/themes/default/views/page_footer.html.php
@@ -0,0 +1,4 @@
+<? 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
new file mode 100644
index 00000000..58eb8847
--- /dev/null
+++ b/themes/default/views/page_header.html.php
@@ -0,0 +1,30 @@
+<? 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/page_sidebar.html.php
new file mode 100644
index 00000000..923b4e4e
--- /dev/null
+++ b/themes/default/views/page_sidebar.html.php
@@ -0,0 +1,141 @@
+<? defined("SYSPATH") or die("No direct script access."); ?>
+<div id="gSidebar" class="yui-b">
+
+  <div id="gAlbumTree">
+    <h2>Album Navigation</h2>
+
+    <div id="gTreeContainer"><!-- there might be a better way to make this accessible to the JS -->
+      <ul>
+	<li>Gallery
+	  <ul>
+	    <li>Friends &amp; Family
+	      <ul>
+		<li>Christmas 2006</li>
+		<li>Family Reunion</li>
+		<li>Christmas 2007</li>
+	      </ul>
+	    </li>
+	    <li>Vactions
+	      <ul>
+		<li>Cuba</li>
+		<li>Europe</li>
+	      </ul>
+	    </li>
+	  </ul>
+	</li>
+      </ul>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    //global variable to allow console inspection of tree:
+    var tree;
+
+    //anonymous function wraps the remainder of the logic:
+    (function() {
+
+    //function to initialize the tree:
+    function treeInit() {
+    buildRandomTextNodeTree();
+    }
+
+    //Function  creates the tree and
+    //builds between 3 and 7 children of the root node:
+    function buildRandomTextNodeTree() {
+    //instantiate the tree:
+    tree = new YAHOO.widget.TreeView("gTreeContainer");
+
+    // Expand and collapse happen prior to the actual expand/collapse,
+    // and can be used to cancel the operation
+    tree.subscribe("expand", function(node) {
+    YAHOO.log(node.index + " was expanded", "info", "example");
+    // return false; // return false to cancel the expand
+    });
+
+    tree.subscribe("collapse", function(node) {
+    YAHOO.log(node.index + " was collapsed", "info", "example");
+    });
+
+    // Trees with TextNodes will fire an event for when the label is clicked:
+    tree.subscribe("labelClick", function(node) {
+    YAHOO.log(node.index + " label was clicked", "info", "example");
+    });
+
+    //The tree is not created in the DOM until this method is called:
+    tree.draw();
+    }
+
+    //Add an onDOMReady handler to build the tree when the document is ready
+    YAHOO.util.Event.onDOMReady(treeInit);
+
+    })();
+  </script>
+
+
+  <table class="gMetadata">
+    <caption><h2>Album Info</h2></caption>
+    <tbody>
+      <tr>
+	<th>Name:</th>
+	<td><strong>Christmas 2007</strong></td>
+      </tr>
+      <tr>
+	<th>Taken:</th>
+	<td><span class="date" title="January 21, 2008 8:30pm">January 21, 2008</td>
+      </tr>
+      <tr>
+	<th>Location:</th>
+	<td><a href="#" title="see the location on a map">Mountain View</a></td>
+      </tr>
+      <tr>
+	<th>Owner:</th>
+	<td><a href="#">username</a></td>
+      </tr>
+      <tr>
+	<th>Uploaded:</th>
+	<td><span class="date" title="October 23, 2008 11:37am">October 23, 2008</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="gTagCloud">
+    <h2>Tag cloud</h2>
+    <ul>
+      <li><a href="#" class="m size0">animation</a></li>
+      <li><a href="#" class="m size0">art</a></li>
+      <li><a href="#" class="m size1">blind</a></li>
+      <li><a href="#" class="m size3">blog</a></li>
+      <li><a href="#" class="m size1">bug-tracker</a></li>
+      <li><a href="#" class="m size2">bugs20</a></li>
+      <li><a href="#" class="m size0">canvas</a></li>
+      <li><a href="#" class="m size0">classification</a></li>
+      <li><a href="#" class="m size4">cocktail</a></li>
+      <li><a href="#" class="m size0">exhibtion</a></li>
+      <li><a href="#" class="m size0">forum</a></li>
+      <li><a href="#" class="m size1">geo-tagging</a></li>
+      <li><a href="#" class="m size0">german</a></li>
+      <li><a href="#" class="m size0">germany</a></li>
+      <li><a href="#" class="m size0">gläser</a></li>
+      <li><a href="#" class="m size0">graffiti</a></li>
+      <li><a href="#" class="m size0">illustration</a></li>
+      <li><a href="#" class="m size0">ITP</a></li>
+      <li><a href="#" class="m size0">javascript</a></li>
+      <li><a href="#" class="m size0">miami</a></li>
+      <li><a href="#" class="m size0">miknow</a></li>
+      <li><a href="#" class="m size0">nyc</a></li>
+      <li><a href="#" class="m size0">NYU</a></li>
+      <li><a href="#" class="m size0">ontology</a></li>
+      <li><a href="#" class="m size0">open-source</a></li>
+      <li><a href="#" class="m size0">project</a></li>
+      <li><a href="#" class="m size0">school-of-information</a></li>
+      <li><a href="#" class="m size0">screenshot</a></li>
+      <li><a href="#" class="m size0">shiftspace</a></li>
+      <li><a href="#" class="m size0">shop</a></li>
+      <li><a href="#" class="m size0">tagging</a></li>
+      <li><a href="#" class="m size2">talkingpoints</a></li>
+      <li><a href="#" class="m size0">university-of-michigan</a></li>
+      <li><a href="#" class="m size1">usability</a></li>
+      <li><a href="#" class="m size0">writing</a></li>
+    </ul>
+  </div>
+</div>