From 65c850c393ce6159289e3fd05056c33e7d62e961 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 5 Aug 2009 10:26:11 -0700
Subject: Revert "Revert "Checkpoint the organize module rewrite.  At this
 point, it doesn't really do""

This reverts commit 397468c47b8fc3fefeb54ff19a73980ed1dd8c20.
---
 modules/organize/helpers/organize_theme.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'modules/organize/helpers/organize_theme.php')

diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php
index e4feba2b..f01ab88b 100644
--- a/modules/organize/helpers/organize_theme.php
+++ b/modules/organize/helpers/organize_theme.php
@@ -19,8 +19,7 @@
  */
 class organize_theme {
   static function head($theme) {
-    // @tdo remove the addition css and organize.js (just here to test)
-    $theme->script("organize_init.js");
+    //$theme->script("organize_init.js");
     $theme->script("organize.js");
     $theme->css("organize.css");
   }
-- 
cgit v1.2.3


From 794a7a5abf38ed828329cb0023df938479e90901 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Thu, 6 Aug 2009 14:55:03 -0700
Subject: Leverage the gallery.dialog/js functionality in order to reduce
 duplicate code

---
 modules/organize/helpers/organize_event.php     |   2 +-
 modules/organize/helpers/organize_theme.php     |   7 +-
 modules/organize/js/organize.js                 | 131 +++++++++---------------
 modules/organize/views/organize_dialog.html.php |  10 ++
 4 files changed, 61 insertions(+), 89 deletions(-)

(limited to 'modules/organize/helpers/organize_theme.php')

diff --git a/modules/organize/helpers/organize_event.php b/modules/organize/helpers/organize_event.php
index 99a28673..887d9c2d 100644
--- a/modules/organize/helpers/organize_event.php
+++ b/modules/organize/helpers/organize_event.php
@@ -23,7 +23,7 @@ class organize_event_Core {
 
     if ($item && access::can("edit", $item) && $item->is_album()) {
       $menu->get("options_menu")
-        ->append(Menu::factory("link")
+        ->append(Menu::factory("dialog")
         ->id("organize")
         ->label(t("Organize Album"))
         ->css_id("gOrganizeLink")
diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php
index f01ab88b..0fd117c3 100644
--- a/modules/organize/helpers/organize_theme.php
+++ b/modules/organize/helpers/organize_theme.php
@@ -19,8 +19,9 @@
  */
 class organize_theme {
   static function head($theme) {
-    //$theme->script("organize_init.js");
-    $theme->script("organize.js");
-    $theme->css("organize.css");
+    if (access::can("view", $theme->item()) && access::can("edit", $theme->item())) {
+      $theme->script("organize.js");
+      $theme->css("organize.css");
+    }
   }
 }
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 3e58f3f3..e4d4a9a2 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -1,91 +1,52 @@
 (function($) {
-  $.fn.organize = function() {
-    var size = $.getViewportSize();
-    var height = size.height() - 100;     // Leave 50 pixels on the top and bottom of the dialog
-    var width = size.width() - 100;       // Leave 50 pixels on the left and right of the dialog
-    return this.each(function() {
-      $(this).click(function(event) {
-        var href = event.target.href;
-
-        $("body").append('<div id="gOrganizeDialog"></div>');
-
-        $("#gOrganizeDialog").dialog({
-          autoOpen: false,
-          modal: true,
-          resizable: false,
-          width: width,
-          height: height,
-          position: "center",
-          close: function () {
-            $("#gOrganizeDialog").dialog("destroy").remove();
-            document.location.reload();
-         },
-          zIndex: 75
-        });
-        $.get(href, _init);
-        return false;
+  $.organize = {
+    /**
+     * Dynamically initialize the organize dialog when it is displayed
+     */
+    init: function(data) {
+      // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
+      $(".sf-menu li.sfHover ul").css("z-index", 70);
+
+      var height = $("#gOrganizeDetail").innerHeight();
+      $("#gMicroThumbPanel").height(height - $("#gOrganizeEditDrawerHandle").outerHeight());
+
+      $("#gDialog #gMicroThumbDone").click(function(event) {
+        $("#gDialog").dialog("close");
+                                             window.location.reload();
       });
-    });
-  };
-
-  /**
-   * Dynamically initialize the organize dialog when it is displayed
-   */
-  function _init(data) {
-    // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
-    $(".sf-menu li.sfHover ul").css("z-index", 70);
 
-    $("#gOrganizeDialog").html(data);
-    $("#gOrganizeDialog").dialog("open");
-
-    var height = $("#gOrganizeDetail").innerHeight();
-    $("#gMicroThumbPanel").height(height - $("#gOrganizeEditDrawerHandle").outerHeight());
-
-    if ($("#gOrganizeDialog h1").length) {
-      $("#gOrganizeDialog").dialog('option', 'title', $("#gOrganizeDialog h1:eq(0)").html());
-    } else if ($("#gOrganizeDialog fieldset legend").length) {
-      $("#gOrganizeDialog").dialog('option', 'title', $("#gOrganizeDialog fieldset legend:eq(0)").html());
+      $(".gBranchText span").click($.organize.collapse_or_expand_tree);
+      $(".gBranchText").click($.organize.setContents);
+    },
+
+    /**
+     * Open or close a branch. If the children is a div placeholder, replace with <ul>
+     */
+    collapse_or_expand_tree: function (event) {
+      event.stopPropagation();
+      if ($(event.currentTarget).hasClass("ui-icon-minus")) {
+        $(event.currentTarget).removeClass("ui-icon-minus").addClass("ui-icon-plus");
+      } else {
+        $(event.currentTarget).removeClass("ui-icon-plus").addClass("ui-icon-minus");
+      }
+      $("#gOrganizeChildren-" + $(event.currentTarget).attr("ref")).toggle();
+    },
+
+    /**
+     * When the text of a selection is clicked, then show that albums contents
+     */
+    setContents: function(event) {
+      event.preventDefault();
+      if ($(event.currentTarget).hasClass("gBranchSelected")) {
+        return;
+      }
+      var id = $(event.currentTarget).attr("ref");
+      $(".gBranchSelected").removeClass("gBranchSelected");
+      $("#gOrganizeBranch-" + id).addClass("gBranchSelected");
+      var url = $("#gMicroThumbPanel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0);
+      $.get(url, function(data) {
+        $("#gMicroThumbGrid").html(data);
+      });
     }
-
-    $("#gOrganizeDialog #gMicroThumbDone").click(function(event) {
-      $("#gOrganizeDialog").dialog("close");
-    });
-
-    $(".gBranchText span").click(_collapse_or_expanded_tree);
-    $(".gBranchText").click(_setContents);
   };
-
-  /**
-   * Open or close a branch. If the children is a div placeholder, replace with <ul>
-   */
-  function _collapse_or_expanded_tree(event) {
-    event.stopPropagation();
-    if ($(event.currentTarget).hasClass("ui-icon-minus")) {
-      $(event.currentTarget).removeClass("ui-icon-minus").addClass("ui-icon-plus");
-    } else {
-      $(event.currentTarget).removeClass("ui-icon-plus").addClass("ui-icon-minus");
-    }
-    $("#gOrganizeChildren-" + $(event.currentTarget).attr("ref")).toggle();
-  }
-
-  /**
-   * When the text of a selection is clicked, then show that albums contents
-   */
-  function _setContents(event) {
-    event.preventDefault();
-    if ($(event.currentTarget).hasClass("gBranchSelected")) {
-      return;
-    }
-    var id = $(event.currentTarget).attr("ref");
-    $(".gBranchSelected").removeClass("gBranchSelected");
-    $("#gOrganizeBranch-" + id).addClass("gBranchSelected");
-    var url = $("#gMicroThumbPanel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0);
-    $.get(url, function(data) {
-      $("#gMicroThumbGrid").html(data);
-    });
-  }
 })(jQuery);
-
-$("document").ready(function() {
-  $("#gOrganizeLink").organize();
-});
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 4f10297e..11ce0a37 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -38,3 +38,13 @@
   </div>
 </div>
 
+<script type="text/javascript">
+  setTimeout(function() {
+    // Resize with 50 pixels padding all around
+    var size = $.getViewportSize();
+    $("#gDialog").dialog("option", "height", size.height() - 100)
+                 .dialog("option", "width", size.width() - 100)
+                 .dialog("option", "position", "center");
+    $.organize.init();
+  }, 0);
+</script>
\ No newline at end of file
-- 
cgit v1.2.3


From a245c57400398d2b4b1c2aea94f590a9c0a7d8a8 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Thu, 6 Aug 2009 21:36:17 -0700
Subject: Further streamline the code.

Organize_Controller:
* Remove unnecessary constants
* Rename index() to dialog()
* Simplify _get_micro_thumb_grid

organize.js:
* Move sizing code in here from organize_dialog.html.php

organize_dialog.html.php:
* Move CSS and JS links in here so that we only load them when we need them.
* Move sizing code into organize.js

organize_thumb_grid.html.php:
* Move pagination logic in here, since it's view centric
* Collapse the css class determination code and inline it
---
 modules/organize/controllers/organize.php          | 22 +++++----------
 modules/organize/helpers/organize_event.php        |  2 +-
 modules/organize/helpers/organize_theme.php        | 27 -------------------
 modules/organize/js/organize.js                    |  6 +++++
 modules/organize/views/organize_dialog.html.php    |  9 +++----
 .../organize/views/organize_thumb_grid.html.php    | 31 +++++++++++-----------
 modules/organize/views/organize_tree.html.php      |  2 --
 7 files changed, 33 insertions(+), 66 deletions(-)
 delete mode 100644 modules/organize/helpers/organize_theme.php

(limited to 'modules/organize/helpers/organize_theme.php')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 95d71e9c..3a81ef4f 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -18,10 +18,7 @@
  * Foundation, Inc., 51 Franklin Street - Fifth Floor, Boston, MA  02110-1301, USA.
  */
 class Organize_Controller extends Controller {
-  private static $_MICRO_THUMB_SIZE = 90;
-  private static $_MICRO_THUMB_PADDING = 10;
-
-  function index($item_id) {
+  function dialog($item_id) {
     $item = ORM::factory("item", $item_id);
     $root = $item->id == 1 ? $item : ORM::factory("item", 1);
     access::required("view", $item);
@@ -36,26 +33,21 @@ class Organize_Controller extends Controller {
     $parents[$item->id] = 1;
 
     $v->album_tree = $this->_tree($root, $parents);
-    $v->micro_thumb_grid = $this->_get_micro_thumb_grid($item);
+    $v->micro_thumb_grid = $this->_get_micro_thumb_grid($item, 0);
     print $v;
   }
 
-  function content($item_id, $offset=0) {
+  function content($item_id, $offset) {
     $item = ORM::factory("item", $item_id);
     access::required("view", $item);
     access::required("edit", $item);
-
-    $v = $this->_get_micro_thumb_grid($item, $offset);
-    print $v->__toString();
+    print $this->_get_micro_thumb_grid($item, $offset);
   }
 
-  private function _get_micro_thumb_grid($item, $offset=0) {
+  private function _get_micro_thumb_grid($item, $offset) {
     $v = new View("organize_thumb_grid.html");
-    $v->item_id = $item->id;
-    $v->children = $item->children(25, $offset);
-    $v->thumbsize = self::$_MICRO_THUMB_SIZE;
-    $v->offset = $offset + 25;
-
+    $v->item = $item;
+    $v->offset = $offset;
     return $v;
   }
 
diff --git a/modules/organize/helpers/organize_event.php b/modules/organize/helpers/organize_event.php
index 887d9c2d..7d6b3e24 100644
--- a/modules/organize/helpers/organize_event.php
+++ b/modules/organize/helpers/organize_event.php
@@ -27,7 +27,7 @@ class organize_event_Core {
         ->id("organize")
         ->label(t("Organize Album"))
         ->css_id("gOrganizeLink")
-        ->url(url::site("organize/index/{$item->id}")));
+        ->url(url::site("organize/dialog/{$item->id}")));
     }
   }
 }
diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php
deleted file mode 100644
index 0fd117c3..00000000
--- a/modules/organize/helpers/organize_theme.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php defined("SYSPATH") or die("No direct script access.");
-/**
- * Gallery - a web based photo album viewer and editor
- * Copyright (C) 2000-2009 Bharat Mediratta
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or (at
- * your option) any later version.
- *
- * This program is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street - Fifth Floor, Boston, MA  02110-1301, USA.
- */
-class organize_theme {
-  static function head($theme) {
-    if (access::can("view", $theme->item()) && access::can("edit", $theme->item())) {
-      $theme->script("organize.js");
-      $theme->css("organize.css");
-    }
-  }
-}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index d2006c27..6b4a5934 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -4,6 +4,12 @@
      * Dynamically initialize the organize dialog when it is displayed
      */
     init: function(data) {
+      // Resize with 50 pixels padding all around
+      var size = $.getViewportSize();
+      $("#gDialog").dialog("option", "height", size.height() - 100)
+	.dialog("option", "width", size.width() - 100)
+	.dialog("option", "position", "center");
+
       // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
       $(".sf-menu li.sfHover ul").css("z-index", 70);
 
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 11ce0a37..6001e038 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,4 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
 <div id="gOrganize">
   <h1 style="display:none"><?= t("Organize %name", array("name" => p::purify($title))) ?></h1>
   <div id="bd">
@@ -38,13 +39,9 @@
   </div>
 </div>
 
+<script type="text/javascript" src="<?= url::file("modules/organize/js/organize.js") ?>"></script>
 <script type="text/javascript">
   setTimeout(function() {
-    // Resize with 50 pixels padding all around
-    var size = $.getViewportSize();
-    $("#gDialog").dialog("option", "height", size.height() - 100)
-                 .dialog("option", "width", size.width() - 100)
-                 .dialog("option", "position", "center");
     $.organize.init();
   }, 0);
-</script>
\ No newline at end of file
+</script>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index e6b7aec0..0d54c5c8 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,19 +1,20 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<? foreach ($children as $i => $child): ?>
-  <? $item_class = "gPhoto"; ?>
-  <? if ($child->is_album()): ?>
-    <? $item_class = "gAlbum"; ?>
-  <? endif ?>
-  <li id="gMicroThumb_<?= $child->id ?>" class="gMicroThumb  <?= $item_class ?>" ref="<?= $child->id ?>">
-    <?= $child->thumb_img(array("class" => "gThumbnail"), $thumbsize, true) ?>
-  </li>
+<? foreach ($item->children(25, $offset) as $child): ?>
+<li id="gMicroThumb_<?= $child->id ?>"
+    class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>"
+    ref="<?= $child->id ?>">
+  <?= $child->thumb_img(array("class" => "gThumbnail"), 90, true) ?>
+</li>
 <? endforeach ?>
-<? if (count($children) >= 25): ?>
+
+<? if ($item->children_count() > $offset): ?>
 <script>
-   $.get("<?= url::site("organize/content/{$item_id}/$offset") ?>",
-     function(data) {
-       $("#gMicroThumbGrid").append(data);
-     }
-   );
+  setTimeout(function() {
+    $.get("<?= url::site("organize/content/$item->id/" . ($offset + 25)) ?>",
+      function(data) {
+        $("#gMicroThumbGrid").append(data);
+      }
+    );
+  }, 50);
 </script>
-<? endif ?>
\ No newline at end of file
+<? endif ?>
diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php
index 280bdc5f..99b0dc1a 100644
--- a/modules/organize/views/organize_tree.html.php
+++ b/modules/organize/views/organize_tree.html.php
@@ -1,6 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <li class="gOrganizeBranch ui-icon-left" ref="<?= $album->id ?>">
-
   <div id="gOrganizeBranch-<?= $album->id ?>" ref="<?= $album->id ?>"
        class="<?= $selected ? "gBranchSelected" : "" ?> gBranchText">
     <span id="gOrganizeIcon-<?= $album->id ?>" ref="<?= $album->id ?>"
@@ -16,4 +15,3 @@
     <? endforeach ?>
   </ul>
 </li>
-
-- 
cgit v1.2.3


From 3823f65dfb4114caf9bd9cfbf730638927f6c970 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Wed, 12 Aug 2009 21:55:25 -0700
Subject: Implement the first part of drag functionality.  Having trouble
 getting visual feedback of the drop position between thumbnails, so this
 commit provides a checkpoint for trying various options

---
 modules/organize/controllers/organize.php          |  9 +--
 modules/organize/css/organize.css                  |  9 ++-
 modules/organize/helpers/organize_theme.php        | 28 +++++++++
 modules/organize/js/organize.js                    | 73 +++++++++++++++++++++-
 modules/organize/views/organize_dialog.html.php    |  4 +-
 .../organize/views/organize_thumb_grid.html.php    |  2 +-
 modules/organize/views/organize_tree.html.php      |  4 +-
 7 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 modules/organize/helpers/organize_theme.php

(limited to 'modules/organize/helpers/organize_theme.php')

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 3a81ef4f..6f83f940 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -60,13 +60,14 @@ class Organize_Controller extends Controller {
     $v->album_icon = "gBranchEmpty";
 
     $albums = $item->children(null, 0, array("type" => "album"), array("title" => "ASC"));
-    if ($albums->count()) {
-      $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus";
-
-      foreach ($albums as $album) {
+    foreach ($albums as $album) {
+      if (access::can("view", $album)) {
         $v->children[] = $this->_tree($album, $parents);
       }
     }
+    if (count($v->children)) {
+      $v->album_icon = empty($parents[$item->id]) ? "ui-icon-plus" : "ui-icon-minus";
+    }
     return $v;
   }
 }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index a4b5fdbd..1cc7c92c 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -1,3 +1,4 @@
+
 /*******************************************************************
  * Dialog wide stylings
  */
@@ -92,7 +93,7 @@
 }
 
 #gMicroThumbGrid {
-  padding: .5em;
+  padding: 1em;
 }
 
 .gMicroThumb {
@@ -107,10 +108,14 @@
   width: 9em;
 }
 
-.gMicroThumb.ui-selected {
+.gMicroThumb.ui-state-selected {
   opacity: 1;
 }
 
+.ui-selectable-lasso {
+  z-index: 2000 !important;
+  border: 1px dashed #13A;
+}
 
 .gThumbnail {
   padding: .5em;
diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php
new file mode 100644
index 00000000..de812261
--- /dev/null
+++ b/modules/organize/helpers/organize_theme.php
@@ -0,0 +1,28 @@
+<?php defined("SYSPATH") or die("No direct script access.");
+/**
+ * Gallery - a web based photo album viewer and editor
+ * Copyright (C) 2000-2009 Bharat Mediratta
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street - Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+class organize_theme {
+  static function head($theme) {
+    $item = $theme->item();
+    if ($item && access::can("edit", $item) && $item->is_album()) {
+      $theme->script("organize.js");
+      $theme->css("organize.css");
+    }
+  }
+}
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 05693200..c9408673 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -1,15 +1,83 @@
 (function($) {
   $.organize = {
+    micro_thumb_draggable: {
+      distance: 10,
+      cursorAt: { left: -10, top: -10},
+      appendTo: "#gOrganizeContentPane",
+      helper: function(event, ui) {
+        var selected = $("li.ui-state-selected img"),
+            set = $('<div class="temp"></div>').css({zIndex: 2000, width: 80, height: Math.ceil(selected.length / 5) * 16 }),
+            offset = $(this).offset(),
+            click = { left: event.pageX - offset.left, top: event.pageY - offset.top };
+
+        selected.each(function(i) {
+          var row = parseInt(i / 5);
+          var j = i - (row * 5);
+
+          var o = $(this).offset();
+
+          var copy = $(this).clone()
+            .css({
+              width: $(this).width(), height: $(this).height(), display: "block",
+              margin: 0, position: 'absolute', outline: '5px solid #fff',
+              left: o.left - event.pageX, top: o.top - event.pageY
+            })
+            .appendTo(set)
+            .animate({width: 10, height: 10, outlineWidth: 1, margin: 1, left: (20 * j), top: (row * 20)}, 500);
+        });
+        return set;
+      },
+      start: function(event, ui) {
+        $("#gMicroThumbPanel").prepend("<div id=\"gPlaceHolder\"></div>");
+
+        $("#gMicroThumbPanel li.ui-state-selected").hide();
+      },
+      drag: function(event, ui) {
+        var container = $("#gMicroThumbPanel").get(0);
+        var scrollTop = container.scrollTop;
+        var height = $(container).height();
+        if (event.pageY > height + scrollTop) {
+          container.scrollTop += height;
+        } else if (event.pageY < scrollTop) {
+          container.scrollTop -= height;
+        }
+      },
+      stop: function(event, ui) {
+        $("li.ui-state-selected").show();
+      }
+    },
+
+    droppable: {
+      accept: "*",
+      tolerance: "pointer",
+      greedy: true,
+      drop: function(event, ui) {
+        // @todo do a ajax call to send the rearrange request to the zerver
+        // organize/move/target_id/
+        // post parameters
+        //  before=id|after=id
+        //  source=[id1, id2, ...]
+        //  before or after not supplied then append to end
+        // return: json {
+        //   result: success | msg,
+        //   tree: null | new tree,
+        //   content: new thumbgrid
+        // }
+      }
+    },
+
     /**
      * Dynamically initialize the organize dialog when it is displayed
      */
     init: function(data) {
+      var self = this;
       // Deal with ui.jquery bug: http://dev.jqueryui.com/ticket/4475 (target 1.8?)
       $(".sf-menu li.sfHover ul").css("z-index", 68);
       $("#gDialog").dialog("option", "zIndex", 70);
       $("#gDialog").bind("dialogopen", function(event, ui) {
         $("#gOrganize").height($("#gDialog").innerHeight() - 20);
         $("#gMicroThumbPanel").height($("#gDialog").innerHeight() - 90);
+        $("#gOrganizeAlbumTree").height($("#gDialog").innerHeight() - 59);
       });
 
       $("#gDialog").bind("dialogclose", function(event, ui) {
@@ -23,7 +91,10 @@
       $(".gBranchText span").click($.organize.collapse_or_expand_tree);
       $(".gBranchText").click($.organize.show_album);
 
-      $("#gMicroThumbGrid").selectable({filter: ".gMicroThumb"});
+      $("#gMicroThumbPanel").selectable({filter: "li"});
+      $("#gMicroThumbPanel img").draggable($.organize.micro_thumb_draggable);
+      $(".gOrganizeBranch").droppable($.organize.droppable);
+      $("#gMicroThumbPanel").droppable($.organize.droppable);
     },
 
     /**
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index b946d82b..f8d6d792 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,5 +1,4 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
 <div id="gOrganize" class="gDialogPanel">
   <h1 style="display:none"><?= t("Organize %name", array("name" => p::purify($title))) ?></h1>
   <div id="bd">
@@ -11,7 +10,7 @@
         <div class="gInfo"><?= t("Select one or more items to edit; drag and drop items to re-order or move between albums") ?></div>
       </div>
     </div>
-    <div class="yui-gf">
+    <div id= "gOrganizeContentPane" class="yui-gf">
       <div id="gOrganizeTreeContainer" class="yui-u first">
         <ul id="gOrganizeAlbumTree">
           <?= $album_tree ?>
@@ -39,7 +38,6 @@
   </div>
 </div>
 
-<script type="text/javascript" src="<?= url::file("modules/organize/js/organize.js") ?>"></script>
 <script type="text/javascript">
   $("#gOrganize").ready($.organize.init);
 </script>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index 0d54c5c8..b6e3aa11 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -3,7 +3,7 @@
 <li id="gMicroThumb_<?= $child->id ?>"
     class="gMicroThumb <?= $child->is_album() ? "gAlbum" : "gPhoto" ?>"
     ref="<?= $child->id ?>">
-  <?= $child->thumb_img(array("class" => "gThumbnail"), 90, true) ?>
+  <?= $child->thumb_img(array("class" => "gThumbnail", "ref" => $child->id), 90, true) ?>
 </li>
 <? endforeach ?>
 
diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php
index 99b0dc1a..d2ef287a 100644
--- a/modules/organize/views/organize_tree.html.php
+++ b/modules/organize/views/organize_tree.html.php
@@ -1,11 +1,11 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <li class="gOrganizeBranch ui-icon-left" ref="<?= $album->id ?>">
   <div id="gOrganizeBranch-<?= $album->id ?>" ref="<?= $album->id ?>"
-       class="<?= $selected ? "gBranchSelected" : "" ?> gBranchText">
+       class="<?= $selected ? "gBranchSelected" : "" ?>">
     <span id="gOrganizeIcon-<?= $album->id ?>" ref="<?= $album->id ?>"
           class="ui-icon <?= $album_icon ?>">
     </span>
-    <?= p::clean($album->title) ?>
+    <span class="gBranchText" ref="<?= $album->id ?>"><?= p::clean($album->title) ?></span>
   </div>
   <ul id="gOrganizeChildren-<?= $album->id ?>"
       class="<?= $album_icon == "ui-icon-plus" ? "gBranchCollapsed" : "" ?>">
-- 
cgit v1.2.3