diff --git a/tracks/app/controllers/context_controller.rb b/tracks/app/controllers/context_controller.rb
index 7e1abd2d..8956919e 100644
--- a/tracks/app/controllers/context_controller.rb
+++ b/tracks/app/controllers/context_controller.rb
@@ -72,36 +72,15 @@ class ContextController < ApplicationController
     end
   end
 
-  # Methods for changing the sort order of the contexts in the list
+  # Methods for changing the sort order of the projects in the list
   #
-  def move_up
-    check_user_set_context
-    @context.move_higher
-    @context.save
-    redirect_to(:controller => "context", :action => "list")
+  def order
+    @params["list-contexts"].each_with_index do |id, position|
+      Context.update(id, :position => position + 1)
+    end
+    render_text ""
   end
-
-  def move_down
-    check_user_set_context
-    @context.move_lower
-    @context.save
-    redirect_to(:controller => "context", :action => "list")
-  end
-
-  def move_top
-    check_user_set_context
-    @context.move_to_top
-    @context.save
-    redirect_to(:controller => "context", :action => "list")
-  end
-
-  def move_bottom
-    check_user_set_context
-    @context.move_to_bottom
-    @context.save
-    redirect_to(:controller => "context", :action => "list" )
-  end
-
+  
   protected
 
     def check_user_set_context
diff --git a/tracks/app/controllers/project_controller.rb b/tracks/app/controllers/project_controller.rb
index c04d2c97..8e5f9174 100644
--- a/tracks/app/controllers/project_controller.rb
+++ b/tracks/app/controllers/project_controller.rb
@@ -71,34 +71,13 @@ class ProjectController < ApplicationController
 
   # Methods for changing the sort order of the projects in the list
   #
-  def move_up
-    check_user_set_project
-    @project.move_higher
-    @project.save
-    redirect_to(:controller => "project", :action => "list")
+  def order
+    @params["list-projects"].each_with_index do |id, position|
+      Project.update(id, :position => position + 1)
+    end
+    render_text ""
   end
-
-  def move_down
-    check_user_set_project
-    @project.move_lower
-    @project.save
-    redirect_to(:controller => "project", :action => "list")
-  end
-
-  def move_top
-    check_user_set_project
-    @project.move_to_top
-    @project.save
-    redirect_to(:controller => "project", :action => "list")
-  end
-
-  def move_bottom
-    check_user_set_project
-    @project.move_to_bottom
-    @project.save
-    redirect_to(:controller => "project", :action => "list" )
-  end
-
+  
   protected
 
     def check_user_set_project
@@ -118,8 +97,7 @@ class ProjectController < ApplicationController
         render_text ""
       end
     end
-
-
+    
     def init
       @user = @session['user']
       @projects = @user.projects
diff --git a/tracks/app/helpers/application_helper.rb b/tracks/app/helpers/application_helper.rb
index 2f27d0ff..018eb0b1 100644
--- a/tracks/app/helpers/application_helper.rb
+++ b/tracks/app/helpers/application_helper.rb
@@ -51,7 +51,7 @@ module ApplicationHelper
       when 0
            "<a title='" + format_date(due) + "'><span class=\"amber\">Due Today</span></a> "
       when 1
-           "<a title='" + format_date(due) + "'><span class=\"amber\">Due Tommorrow</span></a> "
+           "<a title='" + format_date(due) + "'><span class=\"amber\">Due Tomorrow</span></a> "
       # due 2-7 days away
       when 2..7
            "<a title='" + format_date(due) + "'><span class=\"orange\">Due in " + @days.to_s + " days</span></a> "
diff --git a/tracks/app/helpers/todo_helper.rb b/tracks/app/helpers/todo_helper.rb
index c96e3466..0b4096b8 100644
--- a/tracks/app/helpers/todo_helper.rb
+++ b/tracks/app/helpers/todo_helper.rb
@@ -12,7 +12,7 @@ module TodoHelper
                       :update => "completed",
                       :position => "top",
                       :loading => "Form.disable('checkbox-notdone-#{item.id}');",
-                      :complete => "new Effect2.Fade('item-#{item.id}-container', true);"
+                      :complete => visual_effect(:fade, "item-#{item.id}-container")
                    )
   end
 
@@ -22,7 +22,7 @@ module TodoHelper
                      :update => "new_actions",
                      :position => "bottom",
                      :loading => "Form.disable('checkbox-done-#{item.id}');",
-                     :complete => "Element.toggle('new_actions');new Effect2.Fade('done-item-#{item.id}-container', true);"
+                     :complete => "Element.toggle('new_actions');new Effect.Fade('done-item-#{item.id}-container');"
                    )
   end
 
@@ -30,7 +30,7 @@ module TodoHelper
     form_remote_tag( :url => { :controller => 'todo', :action => 'update_action', :id => item.id },
                     :html => { :id => "form-action-#{item.id}", :class => "inline-form" },
                     :update => "item-#{item.id}-container",
-                    :complete => "new Effect.Appear('item-#{item.id}-container');"
+                    :complete => visual_effect(:appear, "item-#{item.id}-container")
                    )
   end
 
@@ -40,7 +40,7 @@ module TodoHelper
     str << " Form.focusFirstElement('form-action-#{item.id}')"
     link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
                     :update => "item-#{item.id}-container",
-                    :loading => "new Effect2.Fade('item-#{item.id}-container', true)",
+                    :loading => visual_effect(:fade, "item-#{item.id}-container"),
                     :url => { :controller => "todo", :action => "destroy_action", :id => item.id },
                     :confirm => "Are you sure that you want to delete the action, \'#{item.description}\'?") + " " +
                     link_to_function(image_tag( "blank", :title => "Edit action", :class => "edit_item"),
@@ -50,7 +50,7 @@ module TodoHelper
   def link_to_remote_todo_done( item )
     link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
                     :update => "done-item-#{item.id}-container",
-                    :loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
+                    :loading => visual_effect(:fade, "done-item-#{item.id}-container"),
                     :url => { :controller => "todo", :action => "destroy_action", :id => item.id },
                     :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) +
                     "<a>" + image_tag("blank") + "</a> "
diff --git a/tracks/app/views/context/_context_listing.rhtml b/tracks/app/views/context/_context_listing.rhtml
index 82863e6c..2ddcbeab 100644
--- a/tracks/app/views/context/_context_listing.rhtml
+++ b/tracks/app/views/context/_context_listing.rhtml
@@ -1,21 +1,10 @@
 <%  context = context_listing %>
-<div id="context-<%= context.id %>-container">
+<div id="container_<%= context.id %>">
 <!-- %= error_messages_for 'context' % -->
-<div id="context-<%= context.id %>-display">
-<% if context.position % 2 == 0 %>
+<div id="context-<%= context.id %>-display" class="list">
 <div id="context-<%= context.id %>" class="even_row" style="display:'';">
-<% else %>
-<div id="context-<%= context.id %>" class="odd_row" style="display:'';">
-<% end %>
 <div class="position">
-  <%= link_to(image_tag("blank", :title=>"Move to top", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_top", :id => context.id}, :title => "Move to top", :class=>"to_top") %>
-  <%= link_to(image_tag("blank", :title=>"Move up", :border=>"0", :width=>"16", :height=>"16"), 
-              {:action => "move_up", :id => context.id}, :title => "Move up", :class=>"up" ) %>
-  <%= link_to(image_tag("blank", :title=>"Move down", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_down", :id => context.id}, :title => "Move down", :class=>"down") %>
-  <%= link_to(image_tag("blank", :title=>"Move to bottom", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_bottom", :id => context.id}, :title => "Move to bottom", :class=>"to_bottom") %>
+  <span class="handle">DRAG</span>
 </div>  
 <div class="data">
   <%= link_to( sanitize("#{context.name}"), :action => "show", :name => urlize(context.name) ) %>
@@ -30,9 +19,10 @@
 <% end %>
 
 <%= link_to_remote( image_tag("blank", :title =>"Delete context", :class=>"delete_item"), 
-                  :update => "context-#{context.id}-container",
-                  :loading => "new Effect2.Fade('context-#{context.id}-container', true)",
-                  :url => { :controller => "context", :action => "destroy", :id => context.id }, :confirm => "Are you sure that you want to delete the context \'#{context.name}\'?" ) + " " +
+                  :update => "container_#{context.id}",
+                  :loading => visual_effect(:fade, 'container_#{context.id}'),
+                  :url => { :controller => "context", :action => "destroy", :id => context.id },
+                  :confirm => "Are you sure that you want to delete the context \'#{context.name}\'?" ) + " " +
     link_to_function( image_tag( "blank", :title => "Edit context", :class=>"edit_item"), "Element.toggle('context-#{context.id}','context-#{context.id}-edit-form'); new Effect.Appear('context-#{context.id}-edit-form'); Form.focus_first('form-context-#{context.id}');" ) %>
 </div>
 </div><!-- [end:context-context.id] -->
@@ -41,8 +31,8 @@
 <div id="context-<%= context.id %>-edit-form" class="edit-form" style="display:none;">
 <%= form_remote_tag  :url => { :controller => 'context', :action => 'update', :id => context.id },
                :html => { :id => "form-context-#{context.id}", :class => "inline-form" },
-               :update => "context-#{context.id}-container",
-               :complete => "new Effect.Appear('context-#{context.id}-container');" %>
+               :update => "container_#{context.id}",
+               :complete => visual_effect(:appear, 'container_#{context.id}') %>
   <%= render_partial 'context_form', context %>
   <div class="buttons">  
   <input type="submit" value="Update" />
diff --git a/tracks/app/views/context/_show_items.rhtml b/tracks/app/views/context/_show_items.rhtml
index 306a5959..0ae0e2ed 100644
--- a/tracks/app/views/context/_show_items.rhtml
+++ b/tracks/app/views/context/_show_items.rhtml
@@ -6,7 +6,7 @@
                      :update => "completed",
                      :position => "top",
                      :loading => "Form.disable('checkbox-notdone-#{item.id}');",
-                     :complete => "new Effect2.Fade('item-#{item.id}-container', true);"
+                     :complete => "new Effect.Fade('item-#{item.id}-container', true);"
                      ) %>
 
 <div id="item-<%= item.id %>">
@@ -14,7 +14,7 @@
   <%=
   link_to_remote( image_tag("blank", :title =>"Delete this action", :class=>"delete_item"), 
                     :update => "item-#{item.id}-container",
-                    :loading => "new Effect2.Fade('item-#{item.id}-container', true)",
+                    :loading => "new Effect.Fade('item-#{item.id}-container', true)",
                     :url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " " +
   link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"), "Element.toggle('item-#{item.id}','action-#{item.id}-edit-form'); new Effect.Appear('action-#{item.id}-edit-form'); Form.focusFirstElement('form-action-#{item.id}');" ) + " "
   %>
@@ -61,7 +61,7 @@
                      :update => "next_actions",
                      :position => "bottom",
                      :loading => "Form.disable('checkbox-done-#{item.id}');",
-                     :complete => "new Effect2.Fade('done-item-#{item.id}-container', true);"
+                     :complete => "new Effect.Fade('done-item-#{item.id}-container', true);"
                      ) %>
 
 <div id="done-item-<%= item.id %>">
@@ -69,7 +69,7 @@
   <%=
   link_to_remote( image_tag("blank", :title =>"Delete this action", :class=>"delete_item"), 
                   :update => "done-item-#{item.id}-container",
-                  :loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
+                  :loading => "new Effect.Fade('done-item-#{item.id}-container', true)",
                   :url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " "
   %>
   <%= image_tag("blank") %>
diff --git a/tracks/app/views/context/list.rhtml b/tracks/app/views/context/list.rhtml
index 4fbae559..8e23a13f 100644
--- a/tracks/app/views/context/list.rhtml
+++ b/tracks/app/views/context/list.rhtml
@@ -6,6 +6,12 @@
 <% end %>
 </div>
 
+<%= sortable_element 'list-contexts',
+                     :tag => 'div',
+                     :handle => 'handle',
+                     :complete => visual_effect(:highlight, 'list-contexts'),
+                     :url => {:controller => 'context', :action => 'order'}
+                     %> 
 <br />
 <a href="javascript:void(0)" onClick="Element.toggle('context_new'); Form.focus_first('context-form');" accesskey="n" title="Create a new context [Alt+n]">Create new context &#187;</a>
 <div id="context_new" class="context_new" style="display:none">
diff --git a/tracks/app/views/layouts/standard.rhtml b/tracks/app/views/layouts/standard.rhtml
index 7129e359..215a9f9b 100644
--- a/tracks/app/views/layouts/standard.rhtml
+++ b/tracks/app/views/layouts/standard.rhtml
@@ -5,8 +5,9 @@
   <%= stylesheet_link_tag "standard" %>
   <%= javascript_include_tag "toggle_notes" %>
   <%= javascript_include_tag "prototype" %>
-  <%= javascript_include_tag "prototype-ex" %>
-  <%= javascript_include_tag "effects2" %>
+  <%= javascript_include_tag "effects" %>
+  <%= javascript_include_tag "dragdrop" %>
+  <%= javascript_include_tag "controls" %>
   <%= stylesheet_link_tag 'calendar-system.css' %>
   <%= javascript_include_tag 'calendar', 'calendar-en', 'calendar-setup' %>
   
diff --git a/tracks/app/views/note/_notes.rhtml b/tracks/app/views/note/_notes.rhtml
index 84311f24..5b15204d 100644
--- a/tracks/app/views/note/_notes.rhtml
+++ b/tracks/app/views/note/_notes.rhtml
@@ -8,7 +8,7 @@
   <div class="note_footer">
     <%= link_to_remote( image_tag("blank", :title =>"Delete this note", :class=>"delete_item"), 
                         :update => "note-#{note.id}",
-                        :loading => "new Effect2.Fade('note-#{note.id}-container', true)",
+                        :loading => "new Effect.Fade('note-#{note.id}-container', true)",
                         :complete => "Element.remove('note-#{note.id}-wrapper');",
                         :url => { :controller => "note", :action => "delete", :id => note.id }, 
                         :confirm => "Are you sure that you want to delete the note \'#{note.id.to_s}\'?" ) + "&nbsp;"%><%= link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"),
diff --git a/tracks/app/views/project/_project_listing.rhtml b/tracks/app/views/project/_project_listing.rhtml
index 944dc0c9..9b6a693e 100644
--- a/tracks/app/views/project/_project_listing.rhtml
+++ b/tracks/app/views/project/_project_listing.rhtml
@@ -1,21 +1,10 @@
 <%  project = project_listing %>
-<div id="project-<%= project.id %>-container">
+<div id="container_<%= project.id %>">
 <!-- %= error_messages_for 'project' % -->
 <div id="project-<%= project.id %>-display" class="list">
-<% if project.position % 2 == 0 %>
 <div id="project-<%= project.id %>" class="even_row" style="display:'';">
-<% else %>
-<div id="project-<%= project.id %>" class="odd_row" style="display:'';">
-<% end %>
 <div class="position">
-  <%= link_to(image_tag("blank", :title=>"Move to top", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_top", :id => project.id}, :title => "Move to top", :class=>"to_top") %>
-  <%= link_to(image_tag("blank", :title=>"Move up", :border=>"0", :width=>"16", :height=>"16"), 
-              {:action => "move_up", :id => project.id}, :title => "Move up", :class=>"up" ) %>
-  <%= link_to(image_tag("blank", :title=>"Move down", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_down", :id => project.id}, :title => "Move down", :class=>"down") %>
-  <%= link_to(image_tag("blank", :title=>"Move to bottom", :border=>"0", :width=>"16", :height=>"16"),
-              {:action => "move_bottom", :id => project.id}, :title => "Move to bottom", :class=>"to_bottom") %>
+  <span class="handle">DRAG</span>
 </div>  
 <div class="data">
   <%= link_to( sanitize("#{project.name}"), :action => "show", :name => urlize(project.name) ) %><%= " (" + project.count_undone_todos("actions") + ")" %>
@@ -28,9 +17,10 @@
   <% end -%>
   
   <%= link_to_remote( image_tag("blank", :title =>"Delete project", :class=>"delete_item"), 
-                  :update => "project-#{project.id}-container",
-                  :loading => "new Effect2.Fade('project-#{project.id}-container', true)",
-                  :url => { :controller => "project", :action => "destroy", :id => project.id }, :confirm => "Are you sure that you want to delete the project \'#{project.name}\'?" ) + " " +
+                  :update => "container_#{project.id}",
+                  :loading => visual_effect(:fade, 'container_#{project.id}'),
+                  :url => { :controller => "project", :action => "destroy", :id => project.id },
+                  :confirm => "Are you sure that you want to delete the project \'#{project.name}\'?" ) + " " +
       link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"), "Element.toggle('project-#{project.id}','project-#{project.id}-edit-form'); new Effect.Appear('project-#{project.id}-edit-form'); Form.focus_first('form-project-#{project.id}');" ) %>
 </div>
 </div><!-- [end:project-project.id] -->
@@ -39,8 +29,8 @@
 <div id="project-<%= project.id %>-edit-form" class="edit-form" style="display:none;">
 <%= form_remote_tag  :url => { :controller => 'project', :action => 'update', :id => project.id },
                :html => { :id => "form-project-#{project.id}", :class => "form" },
-               :update => "project-#{project.id}-container",
-               :complete => "new Effect.Appear('project-#{project.id}-container');" %>
+               :update => "container_#{project.id}",
+               :complete => visual_effect(:appear, 'container_#{project.id}') %>
   <%= render_partial 'project_form', project %>
   <div class="buttons">  
   <input type="submit" value="Update" />
@@ -48,7 +38,7 @@
   </div>
 <%= end_form_tag %>
 </div><!-- [end:project-project.id-edit-form] -->
-</div><!-- [end:project-project.id-container] -->
+</div><!-- [end:container_project.id] -->
 <% if controller.action_name == 'new_project' %>
 <script>
    new Effect.Appear('project-<%= project.id %>');
diff --git a/tracks/app/views/project/_show_items.rhtml b/tracks/app/views/project/_show_items.rhtml
index 4ac1b90b..f25af32d 100644
--- a/tracks/app/views/project/_show_items.rhtml
+++ b/tracks/app/views/project/_show_items.rhtml
@@ -6,7 +6,7 @@
                      :update => "completed",
                      :position => "top",
                      :loading => "Form.disable('checkbox-notdone-#{item.id}');",
-                     :complete => "new Effect2.Fade('item-#{item.id}-container', true);"
+                     :complete => "new Effect.Fade('item-#{item.id}-container', true);"
                      ) %>
 
 <div id="item-<%= item.id %>">
@@ -14,7 +14,7 @@
   <%=
   link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"), 
                   :update => "item-#{item.id}-container",
-                  :loading => "new Effect2.Fade('item-#{item.id}-container', true)",
+                  :loading => "new Effect.Fade('item-#{item.id}-container', true)",
                   :url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " " +
   link_to_function(image_tag( "blank", :title => "Edit action", :class=>"edit_item"), "Element.toggle('item-#{item.id}','action-#{item.id}-edit-form'); new Effect.Appear('action-#{item.id}-edit-form'); Form.focusFirstElement('form-action-#{item.id}');" ) + " "
   %>
@@ -63,7 +63,7 @@
                      :update => "next_actions",
                      :position => "bottom",
                      :loading => "Form.disable('checkbox-done-#{item.id}');",
-                     :complete => "new Effect2.Fade('done-item-#{item.id}-container', true);"
+                     :complete => "new Effect.Fade('done-item-#{item.id}-container', true);"
                      ) %>
 
 <div id="done-item-<%= item.id %>">
@@ -71,7 +71,7 @@
   <%=
   link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"), 
                   :update => "done-item-#{item.id}-container",
-                  :loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
+                  :loading => "new Effect.Fade('done-item-#{item.id}-container', true)",
                   :url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " "
   %>
   </div><!-- [end:big-box] -->
diff --git a/tracks/app/views/project/list.rhtml b/tracks/app/views/project/list.rhtml
index 3322988f..5482f0e0 100644
--- a/tracks/app/views/project/list.rhtml
+++ b/tracks/app/views/project/list.rhtml
@@ -6,6 +6,12 @@
 <% end %>
 </div>
 
+<%= sortable_element 'list-projects',
+                     :tag => 'div',
+                     :handle => 'handle',
+                     :complete => visual_effect(:highlight, 'list-projects'),
+                     :url => {:controller => 'project', :action => 'order'}
+                     %> 
 <br />
 <a href="javascript:void(0)" onClick="Element.toggle('project_new'); Form.focus_first('project-form');" accesskey="n" title="Create a new project [Alt+n]">Create new project &#187;</a>
 <div id="project_new" class="project_new" style="display:none">
diff --git a/tracks/config/routes.rb b/tracks/config/routes.rb
index 19e2c13d..99ad6f66 100644
--- a/tracks/config/routes.rb
+++ b/tracks/config/routes.rb
@@ -26,6 +26,7 @@ ActionController::Routing::Routes.draw do |map|
   map.connect 'context/new_context', :controller => 'context', :action => 'new_context'
   map.connect 'context/add_item', :controller => 'context', :action => 'add_item'
   map.connect 'contexts', :controller => 'context', :action => 'list'
+  map.connect 'context/order', :controller => 'context', :action => 'order'
   map.connect 'context/:name', :controller => 'context', :action => 'show'
   map.connect 'context/:id', :controller=> 'context', :action => 'show'
 
@@ -34,6 +35,7 @@ ActionController::Routing::Routes.draw do |map|
   map.connect 'project/add_item/:id', :controller => 'project', :action => 'add_item'
   map.connect 'project/toggle_check/:id', :controller => 'project', :action => 'toggle_check'
   map.connect 'projects', :controller => 'project', :action => 'list'
+  map.connect 'project/order', :controller => 'project', :action => 'order'
   map.connect 'project/:name', :controller => 'project', :action => 'show'
   map.connect 'project/:id', :controller => 'project', :action => 'show'
 
diff --git a/tracks/public/javascripts/effects2.js b/tracks/public/javascripts/effects2.js
deleted file mode 100644
index 4288e880..00000000
--- a/tracks/public/javascripts/effects2.js
+++ /dev/null
@@ -1,349 +0,0 @@
-// Copyright (c) 2005 Thomas Fuchs (http://mir.aculo.us)
-// 
-// Permission is hereby granted, free of charge, to any person obtaining
-// a copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to
-// permit persons to whom the Software is furnished to do so, subject to
-// the following conditions:
-// 
-// The above copyright notice and this permission notice shall be
-// included in all copies or substantial portions of the Software.
-// 
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
-	Effect2 = {}
-	
-	/* ------------- transitions ------------- */
-
-	Effect2.Transitions = {}
-	Effect2.Transitions.linear = function(pos) {
-		return pos;
-	}
-	Effect2.Transitions.sinoidal = function(pos) {
-		return (-Math.cos(pos*Math.PI)/2) + 0.5;
-	}
-	Effect2.Transitions.reverse  = function(pos) {
-		return 1-pos;
-	}
-	Effect2.Transitions.flicker = function(pos) {
-		return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random(0.25);
-	}
-	Effect2.Transitions.wobble = function(pos) {
-		return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
-	}
-	
-	/* ------------- core effects ------------- */
-
-	Effect2.Base = function() {};
-	Effect2.Base.prototype = {
-	  setOptions: function(options) {
-	    this.options = {
-	      transition: Effect2.Transitions.sinoidal,
-	      duration:   1.0,   // seconds
-	      fps:        25.0,  // max. 100fps
-	      sync:       false, // true for combining
-	      from:       0.0,
-	      to:         1.0
-	    }.extend(options || {});
-	  },
-	  start: function(options) {
-	    this.setOptions(options || {});
-	    this.currentFrame    = 0;
-		  this.startOn  = new Date().getTime();
-		  this.finishOn = this.startOn + (this.options.duration*1000);
-		  if(this.options.beforeStart) this.options.beforeStart(this);
-	    if(!this.options.sync) this.loop();	
-	  },
-	  loop: function() {
-		 timePos = new Date().getTime();
-		 if(timePos >= this.finishOn) {
-			this.render(this.options.to);
-			if(this.finish) this.finish(); 
-			if(this.options.afterFinish) this.options.afterFinish(this);
-			return;	
-		 }
-		 pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
-		 frame = Math.round(pos * this.options.fps * this.options.duration);
-		 if(frame > this.currentFrame) {
-			this.render(pos);
-			this.currentFrame = frame;
-		 }
-		 this.timeout = setTimeout(this.loop.bind(this), 10);
-	  },
-	  render: function(pos) {
-		 if(this.options.transition) pos = this.options.transition(pos);
-	  	 pos  = pos * (this.options.to-this.options.from);
-	     pos += this.options.from; 
-	  	 if(this.options.beforeUpdate) this.options.beforeUpdate(this);
-	  	 if(this.update) this.update(pos);
-	  	 if(this.options.afterUpdate) this.options.afterUpdate(this);	
-	  },
-	  cancel: function() {
-		 if(this.timeout) clearTimeout(this.timeout);
-	  }
-	}
-	
-	Effect2.Parallel = Class.create();
-		Effect2.Parallel.prototype = (new Effect2.Base()).extend({
-		  initialize: function(effects) {
-		    this.effects = effects || [];
-		  	 this.start(arguments[1]);
-		  },
-		  update: function(position) {
-		  	 for (var i = 0; i < this.effects.length; i++)
-		  		this.effects[i].render(position);	
-		  },
-		  finish: function(position) {
-		  	 for (var i = 0; i < this.effects.length; i++)
-		  	  	if(this.effects[i].finish) this.effects[i].finish(position);
-		  }
-		});
-
-  Effect2.Opacity = Class.create();
-  Effect2.Opacity.prototype = (new Effect2.Base()).extend({
-	  initialize: function() {
-	    this.element = $(arguments[0] || document.rootElement);
-	    options = {
-	      from: 0.0,
-	      to:   1.0
-	  	}.extend(arguments[1] || {});
-	  	this.start(options);
-	  },
-	  update: function(position) {
-	  	this.setOpacity(position);
-	  }, 
-	  setOpacity: function(opacity) {
-	  	opacity = (opacity == 1) ? 0.99999 : opacity;
-	  	this.element.style.opacity = opacity;
-	  	this.element.style.filter = "alpha(opacity:"+opacity*100+")";
-	  }
-	});
-
-	Effect2.MoveBy = Class.create();
-   Effect2.MoveBy.prototype = (new Effect2.Base()).extend({
-     initialize: function(element, toTop, toLeft) {
-     	 this.element      = $(element);
-    	 this.originalTop  = 
-         this.element.style.top ? parseFloat(this.element.style.top) : 0;
-       this.originalLeft = 
-         this.element.style.left ? parseFloat(this.element.style.left) : 0;
-       this.toTop        = toTop;
-     	 this.toLeft       = toLeft;
-       if(this.element.style.position == "")
-         this.element.style.position = "relative";
-       this.start(arguments[3]);
-     },
-     update: function(position) {
-	    topd  = this.toTop  * position + this.originalTop;
-	    leftd = this.toLeft * position + this.originalLeft;
-   	 this.setPosition(topd, leftd);
-     },
-     setPosition: function(topd, leftd) {
-     	 this.element.style.top  = topd  + "px";
-       this.element.style.left = leftd + "px";
-     }
-	});
-
-	Effect2.Scale = Class.create();
-	Effect2.Scale.prototype = (new Effect2.Base()).extend({
-	  initialize: function(element, percent) {
-	    this.element = $(element)
-	    options = {
-	      scaleX: true,
-	      scaleY: true,
-	      scaleContent: true,
-	      scaleFromCenter: false,
-	      scaleMode: 'box',        // 'box' or 'contents'
-	      scaleFrom: 100.0
-	    }.extend(arguments[2] || {});
-	    this.originalTop    = this.element.offsetTop;
-	    this.originalLeft   = this.element.offsetLeft;
-	    if (this.element.style.fontSize=="") this.sizeEm = 1.0;
-	    if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
-	       this.sizeEm      = parseFloat(this.element.style.fontSize);
-	    this.factor = (percent/100.0) - (options.scaleFrom/100.0);
-	    if(options.scaleMode=='box') {
-	      this.originalHeight = this.element.clientHeight;
-	      this.originalWidth  = this.element.clientWidth; 
-	    } else 
-	    if(options.scaleMode=='contents') {
-	      this.originalHeight = this.element.scrollHeight;
-	      this.originalWidth  = this.element.scrollWidth;
-	    }
-	    this.start(options);
-	  },
-
-	  update: function(position) {
-	    currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
-	    if(this.options.scaleContent && this.sizeEm) 
-	      this.element.style.fontSize = this.sizeEm*currentScale + "em";
-	    this.setDimensions(
-		   this.originalWidth * currentScale, 
-		   this.originalHeight * currentScale);
-	  },
-
-	  setDimensions: function(width, height) {
-	    if(this.options.scaleX) this.element.style.width = width + 'px';
-	    if(this.options.scaleY) this.element.style.height = height + 'px';
-	    if(this.options.scaleFromCenter) {
-	      topd  = (height - this.originalHeight)/2;
-	      leftd = (width  - this.originalWidth)/2;
-	      if(this.element.style.position=='absolute') {
-	        if(this.options.scaleY) this.element.style.top = this.originalTop-topd + "px";
-	        if(this.options.scaleX) this.element.style.left = this.originalLeft-leftd + "px";
-	      } else {
-	        if(this.options.scaleY) this.element.style.top = -topd + "px";
-	        if(this.options.scaleX) this.element.style.left = -leftd + "px";
-	      }
-	    }
-	  }
-	});
-	
-	/* ------------- prepackaged effects ------------- */
-	
-	Effect2.Fade =	function(element) {
-		  options = {
-			from: 1.0,
-			to:   0.0,
-			afterFinish: function(effect) 
-			  { Element.hide(effect.element);
-			    effect.setOpacity(1); } 
-			}.extend(arguments[1] || {});
-		  new Effect2.Opacity(element,options);
-		}
-
-Effect2.Appear =	function(element) {
-  options = {
-  from: 0.0,
-  to:   1.0,
-  beforeStart: function(effect)  
-    { effect.setOpacity(0);
-      Element.show(effect.element); },
-  afterUpdate: function(effect)  
-    { Element.show(effect.element); }
-  }.extend(arguments[1] || {});
-  new Effect2.Opacity(element,options);
-}
-
-	Effect2.Puff = function(element) {
-	  new Effect2.Parallel(
-	   [ new Effect2.Scale(element, 200, { sync: true, scaleFromCenter: true }), 
-	     new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
-	     { duration: 1.0, 
-		    afterUpdate: function(effect) 
-		     { effect.effects[0].element.style.position = 'absolute'; },
-		    afterFinish: function(effect)
-		     { Element.hide(effect.effects[0].element); }
-	     }
-     );
-	}
-
-	Effect2.BlindUp = function(element) {
-	  $(element).style.overflow = 'hidden';
-	  new Effect2.Scale(element, 0, 
-	    { scaleContent: false, 
-        scaleX: false, 
-        afterFinish: function(effect) 
-          { Element.hide(effect.element) } 
-      }.extend(arguments[1] || {})
-	  );
-	}
-
-	Effect2.BlindDown = function(element) {
-	  $(element).style.height   = '0px';
-	  $(element).style.overflow = 'hidden';
-	  Element.show(element);
-	  new Effect2.Scale(element, 100, 
-		  { scaleContent: false, 
-			  scaleX: false, 
-			  scaleMode: 'contents',
-			  scaleFrom: 0
-	    }.extend(arguments[1] || {})
-	  );
-	}
-
-	Effect2.SwitchOff = function(element) {
-		new Effect2.Appear(element,
-		  { duration: 0.4,
-			 transition: Effect2.Transitions.flicker,
-			 afterFinish: function(effect)
-			  {  effect.element.style.overflow = 'hidden';
-				  new Effect2.Scale(effect.element, 1, 
-				   { duration: 0.3, scaleFromCenter: true,
-					  scaleX: false, scaleContent: false,
-					  afterUpdate: function(effect) { 
-						 if(effect.element.style.position=="")
-						   effect.element.style.position = 'relative'; },
-					  afterFinish: function(effect) { Element.hide(effect.element); }
-				   } )
-			  }
-		  } )
-	}
-
-	Effect2.DropOut = function(element) {
-		new Effect2.Parallel(
-		  [ new Effect2.MoveBy(element, 100, 0, { sync: true }), 
-		    new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
-		  { duration: 0.5, 
-			 afterFinish: function(effect)
-			   { Element.hide(effect.effects[0].element); } 
-		  });
-	}
-
-	Effect2.Shake = function(element) {
-		new Effect2.MoveBy(element, 0, 20, 
-		  { duration: 0.05, afterFinish: function(effect) {
-		new Effect2.MoveBy(effect.element, 0, -40, 
-		  { duration: 0.1, afterFinish: function(effect) { 
-		new Effect2.MoveBy(effect.element, 0, 40, 
-		  { duration: 0.1, afterFinish: function(effect) {	
-		new Effect2.MoveBy(effect.element, 0, -40, 
-		  { duration: 0.1, afterFinish: function(effect) {	
-		new Effect2.MoveBy(effect.element, 0, 40, 
-		  { duration: 0.1, afterFinish: function(effect) {	
-		new Effect2.MoveBy(effect.element, 0, -20, 
-		  { duration: 0.05, afterFinish: function(effect) {	
-		}}) }}) }}) }}) }}) }});
-	}
-	
-	Effect2.SlideDown = function(element) {
-		  $(element).style.height   = '0px';
-		  $(element).style.overflow = 'hidden';
-		  $(element).childNodes[0].style.position = 'relative';
-		  Element.show(element);
-		  new Effect2.Scale(element, 100, 
-			 { scaleContent: false, 
-				scaleX: false, 
-				scaleMode: 'contents',
-				scaleFrom: 0,
-				afterUpdate: function(effect) 
-				  { effect.element.firstChild.style.bottom = 
-				      (effect.originalHeight - effect.element.clientHeight) + 'px'; }
-		    }.extend(arguments[1] || {})
-		  );
-		}
-		
-		Effect2.SlideUp = function(element) {
-			  $(element).style.overflow = 'hidden';
-			  $(element).childNodes[0].style.position = 'relative';
-			  Element.show(element);
-			  new Effect2.Scale(element, 0, 
-				 { scaleContent: false, 
-					scaleX: false, 
-					afterUpdate: function(effect) 
-					  { effect.element.firstChild.style.bottom = 
-					      (effect.originalHeight - effect.element.clientHeight) + 'px'; },
-			    afterFinish: function(effect)
-			      { Element.hide(effect.element); }
-			   }.extend(arguments[1] || {})
-			  );
-			}
\ No newline at end of file
diff --git a/tracks/public/javascripts/prototype-ex.js b/tracks/public/javascripts/prototype-ex.js
deleted file mode 100644
index 27c7eb6d..00000000
--- a/tracks/public/javascripts/prototype-ex.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* Form extensions - prototype-ex by Matt McCray
-  <http://darthapo.com/repos/prototype-ex.html> */
-
-Form.extend( {
-
-   disable: function( form ) {
-      var elements = Form.getElements( form );
-      for(var i=0; i<elements.length; i++)
-      {
-         elements[i].blur();
-         elements[i].disable = 'true';
-      }
-   },
-
-   focus_first: function( form )
-   {
-      form = $(form);
-      var elements = Form.getElements( form );
-      for( var i=0; i<elements.length; i++ ) {
-         var elem = elements[i];
-         if( elem.type != 'hidden' && !elem.disabled) {
-            Field.activate( elem );
-            break;
-         }
-      }
-   },
-
-   reset: function( form )
-   {
-      $(form).reset();
-   }
-   
-});
-
-/*--------------------------------------------------------------------------*/
-
-Field.extend({
-
-   select: function(element) {
-      $(element).select();
-   },
-   
-   activate: function(element) {
-      $(element).focus();
-      $(element).select();
-   }
-   
-});
-
-var Action = {
-  do_submit: function(form) {
-     // calling form.submit seems to override the onsubmit handler...
-     $(form).onsubmit();
-  },
-};
\ No newline at end of file
diff --git a/tracks/public/stylesheets/standard.css b/tracks/public/stylesheets/standard.css
index 677dfaa8..918f6d7f 100644
--- a/tracks/public/stylesheets/standard.css
+++ b/tracks/public/stylesheets/standard.css
@@ -365,6 +365,8 @@ li    {
 .even_row {
       background: #fff;
       padding: 5px 5px 5px 10px;
+      margin: 2px 2px;
+      border: 1px solid #ccc;
       }
 
 .odd_row {
@@ -390,13 +392,13 @@ input {
 }
 
 /* Positioning the 'cells' in the list */
-table.list {
+/* table.list {
     margin-top: 0px;
     border-top: 1px solid #ccc;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     background: #fff;
-    }
+    } */
     
 .position {
     float: left;
@@ -479,4 +481,13 @@ input, select {
     border-color: #FC9 #630 #330 #F96; 
     padding:0px 3px 0px 3px; 
     margin:0px;
-    }
\ No newline at end of file
+    }
+    
+/* Classes for Drag and Drop */
+.handle {
+    color: #fff;
+    background: #000;
+    padding: 1px;
+    font-size: 10px;
+    cursor: move;    
+}
\ No newline at end of file