Swap organize_frame and organize_dialog since they were semantically

reversed.  organize_dialog contains the stuff that pops up in the dialog,
organize_frame contains the stuff that's in the embedded iframe.

3 files changed, 423 insertions, 423 deletions

diff --git a/modules/organize/helpers/organize_event.php b/modules/organize/helpers/organize_event.php
index fbe18a7a..2f997600 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("g-menu-organize-link")
-                 ->url(url::site("organize/frame/{$item->id}")));
+                 ->url(url::site("organize/dialog/{$item->id}")));
     }
   }
 
@@ -39,7 +39,7 @@ class organize_event_Core {
                    ->id("organize")
                    ->label(t("Organize album"))
                    ->css_class("ui-icon-folder-open g-organize-link")
-                   ->url(url::site("organize/frame/{$item->id}")));
+                   ->url(url::site("organize/dialog/{$item->id}")));
       } else {
         $parent = $item->parent();
         $menu->get("options_menu")
@@ -47,7 +47,7 @@ class organize_event_Core {
                    ->id("move")
                    ->label(t("Move to another album"))
                    ->css_class("ui-icon-folder-open g-organize-link")
-                   ->url(url::site("organize/frame/{$parent->id}?selected_id={$item->id}")));
+                   ->url(url::site("organize/dialog/{$parent->id}?selected_id={$item->id}")));
       }
     }
   }
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index d9303075..7bff576d 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,409 +1,23 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
-<style type="text/css">
-  .g-organize div.thumb-album div.icon {
-    background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
+<style>
+  #g-organize-frame {
+    border: 0px;
+    width: 100%;
+    height: 100%;
   }
 </style>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
-<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
-  Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
-  Ext.Ajax.timeout = 1000000;  // something really large
-
-  Ext.onReady(function() {
-    /*
-     * ********************************************************************************
-     * Utility functions for loading data and making changes
-     * ********************************************************************************
-     */
-    var start_busy = function(msg) {
-      outer.el.mask(msg, "loading");
-    }
-
-    var stop_busy = function() {
-      outer.el.unmask();
-    }
-
-    var show_generic_error = function() {
-      stop_busy();
-      Ext.Msg.alert(
-        <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
-    }
-
-    var current_album_id = null;
-    var load_album_data = function(id) {
-      start_busy(<?= t("Loading...")->for_js() ?>);
-      Ext.Ajax.request({
-        url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
-        success: function(xhr, opts) {
-          stop_busy();
-          var album_info = Ext.util.JSON.decode(xhr.responseText);
-          var store = new Ext.data.JsonStore({
-            autoDestroy: true,
-            fields: ["id", "thumb_url", "width", "height", "type", "title"],
-            idProperty: "id",
-            root: "children",
-            data: album_info
-          });
-          current_album_id = id;
-          thumb_data_view.bindStore(store);
-          sort_column_combobox.setValue(album_info.sort_column);
-          sort_order_combobox.setValue(album_info.sort_order);
-        },
-        failure: show_generic_error
-      });
-    };
-
-    var reload_album_data = function() {
-      if (current_album_id) {
-        load_album_data(current_album_id);
-      }
-    };
-
-    var set_album_sort = function(params) {
-      start_busy(<?= t("Changing sort...")->for_js() ?>);
-      params["csrf"] = '<?= access::csrf_token() ?>';
-      Ext.Ajax.request({
-        url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
-        method: "post",
-        success: function() {
-          stop_busy();
-          reload_album_data();
-        },
-        failure: show_generic_error,
-        params: params
-      });
-    }
-
-    /*
-     * ********************************************************************************
-     * JsonStore, DataView and Panel for viewing albums
-     * ********************************************************************************
-     */
-    var thumb_data_view = new Ext.DataView({
-      autoScroll: true,
-      enableDragDrop: true,
-      itemSelector: "div.thumb",
-      plugins: [
-        new Ext.DataView.DragSelector({dragSafe: true})
-      ],
-      listeners: {
-        "render": function(v) {
-          v.dragZone = new Ext.dd.DragZone(v.getEl(), {
-            ddGroup: "organizeDD",
-            containerScroll: true,
-            getDragData: function(e) {
-              var target = e.getTarget(v.itemSelector, 10);
-              if (target) {
-                if (!v.isSelected(target)) {
-                  v.onClick(e);
-                }
-                var selected_nodes = v.getSelectedNodes();
-                var drag_data = {
-                  nodes: selected_nodes,
-                  repair_xy: Ext.fly(target).getXY()
-                };
-                if (selected_nodes.length == 1) {
-                  drag_data.ddel = target;
-                } else {
-                  var drag_ghost = document.createElement("div");
-                  drag_ghost.className = "drag-ghost";
-                  for (var i = 0; i != selected_nodes.length; i++) {
-                    var inner = document.createElement("div");
-                    drag_ghost.appendChild(inner);
-
-                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
-                    var child = inner.appendChild(img.cloneNode(true));
-                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
-                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
-                  }
-                  // The contents of the ghost float, and the ghost is wide enough for
-                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
-                  // are max 120px high max, and ghost thumbs are half of that, but leave some
-                  // padding because IE is unpredictable.
-                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
-                  drag_data.ddel = drag_ghost;
-                }
-                return drag_data;
-              }
-            },
-            getRepairXY: function() {
-              return this.dragData.repair_xy;
-            }
-          });
-
-          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
-            ddGroup: "organizeDD",
-            getTargetFromEvent: function(e) {
-              return e.getTarget("div.thumb", 10);
-            },
-            onNodeOut: function(target, dd, e, data) {
-              Ext.fly(target).removeClass("active-left");
-              Ext.fly(target).removeClass("active-right");
-            },
-            onNodeOver: function(target, dd, e, data) {
-              var target_x = Ext.lib.Dom.getX(target);
-              var target_center = target_x + (target.offsetWidth / 2);
-              if (Ext.lib.Event.getPageX(e) < target_center) {
-                Ext.fly(target).addClass("active-left");
-                Ext.fly(target).removeClass("active-right");
-                this.drop_side = "before";
-              } else {
-                Ext.fly(target).removeClass("active-left");
-                Ext.fly(target).addClass("active-right");
-                this.drop_side = "after";
-              }
-              return Ext.dd.DropZone.prototype.dropAllowed;
-            },
-            onNodeDrop: function(target, dd, e, data) {
-              var nodes = data.nodes;
-              source_ids = [];
-              for (var i = 0; i != nodes.length; i++) {
-                source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
-              }
-              start_busy(<?= t("Rearranging...")->for_js() ?>);
-              target = Ext.fly(target);
-              Ext.Ajax.request({
-                url: '<?= url::site("organize/rearrange") ?>',
-                method: "post",
-                success: function() {
-                  stop_busy();
-                  reload_album_data();
-                },
-                failure: show_generic_error,
-                params: {
-                  source_ids: source_ids.join(","),
-                  target_id: target.getAttribute("rel"),
-                  relative: this.drop_side, // calculated in onNodeOver
-                  csrf: '<?= access::csrf_token() ?>'
-                }
-              });
-              return true;
-            }
-          });
-        }
-      },
-      multiSelect: true,
-      selectedClass: "selected",
-      tpl: new Ext.XTemplate(
-        '<tpl for=".">',
-        '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
-        '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
-        '<div class="icon"></div>',
-        '</div>',
-        '</tpl>')
-    });
-
-    /*
-     * ********************************************************************************
-     * Toolbar with sort column, sort order and a close button.
-     * ********************************************************************************
-     */
-
-    sort_order_data = [];
-    <? foreach (album::get_sort_order_options() as $key => $value): ?>
-    sort_order_data.push(["<?= $key ?>", <?= $value->for_js() ?>]);
-    <? endforeach ?>
-    var sort_column_combobox = new Ext.form.ComboBox({
-      mode: "local",
-      editable: false,
-      allowBlank: false,
-      forceSelection: true,
-      triggerAction: "all",
-      store: new Ext.data.ArrayStore({
-        id: 0,
-        fields: ["key", "value"],
-        data: sort_order_data
-      }),
-      listeners: {
-        "select": function(combo, record, index) {
-          set_album_sort({sort_column: record.id});
-        }
-      },
-      valueField: "key",
-      displayField: "value"
-    });
-
-    var sort_order_combobox = new Ext.form.ComboBox({
-      mode: "local",
-      editable: false,
-      allowBlank: false,
-      forceSelection: true,
-      triggerAction: "all",
-      store: new Ext.data.ArrayStore({
-        id: 0,
-        fields: ["key", "value"],
-        data: [
-          ["ASC", <?= t("Ascending")->for_js() ?>],
-          ["DESC", <?= t("Descending")->for_js() ?>]]
-      }),
-      listeners: {
-        "select": function(combo, record, index) {
-          set_album_sort({sort_order: record.id});
-        }
-      },
-      valueField: "key",
-      displayField: "value"
-    });
-
-    var button_panel = new Ext.Panel({
-      layout: "hbox",
-      region: "south",
-      height: 24,
-      layoutConfig: {
-        align: "stretch"
-      },
-      items: [sort_column_combobox, sort_order_combobox,
-        {
-          xtype: "spacer",
-          flex: 4
-        }, {
-          xtype: "button",
-          flex: 1,
-          text: <?= t("Close")->for_js() ?>,
-          listeners: {
-            "click": function() {
-              parent.done_organizing(current_album_id);
-            }
-          }
-        }
-      ]
-    });
-
-    var album_panel = new Ext.Panel({
-      layout: "fit",
-      region: "center",
-      title: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
-      items: [thumb_data_view],
-      bbar: button_panel
-    });
-
-    /*
-     * ********************************************************************************
-     *  TreeLoader and TreePanel
-     * ********************************************************************************
-     */
-    var tree_loader = new Ext.tree.TreeLoader({
-      dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
-      nodeParameter: "root_id",
-      requestMethod: "post"
-    });
-
-    var tree_panel = new Ext.tree.TreePanel({
-      useArrows: true,
-      autoScroll: true,
-      animate: true,
-      border: false,
-      containerScroll: true,
-      enableDD: true,
-      dropConfig: {
-        appendOnly: true,
-        ddGroup: "organizeDD"
-      },
-      listeners: {
-        "click": function(node) {
-          load_album_data(node.id);
-        },
-        "afterrender": function(v) {
-          // Override Ext.tree.TreeDragZone.onNodeOver to change the
-          // x-tree-drop-ok-append CSS class to be x-dd-drop-ok since
-          // that connotes "ok" instead of "adding something new" and we're
-          // moving the item, not adding it.
-          //
-          // There's probably a better way of overriding the parent method, but
-          // my JavaScript-fu is weak.
-          v.dropZone.super_onNodeOver = v.dropZone.onNodeOver;
-          v.dropZone.onNodeOver = function(target, dd, e, data) {
-            var returnCls = this.super_onNodeOver(target, dd, e, data);
-            if (returnCls == "x-tree-drop-ok-append") {
-              return "x-dd-drop-ok";
-            }
-            return returnCls;
-          }
-
-          v.dropZone.onNodeDrop = function(target, dd, e, data) {
-            var nodes = data.nodes;
-            source_ids = [];
-            var moving_albums = 0;
-            for (var i = 0; i != nodes.length; i++) {
-              var node = Ext.fly(nodes[i]);
-              source_ids.push(node.getAttribute("rel"));
-              moving_albums |= node.hasClass("thumb-album");
-            }
-            start_busy(<?= t("Moving...")->for_js() ?>);
-            Ext.Ajax.request({
-              url: '<?= url::site("organize/reparent") ?>',
-              method: "post",
-              success: function() {
-                stop_busy();
-                reload_album_data();
-
-                // If we're moving albums around then we need to refresh the tree when we're done
-                if (moving_albums) {
-                  target.node.reload();
-
-                  // If the target node contains the selected node, then the selected
-                  // node just got strafed by the target's reload and no longer exists,
-                  // so we can't reload it.
-                  var selected_node = v.getNodeById(current_album_id);
-                  if (selected_node) {
-                    selected_node.reload();
-                  }
-                }
-              },
-              failure: show_generic_error,
-              params: {
-                source_ids: source_ids.join(","),
-                target_id: target.node.id,
-                csrf: '<?= access::csrf_token() ?>'
-              }
-            });
-            return true;
-          }
-        }
-      },
-      loader: tree_loader,
-
-      region: "west",
-      split: true,
-      minSize: 200,
-      maxSize: 350,
-      width: 200,
-
-      root: {
-        allowDrop: Boolean(<?= access::can("edit", item::root()) ?>),
-        nodeType: "async",
-        text: "<?= item::root()->title ?>",
-        draggable: false,
-        id: "<?= item::root()->id ?>",
-        expanded: true
-      }
-    });
-
-    var first_organize_load = true;
-    tree_loader.addListener("load", function() {
-      if (first_organize_load) {
-        tree_panel.getNodeById(<?= $album->id ?>).select();
-        load_album_data(<?= $album->id ?>);
-        first_organize_load = false;
-
-        // This is a hack that allows us to reload tree nodes asynchronously
-        // even though they came with preloaded hierarchical data from the
-        // initial tree load.  Without this, any nodes that were preloaded
-        // initially won't refresh if you call node.reload() on them.
-        tree_loader.doPreload = function() { return false; }
-      }
-    });
-    tree_panel.getRootNode().expand();
+  var ORGANIZE_TITLE =
+    <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
+  var done_organizing = function(album_id) {
+    $("#g-dialog").dialog("close");
+    window.location = '<?= url::site("items/__ID__") ?>'.replace("__ID__", album_id);
+  }
 
-    var outer = new Ext.Viewport({
-      layout: "border",
-      cls: "g-organize",
-      items: [tree_panel, album_panel]
-    });
-  });
+  var set_title = function(title) {
+    $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
+  }
+  set_title("<?= $album->title ?>");
 </script>
+<iframe id="g-organize-frame" src="<?= url::site("organize/frame/{$album->id}") ?>">
+</iframe>
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 2abea898..d9303075 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -1,23 +1,409 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-organize-frame {
-    border: 0px;
-    width: 100%;
-    height: 100%;
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<style type="text/css">
+  .g-organize div.thumb-album div.icon {
+    background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
   }
 </style>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
 <script type="text/javascript">
-  var ORGANIZE_TITLE =
-    <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
-  var done_organizing = function(album_id) {
-    $("#g-dialog").dialog("close");
-    window.location = '<?= url::site("items/__ID__") ?>'.replace("__ID__", album_id);
-  }
+  Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
+  Ext.Ajax.timeout = 1000000;  // something really large
 
-  var set_title = function(title) {
-    $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
-  }
-  set_title("<?= $album->title ?>");
+  Ext.onReady(function() {
+    /*
+     * ********************************************************************************
+     * Utility functions for loading data and making changes
+     * ********************************************************************************
+     */
+    var start_busy = function(msg) {
+      outer.el.mask(msg, "loading");
+    }
+
+    var stop_busy = function() {
+      outer.el.unmask();
+    }
+
+    var show_generic_error = function() {
+      stop_busy();
+      Ext.Msg.alert(
+        <?= t("An error occurred.  Consult your system administrator.")->for_js() ?>);
+    }
+
+    var current_album_id = null;
+    var load_album_data = function(id) {
+      start_busy(<?= t("Loading...")->for_js() ?>);
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
+        success: function(xhr, opts) {
+          stop_busy();
+          var album_info = Ext.util.JSON.decode(xhr.responseText);
+          var store = new Ext.data.JsonStore({
+            autoDestroy: true,
+            fields: ["id", "thumb_url", "width", "height", "type", "title"],
+            idProperty: "id",
+            root: "children",
+            data: album_info
+          });
+          current_album_id = id;
+          thumb_data_view.bindStore(store);
+          sort_column_combobox.setValue(album_info.sort_column);
+          sort_order_combobox.setValue(album_info.sort_order);
+        },
+        failure: show_generic_error
+      });
+    };
+
+    var reload_album_data = function() {
+      if (current_album_id) {
+        load_album_data(current_album_id);
+      }
+    };
+
+    var set_album_sort = function(params) {
+      start_busy(<?= t("Changing sort...")->for_js() ?>);
+      params["csrf"] = '<?= access::csrf_token() ?>';
+      Ext.Ajax.request({
+        url: '<?= url::site("organize/set_sort/__ID__") ?>'.replace("__ID__", current_album_id),
+        method: "post",
+        success: function() {
+          stop_busy();
+          reload_album_data();
+        },
+        failure: show_generic_error,
+        params: params
+      });
+    }
+
+    /*
+     * ********************************************************************************
+     * JsonStore, DataView and Panel for viewing albums
+     * ********************************************************************************
+     */
+    var thumb_data_view = new Ext.DataView({
+      autoScroll: true,
+      enableDragDrop: true,
+      itemSelector: "div.thumb",
+      plugins: [
+        new Ext.DataView.DragSelector({dragSafe: true})
+      ],
+      listeners: {
+        "render": function(v) {
+          v.dragZone = new Ext.dd.DragZone(v.getEl(), {
+            ddGroup: "organizeDD",
+            containerScroll: true,
+            getDragData: function(e) {
+              var target = e.getTarget(v.itemSelector, 10);
+              if (target) {
+                if (!v.isSelected(target)) {
+                  v.onClick(e);
+                }
+                var selected_nodes = v.getSelectedNodes();
+                var drag_data = {
+                  nodes: selected_nodes,
+                  repair_xy: Ext.fly(target).getXY()
+                };
+                if (selected_nodes.length == 1) {
+                  drag_data.ddel = target;
+                } else {
+                  var drag_ghost = document.createElement("div");
+                  drag_ghost.className = "drag-ghost";
+                  for (var i = 0; i != selected_nodes.length; i++) {
+                    var inner = document.createElement("div");
+                    drag_ghost.appendChild(inner);
+
+                    var img = Ext.get(selected_nodes[i]).dom.firstChild;
+                    var child = inner.appendChild(img.cloneNode(true));
+                    Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
+                    Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
+                  }
+                  // The contents of the ghost float, and the ghost is wide enough for
+                  // 4 images across so make sure that the ghost is tall enough.  Thumbnails
+                  // are max 120px high max, and ghost thumbs are half of that, but leave some
+                  // padding because IE is unpredictable.
+                  drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
+                  drag_data.ddel = drag_ghost;
+                }
+                return drag_data;
+              }
+            },
+            getRepairXY: function() {
+              return this.dragData.repair_xy;
+            }
+          });
+
+          v.dropZone = new Ext.dd.DropZone(v.getEl(), {
+            ddGroup: "organizeDD",
+            getTargetFromEvent: function(e) {
+              return e.getTarget("div.thumb", 10);
+            },
+            onNodeOut: function(target, dd, e, data) {
+              Ext.fly(target).removeClass("active-left");
+              Ext.fly(target).removeClass("active-right");
+            },
+            onNodeOver: function(target, dd, e, data) {
+              var target_x = Ext.lib.Dom.getX(target);
+              var target_center = target_x + (target.offsetWidth / 2);
+              if (Ext.lib.Event.getPageX(e) < target_center) {
+                Ext.fly(target).addClass("active-left");
+                Ext.fly(target).removeClass("active-right");
+                this.drop_side = "before";
+              } else {
+                Ext.fly(target).removeClass("active-left");
+                Ext.fly(target).addClass("active-right");
+                this.drop_side = "after";
+              }
+              return Ext.dd.DropZone.prototype.dropAllowed;
+            },
+            onNodeDrop: function(target, dd, e, data) {
+              var nodes = data.nodes;
+              source_ids = [];
+              for (var i = 0; i != nodes.length; i++) {
+                source_ids.push(Ext.fly(nodes[i]).getAttribute("rel"));
+              }
+              start_busy(<?= t("Rearranging...")->for_js() ?>);
+              target = Ext.fly(target);
+              Ext.Ajax.request({
+                url: '<?= url::site("organize/rearrange") ?>',
+                method: "post",
+                success: function() {
+                  stop_busy();
+                  reload_album_data();
+                },
+                failure: show_generic_error,
+                params: {
+                  source_ids: source_ids.join(","),
+                  target_id: target.getAttribute("rel"),
+                  relative: this.drop_side, // calculated in onNodeOver
+                  csrf: '<?= access::csrf_token() ?>'
+                }
+              });
+              return true;
+            }
+          });
+        }
+      },
+      multiSelect: true,
+      selectedClass: "selected",
+      tpl: new Ext.XTemplate(
+        '<tpl for=".">',
+        '<div class="thumb thumb-{type}" id="thumb-{id}" rel="{id}">',
+        '<img src="{thumb_url}" width="{width}" height="{height}" title="{title}">',
+        '<div class="icon"></div>',
+        '</div>',
+        '</tpl>')
+    });
+
+    /*
+     * ********************************************************************************
+     * Toolbar with sort column, sort order and a close button.
+     * ********************************************************************************
+     */
+
+    sort_order_data = [];
+    <? foreach (album::get_sort_order_options() as $key => $value): ?>
+    sort_order_data.push(["<?= $key ?>", <?= $value->for_js() ?>]);
+    <? endforeach ?>
+    var sort_column_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: sort_order_data
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_column: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
+
+    var sort_order_combobox = new Ext.form.ComboBox({
+      mode: "local",
+      editable: false,
+      allowBlank: false,
+      forceSelection: true,
+      triggerAction: "all",
+      store: new Ext.data.ArrayStore({
+        id: 0,
+        fields: ["key", "value"],
+        data: [
+          ["ASC", <?= t("Ascending")->for_js() ?>],
+          ["DESC", <?= t("Descending")->for_js() ?>]]
+      }),
+      listeners: {
+        "select": function(combo, record, index) {
+          set_album_sort({sort_order: record.id});
+        }
+      },
+      valueField: "key",
+      displayField: "value"
+    });
+
+    var button_panel = new Ext.Panel({
+      layout: "hbox",
+      region: "south",
+      height: 24,
+      layoutConfig: {
+        align: "stretch"
+      },
+      items: [sort_column_combobox, sort_order_combobox,
+        {
+          xtype: "spacer",
+          flex: 4
+        }, {
+          xtype: "button",
+          flex: 1,
+          text: <?= t("Close")->for_js() ?>,
+          listeners: {
+            "click": function() {
+              parent.done_organizing(current_album_id);
+            }
+          }
+        }
+      ]
+    });
+
+    var album_panel = new Ext.Panel({
+      layout: "fit",
+      region: "center",
+      title: <?= t("Drag and drop photos to re-order or move between albums")->for_js() ?>,
+      items: [thumb_data_view],
+      bbar: button_panel
+    });
+
+    /*
+     * ********************************************************************************
+     *  TreeLoader and TreePanel
+     * ********************************************************************************
+     */
+    var tree_loader = new Ext.tree.TreeLoader({
+      dataUrl: '<?= url::site("organize/tree/{$album->id}") ?>',
+      nodeParameter: "root_id",
+      requestMethod: "post"
+    });
+
+    var tree_panel = new Ext.tree.TreePanel({
+      useArrows: true,
+      autoScroll: true,
+      animate: true,
+      border: false,
+      containerScroll: true,
+      enableDD: true,
+      dropConfig: {
+        appendOnly: true,
+        ddGroup: "organizeDD"
+      },
+      listeners: {
+        "click": function(node) {
+          load_album_data(node.id);
+        },
+        "afterrender": function(v) {
+          // Override Ext.tree.TreeDragZone.onNodeOver to change the
+          // x-tree-drop-ok-append CSS class to be x-dd-drop-ok since
+          // that connotes "ok" instead of "adding something new" and we're
+          // moving the item, not adding it.
+          //
+          // There's probably a better way of overriding the parent method, but
+          // my JavaScript-fu is weak.
+          v.dropZone.super_onNodeOver = v.dropZone.onNodeOver;
+          v.dropZone.onNodeOver = function(target, dd, e, data) {
+            var returnCls = this.super_onNodeOver(target, dd, e, data);
+            if (returnCls == "x-tree-drop-ok-append") {
+              return "x-dd-drop-ok";
+            }
+            return returnCls;
+          }
+
+          v.dropZone.onNodeDrop = function(target, dd, e, data) {
+            var nodes = data.nodes;
+            source_ids = [];
+            var moving_albums = 0;
+            for (var i = 0; i != nodes.length; i++) {
+              var node = Ext.fly(nodes[i]);
+              source_ids.push(node.getAttribute("rel"));
+              moving_albums |= node.hasClass("thumb-album");
+            }
+            start_busy(<?= t("Moving...")->for_js() ?>);
+            Ext.Ajax.request({
+              url: '<?= url::site("organize/reparent") ?>',
+              method: "post",
+              success: function() {
+                stop_busy();
+                reload_album_data();
+
+                // If we're moving albums around then we need to refresh the tree when we're done
+                if (moving_albums) {
+                  target.node.reload();
+
+                  // If the target node contains the selected node, then the selected
+                  // node just got strafed by the target's reload and no longer exists,
+                  // so we can't reload it.
+                  var selected_node = v.getNodeById(current_album_id);
+                  if (selected_node) {
+                    selected_node.reload();
+                  }
+                }
+              },
+              failure: show_generic_error,
+              params: {
+                source_ids: source_ids.join(","),
+                target_id: target.node.id,
+                csrf: '<?= access::csrf_token() ?>'
+              }
+            });
+            return true;
+          }
+        }
+      },
+      loader: tree_loader,
+
+      region: "west",
+      split: true,
+      minSize: 200,
+      maxSize: 350,
+      width: 200,
+
+      root: {
+        allowDrop: Boolean(<?= access::can("edit", item::root()) ?>),
+        nodeType: "async",
+        text: "<?= item::root()->title ?>",
+        draggable: false,
+        id: "<?= item::root()->id ?>",
+        expanded: true
+      }
+    });
+
+    var first_organize_load = true;
+    tree_loader.addListener("load", function() {
+      if (first_organize_load) {
+        tree_panel.getNodeById(<?= $album->id ?>).select();
+        load_album_data(<?= $album->id ?>);
+        first_organize_load = false;
+
+        // This is a hack that allows us to reload tree nodes asynchronously
+        // even though they came with preloaded hierarchical data from the
+        // initial tree load.  Without this, any nodes that were preloaded
+        // initially won't refresh if you call node.reload() on them.
+        tree_loader.doPreload = function() { return false; }
+      }
+    });
+    tree_panel.getRootNode().expand();
+
+    var outer = new Ext.Viewport({
+      layout: "border",
+      cls: "g-organize",
+      items: [tree_panel, album_panel]
+    });
+  });
 </script>
-<iframe id="g-organize-frame" src="<?= url::site("organize/dialog/{$album->id}") ?>">
-</iframe>