migrated docs to project kit

docs/.gitignore

@@ -0,0 +1 @@
+build

docs/src/autogrow-textarea.html.erb

@@ -0,0 +1,27 @@
+
+
+<script type='text/javascript' src='javascripts/jquery.autogrow-textarea.js'></script>
+
+<h2>Auto-Growing Textarea</h2>
+
+<p>
+  A textarea which grows vertically as it becomes full. This implementation -
+  inspired by Facebook - relies on a hidden auxiliary <code>div</code>, preventing
+  flickering scrollbars.
+</p>
+
+<div class='caption'>Example:</div>
+<pre>$('textarea').autogrow();</pre>
+
+<textarea rows='6' style='line-height:1; font-size: 120%; width: 100%'></textarea>
+
+<script type='text/javascript'>
+  $(function() {
+    $('textarea').autogrow();
+  });
+</script>
+
+<h3>Direct Link</h3>
+
+<p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.autogrow-textarea.js'>jquery.autogrow-textarea.js</a></p>
+

docs/src/cookie-text-size.html.erb

@@ -0,0 +1,58 @@
+
+
+<script type='text/javascript' src='javascripts/jquery.cookie-text-size.js'></script>
+<script type='text/javascript'>
+  $(function() {
+    cookieResize('#sizer a', 'medium');
+  });
+</script>
+
+<h2>Cookie Style Switcher</h2>
+
+<p>jQuery based helper function for implementing text resize functionality and storing
+  the user's preference in a cookie. The selected "size" is applied to the document
+  by adding a corresponding CSS class to <code>document.body</code>; see below for
+  example code.
+</p>
+
+<p>Call the initialisation function (<code>cookieResize</code>) from within your
+  <code>$(document).ready()</code>, passing a jQuery selector identifying the
+  elements the user will click to switch styles and the default class to apply
+  if no cookie is present. Each of the actuator elements should have a single
+  CSS class; this will be applied to <code>document.body</code> and stored in
+  a cookie on click.
+</p>
+
+<div class='caption'>Example HTML for size control:</div>
+<pre>&lt;div id=&#x27;sizer&#x27;&gt;
+&lt;a href=&#x27;#&#x27; class=&#x27;small&#x27;&gt;small&lt;/a&gt;
+&lt;a href=&#x27;#&#x27; class=&#x27;medium&#x27;&gt;medium&lt;/a&gt;
+&lt;a href=&#x27;#&#x27; class=&#x27;large&#x27;&gt;large&lt;/a&gt;
+&lt;/div&gt;</pre>
+
+<div class='caption'>Example CSS:</div>
+<pre>body.small { font-size: 10px }
+body.medium { font-size: 12px }
+body.large { font-size: 14px }</pre>
+
+<div class='caption'>Javascript for initialisation:</div>
+<pre>$(function() { cookieResize('#sizer a', 'medium'); });</pre>
+
+<h2>Example</h2>
+
+<div id='sizer'>
+  <a href='#' class='small'>small</a>
+  <a href='#' class='medium'>medium</a>
+  <a href='#' class='large'>large</a>
+</div>
+
+<div id='resizable'>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</div>
+
+<h3>Direct Link</h3>
+<p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.cookie-text-size.js'>jquery.cookie-text-size.js</a></p>
+

docs/src/dom-builder.html.erb

@@ -0,0 +1,77 @@
+
+<script type='text/javascript' src='javascripts/jquery.dom-builder.js'></script>
+<script type='text/javascript'>
+  $(function() {
+    $$('table#foo',
+      $$('tr', $$('th.col-1', 'ID'), $$('th.col-2', 'Username'), $$('th.col-3', 'Email')),
+      $$('tr', $$('td', 1), $$('td', 'jaz303'), $$('td', 'jason@magiclamp.co.uk')),
+      { style: "margin:20px auto",
+        hover: [
+          function() { $(this).css('backgroundColor', '#efefef'); },
+          function() { $(this).css('backgroundColor', '#cdcdcd'); }
+        ]
+      }
+    ).appendTo('#test-container');
+
+    TABLE(
+      TR( TH('This is'), TH('another table') ),
+      TR( TD('generated using'), TD('shortcut methods') ),
+      {style: "margin:20px auto"}
+    ).appendTo('#test-container-2');
+
+  });
+</script>
+
+<h2>DOM Builder</h2>
+
+<p>
+  This plugin defines the double-dollar function which can be used to create
+  DOM node hierarchies, set attributes, hook up event handlers and return the
+  resulting structure as a jQuery object. Probably best illustrated with some
+  code:
+</p>
+
+<div class='caption'>Example:</div>
+<pre>$$('table#foo',
+$$('tr', $$('th.col-1', 'ID'), $$('th.col-2', 'Username'), $$('th.col-3', 'Email')),
+$$('tr', $$('td', 1), $$('td', 'jaz303'), $$('td', 'jason@magiclamp.co.uk')),
+{ style: "margin:20px auto",
+hover: [
+function() { $(this).css('backgroundColor', '#efefef'); },
+function() { $(this).css('backgroundColor', '#cdcdcd'); }
+]
+}
+).appendTo('#test-container');</pre>
+
+<p>And here's the resulting table (it's auto-generated, trust me):</p>
+
+<div id='test-container'></div>
+
+<p>It's also possible to use shortcut methods for each tag although by using
+  these you forgo the ability to neatly specify IDs/classes:
+
+<div class='caption'>Example:</div>
+<pre>TABLE(
+TR( TH('This is'), TH('another table') ),
+TR( TD('generated using'), TD('shortcut methods') ),
+{style: "margin:20px auto"}
+).appendTo('#test-container-2');</pre>
+
+<div id='test-container-2'></div>
+
+<p>The general form of each call to <code>$$()</code> is:</p>
+
+<pre>$$(nodeName, content1, content2 ... contentN, options);</pre>
+
+<p>
+  This will create a node with the given <code>nodeName</code>, apply to it
+  the given options (if any) and then append the content, each of which may
+  be a string, jQuery object or DOM element. Options are objects of key-value
+  pairs; function values will be bound to the event denoted by the key, otherwise
+  the corresponding attribute will be set. The <code>hover</code> option is
+  special; when set to an array, it is assumed to contain two functions to handle
+  hover in/out events on the element.
+</p>
+
+<h3>Direct Link</h3>
+<p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.dom-builder.js'>jquery.dom-builder.js</a></p>

docs/src/index.html.erb

@@ -0,0 +1,31 @@
+
+<h2>Overview</h2>
+
+<p>
+  This is a small collection of single-file jQuery plugins I have extracted from various
+  projects; see below for links to
+  demos and documentation. Any requirements for supporting CSS rules are documented
+  in the Javascript source files themselves.
+</p>
+
+<ul>
+  <li><a href='autogrow-textarea.html'>Auto-growing textarea</a></li>
+  <li><a href='cookie-text-size.html'>Cookie-based style switcher</a></li>
+  <li><a href='dom-builder.html'>DOM builder</a></li>
+  <li><a href='input-hint.html'>Input hint</a></li>
+  <li><a href='rollover.html'>Rollover</a></li>
+  <li><a href='text-effects.html'>Miscellaneous text effects - typewriter, unscramble, ROT13</a></li>
+</ul>
+
+<h2>Downloading</h2>
+
+<h3>copy 'n' paste</h3>
+<p>
+  These plugins are too small to justify the whole package/distribute/release rigmarole so
+  just head over the <a href='http://github.com/jaz303/jquery-grab-bag/tree/master/'>github
+  repository</a>, browse, copy and paste.
+</p>
+
+<h3>clone from github</h3>
+<pre class='shell'><span class='green'>jason@oreo</span> <span class='blue'>~ $</span> git clone git@github.com:jaz303/boxy.git</pre>
+