ajax-scaffold-generator 2.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2006 Richard White
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README

@@ -0,0 +1,28 @@
+Description:
+    The ajax scaffold generator creates a controller to interact with a model.
+    If the model does not exist, it creates the model as well. Unlike the
+    standard scaffold, the ajax scaffold generator uses AJAX.
+
+    The generator takes a model name, an optional controller name, and a
+    list of views as arguments.  Scaffolded actions and views are created
+    automatically.  Any views left over generate empty stubs.
+
+    If a controller name is not given, the plural form of the model name
+    will be used.  The model and controller names may be given in CamelCase
+    or under_score and should not be suffixed with 'Model' or 'Controller'.
+    Both model and controller names may be prefixed with a module like a
+    file path; see the Modules Example for usage.
+
+Example:
+    ./script/generate ajax_scaffold Account Bank debit credit
+
+    This will generate an Account model and BankController with a full test
+    suite and a basic user interface.  Now create the accounts table in your
+    database and browse to http://localhost/bank/ -- voila, you're on Rails!
+
+Modules Example:
+    ./script/generate ajax_scaffold CreditCard 'admin/credit_card' suspend late_fee
+
+    This will generate a CreditCard model and CreditCardController controller
+    in the admin module.
+

data/ajax_scaffold_generator.rb

@@ -0,0 +1,123 @@
+require "rails_generator/generators/components/scaffold/scaffold_generator"
+
+class AjaxScaffoldingSandbox < ScaffoldingSandbox
+  def default_input_block
+    Proc.new { |record, column| "<div class=\"form-element\">\n  <label for=\"#{record}_#{column.name}\">#{column.human_name}</label>\n  #{input(record, column.name)}\n</div>\n" }
+  end
+end
+
+class AjaxScaffoldGenerator < ScaffoldGenerator
+
+  def manifest
+    record do |m|
+      # Check for class naming collisions.
+      m.class_collisions controller_class_path, "#{controller_class_name}Controller", "#{controller_class_name}ControllerTest", "#{controller_class_name}Helper"
+
+      # Controller, helper, views, and test directories.
+      m.directory File.join('app/controllers', controller_class_path)
+      m.directory File.join('app/helpers', controller_class_path)
+      m.directory File.join('app/views', controller_class_path, controller_file_name)
+      m.directory File.join('public/images')
+      m.directory File.join('test/functional', controller_class_path)
+
+      # Depend on model generator but skip if the model exists.
+      m.dependency 'model', [singular_name], :collision => :skip
+
+      # Scaffolded forms.
+      m.complex_template 'form.rhtml',
+        File.join('app/views',
+                  controller_class_path,
+                  controller_file_name,
+                  '_form.rhtml'),
+        :insert => 'form_scaffolding.rhtml',
+        :sandbox => lambda { create_sandbox },
+        :begin_mark => 'form',
+        :end_mark => 'eoform',
+        :mark_id => singular_name
+
+      # Scaffolded partials.
+      m.template "partial_item.rhtml",
+                    File.join('app/views',
+                              controller_class_path,
+                              controller_file_name,
+                              "_#{controller_file_name}.rhtml")
+
+      m.template "partial_form_errors.rhtml",
+                    File.join('app/views',
+                              controller_class_path,
+                              controller_file_name,
+                              "_form_errors.rhtml")
+
+      # Scaffolded views.
+      scaffold_views.each do |action|
+        m.template "view_#{action}.rhtml",
+                    File.join('app/views',
+                              controller_class_path,
+                              controller_file_name,
+                              "#{action}.rhtml"),
+                    :assigns => { :action => action }
+      end
+
+      # Controller class, functional test, helper, and views.
+      m.template 'controller.rb',
+                  File.join('app/controllers',
+                            controller_class_path,
+                            "#{controller_file_name}_controller.rb")
+
+      m.template 'functional_test.rb',
+                  File.join('test/functional',
+                            controller_class_path,
+                            "#{controller_file_name}_controller_test.rb")
+
+      m.template 'helper.rb',
+                  File.join('app/helpers',
+                            controller_class_path,
+                            "#{controller_file_name}_helper.rb")
+
+      # Layout and stylesheet.
+      m.template 'layout.rhtml',        "app/views/layouts/#{controller_file_name}.rhtml"
+      m.template 'style.css',           'public/stylesheets/ajax_scaffold.css'
+      m.template 'script.js',           'public/javascripts/ajax_scaffold.js'
+      m.template 'rico_corner.js',      'public/javascripts/rico_corner.js'
+      m.template 'indicator.gif',       'public/images/indicator.gif'
+      m.template 'add.gif',             'public/images/add.gif'
+      m.template 'error.gif',           'public/images/error.gif'
+
+      # Unscaffolded views.
+      unscaffolded_actions.each do |action|
+        path = File.join('app/views',
+                          controller_class_path,
+                          controller_file_name,
+                          "#{action}.rhtml")
+
+        m.template 'controller:view.rhtml', path,
+                    :assigns => { :action => action, :path => path }
+      end
+    end
+  end
+
+  protected
+    # Override with your own usage banner.
+    def banner
+      "Usage: #{$0} ajax_scaffold ModelName [ControllerName] [action, ...]"
+    end
+
+    def scaffold_views
+      %w( list edit new index )
+    end
+    
+    def create_sandbox
+      sandbox = AjaxScaffoldingSandbox.new
+      sandbox.singular_name = singular_name
+      begin
+        sandbox.model_instance = model_instance
+        sandbox.instance_variable_set("@#{singular_name}", sandbox.model_instance)
+      rescue ActiveRecord::StatementInvalid => e
+        logger.error "Before updating scaffolding from new DB schema, try creating a table for your model (#{class_name})"
+        raise SystemExit
+      end
+      sandbox.suffix = suffix
+      sandbox
+    end
+
+end

data/templates/controller.rb

@@ -0,0 +1,61 @@
+class <%= controller_class_name %>Controller < ApplicationController
+
+<% unless suffix -%>
+  def index
+
+  end
+<% end -%>
+
+<% for action in unscaffolded_actions -%>
+  def <%= action %><%= suffix %>
+  end
+<% end -%>
+
+  def list<%= suffix %>
+    @<%= plural_name %> = <%= model_name %>.find :all
+    render :layout => false
+  end
+
+  def new<%= suffix %>
+    @<%= singular_name %> = <%= model_name %>.new
+    
+    @temp_id = Time.new.to_i
+    @headers['<%= singular_name %>-id'] = @temp_id
+    @headers['Content-Type'] = 'text/html; charset=utf-8'
+    
+    render :layout => false
+    
+    # If you want to send an error message:
+    # render :inline => "Error text goes here", :layout => false, :status => 500
+  end
+
+  def create<%= suffix %>
+    @<%= singular_name %> = <%= model_name %>.new(params[:<%= singular_name %>])
+    if @<%= singular_name %>.save
+      @headers['<%= singular_name %>-id'] = @<%= singular_name %>.id
+      @headers['Content-Type'] = 'text/html; charset=utf-8'
+      render :partial => '<%= singular_name %><%= suffix %>', :layout => false
+    else
+      render :partial => 'form_errors', :layout => false, :status => 500
+    end
+  end
+
+  def edit<%= suffix %>
+    @<%= singular_name %> = <%= model_name %>.find(params[:id])
+    render :layout => false
+  end
+
+  def update
+    @<%= singular_name %> = <%= model_name %>.find(params[:id])
+    if @<%= singular_name %>.update_attributes(params[:<%= singular_name %>])
+      render :partial => '<%= singular_name %><%= suffix %>', :layout => false
+    else
+      render :partial => 'form_errors', :layout => false, :status => 500
+    end
+  end
+
+  def destroy<%= suffix %>
+    <%= model_name %>.find(params[:id]).destroy
+    render :nothing => true
+  end
+end

data/templates/form.rhtml

@@ -0,0 +1,5 @@
+<fieldset>
+	<div class="row">
+		<%= template_for_inclusion %>
+	</div>
+</fieldset>

data/templates/form_scaffolding.rhtml

@@ -0,0 +1 @@
+<%= all_input_tags(@model_instance, @singular_name, {}) %>

data/templates/functional_test.rb

@@ -0,0 +1,88 @@
+require File.dirname(__FILE__) + '<%= "/.." * controller_class_nesting_depth %>/../test_helper'
+require '<%= controller_file_path %>_controller'
+
+# Re-raise errors caught by the controller.
+class <%= controller_class_name %>Controller; def rescue_action(e) raise e end; end
+
+class <%= controller_class_name %>ControllerTest < Test::Unit::TestCase
+  fixtures :<%= table_name %>
+
+  def setup
+    @controller = <%= controller_class_name %>Controller.new
+    @request    = ActionController::TestRequest.new
+    @response   = ActionController::TestResponse.new
+  end
+
+<% for action in unscaffolded_actions -%>
+  def test_<%= action %>
+    get :<%= action %>
+    assert_response :success
+    assert_template '<%= action %>'
+  end
+
+<% end -%>
+<% unless suffix -%>
+  def test_index
+    get :index
+    assert_response :success
+    assert_template 'list'
+  end
+
+<% end -%>
+  def test_list<%= suffix %>
+    get :list<%= suffix %>
+
+    assert_response :success
+    assert_template 'list<%= suffix %>'
+
+    assert_not_nil assigns(:<%= plural_name %>)
+  end
+
+  def test_new<%= suffix %>
+    get :new<%= suffix %>
+
+    assert_response :success
+    assert_template 'new<%= suffix %>'
+
+    assert_not_nil assigns(:<%= singular_name %>)
+  end
+
+  def test_create
+    num_<%= plural_name %> = <%= model_name %>.count
+
+    post :create<%= suffix %>, :<%= singular_name %> => {}
+
+    assert_response :redirect
+    assert_redirected_to :action => 'list<%= suffix %>'
+
+    assert_equal num_<%= plural_name %> + 1, <%= model_name %>.count
+  end
+
+  def test_edit<%= suffix %>
+    get :edit<%= suffix %>, :id => 1
+
+    assert_response :success
+    assert_template 'edit<%= suffix %>'
+
+    assert_not_nil assigns(:<%= singular_name %>)
+    assert assigns(:<%= singular_name %>).valid?
+  end
+
+  def test_update<%= suffix %>
+    post :update<%= suffix %>, :id => 1
+    assert_response :redirect
+    assert_redirected_to :action => 'show<%= suffix %>', :id => 1
+  end
+
+  def test_destroy<%= suffix %>
+    assert_not_nil <%= model_name %>.find(1)
+
+    post :destroy, :id => 1
+    assert_response :redirect
+    assert_redirected_to :action => 'list<%= suffix %>'
+
+    assert_raise(ActiveRecord::RecordNotFound) {
+      <%= model_name %>.find(1)
+    }
+  end
+end

data/templates/helper.rb

@@ -0,0 +1,12 @@
+module <%= controller_class_name %>Helper
+
+  def num_columns
+    <%= model_name %>.content_columns.length + 1 
+  end
+  
+  # This can be moved into application_helper.rb
+  def loading_indicator_tag(scope,id)
+    "<img src=\"/images/indicator.gif\" style=\"display: none;\" id=\"#{scope}-#{id}-loading-indicator\" alt=\"loading indicator\" class=\"loading-indicator\" />"
+  end
+
+end

data/templates/layout.rhtml

@@ -0,0 +1,15 @@
+<!DOCTYPE html 
+     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+     "DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+  <title><%= Inflector.titleize(plural_name) %></title>
+  <%%= stylesheet_link_tag 'ajax_scaffold', :media => 'all' %>
+  <%%= javascript_include_tag 'prototype', 'effects', 'rico_corner', 'ajax_scaffold' %>
+</head>
+<body>
+
+<%%= @content_for_layout %>
+
+</body>
+</html>

data/templates/partial_form_errors.rhtml

@@ -0,0 +1,9 @@
+<%% unless @<%= singular_name %>.nil? %>
+<%%= error_messages_for '<%= singular_name %>' %>
+<%% end -%>
+
+<%% for name in [:notice, :warning, :error, :message] %>
+  <%% if @flash[name] %>
+    <%%= "<div class=\"#{name}\">#{@flash[name]}</div>" %>
+  <%% end %>
+<%% end %>

data/templates/partial_item.rhtml

@@ -0,0 +1,25 @@
+<tr id="view-<%= singular_name %>-<%%= <%= singular_name %>.id %>">
+	<%% for column in <%= model_name %>.content_columns %>
+	<td><%%=h <%= singular_name %>.send(column.name) %>&nbsp;</td>
+	<%% end %>
+ 	<td class="actions">
+ 	  <div>
+ 	  <%%= loading_indicator_tag '<%= singular_name %>', "edit-#{<%= singular_name %>.id}" %>
+   	<%%= link_to_remote "Edit", 
+   				:url => { :controller => '<%= controller_name %>', :action => 'edit', :id => <%= singular_name %> }, 
+   				:loading => "AjaxScaffold.editOnLoading(request,'<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:success => "AjaxScaffold.editOnSuccess(request,'<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:failure => "AjaxScaffold.editOnFailure(request,'<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:complete => "AjaxScaffold.editOnComplete(request,'<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:post => true; %>
+   	<%%= link_to_remote "Delete", 
+   				:url => { :controller => '<%= controller_name %>',:action => 'destroy', :id => <%= singular_name %> }, 
+   				:confirm => 'Are you sure?', 
+   				:loading => "AjaxScaffold.deleteOnLoading('<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:success => "AjaxScaffold.deleteOnSuccess('<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:failure => "AjaxScaffold.deleteOnFailure('<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:complete => "AjaxScaffold.deleteOnComplete('<%= singular_name %>', #{<%= singular_name %>.id});",
+   				:post => true; %>
+   	</div>
+  </td>
+</tr>

data/templates/rico_corner.js

@@ -0,0 +1,781 @@
+/**
+  *
+  *  Copyright 2005 Sabre Airline Solutions
+  *
+  *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+  *  file except in compliance with the License. You may obtain a copy of the License at
+  *
+  *         http://www.apache.org/licenses/LICENSE-2.0
+  *
+  *  Unless required by applicable law or agreed to in writing, software distributed under the
+  *  License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  *  either express or implied. See the License for the specific language governing permissions
+  *  and limitations under the License.
+  **/
+
+
+//-------------------- rico.js
+var Rico = {
+  Version: '1.1.0',
+  prototypeVersion: parseFloat(Prototype.Version.split(".")[0] + "." + Prototype.Version.split(".")[1])
+}
+
+
+
+
+//-------------------- ricoColor.js
+Rico.Color = Class.create();
+
+Rico.Color.prototype = {
+
+   initialize: function(red, green, blue) {
+      this.rgb = { r: red, g : green, b : blue };
+   },
+
+   setRed: function(r) {
+      this.rgb.r = r;
+   },
+
+   setGreen: function(g) {
+      this.rgb.g = g;
+   },
+
+   setBlue: function(b) {
+      this.rgb.b = b;
+   },
+
+   setHue: function(h) {
+
+      // get an HSB model, and set the new hue...
+      var hsb = this.asHSB();
+      hsb.h = h;
+
+      // convert back to RGB...
+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
+   },
+
+   setSaturation: function(s) {
+      // get an HSB model, and set the new hue...
+      var hsb = this.asHSB();
+      hsb.s = s;
+
+      // convert back to RGB and set values...
+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
+   },
+
+   setBrightness: function(b) {
+      // get an HSB model, and set the new hue...
+      var hsb = this.asHSB();
+      hsb.b = b;
+
+      // convert back to RGB and set values...
+      this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );
+   },
+
+   darken: function(percent) {
+      var hsb  = this.asHSB();
+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));
+   },
+
+   brighten: function(percent) {
+      var hsb  = this.asHSB();
+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));
+   },
+
+   blend: function(other) {
+      this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);
+      this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);
+      this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);
+   },
+
+   isBright: function() {
+      var hsb = this.asHSB();
+      return this.asHSB().b > 0.5;
+   },
+
+   isDark: function() {
+      return ! this.isBright();
+   },
+
+   asRGB: function() {
+      return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";
+   },
+
+   asHex: function() {
+      return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
+   },
+
+   asHSB: function() {
+      return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);
+   },
+
+   toString: function() {
+      return this.asHex();
+   }
+
+};
+
+Rico.Color.createFromHex = function(hexCode) {
+  if(hexCode.length==4) {
+    var shortHexCode = hexCode; 
+    var hexCode = '#';
+    for(var i=1;i<4;i++) hexCode += (shortHexCode.charAt(i) + 
+shortHexCode.charAt(i));
+  }
+   if ( hexCode.indexOf('#') == 0 )
+      hexCode = hexCode.substring(1);
+   var red   = hexCode.substring(0,2);
+   var green = hexCode.substring(2,4);
+   var blue  = hexCode.substring(4,6);
+   return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );
+}
+
+/**
+ * Factory method for creating a color from the background of
+ * an HTML element.
+ */
+Rico.Color.createColorFromBackground = function(elem) {
+
+   var actualColor = RicoUtil.getElementsComputedStyle($(elem), "backgroundColor", "background-color");
+
+   if ( actualColor == "transparent" && elem.parentNode )
+      return Rico.Color.createColorFromBackground(elem.parentNode);
+
+   if ( actualColor == null )
+      return new Rico.Color(255,255,255);
+
+   if ( actualColor.indexOf("rgb(") == 0 ) {
+      var colors = actualColor.substring(4, actualColor.length - 1 );
+      var colorArray = colors.split(",");
+      return new Rico.Color( parseInt( colorArray[0] ),
+                            parseInt( colorArray[1] ),
+                            parseInt( colorArray[2] )  );
+
+   }
+   else if ( actualColor.indexOf("#") == 0 ) {
+      return Rico.Color.createFromHex(actualColor);
+   }
+   else
+      return new Rico.Color(255,255,255);
+}
+
+Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {
+
+   var red   = 0;
+	var green = 0;
+	var blue  = 0;
+
+   if (saturation == 0) {
+      red = parseInt(brightness * 255.0 + 0.5);
+	   green = red;
+	   blue = red;
+	}
+	else {
+      var h = (hue - Math.floor(hue)) * 6.0;
+      var f = h - Math.floor(h);
+      var p = brightness * (1.0 - saturation);
+      var q = brightness * (1.0 - saturation * f);
+      var t = brightness * (1.0 - (saturation * (1.0 - f)));
+
+      switch (parseInt(h)) {
+         case 0:
+            red   = (brightness * 255.0 + 0.5);
+            green = (t * 255.0 + 0.5);
+            blue  = (p * 255.0 + 0.5);
+            break;
+         case 1:
+            red   = (q * 255.0 + 0.5);
+            green = (brightness * 255.0 + 0.5);
+            blue  = (p * 255.0 + 0.5);
+            break;
+         case 2:
+            red   = (p * 255.0 + 0.5);
+            green = (brightness * 255.0 + 0.5);
+            blue  = (t * 255.0 + 0.5);
+            break;
+         case 3:
+            red   = (p * 255.0 + 0.5);
+            green = (q * 255.0 + 0.5);
+            blue  = (brightness * 255.0 + 0.5);
+            break;
+         case 4:
+            red   = (t * 255.0 + 0.5);
+            green = (p * 255.0 + 0.5);
+            blue  = (brightness * 255.0 + 0.5);
+            break;
+          case 5:
+            red   = (brightness * 255.0 + 0.5);
+            green = (p * 255.0 + 0.5);
+            blue  = (q * 255.0 + 0.5);
+            break;
+	    }
+	}
+
+   return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };
+}
+
+Rico.Color.RGBtoHSB = function(r, g, b) {
+
+   var hue;
+   var saturation;
+   var brightness;
+
+   var cmax = (r > g) ? r : g;
+   if (b > cmax)
+      cmax = b;
+
+   var cmin = (r < g) ? r : g;
+   if (b < cmin)
+      cmin = b;
+
+   brightness = cmax / 255.0;
+   if (cmax != 0)
+      saturation = (cmax - cmin)/cmax;
+   else
+      saturation = 0;
+
+   if (saturation == 0)
+      hue = 0;
+   else {
+      var redc   = (cmax - r)/(cmax - cmin);
+    	var greenc = (cmax - g)/(cmax - cmin);
+    	var bluec  = (cmax - b)/(cmax - cmin);
+
+    	if (r == cmax)
+    	   hue = bluec - greenc;
+    	else if (g == cmax)
+    	   hue = 2.0 + redc - bluec;
+      else
+    	   hue = 4.0 + greenc - redc;
+
+    	hue = hue / 6.0;
+    	if (hue < 0)
+    	   hue = hue + 1.0;
+   }
+
+   return { h : hue, s : saturation, b : brightness };
+}
+
+
+//-------------------- ricoCorner.js
+Rico.Corner = {
+
+   round: function(e, options) {
+      var e = $(e);
+      this._setOptions(options);
+
+      var color = this.options.color;
+      if ( this.options.color == "fromElement" )
+         color = this._background(e);
+
+      var bgColor = this.options.bgColor;
+      if ( this.options.bgColor == "fromParent" )
+         bgColor = this._background(e.offsetParent);
+
+      this._roundCornersImpl(e, color, bgColor);
+   },
+
+   _roundCornersImpl: function(e, color, bgColor) {
+      if(this.options.border)
+         this._renderBorder(e,bgColor);
+      if(this._isTopRounded())
+         this._roundTopCorners(e,color,bgColor);
+      if(this._isBottomRounded())
+         this._roundBottomCorners(e,color,bgColor);
+   },
+
+   _renderBorder: function(el,bgColor) {
+      var borderValue = "1px solid " + this._borderColor(bgColor);
+      var borderL = "border-left: "  + borderValue;
+      var borderR = "border-right: " + borderValue;
+      var style   = "style='" + borderL + ";" + borderR +  "'";
+      el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>"
+   },
+
+   _roundTopCorners: function(el, color, bgColor) {
+      var corner = this._createCorner(bgColor);
+      for(var i=0 ; i < this.options.numSlices ; i++ )
+         corner.appendChild(this._createCornerSlice(color,bgColor,i,"top"));
+      el.style.paddingTop = 0;
+      el.insertBefore(corner,el.firstChild);
+   },
+
+   _roundBottomCorners: function(el, color, bgColor) {
+      var corner = this._createCorner(bgColor);
+      for(var i=(this.options.numSlices-1) ; i >= 0 ; i-- )
+         corner.appendChild(this._createCornerSlice(color,bgColor,i,"bottom"));
+      el.style.paddingBottom = 0;
+      el.appendChild(corner);
+   },
+
+   _createCorner: function(bgColor) {
+      var corner = document.createElement("div");
+      corner.style.backgroundColor = (this._isTransparent() ? "transparent" : bgColor);
+      return corner;
+   },
+
+   _createCornerSlice: function(color,bgColor, n, position) {
+      var slice = document.createElement("span");
+
+      var inStyle = slice.style;
+      inStyle.backgroundColor = color;
+      inStyle.display  = "block";
+      inStyle.height   = "1px";
+      inStyle.overflow = "hidden";
+      inStyle.fontSize = "1px";
+
+      var borderColor = this._borderColor(color,bgColor);
+      if ( this.options.border && n == 0 ) {
+         inStyle.borderTopStyle    = "solid";
+         inStyle.borderTopWidth    = "1px";
+         inStyle.borderLeftWidth   = "0px";
+         inStyle.borderRightWidth  = "0px";
+         inStyle.borderBottomWidth = "0px";
+         inStyle.height            = "0px"; // assumes css compliant box model
+         inStyle.borderColor       = borderColor;
+      }
+      else if(borderColor) {
+         inStyle.borderColor = borderColor;
+         inStyle.borderStyle = "solid";
+         inStyle.borderWidth = "0px 1px";
+      }
+
+      if ( !this.options.compact && (n == (this.options.numSlices-1)) )
+         inStyle.height = "2px";
+
+      this._setMargin(slice, n, position);
+      this._setBorder(slice, n, position);
+      return slice;
+   },
+
+   _setOptions: function(options) {
+      this.options = {
+         corners : "all",
+         color   : "fromElement",
+         bgColor : "fromParent",
+         blend   : true,
+         border  : false,
+         compact : false
+      }
+      Object.extend(this.options, options || {});
+
+      this.options.numSlices = this.options.compact ? 2 : 4;
+      if ( this._isTransparent() )
+         this.options.blend = false;
+   },
+
+   _whichSideTop: function() {
+      if ( this._hasString(this.options.corners, "all", "top") )
+         return "";
+
+      if ( this.options.corners.indexOf("tl") >= 0 && this.options.corners.indexOf("tr") >= 0 )
+         return "";
+
+      if (this.options.corners.indexOf("tl") >= 0)
+         return "left";
+      else if (this.options.corners.indexOf("tr") >= 0)
+          return "right";
+      return "";
+   },
+
+   _whichSideBottom: function() {
+      if ( this._hasString(this.options.corners, "all", "bottom") )
+         return "";
+
+      if ( this.options.corners.indexOf("bl")>=0 && this.options.corners.indexOf("br")>=0 )
+         return "";
+
+      if(this.options.corners.indexOf("bl") >=0)
+         return "left";
+      else if(this.options.corners.indexOf("br")>=0)
+         return "right";
+      return "";
+   },
+
+   _borderColor : function(color,bgColor) {
+      if ( color == "transparent" )
+         return bgColor;
+      else if ( this.options.border )
+         return this.options.border;
+      else if ( this.options.blend )
+         return this._blend( bgColor, color );
+      else
+         return "";
+   },
+
+
+   _setMargin: function(el, n, corners) {
+      var marginSize = this._marginSize(n);
+      var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
+
+      if ( whichSide == "left" ) {
+         el.style.marginLeft = marginSize + "px"; el.style.marginRight = "0px";
+      }
+      else if ( whichSide == "right" ) {
+         el.style.marginRight = marginSize + "px"; el.style.marginLeft  = "0px";
+      }
+      else {
+         el.style.marginLeft = marginSize + "px"; el.style.marginRight = marginSize + "px";
+      }
+   },
+
+   _setBorder: function(el,n,corners) {
+      var borderSize = this._borderSize(n);
+      var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
+      if ( whichSide == "left" ) {
+         el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = "0px";
+      }
+      else if ( whichSide == "right" ) {
+         el.style.borderRightWidth = borderSize + "px"; el.style.borderLeftWidth  = "0px";
+      }
+      else {
+         el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
+      }
+      if (this.options.border != false)
+        el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
+   },
+
+   _marginSize: function(n) {
+      if ( this._isTransparent() )
+         return 0;
+
+      var marginSizes          = [ 5, 3, 2, 1 ];
+      var blendedMarginSizes   = [ 3, 2, 1, 0 ];
+      var compactMarginSizes   = [ 2, 1 ];
+      var smBlendedMarginSizes = [ 1, 0 ];
+
+      if ( this.options.compact && this.options.blend )
+         return smBlendedMarginSizes[n];
+      else if ( this.options.compact )
+         return compactMarginSizes[n];
+      else if ( this.options.blend )
+         return blendedMarginSizes[n];
+      else
+         return marginSizes[n];
+   },
+
+   _borderSize: function(n) {
+      var transparentBorderSizes = [ 5, 3, 2, 1 ];
+      var blendedBorderSizes     = [ 2, 1, 1, 1 ];
+      var compactBorderSizes     = [ 1, 0 ];
+      var actualBorderSizes      = [ 0, 2, 0, 0 ];
+
+      if ( this.options.compact && (this.options.blend || this._isTransparent()) )
+         return 1;
+      else if ( this.options.compact )
+         return compactBorderSizes[n];
+      else if ( this.options.blend )
+         return blendedBorderSizes[n];
+      else if ( this.options.border )
+         return actualBorderSizes[n];
+      else if ( this._isTransparent() )
+         return transparentBorderSizes[n];
+      return 0;
+   },
+
+   _hasString: function(str) { for(var i=1 ; i<arguments.length ; i++) if (str.indexOf(arguments[i]) >= 0) return true; return false; },
+   _blend: function(c1, c2) { var cc1 = Rico.Color.createFromHex(c1); cc1.blend(Rico.Color.createFromHex(c2)); return cc1; },
+   _background: function(el) { try { return Rico.Color.createColorFromBackground(el).asHex(); } catch(err) { return "#ffffff"; } },
+   _isTransparent: function() { return this.options.color == "transparent"; },
+   _isTopRounded: function() { return this._hasString(this.options.corners, "all", "top", "tl", "tr"); },
+   _isBottomRounded: function() { return this._hasString(this.options.corners, "all", "bottom", "bl", "br"); },
+   _hasSingleTextChild: function(el) { return el.childNodes.length == 1 && el.childNodes[0].nodeType == 3; }
+}
+
+//-------------------- ricoUtil.js
+Rico.ArrayExtensions = new Array();
+
+if (Object.prototype.extend) {
+   // in prototype.js...
+   Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Object.prototype.extend;
+}else{
+  Object.prototype.extend = function(object) {
+    return Object.extend.apply(this, [this, object]);
+  }
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Object.prototype.extend;
+}
+
+if (Array.prototype.push) {
+   // in prototype.js...
+   Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.push;
+}
+
+if (!Array.prototype.remove) {
+   Array.prototype.remove = function(dx) {
+      if( isNaN(dx) || dx > this.length )
+         return false;
+      for( var i=0,n=0; i<this.length; i++ )
+         if( i != dx )
+            this[n++]=this[i];
+      this.length-=1;
+   };
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.remove;
+}
+
+if (!Array.prototype.removeItem) {
+   Array.prototype.removeItem = function(item) {
+      for ( var i = 0 ; i < this.length ; i++ )
+         if ( this[i] == item ) {
+            this.remove(i);
+            break;
+         }
+   };
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.removeItem;
+}
+
+if (!Array.prototype.indices) {
+   Array.prototype.indices = function() {
+      var indexArray = new Array();
+      for ( index in this ) {
+         var ignoreThis = false;
+         for ( var i = 0 ; i < Rico.ArrayExtensions.length ; i++ ) {
+            if ( this[index] == Rico.ArrayExtensions[i] ) {
+               ignoreThis = true;
+               break;
+            }
+         }
+         if ( !ignoreThis )
+            indexArray[ indexArray.length ] = index;
+      }
+      return indexArray;
+   }
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.indices;
+}
+
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.unique;
+  Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.inArray;
+
+
+// Create the loadXML method and xml getter for Mozilla
+if ( window.DOMParser &&
+	  window.XMLSerializer &&
+	  window.Node && Node.prototype && Node.prototype.__defineGetter__ ) {
+
+   if (!Document.prototype.loadXML) {
+      Document.prototype.loadXML = function (s) {
+         var doc2 = (new DOMParser()).parseFromString(s, "text/xml");
+         while (this.hasChildNodes())
+            this.removeChild(this.lastChild);
+
+         for (var i = 0; i < doc2.childNodes.length; i++) {
+            this.appendChild(this.importNode(doc2.childNodes[i], true));
+         }
+      };
+	}
+
+	Document.prototype.__defineGetter__( "xml",
+	   function () {
+		   return (new XMLSerializer()).serializeToString(this);
+	   }
+	 );
+}
+
+document.getElementsByTagAndClassName = function(tagName, className) {
+  if ( tagName == null )
+     tagName = '*';
+
+  var children = document.getElementsByTagName(tagName) || document.all;
+  var elements = new Array();
+
+  if ( className == null )
+    return children;
+
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    var classNames = child.className.split(' ');
+    for (var j = 0; j < classNames.length; j++) {
+      if (classNames[j] == className) {
+        elements.push(child);
+        break;
+      }
+    }
+  }
+
+  return elements;
+}
+
+var RicoUtil = {
+
+   getElementsComputedStyle: function ( htmlElement, cssProperty, mozillaEquivalentCSS) {
+      if ( arguments.length == 2 )
+         mozillaEquivalentCSS = cssProperty;
+
+      var el = $(htmlElement);
+      if ( el.currentStyle )
+         return el.currentStyle[cssProperty];
+      else
+         return document.defaultView.getComputedStyle(el, null).getPropertyValue(mozillaEquivalentCSS);
+   },
+
+   createXmlDocument : function() {
+      if (document.implementation && document.implementation.createDocument) {
+         var doc = document.implementation.createDocument("", "", null);
+
+         if (doc.readyState == null) {
+            doc.readyState = 1;
+            doc.addEventListener("load", function () {
+               doc.readyState = 4;
+               if (typeof doc.onreadystatechange == "function")
+                  doc.onreadystatechange();
+            }, false);
+         }
+
+         return doc;
+      }
+
+      if (window.ActiveXObject)
+          return Try.these(
+            function() { return new ActiveXObject('MSXML2.DomDocument')   },
+            function() { return new ActiveXObject('Microsoft.DomDocument')},
+            function() { return new ActiveXObject('MSXML.DomDocument')    },
+            function() { return new ActiveXObject('MSXML3.DomDocument')   }
+          ) || false;
+
+      return null;
+   },
+
+   getContentAsString: function( parentNode ) {
+      return parentNode.xml != undefined ? 
+         this._getContentAsStringIE(parentNode) :
+         this._getContentAsStringMozilla(parentNode);
+   },
+
+  _getContentAsStringIE: function(parentNode) {
+     var contentStr = "";
+     for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) {
+         var n = parentNode.childNodes[i];
+         if (n.nodeType == 4) {
+             contentStr += n.nodeValue;
+         }
+         else {
+           contentStr += n.xml;
+       }
+     }
+     return contentStr;
+  },
+
+  _getContentAsStringMozilla: function(parentNode) {
+     var xmlSerializer = new XMLSerializer();
+     var contentStr = "";
+     for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) {
+          var n = parentNode.childNodes[i];
+          if (n.nodeType == 4) { // CDATA node
+              contentStr += n.nodeValue;
+          }
+          else {
+            contentStr += xmlSerializer.serializeToString(n);
+        }
+     }
+     return contentStr;
+  },
+
+   toViewportPosition: function(element) {
+      return this._toAbsolute(element,true);
+   },
+
+   toDocumentPosition: function(element) {
+      return this._toAbsolute(element,false);
+   },
+
+   /**
+    *  Compute the elements position in terms of the window viewport
+    *  so that it can be compared to the position of the mouse (dnd)
+    *  This is additions of all the offsetTop,offsetLeft values up the
+    *  offsetParent hierarchy, ...taking into account any scrollTop,
+    *  scrollLeft values along the way...
+    *
+    * IE has a bug reporting a correct offsetLeft of elements within a
+    * a relatively positioned parent!!!
+    **/
+   _toAbsolute: function(element,accountForDocScroll) {
+
+      if ( navigator.userAgent.toLowerCase().indexOf("msie") == -1 )
+         return this._toAbsoluteMozilla(element,accountForDocScroll);
+
+      var x = 0;
+      var y = 0;
+      var parent = element;
+      while ( parent ) {
+
+         var borderXOffset = 0;
+         var borderYOffset = 0;
+         if ( parent != element ) {
+            var borderXOffset = parseInt(this.getElementsComputedStyle(parent, "borderLeftWidth" ));
+            var borderYOffset = parseInt(this.getElementsComputedStyle(parent, "borderTopWidth" ));
+            borderXOffset = isNaN(borderXOffset) ? 0 : borderXOffset;
+            borderYOffset = isNaN(borderYOffset) ? 0 : borderYOffset;
+         }
+
+         x += parent.offsetLeft - parent.scrollLeft + borderXOffset;
+         y += parent.offsetTop - parent.scrollTop + borderYOffset;
+         parent = parent.offsetParent;
+      }
+
+      if ( accountForDocScroll ) {
+         x -= this.docScrollLeft();
+         y -= this.docScrollTop();
+      }
+
+      return { x:x, y:y };
+   },
+
+   /**
+    *  Mozilla did not report all of the parents up the hierarchy via the
+    *  offsetParent property that IE did.  So for the calculation of the
+    *  offsets we use the offsetParent property, but for the calculation of
+    *  the scrollTop/scrollLeft adjustments we navigate up via the parentNode
+    *  property instead so as to get the scroll offsets...
+    *
+    **/
+   _toAbsoluteMozilla: function(element,accountForDocScroll) {
+      var x = 0;
+      var y = 0;
+      var parent = element;
+      while ( parent ) {
+         x += parent.offsetLeft;
+         y += parent.offsetTop;
+         parent = parent.offsetParent;
+      }
+
+      parent = element;
+      while ( parent &&
+              parent != document.body &&
+              parent != document.documentElement ) {
+         if ( parent.scrollLeft  )
+            x -= parent.scrollLeft;
+         if ( parent.scrollTop )
+            y -= parent.scrollTop;
+         parent = parent.parentNode;
+      }
+
+      if ( accountForDocScroll ) {
+         x -= this.docScrollLeft();
+         y -= this.docScrollTop();
+      }
+
+      return { x:x, y:y };
+   },
+
+   docScrollLeft: function() {
+      if ( window.pageXOffset )
+         return window.pageXOffset;
+      else if ( document.documentElement && document.documentElement.scrollLeft )
+         return document.documentElement.scrollLeft;
+      else if ( document.body )
+         return document.body.scrollLeft;
+      else
+         return 0;
+   },
+
+   docScrollTop: function() {
+      if ( window.pageYOffset )
+         return window.pageYOffset;
+      else if ( document.documentElement && document.documentElement.scrollTop )
+         return document.documentElement.scrollTop;
+      else if ( document.body )
+         return document.body.scrollTop;
+      else
+         return 0;
+   }
+
+};