SONAR-983 Replace the existing Ajax search engine

8 files changed, 1480 insertions, 1384 deletions

diff --git a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
index aba492ff7fe..772bec2e4c7 100644
--- a/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
+++ b/plugins/sonar-l10n-en-plugin/src/main/resources/org/sonar/l10n/core.properties
@@ -204,6 +204,32 @@ since_version=since version {0}
 since_version_detailed=since version {0} ({1})
 time_changes=Time changes
 
+#------------------------------------------------------------------------------
+#
+# RESOURCE QUALIFIERS
+#
+#------------------------------------------------------------------------------
+
+qualifier.TRK=Project
+qualifier.BRC=Module
+qualifier.DIR=Directory
+qualifier.PAC=Package
+qualifier.VW=View
+qualifier.SVW=Sub-view
+qualifier.FIL=File
+qualifier.CLA=File
+qualifier.UTS=Unit Test File
+
+qualifiers.TRK=Projects
+qualifiers.BRC=Modules
+qualifiers.DIR=Directories
+qualifiers.PAC=Packages
+qualifiers.VW=Views
+qualifiers.SVW=Sub-views
+qualifiers.FIL=Files
+qualifiers.CLA=Files
+qualifiers.UTS=Unit Test Files
+
 
 #------------------------------------------------------------------------------
 #
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/controllers/search_controller.rb b/sonar-server/src/main/webapp/WEB-INF/app/controllers/search_controller.rb
index 4bf258732d4..83cb45e7d79 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/controllers/search_controller.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/controllers/search_controller.rb
@@ -26,44 +26,48 @@ class SearchController < ApplicationController
 
   # Do not exceed 1000 because of the Oracle limition on IN statements
   MAX_RESULTS = 6
+  MIN_SEARCH_SIZE=3
 
   def index
     @start_time = Time.now
     search = params[:s]
-    unless search.blank?
-      if search.to_s.size>=3
-        key = search.downcase
-        results = ResourceIndex.find(:all,
-                                     :select => 'resource_id,root_project_id,qualifier', # optimization to not load unused columns like 'kee'
-                                     :conditions => ["kee like ?", key + '%'],
-                                     :order => 'name_size')
+    bad_request('Minimum search is 3 characters') if search.empty? || search.to_s.size<MIN_SEARCH_SIZE
 
-        results = select_authorized(:user, results)
-        resource_ids=[]
-        @results_by_qualifier={}
-        @count_by_qualifier=Hash.new(0)
-        results.each do |resource_index|
-          @results_by_qualifier[resource_index.qualifier]||=[]
-          array=@results_by_qualifier[resource_index.qualifier]
-          if array.size<MAX_RESULTS
-            resource_ids<<resource_index.resource_id
-            array<<resource_index
-          end
-          @count_by_qualifier[resource_index.qualifier]+=1
-        end
+    key = search.downcase
+    results = ResourceIndex.find(:all,
+                                 :select => 'resource_id,root_project_id,qualifier', # optimization to not load unused columns like 'kee'
+                                 :conditions => ["kee like ?", key + '%'],
+                                 :order => 'name_size')
 
-        @resources_by_id = {}
-        unless resource_ids.empty?
-          Project.find(:all, :conditions => ['id in (?)', resource_ids]).each do |resource|
-            @resources_by_id[resource.id]=resource
-          end
-        end
-      else
-        flash[:warning]='Please refine your search'
+    results = select_authorized(:user, results)
+    @total = results.size
+
+    resource_ids=[]
+    @results_by_qualifier={}
+    results.each do |resource_index|
+      qualifier = fix_qualifier(resource_index.qualifier)
+      @results_by_qualifier[qualifier]||=[]
+      array=@results_by_qualifier[qualifier]
+      if array.size<MAX_RESULTS
+        resource_ids<<resource_index.resource_id
+        array<<resource_index
       end
     end
+
+    @resources_by_id = {}
+    unless resource_ids.empty?
+      Project.find(:all, :conditions => ['id in (?)', resource_ids]).each do |resource|
+        @resources_by_id[resource.id]=resource
+      end
+    end
+
+    render :partial => 'search/autocomplete'
   end
 
+  #
+  # TO DELETE !!!!!
+  #
+  #
   # Start indexing resources
   #
   # curl -v -u admin:admin -X POST http://localhost:9000/search/reset
@@ -71,4 +75,15 @@ class SearchController < ApplicationController
     java_facade.indexResources()
     render :text => 'indexing'
   end
+
+
+  private
+  def fix_qualifier(q)
+    case q
+      when 'CLA' then
+        'FIL'
+      else
+        q
+    end
+  end
 end
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
index fec76547b34..1434e3c1975 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
@@ -7,15 +7,14 @@
     <%= render :partial => 'layouts/breadcrumb' %>
     <ol id="nav">
       <li>
-        <input type="text" autocomplete="off" size="15" name="search" id="projectSearch" onFocus="this.size=30;this.value='';autocompleteProjects('<%= ApplicationController.root_context -%>/api/resources?scopes=<%= Project::SCOPE_SET -%>&qualifiers=<%= Project::QUALIFIER_VIEW-%>,<%= Project::QUALIFIER_SUBVIEW-%>,<%= Project::QUALIFIER_PROJECT-%>', '<%= ApplicationController.root_context -%>/dashboard/index/', this, $('projectResults'));return true;" onBlur="javacript:this.size=15" value="<%= message('search_verb') -%>"/>
-
-        <div id="projectResults" style="display:none"></div>
+        <input type="text" size="15" name="search" id="searchResourcesInput" onFocus="autocompleteResources('<%= ApplicationController.root_context -%>')" accesskey="/" value="<%= message('search_verb') -%>"/>
+        <img src="<%= ApplicationController.root_context -%>/images/loading-black.gif" id="searchingResources" style="display: none">
       </li>
       <li>
         <a href="javascript:window.print()"><img src="<%= ApplicationController.root_context -%>/images/print.gif" alt="<%= message('layout.print') -%>" title="<%= message('layout.print') -%>"/></a>
         <% if @project %>
           <a href="<%= url_for :overwrite_params => {:id => @project.key} -%>" id="permalink">
-          <img src="<%= ApplicationController.root_context -%>/images/permalink.gif" alt="<%= message('layout.permalink') -%>" title="<%= message('layout.permalink') -%>"/></a>
+            <img src="<%= ApplicationController.root_context -%>/images/permalink.gif" alt="<%= message('layout.permalink') -%>" title="<%= message('layout.permalink') -%>"/></a>
         <% end %>
       </li>
       <% if logged_in? %>
@@ -31,6 +30,7 @@
 
   </div>
   <div id="body">
+    <div id="searchResourcesResults" class="autocomplete" style="display:none"></div>
     <div id="sb">
       <div id="sidebar">
         <ul>
@@ -72,8 +72,8 @@
               <li class="<%= 'selected' if request.request_uri.include?('/manual_measures') -%>">
                 <a href="<%= ApplicationController.root_context -%>/manual_measures/index/<%= @project.id -%>"><%= message('manual_measures.page') -%></a></li>
               <% if (@project.project?) %>
-              <li class="<%= 'selected' if request.request_uri.include?('/action_plans') -%>">
-                <a href="<%= ApplicationController.root_context -%>/action_plans/index/<%= @project.id -%>"><%= message('action_plans.page') -%></a></li>
+                <li class="<%= 'selected' if request.request_uri.include?('/action_plans') -%>">
+                  <a href="<%= ApplicationController.root_context -%>/action_plans/index/<%= @project.id -%>"><%= message('action_plans.page') -%></a></li>
               <% end %>
               <% if (@project.project? || @project.module?) %>
                 <li class="<%= 'selected' if request.request_uri.include?('/project/settings') -%>">
@@ -158,7 +158,7 @@
       <% if @sidebar %>
         <div id="sidebarconf"><%= render :partial => @sidebar %></div>
       <% else %>
-        <div id="sidebarconf" class="hidden"> </div>
+        <div id="sidebarconf" class="hidden"></div>
       <% end %>
 
     </div>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/search/_autocomplete.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/search/_autocomplete.html.erb
new file mode 100644
index 00000000000..e17bcfba883
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/search/_autocomplete.html.erb
@@ -0,0 +1,24 @@
+<% search = params[:s] %>
+<% unless @results_by_qualifier.empty? %>
+  <ul>
+    <%
+       @results_by_qualifier.keys.each do |qualifier|
+    %>
+      <%
+         @results_by_qualifier[qualifier].each_with_index do |resource_index, index|
+           resource=@resources_by_id[resource_index.resource_id]
+      %>
+        <li id="<%= resource.id -%>">
+          <div class="q"><%= index==0 ? message("qualifiers.#{qualifier}") : '' -%></div>
+
+          <%= qualifier_icon resource -%> <%= highlight(resource.name(true), search) -%>
+        </li>
+      <% end %>
+    <% end %>
+  </ul>
+<% else %>
+  <ul>
+    <li>No results</li>
+  </ul>
+<% end %>
+<div class="autocompleteNote"><%= @total -%> results (<%= Time.now - @start_time -%> seconds)</div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/search/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/search/index.html.erb
deleted file mode 100644
index 10edea7d043..00000000000
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/search/index.html.erb
+++ /dev/null
@@ -1,51 +0,0 @@
-<% search=params[:s]||'' %>
-<form method="GET" action="<%= ApplicationController.root_context -%>/search/index" class="marginbottom10">
-  <input type="text" name="s" id="searchText" value="<%= search -%>">
-  <input type="submit" value="Search" id="submitSearch">
-</form>
-
-<% if @results_by_qualifier %>
-  <%
-     @results_by_qualifier.keys.each do |qualifier|
-  %>
-    <table class="data width100 marginbottom10" id="result<%= qualifier -%>">
-      <thead>
-      <tr>
-        <th colspan="3"><%= qualifier %></th>
-      </tr>
-      </thead>
-      <tbody>
-      <%
-         @results_by_qualifier[qualifier].each do |resource_index|
-           resource=@resources_by_id[resource_index.resource_id]
-      %>
-        <tr class="<%= cycle('even', 'odd', :name => qualifier) -%>">
-          <td class="thin nowrap">
-            <% if resource.display_dashboard? %>
-              <a href="<%= ApplicationController.root_context -%>/components/index/<%= resource.id -%>"><img src="<%= ApplicationController.root_context -%>/images/zoom.png"></a>
-            <% end %>
-          </td>
-          <td class="thin nowrap">
-            <%= qualifier_icon resource -%>
-          </td>
-          <td>
-            <%= link_to_resource_home resource, :name => highlight(resource.name(true), search) -%>
-          </td>
-        </tr>
-      <% end %>
-      </tbody>
-      <tfoot>
-      <tr>
-        <td colspan="3"><%= @count_by_qualifier[qualifier] -%> results</td>
-      </tr>
-      </tfoot>
-    </table>
-  <% end %>
-
-  <div class="notes">
-    <%= Time.now - @start_time -%> seconds
-  </div>
-<% end %>
-<script type="text/javascript">
-  $('searchText').focus();
-</script>
diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index 491553bb19d..b61673c0b77 100644
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -1,5 +1,5 @@
-function showMessage(div_id,message) {
-  $(div_id + 'msg').innerHTML=message;
+function showMessage(div_id, message) {
+  $(div_id + 'msg').innerHTML = message;
   $(div_id).show();
 }
 function error(message) {
@@ -11,144 +11,131 @@ function warning(message) {
 function info(message) {
   showMessage('info', message);
 }
-var projects;
-function autocompleteProjects(APIURL, projectURL, searchInput, searchResult) {
-  if (projects != null) return;
-  new Ajax.Request(APIURL, {
-    method: 'get',
-    requestHeaders: {Accept: 'application/json'},
-	onComplete: function(transport) {
-	  if (200 == transport.status) {
-        // not handled automatically with current prototype version
-        projects = eval(transport.responseText);
-        var projectNames = new Array();
-        for( i = 0; i < projects.length; i++ ) {
-          projectNames[i] = projects[i].name
-        }
-        new Autocompleter.Local(searchInput.id, searchResult.id, projectNames,
-          {afterUpdateElement:
-            function(selectedLi) {
-              for( i = 0; i < projects.length; i++ ) {
-                if ( projects[i].name == searchInput.value ) {
-                  searchInput.disable();
-                  window.location= projectURL + projects[i].key;
-                }
-              }
-            }, fullSearch: true, frequency: 0.1, choices: 50
-          });
-      } else {
-	    error('Server error while searching projects.');
+
+function autocompleteResources(base_url) {
+  $('searchResourcesInput').value = '';
+  new Ajax.Autocompleter('searchResourcesInput', 'searchResourcesResults', base_url + '/search', {
+    method:'post',
+    minChars:3,
+    indicator:'searchingResources',
+    paramName:'s',
+    updateElement:function (item) {
+      if (item.id) {
+        window.location = base_url + '/dashboard/index/' + item.id;
       }
+    },
+    onShow:function (element, update) { /* no update */
+      update.show();
     }
   });
 }
 
 var SelectBox = {
-    cache: new Object(),
-    init: function(id) {
-        var box = document.getElementById(id);
-        var node;
-        SelectBox.cache[id] = new Array();
-        var cache = SelectBox.cache[id];
-        for (var i = 0; (node = box.options[i]); i++) {
-            cache.push({value: node.value, text: node.text, displayed: 1});
-        }
-    },
-    redisplay: function(id) {
-        // Repopulate HTML select box from cache
-        var box = document.getElementById(id);
-        box.options.length = 0; // clear all options
-        for (var i = 0, j = SelectBox.cache[id].length; i < j; i++) {
-            var node = SelectBox.cache[id][i];
-            if (node.displayed) {
-                box.options[box.options.length] = new Option(node.text, node.value, false, false);
-            }
-        }
-    },
-    filter: function(id, text) {
-        // Redisplay the HTML select box, displaying only the choices containing ALL
-        // the words in text. (It's an AND search.)
-        var tokens = text.toLowerCase().split(/\s+/);
-        var node, token;
-        for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
-            node.displayed = 1;
-            for (var j = 0; (token = tokens[j]); j++) {
-                if (node.text.toLowerCase().indexOf(token) == -1) {
-                    node.displayed = 0;
-                }
-            }
-        }
-        SelectBox.redisplay(id);
-    },
-    delete_from_cache: function(id, value) {
-        var node, delete_index = null;
-        for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
-            if (node.value == value) {
-                delete_index = i;
-                break;
-            }
-        }
-        var j = SelectBox.cache[id].length - 1;
-        for (var i = delete_index; i < j; i++) {
-            SelectBox.cache[id][i] = SelectBox.cache[id][i+1];
-        }
-        SelectBox.cache[id].length--;
-    },
-    add_to_cache: function(id, option) {
-        SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
-    },
-    cache_contains: function(id, value) {
-        // Check if an item is contained in the cache
-        var node;
-        for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
-            if (node.value == value) {
-                return true;
-            }
-        }
-        return false;
-    },
-    move: function(from, to) {
-        var from_box = document.getElementById(from);
-        var option;
-        for (var i = 0; (option = from_box.options[i]); i++) {
-            if (option.selected && SelectBox.cache_contains(from, option.value)) {
-                SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
-                SelectBox.delete_from_cache(from, option.value);
-            }
-        }
-        SelectBox.redisplay(from);
-        SelectBox.redisplay(to);
-    },
-    move_all: function(from, to) {
-        var from_box = document.getElementById(from);
-        var option;
-        for (var i = 0; (option = from_box.options[i]); i++) {
-            if (SelectBox.cache_contains(from, option.value)) {
-                SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
-                SelectBox.delete_from_cache(from, option.value);
-            }
-        }
-        SelectBox.redisplay(from);
-        SelectBox.redisplay(to);
-    },
-    sort: function(id) {
-        SelectBox.cache[id].sort( function(a, b) {
-            a = a.text.toLowerCase();
-            b = b.text.toLowerCase();
-            try {
-                if (a > b) return 1;
-                if (a < b) return -1;
-            }
-            catch (e) {
-                // silently fail on IE 'unknown' exception
-            }
-            return 0;
-        } );
-    },
-    select_all: function(id) {
-        var box = document.getElementById(id);
-        for (var i = 0; i < box.options.length; i++) {
-            box.options[i].selected = 'selected';
+  cache:new Object(),
+  init:function (id) {
+    var box = document.getElementById(id);
+    var node;
+    SelectBox.cache[id] = new Array();
+    var cache = SelectBox.cache[id];
+    for (var i = 0; (node = box.options[i]); i++) {
+      cache.push({value:node.value, text:node.text, displayed:1});
+    }
+  },
+  redisplay:function (id) {
+    // Repopulate HTML select box from cache
+    var box = document.getElementById(id);
+    box.options.length = 0; // clear all options
+    for (var i = 0, j = SelectBox.cache[id].length; i < j; i++) {
+      var node = SelectBox.cache[id][i];
+      if (node.displayed) {
+        box.options[box.options.length] = new Option(node.text, node.value, false, false);
+      }
+    }
+  },
+  filter:function (id, text) {
+    // Redisplay the HTML select box, displaying only the choices containing ALL
+    // the words in text. (It's an AND search.)
+    var tokens = text.toLowerCase().split(/\s+/);
+    var node, token;
+    for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
+      node.displayed = 1;
+      for (var j = 0; (token = tokens[j]); j++) {
+        if (node.text.toLowerCase().indexOf(token) == -1) {
+          node.displayed = 0;
         }
+      }
+    }
+    SelectBox.redisplay(id);
+  },
+  delete_from_cache:function (id, value) {
+    var node, delete_index = null;
+    for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
+      if (node.value == value) {
+        delete_index = i;
+        break;
+      }
+    }
+    var j = SelectBox.cache[id].length - 1;
+    for (var i = delete_index; i < j; i++) {
+      SelectBox.cache[id][i] = SelectBox.cache[id][i + 1];
+    }
+    SelectBox.cache[id].length--;
+  },
+  add_to_cache:function (id, option) {
+    SelectBox.cache[id].push({value:option.value, text:option.text, displayed:1});
+  },
+  cache_contains:function (id, value) {
+    // Check if an item is contained in the cache
+    var node;
+    for (var i = 0; (node = SelectBox.cache[id][i]); i++) {
+      if (node.value == value) {
+        return true;
+      }
+    }
+    return false;
+  },
+  move:function (from, to) {
+    var from_box = document.getElementById(from);
+    var option;
+    for (var i = 0; (option = from_box.options[i]); i++) {
+      if (option.selected && SelectBox.cache_contains(from, option.value)) {
+        SelectBox.add_to_cache(to, {value:option.value, text:option.text, displayed:1});
+        SelectBox.delete_from_cache(from, option.value);
+      }
+    }
+    SelectBox.redisplay(from);
+    SelectBox.redisplay(to);
+  },
+  move_all:function (from, to) {
+    var from_box = document.getElementById(from);
+    var option;
+    for (var i = 0; (option = from_box.options[i]); i++) {
+      if (SelectBox.cache_contains(from, option.value)) {
+        SelectBox.add_to_cache(to, {value:option.value, text:option.text, displayed:1});
+        SelectBox.delete_from_cache(from, option.value);
+      }
+    }
+    SelectBox.redisplay(from);
+    SelectBox.redisplay(to);
+  },
+  sort:function (id) {
+    SelectBox.cache[id].sort(function (a, b) {
+      a = a.text.toLowerCase();
+      b = b.text.toLowerCase();
+      try {
+        if (a > b) return 1;
+        if (a < b) return -1;
+      }
+      catch (e) {
+        // silently fail on IE 'unknown' exception
+      }
+      return 0;
+    });
+  },
+  select_all:function (id) {
+    var box = document.getElementById(id);
+    for (var i = 0; i < box.options.length; i++) {
+      box.options[i].selected = 'selected';
     }
+  }
 };
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/javascripts/scriptaculous.js b/sonar-server/src/main/webapp/javascripts/scriptaculous.js
index 23fcfe8fbe2..17e634a9497 100644
--- a/sonar-server/src/main/webapp/javascripts/scriptaculous.js
+++ b/sonar-server/src/main/webapp/javascripts/scriptaculous.js
@@ -6,25 +6,25 @@
 // For details, see the script.aculo.us web site: http://script.aculo.us/
 
 var Builder = {
-  NODEMAP: {
-    AREA: 'map',
-    CAPTION: 'table',
-    COL: 'table',
-    COLGROUP: 'table',
-    LEGEND: 'fieldset',
-    OPTGROUP: 'select',
-    OPTION: 'select',
-    PARAM: 'object',
-    TBODY: 'table',
-    TD: 'table',
-    TFOOT: 'table',
-    TH: 'table',
-    THEAD: 'table',
-    TR: 'table'
+  NODEMAP:{
+    AREA:'map',
+    CAPTION:'table',
+    COL:'table',
+    COLGROUP:'table',
+    LEGEND:'fieldset',
+    OPTGROUP:'select',
+    OPTION:'select',
+    PARAM:'object',
+    TBODY:'table',
+    TD:'table',
+    TFOOT:'table',
+    TH:'table',
+    THEAD:'table',
+    TR:'table'
   },
   // note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,
   //       due to a Firefox bug
-  node: function(elementName) {
+  node:function (elementName) {
     elementName = elementName.toUpperCase();
 
     // try innerHTML approach
@@ -32,103 +32,105 @@ var Builder = {
     var parentElement = document.createElement(parentTag);
     try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
       parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
-    } catch(e) {}
+    } catch (e) {
+    }
     var element = parentElement.firstChild || null;
 
     // see if browser added wrapping tags
-    if(element && (element.tagName.toUpperCase() != elementName))
+    if (element && (element.tagName.toUpperCase() != elementName))
       element = element.getElementsByTagName(elementName)[0];
 
     // fallback to createElement approach
-    if(!element) element = document.createElement(elementName);
+    if (!element) element = document.createElement(elementName);
 
     // abort if nothing could be created
-    if(!element) return;
+    if (!element) return;
 
     // attributes (or text)
-    if(arguments[1])
-      if(this._isStringOrNumber(arguments[1]) ||
+    if (arguments[1])
+      if (this._isStringOrNumber(arguments[1]) ||
         (arguments[1] instanceof Array) ||
         arguments[1].tagName) {
-          this._children(element, arguments[1]);
-        } else {
-          var attrs = this._attributes(arguments[1]);
-          if(attrs.length) {
-            try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
-              parentElement.innerHTML = "<" +elementName + " " +
-                attrs + "></" + elementName + ">";
-            } catch(e) {}
-            element = parentElement.firstChild || null;
-            // workaround firefox 1.0.X bug
-            if(!element) {
-              element = document.createElement(elementName);
-              for(attr in arguments[1])
-                element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
-            }
-            if(element.tagName.toUpperCase() != elementName)
-              element = parentElement.getElementsByTagName(elementName)[0];
+        this._children(element, arguments[1]);
+      } else {
+        var attrs = this._attributes(arguments[1]);
+        if (attrs.length) {
+          try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
+            parentElement.innerHTML = "<" + elementName + " " +
+              attrs + "></" + elementName + ">";
+          } catch (e) {
+          }
+          element = parentElement.firstChild || null;
+          // workaround firefox 1.0.X bug
+          if (!element) {
+            element = document.createElement(elementName);
+            for (attr in arguments[1])
+              element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
           }
+          if (element.tagName.toUpperCase() != elementName)
+            element = parentElement.getElementsByTagName(elementName)[0];
         }
+      }
 
     // text, or array of children
-    if(arguments[2])
+    if (arguments[2])
       this._children(element, arguments[2]);
 
-     return $(element);
+    return $(element);
   },
-  _text: function(text) {
-     return document.createTextNode(text);
+  _text:function (text) {
+    return document.createTextNode(text);
   },
 
-  ATTR_MAP: {
-    'className': 'class',
-    'htmlFor': 'for'
+  ATTR_MAP:{
+    'className':'class',
+    'htmlFor':'for'
   },
 
-  _attributes: function(attributes) {
+  _attributes:function (attributes) {
     var attrs = [];
-    for(attribute in attributes)
+    for (attribute in attributes)
       attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) +
-          '="' + attributes[attribute].toString().escapeHTML().gsub(/"/,'&quot;') + '"');
+        '="' + attributes[attribute].toString().escapeHTML().gsub(/"/, '&quot;') + '"');
     return attrs.join(" ");
   },
-  _children: function(element, children) {
-    if(children.tagName) {
+  _children:function (element, children) {
+    if (children.tagName) {
       element.appendChild(children);
       return;
     }
-    if(typeof children=='object') { // array can hold nodes and text
-      children.flatten().each( function(e) {
-        if(typeof e=='object')
+    if (typeof children == 'object') { // array can hold nodes and text
+      children.flatten().each(function (e) {
+        if (typeof e == 'object')
           element.appendChild(e);
         else
-          if(Builder._isStringOrNumber(e))
-            element.appendChild(Builder._text(e));
+        if (Builder._isStringOrNumber(e))
+          element.appendChild(Builder._text(e));
       });
     } else
-      if(Builder._isStringOrNumber(children))
-        element.appendChild(Builder._text(children));
+    if (Builder._isStringOrNumber(children))
+      element.appendChild(Builder._text(children));
   },
-  _isStringOrNumber: function(param) {
-    return(typeof param=='string' || typeof param=='number');
+  _isStringOrNumber:function (param) {
+    return(typeof param == 'string' || typeof param == 'number');
   },
-  build: function(html) {
+  build:function (html) {
     var element = this.node('div');
     $(element).update(html.strip());
     return element.down();
   },
-  dump: function(scope) {
-    if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope
+  dump:function (scope) {
+    if (typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope
 
     var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " +
       "BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " +
-      "FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+
-      "KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+
-      "PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+
+      "FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX " +
+      "KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P " +
+      "PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD " +
       "TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/);
 
-    tags.each( function(tag){
-      scope[tag] = function() {
+    tags.each(function (tag) {
+      scope[tag] = function () {
         return Builder.node.apply(Builder, [tag].concat($A(arguments)));
       };
     });
@@ -147,148 +149,154 @@ var Builder = {
 
 // converts rgb() and #xxx to #xxxxxx format,
 // returns self (or first argument) if not convertable
-String.prototype.parseColor = function() {
+String.prototype.parseColor = function () {
   var color = '#';
-  if (this.slice(0,4) == 'rgb(') {
-    var cols = this.slice(4,this.length-1).split(',');
-    var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
+  if (this.slice(0, 4) == 'rgb(') {
+    var cols = this.slice(4, this.length - 1).split(',');
+    var i = 0;
+    do {
+      color += parseInt(cols[i]).toColorPart()
+    } while (++i < 3);
   } else {
-    if (this.slice(0,1) == '#') {
-      if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
-      if (this.length==7) color = this.toLowerCase();
+    if (this.slice(0, 1) == '#') {
+      if (this.length == 4) for (var i = 1; i < 4; i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
+      if (this.length == 7) color = this.toLowerCase();
     }
   }
-  return (color.length==7 ? color : (arguments[0] || this));
+  return (color.length == 7 ? color : (arguments[0] || this));
 };
 
 /*--------------------------------------------------------------------------*/
 
-Element.collectTextNodes = function(element) {
-  return $A($(element).childNodes).collect( function(node) {
-    return (node.nodeType==3 ? node.nodeValue :
-      (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
-  }).flatten().join('');
+Element.collectTextNodes = function (element) {
+  return $A($(element).childNodes).collect(
+    function (node) {
+      return (node.nodeType == 3 ? node.nodeValue :
+        (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
+    }).flatten().join('');
 };
 
-Element.collectTextNodesIgnoreClass = function(element, className) {
-  return $A($(element).childNodes).collect( function(node) {
-    return (node.nodeType==3 ? node.nodeValue :
-      ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
-        Element.collectTextNodesIgnoreClass(node, className) : ''));
-  }).flatten().join('');
+Element.collectTextNodesIgnoreClass = function (element, className) {
+  return $A($(element).childNodes).collect(
+    function (node) {
+      return (node.nodeType == 3 ? node.nodeValue :
+        ((node.hasChildNodes() && !Element.hasClassName(node, className)) ?
+          Element.collectTextNodesIgnoreClass(node, className) : ''));
+    }).flatten().join('');
 };
 
-Element.setContentZoom = function(element, percent) {
+Element.setContentZoom = function (element, percent) {
   element = $(element);
-  element.setStyle({fontSize: (percent/100) + 'em'});
-  if (Prototype.Browser.WebKit) window.scrollBy(0,0);
+  element.setStyle({fontSize:(percent / 100) + 'em'});
+  if (Prototype.Browser.WebKit) window.scrollBy(0, 0);
   return element;
 };
 
-Element.getInlineOpacity = function(element){
+Element.getInlineOpacity = function (element) {
   return $(element).style.opacity || '';
 };
 
-Element.forceRerendering = function(element) {
+Element.forceRerendering = function (element) {
   try {
     element = $(element);
     var n = document.createTextNode(' ');
     element.appendChild(n);
     element.removeChild(n);
-  } catch(e) { }
+  } catch (e) {
+  }
 };
 
 /*--------------------------------------------------------------------------*/
 
 var Effect = {
-  _elementDoesNotExistError: {
-    name: 'ElementDoesNotExistError',
-    message: 'The specified DOM element does not exist, but is required for this effect to operate'
-  },
-  Transitions: {
-    linear: Prototype.K,
-    sinoidal: function(pos) {
-      return (-Math.cos(pos*Math.PI)/2) + .5;
+  _elementDoesNotExistError:{
+    name:'ElementDoesNotExistError',
+    message:'The specified DOM element does not exist, but is required for this effect to operate'
+  },
+  Transitions:{
+    linear:Prototype.K,
+    sinoidal:function (pos) {
+      return (-Math.cos(pos * Math.PI) / 2) + .5;
     },
-    reverse: function(pos) {
-      return 1-pos;
+    reverse:function (pos) {
+      return 1 - pos;
     },
-    flicker: function(pos) {
-      var pos = ((-Math.cos(pos*Math.PI)/4) + .75) + Math.random()/4;
+    flicker:function (pos) {
+      var pos = ((-Math.cos(pos * Math.PI) / 4) + .75) + Math.random() / 4;
       return pos > 1 ? 1 : pos;
     },
-    wobble: function(pos) {
-      return (-Math.cos(pos*Math.PI*(9*pos))/2) + .5;
+    wobble:function (pos) {
+      return (-Math.cos(pos * Math.PI * (9 * pos)) / 2) + .5;
     },
-    pulse: function(pos, pulses) {
-      return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
+    pulse:function (pos, pulses) {
+      return (-Math.cos((pos * ((pulses || 5) - .5) * 2) * Math.PI) / 2) + .5;
     },
-    spring: function(pos) {
+    spring:function (pos) {
       return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
     },
-    none: function(pos) {
+    none:function (pos) {
       return 0;
     },
-    full: function(pos) {
+    full:function (pos) {
       return 1;
     }
   },
-  DefaultOptions: {
-    duration:   1.0,   // seconds
-    fps:        100,   // 100= assume 66fps max.
-    sync:       false, // true for combining
-    from:       0.0,
-    to:         1.0,
-    delay:      0.0,
-    queue:      'parallel'
+  DefaultOptions:{
+    duration:1.0, // seconds
+    fps:100, // 100= assume 66fps max.
+    sync:false, // true for combining
+    from:0.0,
+    to:1.0,
+    delay:0.0,
+    queue:'parallel'
   },
-  tagifyText: function(element) {
+  tagifyText:function (element) {
     var tagifyStyle = 'position:relative';
     if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
 
     element = $(element);
-    $A(element.childNodes).each( function(child) {
-      if (child.nodeType==3) {
-        child.nodeValue.toArray().each( function(character) {
+    $A(element.childNodes).each(function (child) {
+      if (child.nodeType == 3) {
+        child.nodeValue.toArray().each(function (character) {
           element.insertBefore(
-            new Element('span', {style: tagifyStyle}).update(
+            new Element('span', {style:tagifyStyle}).update(
               character == ' ' ? String.fromCharCode(160) : character),
-              child);
+            child);
         });
         Element.remove(child);
       }
     });
   },
-  multiple: function(element, effect) {
+  multiple:function (element, effect) {
     var elements;
     if (((typeof element == 'object') ||
-        Object.isFunction(element)) &&
-       (element.length))
+      Object.isFunction(element)) &&
+      (element.length))
       elements = element;
     else
       elements = $(element).childNodes;
 
     var options = Object.extend({
-      speed: 0.1,
-      delay: 0.0
+      speed:0.1,
+      delay:0.0
     }, arguments[2] || { });
     var masterDelay = options.delay;
 
-    $A(elements).each( function(element, index) {
-      new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
+    $A(elements).each(function (element, index) {
+      new effect(element, Object.extend(options, { delay:index * options.speed + masterDelay }));
     });
   },
-  PAIRS: {
-    'slide':  ['SlideDown','SlideUp'],
-    'blind':  ['BlindDown','BlindUp'],
-    'appear': ['Appear','Fade']
+  PAIRS:{
+    'slide':['SlideDown', 'SlideUp'],
+    'blind':['BlindDown', 'BlindUp'],
+    'appear':['Appear', 'Fade']
   },
-  toggle: function(element, effect, options) {
+  toggle:function (element, effect, options) {
     element = $(element);
-    effect  = (effect || 'appear').toLowerCase();
-    
+    effect = (effect || 'appear').toLowerCase();
+
     return Effect[ Effect.PAIRS[ effect ][ element.visible() ? 1 : 0 ] ](element, Object.extend({
-      queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
+      queue:{ position:'end', scope:(element.id || 'global'), limit:1 }
     }, options || {}));
   }
 };
@@ -298,26 +306,29 @@ Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
 /* ------------- core effects ------------- */
 
 Effect.ScopedQueue = Class.create(Enumerable, {
-  initialize: function() {
-    this.effects  = [];
+  initialize:function () {
+    this.effects = [];
     this.interval = null;
   },
-  _each: function(iterator) {
+  _each:function (iterator) {
     this.effects._each(iterator);
   },
-  add: function(effect) {
+  add:function (effect) {
     var timestamp = new Date().getTime();
 
     var position = Object.isString(effect.options.queue) ?
       effect.options.queue : effect.options.queue.position;
 
-    switch(position) {
+    switch (position) {
       case 'front':
         // move unstarted effects after this effect
-        this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
-            e.startOn  += effect.finishOn;
-            e.finishOn += effect.finishOn;
-          });
+        this.effects.findAll(
+          function (e) {
+            return e.state == 'idle'
+          }).each(function (e) {
+          e.startOn += effect.finishOn;
+          e.finishOn += effect.finishOn;
+        });
         break;
       case 'with-last':
         timestamp = this.effects.pluck('startOn').max() || timestamp;
@@ -328,7 +339,7 @@ Effect.ScopedQueue = Class.create(Enumerable, {
         break;
     }
 
-    effect.startOn  += timestamp;
+    effect.startOn += timestamp;
     effect.finishOn += timestamp;
 
     if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
@@ -337,23 +348,25 @@ Effect.ScopedQueue = Class.create(Enumerable, {
     if (!this.interval)
       this.interval = setInterval(this.loop.bind(this), 15);
   },
-  remove: function(effect) {
-    this.effects = this.effects.reject(function(e) { return e==effect });
+  remove:function (effect) {
+    this.effects = this.effects.reject(function (e) {
+      return e == effect
+    });
     if (this.effects.length == 0) {
       clearInterval(this.interval);
       this.interval = null;
     }
   },
-  loop: function() {
+  loop:function () {
     var timePos = new Date().getTime();
-    for(var i=0, len=this.effects.length;i<len;i++)
+    for (var i = 0, len = this.effects.length; i < len; i++)
       this.effects[i] && this.effects[i].loop(timePos);
   }
 });
 
 Effect.Queues = {
-  instances: $H(),
-  get: function(queueName) {
+  instances:$H(),
+  get:function (queueName) {
     if (!Object.isString(queueName)) return queueName;
 
     return this.instances.get(queueName) ||
@@ -363,19 +376,19 @@ Effect.Queues = {
 Effect.Queue = Effect.Queues.get('global');
 
 Effect.Base = Class.create({
-  position: null,
-  start: function(options) {
+  position:null,
+  start:function (options) {
     if (options && options.transition === false) options.transition = Effect.Transitions.linear;
-    this.options      = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
+    this.options = Object.extend(Object.extend({ }, Effect.DefaultOptions), options || { });
     this.currentFrame = 0;
-    this.state        = 'idle';
-    this.startOn      = this.options.delay*1000;
-    this.finishOn     = this.startOn+(this.options.duration*1000);
-    this.fromToDelta  = this.options.to-this.options.from;
-    this.totalTime    = this.finishOn-this.startOn;
-    this.totalFrames  = this.options.fps*this.options.duration;
-
-    this.render = (function() {
+    this.state = 'idle';
+    this.startOn = this.options.delay * 1000;
+    this.finishOn = this.startOn + (this.options.duration * 1000);
+    this.fromToDelta = this.options.to - this.options.from;
+    this.totalTime = this.finishOn - this.startOn;
+    this.totalFrames = this.options.fps * this.options.duration;
+
+    this.render = (function () {
       function dispatch(effect, eventName) {
         if (effect.options[eventName + 'Internal'])
           effect.options[eventName + 'Internal'](effect);
@@ -383,7 +396,7 @@ Effect.Base = Class.create({
           effect.options[eventName](effect);
       }
 
-      return function(pos) {
+      return function (pos) {
         if (this.state === "idle") {
           this.state = "running";
           dispatch(this, 'beforeSetup');
@@ -405,7 +418,7 @@ Effect.Base = Class.create({
       Effect.Queues.get(Object.isString(this.options.queue) ?
         'global' : this.options.queue.scope).add(this);
   },
-  loop: function(timePos) {
+  loop:function (timePos) {
     if (timePos >= this.startOn) {
       if (timePos >= this.finishOn) {
         this.render(1.0);
@@ -415,42 +428,42 @@ Effect.Base = Class.create({
         this.event('afterFinish');
         return;
       }
-      var pos   = (timePos - this.startOn) / this.totalTime,
-          frame = (pos * this.totalFrames).round();
+      var pos = (timePos - this.startOn) / this.totalTime,
+        frame = (pos * this.totalFrames).round();
       if (frame > this.currentFrame) {
         this.render(pos);
         this.currentFrame = frame;
       }
     }
   },
-  cancel: function() {
+  cancel:function () {
     if (!this.options.sync)
       Effect.Queues.get(Object.isString(this.options.queue) ?
         'global' : this.options.queue.scope).remove(this);
     this.state = 'finished';
   },
-  event: function(eventName) {
+  event:function (eventName) {
     if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
     if (this.options[eventName]) this.options[eventName](this);
   },
-  inspect: function() {
+  inspect:function () {
     var data = $H();
-    for(property in this)
+    for (property in this)
       if (!Object.isFunction(this[property])) data.set(property, this[property]);
     return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
   }
 });
 
 Effect.Parallel = Class.create(Effect.Base, {
-  initialize: function(effects) {
+  initialize:function (effects) {
     this.effects = effects || [];
     this.start(arguments[1]);
   },
-  update: function(position) {
+  update:function (position) {
     this.effects.invoke('render', position);
   },
-  finish: function(position) {
-    this.effects.each( function(effect) {
+  finish:function (position) {
+    this.effects.each(function (effect) {
       effect.render(1.0);
       effect.cancel();
       effect.event('beforeFinish');
@@ -461,144 +474,146 @@ Effect.Parallel = Class.create(Effect.Base, {
 });
 
 Effect.Tween = Class.create(Effect.Base, {
-  initialize: function(object, from, to) {
+  initialize:function (object, from, to) {
     object = Object.isString(object) ? $(object) : object;
     var args = $A(arguments), method = args.last(),
       options = args.length == 5 ? args[3] : null;
     this.method = Object.isFunction(method) ? method.bind(object) :
       Object.isFunction(object[method]) ? object[method].bind(object) :
-      function(value) { object[method] = value };
-    this.start(Object.extend({ from: from, to: to }, options || { }));
+        function (value) {
+          object[method] = value
+        };
+    this.start(Object.extend({ from:from, to:to }, options || { }));
   },
-  update: function(position) {
+  update:function (position) {
     this.method(position);
   }
 });
 
 Effect.Event = Class.create(Effect.Base, {
-  initialize: function() {
-    this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
+  initialize:function () {
+    this.start(Object.extend({ duration:0 }, arguments[0] || { }));
   },
-  update: Prototype.emptyFunction
+  update:Prototype.emptyFunction
 });
 
 Effect.Opacity = Class.create(Effect.Base, {
-  initialize: function(element) {
+  initialize:function (element) {
     this.element = $(element);
     if (!this.element) throw(Effect._elementDoesNotExistError);
     // make this work on IE on elements without 'layout'
     if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
-      this.element.setStyle({zoom: 1});
+      this.element.setStyle({zoom:1});
     var options = Object.extend({
-      from: this.element.getOpacity() || 0.0,
-      to:   1.0
+      from:this.element.getOpacity() || 0.0,
+      to:1.0
     }, arguments[1] || { });
     this.start(options);
   },
-  update: function(position) {
+  update:function (position) {
     this.element.setOpacity(position);
   }
 });
 
 Effect.Move = Class.create(Effect.Base, {
-  initialize: function(element) {
+  initialize:function (element) {
     this.element = $(element);
     if (!this.element) throw(Effect._elementDoesNotExistError);
     var options = Object.extend({
-      x:    0,
-      y:    0,
-      mode: 'relative'
+      x:0,
+      y:0,
+      mode:'relative'
     }, arguments[1] || { });
     this.start(options);
   },
-  setup: function() {
+  setup:function () {
     this.element.makePositioned();
     this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
-    this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
+    this.originalTop = parseFloat(this.element.getStyle('top') || '0');
     if (this.options.mode == 'absolute') {
       this.options.x = this.options.x - this.originalLeft;
       this.options.y = this.options.y - this.originalTop;
     }
   },
-  update: function(position) {
+  update:function (position) {
     this.element.setStyle({
-      left: (this.options.x  * position + this.originalLeft).round() + 'px',
-      top:  (this.options.y  * position + this.originalTop).round()  + 'px'
+      left:(this.options.x * position + this.originalLeft).round() + 'px',
+      top:(this.options.y * position + this.originalTop).round() + 'px'
     });
   }
 });
 
 // for backwards compatibility
-Effect.MoveBy = function(element, toTop, toLeft) {
+Effect.MoveBy = function (element, toTop, toLeft) {
   return new Effect.Move(element,
-    Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
+    Object.extend({ x:toLeft, y:toTop }, arguments[3] || { }));
 };
 
 Effect.Scale = Class.create(Effect.Base, {
-  initialize: function(element, percent) {
+  initialize:function (element, percent) {
     this.element = $(element);
     if (!this.element) throw(Effect._elementDoesNotExistError);
     var options = Object.extend({
-      scaleX: true,
-      scaleY: true,
-      scaleContent: true,
-      scaleFromCenter: false,
-      scaleMode: 'box',        // 'box' or 'contents' or { } with provided values
-      scaleFrom: 100.0,
-      scaleTo:   percent
+      scaleX:true,
+      scaleY:true,
+      scaleContent:true,
+      scaleFromCenter:false,
+      scaleMode:'box', // 'box' or 'contents' or { } with provided values
+      scaleFrom:100.0,
+      scaleTo:percent
     }, arguments[2] || { });
     this.start(options);
   },
-  setup: function() {
+  setup:function () {
     this.restoreAfterFinish = this.options.restoreAfterFinish || false;
     this.elementPositioning = this.element.getStyle('position');
 
     this.originalStyle = { };
-    ['top','left','width','height','fontSize'].each( function(k) {
+    ['top', 'left', 'width', 'height', 'fontSize'].each(function (k) {
       this.originalStyle[k] = this.element.style[k];
     }.bind(this));
 
-    this.originalTop  = this.element.offsetTop;
+    this.originalTop = this.element.offsetTop;
     this.originalLeft = this.element.offsetLeft;
 
     var fontSize = this.element.getStyle('font-size') || '100%';
-    ['em','px','%','pt'].each( function(fontSizeType) {
-      if (fontSize.indexOf(fontSizeType)>0) {
-        this.fontSize     = parseFloat(fontSize);
+    ['em', 'px', '%', 'pt'].each(function (fontSizeType) {
+      if (fontSize.indexOf(fontSizeType) > 0) {
+        this.fontSize = parseFloat(fontSize);
         this.fontSizeType = fontSizeType;
       }
     }.bind(this));
 
-    this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
+    this.factor = (this.options.scaleTo - this.options.scaleFrom) / 100;
 
     this.dims = null;
-    if (this.options.scaleMode=='box')
+    if (this.options.scaleMode == 'box')
       this.dims = [this.element.offsetHeight, this.element.offsetWidth];
     if (/^content/.test(this.options.scaleMode))
       this.dims = [this.element.scrollHeight, this.element.scrollWidth];
     if (!this.dims)
       this.dims = [this.options.scaleMode.originalHeight,
-                   this.options.scaleMode.originalWidth];
+        this.options.scaleMode.originalWidth];
   },
-  update: function(position) {
-    var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
+  update:function (position) {
+    var currentScale = (this.options.scaleFrom / 100.0) + (this.factor * position);
     if (this.options.scaleContent && this.fontSize)
-      this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
+      this.element.setStyle({fontSize:this.fontSize * currentScale + this.fontSizeType });
     this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
   },
-  finish: function(position) {
+  finish:function (position) {
     if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
   },
-  setDimensions: function(height, width) {
+  setDimensions:function (height, width) {
     var d = { };
     if (this.options.scaleX) d.width = width.round() + 'px';
     if (this.options.scaleY) d.height = height.round() + 'px';
     if (this.options.scaleFromCenter) {
-      var topd  = (height - this.dims[0])/2;
-      var leftd = (width  - this.dims[1])/2;
+      var topd = (height - this.dims[0]) / 2;
+      var leftd = (width - this.dims[1]) / 2;
       if (this.elementPositioning == 'absolute') {
-        if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
-        if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
+        if (this.options.scaleY) d.top = this.originalTop - topd + 'px';
+        if (this.options.scaleX) d.left = this.originalLeft - leftd + 'px';
       } else {
         if (this.options.scaleY) d.top = -topd + 'px';
         if (this.options.scaleX) d.left = -leftd + 'px';
@@ -609,44 +624,52 @@ Effect.Scale = Class.create(Effect.Base, {
 });
 
 Effect.Highlight = Class.create(Effect.Base, {
-  initialize: function(element) {
+  initialize:function (element) {
     this.element = $(element);
     if (!this.element) throw(Effect._elementDoesNotExistError);
-    var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { });
+    var options = Object.extend({ startcolor:'#ffff99' }, arguments[1] || { });
     this.start(options);
   },
-  setup: function() {
+  setup:function () {
     // Prevent executing on elements not in the layout flow
-    if (this.element.getStyle('display')=='none') { this.cancel(); return; }
+    if (this.element.getStyle('display') == 'none') {
+      this.cancel();
+      return;
+    }
     // Disable background image during the effect
     this.oldStyle = { };
     if (!this.options.keepBackgroundImage) {
       this.oldStyle.backgroundImage = this.element.getStyle('background-image');
-      this.element.setStyle({backgroundImage: 'none'});
+      this.element.setStyle({backgroundImage:'none'});
     }
     if (!this.options.endcolor)
       this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
     if (!this.options.restorecolor)
       this.options.restorecolor = this.element.getStyle('background-color');
     // init color calculations
-    this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
-    this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
+    this._base = $R(0, 2).map(function (i) {
+      return parseInt(this.options.startcolor.slice(i * 2 + 1, i * 2 + 3), 16)
+    }.bind(this));
+    this._delta = $R(0, 2).map(function (i) {
+      return parseInt(this.options.endcolor.slice(i * 2 + 1, i * 2 + 3), 16) - this._base[i]
+    }.bind(this));
   },
-  update: function(position) {
-    this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
-      return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
+  update:function (position) {
+    this.element.setStyle({backgroundColor:$R(0, 2).inject('#', function (m, v, i) {
+      return m + ((this._base[i] + (this._delta[i] * position)).round().toColorPart());
+    }.bind(this)) });
   },
-  finish: function() {
+  finish:function () {
     this.element.setStyle(Object.extend(this.oldStyle, {
-      backgroundColor: this.options.restorecolor
+      backgroundColor:this.options.restorecolor
     }));
   }
 });
 
-Effect.ScrollTo = function(element) {
+Effect.ScrollTo = function (element) {
   var options = arguments[1] || { },
-  scrollOffsets = document.viewport.getScrollOffsets(),
-  elementOffsets = $(element).cumulativeOffset();
+    scrollOffsets = document.viewport.getScrollOffsets(),
+    elementOffsets = $(element).cumulativeOffset();
 
   if (options.offset) elementOffsets[1] += options.offset;
 
@@ -654,250 +677,257 @@ Effect.ScrollTo = function(element) {
     scrollOffsets.top,
     elementOffsets[1],
     options,
-    function(p){ scrollTo(scrollOffsets.left, p.round()); }
+    function (p) {
+      scrollTo(scrollOffsets.left, p.round());
+    }
   );
 };
 
 /* ------------- combination effects ------------- */
 
-Effect.Fade = function(element) {
+Effect.Fade = function (element) {
   element = $(element);
   var oldOpacity = element.getInlineOpacity();
   var options = Object.extend({
-    from: element.getOpacity() || 1.0,
-    to:   0.0,
-    afterFinishInternal: function(effect) {
-      if (effect.options.to!=0) return;
-      effect.element.hide().setStyle({opacity: oldOpacity});
+    from:element.getOpacity() || 1.0,
+    to:0.0,
+    afterFinishInternal:function (effect) {
+      if (effect.options.to != 0) return;
+      effect.element.hide().setStyle({opacity:oldOpacity});
     }
   }, arguments[1] || { });
-  return new Effect.Opacity(element,options);
+  return new Effect.Opacity(element, options);
 };
 
-Effect.Appear = function(element) {
+Effect.Appear = function (element) {
   element = $(element);
   var options = Object.extend({
-  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
-  to:   1.0,
-  // force Safari to render floated elements properly
-  afterFinishInternal: function(effect) {
-    effect.element.forceRerendering();
-  },
-  beforeSetup: function(effect) {
-    effect.element.setOpacity(effect.options.from).show();
-  }}, arguments[1] || { });
-  return new Effect.Opacity(element,options);
+    from:(element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
+    to:1.0,
+    // force Safari to render floated elements properly
+    afterFinishInternal:function (effect) {
+      effect.element.forceRerendering();
+    },
+    beforeSetup:function (effect) {
+      effect.element.setOpacity(effect.options.from).show();
+    }}, arguments[1] || { });
+  return new Effect.Opacity(element, options);
 };
 
-Effect.Puff = function(element) {
+Effect.Puff = function (element) {
   element = $(element);
   var oldStyle = {
-    opacity: element.getInlineOpacity(),
-    position: element.getStyle('position'),
-    top:  element.style.top,
-    left: element.style.left,
-    width: element.style.width,
-    height: element.style.height
+    opacity:element.getInlineOpacity(),
+    position:element.getStyle('position'),
+    top:element.style.top,
+    left:element.style.left,
+    width:element.style.width,
+    height:element.style.height
   };
   return new Effect.Parallel(
-   [ new Effect.Scale(element, 200,
-      { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
-     new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
-     Object.extend({ duration: 1.0,
-      beforeSetupInternal: function(effect) {
+    [ new Effect.Scale(element, 200,
+      { sync:true, scaleFromCenter:true, scaleContent:true, restoreAfterFinish:true }),
+      new Effect.Opacity(element, { sync:true, to:0.0 }) ],
+    Object.extend({ duration:1.0,
+      beforeSetupInternal:function (effect) {
         Position.absolutize(effect.effects[0].element);
       },
-      afterFinishInternal: function(effect) {
-         effect.effects[0].element.hide().setStyle(oldStyle); }
-     }, arguments[1] || { })
-   );
+      afterFinishInternal:function (effect) {
+        effect.effects[0].element.hide().setStyle(oldStyle);
+      }
+    }, arguments[1] || { })
+  );
 };
 
-Effect.BlindUp = function(element) {
+Effect.BlindUp = function (element) {
   element = $(element);
   element.makeClipping();
   return new Effect.Scale(element, 0,
-    Object.extend({ scaleContent: false,
-      scaleX: false,
-      restoreAfterFinish: true,
-      afterFinishInternal: function(effect) {
+    Object.extend({ scaleContent:false,
+      scaleX:false,
+      restoreAfterFinish:true,
+      afterFinishInternal:function (effect) {
         effect.element.hide().undoClipping();
       }
     }, arguments[1] || { })
   );
 };
 
-Effect.BlindDown = function(element) {
+Effect.BlindDown = function (element) {
   element = $(element);
   var elementDimensions = element.getDimensions();
   return new Effect.Scale(element, 100, Object.extend({
-    scaleContent: false,
-    scaleX: false,
-    scaleFrom: 0,
-    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
-    restoreAfterFinish: true,
-    afterSetup: function(effect) {
-      effect.element.makeClipping().setStyle({height: '0px'}).show();
+    scaleContent:false,
+    scaleX:false,
+    scaleFrom:0,
+    scaleMode:{originalHeight:elementDimensions.height, originalWidth:elementDimensions.width},
+    restoreAfterFinish:true,
+    afterSetup:function (effect) {
+      effect.element.makeClipping().setStyle({height:'0px'}).show();
     },
-    afterFinishInternal: function(effect) {
+    afterFinishInternal:function (effect) {
       effect.element.undoClipping();
     }
   }, arguments[1] || { }));
 };
 
-Effect.SwitchOff = function(element) {
+Effect.SwitchOff = function (element) {
   element = $(element);
   var oldOpacity = element.getInlineOpacity();
   return new Effect.Appear(element, Object.extend({
-    duration: 0.4,
-    from: 0,
-    transition: Effect.Transitions.flicker,
-    afterFinishInternal: function(effect) {
+    duration:0.4,
+    from:0,
+    transition:Effect.Transitions.flicker,
+    afterFinishInternal:function (effect) {
       new Effect.Scale(effect.element, 1, {
-        duration: 0.3, scaleFromCenter: true,
-        scaleX: false, scaleContent: false, restoreAfterFinish: true,
-        beforeSetup: function(effect) {
+        duration:0.3, scaleFromCenter:true,
+        scaleX:false, scaleContent:false, restoreAfterFinish:true,
+        beforeSetup:function (effect) {
           effect.element.makePositioned().makeClipping();
         },
-        afterFinishInternal: function(effect) {
-          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
+        afterFinishInternal:function (effect) {
+          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity:oldOpacity});
         }
       });
     }
   }, arguments[1] || { }));
 };
 
-Effect.DropOut = function(element) {
+Effect.DropOut = function (element) {
   element = $(element);
   var oldStyle = {
-    top: element.getStyle('top'),
-    left: element.getStyle('left'),
-    opacity: element.getInlineOpacity() };
+    top:element.getStyle('top'),
+    left:element.getStyle('left'),
+    opacity:element.getInlineOpacity() };
   return new Effect.Parallel(
-    [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
-      new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
+    [ new Effect.Move(element, {x:0, y:100, sync:true }),
+      new Effect.Opacity(element, { sync:true, to:0.0 }) ],
     Object.extend(
-      { duration: 0.5,
-        beforeSetup: function(effect) {
+      { duration:0.5,
+        beforeSetup:function (effect) {
           effect.effects[0].element.makePositioned();
         },
-        afterFinishInternal: function(effect) {
+        afterFinishInternal:function (effect) {
           effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
         }
       }, arguments[1] || { }));
 };
 
-Effect.Shake = function(element) {
+Effect.Shake = function (element) {
   element = $(element);
   var options = Object.extend({
-    distance: 20,
-    duration: 0.5
+    distance:20,
+    duration:0.5
   }, arguments[1] || {});
   var distance = parseFloat(options.distance);
   var split = parseFloat(options.duration) / 10.0;
   var oldStyle = {
-    top: element.getStyle('top'),
-    left: element.getStyle('left') };
-    return new Effect.Move(element,
-      { x:  distance, y: 0, duration: split, afterFinishInternal: function(effect) {
-    new Effect.Move(effect.element,
-      { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
-    new Effect.Move(effect.element,
-      { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
-    new Effect.Move(effect.element,
-      { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
-    new Effect.Move(effect.element,
-      { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
-    new Effect.Move(effect.element,
-      { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
-        effect.element.undoPositioned().setStyle(oldStyle);
-  }}); }}); }}); }}); }}); }});
+    top:element.getStyle('top'),
+    left:element.getStyle('left') };
+  return new Effect.Move(element,
+    { x:distance, y:0, duration:split, afterFinishInternal:function (effect) {
+      new Effect.Move(effect.element,
+        { x:-distance * 2, y:0, duration:split * 2, afterFinishInternal:function (effect) {
+          new Effect.Move(effect.element,
+            { x:distance * 2, y:0, duration:split * 2, afterFinishInternal:function (effect) {
+              new Effect.Move(effect.element,
+                { x:-distance * 2, y:0, duration:split * 2, afterFinishInternal:function (effect) {
+                  new Effect.Move(effect.element,
+                    { x:distance * 2, y:0, duration:split * 2, afterFinishInternal:function (effect) {
+                      new Effect.Move(effect.element,
+                        { x:-distance, y:0, duration:split, afterFinishInternal:function (effect) {
+                          effect.element.undoPositioned().setStyle(oldStyle);
+                        }});
+                    }});
+                }});
+            }});
+        }});
+    }});
 };
 
-Effect.SlideDown = function(element) {
+Effect.SlideDown = function (element) {
   element = $(element).cleanWhitespace();
   // SlideDown need to have the content of the element wrapped in a container element with fixed height!
   var oldInnerBottom = element.down().getStyle('bottom');
   var elementDimensions = element.getDimensions();
   return new Effect.Scale(element, 100, Object.extend({
-    scaleContent: false,
-    scaleX: false,
-    scaleFrom: window.opera ? 0 : 1,
-    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
-    restoreAfterFinish: true,
-    afterSetup: function(effect) {
+    scaleContent:false,
+    scaleX:false,
+    scaleFrom:window.opera ? 0 : 1,
+    scaleMode:{originalHeight:elementDimensions.height, originalWidth:elementDimensions.width},
+    restoreAfterFinish:true,
+    afterSetup:function (effect) {
       effect.element.makePositioned();
       effect.element.down().makePositioned();
-      if (window.opera) effect.element.setStyle({top: ''});
-      effect.element.makeClipping().setStyle({height: '0px'}).show();
+      if (window.opera) effect.element.setStyle({top:''});
+      effect.element.makeClipping().setStyle({height:'0px'}).show();
     },
-    afterUpdateInternal: function(effect) {
-      effect.element.down().setStyle({bottom:
-        (effect.dims[0] - effect.element.clientHeight) + 'px' });
+    afterUpdateInternal:function (effect) {
+      effect.element.down().setStyle({bottom:(effect.dims[0] - effect.element.clientHeight) + 'px' });
     },
-    afterFinishInternal: function(effect) {
+    afterFinishInternal:function (effect) {
       effect.element.undoClipping().undoPositioned();
-      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
-    }, arguments[1] || { })
+      effect.element.down().undoPositioned().setStyle({bottom:oldInnerBottom});
+    }
+  }, arguments[1] || { })
   );
 };
 
-Effect.SlideUp = function(element) {
+Effect.SlideUp = function (element) {
   element = $(element).cleanWhitespace();
   var oldInnerBottom = element.down().getStyle('bottom');
   var elementDimensions = element.getDimensions();
   return new Effect.Scale(element, window.opera ? 0 : 1,
-   Object.extend({ scaleContent: false,
-    scaleX: false,
-    scaleMode: 'box',
-    scaleFrom: 100,
-    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
-    restoreAfterFinish: true,
-    afterSetup: function(effect) {
-      effect.element.makePositioned();
-      effect.element.down().makePositioned();
-      if (window.opera) effect.element.setStyle({top: ''});
-      effect.element.makeClipping().show();
-    },
-    afterUpdateInternal: function(effect) {
-      effect.element.down().setStyle({bottom:
-        (effect.dims[0] - effect.element.clientHeight) + 'px' });
-    },
-    afterFinishInternal: function(effect) {
-      effect.element.hide().undoClipping().undoPositioned();
-      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
-    }
-   }, arguments[1] || { })
+    Object.extend({ scaleContent:false,
+      scaleX:false,
+      scaleMode:'box',
+      scaleFrom:100,
+      scaleMode:{originalHeight:elementDimensions.height, originalWidth:elementDimensions.width},
+      restoreAfterFinish:true,
+      afterSetup:function (effect) {
+        effect.element.makePositioned();
+        effect.element.down().makePositioned();
+        if (window.opera) effect.element.setStyle({top:''});
+        effect.element.makeClipping().show();
+      },
+      afterUpdateInternal:function (effect) {
+        effect.element.down().setStyle({bottom:(effect.dims[0] - effect.element.clientHeight) + 'px' });
+      },
+      afterFinishInternal:function (effect) {
+        effect.element.hide().undoClipping().undoPositioned();
+        effect.element.down().undoPositioned().setStyle({bottom:oldInnerBottom});
+      }
+    }, arguments[1] || { })
   );
 };
 
 // Bug in opera makes the TD containing this element expand for a instance after finish
-Effect.Squish = function(element) {
+Effect.Squish = function (element) {
   return new Effect.Scale(element, window.opera ? 1 : 0, {
-    restoreAfterFinish: true,
-    beforeSetup: function(effect) {
+    restoreAfterFinish:true,
+    beforeSetup:function (effect) {
       effect.element.makeClipping();
     },
-    afterFinishInternal: function(effect) {
+    afterFinishInternal:function (effect) {
       effect.element.hide().undoClipping();
     }
   });
 };
 
-Effect.Grow = function(element) {
+Effect.Grow = function (element) {
   element = $(element);
   var options = Object.extend({
-    direction: 'center',
-    moveTransition: Effect.Transitions.sinoidal,
-    scaleTransition: Effect.Transitions.sinoidal,
-    opacityTransition: Effect.Transitions.full
+    direction:'center',
+    moveTransition:Effect.Transitions.sinoidal,
+    scaleTransition:Effect.Transitions.sinoidal,
+    opacityTransition:Effect.Transitions.full
   }, arguments[1] || { });
   var oldStyle = {
-    top: element.style.top,
-    left: element.style.left,
-    height: element.style.height,
-    width: element.style.width,
-    opacity: element.getInlineOpacity() };
+    top:element.style.top,
+    left:element.style.left,
+    height:element.style.height,
+    width:element.style.width,
+    opacity:element.getInlineOpacity() };
 
   var dims = element.getDimensions();
   var initialMoveX, initialMoveY;
@@ -932,46 +962,46 @@ Effect.Grow = function(element) {
   }
 
   return new Effect.Move(element, {
-    x: initialMoveX,
-    y: initialMoveY,
-    duration: 0.01,
-    beforeSetup: function(effect) {
+    x:initialMoveX,
+    y:initialMoveY,
+    duration:0.01,
+    beforeSetup:function (effect) {
       effect.element.hide().makeClipping().makePositioned();
     },
-    afterFinishInternal: function(effect) {
+    afterFinishInternal:function (effect) {
       new Effect.Parallel(
-        [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
-          new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
+        [ new Effect.Opacity(effect.element, { sync:true, to:1.0, from:0.0, transition:options.opacityTransition }),
+          new Effect.Move(effect.element, { x:moveX, y:moveY, sync:true, transition:options.moveTransition }),
           new Effect.Scale(effect.element, 100, {
-            scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
-            sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
+            scaleMode:{ originalHeight:dims.height, originalWidth:dims.width },
+            sync:true, scaleFrom:window.opera ? 1 : 0, transition:options.scaleTransition, restoreAfterFinish:true})
         ], Object.extend({
-             beforeSetup: function(effect) {
-               effect.effects[0].element.setStyle({height: '0px'}).show();
-             },
-             afterFinishInternal: function(effect) {
-               effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
-             }
-           }, options)
+          beforeSetup:function (effect) {
+            effect.effects[0].element.setStyle({height:'0px'}).show();
+          },
+          afterFinishInternal:function (effect) {
+            effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
+          }
+        }, options)
       );
     }
   });
 };
 
-Effect.Shrink = function(element) {
+Effect.Shrink = function (element) {
   element = $(element);
   var options = Object.extend({
-    direction: 'center',
-    moveTransition: Effect.Transitions.sinoidal,
-    scaleTransition: Effect.Transitions.sinoidal,
-    opacityTransition: Effect.Transitions.none
+    direction:'center',
+    moveTransition:Effect.Transitions.sinoidal,
+    scaleTransition:Effect.Transitions.sinoidal,
+    opacityTransition:Effect.Transitions.none
   }, arguments[1] || { });
   var oldStyle = {
-    top: element.style.top,
-    left: element.style.left,
-    height: element.style.height,
-    width: element.style.width,
-    opacity: element.getInlineOpacity() };
+    top:element.style.top,
+    left:element.style.left,
+    height:element.style.height,
+    width:element.style.width,
+    opacity:element.getInlineOpacity() };
 
   var dims = element.getDimensions();
   var moveX, moveY;
@@ -999,61 +1029,64 @@ Effect.Shrink = function(element) {
   }
 
   return new Effect.Parallel(
-    [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
-      new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
-      new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
+    [ new Effect.Opacity(element, { sync:true, to:0.0, from:1.0, transition:options.opacityTransition }),
+      new Effect.Scale(element, window.opera ? 1 : 0, { sync:true, transition:options.scaleTransition, restoreAfterFinish:true}),
+      new Effect.Move(element, { x:moveX, y:moveY, sync:true, transition:options.moveTransition })
     ], Object.extend({
-         beforeStartInternal: function(effect) {
-           effect.effects[0].element.makePositioned().makeClipping();
-         },
-         afterFinishInternal: function(effect) {
-           effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
-       }, options)
+      beforeStartInternal:function (effect) {
+        effect.effects[0].element.makePositioned().makeClipping();
+      },
+      afterFinishInternal:function (effect) {
+        effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle);
+      }
+    }, options)
   );
 };
 
-Effect.Pulsate = function(element) {
+Effect.Pulsate = function (element) {
   element = $(element);
-  var options    = arguments[1] || { },
+  var options = arguments[1] || { },
     oldOpacity = element.getInlineOpacity(),
     transition = options.transition || Effect.Transitions.linear,
-    reverser   = function(pos){
-      return 1 - transition((-Math.cos((pos*(options.pulses||5)*2)*Math.PI)/2) + .5);
+    reverser = function (pos) {
+      return 1 - transition((-Math.cos((pos * (options.pulses || 5) * 2) * Math.PI) / 2) + .5);
     };
 
   return new Effect.Opacity(element,
-    Object.extend(Object.extend({  duration: 2.0, from: 0,
-      afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
-    }, options), {transition: reverser}));
+    Object.extend(Object.extend({  duration:2.0, from:0,
+      afterFinishInternal:function (effect) {
+        effect.element.setStyle({opacity:oldOpacity});
+      }
+    }, options), {transition:reverser}));
 };
 
-Effect.Fold = function(element) {
+Effect.Fold = function (element) {
   element = $(element);
   var oldStyle = {
-    top: element.style.top,
-    left: element.style.left,
-    width: element.style.width,
-    height: element.style.height };
+    top:element.style.top,
+    left:element.style.left,
+    width:element.style.width,
+    height:element.style.height };
   element.makeClipping();
   return new Effect.Scale(element, 5, Object.extend({
-    scaleContent: false,
-    scaleX: false,
-    afterFinishInternal: function(effect) {
-    new Effect.Scale(element, 1, {
-      scaleContent: false,
-      scaleY: false,
-      afterFinishInternal: function(effect) {
-        effect.element.hide().undoClipping().setStyle(oldStyle);
-      } });
-  }}, arguments[1] || { }));
+    scaleContent:false,
+    scaleX:false,
+    afterFinishInternal:function (effect) {
+      new Effect.Scale(element, 1, {
+        scaleContent:false,
+        scaleY:false,
+        afterFinishInternal:function (effect) {
+          effect.element.hide().undoClipping().setStyle(oldStyle);
+        } });
+    }}, arguments[1] || { }));
 };
 
 Effect.Morph = Class.create(Effect.Base, {
-  initialize: function(element) {
+  initialize:function (element) {
     this.element = $(element);
     if (!this.element) throw(Effect._elementDoesNotExistError);
     var options = Object.extend({
-      style: { }
+      style:{ }
     }, arguments[1] || { });
 
     if (!Object.isString(options.style)) this.style = $H(options.style);
@@ -1065,12 +1098,12 @@ Effect.Morph = Class.create(Effect.Base, {
         this.style = $H(this.element.getStyles());
         this.element.removeClassName(options.style);
         var css = this.element.getStyles();
-        this.style = this.style.reject(function(style) {
+        this.style = this.style.reject(function (style) {
           return style.value == css[style.key];
         });
-        options.afterFinishInternal = function(effect) {
+        options.afterFinishInternal = function (effect) {
           effect.element.addClassName(effect.options.style);
-          effect.transforms.each(function(transform) {
+          effect.transforms.each(function (transform) {
             effect.element.style[transform.style] = '';
           });
         };
@@ -1079,90 +1112,94 @@ Effect.Morph = Class.create(Effect.Base, {
     this.start(options);
   },
 
-  setup: function(){
-    function parseColor(color){
-      if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
+  setup:function () {
+    function parseColor(color) {
+      if (!color || ['rgba(0, 0, 0, 0)', 'transparent'].include(color)) color = '#ffffff';
       color = color.parseColor();
-      return $R(0,2).map(function(i){
-        return parseInt( color.slice(i*2+1,i*2+3), 16 );
+      return $R(0, 2).map(function (i) {
+        return parseInt(color.slice(i * 2 + 1, i * 2 + 3), 16);
       });
     }
-    this.transforms = this.style.map(function(pair){
+
+    this.transforms = this.style.map(function (pair) {
       var property = pair[0], value = pair[1], unit = null;
 
       if (value.parseColor('#zzzzzz') != '#zzzzzz') {
         value = value.parseColor();
-        unit  = 'color';
+        unit = 'color';
       } else if (property == 'opacity') {
         value = parseFloat(value);
         if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
-          this.element.setStyle({zoom: 1});
+          this.element.setStyle({zoom:1});
       } else if (Element.CSS_LENGTH.test(value)) {
-          var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
-          value = parseFloat(components[1]);
-          unit = (components.length == 3) ? components[2] : null;
+        var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
+        value = parseFloat(components[1]);
+        unit = (components.length == 3) ? components[2] : null;
       }
 
       var originalValue = this.element.getStyle(property);
       return {
-        style: property.camelize(),
-        originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
-        targetValue: unit=='color' ? parseColor(value) : value,
-        unit: unit
+        style:property.camelize(),
+        originalValue:unit == 'color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
+        targetValue:unit == 'color' ? parseColor(value) : value,
+        unit:unit
       };
-    }.bind(this)).reject(function(transform){
-      return (
-        (transform.originalValue == transform.targetValue) ||
-        (
-          transform.unit != 'color' &&
-          (isNaN(transform.originalValue) || isNaN(transform.targetValue))
-        )
-      );
-    });
+    }.bind(this)).reject(function (transform) {
+        return (
+          (transform.originalValue == transform.targetValue) ||
+            (
+              transform.unit != 'color' &&
+                (isNaN(transform.originalValue) || isNaN(transform.targetValue))
+              )
+          );
+      });
   },
-  update: function(position) {
+  update:function (position) {
     var style = { }, transform, i = this.transforms.length;
-    while(i--)
+    while (i--)
       style[(transform = this.transforms[i]).style] =
-        transform.unit=='color' ? '#'+
-          (Math.round(transform.originalValue[0]+
-            (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
-          (Math.round(transform.originalValue[1]+
-            (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
-          (Math.round(transform.originalValue[2]+
-            (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
-        (transform.originalValue +
-          (transform.targetValue - transform.originalValue) * position).toFixed(3) +
+        transform.unit == 'color' ? '#' +
+          (Math.round(transform.originalValue[0] +
+            (transform.targetValue[0] - transform.originalValue[0]) * position)).toColorPart() +
+          (Math.round(transform.originalValue[1] +
+            (transform.targetValue[1] - transform.originalValue[1]) * position)).toColorPart() +
+          (Math.round(transform.originalValue[2] +
+            (transform.targetValue[2] - transform.originalValue[2]) * position)).toColorPart() :
+          (transform.originalValue +
+            (transform.targetValue - transform.originalValue) * position).toFixed(3) +
             (transform.unit === null ? '' : transform.unit);
     this.element.setStyle(style, true);
   }
 });
 
 Effect.Transform = Class.create({
-  initialize: function(tracks){
-    this.tracks  = [];
+  initialize:function (tracks) {
+    this.tracks = [];
     this.options = arguments[1] || { };
     this.addTracks(tracks);
   },
-  addTracks: function(tracks){
-    tracks.each(function(track){
+  addTracks:function (tracks) {
+    tracks.each(function (track) {
       track = $H(track);
       var data = track.values().first();
       this.tracks.push($H({
-        ids:     track.keys().first(),
-        effect:  Effect.Morph,
-        options: { style: data }
+        ids:track.keys().first(),
+        effect:Effect.Morph,
+        options:{ style:data }
       }));
     }.bind(this));
     return this;
   },
-  play: function(){
+  play:function () {
     return new Effect.Parallel(
-      this.tracks.map(function(track){
-        var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
-        var elements = [$(ids) || $$(ids)].flatten();
-        return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
-      }).flatten(),
+      this.tracks.map(
+        function (track) {
+          var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
+          var elements = [$(ids) || $$(ids)].flatten();
+          return elements.map(function (e) {
+            return new effect(e, Object.extend({ sync:true }, options))
+          });
+        }).flatten(),
       this.options
     );
   }
@@ -1170,28 +1207,28 @@ Effect.Transform = Class.create({
 
 Element.CSS_PROPERTIES = $w(
   'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
-  'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
-  'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
-  'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
-  'fontSize fontWeight height left letterSpacing lineHeight ' +
-  'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
-  'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
-  'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
-  'right textIndent top width wordSpacing zIndex');
+    'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
+    'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
+    'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
+    'fontSize fontWeight height left letterSpacing lineHeight ' +
+    'marginBottom marginLeft marginRight marginTop markerOffset maxHeight ' +
+    'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
+    'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
+    'right textIndent top width wordSpacing zIndex');
 
 Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
 
 String.__parseStyleElement = document.createElement('div');
-String.prototype.parseStyle = function(){
+String.prototype.parseStyle = function () {
   var style, styleRules = $H();
   if (Prototype.Browser.WebKit)
-    style = new Element('div',{style:this}).style;
+    style = new Element('div', {style:this}).style;
   else {
     String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
     style = String.__parseStyleElement.childNodes[0].style;
   }
 
-  Element.CSS_PROPERTIES.each(function(property){
+  Element.CSS_PROPERTIES.each(function (property) {
     if (style[property]) styleRules.set(property, style[property]);
   });
 
@@ -1202,18 +1239,18 @@ String.prototype.parseStyle = function(){
 };
 
 if (document.defaultView && document.defaultView.getComputedStyle) {
-  Element.getStyles = function(element) {
+  Element.getStyles = function (element) {
     var css = document.defaultView.getComputedStyle($(element), null);
-    return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
+    return Element.CSS_PROPERTIES.inject({ }, function (styles, property) {
       styles[property] = css[property];
       return styles;
     });
   };
 } else {
-  Element.getStyles = function(element) {
+  Element.getStyles = function (element) {
     element = $(element);
     var css = element.currentStyle, styles;
-    styles = Element.CSS_PROPERTIES.inject({ }, function(results, property) {
+    styles = Element.CSS_PROPERTIES.inject({ }, function (results, property) {
       results[property] = css[property];
       return results;
     });
@@ -1223,28 +1260,28 @@ if (document.defaultView && document.defaultView.getComputedStyle) {
 }
 
 Effect.Methods = {
-  morph: function(element, style) {
+  morph:function (element, style) {
     element = $(element);
-    new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
+    new Effect.Morph(element, Object.extend({ style:style }, arguments[2] || { }));
     return element;
   },
-  visualEffect: function(element, effect, options) {
+  visualEffect:function (element, effect, options) {
     element = $(element);
     var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
     new Effect[klass](element, options);
     return element;
   },
-  highlight: function(element, options) {
+  highlight:function (element, options) {
     element = $(element);
     new Effect.Highlight(element, options);
     return element;
   }
 };
 
-$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
+$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown ' +
   'pulsate shake puff squish switchOff dropOut').each(
-  function(effect) {
-    Effect.Methods[effect] = function(element, options){
+  function (effect) {
+    Effect.Methods[effect] = function (element, options) {
       element = $(element);
       Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
       return element;
@@ -1253,7 +1290,9 @@ $w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
 );
 
 $w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
-  function(f) { Effect.Methods[f] = Element[f]; }
+  function (f) {
+    Effect.Methods[f] = Element[f];
+  }
 );
 
 Element.addMethods(Effect.Methods);
@@ -1296,46 +1335,48 @@ Element.addMethods(Effect.Methods);
 // useful when one of the tokens is \n (a newline), as it
 // allows smart autocompletion after linebreaks.
 
-if(typeof Effect == 'undefined')
+if (typeof Effect == 'undefined')
   throw("controls.js requires including script.aculo.us' effects.js library");
 
 var Autocompleter = { };
 Autocompleter.Base = Class.create({
-  baseInitialize: function(element, update, options) {
-    element          = $(element);
-    this.element     = element;
-    this.update      = $(update);
-    this.hasFocus    = false;
-    this.changed     = false;
-    this.active      = false;
-    this.index       = 0;
-    this.entryCount  = 0;
+  baseInitialize:function (element, update, options) {
+    element = $(element);
+    this.element = element;
+    this.update = $(update);
+    this.hasFocus = false;
+    this.changed = false;
+    this.active = false;
+    this.index = 0;
+    this.entryCount = 0;
     this.oldElementValue = this.element.value;
 
-    if(this.setOptions)
+    if (this.setOptions)
       this.setOptions(options);
     else
       this.options = options || { };
 
-    this.options.paramName    = this.options.paramName || this.element.name;
-    this.options.tokens       = this.options.tokens || [];
-    this.options.frequency    = this.options.frequency || 0.4;
-    this.options.minChars     = this.options.minChars || 1;
-    this.options.onShow       = this.options.onShow ||
-      function(element, update){
-        if(!update.style.position || update.style.position=='absolute') {
+    this.options.paramName = this.options.paramName || this.element.name;
+    this.options.tokens = this.options.tokens || [];
+    this.options.frequency = this.options.frequency || 0.4;
+    this.options.minChars = this.options.minChars || 1;
+    this.options.onShow = this.options.onShow ||
+      function (element, update) {
+        if (!update.style.position || update.style.position == 'absolute') {
           update.style.position = 'absolute';
           Position.clone(element, update, {
-            setHeight: false,
-            offsetTop: element.offsetHeight
+            setHeight:false,
+            offsetTop:element.offsetHeight
           });
         }
-        Effect.Appear(update,{duration:0.15});
+        Effect.Appear(update, {duration:0.15});
       };
     this.options.onHide = this.options.onHide ||
-      function(element, update){ new Effect.Fade(update,{duration:0.15}) };
+      function (element, update) {
+        new Effect.Fade(update, {duration:0.15})
+      };
 
-    if(typeof(this.options.tokens) == 'string')
+    if (typeof(this.options.tokens) == 'string')
       this.options.tokens = new Array(this.options.tokens);
     // Force carriage returns as token delimiters anyway
     if (!this.options.tokens.include('\n'))
@@ -1343,7 +1384,7 @@ Autocompleter.Base = Class.create({
 
     this.observer = null;
 
-    this.element.setAttribute('autocomplete','off');
+    this.element.setAttribute('autocomplete', 'off');
 
     Element.hide(this.update);
 
@@ -1351,116 +1392,115 @@ Autocompleter.Base = Class.create({
     Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
   },
 
-  show: function() {
-    if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
-    if(!this.iefix &&
+  show:function () {
+    if (Element.getStyle(this.update, 'display') == 'none') this.options.onShow(this.element, this.update);
+    if (!this.iefix &&
       (Prototype.Browser.IE) &&
-      (Element.getStyle(this.update, 'position')=='absolute')) {
+      (Element.getStyle(this.update, 'position') == 'absolute')) {
       new Insertion.After(this.update,
-       '<iframe id="' + this.update.id + '_iefix" '+
-       'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
-       'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
-      this.iefix = $(this.update.id+'_iefix');
+        '<iframe id="' + this.update.id + '_iefix" ' +
+          'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
+          'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
+      this.iefix = $(this.update.id + '_iefix');
     }
-    if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
+    if (this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
   },
 
-  fixIEOverlapping: function() {
+  fixIEOverlapping:function () {
     Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});
     this.iefix.style.zIndex = 1;
     this.update.style.zIndex = 2;
     Element.show(this.iefix);
   },
 
-  hide: function() {
+  hide:function () {
     this.stopIndicator();
-    if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
-    if(this.iefix) Element.hide(this.iefix);
-  },
-
-  startIndicator: function() {
-    if(this.options.indicator) Element.show(this.options.indicator);
-  },
-
-  stopIndicator: function() {
-    if(this.options.indicator) Element.hide(this.options.indicator);
-  },
-
-  onKeyPress: function(event) {
-    if(this.active)
-      switch(event.keyCode) {
-       case Event.KEY_TAB:
-       case Event.KEY_RETURN:
-         this.selectEntry();
-         Event.stop(event);
-       case Event.KEY_ESC:
-         this.hide();
-         this.active = false;
-         Event.stop(event);
-         return;
-       case Event.KEY_LEFT:
-       case Event.KEY_RIGHT:
-         return;
-       case Event.KEY_UP:
-         this.markPrevious();
-         this.render();
-         Event.stop(event);
-         return;
-       case Event.KEY_DOWN:
-         this.markNext();
-         this.render();
-         Event.stop(event);
-         return;
+    if (Element.getStyle(this.update, 'display') != 'none') this.options.onHide(this.element, this.update);
+    if (this.iefix) Element.hide(this.iefix);
+  },
+
+  startIndicator:function () {
+    if (this.options.indicator) Element.show(this.options.indicator);
+  },
+
+  stopIndicator:function () {
+    if (this.options.indicator) Element.hide(this.options.indicator);
+  },
+
+  onKeyPress:function (event) {
+    if (this.active)
+      switch (event.keyCode) {
+        case Event.KEY_TAB:
+        case Event.KEY_RETURN:
+          this.selectEntry();
+          Event.stop(event);
+        case Event.KEY_ESC:
+          this.hide();
+          this.active = false;
+          Event.stop(event);
+          return;
+        case Event.KEY_LEFT:
+        case Event.KEY_RIGHT:
+          return;
+        case Event.KEY_UP:
+          this.markPrevious();
+          this.render();
+          Event.stop(event);
+          return;
+        case Event.KEY_DOWN:
+          this.markNext();
+          this.render();
+          Event.stop(event);
+          return;
       }
-     else
-       if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
-         (Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
+    else
+    if (event.keyCode == Event.KEY_TAB || event.keyCode == Event.KEY_RETURN ||
+      (Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
 
     this.changed = true;
     this.hasFocus = true;
 
-    if(this.observer) clearTimeout(this.observer);
-      this.observer =
-        setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
+    if (this.observer) clearTimeout(this.observer);
+    this.observer =
+      setTimeout(this.onObserverEvent.bind(this), this.options.frequency * 1000);
   },
 
-  activate: function() {
+  activate:function () {
     this.changed = false;
     this.hasFocus = true;
     this.getUpdatedChoices();
   },
 
-  onHover: function(event) {
+  onHover:function (event) {
     var element = Event.findElement(event, 'LI');
-    if(this.index != element.autocompleteIndex)
-    {
-        this.index = element.autocompleteIndex;
-        this.render();
+    if (this.index != element.autocompleteIndex) {
+      this.index = element.autocompleteIndex;
+      this.render();
     }
     Event.stop(event);
   },
 
-  onClick: function(event) {
+  onClick:function (event) {
     var element = Event.findElement(event, 'LI');
     this.index = element.autocompleteIndex;
     this.selectEntry();
     this.hide();
   },
 
-  onBlur: function(event) {
+  onBlur:function (event) {
     // needed to make click events working
     setTimeout(this.hide.bind(this), 250);
     this.hasFocus = false;
     this.active = false;
   },
 
-  render: function() {
-    if(this.entryCount > 0) {
+  render:function () {
+    if (this.entryCount > 0) {
       for (var i = 0; i < this.entryCount; i++)
-        this.index==i ?
-          Element.addClassName(this.getEntry(i),"selected") :
-          Element.removeClassName(this.getEntry(i),"selected");
-      if(this.hasFocus) {
+        this.index == i ?
+          Element.addClassName(this.getEntry(i), "selected") :
+          Element.removeClassName(this.getEntry(i), "selected");
+      if (this.hasFocus) {
         this.show();
         this.active = true;
       }
@@ -1470,32 +1510,52 @@ Autocompleter.Base = Class.create({
     }
   },
 
-  markPrevious: function() {
-    if(this.index > 0) this.index--;
-      else this.index = this.entryCount-1;
-    this.getEntry(this.index).scrollIntoView(true);
+  // Patched with http://www.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/
+  markPrevious:function () {
+    if (this.index > 0) {
+      this.index--;
+    }
+    else {
+      this.index = this.entryCount - 1;
+      this.update.scrollTop = this.update.scrollHeight;
+    }
+    selection = this.getEntry(this.index);
+    selection_top = selection.offsetTop;
+    if (selection_top < this.update.scrollTop) {
+      this.update.scrollTop = this.update.scrollTop - selection.offsetHeight;
+    }
   },
 
-  markNext: function() {
-    if(this.index < this.entryCount-1) this.index++;
-      else this.index = 0;
-    this.getEntry(this.index).scrollIntoView(false);
+  // Patched with http://www.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/
+  markNext:function () {
+    if (this.index < this.entryCount - 1) {
+      this.index++;
+    }
+    else {
+      this.index = 0;
+      this.update.scrollTop = 0;
+    }
+    selection = this.getEntry(this.index);
+    selection_bottom = selection.offsetTop + selection.offsetHeight;
+    if (selection_bottom > this.update.scrollTop + this.update.offsetHeight) {
+      this.update.scrollTop = this.update.scrollTop + selection.offsetHeight;
+    }
   },
 
-  getEntry: function(index) {
+  getEntry:function (index) {
     return this.update.firstChild.childNodes[index];
   },
 
-  getCurrentEntry: function() {
+  getCurrentEntry:function () {
     return this.getEntry(this.index);
   },
 
-  selectEntry: function() {
+  selectEntry:function () {
     this.active = false;
     this.updateElement(this.getCurrentEntry());
   },
 
-  updateElement: function(selectedElement) {
+  updateElement:function (selectedElement) {
     if (this.options.updateElement) {
       this.options.updateElement(selectedElement);
       return;
@@ -1503,7 +1563,7 @@ Autocompleter.Base = Class.create({
     var value = '';
     if (this.options.select) {
       var nodes = $(selectedElement).select('.' + this.options.select) || [];
-      if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
+      if (nodes.length > 0) value = Element.collectTextNodes(nodes[0], this.options.select);
     } else
       value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
 
@@ -1520,7 +1580,7 @@ Autocompleter.Base = Class.create({
     this.oldElementValue = this.element.value;
 
     // SONAR
-	// Following line was commented for SONAR-1688 because in our autosuggest text fields, we use
+    // Following line was commented for SONAR-1688 because in our autosuggest text fields, we use
     // the onfocus() method to reinitialize the value of the input field to ''.
     //this.element.focus();
     // /SONAR
@@ -1529,13 +1589,13 @@ Autocompleter.Base = Class.create({
       this.options.afterUpdateElement(this.element, selectedElement);
   },
 
-  updateChoices: function(choices) {
-    if(!this.changed && this.hasFocus) {
+  updateChoices:function (choices) {
+    if (!this.changed && this.hasFocus) {
       this.update.innerHTML = choices;
       Element.cleanWhitespace(this.update);
       Element.cleanWhitespace(this.update.down());
 
-      if(this.update.firstChild && this.update.down().childNodes) {
+      if (this.update.firstChild && this.update.down().childNodes) {
         this.entryCount =
           this.update.down().childNodes.length;
         for (var i = 0; i < this.entryCount; i++) {
@@ -1548,9 +1608,11 @@ Autocompleter.Base = Class.create({
       }
 
       this.stopIndicator();
+      // Fix bug with arrow keys : http://www.gilluminate.com/2009/01/20/scriptaculous-autocomplete-page-jump-using-arrow-keys/
+      this.update.scrollTop = 0;
       this.index = 0;
 
-      if(this.entryCount==1 && this.options.autoSelect) {
+      if (this.entryCount == 1 && this.options.autoSelect) {
         this.selectEntry();
         this.hide();
       } else {
@@ -1559,15 +1621,15 @@ Autocompleter.Base = Class.create({
     }
   },
 
-  addObservers: function(element) {
+  addObservers:function (element) {
     Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));
     Event.observe(element, "click", this.onClick.bindAsEventListener(this));
   },
 
-  onObserverEvent: function() {
+  onObserverEvent:function () {
     this.changed = false;
     this.tokenBounds = null;
-    if(this.getToken().length>=this.options.minChars) {
+    if (this.getToken().length >= this.options.minChars) {
       this.getUpdatedChoices();
     } else {
       this.active = false;
@@ -1576,12 +1638,12 @@ Autocompleter.Base = Class.create({
     this.oldElementValue = this.element.value;
   },
 
-  getToken: function() {
+  getToken:function () {
     var bounds = this.getTokenBounds();
     return this.element.value.substring(bounds[0], bounds[1]).strip();
   },
 
-  getTokenBounds: function() {
+  getTokenBounds:function () {
     if (null != this.tokenBounds) return this.tokenBounds;
     var value = this.element.value;
     if (value.strip().empty()) return [-1, 0];
@@ -1599,7 +1661,7 @@ Autocompleter.Base = Class.create({
   }
 });
 
-Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) {
+Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function (newS, oldS) {
   var boundary = Math.min(newS.length, oldS.length);
   for (var index = 0; index < boundary; ++index)
     if (newS[index] != oldS[index])
@@ -1608,15 +1670,15 @@ Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(new
 };
 
 Ajax.Autocompleter = Class.create(Autocompleter.Base, {
-  initialize: function(element, update, url, options) {
+  initialize:function (element, update, url, options) {
     this.baseInitialize(element, update, options);
-    this.options.asynchronous  = true;
-    this.options.onComplete    = this.onComplete.bind(this);
+    this.options.asynchronous = true;
+    this.options.onComplete = this.onComplete.bind(this);
     this.options.defaultParams = this.options.parameters || null;
-    this.url                   = url;
+    this.url = url;
   },
 
-  getUpdatedChoices: function() {
+  getUpdatedChoices:function () {
     this.startIndicator();
 
     var entry = encodeURIComponent(this.options.paramName) + '=' +
@@ -1625,13 +1687,13 @@ Ajax.Autocompleter = Class.create(Autocompleter.Base, {
     this.options.parameters = this.options.callback ?
       this.options.callback(this.element, entry) : entry;
 
-    if(this.options.defaultParams)
+    if (this.options.defaultParams)
       this.options.parameters += '&' + this.options.defaultParams;
 
     new Ajax.Request(this.url, this.options);
   },
 
-  onComplete: function(request) {
+  onComplete:function (request) {
     this.updateChoices(request.responseText);
   }
 });
@@ -1672,30 +1734,30 @@ Ajax.Autocompleter = Class.create(Autocompleter.Base, {
 // you support them.
 
 Autocompleter.Local = Class.create(Autocompleter.Base, {
-  initialize: function(element, update, array, options) {
+  initialize:function (element, update, array, options) {
     this.baseInitialize(element, update, options);
     this.options.array = array;
   },
 
-  getUpdatedChoices: function() {
+  getUpdatedChoices:function () {
     this.updateChoices(this.options.selector(this));
   },
 
-  setOptions: function(options) {
+  setOptions:function (options) {
     this.options = Object.extend({
-      choices: 10,
-      partialSearch: true,
-      partialChars: 2,
-      ignoreCase: true,
-      fullSearch: false,
-      selector: function(instance) {
-        var ret       = []; // Beginning matches
-        var partial   = []; // Inside matches
-        var entry     = instance.getToken();
-        var count     = 0;
+      choices:10,
+      partialSearch:true,
+      partialChars:2,
+      ignoreCase:true,
+      fullSearch:false,
+      selector:function (instance) {
+        var ret = []; // Beginning matches
+        var partial = []; // Inside matches
+        var entry = instance.getToken();
+        var count = 0;
 
         for (var i = 0; i < instance.options.array.length &&
-          ret.length < instance.options.choices ; i++) {
+          ret.length < instance.options.choices; i++) {
 
           var elem = instance.options.array[i];
           var foundPos = instance.options.ignoreCase ?
@@ -1709,7 +1771,7 @@ Autocompleter.Local = Class.create(Autocompleter.Base, {
               break;
             } else if (entry.length >= instance.options.partialChars &&
               instance.options.partialSearch && foundPos != -1) {
-              if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
+              if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos - 1, 1))) {
                 partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
                   elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(
                   foundPos + entry.length) + "</li>");
@@ -1737,14 +1799,14 @@ Autocompleter.Local = Class.create(Autocompleter.Base, {
 // Use this if you notice weird scrolling problems on some browsers,
 // the DOM might be a bit confused when this gets called so do this
 // waits 1 ms (with setTimeout) until it does the activation
-Field.scrollFreeActivate = function(field) {
-  setTimeout(function() {
+Field.scrollFreeActivate = function (field) {
+  setTimeout(function () {
     Field.activate(field);
   }, 1);
 };
 
 Ajax.InPlaceEditor = Class.create({
-  initialize: function(element, url, options) {
+  initialize:function (element, url, options) {
     this.url = url;
     this.element = element = $(element);
     this.prepareOptions();
@@ -1769,14 +1831,14 @@ Ajax.InPlaceEditor = Class.create({
     this._boundWrapperHandler = this.wrapUp.bind(this);
     this.registerListeners();
   },
-  checkForEscapeOrReturn: function(e) {
+  checkForEscapeOrReturn:function (e) {
     if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return;
     if (Event.KEY_ESC == e.keyCode)
       this.handleFormCancellation(e);
     else if (Event.KEY_RETURN == e.keyCode)
       this.handleFormSubmission(e);
   },
-  createControl: function(mode, handler, extraClasses) {
+  createControl:function (mode, handler, extraClasses) {
     var control = this.options[mode + 'Control'];
     var text = this.options[mode + 'Text'];
     if ('button' == control) {
@@ -1800,7 +1862,7 @@ Ajax.InPlaceEditor = Class.create({
       this._controls[mode] = link;
     }
   },
-  createEditField: function() {
+  createEditField:function () {
     var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
     var fld;
     if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) {
@@ -1823,13 +1885,16 @@ Ajax.InPlaceEditor = Class.create({
       this.loadExternalText();
     this._form.appendChild(this._controls.editor);
   },
-  createForm: function() {
+  createForm:function () {
     var ipe = this;
+
     function addText(mode, condition) {
       var text = ipe.options['text' + mode + 'Controls'];
       if (!text || condition === false) return;
       ipe._form.appendChild(document.createTextNode(text));
-    };
+    }
+
+    ;
     this._form = $(document.createElement('form'));
     this._form.id = this.options.formId;
     this._form.addClassName(this.options.formClassName);
@@ -1845,13 +1910,13 @@ Ajax.InPlaceEditor = Class.create({
     this.createControl('cancel', this._boundCancelHandler, 'editor_cancel');
     addText('After', this.options.okControl || this.options.cancelControl);
   },
-  destroy: function() {
+  destroy:function () {
     if (this._oldInnerHTML)
       this.element.innerHTML = this._oldInnerHTML;
     this.leaveEditMode();
     this.unregisterListeners();
   },
-  enterEditMode: function(e) {
+  enterEditMode:function (e) {
     if (this._saving || this._editing) return;
     this._editing = true;
     this.triggerCallback('onEnterEditMode');
@@ -1864,27 +1929,27 @@ Ajax.InPlaceEditor = Class.create({
       this.postProcessEditField();
     if (e) Event.stop(e);
   },
-  enterHover: function(e) {
+  enterHover:function (e) {
     if (this.options.hoverClassName)
       this.element.addClassName(this.options.hoverClassName);
     if (this._saving) return;
     this.triggerCallback('onEnterHover');
   },
-  getText: function() {
+  getText:function () {
     return this.element.innerHTML.unescapeHTML();
   },
-  handleAJAXFailure: function(transport) {
+  handleAJAXFailure:function (transport) {
     this.triggerCallback('onFailure', transport);
     if (this._oldInnerHTML) {
       this.element.innerHTML = this._oldInnerHTML;
       this._oldInnerHTML = null;
     }
   },
-  handleFormCancellation: function(e) {
+  handleFormCancellation:function (e) {
     this.wrapUp();
     if (e) Event.stop(e);
   },
-  handleFormSubmission: function(e) {
+  handleFormSubmission:function (e) {
     var form = this._form;
     var value = $F(this._controls.editor);
     this.prepareSubmission();
@@ -1893,25 +1958,25 @@ Ajax.InPlaceEditor = Class.create({
       params = params.toQueryParams();
     params.editorId = this.element.id;
     if (this.options.htmlResponse) {
-      var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions);
+      var options = Object.extend({ evalScripts:true }, this.options.ajaxOptions);
       Object.extend(options, {
-        parameters: params,
-        onComplete: this._boundWrapperHandler,
-        onFailure: this._boundFailureHandler
+        parameters:params,
+        onComplete:this._boundWrapperHandler,
+        onFailure:this._boundFailureHandler
       });
-      new Ajax.Updater({ success: this.element }, this.url, options);
+      new Ajax.Updater({ success:this.element }, this.url, options);
     } else {
-      var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
+      var options = Object.extend({ method:'get' }, this.options.ajaxOptions);
       Object.extend(options, {
-        parameters: params,
-        onComplete: this._boundWrapperHandler,
-        onFailure: this._boundFailureHandler
+        parameters:params,
+        onComplete:this._boundWrapperHandler,
+        onFailure:this._boundFailureHandler
       });
       new Ajax.Request(this.url, options);
     }
     if (e) Event.stop(e);
   },
-  leaveEditMode: function() {
+  leaveEditMode:function () {
     this.element.removeClassName(this.options.savingClassName);
     this.removeForm();
     this.leaveHover();
@@ -1924,20 +1989,20 @@ Ajax.InPlaceEditor = Class.create({
     this._oldInnerHTML = null;
     this.triggerCallback('onLeaveEditMode');
   },
-  leaveHover: function(e) {
+  leaveHover:function (e) {
     if (this.options.hoverClassName)
       this.element.removeClassName(this.options.hoverClassName);
     if (this._saving) return;
     this.triggerCallback('onLeaveHover');
   },
-  loadExternalText: function() {
+  loadExternalText:function () {
     this._form.addClassName(this.options.loadingClassName);
     this._controls.editor.disabled = true;
-    var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
+    var options = Object.extend({ method:'get' }, this.options.ajaxOptions);
     Object.extend(options, {
-      parameters: 'editorId=' + encodeURIComponent(this.element.id),
-      onComplete: Prototype.emptyFunction,
-      onSuccess: function(transport) {
+      parameters:'editorId=' + encodeURIComponent(this.element.id),
+      onComplete:Prototype.emptyFunction,
+      onSuccess:function (transport) {
         this._form.removeClassName(this.options.loadingClassName);
         var text = transport.responseText;
         if (this.options.stripLoadedTextTags)
@@ -1946,32 +2011,32 @@ Ajax.InPlaceEditor = Class.create({
         this._controls.editor.disabled = false;
         this.postProcessEditField();
       }.bind(this),
-      onFailure: this._boundFailureHandler
+      onFailure:this._boundFailureHandler
     });
     new Ajax.Request(this.options.loadTextURL, options);
   },
-  postProcessEditField: function() {
+  postProcessEditField:function () {
     var fpc = this.options.fieldPostCreation;
     if (fpc)
       $(this._controls.editor)['focus' == fpc ? 'focus' : 'activate']();
   },
-  prepareOptions: function() {
+  prepareOptions:function () {
     this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions);
     Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks);
-    [this._extraDefaultOptions].flatten().compact().each(function(defs) {
+    [this._extraDefaultOptions].flatten().compact().each(function (defs) {
       Object.extend(this.options, defs);
     }.bind(this));
   },
-  prepareSubmission: function() {
+  prepareSubmission:function () {
     this._saving = true;
     this.removeForm();
     this.leaveHover();
     this.showSaving();
   },
-  registerListeners: function() {
+  registerListeners:function () {
     this._listeners = { };
     var listener;
-    $H(Ajax.InPlaceEditor.Listeners).each(function(pair) {
+    $H(Ajax.InPlaceEditor.Listeners).each(function (pair) {
       listener = this[pair.value].bind(this);
       this._listeners[pair.key] = listener;
       if (!this.options.externalControlOnly)
@@ -1980,33 +2045,33 @@ Ajax.InPlaceEditor = Class.create({
         this.options.externalControl.observe(pair.key, listener);
     }.bind(this));
   },
-  removeForm: function() {
+  removeForm:function () {
     if (!this._form) return;
     this._form.remove();
     this._form = null;
     this._controls = { };
   },
-  showSaving: function() {
+  showSaving:function () {
     this._oldInnerHTML = this.element.innerHTML;
     this.element.innerHTML = this.options.savingText;
     this.element.addClassName(this.options.savingClassName);
     this.element.style.backgroundColor = this._originalBackground;
     this.element.show();
   },
-  triggerCallback: function(cbName, arg) {
+  triggerCallback:function (cbName, arg) {
     if ('function' == typeof this.options[cbName]) {
       this.options[cbName](this, arg);
     }
   },
-  unregisterListeners: function() {
-    $H(this._listeners).each(function(pair) {
+  unregisterListeners:function () {
+    $H(this._listeners).each(function (pair) {
       if (!this.options.externalControlOnly)
         this.element.stopObserving(pair.key, pair.value);
       if (this.options.externalControl)
         this.options.externalControl.stopObserving(pair.key, pair.value);
     }.bind(this));
   },
-  wrapUp: function(transport) {
+  wrapUp:function (transport) {
     this.leaveEditMode();
     // Can't use triggerCallback due to backward compatibility: requires
     // binding + direct element
@@ -2015,16 +2080,16 @@ Ajax.InPlaceEditor = Class.create({
 });
 
 Object.extend(Ajax.InPlaceEditor.prototype, {
-  dispose: Ajax.InPlaceEditor.prototype.destroy
+  dispose:Ajax.InPlaceEditor.prototype.destroy
 });
 
 Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
-  initialize: function($super, element, url, options) {
+  initialize:function ($super, element, url, options) {
     this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions;
     $super(element, url, options);
   },
 
-  createEditField: function() {
+  createEditField:function () {
     var list = document.createElement('select');
     list.name = this.options.paramName;
     list.size = 1;
@@ -2037,26 +2102,26 @@ Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
     this._form.appendChild(this._controls.editor);
   },
 
-  loadCollection: function() {
+  loadCollection:function () {
     this._form.addClassName(this.options.loadingClassName);
     this.showLoadingText(this.options.loadingCollectionText);
-    var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
+    var options = Object.extend({ method:'get' }, this.options.ajaxOptions);
     Object.extend(options, {
-      parameters: 'editorId=' + encodeURIComponent(this.element.id),
-      onComplete: Prototype.emptyFunction,
-      onSuccess: function(transport) {
+      parameters:'editorId=' + encodeURIComponent(this.element.id),
+      onComplete:Prototype.emptyFunction,
+      onSuccess:function (transport) {
         var js = transport.responseText.strip();
         if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
           throw('Server returned an invalid collection representation.');
         this._collection = eval(js);
         this.checkForExternalText();
       }.bind(this),
-      onFailure: this.onFailure
+      onFailure:this.onFailure
     });
     new Ajax.Request(this.options.loadCollectionURL, options);
   },
 
-  showLoadingText: function(text) {
+  showLoadingText:function (text) {
     this._controls.editor.disabled = true;
     var tempOption = this._controls.editor.firstChild;
     if (!tempOption) {
@@ -2068,7 +2133,7 @@ Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
     tempOption.update((text || '').stripScripts().stripTags());
   },
 
-  checkForExternalText: function() {
+  checkForExternalText:function () {
     this._text = this.getText();
     if (this.options.loadTextURL)
       this.loadExternalText();
@@ -2076,33 +2141,33 @@ Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
       this.buildOptionList();
   },
 
-  loadExternalText: function() {
+  loadExternalText:function () {
     this.showLoadingText(this.options.loadingText);
-    var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
+    var options = Object.extend({ method:'get' }, this.options.ajaxOptions);
     Object.extend(options, {
-      parameters: 'editorId=' + encodeURIComponent(this.element.id),
-      onComplete: Prototype.emptyFunction,
-      onSuccess: function(transport) {
+      parameters:'editorId=' + encodeURIComponent(this.element.id),
+      onComplete:Prototype.emptyFunction,
+      onSuccess:function (transport) {
         this._text = transport.responseText.strip();
         this.buildOptionList();
       }.bind(this),
-      onFailure: this.onFailure
+      onFailure:this.onFailure
     });
     new Ajax.Request(this.options.loadTextURL, options);
   },
 
-  buildOptionList: function() {
+  buildOptionList:function () {
     this._form.removeClassName(this.options.loadingClassName);
-    this._collection = this._collection.map(function(entry) {
+    this._collection = this._collection.map(function (entry) {
       return 2 === entry.length ? entry : [entry, entry].flatten();
     });
     var marker = ('value' in this.options) ? this.options.value : this._text;
-    var textFound = this._collection.any(function(entry) {
+    var textFound = this._collection.any(function (entry) {
       return entry[0] == marker;
     }.bind(this));
     this._controls.editor.update('');
     var option;
-    this._collection.each(function(entry, index) {
+    this._collection.each(function (entry, index) {
       option = document.createElement('option');
       option.value = entry[0];
       option.selected = textFound ? entry[0] == marker : 0 == index;
@@ -2119,12 +2184,14 @@ Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
 //**** users adapt to  the new API.  Read up on the new ****
 //**** API and convert your code to it ASAP!            ****
 
-Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) {
+Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function (options) {
   if (!options) return;
   function fallback(name, expr) {
     if (name in options || expr === undefined) return;
     options[name] = expr;
-  };
+  }
+
+  ;
   fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' :
     options.cancelLink == options.cancelButton == false ? false : undefined)));
   fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' :
@@ -2134,74 +2201,74 @@ Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(opt
 };
 
 Object.extend(Ajax.InPlaceEditor, {
-  DefaultOptions: {
-    ajaxOptions: { },
-    autoRows: 3,                                // Use when multi-line w/ rows == 1
-    cancelControl: 'link',                      // 'link'|'button'|false
-    cancelText: 'cancel',
-    clickToEditText: 'Click to edit',
-    externalControl: null,                      // id|elt
-    externalControlOnly: false,
-    fieldPostCreation: 'activate',              // 'activate'|'focus'|false
-    formClassName: 'inplaceeditor-form',
-    formId: null,                               // id|elt
-    highlightColor: '#ffff99',
-    highlightEndColor: '#ffffff',
-    hoverClassName: '',
-    htmlResponse: true,
-    loadingClassName: 'inplaceeditor-loading',
-    loadingText: 'Loading...',
-    okControl: 'button',                        // 'link'|'button'|false
-    okText: 'ok',
-    paramName: 'value',
-    rows: 1,                                    // If 1 and multi-line, uses autoRows
-    savingClassName: 'inplaceeditor-saving',
-    savingText: 'Saving...',
-    size: 0,
-    stripLoadedTextTags: false,
-    submitOnBlur: false,
-    textAfterControls: '',
-    textBeforeControls: '',
-    textBetweenControls: ''
-  },
-  DefaultCallbacks: {
-    callback: function(form) {
+  DefaultOptions:{
+    ajaxOptions:{ },
+    autoRows:3, // Use when multi-line w/ rows == 1
+    cancelControl:'link', // 'link'|'button'|false
+    cancelText:'cancel',
+    clickToEditText:'Click to edit',
+    externalControl:null, // id|elt
+    externalControlOnly:false,
+    fieldPostCreation:'activate', // 'activate'|'focus'|false
+    formClassName:'inplaceeditor-form',
+    formId:null, // id|elt
+    highlightColor:'#ffff99',
+    highlightEndColor:'#ffffff',
+    hoverClassName:'',
+    htmlResponse:true,
+    loadingClassName:'inplaceeditor-loading',
+    loadingText:'Loading...',
+    okControl:'button', // 'link'|'button'|false
+    okText:'ok',
+    paramName:'value',
+    rows:1, // If 1 and multi-line, uses autoRows
+    savingClassName:'inplaceeditor-saving',
+    savingText:'Saving...',
+    size:0,
+    stripLoadedTextTags:false,
+    submitOnBlur:false,
+    textAfterControls:'',
+    textBeforeControls:'',
+    textBetweenControls:''
+  },
+  DefaultCallbacks:{
+    callback:function (form) {
       return Form.serialize(form);
     },
-    onComplete: function(transport, element) {
+    onComplete:function (transport, element) {
       // For backward compatibility, this one is bound to the IPE, and passes
       // the element directly.  It was too often customized, so we don't break it.
       new Effect.Highlight(element, {
-        startcolor: this.options.highlightColor, keepBackgroundImage: true });
+        startcolor:this.options.highlightColor, keepBackgroundImage:true });
     },
-    onEnterEditMode: null,
-    onEnterHover: function(ipe) {
+    onEnterEditMode:null,
+    onEnterHover:function (ipe) {
       ipe.element.style.backgroundColor = ipe.options.highlightColor;
       if (ipe._effect)
         ipe._effect.cancel();
     },
-    onFailure: function(transport, ipe) {
+    onFailure:function (transport, ipe) {
       alert('Error communication with the server: ' + transport.responseText.stripTags());
     },
-    onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls.
-    onLeaveEditMode: null,
-    onLeaveHover: function(ipe) {
+    onFormCustomization:null, // Takes the IPE and its generated form, after editor, before controls.
+    onLeaveEditMode:null,
+    onLeaveHover:function (ipe) {
       ipe._effect = new Effect.Highlight(ipe.element, {
-        startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor,
-        restorecolor: ipe._originalBackground, keepBackgroundImage: true
+        startcolor:ipe.options.highlightColor, endcolor:ipe.options.highlightEndColor,
+        restorecolor:ipe._originalBackground, keepBackgroundImage:true
       });
     }
   },
-  Listeners: {
-    click: 'enterEditMode',
-    keydown: 'checkForEscapeOrReturn',
-    mouseover: 'enterHover',
-    mouseout: 'leaveHover'
+  Listeners:{
+    click:'enterEditMode',
+    keydown:'checkForEscapeOrReturn',
+    mouseover:'enterHover',
+    mouseout:'leaveHover'
   }
 });
 
 Ajax.InPlaceCollectionEditor.DefaultOptions = {
-  loadingCollectionText: 'Loading options...'
+  loadingCollectionText:'Loading options...'
 };
 
 // Delayed observer, like Form.Element.Observer,
@@ -2209,21 +2276,21 @@ Ajax.InPlaceCollectionEditor.DefaultOptions = {
 // Ideal for live-search fields
 
 Form.Element.DelayedObserver = Class.create({
-  initialize: function(element, delay, callback) {
-    this.delay     = delay || 0.5;
-    this.element   = $(element);
-    this.callback  = callback;
-    this.timer     = null;
+  initialize:function (element, delay, callback) {
+    this.delay = delay || 0.5;
+    this.element = $(element);
+    this.callback = callback;
+    this.timer = null;
     this.lastValue = $F(this.element);
-    Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));
+    Event.observe(this.element, 'keyup', this.delayedListener.bindAsEventListener(this));
   },
-  delayedListener: function(event) {
-    if(this.lastValue == $F(this.element)) return;
-    if(this.timer) clearTimeout(this.timer);
+  delayedListener:function (event) {
+    if (this.lastValue == $F(this.element)) return;
+    if (this.timer) clearTimeout(this.timer);
     this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);
     this.lastValue = $F(this.element);
   },
-  onTimerEvent: function() {
+  onTimerEvent:function () {
     this.timer = null;
     this.callback(this.element, $F(this.element));
   }
@@ -2235,36 +2302,40 @@ Form.Element.DelayedObserver = Class.create({
 // script.aculo.us is freely distributable under the terms of an MIT-style license.
 // For details, see the script.aculo.us web site: http://script.aculo.us/
 
-if(Object.isUndefined(Effect))
+if (Object.isUndefined(Effect))
   throw("dragdrop.js requires including script.aculo.us' effects.js library");
 
 var Droppables = {
-  drops: [],
+  drops:[],
 
-  remove: function(element) {
-    this.drops = this.drops.reject(function(d) { return d.element==$(element) });
+  remove:function (element) {
+    this.drops = this.drops.reject(function (d) {
+      return d.element == $(element)
+    });
   },
 
-  add: function(element) {
+  add:function (element) {
     element = $(element);
     var options = Object.extend({
-      greedy:     true,
-      hoverclass: null,
-      tree:       false
+      greedy:true,
+      hoverclass:null,
+      tree:false
     }, arguments[1] || { });
 
     // cache containers
-    if(options.containment) {
+    if (options.containment) {
       options._containers = [];
       var containment = options.containment;
-      if(Object.isArray(containment)) {
-        containment.each( function(c) { options._containers.push($(c)) });
+      if (Object.isArray(containment)) {
+        containment.each(function (c) {
+          options._containers.push($(c))
+        });
       } else {
         options._containers.push($(containment));
       }
     }
 
-    if(options.accept) options.accept = [options.accept].flatten();
+    if (options.accept) options.accept = [options.accept].flatten();
 
     Element.makePositioned(element); // fix IE
     options.element = element;
@@ -2272,7 +2343,7 @@ var Droppables = {
     this.drops.push(options);
   },
 
-  findDeepestChild: function(drops) {
+  findDeepestChild:function (drops) {
     deepest = drops[0];
 
     for (i = 1; i < drops.length; ++i)
@@ -2282,63 +2353,67 @@ var Droppables = {
     return deepest;
   },
 
-  isContained: function(element, drop) {
+  isContained:function (element, drop) {
     var containmentNode;
-    if(drop.tree) {
+    if (drop.tree) {
       containmentNode = element.treeNode;
     } else {
       containmentNode = element.parentNode;
     }
-    return drop._containers.detect(function(c) { return containmentNode == c });
+    return drop._containers.detect(function (c) {
+      return containmentNode == c
+    });
   },
 
-  isAffected: function(point, element, drop) {
+  isAffected:function (point, element, drop) {
     return (
-      (drop.element!=element) &&
-      ((!drop._containers) ||
-        this.isContained(element, drop)) &&
-      ((!drop.accept) ||
-        (Element.classNames(element).detect(
-          function(v) { return drop.accept.include(v) } ) )) &&
-      Position.within(drop.element, point[0], point[1]) );
-  },
-
-  deactivate: function(drop) {
-    if(drop.hoverclass)
+      (drop.element != element) &&
+        ((!drop._containers) ||
+          this.isContained(element, drop)) &&
+        ((!drop.accept) ||
+          (Element.classNames(element).detect(
+            function (v) {
+              return drop.accept.include(v)
+            }) )) &&
+        Position.within(drop.element, point[0], point[1]) );
+  },
+
+  deactivate:function (drop) {
+    if (drop.hoverclass)
       Element.removeClassName(drop.element, drop.hoverclass);
     this.last_active = null;
   },
 
-  activate: function(drop) {
-    if(drop.hoverclass)
+  activate:function (drop) {
+    if (drop.hoverclass)
       Element.addClassName(drop.element, drop.hoverclass);
     this.last_active = drop;
   },
 
-  show: function(point, element) {
-    if(!this.drops.length) return;
+  show:function (point, element) {
+    if (!this.drops.length) return;
     var drop, affected = [];
 
-    this.drops.each( function(drop) {
-      if(Droppables.isAffected(point, element, drop))
+    this.drops.each(function (drop) {
+      if (Droppables.isAffected(point, element, drop))
         affected.push(drop);
     });
 
-    if(affected.length>0)
+    if (affected.length > 0)
       drop = Droppables.findDeepestChild(affected);
 
-    if(this.last_active && this.last_active != drop) this.deactivate(this.last_active);
+    if (this.last_active && this.last_active != drop) this.deactivate(this.last_active);
     if (drop) {
       Position.within(drop.element, point[0], point[1]);
-      if(drop.onHover)
+      if (drop.onHover)
         drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
 
       if (drop != this.last_active) Droppables.activate(drop);
     }
   },
 
-  fire: function(event, element) {
-    if(!this.last_active) return;
+  fire:function (event, element) {
+    if (!this.last_active) return;
     Position.prepare();
 
     if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
@@ -2348,21 +2423,21 @@ var Droppables = {
       }
   },
 
-  reset: function() {
-    if(this.last_active)
+  reset:function () {
+    if (this.last_active)
       this.deactivate(this.last_active);
   }
 };
 
 var Draggables = {
-  drags: [],
-  observers: [],
+  drags:[],
+  observers:[],
 
-  register: function(draggable) {
-    if(this.drags.length == 0) {
-      this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
+  register:function (draggable) {
+    if (this.drags.length == 0) {
+      this.eventMouseUp = this.endDrag.bindAsEventListener(this);
       this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
-      this.eventKeypress  = this.keyPress.bindAsEventListener(this);
+      this.eventKeypress = this.keyPress.bindAsEventListener(this);
 
       Event.observe(document, "mouseup", this.eventMouseUp);
       Event.observe(document, "mousemove", this.eventMouseMove);
@@ -2371,18 +2446,20 @@ var Draggables = {
     this.drags.push(draggable);
   },
 
-  unregister: function(draggable) {
-    this.drags = this.drags.reject(function(d) { return d==draggable });
-    if(this.drags.length == 0) {
+  unregister:function (draggable) {
+    this.drags = this.drags.reject(function (d) {
+      return d == draggable
+    });
+    if (this.drags.length == 0) {
       Event.stopObserving(document, "mouseup", this.eventMouseUp);
       Event.stopObserving(document, "mousemove", this.eventMouseMove);
       Event.stopObserving(document, "keypress", this.eventKeypress);
     }
   },
 
-  activate: function(draggable) {
-    if(draggable.options.delay) {
-      this._timeout = setTimeout(function() {
+  activate:function (draggable) {
+    if (draggable.options.delay) {
+      this._timeout = setTimeout(function () {
         Draggables._timeout = null;
         window.focus();
         Draggables.activeDraggable = draggable;
@@ -2393,59 +2470,63 @@ var Draggables = {
     }
   },
 
-  deactivate: function() {
+  deactivate:function () {
     this.activeDraggable = null;
   },
 
-  updateDrag: function(event) {
-    if(!this.activeDraggable) return;
+  updateDrag:function (event) {
+    if (!this.activeDraggable) return;
     var pointer = [Event.pointerX(event), Event.pointerY(event)];
     // Mozilla-based browsers fire successive mousemove events with
     // the same coordinates, prevent needless redrawing (moz bug?)
-    if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
+    if (this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
     this._lastPointer = pointer;
 
     this.activeDraggable.updateDrag(event, pointer);
   },
 
-  endDrag: function(event) {
-    if(this._timeout) {
+  endDrag:function (event) {
+    if (this._timeout) {
       clearTimeout(this._timeout);
       this._timeout = null;
     }
-    if(!this.activeDraggable) return;
+    if (!this.activeDraggable) return;
     this._lastPointer = null;
     this.activeDraggable.endDrag(event);
     this.activeDraggable = null;
   },
 
-  keyPress: function(event) {
-    if(this.activeDraggable)
+  keyPress:function (event) {
+    if (this.activeDraggable)
       this.activeDraggable.keyPress(event);
   },
 
-  addObserver: function(observer) {
+  addObserver:function (observer) {
     this.observers.push(observer);
     this._cacheObserverCallbacks();
   },
 
-  removeObserver: function(element) {  // element instead of observer fixes mem leaks
-    this.observers = this.observers.reject( function(o) { return o.element==element });
+  removeObserver:function (element) {  // element instead of observer fixes mem leaks
+    this.observers = this.observers.reject(function (o) {
+      return o.element == element
+    });
     this._cacheObserverCallbacks();
   },
 
-  notify: function(eventName, draggable, event) {  // 'onStart', 'onEnd', 'onDrag'
-    if(this[eventName+'Count'] > 0)
-      this.observers.each( function(o) {
-        if(o[eventName]) o[eventName](eventName, draggable, event);
+  notify:function (eventName, draggable, event) {  // 'onStart', 'onEnd', 'onDrag'
+    if (this[eventName + 'Count'] > 0)
+      this.observers.each(function (o) {
+        if (o[eventName]) o[eventName](eventName, draggable, event);
       });
-    if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
+    if (draggable.options[eventName]) draggable.options[eventName](draggable, event);
   },
 
-  _cacheObserverCallbacks: function() {
-    ['onStart','onEnd','onDrag'].each( function(eventName) {
-      Draggables[eventName+'Count'] = Draggables.observers.select(
-        function(o) { return o[eventName]; }
+  _cacheObserverCallbacks:function () {
+    ['onStart', 'onEnd', 'onDrag'].each(function (eventName) {
+      Draggables[eventName + 'Count'] = Draggables.observers.select(
+        function (o) {
+          return o[eventName];
+        }
       ).length;
     });
   }
@@ -2454,37 +2535,37 @@ var Draggables = {
 /*--------------------------------------------------------------------------*/
 
 var Draggable = Class.create({
-  initialize: function(element) {
+  initialize:function (element) {
     var defaults = {
-      handle: false,
-      reverteffect: function(element, top_offset, left_offset) {
-        var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
-        new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
-          queue: {scope:'_draggable', position:'end'}
+      handle:false,
+      reverteffect:function (element, top_offset, left_offset) {
+        var dur = Math.sqrt(Math.abs(top_offset ^ 2) + Math.abs(left_offset ^ 2)) * 0.02;
+        new Effect.Move(element, { x:-left_offset, y:-top_offset, duration:dur,
+          queue:{scope:'_draggable', position:'end'}
         });
       },
-      endeffect: function(element) {
+      endeffect:function (element) {
         var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
         new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
-          queue: {scope:'_draggable', position:'end'},
-          afterFinish: function(){
+          queue:{scope:'_draggable', position:'end'},
+          afterFinish:function () {
             Draggable._dragging[element] = false
           }
         });
       },
-      zindex: 1000,
-      revert: false,
-      quiet: false,
-      scroll: false,
-      scrollSensitivity: 20,
-      scrollSpeed: 15,
-      snap: false,  // false, or xy or [x,y] or function(x,y){ return [x,y] }
-      delay: 0
+      zindex:1000,
+      revert:false,
+      quiet:false,
+      scroll:false,
+      scrollSensitivity:20,
+      scrollSpeed:15,
+      snap:false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
+      delay:0
     };
 
-    if(!arguments[1] || Object.isUndefined(arguments[1].endeffect))
+    if (!arguments[1] || Object.isUndefined(arguments[1].endeffect))
       Object.extend(defaults, {
-        starteffect: function(element) {
+        starteffect:function (element) {
           element._opacity = Element.getOpacity(element);
           Draggable._dragging[element] = true;
           new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
@@ -2495,20 +2576,20 @@ var Draggable = Class.create({
 
     this.element = $(element);
 
-    if(options.handle && Object.isString(options.handle))
-      this.handle = this.element.down('.'+options.handle, 0);
+    if (options.handle && Object.isString(options.handle))
+      this.handle = this.element.down('.' + options.handle, 0);
 
-    if(!this.handle) this.handle = $(options.handle);
-    if(!this.handle) this.handle = this.element;
+    if (!this.handle) this.handle = $(options.handle);
+    if (!this.handle) this.handle = this.element;
 
-    if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
+    if (options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
       options.scroll = $(options.scroll);
       this._isScrollChild = Element.childOf(this.element, options.scroll);
     }
 
     Element.makePositioned(this.element); // fix IE
 
-    this.options  = options;
+    this.options = options;
     this.dragging = false;
 
     this.eventMouseDown = this.initDrag.bindAsEventListener(this);
@@ -2517,50 +2598,52 @@ var Draggable = Class.create({
     Draggables.register(this);
   },
 
-  destroy: function() {
+  destroy:function () {
     Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
     Draggables.unregister(this);
   },
 
-  currentDelta: function() {
+  currentDelta:function () {
     return([
-      parseInt(Element.getStyle(this.element,'left') || '0'),
-      parseInt(Element.getStyle(this.element,'top') || '0')]);
+      parseInt(Element.getStyle(this.element, 'left') || '0'),
+      parseInt(Element.getStyle(this.element, 'top') || '0')]);
   },
 
-  initDrag: function(event) {
-    if(!Object.isUndefined(Draggable._dragging[this.element]) &&
+  initDrag:function (event) {
+    if (!Object.isUndefined(Draggable._dragging[this.element]) &&
       Draggable._dragging[this.element]) return;
-    if(Event.isLeftClick(event)) {
+    if (Event.isLeftClick(event)) {
       // abort on form elements, fixes a Firefox issue
       var src = Event.element(event);
-      if((tag_name = src.tagName.toUpperCase()) && (
-        tag_name=='INPUT' ||
-        tag_name=='SELECT' ||
-        tag_name=='OPTION' ||
-        tag_name=='BUTTON' ||
-        tag_name=='TEXTAREA')) return;
+      if ((tag_name = src.tagName.toUpperCase()) && (
+        tag_name == 'INPUT' ||
+          tag_name == 'SELECT' ||
+          tag_name == 'OPTION' ||
+          tag_name == 'BUTTON' ||
+          tag_name == 'TEXTAREA')) return;
 
       var pointer = [Event.pointerX(event), Event.pointerY(event)];
-      var pos     = this.element.cumulativeOffset();
-      this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
+      var pos = this.element.cumulativeOffset();
+      this.offset = [0, 1].map(function (i) {
+        return (pointer[i] - pos[i])
+      });
 
       Draggables.activate(this);
       Event.stop(event);
     }
   },
 
-  startDrag: function(event) {
+  startDrag:function (event) {
     this.dragging = true;
-    if(!this.delta)
+    if (!this.delta)
       this.delta = this.currentDelta();
 
-    if(this.options.zindex) {
-      this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
+    if (this.options.zindex) {
+      this.originalZ = parseInt(Element.getStyle(this.element, 'z-index') || 0);
       this.element.style.zIndex = this.options.zindex;
     }
 
-    if(this.options.ghosting) {
+    if (this.options.ghosting) {
       this._clone = this.element.cloneNode(true);
       this._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
       if (!this._originallyAbsolute)
@@ -2568,7 +2651,7 @@ var Draggable = Class.create({
       this.element.parentNode.insertBefore(this._clone, this.element);
     }
 
-    if(this.options.scroll) {
+    if (this.options.scroll) {
       if (this.options.scroll == window) {
         var where = this._getWindowScroll(this.options.scroll);
         this.originalScrollLeft = where.left;
@@ -2581,13 +2664,13 @@ var Draggable = Class.create({
 
     Draggables.notify('onStart', this, event);
 
-    if(this.options.starteffect) this.options.starteffect(this.element);
+    if (this.options.starteffect) this.options.starteffect(this.element);
   },
 
-  updateDrag: function(event, pointer) {
-    if(!this.dragging) this.startDrag(event);
+  updateDrag:function (event, pointer) {
+    if (!this.dragging) this.startDrag(event);
 
-    if(!this.options.quiet){
+    if (!this.options.quiet) {
       Position.prepare();
       Droppables.show(pointer, this.element);
     }
@@ -2595,45 +2678,47 @@ var Draggable = Class.create({
     Draggables.notify('onDrag', this, event);
 
     this.draw(pointer);
-    if(this.options.change) this.options.change(this);
+    if (this.options.change) this.options.change(this);
 
-    if(this.options.scroll) {
+    if (this.options.scroll) {
       this.stopScrolling();
 
       var p;
       if (this.options.scroll == window) {
-        with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
+        with (this._getWindowScroll(this.options.scroll)) {
+          p = [ left, top, left + width, top + height ];
+        }
       } else {
         p = Position.page(this.options.scroll).toArray();
         p[0] += this.options.scroll.scrollLeft + Position.deltaX;
         p[1] += this.options.scroll.scrollTop + Position.deltaY;
-        p.push(p[0]+this.options.scroll.offsetWidth);
-        p.push(p[1]+this.options.scroll.offsetHeight);
+        p.push(p[0] + this.options.scroll.offsetWidth);
+        p.push(p[1] + this.options.scroll.offsetHeight);
       }
-      var speed = [0,0];
-      if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
-      if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
-      if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
-      if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
+      var speed = [0, 0];
+      if (pointer[0] < (p[0] + this.options.scrollSensitivity)) speed[0] = pointer[0] - (p[0] + this.options.scrollSensitivity);
+      if (pointer[1] < (p[1] + this.options.scrollSensitivity)) speed[1] = pointer[1] - (p[1] + this.options.scrollSensitivity);
+      if (pointer[0] > (p[2] - this.options.scrollSensitivity)) speed[0] = pointer[0] - (p[2] - this.options.scrollSensitivity);
+      if (pointer[1] > (p[3] - this.options.scrollSensitivity)) speed[1] = pointer[1] - (p[3] - this.options.scrollSensitivity);
       this.startScrolling(speed);
     }
 
     // fix AppleWebKit rendering
-    if(Prototype.Browser.WebKit) window.scrollBy(0,0);
+    if (Prototype.Browser.WebKit) window.scrollBy(0, 0);
 
     Event.stop(event);
   },
 
-  finishDrag: function(event, success) {
+  finishDrag:function (event, success) {
     this.dragging = false;
 
-    if(this.options.quiet){
+    if (this.options.quiet) {
       Position.prepare();
       var pointer = [Event.pointerX(event), Event.pointerY(event)];
       Droppables.show(pointer, this.element);
     }
 
-    if(this.options.ghosting) {
+    if (this.options.ghosting) {
       if (!this._originallyAbsolute)
         Position.relativize(this.element);
       delete this._originallyAbsolute;
@@ -2642,118 +2727,123 @@ var Draggable = Class.create({
     }
 
     var dropped = false;
-    if(success) {
+    if (success) {
       dropped = Droppables.fire(event, this.element);
       if (!dropped) dropped = false;
     }
-    if(dropped && this.options.onDropped) this.options.onDropped(this.element);
+    if (dropped && this.options.onDropped) this.options.onDropped(this.element);
     Draggables.notify('onEnd', this, event);
 
     var revert = this.options.revert;
-    if(revert && Object.isFunction(revert)) revert = revert(this.element);
+    if (revert && Object.isFunction(revert)) revert = revert(this.element);
 
     var d = this.currentDelta();
-    if(revert && this.options.reverteffect) {
+    if (revert && this.options.reverteffect) {
       if (dropped == 0 || revert != 'failure')
         this.options.reverteffect(this.element,
-          d[1]-this.delta[1], d[0]-this.delta[0]);
+          d[1] - this.delta[1], d[0] - this.delta[0]);
     } else {
       this.delta = d;
     }
 
-    if(this.options.zindex)
+    if (this.options.zindex)
       this.element.style.zIndex = this.originalZ;
 
-    if(this.options.endeffect)
+    if (this.options.endeffect)
       this.options.endeffect(this.element);
 
     Draggables.deactivate(this);
     Droppables.reset();
   },
 
-  keyPress: function(event) {
-    if(event.keyCode!=Event.KEY_ESC) return;
+  keyPress:function (event) {
+    if (event.keyCode != Event.KEY_ESC) return;
     this.finishDrag(event, false);
     Event.stop(event);
   },
 
-  endDrag: function(event) {
-    if(!this.dragging) return;
+  endDrag:function (event) {
+    if (!this.dragging) return;
     this.stopScrolling();
     this.finishDrag(event, true);
     Event.stop(event);
   },
 
-  draw: function(point) {
+  draw:function (point) {
     var pos = this.element.cumulativeOffset();
-    if(this.options.ghosting) {
-      var r   = Position.realOffset(this.element);
-      pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
+    if (this.options.ghosting) {
+      var r = Position.realOffset(this.element);
+      pos[0] += r[0] - Position.deltaX;
+      pos[1] += r[1] - Position.deltaY;
     }
 
     var d = this.currentDelta();
-    pos[0] -= d[0]; pos[1] -= d[1];
+    pos[0] -= d[0];
+    pos[1] -= d[1];
 
-    if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
-      pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
-      pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
+    if (this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
+      pos[0] -= this.options.scroll.scrollLeft - this.originalScrollLeft;
+      pos[1] -= this.options.scroll.scrollTop - this.originalScrollTop;
     }
 
-    var p = [0,1].map(function(i){
-      return (point[i]-pos[i]-this.offset[i])
+    var p = [0, 1].map(function (i) {
+      return (point[i] - pos[i] - this.offset[i])
     }.bind(this));
 
-    if(this.options.snap) {
-      if(Object.isFunction(this.options.snap)) {
-        p = this.options.snap(p[0],p[1],this);
-      } else {
-      if(Object.isArray(this.options.snap)) {
-        p = p.map( function(v, i) {
-          return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this));
+    if (this.options.snap) {
+      if (Object.isFunction(this.options.snap)) {
+        p = this.options.snap(p[0], p[1], this);
       } else {
-        p = p.map( function(v) {
-          return (v/this.options.snap).round()*this.options.snap }.bind(this));
+        if (Object.isArray(this.options.snap)) {
+          p = p.map(function (v, i) {
+            return (v / this.options.snap[i]).round() * this.options.snap[i]
+          }.bind(this));
+        } else {
+          p = p.map(function (v) {
+            return (v / this.options.snap).round() * this.options.snap
+          }.bind(this));
+        }
       }
-    }}
+    }
 
     var style = this.element.style;
-    if((!this.options.constraint) || (this.options.constraint=='horizontal'))
+    if ((!this.options.constraint) || (this.options.constraint == 'horizontal'))
       style.left = p[0] + "px";
-    if((!this.options.constraint) || (this.options.constraint=='vertical'))
-      style.top  = p[1] + "px";
+    if ((!this.options.constraint) || (this.options.constraint == 'vertical'))
+      style.top = p[1] + "px";
 
-    if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
+    if (style.visibility == "hidden") style.visibility = ""; // fix gecko rendering
   },
 
-  stopScrolling: function() {
-    if(this.scrollInterval) {
+  stopScrolling:function () {
+    if (this.scrollInterval) {
       clearInterval(this.scrollInterval);
       this.scrollInterval = null;
       Draggables._lastScrollPointer = null;
     }
   },
 
-  startScrolling: function(speed) {
-    if(!(speed[0] || speed[1])) return;
-    this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
+  startScrolling:function (speed) {
+    if (!(speed[0] || speed[1])) return;
+    this.scrollSpeed = [speed[0] * this.options.scrollSpeed, speed[1] * this.options.scrollSpeed];
     this.lastScrolled = new Date();
     this.scrollInterval = setInterval(this.scroll.bind(this), 10);
   },
 
-  scroll: function() {
+  scroll:function () {
     var current = new Date();
     var delta = current - this.lastScrolled;
     this.lastScrolled = current;
-    if(this.options.scroll == window) {
+    if (this.options.scroll == window) {
       with (this._getWindowScroll(this.options.scroll)) {
         if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
           var d = delta / 1000;
-          this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
+          this.options.scroll.scrollTo(left + d * this.scrollSpeed[0], top + d * this.scrollSpeed[1]);
         }
       }
     } else {
       this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
-      this.options.scroll.scrollTop  += this.scrollSpeed[1] * delta / 1000;
+      this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
     }
 
     Position.prepare();
@@ -2770,10 +2860,10 @@ var Draggable = Class.create({
       this.draw(Draggables._lastScrollPointer);
     }
 
-    if(this.options.change) this.options.change(this);
+    if (this.options.change) this.options.change(this);
   },
 
-  _getWindowScroll: function(w) {
+  _getWindowScroll:function (w) {
     var T, L, W, H;
     with (w.document) {
       if (w.document.documentElement && documentElement.scrollTop) {
@@ -2794,7 +2884,7 @@ var Draggable = Class.create({
         H = body.offsetHeight;
       }
     }
-    return { top: T, left: L, width: W, height: H };
+    return { top:T, left:L, width:W, height:H };
   }
 });
 
@@ -2803,83 +2893,85 @@ Draggable._dragging = { };
 /*--------------------------------------------------------------------------*/
 
 var SortableObserver = Class.create({
-  initialize: function(element, observer) {
-    this.element   = $(element);
-    this.observer  = observer;
+  initialize:function (element, observer) {
+    this.element = $(element);
+    this.observer = observer;
     this.lastValue = Sortable.serialize(this.element);
   },
 
-  onStart: function() {
+  onStart:function () {
     this.lastValue = Sortable.serialize(this.element);
   },
 
-  onEnd: function() {
+  onEnd:function () {
     Sortable.unmark();
-    if(this.lastValue != Sortable.serialize(this.element))
+    if (this.lastValue != Sortable.serialize(this.element))
       this.observer(this.element)
   }
 });
 
 var Sortable = {
-  SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
+  SERIALIZE_RULE:/^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
 
-  sortables: { },
+  sortables:{ },
 
-  _findRootElement: function(element) {
+  _findRootElement:function (element) {
     while (element.tagName.toUpperCase() != "BODY") {
-      if(element.id && Sortable.sortables[element.id]) return element;
+      if (element.id && Sortable.sortables[element.id]) return element;
       element = element.parentNode;
     }
   },
 
-  options: function(element) {
+  options:function (element) {
     element = Sortable._findRootElement($(element));
-    if(!element) return;
+    if (!element) return;
     return Sortable.sortables[element.id];
   },
 
-  destroy: function(element){
+  destroy:function (element) {
     element = $(element);
     var s = Sortable.sortables[element.id];
 
-    if(s) {
+    if (s) {
       Draggables.removeObserver(s.element);
-      s.droppables.each(function(d){ Droppables.remove(d) });
+      s.droppables.each(function (d) {
+        Droppables.remove(d)
+      });
       s.draggables.invoke('destroy');
 
       delete Sortable.sortables[s.element.id];
     }
   },
 
-  create: function(element) {
+  create:function (element) {
     element = $(element);
     var options = Object.extend({
-      element:     element,
-      tag:         'li',       // assumes li children, override with tag: 'tagname'
-      dropOnEmpty: false,
-      tree:        false,
-      treeTag:     'ul',
-      overlap:     'vertical', // one of 'vertical', 'horizontal'
-      constraint:  'vertical', // one of 'vertical', 'horizontal', false
-      containment: element,    // also takes array of elements (or id's); or false
-      handle:      false,      // or a CSS class
-      only:        false,
-      delay:       0,
-      hoverclass:  null,
-      ghosting:    false,
-      quiet:       false,
-      scroll:      false,
-      scrollSensitivity: 20,
-      scrollSpeed: 15,
-      format:      this.SERIALIZE_RULE,
+      element:element,
+      tag:'li', // assumes li children, override with tag: 'tagname'
+      dropOnEmpty:false,
+      tree:false,
+      treeTag:'ul',
+      overlap:'vertical', // one of 'vertical', 'horizontal'
+      constraint:'vertical', // one of 'vertical', 'horizontal', false
+      containment:element, // also takes array of elements (or id's); or false
+      handle:false, // or a CSS class
+      only:false,
+      delay:0,
+      hoverclass:null,
+      ghosting:false,
+      quiet:false,
+      scroll:false,
+      scrollSensitivity:20,
+      scrollSpeed:15,
+      format:this.SERIALIZE_RULE,
 
       // these take arrays of elements or ids and can be
       // used for better initialization performance
-      elements:    false,
-      handles:     false,
+      elements:false,
+      handles:false,
 
-      onChange:    Prototype.emptyFunction,
-      onUpdate:    Prototype.emptyFunction
+      onChange:Prototype.emptyFunction,
+      onUpdate:Prototype.emptyFunction
     }, arguments[1] || { });
 
     // clear any old sortable with same element
@@ -2887,47 +2979,47 @@ var Sortable = {
 
     // build options for the draggables
     var options_for_draggable = {
-      revert:      true,
-      quiet:       options.quiet,
-      scroll:      options.scroll,
-      scrollSpeed: options.scrollSpeed,
-      scrollSensitivity: options.scrollSensitivity,
-      delay:       options.delay,
-      ghosting:    options.ghosting,
-      constraint:  options.constraint,
-      handle:      options.handle };
-
-    if(options.starteffect)
+      revert:true,
+      quiet:options.quiet,
+      scroll:options.scroll,
+      scrollSpeed:options.scrollSpeed,
+      scrollSensitivity:options.scrollSensitivity,
+      delay:options.delay,
+      ghosting:options.ghosting,
+      constraint:options.constraint,
+      handle:options.handle };
+
+    if (options.starteffect)
       options_for_draggable.starteffect = options.starteffect;
 
-    if(options.reverteffect)
+    if (options.reverteffect)
       options_for_draggable.reverteffect = options.reverteffect;
     else
-      if(options.ghosting) options_for_draggable.reverteffect = function(element) {
-        element.style.top  = 0;
-        element.style.left = 0;
-      };
+    if (options.ghosting) options_for_draggable.reverteffect = function (element) {
+      element.style.top = 0;
+      element.style.left = 0;
+    };
 
-    if(options.endeffect)
+    if (options.endeffect)
       options_for_draggable.endeffect = options.endeffect;
 
-    if(options.zindex)
+    if (options.zindex)
       options_for_draggable.zindex = options.zindex;
 
     // build options for the droppables
     var options_for_droppable = {
-      overlap:     options.overlap,
-      containment: options.containment,
-      tree:        options.tree,
-      hoverclass:  options.hoverclass,
-      onHover:     Sortable.onHover
+      overlap:options.overlap,
+      containment:options.containment,
+      tree:options.tree,
+      hoverclass:options.hoverclass,
+      onHover:Sortable.onHover
     };
 
     var options_for_tree = {
-      onHover:      Sortable.onEmptyHover,
-      overlap:      options.overlap,
-      containment:  options.containment,
-      hoverclass:   options.hoverclass
+      onHover:Sortable.onEmptyHover,
+      overlap:options.overlap,
+      containment:options.containment,
+      hoverclass:options.hoverclass
     };
 
     // fix for gecko engine
@@ -2937,23 +3029,23 @@ var Sortable = {
     options.droppables = [];
 
     // drop on empty handling
-    if(options.dropOnEmpty || options.tree) {
+    if (options.dropOnEmpty || options.tree) {
       Droppables.add(element, options_for_tree);
       options.droppables.push(element);
     }
 
-    (options.elements || this.findElements(element, options) || []).each( function(e,i) {
+    (options.elements || this.findElements(element, options) || []).each(function (e, i) {
       var handle = options.handles ? $(options.handles[i]) :
         (options.handle ? $(e).select('.' + options.handle)[0] : e);
       options.draggables.push(
-        new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
+        new Draggable(e, Object.extend(options_for_draggable, { handle:handle })));
       Droppables.add(e, options_for_droppable);
-      if(options.tree) e.treeNode = element;
+      if (options.tree) e.treeNode = element;
       options.droppables.push(e);
     });
 
-    if(options.tree) {
-      (Sortable.findTreeElements(element, options) || []).each( function(e) {
+    if (options.tree) {
+      (Sortable.findTreeElements(element, options) || []).each(function (e) {
         Droppables.add(e, options_for_tree);
         e.treeNode = element;
         options.droppables.push(e);
@@ -2969,62 +3061,62 @@ var Sortable = {
   },
 
   // return all suitable-for-sortable elements in a guaranteed order
-  findElements: function(element, options) {
+  findElements:function (element, options) {
     return Element.findChildren(
       element, options.only, options.tree ? true : false, options.tag);
   },
 
-  findTreeElements: function(element, options) {
+  findTreeElements:function (element, options) {
     return Element.findChildren(
       element, options.only, options.tree ? true : false, options.treeTag);
   },
 
-  onHover: function(element, dropon, overlap) {
-    if(Element.isParent(dropon, element)) return;
+  onHover:function (element, dropon, overlap) {
+    if (Element.isParent(dropon, element)) return;
 
-    if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
+    if (overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
       return;
-    } else if(overlap>0.5) {
+    } else if (overlap > 0.5) {
       Sortable.mark(dropon, 'before');
-      if(dropon.previousSibling != element) {
+      if (dropon.previousSibling != element) {
         var oldParentNode = element.parentNode;
         element.style.visibility = "hidden"; // fix gecko rendering
         dropon.parentNode.insertBefore(element, dropon);
-        if(dropon.parentNode!=oldParentNode)
+        if (dropon.parentNode != oldParentNode)
           Sortable.options(oldParentNode).onChange(element);
         Sortable.options(dropon.parentNode).onChange(element);
       }
     } else {
       Sortable.mark(dropon, 'after');
       var nextElement = dropon.nextSibling || null;
-      if(nextElement != element) {
+      if (nextElement != element) {
         var oldParentNode = element.parentNode;
         element.style.visibility = "hidden"; // fix gecko rendering
         dropon.parentNode.insertBefore(element, nextElement);
-        if(dropon.parentNode!=oldParentNode)
+        if (dropon.parentNode != oldParentNode)
           Sortable.options(oldParentNode).onChange(element);
         Sortable.options(dropon.parentNode).onChange(element);
       }
     }
   },
 
-  onEmptyHover: function(element, dropon, overlap) {
+  onEmptyHover:function (element, dropon, overlap) {
     var oldParentNode = element.parentNode;
     var droponOptions = Sortable.options(dropon);
 
-    if(!Element.isParent(dropon, element)) {
+    if (!Element.isParent(dropon, element)) {
       var index;
 
-      var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only});
+      var children = Sortable.findElements(dropon, {tag:droponOptions.tag, only:droponOptions.only});
       var child = null;
 
-      if(children) {
+      if (children) {
         var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
 
         for (index = 0; index < children.length; index += 1) {
-          if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
-            offset -= Element.offsetSize (children[index], droponOptions.overlap);
-          } else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
+          if (offset - Element.offsetSize(children[index], droponOptions.overlap) >= 0) {
+            offset -= Element.offsetSize(children[index], droponOptions.overlap);
+          } else if (offset - (Element.offsetSize(children[index], droponOptions.overlap) / 2) >= 0) {
             child = index + 1 < children.length ? children[index + 1] : null;
             break;
           } else {
@@ -3041,34 +3133,34 @@ var Sortable = {
     }
   },
 
-  unmark: function() {
-    if(Sortable._marker) Sortable._marker.hide();
+  unmark:function () {
+    if (Sortable._marker) Sortable._marker.hide();
   },
 
-  mark: function(dropon, position) {
+  mark:function (dropon, position) {
     // mark on ghosting only
     var sortable = Sortable.options(dropon.parentNode);
-    if(sortable && !sortable.ghosting) return;
+    if (sortable && !sortable.ghosting) return;
 
-    if(!Sortable._marker) {
+    if (!Sortable._marker) {
       Sortable._marker =
         ($('dropmarker') || Element.extend(document.createElement('DIV'))).
           hide().addClassName('dropmarker').setStyle({position:'absolute'});
       document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
     }
     var offsets = dropon.cumulativeOffset();
-    Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'});
+    Sortable._marker.setStyle({left:offsets[0] + 'px', top:offsets[1] + 'px'});
 
-    if(position=='after')
-      if(sortable.overlap == 'horizontal')
-        Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'});
+    if (position == 'after')
+      if (sortable.overlap == 'horizontal')
+        Sortable._marker.setStyle({left:(offsets[0] + dropon.clientWidth) + 'px'});
       else
-        Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'});
+        Sortable._marker.setStyle({top:(offsets[1] + dropon.clientHeight) + 'px'});
 
     Sortable._marker.show();
   },
 
-  _tree: function(element, options, parent) {
+  _tree:function (element, options, parent) {
     var children = Sortable.findElements(element, options) || [];
 
     for (var i = 0; i < children.length; ++i) {
@@ -3077,48 +3169,48 @@ var Sortable = {
       if (!match) continue;
 
       var child = {
-        id: encodeURIComponent(match ? match[1] : null),
-        element: element,
-        parent: parent,
-        children: [],
-        position: parent.children.length,
-        container: $(children[i]).down(options.treeTag)
+        id:encodeURIComponent(match ? match[1] : null),
+        element:element,
+        parent:parent,
+        children:[],
+        position:parent.children.length,
+        container:$(children[i]).down(options.treeTag)
       };
 
       /* Get the element containing the children and recurse over it */
       if (child.container)
         this._tree(child.container, options, child);
 
-      parent.children.push (child);
+      parent.children.push(child);
     }
 
     return parent;
   },
 
-  tree: function(element) {
+  tree:function (element) {
     element = $(element);
     var sortableOptions = this.options(element);
     var options = Object.extend({
-      tag: sortableOptions.tag,
-      treeTag: sortableOptions.treeTag,
-      only: sortableOptions.only,
-      name: element.id,
-      format: sortableOptions.format
+      tag:sortableOptions.tag,
+      treeTag:sortableOptions.treeTag,
+      only:sortableOptions.only,
+      name:element.id,
+      format:sortableOptions.format
     }, arguments[1] || { });
 
     var root = {
-      id: null,
-      parent: null,
-      children: [],
-      container: element,
-      position: 0
+      id:null,
+      parent:null,
+      children:[],
+      container:element,
+      position:0
     };
 
     return Sortable._tree(element, options, root);
   },
 
   /* Construct a [i] index for a particular node */
-  _constructIndex: function(node) {
+  _constructIndex:function (node) {
     var index = '';
     do {
       if (node.id) index = '[' + node.position + ']' + index;
@@ -3126,27 +3218,27 @@ var Sortable = {
     return index;
   },
 
-  sequence: function(element) {
+  sequence:function (element) {
     element = $(element);
     var options = Object.extend(this.options(element), arguments[1] || { });
 
-    return $(this.findElements(element, options) || []).map( function(item) {
+    return $(this.findElements(element, options) || []).map(function (item) {
       return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
     });
   },
 
-  setSequence: function(element, new_sequence) {
+  setSequence:function (element, new_sequence) {
     element = $(element);
     var options = Object.extend(this.options(element), arguments[2] || { });
 
     var nodeMap = { };
-    this.findElements(element, options).each( function(n) {
-        if (n.id.match(options.format))
-            nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
-        n.parentNode.removeChild(n);
+    this.findElements(element, options).each(function (n) {
+      if (n.id.match(options.format))
+        nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
+      n.parentNode.removeChild(n);
     });
 
-    new_sequence.each(function(ident) {
+    new_sequence.each(function (ident) {
       var n = nodeMap[ident];
       if (n) {
         n[1].appendChild(n[0]);
@@ -3155,50 +3247,54 @@ var Sortable = {
     });
   },
 
-  serialize: function(element) {
+  serialize:function (element) {
     element = $(element);
     var options = Object.extend(Sortable.options(element), arguments[1] || { });
     var name = encodeURIComponent(
       (arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
 
     if (options.tree) {
-      return Sortable.tree(element, arguments[1]).children.map( function (item) {
-        return [name + Sortable._constructIndex(item) + "[id]=" +
-                encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
-      }).flatten().join('&');
+      return Sortable.tree(element, arguments[1]).children.map(
+        function (item) {
+          return [name + Sortable._constructIndex(item) + "[id]=" +
+            encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
+        }).flatten().join('&');
     } else {
-      return Sortable.sequence(element, arguments[1]).map( function(item) {
-        return name + "[]=" + encodeURIComponent(item);
-      }).join('&');
+      return Sortable.sequence(element, arguments[1]).map(
+        function (item) {
+          return name + "[]=" + encodeURIComponent(item);
+        }).join('&');
     }
   }
 };
 
 // Returns true if child is contained within element
-Element.isParent = function(child, element) {
+Element.isParent = function (child, element) {
   if (!child.parentNode || child == element) return false;
   if (child.parentNode == element) return true;
   return Element.isParent(child.parentNode, element);
 };
 
-Element.findChildren = function(element, only, recursive, tagName) {
-  if(!element.hasChildNodes()) return null;
+Element.findChildren = function (element, only, recursive, tagName) {
+  if (!element.hasChildNodes()) return null;
   tagName = tagName.toUpperCase();
-  if(only) only = [only].flatten();
+  if (only) only = [only].flatten();
   var elements = [];
-  $A(element.childNodes).each( function(e) {
-    if(e.tagName && e.tagName.toUpperCase()==tagName &&
-      (!only || (Element.classNames(e).detect(function(v) { return only.include(v) }))))
-        elements.push(e);
-    if(recursive) {
+  $A(element.childNodes).each(function (e) {
+    if (e.tagName && e.tagName.toUpperCase() == tagName &&
+      (!only || (Element.classNames(e).detect(function (v) {
+        return only.include(v)
+      }))))
+      elements.push(e);
+    if (recursive) {
       var grandchildren = Element.findChildren(e, only, recursive, tagName);
-      if(grandchildren) elements.push(grandchildren);
+      if (grandchildren) elements.push(grandchildren);
     }
   });
 
-  return (elements.length>0 ? elements.flatten() : []);
+  return (elements.length > 0 ? elements.flatten() : []);
 };
 
 Element.offsetSize = function (element, type) {
-  return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')];
+  return element['offset' + ((type == 'vertical' || type == 'height') ? 'Height' : 'Width')];
 };
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 06e96e8e81c..e4e0dac9717 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -224,44 +224,6 @@ div#sidebar .selected a, div#sidebar .selected a:hover, div#sidebar.selected a:v
   margin: 4px 0 0 0;
 }
 
-#projectResults {
-  position: relative;
-  background: #fff;
-  color: #111;
-  line-height: 1em;
-  border: 1px solid #ccc;
-  z-index: 999999;
-  margin: 0;
-  padding: 0;
-}
-
-#projectResults ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-#projectResults ul li.selected {
-  background-color: #4b9fd5;
-  color: #fff;
-  margin: 0;
-}
-
-#projectResults ul li {
-  float: none;
-  display: block;
-  list-style-type: none;
-  cursor: pointer;
-  color: #333;
-  margin: 0;
-  padding: 5px 10px;
-  line-height: 1em;
-}
-
-#projectResults strong {
-  font-weight: bold;
-}
-
 /*
   FOOTER
 */
@@ -491,10 +453,6 @@ h4, .h4 {
   color: #777;
 }
 
-.highlight {
-  font-weight: bold;
-}
-
 .subtitle {
   color: #777;
   font-size: 85%;
@@ -1238,7 +1196,7 @@ table.actionPlans td.progress {
 }
 
 table.actionPlans td.noprogress {
-  color: #777777; 
+  color: #777777;
   font-size: 93%;
   padding-left: 40px;
   padding-right: 40px;
@@ -1283,17 +1241,28 @@ div.progress div.note {
   white-space: nowrap;
 }
 
-/* AUTOCOMPLETE FIELDS */
+/* SEARCH AUTOCOMPLETE FIELDS */
+#searchResourcesInput {
+  color: #777;
+  font-size: 93%;
+}
+
 div.autocomplete {
   position: absolute;
-  width: 250px;
+  width: 600px;
+  right: 10px;
+  top: 10px;
   background-color: #fff;
   border: 1px solid #ccc;
   margin: 0;
   padding: 0;
   color: #111;
-  line-height: 1em;
-  text-shadow: none;
+  line-height: 18px;
+  -moz-box-shadow: 0 0 10px 5px #EFEFEF;
+  -webkit-box-shadow: 0 0 10px 5px #EFEFEF;
+  -o-box-shadow: 0 0 10px 5px #EFEFEF;
+  box-shadow: 0 0 10px 5px #EFEFEF;
+  z-index: 10000;
 }
 
 div.autocomplete ul {
@@ -1302,26 +1271,56 @@ div.autocomplete ul {
   padding: 0;
 }
 
-div.autocomplete ul li.selected {
-  background-color: #4b9fd5;
-  color: #fff;
-  margin: 0;
-}
-
 div.autocomplete ul li {
   list-style-type: none;
   display: block;
   margin: 0;
-  padding: 5px 10px;
+  padding: 3px 10px;
   cursor: pointer;
   color: #333;
-  line-height: 1em;
+  line-height: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
+
+div.autocomplete div.q {
+  font-size: 93%;
+  color: #777;
+  width: 85px;
+  text-align: right;
+  margin-right: 5px;
+  display: inline-block;
+
+  /* For IE 7 */
+  zoom: 1;
+  *display: inline;
+}
+
+div.autocomplete ul li img {
+  vertical-align: middle;
+}
+
+div.autocomplete ul li.selected {
+  background-color: #4b9fd5;
+  color: #fff;
+}
+
+div.autocomplete ul li.selected div.q {
+  color: #fff;
 }
 
 div.autocomplete strong {
   font-weight: bold;
 }
 
+div.autocompleteNote {
+  color: #777;
+  font-size: 85%;
+  background-color: #EFEFEF;
+  border-top: 1px solid #CCC;
+  padding: 1px 10px;
+}
+
 #gwtpage {
   width: 100%;
 }