Adding widget resources

resources/widgets/javascripts/element.js

@@ -0,0 +1,60 @@
+Element.implement({
+  fadeIn: function(complete) {
+    this.setStyle('opacity', 0);
+    this.show();
+    this.get('tween', {
+      onComplete: complete ? complete.bind(this) : null,
+      link: 'chain'
+    }).start('opacity', 1);
+  },
+  fadeOut: function(complete) {
+    this.setStyle('opacity', 1);
+    this.show();
+    this.get('tween', {
+      onComplete: function() {
+        if (complete) complete.bind(this)();
+        this.hide();
+      }.bind(this),
+      link: 'chain'
+    }).start('opacity', 0);
+  },
+  focusFirst: function(select) {
+		var found = false;
+		this.getElements('input, textarea').each(function(el) {
+			if ((el.tagName == 'TEXTAREA' || el.type == 'text') && el.visible() && !found) {
+			  el.focus();
+				if (select) el.select();
+				found = true;
+			}
+		});
+	},
+  hide: function() {
+    this.setStyle('display', 'none');
+  },
+  render: function(data, return_html) {
+    var html = TrimPath.processDOMTemplate(this.id, $merge({}, data));
+    if (!return_html) {
+     var el = new Element('div', { html: html });
+     html = el.getChildren();
+     html = html.length == 1 ? html[0] : html;
+    }
+    return html;
+  },
+  show: function() {
+    this.setStyle('display', '');
+  },
+  visible: function() {
+		return (this.style.display != 'none');
+	},
+  zebra: function(class_name, column_count, only) {
+    var do_it = true;
+    this.getChildren().each(function(item, index) {
+      var col = index % column_count;
+      if (col == 0) do_it = !do_it;
+      if (do_it && (!$chk(only) || only == col))
+        item.addClass(class_name);
+      else
+        item.removeClass(class_name);
+    });
+  }
+});

resources/widgets/javascripts/init.js

@@ -0,0 +1,2 @@
+var Global = Global || {};
+Global.authenticity_token = <%= form_authenticity_token.inspect %>;

resources/widgets/javascripts/tbl.js

@@ -0,0 +1,65 @@
+/*
+Generates a div-based table from an array of strings.
+
+Example:
+  // Inserts a 2 row, 2 column table into the top of $('id')
+  Tbl('className', [ 'A', 'B', 'C', 'D' ], '%', 50, 50).inject($('id'), 'top');
+
+Requires the following CSS to be present:
+  .row
+    :overflow hidden
+    .parent
+      :float left
+      :display block
+
+*/
+var Tbl = function() {
+  args = $A(arguments);
+
+  var cname  = args.shift();
+  var data   = $A(args.shift());
+  var unit   = args.shift();
+  var widths = $type(args[0]) == 'array' ? args[0] : args;
+
+  var container = new Element('div', {
+    'class':   cname + ' row',
+    styles : { width: widths.sum() + unit }
+  });
+
+  var margin;
+  (data.length).times(function(x) {
+    var col = x % widths.length;
+    if (col == 0) {
+      margin  = widths.sum();
+      margin -= widths[col];
+    }
+    var first_last = (col == 0 ? ' first' : col == widths.length -1 ? ' last' : '');
+    var div = new Element('div', {
+      'class': cname + col + ' ' + cname + '_parent parent' + first_last,
+      styles: {
+        'margin-right': col == 0 ? margin + unit       : null,
+        'margin-left' : col != 0 ? '-' + margin + unit : null,
+        'clear'       : col == 0 ? 'left'              : null,
+        'width'       : widths[col] + unit
+      }
+    });
+    var child = new Element('div', {
+      'class': cname + '_cell cell' + first_last
+    });
+    child.innerHTML = data[x] == '' ? ' ' : data[x];
+    div.adopt(child);
+    container.adopt(div);
+    if (col != 0)
+      margin -= widths[col];
+  });
+
+  container.adopt(new Element('div', {
+    styles: { clear: 'both' }
+  }));
+  return container;
+};
+
+Array.prototype.sum = function(){
+	for(var i=0, sum=0; i<this.length; sum+=this[i++]);
+	return sum;
+};