/* global gon */
var galleryIds = [];

$(document).ready(function() {
  galleryIds = jQuery.map($(".gallery div"), function(el) { return el.dataset.id; });

  $("#character_setting_ids").select2({
    width: '100%',
    minimumResultsForSearch: 10,
    placeholder: 'Setting',
    tags: true
  });

  $("#character_gallery_ids").select2({
    width: '100%',
    minimumResultsForSearch: 10,
    placeholder: 'Default Gallery'
  });

  bindIcons();

  $("#character_template_id").change(function() {
    if ($(this).val() === "0") {
      $("#create_template").show();
    } else {
      $("#create_template").hide();
    }
  });

  $("#character_gallery_ids").change(function() {
    $("#character_default_icon_id").val('');

    var newGalleryIds = $(this).val() || [];

    // a gallery was removed
    if (galleryIds.length > newGalleryIds.length) {
      var removedGallery = $(galleryIds).not(newGalleryIds).get();
      galleryIds = newGalleryIds;
      $(".gallery #gallery"+removedGallery).remove();

      // if no more galleries are left, display galleryless icons
      if (galleryIds.length === 0) {
        displayGallery('0');
      }
      return;
    }

    var newId = $(newGalleryIds).not(galleryIds).get();
    galleryIds = newGalleryIds;
    $(".gallery #gallery0").remove();

    displayGallery(newId);
  });
});

function displayGallery(newId) {
  $.get('/api/v1/galleries/'+newId, function(resp) {
    var galleryObj = $("<div>").attr({id: 'gallery'+newId}).data('id', newId);
    galleryObj.append("<br />");
    galleryObj.append($("<b>").attr({class: 'gallery-name'}).append(resp.name));
    galleryObj.append("<br />");
    var galleryIcons = $("<div>").attr({class: 'gallery-icons'});
    galleryObj.append(galleryIcons);
    for (var i = 0; i < resp.icons.length; i++) {
      var url = resp.icons[i].url;
      var keyword = resp.icons[i].keyword;
      var id = resp.icons[i].id;
      var galleryIcon = $("<img>").attr({src: url, alt: keyword, title: keyword, class: 'icon character-icon'}).data('id', id);
      galleryIcons.append(galleryIcon);
    }
    $("#selected-gallery .gallery").append(galleryObj);
    bindIcons(galleryObj);
  }, 'json');
}

function bindIcons(obj) {
  obj = obj || window.body;
  $(".character-icon", obj).click(function() {
    if ($(this).hasClass('selected-icon')) {
      $(this).removeClass('selected-icon');
      updateIcon('');
      return;
    }

    $(".selected-icon").removeClass('selected-icon');
    $(this).addClass('selected-icon');
    updateIcon($(this).data('id'));
  });
}

function updateIcon(id) {
  if (gon.character_id) {
    $.ajax({
      url: '/api/v1/characters/'+gon.character_id,
      type: 'PUT',
      data: {character: {default_icon_id: id}}
    });
  } else {
    $("#character_default_icon_id").val(id);
  }
}

@@ -28,13 +28,8 @@
 yIds
- = %5B%5D
 ;%0A%0A$
@@ -77,77 +77,47 @@
 s = 
-jQuery.map($(%22.gallery div%22), function(el) %7B return el.dataset.id; %7D)
+$(%22#character_gallery_ids%22).val() %7C%7C %5B%5D
 ;%0A%0A 
@@ -871,27 +871,28 @@
 eryIds).get(
+0
 );%0A
-
       galler
@@ -1040,34 +1040,53 @@
 s%0A      if (
+$(%22.
 gallery
-Ids
+ %5Bid%5E='gallery'%5D%22)
 .length === 
@@ -1201,16 +1201,17 @@
 ds).get(
+0
 );%0A    g
@@ -1276,19 +1276,68 @@
 ove();%0A%0A
-
    
+ if ($(%22.gallery #gallery%22 + newId).length === 0)
  display

Clean up character#edit gallery AJAX