totally get sorting to work

addons/Core/Core.inc

@@ -199,7 +199,7 @@ class ComicPressAddonCore extends ComicPressAddon {
     
     if (strpos($pagenow, "post") === 0) {
       add_meta_box("comic-image-ordering", __("Comic Image Ordering", 'comicpress'), array(&$this, 'render_comic_image_ordering'), "post", "normal", "low");
-      wp_enqueue_script('cp-ordering', get_stylesheet_directory_uri() . '/js/ComicImageOrdering.js', array('scriptaculous-slider'));
+      wp_enqueue_script('cp-ordering', get_stylesheet_directory_uri() . '/js/ComicImageOrdering.js', array('scriptaculous', 'scriptaculous-slider'));
       wp_enqueue_style('cp-admin', get_stylesheet_directory_uri() . '/css/cp-admin.css');
       add_action('admin_footer', array(&$this, 'admin_footer'));
     }
@@ -347,9 +347,13 @@ class ComicPressAddonCore extends ComicPressAddon {
   /**
    * Render the comic image ordering interface.
    */
-  function render_comic_image_ordering() {
-    if (isset($_REQUEST['post'])) {
-      $comic_post = new ComicPressComicPost(get_post($_REQUEST['post']));
+  function render_comic_image_ordering($is_ajax = false, $override_post = null) {
+    global $post_ID, $temp_ID;
+
+    $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);
+    if (is_numeric($override_post)) { $uploading_iframe_ID = $override_post; }
+    
+    $comic_post = new ComicPressComicPost(get_post($uploading_iframe_ID));
     $ordering = $comic_post->normalize_comic_image_ordering();
 
     if (is_array($ordering)) {
@@ -365,6 +369,13 @@ class ComicPressAddonCore extends ComicPressAddon {
         }
       }
 
+      // from wp-admin/includes/media.php O_o
+      $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";
+      $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&type=image&TB_iframe=true");
+
+      if ($is_ajax === true) {
+        include(dirname(__FILE__) . '/partials/_comic-image-ordering-sorters.inc');
+      } else {
         include(dirname(__FILE__) . '/partials/_comic-image-ordering.inc');
       }
     }
@@ -437,6 +448,14 @@ class ComicPressAddonCore extends ComicPressAddon {
     return implode("\n", $output);
   }
 
+  /**
+   * Update attachment information.
+   */
+  function handle_update_refresh_ordering($info) {
+    $this->render_comic_image_ordering(true, $info['post_id']);
+    exit(0);
+  }
+
   /**
    * Update attachment information.
    */
@@ -519,15 +538,21 @@ class ComicPressAddonCore extends ComicPressAddon {
     }
   }
 
+  function _json_decode($string) {
+    if (function_exists('json_decode')) {
+      return json_decode($string);
+    } else {
+      require_once(ABSPATH."/wp-includes/js/tinymce/plugins/spellchecker/classes/utils/JSON.php");
+      $j = new Moxiecode_JSON();
+      return $j->decode($string);
+    } 
+  }
+  
   function handle_update_comic_ordering() {
     if (is_numeric($_POST['post_ID'])) {
       if ($post = get_post($_POST['post_ID'])) {
         $comic_post = new ComicPressComicPost(&$post);
-        $comic_post->change_comic_image_ordering($_POST['cp']['ordering']);
-        
-        if (isset($this->comicpress->comicpress_options['helpers']['show_inline_comic_ordering']) && !is_admin()) {
-          $this->info(sprintf(__("Comic ordering for post #%s updated", 'comicpress'), $_POST['post_ID']));
-        }
+        $comic_post->change_comic_image_ordering($this->_json_decode(stripslashes($_POST['cp']['comic_order'])));
       }
     }
   }

addons/Core/partials/_comic-image-ordering-sorters.inc

@@ -0,0 +1,91 @@
+<p><em>
+  <?php _e('Drag and drop the comic files below to change the order in which they\'ll appear in within each category.', 'comicpress') ?>
+  <?php
+    printf(
+      __('To upload new images, use the %s.', 'comicpress'),
+      '<a href="' . $image_upload_iframe_src . '" class="thickbox" onclick="return false;">' . __('Image Uploader', 'comicpress') . '</a>'
+    )
+  ?>
+  <?php _e('Click the Refesh button underneath the zoom slider if you\'ve changed the images attached to this post.', 'comicpress') ?>
+
+</em></p>
+<?php foreach ($ordering as $type => $attachment_ids) { ?>
+  <h3><?php echo $this->comic_image_types[$type] ?></h3>
+  <div class="comic-ordering" id="comic-ordering-<?php echo $type ?>">
+    <?php foreach ($attachment_ids as $attachment_id) {
+      $backend = new ComicPressBackendAttachment($attachment_id);
+      $info = $backend->get_info(); ?>
+      <div class="cp-comic-attachment" id="attachment_<?php echo $attachment_id ?>">
+        <img src="<?php echo $backend->get_url() ?>" border="0" height="<?php echo $zoom_level ?>" />
+        <div>
+          <?php if (isset($info['file'])) { ?>
+            <p><strong><?php echo basename($info['file']) ?></strong></p>
+          <?php } ?>
+          <?php if (isset($info['width']) && isset($info['height'])) { ?>
+            <p>
+              <?php _e('Size:', 'comicpress') ?>
+              <?php printf('%dx%d', $info['width'], $info['height'] ) ?>
+            </p>
+          <?php } ?>
+        </div>
+        <br style="clear: both" />
+      </div>
+    <?php } ?>
+  </div>
+<?php } ?>
+
+<script type="text/javascript">
+  (function() {
+    new Control.Slider('ordering-zoom-handle', 'ordering-zoom-slider', {
+      axis: 'vertical',
+      range: $R(40, 150),
+      sliderValue: <?php echo 190 - $zoom_level ?>,
+      onChange: function(v) {
+        v = 190 - v;
+        new Ajax.Request(ComicPressAdmin.ajax_uri, {
+          method: 'post',
+          parameters: {
+            'cp[_nonce]': ComicPressAdmin.nonce,
+            'cp[action]': 'zoom-slider',
+            'cp[zoom_level]': v
+          }
+        });
+      },
+      onSlide: function(v) {
+        v = 190 - v;
+        v = Math.floor(v);
+        $$('#comic-ordering-holder img').each(function(i) { i.setAttribute('height', v); });
+      }
+    });
+
+    var get_ordering = function() {
+      var ordering = {};
+      $$('.comic-ordering').each(function(co) {
+        var matches = co.id.match(/-([^-]+)$/);
+        if (matches) {
+          var type = matches[1];
+          ordering[type] = [];
+          co.select('.cp-comic-attachment').each(function(att) {
+            var matches = att.id.match(/_([0-9]+)$/);
+            if (matches) {
+              ordering[type].push(matches[1]);
+            }
+          });
+        }
+      });
+      $('cp-comic-order').value = Object.toJSON(ordering);
+    };
+
+    $$('.comic-ordering').each(function(ord) {
+      if (ord.select('.cp-comic-attachment').length > 1) {
+        Sortable.create(ord.id, {
+          tag: 'div',
+          handle: 'div',
+          onUpdate: get_ordering
+        });
+      }
+    });
+
+    get_ordering();
+  }());
+</script>

addons/Core/partials/_comic-image-ordering.inc

@@ -1,43 +1,35 @@
+<div style="overflow: hidden">
   <input type="hidden" name="cp[_nonce]" value="<?php echo $nonce ?>" />
+  <input type="hidden" name="cp[action]" value="comic-ordering" />
   <div id="ordering-zoom-slider-holder">
     <div id="ordering-zoom-slider">
       <div id="ordering-zoom-handle"></div>
     </div>
+    <a href="#" id="ordering-refresh"></a>
   </div>
 
+  <input type="hidden" name="cp[comic_order]" id="cp-comic-order" />
   <div id="comic-ordering-holder">
-  <?php foreach ($ordering as $type => $attachment_ids) { ?>
-    <h3><?php echo $this->comic_image_types[$type] ?></h3>
-    <div id="comic-ordering-<?php echo $type ?>">
-      <?php foreach ($attachment_ids as $attachment_id) { ?>
-        <div class="cp-comic-attachment" id="attachment_<?php echo $attachment_id ?>">
-          <img src="<?php echo wp_get_attachment_url($attachment_id) ?>" border="0" height="<?php echo $zoom_level ?>" />
-        </div>
-      <?php } ?>
-    </div>
-  <?php } ?>
+    <?php include('_comic-image-ordering-sorters.inc') ?>
   </div>
 
   <script type="text/javascript">
     (function() {
-    new Control.Slider('ordering-zoom-handle', 'ordering-zoom-slider', {
-      axis: 'vertical',
-      range: $R(40, 150),
-      sliderValue: <?php echo $zoom_level ?>,
-      onChange: function(v) {
-        new Ajax.Request(ComicPressAdmin.ajax_uri, {
+      $('ordering-refresh').observe('click', function(e) {
+        Event.stop(e);
+        new Ajax.Updater('comic-ordering-holder', ComicPressAdmin.ajax_uri, {
           method: 'post',
           parameters: {
             'cp[_nonce]': ComicPressAdmin.nonce,
-            'cp[action]': 'zoom-slider',
-            'cp[zoom_level]': v
-          }
-        });
+            'cp[action]': 'refresh-ordering',
+            'cp[post_id]': <?php echo $uploading_iframe_ID ?>
           },
-      onSlide: function(v) {
-        v = Math.floor(v);
-        $$('#comic-ordering-holder img').each(function(i) { i.setAttribute('height', v); });
+          evalScripts: true,
+          onSuccess: function() {
+            new Effect.Highlight($('comic-ordering-holder'));
           }
         });
-  }());
+      });
+    }())
   </script>
+</div>

classes/ComicPressComicPost.inc

@@ -172,14 +172,18 @@ class ComicPressComicPost {
     
     $new_order = array();
 
+    $requested_new_order = (array)$requested_new_order;
+
     foreach ($orderings as $type => $current_order) {
       $new_order[$type] = array();
       $sort_by_position = array();
-      foreach ($requested_new_order[$type] as $id => $position) {
+      $position = 0;
+      foreach ($requested_new_order[$type] as $id) {
         if (!isset($sort_by_position[$position])) {
           $sort_by_position[$position] = array(); 
         }
         $sort_by_position[$position][] = $id;
+        $position++;
       }
       ksort($sort_by_position);
       $requested_order = array();

classes/backends/ComicPressBackendAttachment.inc

@@ -0,0 +1,17 @@
+<?php
+
+class ComicPressBackendAttachment {
+  function ComicPressBackendAttachment($attachment_id) {
+    $this->attachment_id = $attachment_id;
+  }
+
+  function get_url() {
+    return wp_get_attachment_url($this->attachment_id);
+  }
+
+  function get_info() {
+    return wp_get_attachment_metadata($this->attachment_id);
+  }
+}
+
+?>

css/cp-admin.css

@@ -9,6 +9,10 @@
 
 #ordering-zoom-slider-holder {
   width: 30px;
+  float: left;
+  display: inline;
+  padding-top: 25px;
+  background: url(../images/system-search.png) top center no-repeat;
 }
 
 #ordering-zoom-slider {
@@ -29,3 +33,36 @@
   cursor: move;
   margin-left: -6px
 }
+
+#comic-ordering-holder {
+  margin-left: 35px;
+}
+
+#comic-ordering-holder img {
+  float: left;
+  display: inline;
+  margin-right: 5px;
+}
+
+.comic-attachment {
+  overflow: hidden
+}
+
+.comic-ordering {
+  overflow: hidden;
+  border: solid #ccc 1px;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.cp-comic-attachment {
+  cursor: move
+}
+
+#ordering-refresh {
+  background: url(../images/view-refresh.png) top left no-repeat;
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin: 8px 0 0 8px;
+}

functions.php

@@ -10,9 +10,16 @@ function __comicpress_init() {
     wp_cache_flush();
   }
 
-  foreach (glob(dirname(__FILE__) . '/classes/*.inc') as $file) {
+  $classes_search = array(
+    '/classes/',
+    '/classes/backends/'
+  );
+
+  foreach ($classes_search as $path) {
+    foreach (glob(dirname(__FILE__) . $path . '*.inc') as $file) {
       if (is_file($file)) { require_once($file); }
     }
+  }
 
   $comicpress = ComicPress::get_instance();
   $comicpress->init();

test/ComicPressComicPostTest.php

@@ -128,21 +128,21 @@ class ComicPressComicPostTest extends PHPUnit_Framework_TestCase {
       array(
         array('comic' => array(1,2,3)),
         array(
-          'comic' => array('1' => 3, '2' => 1, '3' => 2)
+          'comic' => array(2,3,1)
         ),
         array('comic' => array(2,3,1))
       ),
       array(
         array('comic' => array(1,2,3)),
         array(
-          'comic' => array('1' => 2, '2' => 2, '3' => 1)
+          'comic' => array(3,1,2)
         ),
         array('comic' => array(3,1,2))
       ),
       array(
         array('comic' => array(1,2,3)),
         array(
-          'comic' => array('1' => 1, '2' => 2)
+          'comic' => array(1,2)
         ),
         array('comic' => array(1,2,3))
       ),
@@ -151,6 +151,7 @@ class ComicPressComicPostTest extends PHPUnit_Framework_TestCase {
   
   /**
    * @dataProvider providerTestChangeComicImageOrdering
+   * @covers ComicPressComicPost::change_comic_image_ordering
    */
   function testChangeComicImageOrdering($current_ordering, $revised_ordering, $expected_result) {
     update_post_meta(1, 'comic_ordering', $current_ordering);