Added support for other file types than images.

* Use mime/types library for MIME type management.
 * Use CodeRay for syntax highlighting code/text files.
 * Added code to observe the drags; fixed committing position changes to the app.
 * Commenced work on the Z-index problem.

plemp.rb

@@ -1,6 +1,8 @@
 require "camping"
+require "coderay"
 require "fileutils"
 require "markaby"
+require "mime/types"
 require "pathname"
 
 Camping.goes :Plemp
@@ -14,7 +16,6 @@ unless defined? BASE_DIR
   Positions = Hash.new
 end
 
-
 module Plemp::Controllers
 
   class Index
@@ -24,28 +25,24 @@ module Plemp::Controllers
   end
 
  class StaticXX
-    MIME_TYPES = {'.css'  => 'text/css',
-                  '.js'   => 'text/javascript', 
-                  '.jpeg' => 'image/jpeg',
-                  '.jpg'  => 'image/jpeg',
-                  '.png'  => 'image/png'}
-
     def get(type, path)
-      @headers['Content-Type'] = MIME_TYPES[path[/\.\w+$/, 0]] || "text/plain"
+      mime_type = MIME::Types.type_for(path).first 
+      @headers['Content-Type'] = mime_type.nil? ? "text/plain" : mime_type.to_s
       unless path.include? ".." or not ["public", "upload"].include? type
         @headers['X-Sendfile'] = (BASE_DIR + type + path).to_s
       else
         @status = "403"
-        "403 - Invalid path"
+        "Error 403: Invalid path: #{path}"
       end
     end
   end 
 
   class SaveposXXX
     def post(id, top, left)
-      $stderr.puts("Got: id: #{id} -> top: #{top}, left: #{left}")
+      [top, left].each { |pos| pos.gsub!(/px$/, '') }
+      $stderr.puts("Got: id: #{id} -> top: #{top}, left: #{left}") if $DEBUG
       Positions[id] = [top, left]
-      $stderr.puts Positions.inspect
+      $stderr.puts Positions.inspect if $DEBUG
       ""
     end
   end
@@ -83,6 +80,7 @@ module Plemp::Views
   end
 
   def main
+    h1 "Plemp!"
     form :action => R(Upload), :method => "post",
          :enctype => "multipart/form-data" do
       p do 
@@ -90,24 +88,42 @@ module Plemp::Views
         input :type => "submit", :value => "Upload!"
       end
     end
-    UPLOAD_DIR.entries.select { |f| (UPLOAD_DIR + f).file? }.each do |f|
-      next if f.to_s =~ /^\./
-      file = UPLOAD_DIR + f
-      id = file.basename.to_s
-      if Positions.has_key? id
-        top, left = Positions[id]
-      else
-        top, left = ["#{rand(300)}", "#{rand(700)}"]
-        Positions[id] = [top, left]
-      end
-      img.draggable :id => id,
-                    :src => R(StaticXX, "upload", file.basename),
-                    :alt => file.basename
-      script :type => "text/javascript" do
-        "new Draggable('#{id}', { scroll: window });\n" +
-        "new Effect.Move('#{id}', { x: #{left}, y: #{top}, mode: 'absolute' });"
+    div.draggables! do
+      UPLOAD_DIR.entries.select { |f| (UPLOAD_DIR + f).file? }.each do |f|
+        next if f.to_s =~ /^\./
+        file = UPLOAD_DIR + f
+        id = file.basename.to_s
+        if Positions.has_key? id
+          top, left = Positions[id]
+        else
+          top, left = ["#{rand(300)}", " #{80 + rand(700)}"]
+          Positions[id] = [top, left]
+        end
+        file_type = `file --brief --mime-type #{file}`.chomp
+        mime_type = MIME::Types[file_type].first
+        if mime_type.nil?
+          mime_type = MIME::Type.new(file_type)
+        end
+        default_style = "left:#{left}px;top:#{top}px;z-index:0;display:none"
+        case mime_type.media_type
+          when "image"
+            img.draggable :id => id, :style => default_style, 
+                          :src => R(StaticXX, "upload", file.basename),
+                          :alt => file.basename
+          when "text"
+            div.draggable(:id => id, :style => default_style) { CodeRay.scan_file(file).div }
+          else
+            span.draggable(:id => id, :style => default_style) { em "#{id}: Unsupported file type!" }
+        end
+        script :type => "text/javascript" do
+          <<-JS
+new Draggable('#{id}', { scroll: window });
+Draggables.addObserver(new DragRegObserver($('#{id}')));
+$('#{id}').appear({duration: 2.0});
+JS
+        end
       end
     end
+    span(:onClick => "alert(maxZIndex()); return false;" ) { "test" }
   end
-
 end

public/dragreg.js

@@ -1,7 +1,18 @@
-var drgs = new Draggables;
-
-function dragreg(div, event) {
-  id = div.element.id;
-  new Ajax.Request('http://localhost:3301/savepos/' + id +
-                   '/' + this.style.top + '/' + this.style.left);
+var DragRegObserver = Class.create();
+DragRegObserver.prototype = {
+  initialize: function(element) {
+    this.element = $(element);
+  },
+  onStart: function() {},
+  onEnd: function (eventName, draggable, event) {
+    if (Draggables.activeDraggable.element == this.element) {
+      elem = draggable.element;
+      new Ajax.Request('http://localhost:3301/savepos/' + elem.id +
+                       '/' + elem.style.top + '/' + elem.style.left);
+    }
+  }
+}
+
+function maxZIndex() {
+  return $$('.draggable').map(function(d) { return d.getStyle("z-index") }).max();
 }

public/plemp.css

@@ -3,7 +3,9 @@
 .draggable {
   position: absolute;
   padding: 15px;
-  width: 300px;
+  width: 400px;
+  max-height: 300px;
+  overflow: auto;
   top: 0px;
   left: 0px;
   border: thin solid black;