// There's the gallery and the trash
var $gallery = $("#gallery"),
  $lapalma = $("#Lapalma"),
  $elhierro = $("#Elhierro"),
  $lagomera = $("#Lagomera"),
  $tenerife = $("#Tenerife"),
  $grancanaria = $("#Grancanaria"),
  $lanzarote = $("#Lanzarote"),
  $fuerteventura = $("#Fuerteventura");

// Let the gallery items be draggable
$("li", $gallery).draggable({
  cancel: "a.ui-icon", // clicking an icon won't initiate dragging
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});

///// EL HIERRO

// Let the trash be droppable, accepting the gallery items
$elhierro.droppable({
  accept: "#gallery > li[isla='elhierro']",
  classes: {
    "ui-droppable-active": "ui-state-highlight"
  },
  drop: function(event, ui) {
    deleteImage(ui.draggable, $(this));
  }
});

///// FUERTEVENTURA

// Let the trash be droppable, accepting the gallery items
$fuerteventura.droppable({
  accept: "#gallery > li[isla='fuerteventura']",
  classes: {
    "ui-droppable-active": "ui-state-highlight"
  },
  drop: function(event, ui) {
    deleteImage(ui.draggable, $(this));
  }
});

// Image deletion function
function deleteImage($item, $isla) {
  $item.fadeOut(function() {
    var $list = $("ul", $isla).length
      ? $("ul", $isla)
      : $("<ul class='gallery ui-helper-reset'/>").appendTo($isla);

    $item.find("a.ui-icon-trash").remove();
    $item.appendTo($list).fadeIn(function() {
      $item
        .animate({ width: "48px" })
        .find("img")
        .animate({ height: "36px" });
    });
  });
}

// Resolve the icons behavior with event delegation
$("ul.gallery > li").on("click", function(event) {
  var $item = $(this),
    $target = $(event.target);

  if ($target.is("a.ui-icon-trash")) {
    deleteImage($item);
  } else if ($target.is("a.ui-icon-zoomin")) {
    viewLargerImage($target);
  } else if ($target.is("a.ui-icon-refresh")) {
    recycleImage($item);
  }

  return false;
});