Another iteration in the quest for the perfect organize module. At

this point you can select microthumbs, by clicking on them, ctrl-click
will add to the selection.  You can select by drawing a lasso around
images. Holding the ctrl will add the lassoed thumbs to the selection.
Once slected, thumbs can be dragged and dropped within the current
At this point no background processing takes place

5 files changed, 230 insertions, 162 deletions

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index c6c052bc..a1dc062a 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -1,85 +1,115 @@
 /* @todo move to theme css */
-#gOrganizeTreeContainer,
-#gMicroThumbContainer {
+/*******************************************************************
+ * Album Tree styling
+ */
+#gOrganizeTreeContainer {
   overflow-y: auto;
   margin: 0 !important;
   padding: 0 !important;
 }
 
-#gMicroThumbContainer {
+#gOrganizeAlbumDescription {
+  height: 2em;
+  overflow-y: auto;
+}
+
+.gBranchSelected {
+  background-color: #cfdeff !important;
+  border-bottom: 1px solid #999 !important;
+  display: block;
+  padding: .3em 0;
+}
+
+.gBranchText {
+  cursor: pointer;
+}
+
+.gBranchCollapsed {
+  display: none;
+}
+
+.gBranchEmpty {
+  visibility: hidden;
+}
+
+#gOrganizeTreeContainer ul ul li {
+  padding-left: 1.2em;
+}
+
+/*******************************************************************
+ * Album Panel Styles
+ */
+#gMicroThumbPanel {
+  margin: 0 !important;
+  padding: 0 !important;
   background-color: #cfdeff;
   border: 1px solid #999 !important;
   border-top: none !important;
   border-left: none !important;
   margin-left: -1em !important;
+  overflow: auto;
 }
 
-#gMicroThumbGrid li div div {
-  float: left;
-}
-
-#gMicroThumbContainer #gMicroThumbGrid {
-  margin: 0;
+#gMicroThumbGrid {
+  padding: .5em;
 }
 
-#gMicroThumbContainer #gMicroThumbGrid .gMicroThumb {
-  background-color: #fff;
-  border: 2px solid #e8e8e8;
-  border-right-color: #ccc;
-  border-bottom-color: #ccc;
+.gMicroThumbContainer {
+  display: block;
+  //border: 2px solid #e8e8e8;
+  //border-right-color: #ccc;
+  //border-bottom-color: #ccc;
   float: left;
   font-size: .7em;
   height: 9em;
-  margin-left: .5em;
-  margin-top: .5em;
+  margin-bottom: 1em;
   opacity: .4;
-  overflow: hidden;
-  padding: .5em;
-  text-align: center;
-  width: 9em;
+  padding: 0 .5em;
 }
 
-#gOrganizeAlbumDescription {
-  height: 2em;
-  overflow-y: auto;
+.gMicroThumb {
+  height: 9em;
+  width: 9em;
+  background-color: #fff;
+  display: block;
+  float: left;
+  text-align: center;
 }
 
-#gMicroThumbContainer #gMicroThumbGrid .gAlbum {
+#gMicroThumbPanel #gMicroThumbGrid .gAlbum {
   background-color: #e8e8e8;
 }
 
-#gMicroThumbContainer #gMicroThumbGrid :hover {
+#gMicroThumbPanel #gMicroThumbGrid :hover {
   opacity: 1;
 }
 
-#gMicroThumbContainer #gMicroThumbGrid .gThumbSelected {
-  border: 0.2em solid #09f;
+.gMicroThumbContainer.ui-selected {
   opacity: 1;
 }
 
-.gBranchSelected {
-  background-color: #cfdeff !important;
-  border-bottom: 1px solid #999 !important;
-  display: block;
-  padding: .3em 0;
+#gDragHelper .gMicroThumbGrid {
+  background-color: transparent;
+  padding: 0;
+  overflow: visible;
 }
-
-.gBranchText {
-  cursor: pointer;
-}
-
-.gBranchCollapsed {
-  display: none;
-}
-
-.gBranchEmpty {
-  visibility: hidden;
+			
+#gDragHelper .gMicroThumbContainer {
+  display: block;
+  margin: 0;
+  padding: 0;
 }
 
-#gOrganizeTreeContainer ul ul li {
-  padding-left: 1.2em;
+#gDragHelper .gMicroThumb {
+  background-color: transparent;
+  height: auto;
+  width: auto;
 }
+			
 
+/****************************************************************
+ * Organize Edit styling
+ */
 #gOrganizeFormButtons {
   bottom: 0.5em;
   position: absolute;
@@ -102,21 +132,3 @@
   margin: 0;
   text-align: center;
 }
-
-#gMicroThumbUnselectAll,
-#gMicroThumbSelectAll {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
-.gOrganizeReorderDropTarget {
-  visibility: hidden;
-  background-color: #5C9CCC;
-  float: none;
-  width: .5em;
-  height: 9em;
-}
-
-.gOrganizeReorderDropTargetHover {
-  visibility: visible;
-}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index c40a2d67..045603a4 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -4,9 +4,77 @@
 var url;
 var height;
 
+function organize_dialog_init() {
+  var size = viewport_size();
+  height = size.height() - 100;
+  var width = size.width() - 100;
+
+  // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475
+  $(".sf-menu li.sfHover ul").css("z-index", 70);
+
+  $("#gDialog").dialog("option", "width", width);
+  $("#gDialog").dialog("option", "height", height);
+
+  $("#gDialog").dialog("open");
+  if ($("#gDialog h1").length) {
+    $("#gDialog").dialog('option', 'title', $("#gDialog h1:eq(0)").html());
+  } else if ($("#gDialog fieldset legend").length) {
+    $("#gDialog").dialog('option', 'title', $("#gDialog fieldset legend:eq(0)").html());
+  }
+
+  height -= 2 * parseFloat($("#gDialog").css("padding-top"));
+  height -= 2 * parseFloat($("#gDialog").css("padding-bottom"));
+  height -= $("#gMicroThumbPanel").position().top;
+  height -= $("#gDialog #ft").height();
+  height = Math.round(height);
+
+  $("#gMicroThumbPanel").height(height);
+  $("#gOrganizeTreeContainer").height(height);
+
+  $(".gOrganizeBranch .ui-icon").click(organize_toggle_children);
+  $(".gBranchText").click(organize_open_folder);
+  retrieve_micro_thumbs(item_id);
+  //showLoading("#gDialog");
+
+  $("#gMicroThumbPanel").scroll(function() {
+    get_more_data();
+  });
+
+  $("#gMicroThumbSelectAll").click(function(event) {
+    select_all(true);
+    event.preventDefault();
+  });
+  $("#gMicroThumbUnselectAll").click(function(event) {
+    select_all(false);
+    event.preventDefault();
+  });
+
+  $("#gMicroThumbGrid").selectable({
+    count: 0,
+    filter: ".gMicroThumbContainer",
+    selected: function(event, ui) {
+      /*
+       * Count the number of selected items if it is greater than 1,
+       * then click won't be called so we need to remove the gSelecting
+       * class in the stop event.
+       */
+      var count = $("#gMicroThumbGrid").selectable("option", "count") + 1;
+      $("#gMicroThumbGrid").selectable("option", "count", count);
+      $(ui.selected).addClass("gSelecting");
+    },
+    stop: function(event) {
+      var count = $("#gMicroThumbGrid").selectable("option", "count");
+      if (count > 1) {
+        $(".gMicroThumbContainer.gSelecting").removeClass("gSelecting");
+      }
+      $("#gMicroThumbGrid").selectable("option", "count", 0);
+    }
+  });
+}
+
 function get_album_content() {
-  var grid_width = $("#gMicroThumbContainer").width();
-  url = $("#gMicroThumbContainer").attr("ref");
+  var grid_width = $("#.gMicroThumbPanel").width();
+  url = $("#gMicroThumbPanel").attr("ref");
   url = url.replace("__WIDTH__", grid_width);
   url = url.replace("__HEIGHT__", height);
 
@@ -16,8 +84,8 @@ function get_album_content() {
 function retrieve_micro_thumbs() {
   var offset = $("#gMicroThumbGrid li").length;
   if (url == null) {
-    var grid_width = $("#gMicroThumbContainer").width();
-    url = $("#gMicroThumbContainer").attr("ref");
+    var grid_width = $("#gMicroThumbPanel").width();
+    url = $("#gMicroThumbPanel").attr("ref");
     url = url.replace("__WIDTH__", grid_width);
     url = url.replace("__HEIGHT__", height);
   }
@@ -26,39 +94,92 @@ function retrieve_micro_thumbs() {
   $.get(url_data, function(data) {
     $("#gMicroThumbGrid").append(data);
     get_more_data();
+    $(".gMicroThumbContainer").click(function(event) {
+      if ($(this).hasClass("gSelecting")) {
+        $(this).removeClass("gSelecting");
+      } else {
+        $(this).removeClass("ui-selected");
+      }
+    });
+    $(".gMicroThumbContainer").draggable({
+      cancel: ".gMicroThumbContainer:not(.ui-selected)",
+      handle: ".gMicroThumbContainer.ui-selected",
+      zindex: 2000,
+      helper: function(event, ui) {
+        $("body").append("<div id=\"gDragHelper\"><ul></ul></div>");
+        var beginTop = event.pageY;
+        var beginLeft = event.pageX;
+        var zindex = $(".gMicroThumbContainer").draggable("option", "zindex");
+        $("#gDragHelper").css('top', event.pageY - 22.5);
+        $("#gDragHelper").css('left', event.pageX + 22.5);
+        var placeHolder = $(this).clone();
+        $(placeHolder).attr("id", "gPlaceHolder");
+        $(placeHolder).css("visibility", "hidden");
+        $(placeHolder).removeClass("ui-selected");
+        $(placeHolder).removeClass("ui-draggable");
+        $(this).after(placeHolder);
+
+        $("li.ui-selected").each(function(i) {
+          var clone = $(this).clone();
+	  $(clone).attr("id", "drag_clone_" + $(this).attr("ref"));
+          $("#gDragHelper ul").append(clone);
+          $(clone).css("position", "absolute");
+          $(clone).css("top", beginTop);
+          $(clone).css("left", beginLeft);
+          $(clone).css("z-index", zindex--);
+          $(this).hide();
+
+          var children = $(clone).find(".gMicroThumb .gThumbnail");
+          var width = new String(children.css("width")).replace(/[^0-9]/g,"") * .5;
+          height = new String(children.css("height")).replace(/[^0-9]/g,"") * .5;
+          var marginTop = new String(children.css("margin-top")).replace(/[^\.0-9]/g,"") * .5;
+          children.attr("width", width);
+          children.attr("height", height);
+          children.css("margin-top", marginTop);
+          if (i < 9) {
+            beginTop -= 5;
+            beginLeft += 5;
+          }
+        });
+        return $("#gDragHelper");
+      },
+      stop: function(event, ui) {
+        $("#gDragHelper li").each(function(i) {
+	  $("#gPlaceHolder").before($("#thumb_" + $(this).attr("ref")).show());
+        });
+        $(".gMicroThumbContainer.ui-selected").css("z-index", null);
+        $("#gDragHelper").remove();
+        $("#gPlaceHolder").remove();
+      }
+    });
+    $(".gMicroThumbContainer").droppable( {
+      tolerance: "pointer",
+      over: function(event, ui) {
+        $(this).after($("#gPlaceHolder"));
+      },
+      drop: function(event, ui) {
+        $("#gDragHelper li").each(function(i) {
+	  $("#gPlaceHolder").before($("#thumb_" + $(this).attr("ref")).show());
+        });
+        $(".gMicroThumbContainer.ui-selected").css("z-index", null);
+        $("#gDragHelper").remove();
+        $("#gPlaceHolder").remove();
+      }
+    });
   });
 }
 
 function get_more_data() {
-  var element = $("#gMicroThumbContainer").get(0);
+  var element = $("#gMicroThumbPanel").get(0);
   var scrollHeight = element.scrollHeight;
   var scrollTop = element.scrollTop;
-  var height = $("#gMicroThumbContainer").height();
+  var height = $("#gMicroThumbPanel").height();
   var scrollPosition = scrollHeight - (scrollTop + height);
   if (scrollPosition > 0 && scrollPosition <= 100) {
     retrieve_micro_thumbs();
   }
 }
 
-function toggle_select(event) {
-  if ($(this).hasClass("gThumbSelected")) {
-    $(this).removeClass("gThumbSelected");
-    $(this).draggable("destroy");
-  } else {
-    $(this).addClass("gThumbSelected");
-    $(this).draggable({containment: "#gDialog"});
-  }
-  event.preventDefault();
-}
-
-function reset_edit_select() {
-  $("#gOrganizeFormNoImage").show();
-  $("#gOrganizeFormThumb").hide();
-  $("#gOrganizeFormMultipleImages").hide();
-  $("#gOrganizeButtonPane").hide();
-  select_all(false);
-}
-
 function organize_toggle_children(event) {
   var id = $(this).attr("ref");
   var span_children = $("#gOrganizeChildren-" + id);
@@ -81,81 +202,18 @@ function organize_open_folder(event) {
     $(this).addClass("gBranchSelected");
     item_id = $(this).attr("ref");
     $("#gMicroThumbGrid").empty();
-    reset_edit_select();
     retrieve_micro_thumbs();
   }
   event.preventDefault();
 }
 
-function organize_dialog_init() {
-  var size = viewport_size();
-  height = size.height() - 100;
-  var width = size.width() - 100;
-
-  $("#gDialog").dialog("option", "width", width);
-  $("#gDialog").dialog("option", "height", height);
-
-  $("#gDialog").dialog("open");
-  if ($("#gDialog h1").length) {
-    $("#gDialog").dialog('option', 'title', $("#gDialog h1:eq(0)").html());
-  } else if ($("#gDialog fieldset legend").length) {
-    $("#gDialog").dialog('option', 'title', $("#gDialog fieldset legend:eq(0)").html());
-  }
-
-  height -= 2 * parseFloat($("#gDialog").css("padding-top"));
-  height -= 2 * parseFloat($("#gDialog").css("padding-bottom"));
-  height -= $("#gMicroThumbContainer").position().top;
-  height -= $("#gDialog #ft").height();
-  height = Math.round(height);
-
-  $("#gMicroThumbContainer").height(height);
-  $("#gOrganizeTreeContainer").height(height);
-  $("#gOrganizeEditContainer").height(height);
-
-  $(".gOrganizeBranch .ui-icon").click(organize_toggle_children);
-  $(".gBranchText").click(organize_open_folder);
-  retrieve_micro_thumbs(item_id);
-  //showLoading("#gDialog");
-
-  $("#gMicroThumbContainer").scroll(function() {
-    get_more_data();
-  });
-
-  $("#gMicroThumbSelectAll").click(function(event) {
-    select_all(true);
-    event.preventDefault();
-  });
-  $("#gMicroThumbUnselectAll").click(function(event) {
-    select_all(false);
-    event.preventDefault();
-  });
-
-  // Drag and Drop Initialization
-  $(".gOrganizeReorderDropTarget").droppable({
-    hoverClass: "gOrganizeReorderDropTargetHover",
-    accept: ".gThumbSelected",
-    drop: function(event, ui) {
-      // Ajax call to start task for rearrange
-    }
-  });
-
-  $(".gOrganizeBranch").droppable({
-    greedy: true,
-    accept: ".gThumbSelected",
-    drop: function(event, ui) {
-      // Ajax call to start task for move
-    }
-  });
-}
-
 function select_all(select) {
-  $(".gMicroThumb").click();
   if (select) {
-//    $("#gMicroThumbGrid li").addClass("gThumbSelected");
+    $(".gMicroThumbContainer").addClass("ui-selected");
     $("#gMicroThumbSelectAll").hide();
     $("#gMicroThumbUnselectAll").show();
   } else {
-//    $("#gMicroThumbGrid li").removeClass("gThumbSelected");
+    $(".gMicroThumbContainer").removeClass("ui-selected");
     $("#gMicroThumbSelectAll").show();
     $("#gMicroThumbUnselectAll").hide();
   }
diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js
index 70949eab..faa725d3 100644
--- a/modules/organize/js/organize_init.js
+++ b/modules/organize/js/organize_init.js
@@ -10,7 +10,8 @@ $("document").ready(function() {
       autoResize: false,
       modal: true,
       resizable: true,
-      close: closeDialog
+      close: closeDialog,
+      zIndex: 75
     });
 
     //showLoading("#gDialog");
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index 5f26603e..6b9eb3c6 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -16,7 +16,7 @@
       <div class="yui-b">
         <a id="gMicroThumbSelectAll" href="#"><?= t("select all") ?></a>
         <a id="gMicroThumbUnselectAll" href="#" style="display: none"><?= t("deselect all") ?></a>
-        <div id="gMicroThumbContainer" class="yui-u first"
+        <div id="gMicroThumbPanel" class="yui-u first"
              ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
             <ul id="gMicroThumbGrid">
             </ul>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index cdfd00bb..34b8058f 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,18 +1,15 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <script>
-  $(".gMicroThumb").click(toggle_select);
+  //$(".gMicroThumb").click(toggle_select);
 </script>
 <? foreach ($children as $i => $child): ?>
 <? $item_class = "gPhoto"; ?>
 <? if ($child->is_album()): ?>
   <? $item_class = "gAlbum"; ?>
 <? endif ?>
-<li>
-  <div>
-    <div class="gOrganizeReorderDropTarget" ref="<?= $child->id ?>">&nbsp;</div>
-    <div id="gMicroThumb-<?= $child->id ?>" class="gMicroThumb <?= $item_class ?>">
-      <?= $child->thumb_tag(array("class" => "gThumbnail"), $thumbsize, true) ?>
-    </div>
+<li id="thumb_<?= $child->id ?>" class="gMicroThumbContainer" ref="<?= $child->id ?>">
+  <div id="gMicroThumb-<?= $child->id ?>" class="gMicroThumb <?= $item_class ?>">
+    <?= $child->thumb_tag(array("class" => "gThumbnail"), $thumbsize, true) ?>
   </div>
 </li>
 <? endforeach ?>