enhancement: Making each section of the new related items collapsed b…

…y default, then expanding the first section (usually images or topics), and adding hover events to open sections as the user mouses over them.

app/views/topics/_related_items_section.html.erb

@@ -15,7 +15,7 @@ display_heading = defined?(display_heading) && display_heading != false ? displa
 display_no_item_text = defined?(display_no_item_text) ? display_no_item_text : false
 -%>
 
-<div id="detail-linked-<%= controller -%>"<%= " class='no-items'" if total_items < 1 -%>>
+<div id="detail-linked-<%= controller -%>"<%= (total_items < 1) ? " class='no-items'" : " class='related-items-section'" -%>>
   <% if !display_heading.nil? -%>
     <%= display_heading -%>
   <% else -%>

public/javascripts/kete.js

@@ -89,6 +89,28 @@ function enableCategoryListUpdater(controller_name) {
   });
 }
 
+function setupRelatedCollapsableSections() {
+  // For each related items section, hide it, and add an hover event
+  $$('.related-items-section').each(function(section) {
+    $(section).down('ul').hide();
+    $(section).observe('mouseover', function(event) {
+      // hide all open sections, then show the one hovered over
+      hideAllRelatedSections();
+      $(section).down('ul').show();
+      // stop anything the hover might have triggered
+      event.stop();
+    });
+  });
+  // Show the contents of the first section in the related items inset
+  $$('.related-items-section')[0].down('ul').show();
+}
+
+function hideAllRelatedSections() {
+  $$('.related-items-section').each(function(section) {
+    $(section).down('ul').hide();
+  });
+}
+
 document.observe('dom:loaded', function() {
   new SubMenu("user_baskets_list");
   if ($('portrait_images')) { enablePortraitDragAndDrop(); }
@@ -105,4 +127,6 @@ document.observe('dom:loaded', function() {
       event.stop();
     })
   }
+
+  if ($$('#related_items.inset').size() > 0) { setupRelatedCollapsableSections(); }
 });