Added a Prototype handler

README.md

@@ -17,21 +17,35 @@ Set minimum and maximum width thresholds to control the FlowType.JS magic within
 In this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px.
 
 ```javascript
+// jQuery:
 $('body').flowtype({
    minimum : 500,
    maximum : 1200
 });
+
+// Prototype:
+$(document.body).flowtype({
+   minimum : 500,
+   maximum : 1200
+});
 ```
 
 Set minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes.
 
 In this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px.
 
 ```javascript
+// jQuery:
 $('body').flowtype({
    minFont : 12,
    maxFont : 40
 });
+
+// Prototype:
+$(document.body).flowtype({
+   minFont : 12,
+   maxFont : 40
+});
 ```
 
 ### Font-size ###
@@ -43,9 +57,15 @@ _Note:_ Because each font is different, you will need to "tweak" `fontSize` and
 ~~Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility).~~ See *line-height* below.
 
 ```javascript
+// jQuery:
 $('body').flowtype({
    fontRatio : 30
 });
+
+// Prototype:
+$(document.body).flowtype({
+   fontRatio : 30
+});
 ```
 
 
@@ -84,32 +104,45 @@ _Note:_ Setting a specific font-size in your CSS file will make sure that your w
 
 ### Step 2: Include FlowType.JS ###
 
-After you have downloaded FlowType.JS, include both jQuery and `flowtype.js` in the head of your HTML document.
+After you have downloaded FlowType.JS, include both jQuery or Prototype and `flowtype.js` in the head of your HTML document.
 
 ### Step 3: Call FlowType.JS ###
 
 To begin the magic, simply call FlowType.JS before the close of your body tag:
 
 ```javascript
+// jQuery:
 $('body').flowtype();
+
+// Prototype:
+$(document.body).flowtype();
 ```
 
 ### Step 4: Make Changes ###
 
 You will most likely want to change the default settings. To do so, simply include these options in your code and tweak away:
 
 ```javascript
+// jQuery:
 $('body').flowtype({
    minimum   : 500,
    maximum   : 1200,
    minFont   : 12,
    maxFont   : 40,
    fontRatio : 30
 });
+// Prototype:
+$(document.body).flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : 30
+});
 ```
 
 ## Brought to you by... ##
 
-This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus).
+This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus). FlowType also works with Prototype.js thanks to [Walter Davis Studio](http://walterdavisstudio.com).
 
 FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

flowtype.js

@@ -9,40 +9,66 @@
 *
 * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
 */
-
-(function($) {
-   $.fn.flowtype = function(options) {
-
-// Establish default settings/variables
-// ====================================
-      var settings = $.extend({
+if(!!Prototype.Version){
+  Element.addMethods({
+    flowtype: function(element, options){
+      var settings = $H({
          maximum   : 9999,
          minimum   : 1,
          maxFont   : 9999,
          minFont   : 1,
          fontRatio : 35
-      }, options),
-
-// Do the magic math
-// =================
-      changes = function(el) {
-         var $el = $(el),
-            elw = $el.width(),
-            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
-            fontBase = width / settings.fontRatio,
-            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
-         $el.css('font-size', fontSize + 'px');
+      }).merge($H(options));
+
+      changes = function() {
+         var elw = element.getWidth(),
+            width = elw > settings.get('maximum') ? settings.get('maximum') : elw < settings.get('minimum') ? settings.get('minimum') : elw,
+            fontBase = width / settings.get('fontRatio'),
+            fontSize = fontBase > settings.get('maxFont') ? settings.get('maxFont') : fontBase < settings.get('minFont') ? settings.get('minFont') : fontBase;
+         element.setStyle('font-size:' + fontSize + 'px');
       };
-
-// Make the magic visible
-// ======================
-      return this.each(function() {
-      // Context for resize callback
-         var that = this;
-      // Make changes upon resize
-         $(window).resize(function(){changes(that);});
-      // Set changes on load
-         changes(this);
+      changes();
+      Event.observe(window, 'resize', function(){
+        changes();
       });
-   };
-}(jQuery));
+      return element;
+    }
+  });
+}else{
+  (function($) {
+     $.fn.flowtype = function(options) {
+
+  // Establish default settings/variables
+  // ====================================
+        var settings = $.extend({
+           maximum   : 9999,
+           minimum   : 1,
+           maxFont   : 9999,
+           minFont   : 1,
+           fontRatio : 35
+        }, options),
+
+  // Do the magic math
+  // =================
+        changes = function(el) {
+           var $el = $(el),
+              elw = $el.width(),
+              width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
+              fontBase = width / settings.fontRatio,
+              fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
+           $el.css('font-size', fontSize + 'px');
+        };
+
+  // Make the magic visible
+  // ======================
+        return this.each(function() {
+        // Context for resize callback
+           var that = this;
+        // Make changes upon resize
+           $(window).resize(function(){changes(that);});
+        // Set changes on load
+           changes(this);
+        });
+     };
+  }(jQuery));
+}