14 files changed, 320 insertions, 295 deletions

diff --git a/themes/default/css/fix-ie.css b/themes/default/css/fix-ie.css
index 3d9604e6..eee88c15 100644
--- a/themes/default/css/fix-ie.css
+++ b/themes/default/css/fix-ie.css
@@ -1,26 +1,17 @@
 /**
  * Fix display in IE 6, 7
  */
-#gHeader,
-#gSiteMenu,
+
+#gBanner,
 .gBreadcrumbs,
 #gAlbumGrid,
 #gPager,
-#gViewMenu {
+#gViewMenu  {
   zoom: 1;
 }
 
-#gHeader #gLogo img {
-  margin-top: 5px;
-  margin-bottom: 0;
-}
-
-#gHeader #gSiteMenu {
-  margin-top: 28px;
-}
-
-#gHeader #gQuickSearchForm {
-  margin-bottom: 0;
+#gBanner {
+  z-index: 2;
 }
 
 input.submit {
@@ -44,7 +35,3 @@ input.submit {
 .gPager .ui-icon-right {
   width: 60px;
 }
-
-#gQuickPane {
-  height: 32px !important;
-}
\ No newline at end of file
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 88631e81..64ecf775 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -71,8 +71,12 @@ a,
 #gDialog a,
 .gButtonLink,
 .gButtonLink:hover,
-.gButtonLink:active {
-  color: #5382BF !important;
+.gButtonLink:active,
+a.ui-state-hover,
+input.ui-state-hover,
+button.ui-state-hover {
+  color: #5382bf !important;
+  cursor: pointer !important;
   text-decoration: none;
   -moz-outline-style: none;
 }
@@ -101,6 +105,12 @@ a:hover,
   float: left;
 }
 
+#gDialog #gMessage li {
+  width: 400px;
+  white-space: normal;
+  padding-left: 32px;
+}
+
 /* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 table {
@@ -131,7 +141,7 @@ fieldset {
   padding-bottom: .8em;
 }
 
-#gHeader fieldset,
+#gBanner fieldset,
 #gSidebar fieldset,
 .gShortForm fieldset {
   border: none;
@@ -142,7 +152,7 @@ legend {
   margin-left: 1em;
 }
 
-#gHeader legend,
+#gBanner legend,
 #gSidebar legend,
 #gContent #gSearchForm legend,
 input[type="hidden"],
@@ -276,12 +286,12 @@ li.gError select {
 /* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gMessage {
-  width: 99%;
+  width: 100%;
 }
 
-#gAdminAkismet .gSuccess,
 #gSiteStatus li,
-#gMessage li {
+#gMessage li,
+.gModuleStatus {
   border: 1px solid #ccc;
   margin-bottom: .4em;
 }
@@ -292,71 +302,48 @@ li.gError select {
   border-bottom: 1px solid #ccc;
 }
 
-#gSiteStatus .gError,
-#gMessage .gError,
-form p.gError,
-#gSiteStatus .gInfo,
-#gMessage .gInfo,
-#gSiteStatus .gSuccess,
-#gMessage .gSuccess,
-#gSiteStatus .gWarning,
-#gMessage .gWarning {
+.gModuleStatus {
+  clear: both;
+  margin-bottom: 1em;
+}
+
+.gError,
+.gInfo,
+.gSuccess,
+.gWarning {
   background-position: .4em 50%;
   background-repeat: no-repeat;
   padding: .4em .5em .4em 30px;
 }
 
 .gError {
-  background-color: #fcc;
-}
-
-form .gError {
-  color: #f00;
-}
-
-#gSiteStatus .gError,
-#gMessage .gError,
-form p.gError {
+  background-color: #f6cbca;
   background-image: url('../images/ico-error.png');
 }
 
 .gInfo {
   background-color: #e8e8e8;
-}
-
-#gSiteStatus .gInfo,
-#gMessage .gInfo {
   background-image: url('../images/ico-info.png');
 }
 
 .gSuccess {
-  background-color: #96EF95;
-}
-
-#gSiteStatus .gSuccess,
-#gMessage .gSuccess {
+  background-color: #d9efc2;
   background-image: url('../images/ico-success.png');
 }
 
 .gWarning {
-  background-color: #ff9;
-}
-
-#gSiteStatus .gWarning,
-#gMessage .gWarning {
+  background-color: #fcf9ce;
   background-image: url('../images/ico-warning.png');
 }
 
 form .gError,
 .gPager .gInfo {
-  background-color: #fff;
+  background-color: #fff !important;
 }
 
-#gAdminMaintenance .gError,
-#gAdminMaintenance .gInfo,
-#gAdminMaintenance .gWarning,
-#gAdminMaintenance .gSuccess {
-  background-image: none;
+.gPager .gInfo {
+  background-image: none !important;
+  padding: 0 !important;
 }
 
 /* Inline layout (forms, lists) ~~~~~~~~~~ */
@@ -387,21 +374,26 @@ form .gError,
 /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */
 
 #gHeader {
+  margin-bottom: 1em;
+}
+
+#gBanner {
   background-color: #e8e8e8;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid #ccc;
   font-size: .8em;
-  margin-bottom: 1em;
-  padding: 1em 20px 0 20px;
+  min-height: 5em;
+  padding: 1em 20px;
+  position: relative;
 }
 
 #gContent {
   font-size: 1.2em;
   padding-left: 20px;
+  position: relative;
   width: 696px;
 }
 
 #gSidebar {
-  background-color: #fff;
   font-size: .9em;
   padding: 0 20px;
   width: 220px;
@@ -421,18 +413,17 @@ form .gError,
 
 /* Header  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gHeader #gLogo img {
-  float: left;
-  margin: -4px 10px 0 0;
+#gBanner #gLogo img {
+  margin: 0;
 }
 
-#gHeader #gQuickSearchForm {
+#gBanner #gQuickSearchForm {
   clear: right;
   float: right;
-  margin: 1em 0;
+  margin-top: 1em;
 }
 
-#gHeader #gQuickSearchForm input[type='text'] {
+#gBanner #gQuickSearchForm input[type='text'] {
   width: 17em;
 }
 
@@ -449,41 +440,59 @@ form .gError,
 
 #gContent #gAlbumGrid {
   margin: 1em 0;
+  position: relative;
+  z-index: 1;
 }
 
 #gContent #gAlbumGrid .gItem {
-  border: 1px solid #e8e8e8;
-  border-right-color: #ccc;
-  border-bottom-color: #ccc;
+  background-color: #fff;
+  border: 1px solid #fff;
   float: left;
   font-size: .7em;
-  height: 240px;
+  height: 220px;
   overflow: hidden;
-  padding: 15px 8px 30px 8px;
+  padding: .6em 8px;
   position: relative;
   text-align: center;
   width: 213px;
+  z-index: 1;
 }
 
 #gContent #gAlbumGrid .gItem h2 {
   margin: 5px 0;
 }
 
+#gContent .gPhoto h2,
+#gContent .gItem .gMetadata {
+  display: none;
+}
+
 #gContent #gAlbumGrid .gAlbum {
   background-color: #e8e8e8;
 }
 
 #gContent #gAlbumGrid .gAlbum h2 span {
-  background: transparent url('../images/ico-album.png') no-repeat top left !important;
+  background: transparent url('../images/ico-album.png') no-repeat top left;
   display: inline-block;
   height: 16px;
   margin-right: 5px;
   width: 16px;
 }
 
+#gContent #gAlbumGrid .gHoverItem {
+  background-color: #fff;
+  border: 1px solid #000;
+}
+
+#gContent .gHoverItem h2,
+#gContent .gHoverItem .gMetadata {
+  display: block;
+}
+
 /* Individual photo content ~~~~~~~~~~~~~~ */
 
 #gContent #gItem {
+  position: relative;
   width: 99%;
 }
 
@@ -498,6 +507,7 @@ form .gError,
 
 #gContent #gComments {
   margin-top: 2em;
+  position: relative;
 }
 
 #gContent #gComments ul li {
@@ -529,18 +539,24 @@ form .gError,
   width: 32px;
 }
 
+#gAddCommentButton {
+  position: absolute;
+  right: 0;
+  top: 2px;
+}
+
 #gContent #gAddCommentForm {
   margin-top: 2em;
 }
 
 /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gHeader #gLoginMenu li,
+#gBanner #gLoginMenu li,
 #gFooter #gCredits li {
   display: inline;
 }
 
-#gHeader #gLoginMenu li {
+#gBanner #gLoginMenu li {
   padding-left: 1.2em;
 }
 
@@ -558,14 +574,13 @@ form .gError,
  *********************************************************************/
 
 #gSiteMenu,
-.gBreadcrumbs,
 #gTagCloud ul {
   font-size: 1.2em;
 }
 
 /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gHeader #gLoginMenu {
+#gBanner #gLoginMenu {
   color: #999;
   float: right;
 }
@@ -573,35 +588,58 @@ form .gError,
 /* Site Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gSiteMenu {
-  float: left;
-  margin-top: 20px;
-  padding: 0 20px 0 0;
+  bottom: 0;
+	display: none;
+  left: 140px;
+  position: absolute;
 }
 
 #gSiteMenu ul {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
-/* Thumb Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* Context Menu  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gContent .gThumbMenu {
+.gContextMenu {
+  position: absolute;
   bottom: 0;
   left: 0;
-  position: absolute;
+}
+
+.gItem .gContextMenu {
+  display: none;
+  margin-top: 2em;
   width: 100%;
 }
 
-#gContent .gThumbMenu li {
+#gItem .gContextMenu {
+  font-size: .7em;
+}
+
+#gItem .gContextMenu ul {
+  display: none;
+}
+
+.gContextMenu li {
   border-left: none;
   border-right: none;
   border-bottom: none;
 }
 
-#gContent .gThumbMenu li li {
-  padding: .3em;
+.gContextMenu li a {
+  display: block;
+  line-height: 1.6em;
 }
 
-#gContent .gThumbMenu a:hover {
+.gHoverItem .gContextMenu {
+  display: block;
+}
+
+.gHoverItem .gContextMenu li {
+  text-align: left;
+}
+
+.gHoverItem .gContextMenu a:hover {
   text-decoration: none;
 }
 
@@ -641,11 +679,7 @@ form .gError,
 /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .gBreadcrumbs {
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-  clear: both;
-  margin: 0 -20px;
-  padding-left: 20px;
+  padding: 0 20px;
 }
 
 .gBreadcrumbs li {
@@ -668,7 +702,13 @@ form .gError,
   font-weight: bold;
 }
 
-#gAddPhotos .gBreadcrumbs {
+#gDialog ul.gBreadcrumbs {
+  clear: both;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+#gDialog .gBreadcrumbs li {
   font-size: .9em;
 }
 
@@ -739,6 +779,10 @@ form .gError,
   text-decoration: underline;
 }
 
+#gWelcomeMessage p {
+  padding-bottom: 1em;
+}
+
 /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .gPager {
@@ -763,9 +807,7 @@ form .gError,
  * 6) Browser hacks
  *********************************************************************/
 
-#gSiteMenu:after,
 #gHeader:after,
-.gBreadcrumbs:after,
 #gAlbumGrid:after,
 .gPager:after,
 #gViewMenu:after {
@@ -793,17 +835,17 @@ form .gError,
 /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */
 
 .gLoadingLarge {
-  background: #e8e8e8 url('../images/loading-lg.gif') no-repeat center center;
+  background: #e8e8e8 url('../../../lib/images/loading-large.gif') no-repeat center center;
   font-size: 0;
 }
 
 .gDialogLoadingLarge {
-  background: url('../images/loading-lg.gif') no-repeat center center !important;
+  background: url('../../../lib/images/loading-large.gif') no-repeat center center !important;
   font-size: 0;
 }
 
 .gLoadingSmall {
-  background: #e8e8e8 url('../images/loading-sm.gif') no-repeat center center;
+  background: #e8e8e8 url('../../../lib/images/loading-small.gif') no-repeat center center;
   font-size: 0;
 }
 
@@ -823,7 +865,6 @@ form .gError,
 .ui-widget-overlay {
   background: #000;
   opacity: .7;
-  filter: Alpha(Opacity=70);
 }
 
 #gDialog {
@@ -854,6 +895,10 @@ form .gError,
   display: none;
 }
 
+#gDialog p {
+	margin: 0;
+}
+
 /* jQuery UI ThemeRoller buttons */
 
 .gButtonLink {
@@ -906,13 +951,13 @@ form .gError,
 /* Server Add */
 
 #gServerAdd button {
-  float: left;
   margin-bottom: .5em;
 }
 
 #gServerAddTree {
   cursor: pointer;
   padding-left: 4px;
+  width: 95%;
 }
 
 #gServerAddTree li {
@@ -926,34 +971,26 @@ form .gError,
 
 #gServerAddTree {
   border: 1px solid #ccc;
-  height: 25em;
+  height: 20em;
   overflow: auto;
   margin-bottom: .5em;
-  padding-top: .5em;
-  padding-bottom: .5em;
+  padding: .5em;
 }
 
 #gServerAdd ul ul li {
   padding-left: 1.2em;
 }
 
-#gServerAdd .gBreadcrumbs {
-  font-size: 1em;
-  padding: 0;
-  margin: 0;
-  border-top-width: 0;
-}
+/* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#gServerAdd p {
-  margin: 0;
+#gEditPermissionForm {
+	clear: both;
 }
-
-#gServerAdd .gBreadcrumbs li {
-  padding: 10px 6px 10px 16px;
+#gEditPermissionForm fieldset {
+	border: 1px solid #cccccc;
+	padding: 0;
 }
 
-/* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
 #gPermissions .gDenied,
 #gPermissions .gAllowed {
   text-align: center;
@@ -975,9 +1012,9 @@ form .gError,
   display: inline-block;
 }
 
-#gAddPhotos p {
-  margin: 0;
-  padding: 0;
+#gAddPhotos span {
+  clear: both;
+  display: block;
 }
 
 #gAddPhotosCanvas {
diff --git a/themes/default/images/favicon.ico b/themes/default/images/favicon.ico
deleted file mode 100644
index 66531d8e..00000000
--- a/themes/default/images/favicon.ico
+++ /dev/null
diff --git a/themes/default/images/loading-lg.gif b/themes/default/images/loading-lg.gif
deleted file mode 100644
index cc70a7a8..00000000
--- a/themes/default/images/loading-lg.gif
+++ /dev/null
diff --git a/themes/default/images/loading-sm.gif b/themes/default/images/loading-sm.gif
deleted file mode 100644
index d0bce154..00000000
--- a/themes/default/images/loading-sm.gif
+++ /dev/null
diff --git a/themes/default/images/logo.png b/themes/default/images/logo.png
deleted file mode 100644
index 7d7b9b9b..00000000
--- a/themes/default/images/logo.png
+++ /dev/null
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 92a42ded..949933e9 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -1,8 +1,5 @@
 /**
- * Initialize jQuery UI and Plugin elements
- *
- * @todo Standardize how elements requiring listeners are handled
- *        http://docs.jquery.com/Events/live
+ * Initialize jQuery UI and Gallery Plugin elements
  */
 
 var shortForms = new Array(
@@ -13,9 +10,6 @@ var shortForms = new Array(
 
 $(document).ready(function() {
 
-  // Remove .gMenu from thumb menu's before initializing Superfish
-  // @todo gallery_menu should only apply gMenu to top-level menus, submenus should be gSubMenu-N
-
   // Initialize Superfish menus
   $("ul.gMenu").addClass("sf-menu");
   $('ul.sf-menu').superfish({
@@ -29,15 +23,11 @@ $(document).ready(function() {
   $("#gSiteMenu").css("display", "block");
 
   // Initialize status message effects
-  $("#gMessage li").showMessage();
+  $("#gMessage li").gallery_show_message();
 
   // Initialize dialogs
-  $(".gMenuLink").addClass("gDialogLink");
   $("#gLoginLink").addClass("gDialogLink");
-  var dialogLinks = $(".gDialogLink");
-  for (var i=0; i < dialogLinks.length; i++) {
-    $(dialogLinks[i]).bind("click", handleDialogEvent);
-  }
+  $(".gDialogLink").gallery_dialog();
 
   // Initialize view menu
   if ($("#gViewMenu").length) {
@@ -53,27 +43,74 @@ $(document).ready(function() {
   // Apply jQuery UI button css to submit inputs
   $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all");
 
+  // Apply styles and icon classes to gContextMenu
+  if ($(".gContextMenu").length) {
+    $(".gContextMenu li").addClass("ui-state-default");
+    $(".gContextMenu a").addClass("gButtonLink ui-icon-left");
+    $(".gContextMenu a").prepend("<span class=\"ui-icon\"></span>");
+    $(".gContextMenu a span").each(function() {
+      var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]+/).toString();
+      $(this).addClass(iconClass);
+    });
+  }
+
   // Album view only
   if ($("#gAlbumGrid").length) {
     // Vertical align thumbnails/metadata in album grid
-    $(".gItem").vAlign();
+    $(".gItem").gallery_valign();
+
+    // Initialize context menus
+    $(".gItem").hover(
+      function(){
+        // Insert invisible placeholder to hold the item's position in the grid
+        var placeHolder = $(this).clone();
+        $(placeHolder).attr("id", "gPlaceHolder");
+        $(placeHolder).css("visibility", "hidden");
+        $(this).after($(placeHolder));
+        // Style and position the item
+        $(this).addClass("gHoverItem");
+        var position = $(this).position();
+        $(this).css("position", "absolute");
+        $(this).css("top", position.top);
+        $(this).css("left", position.left);
+        $(this).css("z-index", "1000");
+        // Initialize the contextual menu
+        $(this).gallery_context_menu();
+        // Set height based on height of descendents
+        var title = $(this).find("h2");
+        var meta = $(this).find(".gMetadata");
+        var context_label = $(this).find(".gContextMenu li:first");
+        var item_ht = $(this).height();
+        var title_ht = $(title).gallery_height();
+        var meta_ht = $(meta).gallery_height();
+        var context_label_ht = $(context_label).gallery_height();
+        $(this).height(item_ht + title_ht + meta_ht + context_label_ht);
+      },
+      function() {
+        // Reset item height, position, and z-index
+        var sib_height = $(this).next().height();
+        $(this).css("height", sib_height);
+        $(this).css("position", "relative");
+        $(this).css("top", null);
+        $(this).css("left", null);
+        $(this).css("z-index", null);
+        // Remove the placeholder and hover class from the item
+        $("#gPlaceHolder").remove();
+        $(this).removeClass("gHoverItem");
+      }
+    );
   }
 
-  // Photo/Item item view only
+  // Photo/Item item view
   if ($("#gItem").length) {
-    // Ensure that sized image versions
-    // fit inside their container
-    sizedImage();
-
-    // Collapse comments form, insert button to expand
-    if ($("#gAddCommentForm").length) {
-      var showCommentForm = '<a href="#add_comment_form" class="showCommentForm gButtonLink ui-corner-all ui-icon-left ui-state-default right"><span class="ui-icon ui-icon-comment"></span>' + ADD_A_COMMENT + '</a>';
-      $("#gAddCommentForm").hide();
-      $("#gComments").prepend(showCommentForm);
-      $(".showCommentForm").click(function(){
-        $("#gAddCommentForm").show(1000);
-      });
-    }
+    // Ensure the resized image fits within its container
+    $("#gItem").gallery_fit_photo();
+
+    // Initialize context menus
+    var resize = $("#gItem").gallery_get_photo();
+    $(resize).hover(function(){
+      $(this).gallery_context_menu();
+    });
 
     // Add scroll effect for links to named anchors
     $.localScroll({
@@ -81,56 +118,9 @@ $(document).ready(function() {
       duration: 1000,
       hash: true
     });
-
   }
 
-  // Add hover state for buttons
-  $(".ui-state-default").hover(
-    function(){
-      $(this).addClass("ui-state-hover");
-    },
-    function(){
-      $(this).removeClass("ui-state-hover");
-    }
-  );
-
-  // Initialize thumbnail menus
-  // @todo Toggle between north and south caret's on hover
-  if ($("#gContent .gThumbMenu").length) {
-    $("#gContent .gThumbMenu li").addClass("ui-state-default");
-    $("#gContent .gThumbMenu li a")
-      .not('[class]')
-      .addClass("gButtonLink ui-icon ui-icon-caret-l-n")
-      .css({
-        height: "10px",
-        margin: "0",
-        padding: "0 0 3px 0"
-      });
-
-    $(".gThumbMenu ul").hide();
-    $(".gThumbMenu").hover(
-      function() {
-        $(this).find("ul").slideDown("fast");
-      },
-      function() {
-	      $(this).find("ul").slideUp("slow");
-      }
-    );
-  }
+  // Initialize button hover effect
+  $.fn.gallery_hover_init();
 
 });
-
-/**
- * Reduce width of sized photo if it's wider than its parent container
- */
-function sizedImage() {
-  var containerWidth = $("#gItem").width();
-  var oPhoto = $("#gItem img").filter(function() {
-    return this.id.match(/gPhotoId-/);
-  });
-  if (containerWidth < oPhoto.width()) {
-    var proportion = containerWidth / oPhoto.width();
-    oPhoto.width(containerWidth);
-    oPhoto.height(proportion * oPhoto.height());
-  }
-}
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index 65ea3381..01f7be50 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -2,8 +2,8 @@
 <? // @todo Set hover on AlbumGrid list items for guest users ?>
 <div id="gInfo">
   <?= $theme->album_top() ?>
-  <h1><?= p::purify($item->title) ?></h1>
-  <div class="gDescription"><?= nl2br(p::purify($item->description)) ?></div>
+  <h1><?= html::purify($item->title) ?></h1>
+  <div class="gDescription"><?= nl2br(html::purify($item->description)) ?></div>
 </div>
 
 <ul id="gAlbumGrid">
@@ -19,8 +19,8 @@
       <?= $child->thumb_img(array("class" => "gThumbnail")) ?>
     </a>
     <?= $theme->thumb_bottom($child) ?>
-    <?= $theme->thumb_menu($child) ?>
-    <h2><span></span><a href="<?= $child->url() ?>"><?= p::clean($child->title) ?></a></h2>
+    <?= $theme->context_menu($child, "#gItemId-{$child->id} .gThumbnail") ?>
+    <h2><span></span><a href="<?= $child->url() ?>"><?= html::purify($child->title) ?></a></h2>
     <ul class="gMetadata">
       <?= $theme->thumb_info($child) ?>
     </ul>
@@ -30,7 +30,7 @@
   <? if ($user->admin || access::can("add", $item)): ?>
   <? $addurl = url::file("index.php/simple_uploader/app/$item->id") ?>
   <li><?= t("There aren't any photos here yet! <a %attrs>Add some</a>.",
-            array("attrs" => "href=\"$addurl\" class=\"gDialogLink\"")) ?></li>
+            array("attrs" => html::mark_clean("href=\"$addurl\" class=\"gDialogLink\""))) ?></li>
   <? else: ?>
   <li><?= t("There aren't any photos here yet!") ?></li>
   <? endif; ?>
diff --git a/themes/default/views/dynamic.html.php b/themes/default/views/dynamic.html.php
index 2d122e69..9ed9d69b 100644
--- a/themes/default/views/dynamic.html.php
+++ b/themes/default/views/dynamic.html.php
@@ -3,7 +3,7 @@
   <div id="gAlbumHeaderButtons">
     <?= $theme->dynamic_top() ?>
   </div>
-  <h1><?= p::clean($title) ?></h1>
+  <h1><?= html::clean($title) ?></h1>
 </div>
 
 <ul id="gAlbumGrid">
@@ -16,7 +16,7 @@
            width="<?= $child->thumb_width ?>"
            height="<?= $child->thumb_height ?>" />
     </a>
-    <h2><?= p::purify($child->title) ?></h2>
+    <h2><?= html::purify($child->title) ?></h2>
     <?= $theme->thumb_bottom($child) ?>
     <ul class="gMetadata">
       <?= $theme->thumb_info($child) ?>
diff --git a/themes/default/views/footer.html.php b/themes/default/views/footer.html.php
deleted file mode 100644
index 040a4062..00000000
--- a/themes/default/views/footer.html.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php defined("SYSPATH") or die("No direct script access.") ?>
-<?= $theme->footer() ?>
-<? if ($footer_text = module::get_var("gallery", "footer_text")): ?>
-<?= $footer_text ?>
-<? endif ?>
-
-<? if (module::get_var("gallery", "show_credits")): ?>
-<ul id="gCredits">
-  <?= $theme->credits() ?>
-</ul>
-<? endif ?>
diff --git a/themes/default/views/header.html.php b/themes/default/views/header.html.php
deleted file mode 100644
index 5428d9fd..00000000
--- a/themes/default/views/header.html.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php defined("SYSPATH") or die("No direct script access.") ?>
-<?= $theme->header_top() ?>
-<? if ($header_text = module::get_var("gallery", "header_text")): ?>
-<?= $header_text ?>
-<? else: ?>
-<a id="gLogo" href="<?= url::site("albums/1") ?>" title="<?= t("go back to the Gallery home") ?>">
-  <img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site") ?>" src="<?= $theme->theme_url("images/logo.png") ?>" />
-</a>
-<? endif ?>
-
-<div id="gSiteMenu" style="display: none">
-<?= $theme->site_menu() ?>
-</div>
-
-<?= $theme->header_bottom() ?>
-
-<? if (!empty($parents)): ?>
-<ul class="gBreadcrumbs">
-  <? foreach ($parents as $parent): ?>
-  <li>
-    <a href="<?= url::site("albums/{$parent->id}?show=$item->id") ?>">
-      <?= p::purify($parent->title) ?>
-    </a>
-  </li>
-  <? endforeach ?>
-  <li class="active"><?= p::purify($item->title) ?></li>
-</ul>
-<? endif ?>
diff --git a/themes/default/views/movie.html.php b/themes/default/views/movie.html.php
index 66c80ded..910814dd 100644
--- a/themes/default/views/movie.html.php
+++ b/themes/default/views/movie.html.php
@@ -2,25 +2,36 @@
 <div id="gItem">
   <?= $theme->photo_top() ?>
 
-  <ul id="gPager">
-    <li><?= t("%position of %total", array("position" => $position, "total" => $sibling_count)) ?></li>
-    <? if ($previous_item): ?>
-    <li><span class="ui-icon ui-icon-seek-prev"></span><a href="<?= $previous_item->url() ?>"><?= t("previous") ?></a></li>
-    <? endif ?>
-    <? if ($next_item): ?>
-    <li><a href="<?= $next_item->url() ?>"><?= t("next") ?></a><span class="ui-icon ui-icon-seek-next"></span></li>
-    <? endif ?>
+  <ul class="gPager">
+    <li>
+      <? if ($previous_item): ?>
+      <a href="<?= $previous_item->url() ?>" class="gButtonLink ui-icon-left ui-state-default ui-corner-all">
+      <span class="ui-icon ui-icon-triangle-1-w"></span><?= t("previous") ?></a>
+      <? else: ?>
+      <a class="gButtonLink ui-icon-left ui-state-disabled ui-corner-all">
+      <span class="ui-icon ui-icon-triangle-1-w"></span><?= t("previous") ?></a>
+      <? endif; ?>
+    </li>
+    <li class="gInfo"><?= t("%position of %total", array("position" => $position, "total" => $sibling_count)) ?></li>
+    <li class="txtright">
+      <? if ($next_item): ?>
+      <a href="<?= $next_item->url() ?>" class="gButtonLink ui-icon-right ui-state-default ui-corner-all">
+      <span class="ui-icon ui-icon-triangle-1-e"></span><?= t("next") ?></a>
+      <? else: ?>
+      <a class="gButtonLink ui-icon-right ui-state-disabled ui-corner-all">
+      <span class="ui-icon ui-icon-triangle-1-e"></span><?= t("next") ?></a>
+      <? endif ?>
+    </li>
   </ul>
 
+
   <?= $item->movie_img(array("class" => "gMovie", "id" => "gMovieId-{$item->id}")) ?>
 
   <div id="gInfo">
-    <h1><?= p::purify($item->title) ?></h1>
-       <div><?= nl2br(p::purify($item->description)) ?></div>
+    <h1><?= html::purify($item->title) ?></h1>
+       <div><?= nl2br(html::purify($item->description)) ?></div>
   </div>
 
-  <script type="text/javascript">
-    var ADD_A_COMMENT = "<?= t("Add a comment") ?>";
-  </script>
   <?= $theme->photo_bottom() ?>
+  <?= $theme->context_menu($item, "#gMovieId-{$item->id}") ?>
 </div>
diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php
index 181a2c46..19d8cc00 100644
--- a/themes/default/views/page.html.php
+++ b/themes/default/views/page.html.php
@@ -10,26 +10,26 @@
       <? else: ?>
         <? if ($theme->item()): ?>
           <? if ($theme->item()->is_album()): ?>
-          <?= t("Browse Album :: %album_title", array("album_title" => p::clean($theme->item()->title))) ?>
+          <?= t("Browse Album :: %album_title", array("album_title" => $theme->item()->title)) ?>
           <? elseif ($theme->item()->is_photo()): ?>
-          <?= t("Photo :: %photo_title", array("photo_title" => p::clean($theme->item()->title))) ?>
+          <?= t("Photo :: %photo_title", array("photo_title" => $theme->item()->title)) ?>
           <? else: ?>
-          <?= t("Movie :: %movie_title", array("movie_title" => p::clean($theme->item()->title))) ?>
+          <?= t("Movie :: %movie_title", array("movie_title" => $theme->item()->title)) ?>
           <? endif ?>
         <? elseif ($theme->tag()): ?>
-          <?= t("Browse Tag :: %tag_title", array("tag_title" => p::clean($theme->tag()->name))) ?>
+          <?= t("Browse Tag :: %tag_title", array("tag_title" => $theme->tag()->name)) ?>
         <? else: /* Not an item, not a tag, no page_title specified.  Help! */ ?>
           <?= t("Gallery") ?>
         <? endif ?>
       <? endif ?>
     </title>
-    <link rel="shortcut icon" href="<?= $theme->theme_url("images/favicon.ico") ?>" type="image/x-icon" />
-    <?= $theme->css("lib/yui/reset-fonts-grids.css") ?>
-    <?= $theme->css("lib/superfish/css/superfish.css") ?>
-    <?= $theme->css("lib/themeroller/ui.base.css") ?>
-    <?= $theme->theme_css("css/screen.css") ?>
+    <link rel="shortcut icon" href="<?= url::file("lib/images/favicon.ico") ?>" type="image/x-icon" />
+    <?= $theme->css("yui/reset-fonts-grids.css") ?>
+    <?= $theme->css("superfish/css/superfish.css") ?>
+    <?= $theme->css("themeroller/ui.base.css") ?>
+    <?= $theme->css("screen.css") ?>
     <!--[if lt IE 8]>
-    <link rel="stylesheet" type="text/css" href="<?= $theme->theme_url("css/fix-ie.css") ?>"
+    <link rel="stylesheet" type="text/css" href="<?= $theme->url("css/fix-ie.css") ?>"
           media="screen,print,projection" />
     <![endif]-->
     <? if ($theme->page_type == 'album'): ?>
@@ -45,26 +45,27 @@
     </style>
       <? endif ?>
     <? endif ?>
-    <?= $theme->script("lib/jquery.js") ?>
-    <?= $theme->script("lib/jquery.form.js") ?>
-    <?= $theme->script("lib/jquery-ui.js") ?>
-    <?= $theme->script("lib/gallery.common.js") ?>
+    <?= $theme->script("jquery.js") ?>
+    <?= $theme->script("jquery.form.js") ?>
+    <?= $theme->script("jquery-ui.js") ?>
+    <?= $theme->script("gallery.common.js") ?>
     <? /* MSG_CANCEL is required by gallery.dialog.js */ ?>
     <script type="text/javascript">
-    var MSG_CANCEL = "<?= t('Cancel') ?>";
+    var MSG_CANCEL = <?= t('Cancel')->for_js() ?>;
     </script>
-    <?= $theme->script("lib/gallery.dialog.js") ?>
-    <?= $theme->script("lib/gallery.form.js") ?>
-    <?= $theme->script("lib/superfish/js/superfish.js") ?>
-    <?= $theme->script("lib/jquery.localscroll.js") ?>
-    <?= $theme->theme_script("js/ui.init.js") ?>
+    <?= $theme->script("gallery.ajax.js") ?>
+    <?= $theme->script("gallery.dialog.js") ?>
+    <?= $theme->script("gallery.form.js") ?>
+    <?= $theme->script("superfish/js/superfish.js") ?>
+    <?= $theme->script("jquery.localscroll.js") ?>
+    <?= $theme->script("ui.init.js") ?>
 
     <? /* These are page specific, but if we put them before $theme->head() they get combined */ ?>
     <? if ($theme->page_type == "photo"): ?>
-    <?= $theme->script("lib/jquery.scrollTo.js") ?>
-    <?= $theme->script("lib/gallery.show_full_size.js") ?>
+    <?= $theme->script("jquery.scrollTo.js") ?>
+    <?= $theme->script("gallery.show_full_size.js") ?>
     <? elseif ($theme->page_type == "movie"): ?>
-    <?= $theme->script("lib/flowplayer.js") ?>
+    <?= $theme->script("flowplayer.js") ?>
     <? endif ?>
 
     <?= $theme->head() ?>
@@ -75,7 +76,38 @@
     <div id="doc4" class="yui-t5 gView">
       <?= $theme->site_status() ?>
       <div id="gHeader">
-        <?= new View("header.html") ?>
+        <div id="gBanner">
+          <?= $theme->header_top() ?>
+          <? if ($header_text = module::get_var("gallery", "header_text")): ?>
+          <?= $header_text ?>
+          <? else: ?>
+          <a id="gLogo" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>">
+            <img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" />
+          </a>
+          <? endif ?>
+          <div id="gSiteMenu">
+          <?= $theme->site_menu() ?>
+          </div>
+          <?= $theme->header_bottom() ?>
+        </div>
+
+        <? if (!empty($parents)): ?>
+        <ul class="gBreadcrumbs">
+          <? foreach ($parents as $parent): ?>
+          <li>
+            <!-- Adding ?show=<id> causes Gallery3 to display the page
+                 containing that photo.  For now, we just do it for
+                 the immediate parent so that when you go back up a
+                 level you're on the right page. -->
+            <a href="<?= $parent->url($parent == $theme->item()->parent() ?
+                     "show={$theme->item()->id}" : null) ?>">
+              <?= html::purify($parent->title) ?>
+            </a>
+          </li>
+          <? endforeach ?>
+          <li class="active"><?= html::purify($theme->item()->title) ?></li>
+        </ul>
+        <? endif ?>
       </div>
       <div id="bd">
         <div id="yui-main">
@@ -93,7 +125,16 @@
         </div>
       </div>
       <div id="gFooter">
-        <?= new View("footer.html") ?>
+        <?= $theme->footer() ?>
+        <? if ($footer_text = module::get_var("gallery", "footer_text")): ?>
+        <?= $footer_text ?>
+        <? endif ?>
+
+        <? if (module::get_var("gallery", "show_credits")): ?>
+        <ul id="gCredits">
+          <?= $theme->credits() ?>
+        </ul>
+        <? endif ?>
       </div>
     </div>
     <?= $theme->page_bottom() ?>
diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php
index bf4d9da3..b0096043 100644
--- a/themes/default/views/photo.html.php
+++ b/themes/default/views/photo.html.php
@@ -5,7 +5,7 @@
 <script>
   $(document).ready(function() {
     $(".gFullSizeLink").click(function() {
-      show_full_size("<?= $theme->item()->file_url() ?>", "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>");
+      $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>");
       return false;
     });
   });
@@ -40,22 +40,20 @@
   <div id="gPhoto">
     <?= $theme->resize_top($item) ?>
     <? if (access::can("view_full", $item)): ?>
-    <a href="<?= $item->file_url() ?>" class="gFullSizeLink" title="<?= t("View full size") ?>">
+    <a href="<?= $item->file_url() ?>" class="gFullSizeLink" title="<?= t("View full size")->for_html_attr() ?>">
       <? endif ?>
       <?= $item->resize_img(array("id" => "gPhotoId-{$item->id}", "class" => "gResize")) ?>
       <? if (access::can("view_full", $item)): ?>
     </a>
     <? endif ?>
     <?= $theme->resize_bottom($item) ?>
+    <?= $theme->context_menu($item, "#gPhotoId-{$item->id}") ?>
   </div>
 
   <div id="gInfo">
-    <h1><?= p::purify($item->title) ?></h1>
-    <div><?= nl2br(p::purify($item->description)) ?></div>
+    <h1><?= html::purify($item->title) ?></h1>
+    <div><?= nl2br(html::purify($item->description)) ?></div>
   </div>
 
-  <script type="text/javascript">
-    var ADD_A_COMMENT = "<?= t("Add a comment") ?>";
-  </script>
   <?= $theme->photo_bottom() ?>
 </div>