Another iteration of the organize module:

Rearrange the layout as per discussion with thumb, start the drawer
functionality. Still to do... 
1) Add the processing behind the buttons on the drawer handle
2) Enable the drawer buttons when something is selected
3) Create a copy of the thumbs for the drawer
4) Add the bulk editting functionality to the drawer

8 files changed, 174 insertions, 74 deletions

diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php
index 89315323..62a23444 100644
--- a/modules/organize/controllers/organize.php
+++ b/modules/organize/controllers/organize.php
@@ -31,7 +31,7 @@ class Organize_Controller extends Controller {
     $v->album_tree = $this->tree($item, $root);
 
     $v->edit_form = new View("organize_edit.html");
-    $v->edit_form->button_pane = new View("organize_button_pane.html");
+    $v->button_pane = new View("organize_button_pane.html");
  
     print $v;
   }
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 0a66d0ad..1e5e90ed 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -3,17 +3,22 @@
  * Dialog wide stylings
  */
 #gOrganizeStatus {
-  height: 6em;
-  border: 1px solid #999;
-  margin-top: .5em;
-  margin-bottom: .5em;
-  overflow-y: auto;
+  height: 1.2em;
+  font-weight: bold;
 }
 
 #gOrganizeProgressDialog {
   text-align: left;
 }
 
+#gDialog .yui-gf div.first {
+  width: 20%;
+} 
+
+#gDialog .yui-gf .yui-u {
+  width: 80%;
+} 
+
 /*******************************************************************
  * Album Tree styling
  */
@@ -59,6 +64,13 @@
 /*******************************************************************
  * Album Panel Styles
  */
+
+#gMicroThumbUnselectAll,
+#gMicroThumbSelectAll {
+  font-size: 1em;
+  font-weight: bold;
+}
+
 #gMicroThumbPanel {
   margin: 0 !important;
   padding: 0 !important;
@@ -67,7 +79,8 @@
   border-top: none !important;
   border-left: none !important;
   margin-left: -1em !important;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 #gMicroThumbGrid {
@@ -76,9 +89,6 @@
 
 .gMicroThumbContainer {
   display: block;
-  //border: 2px solid #e8e8e8;
-  //border-right-color: #ccc;
-  //border-bottom-color: #ccc;
   float: left;
   font-size: .7em;
   height: 9em;
@@ -128,11 +138,65 @@
 			
 
 /****************************************************************
- * Organize Edit styling
+ * Organize Edit Drawer styling
  */
+#gOrganizeEditDrawer {
+  background-color: #13A;
+  float: left;
+  margin: 0 5% 10px;
+  width: 90%;
+}
+
+#gOrganizeEditDrawerPanel {
+  background-color: #CFDEFF;
+  border: 1px solid #13A;
+  display: none;
+  min-height: 150px; 
+}
+
+#gOrganizeEditHandleLeft {
+  background-image: url(organize_edit_drawer.png);
+  background-color: #CFDEFF;
+  float: left;
+  height: 30px;
+  margin: 2px 0 0;
+  width: 15px;
+}
+
+#gOrganizeEditHandleButtonsLeft {
+  float: left;
+  height: 20px;
+  padding: 2px 10px;
+}
+
+#gOrganizeEditHandleButtonsLeft a {
+  float: left;
+  margin: 0 2.5px;
+}
+
+#gOrganizeEditHandleButtonsRight {
+  float: right;
+  height: 20px;
+  padding: 2px 10px;
+}
+
+#gOrganizeEditHandleButtonsRight a {
+  float: left;
+  margin: 0 2.5px;
+}
+
+#gOrganizeEditHandleRight {
+  background-color: #CFDEFF;
+  background-image: url(organize_edit_drawer.png);
+  background-position: -15px 0;
+  float: right;
+  height: 30px;
+  margin: 2px 0 0;
+  width: 15px;
+}
+
 #gOrganizeFormButtons {
   bottom: 0.5em;
-  position: absolute;
 }
 
 #gOrganizeFormButtons .submit {
diff --git a/modules/organize/css/organize_edit_drawer.png b/modules/organize/css/organize_edit_drawer.png
new file mode 100644
index 00000000..34735a00
--- /dev/null
+++ b/modules/organize/css/organize_edit_drawer.png
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index 1eac785b..66ca0b33 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -112,7 +112,7 @@ var treeDroppable =  {
     var moveItems = "";
     var targetItemId = $(this).attr("ref");
     if ($(this).hasClass("gBranchSelected")) {
-      $("#gOrganizeStatus").append(INVALID_DROP_TARGET);
+      $("#gOrganizeStatus").empty().append(INVALID_DROP_TARGET);
       ui.draggable.trigger("stop", event);
       return false;
     }
@@ -122,7 +122,7 @@ var treeDroppable =  {
       okToMove &= targetItemId != $(this).attr("ref");
     });
     if (!okToMove) {
-      $("#gOrganizeStatus").append(INVALID_DROP_TARGET);
+      $("#gOrganizeStatus").empty().append(INVALID_DROP_TARGET);
       ui.draggable.trigger("stop", event);
       return false;
     }
@@ -193,18 +193,33 @@ var onMicroThumbContainerMousemove = function(event) {
   }
 };
 
-// Select All and Deselect All click
-function toggleSelectAll(event) {
-  if ($(this).attr("id") == "gMicroThumbSelectAll") {
-    $(".gMicroThumbContainer").addClass("ui-selected");
-    $("#gMicroThumbSelectAll").hide();
-    $("#gMicroThumbUnselectAll").show();
-  } else {
-    $(".gMicroThumbContainer").removeClass("ui-selected");
-    $("#gMicroThumbSelectAll").show();
-    $("#gMicroThumbUnselectAll").hide();
+// Handle click events on the buttons on the drawer handle
+function drawerHandleButtonsClick(event) {
+  event.preventDefault();
+  if (!$(this).attr("disabled")) {
+    var operation = $(this).attr("ref");
+    switch (operation) {
+    case "edit":
+      $("#gOrganizeEditDrawerPanel").slideToggle("normal");
+      break;
+    case "select-all":
+      $(".gMicroThumbContainer").addClass("ui-selected");
+      $("#gMicroThumbSelectAll").hide();
+      $("#gMicroThumbUnselectAll").show();
+      break;
+    case "unselect-all":
+      $(".gMicroThumbContainer").removeClass("ui-selected");
+      $("#gMicroThumbSelectAll").show();
+      $("#gMicroThumbUnselectAll").hide();
+      break;
+    case "close":
+      $("#gDialog").dialog("close");
+      break;
+    default:
+      console.log(operation);
+    }
   }
-}
+};
 
 // **************************************************************************
 // AJAX Callbacks
@@ -252,7 +267,7 @@ var startMoveCallback = function (data, textStatus) {
       success: function(data, textStatus) {
         task = null;
         transitItems = [];
-        $("#gOrganizeStatus").append("<div class='gSuccess'>" + data.task.status + "</div>");
+        $("#gOrganizeStatus").empty().append("<div class='gSuccess'>" + data.task.status + "</div>");
       },
       dataType: "json",
       type: "POST",
@@ -292,7 +307,7 @@ var startRearrangeCallback = function (data, textStatus) {
     $.ajax({async: false,
       success: function(data, textStatus) {
         task = null;
-        $("#gOrganizeStatus").append("<div class='gSuccess'>" + data.task.status + "</div>");
+        $("#gOrganizeStatus").empty().append("<div class='gSuccess'>" + data.task.status + "</div>");
       },
       dataType: "json",
       type: "POST",
@@ -344,11 +359,9 @@ function organize_dialog_init() {
   retrieveMicroThumbs(item_id);
   //showLoading("#gDialog");
 
-  $("#gMicroThumbSelectAll").click(toggleSelectAll);
-  $("#gMicroThumbUnselectAll").click(toggleSelectAll);
-
   $("#gMicroThumbPanel").droppable(thumbDroppable);
   $("#gMicroThumbGrid").selectable(selectable);
+  $("#gOrganizeEditDrawerHandle a").click(drawerHandleButtonsClick);
 }
 
 function retrieveMicroThumbs() {
@@ -421,13 +434,13 @@ function createProgressDialog(title) {
     $("#gOrganizeTaskPause").hide();
     $("#gOrganizeTaskResume").show();
     $("#gOrganizeTaskCancel").show();
-    $("#gOrganizeStatus").append(task.pauseMsg);
+    $("#gOrganizeStatus").empty().append(task.pauseMsg);
   });
   $("#gOrganizeTaskResume").click(function(event) {
     $("#gOrganizeTaskPause").show();
     $("#gOrganizeTaskResume").hide();
     $("#gOrganizeTaskCancel").hide();
-    $("#gOrganizeStatus").append(task.resumeMsg);
+    $("#gOrganizeStatus").empty().append(task.resumeMsg);
     startRearrangeCallback();
   });
   $("#gOrganizeTaskCancel").click(function(event) {
@@ -440,7 +453,7 @@ function createProgressDialog(title) {
         task = null;
         paused = false;
         transitItems = [];
-        $("#gOrganizeStatus").append("<div class='gWarning'>" + data.task.status + "</div>");
+        $("#gOrganizeStatus").empty().append("<div class='gWarning'>" + data.task.status + "</div>");
         $("#gOrganizeProgressDialog").dialog("destroy").remove();
       },
       dataType: "json",
diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js
index efe21af4..ed036fdb 100644
--- a/modules/organize/js/organize_init.js
+++ b/modules/organize/js/organize_init.js
@@ -9,7 +9,7 @@ $("document").ready(function() {
       autoOpen: false,
       autoResize: false,
       modal: true,
-      resizable: true,
+      resizable: false,
       close: function () {
         $("#gDialog").trigger("organize_close");
         $("#gDialog").dialog("destroy").remove();
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index 493ad81a..c423f5a1 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -23,28 +23,50 @@
 <fieldset style="display: none">
   <legend><?= t("Organize %name", array("name" => $item->title)) ?></legend>
 </fieldset>
-<div id="doc3" class="yui-t1">
-  <div id="bd" role="main">
-    <div id="yui-main">
-      <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="gMicroThumbPanel" 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 id="doc3" class="yui-t7">
+  <div id="bd">
+    <div class="yui-gf">
+      <div class="yui-u first">
+        <h3><?= t("Albums") ?></h3>
+      </div>
+      <div id="gOrganizeStatus" class="yui-u">
+    <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 id="gOrganizeTreeContainer" class="yui-b">
-      <h3><?= t("Albums") ?></h3>
-      <?= $album_tree ?>
+    <div class="yui-gf">
+      <div id="gOrganizeTreeContainer" class="yui-u first">
+        <?= $album_tree ?>
+      </div>
+      <div id="gMicroThumbPanel" class="yui-u"
+           ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
+        <div id="gOrganizeEditDrawer">
+          <div id="gOrganizeEditDrawerPanel" class="yui-gf" style="display: none">
+            <div id="gOrganizeFormThumbs" class="yui-u first">
+              <div id="gOrganizeFormNoImage">
+                <h3><?= t("No Image Selected") ?></h3>
+              </div>
+              <div id="gOrganizeFormThumb" style="display: none"></div>
+              <div id="gOrganizeFormMultipleImages" style="display:none">
+                <h3><?= t("Multiple Images Selected") ?></h3>
+              </div>
+            </div>
+            <?= $edit_form ?>
+          </div>
+          <div id="gOrganizeEditDrawerHandle">
+            <div id="gOrganizeEditHandleLeft"></div>
+            <div id="gOrganizeEditHandleButtonsLeft">
+              <?= $button_pane ?>
+            </div>
+            <div id="gOrganizeEditHandleRight"></div>            
+            <div id="gOrganizeEditHandleButtonsRight">
+              <a id="gMicroThumbSelectAll" href="#" ref="select-all" class="gButtonLink ui-corner-all ui-state-default"><?= t("Select all") ?></a>
+              <a id="gMicroThumbUnselectAll" href="#" ref="unselect-all" style="display: none" class="gButtonLink ui-corner-all ui-state-default"><?= t("Deselect all") ?></a>
+              <a id="gMicroThumbDone" href="#" ref="close" class="gButtonLink ui-corner-all ui-state-default"><?= t("Done") ?></a>
+            </div>
+          </div>
+        </div>
+        <ul id="gMicroThumbGrid"></ul>
+      </div>
     </div>
   </div>
-  <div id="ft">
-    <div id="gOrganizeStatus"></div>
-  </div>
 </div>
diff --git a/modules/organize/views/organize_button_pane.html.php b/modules/organize/views/organize_button_pane.html.php
index 82b7607d..a39c643c 100644
--- a/modules/organize/views/organize_button_pane.html.php
+++ b/modules/organize/views/organize_button_pane.html.php
@@ -1,23 +1,38 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 
+
+<a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="edit"
+  disabled="1" title="<?= t("Edit Selection") ?>">
+  <span class="ui-icon ui-icon-pencil">
+    <?= t("Edit Selection") ?>
+  </span>
+</a>
+
 <? if (graphics::can("rotate")): ?>
 <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="rotate_ccw"
-  title="<?= t("Rotate 90 degrees counter clockwise") ?>">
+  disabled="1" title="<?= t("Rotate 90 degrees counter clockwise") ?>">
   <span class="ui-icon ui-icon-rotate-ccw">
     <?= t("Rotate 90 degrees counter clockwise") ?>
   </span>
 </a>
 
 <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="rotate_cw"
-  title="<?= t("Rotate 90 degrees clockwise") ?>">
+  disabled="1" title="<?= t("Rotate 90 degrees clockwise") ?>">
   <span class="ui-icon ui-icon-rotate-cw">
     <?= t("Rotate 90 degrees clockwise") ?>
   </span>
 </a>
 <? endif ?>
 
+<a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="album_cover"
+   disabled="1" title="<?= t("Choose this photo as the album cover") ?>">
+  <span class="ui-icon ui-icon-star">
+    <?= t("Choose this photo as the album cover") ?>
+  </span>
+</a>
+
 <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="delete"
-     title="<?= t("Delete selection") ?>">
+   disabled="1" title="<?= t("Delete selection") ?>">
   <span class="ui-icon ui-icon-trash">
     <?= t("Delete selection") ?>
   </span>
diff --git a/modules/organize/views/organize_edit.html.php b/modules/organize/views/organize_edit.html.php
index 1085a863..f3b6eb87 100644
--- a/modules/organize/views/organize_edit.html.php
+++ b/modules/organize/views/organize_edit.html.php
@@ -1,21 +1,8 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="gOrganizeForm">
+<div id="gOrganizeForm" class="yui-u">
   <?= form::open(url::site("organize/update/__ITEM_ID__?csrf=__CSRF__&action=__ACTION__"), array("method" => "post")) ?>
-  <div id="gOrganizeFormThumbs">
-    <div id="gOrganizeFormNoImage">
-      <h3><?= t("No Image Selected") ?></h3>
-    </div>
-    <div id="gOrganizeFormThumb" style="display: none"></div>
-    <div id="gOrganizeFormMultipleImages" style="display:none">
-      <h3><?= t("Multiple Images Selected") ?></h3>
-    </div>
-  </div>
-
-  <div id="gOrganizeButtonPane" style="display: none">
-    <?= $button_pane ?>
-  </div>
   
-  <div id="gOrganizeFormInfo" style="display:none"
+  <!-- div id="gOrganizeFormInfo" style="display:none"
        ref="<?= url::site("organize/detail/__ITEM_ID__") ?>">
     <ul>
         <li>
@@ -31,10 +18,9 @@
           Description: <span id="gOrganizeFormDescription">&nbsp;</span>
         </li>
     </ul>
-  </div>
+  </div -->
   
   <span id="gOrganizeFormButtons">
-    <?= form::submit(array("id" => "gOrganizePauseButton", "name" => "pause", "disabled" => true, "class" => "submit", "style" => "display:none"), t("Pause")) ?>
     <?= form::submit(array("id" => "gOrganizeApplyButton", "name" => "apply", "disabled" => true, "class" => "submit"), t("Apply")) ?>
   </span>
   <?= form::close() ?>