/* global gon */
$(document).ready(function() {
  $(".gallery-box").click(function() {
    // Update toggle +/-
    var toggleBox = $(this).children('.view-button').first().children('img').first();
    var wasVisible = (toggleBox.attr('src').includes("up"));
    toggleBox.attr('src', (wasVisible ? '/images/bullet_arrow_down.png' : '/images/bullet_arrow_up.png'));

    // Toggle display
    var galleryId = $(this).data('id');
    $("#icons-" + galleryId).toggle();

    // Nothing more necessary if collapsing or already loaded
    if (wasVisible) { return; }
    if ($("#icons-" + galleryId + " .gallery").html().length > 0) { return; }

    // Load and bind icons if they have not already been loaded
    $.get("/api/v1/galleries/" + galleryId, {user_id: gon.user_id}, function(resp) {
      $.each(resp.icons, function(index, icon) {
        var iconDiv = $("<div>").attr({class: 'gallery-icon'});
        var iconLink = $("<a>").attr({href: "/icons/" + icon.id});
        var iconImg = $("<img>").attr({src: icon.url, alt: icon.keyword, title: icon.keyword, 'class': 'icon'});
        iconLink.append(iconImg).append("<br>").append($("<span>").attr({class: 'icon-keyword'}).append(icon.keyword));
        iconDiv.append(iconLink);

        // Add control buttons for the owner
        if ($("#icons-" + galleryId + " .icons-remove").length > 0) {
          var iconCheckbox = $("<input>").attr({id: 'marked_ids_'+icon.id, name: 'marked_ids[]', type: 'checkbox'}).val(icon.id);
          iconDiv.append($("<div>").attr({class: 'select-button'}).append(iconCheckbox));
        }

        $("#icons-" + galleryId + " .gallery").append(iconDiv);
      });
    });
  });

  $(".tag-item").hover(function mouseIn() {
    $(this).removeClass('semiplusopaque');
  }, function mouseOut() {
    $(this).addClass('semiplusopaque');
  });

  // add ellipsis box for many (> 5) tags
  $(".tag-box").each(function() {
    var tagBox = $(this);
    var tagBoxItems = $(".tag-item", tagBox);
    if (tagBoxItems.length <= 5) return;

    var hiddenTags = tagBoxItems.slice(4);
    hiddenTags.hide();

    var ellipsisBox = $("<span>").attr({class: 'tag-item semiopaque pointer', title: 'Click to show more tags…'}).append("...");
    var recollapseBox = $("<span>").attr({class: 'tag-item semiopaque pointer', title: 'Click to hide extra tags…'}).append("←").hide();

    ellipsisBox.add(recollapseBox).hover(function mouseIn() {
      $(this).removeClass('semiplusopaque');
    }, function mouseOut() {
      $(this).addClass('semiplusopaque');
    });

    tagBox.append(ellipsisBox).append(' ').append(recollapseBox); // inline-block cares about spaces for formatting

    ellipsisBox.click(function() {
      hiddenTags.show();
      ellipsisBox.hide();
      recollapseBox.show();
    });
    recollapseBox.click(function() {
      hiddenTags.hide();
      recollapseBox.hide();
      ellipsisBox.show();
    });
  });
});

@@ -105,16 +105,40 @@
 gle +/-%0A
+    var elem = $(this);%0A
     var 
@@ -149,23 +149,20 @@
 leBox = 
-$(this)
+elem
 .childre
@@ -423,23 +423,20 @@
 eryId = 
-$(this)
+elem
 .data('i
@@ -561,26 +561,24 @@
 Visible)
- %7B
  return;
  %7D%0A    i
@@ -569,18 +569,16 @@
  return;
- %7D
 %0A    if 
@@ -582,75 +582,60 @@
 if (
-$(%22#icons-%22 + galleryId + %22 .gallery%22).html().length %3E 0) %7B
+elem.data('loading') %7C%7C elem.data('loaded'))
  return;
  %7D%0A%0A
@@ -630,18 +630,16 @@
  return;
- %7D
 %0A%0A    //
@@ -704,14 +704,60 @@
     
-$.get(
+elem.data('loading', true);%0A    $.ajax(%7B%0A      url: 
 %22/ap
@@ -785,16 +785,28 @@
 lleryId,
+%0A      data:
  %7Buser_i
@@ -820,18 +820,29 @@
 user_id%7D
-, 
+%0A    %7D).done(
 function
@@ -1714,24 +1714,185 @@
 ;%0A      %7D);%0A
+      elem.data('loading', false).data('loaded', true);%0A    %7D).fail(function() %7B%0A      elem.data('loading', false).trigger('click');%0A      // TODO: notify user?%0A
     %7D);%0A  %7D)

Fix galleries#show not to duplicate icon display if toggled swiftly