From 9a937a1aa2bb9b5b6ae210d173ebe2b8e9ecf258 Mon Sep 17 00:00:00 2001
From: Fredrik Erlandsson <fredrik.e@gmail.com>
Date: Mon, 14 Nov 2011 15:04:06 +0100
Subject: [PATCH] first attempt for item-option-overlay

---
 css/pear.css         | 17 +++++++++++++++++
 js/pear.js           | 43 +++++++++++++++++++++++++++++++++++++++++++
 views/album.html.php |  5 ++++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/css/pear.css b/css/pear.css
index 2be381c2..53bb6abb 100644
--- a/css/pear.css
+++ b/css/pear.css
@@ -1,3 +1,20 @@
+body {
+    overflow: hidden;
+}
+.g-hover-item {
+
+      border: 1px solid #000;
+        position: absolute !important;
+          z-index: 1000 !important;
+display: block;
+
+}
+
+#g-place-holder {
+    position: relative;
+    visibility: hidden;
+    z-index: 1;
+}
 .gallery-thumb {
 	float: left;
 	padding: 3px 5px 7px 5px;
diff --git a/js/pear.js b/js/pear.js
index dbc54cdf..8a2379b4 100644
--- a/js/pear.js
+++ b/js/pear.js
@@ -494,6 +494,49 @@ function bodyLoad(vm, bgcolor) {
     $('#loading').hide();
     window.setTimeout("preFetch()", 500);
     setKeys();
+
+    // Initialize thumbnail hover effect
+    $(".g-item").hover(
+      function() {
+        if(mosaicView) { return; }
+      // Insert a placeholder to hold the item's position in the grid
+        var placeHolder = $(this).clone().attr("id", "g-place-holder");
+        $(this).after($(placeHolder));
+        // Style and position the hover item
+        var position = $(this).position();
+        $(this).css("top", position.top).css("left", position.left);
+        $(this).addClass("g-hover-item");
+        // Initialize the contextual menu
+        $(this).gallery_context_menu();
+        // Set the hover item's height
+        $(this).height("auto");
+        var context_menu = $(this).find(".g-context-menu");
+        var adj_height = $(this).height() + context_menu.height();
+        if ($(this).next().height() > $(this).height()) {
+          $(this).height($(this).next().height());
+        } else if ($(this).prev().height() > $(this).height()) {
+          $(this).height($(this).prev().height());
+        } else {
+          $(this).height(adj_height);
+        }
+      },
+      function() {
+        if(mosaicView) { return; }
+        // Reset item height and position
+        if ($(this).next().height()) {
+          var sib_height = $(this).next().height();
+        } else {
+          var sib_height = $(this).prev().height();
+        }
+        if ($.browser.msie && $.browser.version >= 8) {
+          sib_height = sib_height + 1;
+        }
+        $(this).css({"height": sib_height, "position": "", "top": "", "left": ""});
+        // Remove the placeholder and hover class from the item
+        $(this).removeClass("g-hover-item");
+        $("#g-place-holder").remove();
+      }
+    );
 }
 
 function preFetch() {
diff --git a/views/album.html.php b/views/album.html.php
index 455dba8f..27e22df8 100644
--- a/views/album.html.php
+++ b/views/album.html.php
@@ -40,10 +40,12 @@ $(function() {
     <? endif ?>
       <? if ($child->has_thumb()): ?>
 		<?= $child->thumb_img(array("class" => $img_class, "id" => "thumb_$child->id", "style" => "width: 200px; height 200px;")) ?>
+      <? else: ?>
+        <span style="display: block; width: 200px; height: 200px;"></span>
+      <? endif ?>
     <? if ($child->is_movie()): ?>
       <span class="p-video"></span>
     <? endif ?>
-      <? endif ?>
 <?// Begin skimming 
 if($child->is_album()):
 	$granchildren = $child->viewable()->children();
@@ -59,6 +61,7 @@ if($child->is_album()):
 endforeach; 
 endif; 
 // End skimming // ?>
+<?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
 	<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify(text::limit_chars($child->title, 20)) ?> </p>
 	<? if($child->is_album()): ?><div class="giInfo"><?= count($granchildren)?> photos</div><? endif ?>
 </div>