Here is the current state of "organize". I'm having trouble getting

drag and drop to work.  And to get it to layout properly.  Any
thoughts would be appreciated.

4 files changed, 80 insertions, 67 deletions

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 33067ae6..725cc338 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -99,12 +99,22 @@
   text-align: center;
 }
 
-#gOrganizeButtonPane {
-  padding: .5em;
-  text-align: center;
+#gMicroThumbUnselectAll,
+#gMicroThumbSelectAll {
+  font-size: 1.2em;
+  font-weight: bold;
 }
 
-#gOrganizeFormInfo td {
-  border: thin none;
-  padding: 0;
+.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 c3e5d3be..c40a2d67 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -41,45 +41,12 @@ function get_more_data() {
 }
 
 function toggle_select(event) {
-  var clone = null;
-  var id = $(this).attr("id").replace(/[^0-9]/g, "");
-
   if ($(this).hasClass("gThumbSelected")) {
     $(this).removeClass("gThumbSelected");
-    var newSelect = $(".gThumbSelected");
-    if (newSelect.size() == 1) {
-      clone = $(".gThumbSelected").children("img").clone(true);
-      id = $(".gThumbSelected").attr("id").replace(/[^0-9]/g, "");
-    } else {
-      clone = null;
-    }
+    $(this).draggable("destroy");
   } else {
-    clone = $(this).children("img").clone(true);
     $(this).addClass("gThumbSelected");
-  }
-  switch ($(".gThumbSelected").size()) {
-  case 0:
-    reset_edit_select();
-    break;
-  case 1:
-    $("#gOrganizeFormThumb").empty();
-    $("#gOrganizeFormThumb").append(clone);
-    $("#gOrganizeFormNoImage").hide();
-    $("#gOrganizeFormMultipleImages").hide();
-    $("#gOrganizeFormThumb").show();
-    $("#gOrganizeButtonPane").show();
-    $.getJSON($("#gOrganizeFormInfo").attr("ref").replace("__ITEM_ID__", id), function(data) {
-      $("#gOrganizeFormTitle").text(data.title);
-      $("#gOrganizeFormOwner").text(data.owner);
-      $("#gOrganizeFormDate").text(data.date);
-      $("#gOrganizeFormDescription").text(data.description);
-      $("#gOrganizeFormInfo").show();
-    });
-    break;
-  default:
-    $("#gOrganizeFormThumb").hide();
-    $("#gOrganizeFormInfo").hide();
-    $("#gOrganizeFormMultipleImages").show();
+    $(this).draggable({containment: "#gDialog"});
   }
   event.preventDefault();
 }
@@ -89,7 +56,7 @@ function reset_edit_select() {
   $("#gOrganizeFormThumb").hide();
   $("#gOrganizeFormMultipleImages").hide();
   $("#gOrganizeButtonPane").hide();
-  $("#gOrganizeFormInfo").hide();
+  select_all(false);
 }
 
 function organize_toggle_children(event) {
@@ -114,11 +81,6 @@ function organize_open_folder(event) {
     $(this).addClass("gBranchSelected");
     item_id = $(this).attr("ref");
     $("#gMicroThumbGrid").empty();
-    var url_header = $("#gDialog #hd").attr("ref").replace("__ITEM_ID__", item_id);
-    $.getJSON(url_header, function(data) {
-      $("#gOrganizeAlbumTitle").text(data.title);
-      $("#gOrganizeAlbumDescription").text(data.description);
-    });
     reset_edit_select();
     retrieve_micro_thumbs();
   }
@@ -154,6 +116,49 @@ function organize_dialog_init() {
   $(".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");
+    $("#gMicroThumbSelectAll").hide();
+    $("#gMicroThumbUnselectAll").show();
+  } else {
+//    $("#gMicroThumbGrid li").removeClass("gThumbSelected");
+    $("#gMicroThumbSelectAll").show();
+    $("#gMicroThumbUnselectAll").hide();
+  }
 }
 
 function viewport_size() {
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index 62c55132..bac61df5 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -5,41 +5,33 @@
   var csrf = "<?= $csrf ?>";
   $("#doc3").ready(function() {
     organize_dialog_init();
-    $("#gMicroThumbContainer").scroll(function() {
-      get_more_data();
-    });
   });
 </script>
 <fieldset style="display: none">
   <legend><?= t("Organize %name", array("name" => $item->title)) ?></legend>
 </fieldset>
 <div id="doc3" class="yui-t1">
-  <div id="hd" ref="<?= url::site("organize/header/__ITEM_ID__") ?>">
-    <h2 id="gOrganizeAlbumTitle"><?= $item->title ?></h2>
-    <p id="gOrganizeAlbumDescription"><?= $item->description ?></p>
-  </div>
-
   <div id="bd" role="main">
     <div id="yui-main">
       <div class="yui-b">
-        <div class="yui-ge">
-          <div id="gMicroThumbContainer" class="yui-u first"
-               ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
+        <a id="gMicroThumbSelectAll" href="#"><?= t("select all") ?></a>
+        <a id="gMicroThumbUnselectAll" href="#" style="display: none"><?= t("unselect all") ?></a>
+        <div id="gMicroThumbContainer" class="yui-u first"
+             ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
             <ul id="gMicroThumbGrid">
             </ul>
-          </div>
-          <div id="gOrganizeEditContainer"  class="yui-u">
-            <?= $edit_form ?>
-          </div>
         </div>
+          <!-- div id="gOrganizeEditContainer"  class="yui-u">
+            < ?= $edit_form ? >
+          </div -->
       </div>
     </div>
     <div id="gOrganizeTreeContainer" class="yui-b">
+      <h3><?= t("Albums") ?></h3>
       <?= $album_tree ?>
     </div>
   </div>
-
-  <div id="ft">
+  <!-- div id="ft">
     <div class="gProgressBar" style="visibility: hidden"></div>
-  </div>
+  </div -->
 </div>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index 1cbc4241..1f63f034 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -7,8 +7,14 @@
 <? if ($child->is_album()): ?>
   <? $item_class = "gAlbum"; ?>
 <? endif ?>
-<li id="gMicroThumb-<?= $child->id ?>" class="gMicroThumb <?= $item_class ?>">
-  <?= $child->micro_thumb_tag(array("class" => "gThumbnail"), $thumbsize) ?>
+<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>
+    </div>
 </li>
 <? endforeach ?>