Added javascript goodness to add and sort and drag and drop images on pages

2 files changed, 63 insertions, 1 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index ce971a4..977e42a 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -4,6 +4,7 @@ $(document).ready(function () {
   meta_data.initialize();
   menu_item_sorter.initialize();
   
+  
   jQuery.ajaxSetup({ 
     'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
   })
@@ -27,6 +28,7 @@ meta_data = {
 
       if ($("#button").attr("class") == "unselected") {
         $("#button").attr("class", "selected");
+        image_interface.initialize(); 
       }
       else {
         $("#button").attr("class", "unselected");
@@ -110,5 +112,39 @@ menu_item_sorter = {
     $(".ui-state-highlight").html("<td colspan='100%'></td>");
   }
 }
+
+image_interface = {
+  initialize : function() {
+    $("ul#image_box").sortable({
+      revert  : true,
+      stop    : function(event, ui) {
+        $.ajax({
+          type : "POST",
+          url  : "/pages/" + $("ul#image_box").attr("rel") + "/sort_images",
+          dataType : "json",
+          data : $("ul#image_box").sortable("serialize", {attribute : "rel"}) + "&_method=put",
+          success : function() {}
+        });
+      }
+    });
+    
+    $("ul#image_box").droppable({
+      out : function(event, ui) {
+        $(ui.draggable).bind("mouseup", function() {$(this).remove()})
+      }
+    });
+    
+    $("div#asset_toolbox ul li").draggable({
+      connectToSortable : 'ul#image_box',
+      helper : 'clone',
+      revert : 'invalid',
+      stop   : function() {
+        
+      }
+    });
+    
+    $("ul, li").disableSelection();
+  }
+}
       
 
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index a2da502..d414b94 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -355,4 +355,30 @@ table#content th.content {
 
 .ui-state-highlight td{
   height: 20px;
-}
\ No newline at end of file
+}
+
+#metadata ul#image_box {
+  margin: 0;
+  padding-left: 0;
+  height: 100px;
+  width: 690px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border: 1px solid #989898;
+}
+
+#metadata ul#image_box li {
+  float: left;
+  list-style-type: none;
+  margin: 5px;
+}
+
+div#asset_toolbox {
+  position: absolute;
+  top: 40px;
+  left: 800px;
+}
+
+div#asset_toolbox ul li {
+  list-style-type: none;
+}