Checked in jQuery superfish menu plugin, applied to item options menu. Updated album/item view icons.

13 files changed, 421 insertions, 120 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 3f9c0fa7..371c2d38 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -315,7 +315,7 @@ table.gBlockContent td {
 }
 
 #gAlbumGrid {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 
 .gItem {
@@ -500,9 +500,30 @@ table.gMetadata td.toggle {
   top: 0;
 }
 
-#gItemMenu li {
-  float: left;
-  margin: 0 3px;
+#gItemMenu #gAlbumLink,
+#gItemMenu #gHybridLink, 
+#gItemMenu #gSlideshowLink,
+#gItemMenu #gFullsizeLink {
+  color: transparent;
+  width: 20px;
+  height: 1em;
+  overflow: hidden;
+}
+
+#gItemMenu #gAlbumLink {
+  background: url('../images/ico-view-album.png') no-repeat center center;
+}
+
+#gItemMenu #gHybridLink {
+  background: url('../images/ico-view-hybrid.png') no-repeat center center;
+}
+
+#gItemMenu #gSlideshowLink {
+  background: url('../images/ico-view-slideshow.png') no-repeat center center;
+}
+
+#gItemMenu #gFullsizeLink {
+  background: url('../images/ico-view-fullsize.png') no-repeat center center;
 }
 
 /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@@ -764,7 +785,6 @@ span.gInPlaceEdit:hover {
 }
 
 #gDialog form {
-	width: 450px;
 }
 
 .gDialogLink {
@@ -825,144 +845,144 @@ span.gInPlaceEdit:hover {
 
 /*dialog*/
 .ui-dialog {
-	font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
-	font-size: 1.2em;
-	background: #f3f3f3 url(../jquery/images/f3f3f3_40x100_textures_01_flat_0.png) 0 0 repeat-x;
-	color: #362b36;
-	border: 4px solid #dddddd;
-	position: relative;
+  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
+  font-size: 1.2em;
+  background: #f3f3f3 url(../jquery/images/f3f3f3_40x100_textures_01_flat_0.png) 0 0 repeat-x;
+  color: #362b36;
+  border: 4px solid #dddddd;
+  position: relative;
 }
 .ui-resizable-handle {
-	position: absolute;
-	font-size: 0.1px;
-	z-index: 99999;
+  position: absolute;
+  font-size: 0.1px;
+  z-index: 99999;
 }
 .ui-resizable .ui-resizable-handle {
-	display: block; 
+  display: block; 
 }
 body .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
 body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
 .ui-resizable-n { 
-	cursor: n-resize; 
-	height: 7px; 
-	width: 100%; 
-	top: -5px; 
-	left: 0px;  
+  cursor: n-resize; 
+  height: 7px; 
+  width: 100%; 
+  top: -5px; 
+  left: 0px;  
 }
 .ui-resizable-s { 
-	cursor: s-resize; 
-	height: 7px; 
-	width: 100%; 
-	bottom: -5px; 
-	left: 0px; 
+  cursor: s-resize; 
+  height: 7px; 
+  width: 100%; 
+  bottom: -5px; 
+  left: 0px; 
 }
 .ui-resizable-e { 
-	cursor: e-resize; 
-	width: 7px; 
-	right: -5px; 
-	top: 0px; 
-	height: 100%; 
+  cursor: e-resize; 
+  width: 7px; 
+  right: -5px; 
+  top: 0px; 
+  height: 100%; 
 }
 .ui-resizable-w { 
-	cursor: w-resize; 
-	width: 7px; 
-	left: -5px; 
-	top: 0px; 
-	height: 100%;
+  cursor: w-resize; 
+  width: 7px; 
+  left: -5px; 
+  top: 0px; 
+  height: 100%;
 }
 .ui-resizable-se { 
-	cursor: se-resize; 
-	width: 18px; 
-	height: 18px; 
-	right: -5px; 
-	bottom: -5px; 
-	background: url(../jquery/images/222222_11x11_icon_resize_se.gif) no-repeat 0 0;
+  cursor: se-resize; 
+  width: 18px; 
+  height: 18px; 
+  right: -5px; 
+  bottom: -5px; 
+  background: url(../jquery/images/222222_11x11_icon_resize_se.gif) no-repeat 0 0;
 }
 .ui-resizable-sw { 
-	cursor: sw-resize; 
-	width: 9px; 
-	height: 9px; 
-	left: -5px; 
-	bottom: -5px;  
+  cursor: sw-resize; 
+  width: 9px; 
+  height: 9px; 
+  left: -5px; 
+  bottom: -5px;  
 }
 .ui-resizable-nw { 
-	cursor: nw-resize; 
-	width: 9px; 
-	height: 9px; 
-	left: -5px; 
-	top: -5px; 
+  cursor: nw-resize; 
+  width: 9px; 
+  height: 9px; 
+  left: -5px; 
+  top: -5px; 
 }
 .ui-resizable-ne { 
-	cursor: ne-resize; 
-	width: 9px; 
-	height: 9px; 
-	right: -5px; 
-	top: -5px; 
+  cursor: ne-resize; 
+  width: 9px; 
+  height: 9px; 
+  right: -5px; 
+  top: -5px; 
 }
 .ui-dialog-titlebar {
-	padding: .5em 1.5em .5em 1em;
-	color: #444444;
-	background: #e6e6e6 url(../jquery/images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
-	border-bottom: 1px solid #cccccc;
-	font-size: 1em;
-	font-weight: normal;
-	position: relative;
+  padding: .5em 1.5em .5em 1em;
+  color: #444444;
+  background: #e6e6e6 url(../jquery/images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
+  border-bottom: 1px solid #cccccc;
+  font-size: 1em;
+  font-weight: normal;
+  position: relative;
 }
 .ui-dialog-title {}
 .ui-dialog-titlebar-close {
-	background: url(../jquery/images/888888_11x11_icon_close.gif) 0 0 no-repeat;
-	position: absolute;
-	right: 8px;
-	top: .7em;
-	width: 11px;
-	height: 11px;
-	z-index: 100;
+  background: url(../jquery/images/888888_11x11_icon_close.gif) 0 0 no-repeat;
+  position: absolute;
+  right: 8px;
+  top: .7em;
+  width: 11px;
+  height: 11px;
+  z-index: 100;
 }
 .ui-dialog-titlebar-close-hover, .ui-dialog-titlebar-close:hover {
-	background: url(../jquery/images/222222_11x11_icon_close.gif) 0 0 no-repeat;
+  background: url(../jquery/images/222222_11x11_icon_close.gif) 0 0 no-repeat;
 }
 .ui-dialog-titlebar-close:active {
-	background: url(../jquery/images/ffffff_11x11_icon_close.gif) 0 0 no-repeat;
+  background: url(../jquery/images/ffffff_11x11_icon_close.gif) 0 0 no-repeat;
 }
 .ui-dialog-titlebar-close span {
-	display: none;
+  display: none;
 }
 .ui-dialog-content {
-	color: #362b36;
-	padding: 1.5em 1.7em;	
+  color: #362b36;
+  padding: 1.5em 1.7em;  
 }
 .ui-dialog-buttonpane {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	text-align: left;
-	border-top: 1px solid #dddddd;
-	background: #f3f3f3;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: left;
+  border-top: 1px solid #dddddd;
+  background: #f3f3f3;
 }
 .ui-dialog-buttonpane button {
-	margin: .5em 0 .5em 8px;
-	color: #444444;
-	background: #e6e6e6 url(../jquery/images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
-	font-size: 1em;
-	border: 1px solid #cccccc;
-	cursor: pointer;
-	padding: .2em .6em .3em .6em;
-	line-height: 1.4em;
+  margin: .5em 0 .5em 8px;
+  color: #444444;
+  background: #e6e6e6 url(../jquery/images/e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
+  font-size: 1em;
+  border: 1px solid #cccccc;
+  cursor: pointer;
+  padding: .2em .6em .3em .6em;
+  line-height: 1.4em;
 }
 .ui-dialog-buttonpane button:hover {
-	color: #111111;
-	background: #eb9300 url(../jquery/images/eb9300_40x100_textures_02_glass_90.png) 0 50% repeat-x;
-	border: 1px solid #888888;
+  color: #111111;
+  background: #eb9300 url(../jquery/images/eb9300_40x100_textures_02_glass_90.png) 0 50% repeat-x;
+  border: 1px solid #888888;
 }
 .ui-dialog-buttonpane button:active {
-	color: #000000;
-	background: #8ab9ff url(../jquery/images/8ab9ff_40x100_textures_02_glass_50.png) 0 50% repeat-x;
-	border: 1px solid #2694e8;
+  color: #000000;
+  background: #8ab9ff url(../jquery/images/8ab9ff_40x100_textures_02_glass_50.png) 0 50% repeat-x;
+  border: 1px solid #2694e8;
 }
 /* This file skins dialog */
 .ui-dialog.ui-draggable .ui-dialog-titlebar,
 .ui-dialog.ui-draggable .ui-dialog-titlebar {
-	cursor: move;
+  cursor: move;
 }
 
 /*
diff --git a/themes/default/images/arrows-ffffff.png b/themes/default/images/arrows-ffffff.png
new file mode 100644
index 00000000..995df520
--- /dev/null
+++ b/themes/default/images/arrows-ffffff.png
diff --git a/themes/default/images/ico-view-album.png b/themes/default/images/ico-view-album.png
index 328850a7..ffb04a40 100644
--- a/themes/default/images/ico-view-album.png
+++ b/themes/default/images/ico-view-album.png
diff --git a/themes/default/images/ico-view-fullsize.png b/themes/default/images/ico-view-fullsize.png
index 9d9b0e45..73dac447 100644
--- a/themes/default/images/ico-view-fullsize.png
+++ b/themes/default/images/ico-view-fullsize.png
diff --git a/themes/default/images/ico-view-hybrid.png b/themes/default/images/ico-view-hybrid.png
index daa565fb..0097c91b 100644
--- a/themes/default/images/ico-view-hybrid.png
+++ b/themes/default/images/ico-view-hybrid.png
diff --git a/themes/default/images/ico-view-slideshow.png b/themes/default/images/ico-view-slideshow.png
index caef9136..5d4e893f 100644
--- a/themes/default/images/ico-view-slideshow.png
+++ b/themes/default/images/ico-view-slideshow.png
diff --git a/themes/default/images/shadow.png b/themes/default/images/shadow.png
new file mode 100644
index 00000000..c04d21b7
--- /dev/null
+++ b/themes/default/images/shadow.png
diff --git a/themes/default/jquery/superfish.css b/themes/default/jquery/superfish.css
new file mode 100644
index 00000000..e87756b2
--- /dev/null
+++ b/themes/default/jquery/superfish.css
@@ -0,0 +1,136 @@
+
+/*** ESSENTIAL STYLES ***/
+.sf-menu, .sf-menu * {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sf-menu {
+  line-height: 1.0;
+}
+.sf-menu ul {
+  position: absolute;
+  top: -999em;
+  width: 10em; /* left offset of submenus need to match (see below) */
+}
+.sf-menu ul li {
+  width: 100%;
+}
+.sf-menu li:hover {
+  visibility: inherit; /* fixes IE7 'sticky bug' */
+}
+.sf-menu li {
+  float: left;
+  position: relative;
+}
+.sf-menu a {
+  display: block;
+  position: relative;
+}
+.sf-menu li:hover ul,
+.sf-menu li.sfHover ul {
+  left: 0;
+  top: 2.5em; /* match top ul list item height */
+  z-index: 99;
+}
+ul.sf-menu li:hover li ul,
+ul.sf-menu li.sfHover li ul {
+  top: -999em;
+}
+ul.sf-menu li li:hover ul,
+ul.sf-menu li li.sfHover ul {
+  left: 10em; /* match ul width */
+  top: 0;
+}
+ul.sf-menu li li:hover li ul,
+ul.sf-menu li li.sfHover li ul {
+  top: -999em;
+}
+ul.sf-menu li li li:hover ul,
+ul.sf-menu li li li.sfHover ul {
+  left: 10em; /* match ul width */
+  top: 0;
+}
+
+/*** DEMO SKIN ***/
+.sf-menu {
+  float: left;
+  margin-bottom: 1em;
+}
+.sf-menu a {
+  border-left: 1px solid #fff;
+  border-top: 1px solid #CFDEFF;
+  padding: .75em 1em;
+  text-decoration: none;
+}
+.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
+  color: #13a;
+}
+.sf-menu li {
+  background: #BDD2FF;
+}
+.sf-menu li li {
+  background: #AABDE6;
+}
+.sf-menu li li li {
+  background: #9AAEDB;
+}
+.sf-menu li:hover, .sf-menu li.sfHover,
+.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
+  background: #CFDEFF;
+  outline: 0;
+}
+
+/*** arrows **/
+.sf-menu a.sf-with-ul {
+  padding-right: 2.25em;
+  min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
+}
+.sf-sub-indicator {
+  position: absolute;
+  display: block;
+  right: .75em;
+  top: 1.05em; /* IE6 only */
+  width: 10px;
+  height: 10px;
+  text-indent: -999em;
+  overflow: hidden;
+  background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
+}
+a > .sf-sub-indicator {  /* give all except IE6 the correct values */
+  top: .8em;
+  background-position: 0 -100px; /* use translucent arrow for modern browsers*/
+}
+/* apply hovers to modern browsers */
+a:focus > .sf-sub-indicator,
+a:hover > .sf-sub-indicator,
+a:active > .sf-sub-indicator,
+li:hover > a > .sf-sub-indicator,
+li.sfHover > a > .sf-sub-indicator {
+  background-position: -10px -100px; /* arrow hovers for modern browsers*/
+}
+
+/* point right for anchors in subs */
+.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
+.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
+/* apply hovers to modern browsers */
+.sf-menu ul a:focus > .sf-sub-indicator,
+.sf-menu ul a:hover > .sf-sub-indicator,
+.sf-menu ul a:active > .sf-sub-indicator,
+.sf-menu ul li:hover > a > .sf-sub-indicator,
+.sf-menu ul li.sfHover > a > .sf-sub-indicator {
+  background-position: -10px 0; /* arrow hovers for modern browsers*/
+}
+
+/*** shadows for all but IE6 ***/
+.sf-shadow ul {
+  background: url('../images/shadow.png') no-repeat bottom right;
+  padding: 0 8px 9px 0;
+  -moz-border-radius-bottomleft: 17px;
+  -moz-border-radius-topright: 17px;
+  -webkit-border-top-right-radius: 17px;
+  -webkit-border-bottom-left-radius: 17px;
+}
+.sf-shadow ul.sf-shadow-off {
+  background: transparent;
+}
diff --git a/themes/default/jquery/superfish.js b/themes/default/jquery/superfish.js
new file mode 100644
index 00000000..c6a9c7de
--- /dev/null
+++ b/themes/default/jquery/superfish.js
@@ -0,0 +1,121 @@
+
+/*
+ * Superfish v1.4.8 - jQuery menu widget
+ * Copyright (c) 2008 Joel Birch
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * 	http://www.opensource.org/licenses/mit-license.php
+ * 	http://www.gnu.org/licenses/gpl.html
+ *
+ * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
+ */
+
+;(function($){
+	$.fn.superfish = function(op){
+
+		var sf = $.fn.superfish,
+			c = sf.c,
+			$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
+			over = function(){
+				var $$ = $(this), menu = getMenu($$);
+				clearTimeout(menu.sfTimer);
+				$$.showSuperfishUl().siblings().hideSuperfishUl();
+			},
+			out = function(){
+				var $$ = $(this), menu = getMenu($$), o = sf.op;
+				clearTimeout(menu.sfTimer);
+				menu.sfTimer=setTimeout(function(){
+					o.retainPath=($.inArray($$[0],o.$path)>-1);
+					$$.hideSuperfishUl();
+					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+				},o.delay);	
+			},
+			getMenu = function($menu){
+				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
+				sf.op = sf.o[menu.serial];
+				return menu;
+			},
+			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
+			
+		return this.each(function() {
+			var s = this.serial = sf.o.length;
+			var o = $.extend({},sf.defaults,op);
+			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
+				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
+					.filter('li:has(ul)').removeClass(o.pathClass);
+			});
+			sf.o[s] = sf.op = o;
+			
+			$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
+				if (o.autoArrows) addArrow( $('>a:first-child',this) );
+			})
+			.not('.'+c.bcClass)
+				.hideSuperfishUl();
+			
+			var $a = $('a',this);
+			$a.each(function(i){
+				var $li = $a.eq(i).parents('li');
+				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
+			});
+			o.onInit.call(this);
+			
+		}).each(function() {
+			var menuClasses = [c.menuClass];
+			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
+			$(this).addClass(menuClasses.join(' '));
+		});
+	};
+
+	var sf = $.fn.superfish;
+	sf.o = [];
+	sf.op = {};
+	sf.IE7fix = function(){
+		var o = sf.op;
+		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
+			this.toggleClass(sf.c.shadowClass+'-off');
+		};
+	sf.c = {
+		bcClass     : 'sf-breadcrumb',
+		menuClass   : 'sf-js-enabled',
+		anchorClass : 'sf-with-ul',
+		arrowClass  : 'sf-sub-indicator',
+		shadowClass : 'sf-shadow'
+	};
+	sf.defaults = {
+		hoverClass	: 'sfHover',
+		pathClass	: 'overideThisToUse',
+		pathLevels	: 1,
+		delay		: 800,
+		animation	: {opacity:'show'},
+		speed		: 'normal',
+		autoArrows	: true,
+		dropShadows : true,
+		disableHI	: false,		// true disables hoverIntent detection
+		onInit		: function(){}, // callback functions
+		onBeforeShow: function(){},
+		onShow		: function(){},
+		onHide		: function(){}
+	};
+	$.fn.extend({
+		hideSuperfishUl : function(){
+			var o = sf.op,
+				not = (o.retainPath===true) ? o.$path : '';
+			o.retainPath = false;
+			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
+					.find('>ul').hide().css('visibility','hidden');
+			o.onHide.call($ul);
+			return this;
+		},
+		showSuperfishUl : function(){
+			var o = sf.op,
+				sh = sf.c.shadowClass+'-off',
+				$ul = this.addClass(o.hoverClass)
+					.find('>ul:hidden').css('visibility','visible');
+			sf.IE7fix.call($ul);
+			o.onBeforeShow.call($ul);
+			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
+			return this;
+		}
+	});
+
+})(jQuery);
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index c07206bf..93994664 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -4,6 +4,18 @@
 $("document").ready(function() {
 
   /**
+   * Superfish menu options
+   */
+  $('ul.sf-menu').superfish({
+    delay: 500,
+    animation: {
+      opacity:'show',
+      height:'show'
+    },
+    speed: 'fast'
+  });
+
+  /**
    * Reduce width of sized photo if it is wider than its parent container
    * 
    * @requires jquery.dimensions
@@ -27,7 +39,7 @@ $("document").ready(function() {
   for (var i=0; i < dialogLinks.length; i++) {
     $(dialogLinks[i]).bind("click", {element: dialogLinks[i]}, handleDialogEvent);
   };
-
+  
 });
 
 /**
@@ -52,7 +64,7 @@ function handleDialogEvent(event) {
  * @todo Set dialog attributes dynamically (width, height, drag, resize)
  */
 function openDialog(element) {
-  var url = $(element).attr("href");
+  var href = $(element).attr("href");
   var dialog = '<div id="gDialog"></div>';
   $("body").append(dialog);
   $("#gDialog").dialog({
@@ -65,11 +77,11 @@ function openDialog(element) {
     },
     resizable: true,
     title: $(element).attr("title"),
-    width: '500px',
+    width: '500px'
   });
-  $("#gDialog").html(url);
-  $.get(url, function(data) {
+  $("#gDialog").html(href);
+  $.get(href, function(data) {
     $("#gDialog").html(data);
-  });	
+  });
   return false;
 }
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index b3813104..e58648b7 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -1,15 +1,19 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
 <div id="gAlbumHeader">
-  <ul id="gItemMenu">
-    <li><a href="#" title="<?= _("View album") ?>">
-        <img src="<?= $theme->url("images/ico-view-album.png") ?>"
-             alt="<?= _("View album") ?>" /></a></li>
-    <li><a href="#" title="<?= _("View album in hybrid mode") ?>">
-        <img src="<?= $theme->url("images/ico-view-hybrid.png") ?>"
-             alt="<?= _("View album in hybrid mode") ?>" /></a></li>
+  <ul id="gItemMenu" class="sf-menu">
+    <li><a href="#" id="gAlbumLink" title="<?= _("View album") ?>"><?= _("Album view") ?></a></li>
+    <li><a href="#" id="gHybridLink" title="<?= _("View album in hybrid mode") ?>"><?= _("Hybrid view") ?></a></li>
     <li><?= $theme->album_top() ?></li>
-    <li><a href="<?= url::site("/form/add/photos/$item->id") ?>" title="<?= _("Add an item") ?>"
-        class="gButtonLink gDialogLink"><?= _("Add an item") ?></a></li>
+    <li><a href="#">Options</a>
+      <ul>
+        <li><a href="<?= url::site("/form/add/photos/$item->id") ?>" 
+            title="<?= _("Add an item") ?>"
+            class="gDialogLink"><?= _("Add an item") ?></a></li>
+        <li><a href="<?= url::site("/form/add/albums/$item->id") ?>" 
+            title="<?= _("Add album") ?>"
+            class="gDialogLink"><?= _("Add album") ?></a></li>
+      </ul>
+    </li>
   </ul>
 
   <h1><?= $item->title_edit ?></h1>
diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php
index 0eac17e7..f17bd637 100644
--- a/themes/default/views/page.html.php
+++ b/themes/default/views/page.html.php
@@ -13,10 +13,13 @@
     </title>
     <link rel="stylesheet" type="text/css" href="<?= url::file("lib/yui/reset-fonts-grids.css") ?>"
           media="screen,print,projection" />
+    <link rel="stylesheet" type="text/css" href="<?= $theme->url("jquery/superfish.css") ?>" 
+			    media="screen" /> 
     <link rel="stylesheet" type="text/css" href="<?= $theme->url("css/screen.css") ?>"
           media="screen,print,projection" />
     <script src="<?= url::file("lib/jquery.js") ?>" type="text/javascript"></script>
     <script src="<?= url::file("lib/jquery.form.js") ?>" type="text/javascript"></script>
+    <script src="<?= $theme->url("jquery/superfish.js") ?>" type="text/javascript"></script>
     <?= $theme->head() ?>
     <script src="<?= $theme->url("jquery/ui.core.js") ?>" type="text/javascript"></script>
     <script src="<?= $theme->url("jquery/ui.tabs.min.js") ?>" type="text/javascript"></script>
diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php
index 84d8293f..55872e08 100644
--- a/themes/default/views/photo.html.php
+++ b/themes/default/views/photo.html.php
@@ -1,16 +1,21 @@
 <? defined("SYSPATH") or die("No direct script access."); ?>
 <div id="gItemHeader">
-  <ul id="gItemMenu">
-    <li><a href="#" title="<?= _("View full size image") ?>">
-        <img src="<?= $theme->url("images/ico-view-fullsize.png") ?>"
-             alt="<?= sprintf(_("View full size image (%dx%d)"), $item->width, $item->height) ?>" /></a></li>
-    <li><a href="#" title="<?= _("View album in hybrid mode") ?>">
-        <img src="<?= $theme->url("images/ico-view-hybrid.png") ?>"
-             alt="<?= _("View album in hybrid mode") ?>" /></a></li>
+  <ul id="gItemMenu" class="sf-menu">
+    <li><a href="#" id="gFullsizeLink" title="<?= _("View full size image") ?>"><?= _("View full size image") ?></a></li>
+    <li><a href="#" id="gHybridLink" title="<?= _("View album in hybrid mode") ?>"><?= _("Hybrid view") ?></a></li>
     <li><?= $theme->album_top() ?></li>
-    <li><a href="#" title="<?= _("Options for this item") ?>"
-           class="gButtonLink gDialogLink">v <?= _("Options") ?></a></li>
+    <li><a href="#">Options</a>
+      <ul>
+        <li><a href="<?= url::site("/form/add/photos/$item->id") ?>" 
+            title="<?= _("Add an item") ?>"
+            class="gDialogLink"><?= _("Add an item") ?></a></li>
+        <li><a href="<?= url::site("/form/add/albums/$item->id") ?>" 
+            title="<?= _("Add album") ?>"
+            class="gDialogLink"><?= _("Add album") ?></a></li>
+      </ul>
+    </li>
   </ul>
+
   <h1><?= $item->title_edit ?></h1>
 </div>