<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/PencilCode/jquery-turtle/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/demo.html b/demo.html
index 1f63ac4..ed8b62c 100644
--- a/demo.html
+++ b/demo.html
@@ -8,7 +8,8 @@
 <script data-editable="turtle script" type="text/coffeescript" data-editsize="1">#<![CDATA[
 # Show a debug panel that inspects local vars in this block.
-eval($.turtle({title:'Welcome!  Try: ' +
+eval($.turtle({title:'Welcome!  Type <mark>help</mark>,' +
+    '<br>or try: ' +
     '<mark>fd 50</mark>; ' +
     '<mark>rt 90</mark>; ' +
     '<mark>pen "blue"</mark>; ' +
diff --git a/images/bg_hr.png b/images/bg_hr.png
new file mode 100644
index 0000000..7973bd6
Binary files /dev/null and b/images/bg_hr.png differ
diff --git a/images/blacktocat.png b/images/blacktocat.png
new file mode 100644
index 0000000..6e264fe
Binary files /dev/null and b/images/blacktocat.png differ
diff --git a/images/icon_download.png b/images/icon_download.png
new file mode 100644
index 0000000..a2a287f
Binary files /dev/null and b/images/icon_download.png differ
diff --git a/images/sprite_download.png b/images/sprite_download.png
new file mode 100644
index 0000000..f2babd5
Binary files /dev/null and b/images/sprite_download.png differ
diff --git a/index.html b/index.html
index abc74a3..b4a295f 100644
--- a/index.html
+++ b/index.html
@@ -30,175 +30,327 @@ <h1 class="header">jQuery-turtle</h1>
 
       </header>
       <section>
-        <h1>jQuery-turtle</h1>
+        <h1>
+<a name="jquery-turtle" class="anchor" href="#jquery-turtle"><span class="octicon octicon-link"></span></a>jQuery-turtle</h1>
 
-<p>version 2.0.4</p>
+<p>version 2.0.7</p>
 
 <p>jQuery-turtle is a jQuery plugin for turtle graphics.</p>
 
 <p>With jQuery-turtle, every DOM element is a turtle that can be
-moved using LOGO-inspired turtle methods like fd, bk, rt, and lt.</p>
+moved using turtle graphics methods like fd (forward), bk (back),
+rt (right turn), and lt (left turn).  The pen function allows
+a turtle to draw on a full-document canvas as it moves.</p>
 
 <pre>
-  $('#turtle').pen('red').rt(90).fd(100).lt(90).bk(50).fadeOut();
+$('#turtle').pen('red').rt(90).fd(100).lt(90).bk(50).fadeOut();
 </pre>
 
-<p>The plugin also provides functions to help in a rotated,
-scaled, and transformed world where nested elements may be
-transformed.  There are functions for collision testing, absolute
-positioning, and absolute direction reading and setting.</p>
+<p>jQuery-turtle provides:</p>
 
-<p><a href="http://davidbau.github.io/jquery-turtle/demo.html">Try an interactive demo (CoffeeScript syntax) here.</a></p>
-<iframe src="http://davidbau.github.io/jquery-turtle/demo.html" height="540" width="640" style="background:lightblue">
-interactive demo
-</iframe>
-
-<p>Under the covers, CSS3 2D transforms and jQuery animations are
-used to execute and store turtle movement, so jQuery-turtle
-interacts well with other jQuery animations or direct uses of
-2D CSS3 transforms.  The plugin sets up jQuery CSS hooks for
-synthetic CSS properties such as turtleForward that can be
-animated or used to directly manipulate turtle geometry at a basic
-mathematical level.</p>
-
-<p>A high-level educational environment is enabled by $.turtle().
-That call creates a set of global objects and functions
-catering to beginners.  These include a default turtle
-and global functions to control it; an onpage debugger panel;
-jQuery instances for every object with an #id; simplified
-globals to access recent mouse and keyboard events, and
-simplified functions for randomness, timers, animation control,
-and creation of new turtles.  The jQuery teaching environment
-has been developed to support a curriculum for young students.</p>
-
-<h2>JQuery Methods for Turtle Movement</h2>
-
-<p>Turtle-oriented methods taking advantage of the css support:</p>
+<ul>
+<li>Relative and absolute motion and drawing.</li>
+<li>Functions to ease basic input, output, and game-making for beginners.</li>
+<li>Operations on sets of turtles, and turtle motion of arbitrary elements.</li>
+<li>Accurate collision-testing of turtles with arbitrary convex hulls.</li>
+<li>Simplified access to CSS3 transforms, jQuery animations, Canvas, and Web Audio.</li>
+<li>An interactive turtle console in either Javascript or CoffeeScript.</li>
+</ul><p>The plugin can also create a learning environment with a default
+turtle that is friendly for beginners.  The following is a complete
+CoffeeScript program that uses the default turtle to draw a grid of
+sixteen colored polygons.</p>
 
 <pre>
-  $(x).fd(100)      // Forward relative motion in local coordinates.
-  $(x).bk(50)       // Back.
-  $(x).rt(90)       // Right turn.
-  $(x).lt(45)       // Left turn.
-  $(x).pen('red')   // Sets a pen style, or 'none' for no drawing.
-  $(x).dot(12)      // Draws a dot of diameter 12.
-  $(x).erase()      // Erases under the turtles collision hull.
-  $(x).img('blue')  // Switch the image to a blue pointer.  May use any url.
-  $(x).moveto({pageX: 40, pageY: 140})  // Absolute motion in page coordinates.
-  $(x).turnto(heading || position)      // Absolute heading adjustment.
-  $(x).scale(1.5)   // Scales the element up to 150% size.
-  $(x).twist(180)   // Changes which direction is considered "forward".
-  $(x).mirror(true) // Flips the turtle across its direction axis.
-  $(x).reload()     // Reloads the turtle's image (restarting animated gifs)
-  $(x).direct(fn)   // Like each, but this is set to $(elt) instead of elt.
-  // Methods below this line do not queue for animation.
-  $(x).center()     // Page coordinate position of transform-origin.
-  $(x).direction()  // Absolute bearing taking into account nested transforms.
-  $(x).shown()      // Shorthand for is(":visible")
-  $(x).hidden()     // Shorthand for !is(":visible")
-  $(x).touches(y)   // Collision tests elements (uses turtleHull if present).
-  $(x).encloses(y)  // Containment collision test.
-  $(x).within(d, t) // Filters to items with centers within d of t.center().
-  $(x).notwithin()  // The negation of within.
-</pre>
+eval $.turtle()  # Create the default turtle.
 
-<p>When $.fx.speeds.turtle is nonzero (the default is zero unless
-$.turtle() is called), the first four movement functions animate
-at that speed, and the remaining mutators also participate in the
-animation queue.  Note that property-reading functions such as
-touches() are synchronous and will not queue, and setting
-$.fx.speed.turtle to 0 will make movement functions synchronous.</p>
-
-<p>The absolute motion methods moveto and turnto accept any argument
-with pageX and pageY, including, usefully, mouse events.  They
-operate in absolute page coordinates even when the turtle is nested
-within further transformed elements.</p>
+speed 100
+for color in [red, gold, green, blue]
+  for sides in [3..6]
+    pen color
+    for x in [1..sides]
+      fd 100 / sides
+      lt 360 / sides
+    pen null
+    fd 40
+  slide 40, -160
+</pre>
 
-<p>The hit-testing functions touches() and encloses() will test using
-the convex hull for the two objects in question. This defaults to
-the bounding box of the elements (as transformed) but can be overridden
-by the turtleHull CSS property, if present.</p>
+<p><a href="http://davidbau.github.io/jquery-turtle/demo.html">Try an interactive demo (CoffeeScript syntax) here.</a></p>
 
-<h2>JQuery CSS Hooks for Turtle Geometry</h2>
+<h2>
+<a name="jquery-methods-for-turtle-movement" class="anchor" href="#jquery-methods-for-turtle-movement"><span class="octicon octicon-link"></span></a>JQuery Methods for Turtle Movement</h2>
 
-<p>Turtle-oriented 2d transform cssHooks, with animation support on all
-motion:</p>
+<p>The turtle API is briefly summarized below.  All the following
+turtle-oriented methods operate on any jQuery object (including
+the default turtle, if used):</p>
 
 <pre>
-  $(x).css('turtlePosition', '30 40');   // position in local coordinates.
-  $(x).css('turtlePositionX', '30');     // x component.
-  $(x).css('turtlePositionY', '40');     // y component.
-  $(x).css('turtleRotation', '90');      // rotation in degrees.
-  $(x).css('turtleScale', '2');          // double the size of any element.
-  $(x).css('turtleScaleX', '2');         // x stretch before rotate after twist.
-  $(x).css('turtleScaleY', '2');         // y stretch before rotate after twist.
-  $(x).css('turtleTwist', '45');         // turn before stretching.
-  $(x).css('turtleForward', '50');       // position in direction of rotation.
-  $(x).css('turtlePen', 'red');          // or 'red lineWidth 2px' etc.
-  $(x).css('turtleHull', '5 0 0 5 0 -5');// fine-tune shape for collisions.
+$(q).fd(100)      // Forward relative motion in local coordinates.
+$(q).bk(50)       // Back.
+$(q).rt(90)       // Right turn.  Optional turning radius second arg.
+$(q).lt(45)       // Left turn.  Optional turning radius second arg.
+$(q).slide(x, y)  // Slide right by x while sliding forward by y.
+$(q).moveto({pageX:x,pageY:y} | [x,y])  // Absolute motion on page.
+$(q).jumpto({pageX:x,pageY:y} | [x,y])  // Like moveto, without drawing.
+$(q).turnto(bearing || position)        // Absolute direction adjustment.
+$(q).play("ccgg") // Plays notes using ABC notation and waits until done.
+
+// Methods below happen in an instant, but line up in the animation queue.
+$(q).home()       // Jumps to the center of the document, with bearing 0.
+$(q).pen('red')   // Sets a pen style, or 'none' for no drawing.
+$(q).pu()         // Pen up - temporarily disables the pen (also pen(false)).
+$(q).pd()         // Pen down - starts a new pen path.
+$(q).pe()         // Uses the pen 'erase' style.
+$(q).fill('gold') // Fills a shape previously outlined using pen('path').
+$(q).dot(12)      // Draws a circular dot of diameter 12.  Color second arg.
+$(q).label('A')   // Prints an HTML label at the turtle location.
+$(q).speed(10)    // Sets turtle animation speed to 10 moves per sec.
+$(q).ht()         // Hides the turtle.
+$(q).st()         // Shows the turtle.
+$(q).wear('blue') // Switches to a blue shell.  Use any image or color.
+$(q).scale(1.5)   // Scales turtle size and motion by 150%.
+$(q).twist(180)   // Changes which direction is considered "forward".
+$(q).mirror(true) // Flips the turtle across its main axis.
+$(q).reload()     // Reloads the turtle's image (restarting animated gifs)
+$(q).direct(fn)   // Like each, but this is set to $(elt) instead of elt,
+                  // and the callback fn can insert into the animation queue.
+
+// Methods below this line do not queue for animation.
+$(q).getxy()      // Local (center-y-up [x, y]) coordinates of the turtle.
+$(q).pagexy()     // Page (topleft-y-down {pageX:x, pageY:y}) coordinates.
+$(q).bearing([p]) // The turtles absolute direction (or direction towards p).
+$(q).distance(p)  // Distance to p in page coordinates.
+$(q).shown()      // Shorthand for is(":visible")
+$(q).hidden()     // Shorthand for !is(":visible")
+$(q).touches(y)   // Collision tests elements (uses turtleHull if present).
+$(q).enclosedby(y)// Containment collision test.
+$(q).within(d, t) // Filters to items with centers within d of t.pagexy().
+$(q).notwithin()  // The negation of within.
+$(q).cell(y, x)   // Selects the yth row and xth column cell in a table.
+$(q).hatch([n,] [img]) // Creates and returns n turtles with the given img.
 </pre>
 
-<p>Arbitrary 2d transforms are supported, including transforms of elements
-nested within other elements that have css transforms. Transforms are
-automatically decomposed to turtle components when necessary.</p>
-
-<p>A canvas is supported for drawing, but only created when the pen is
-used; pen styles include canvas style properties such as lineWidth
-and lineCap.</p>
-
-<p>A convex hull polygon can be set to be used by the collision detection
-and hit-testing functions (encloses, touches).  The turtleHull is a list
-of (unrotated) x-y coordinates relative to the object's transformOrigin.
-If set to 'auto' (the default) the hull is just the bounding box for the
-element.</p>
-
-<h2>Turtle Teaching Environment</h2>
-
-<p>An optional teaching environment setup is created by eval($.turtle()).
-It provides easy packaging for the above functionality.</p>
-
-<p>After eval($.turtle()):</p>
+<h2>
+<a name="speed-and-turtle-animation" class="anchor" href="#speed-and-turtle-animation"><span class="octicon octicon-link"></span></a>Speed and Turtle Animation</h2>
+
+<p>When the speed of a turtle is nonzero, the first eight movement
+functions animate at that speed (in moves per second), and the
+remaining mutators also participate in the animation queue.  The
+default turtle speed is a leisurely one move per second (as
+appropriate for the creature), but you may soon discover the
+desire to set speed higher.</p>
+
+<p>Setting the turtle speed to Infinity will make its movement synchronous,
+which makes the synchronous distance, direction, and hit-testing useful
+for realtime game-making.</p>
+
+<h2>
+<a name="pen-and-fill-styles" class="anchor" href="#pen-and-fill-styles"><span class="octicon octicon-link"></span></a>Pen and Fill Styles</h2>
+
+<p>The turtle pen respects canvas styling: any valid strokeStyle is
+accepted; and also using a space-separated syntax, lineWidth, lineCap,
+lineJoin, miterLimit, and fillStyle can be specified, e.g.,
+pen('red lineWidth 5 lineCap square').  The same syntax applies for
+styling dot and fill (except that the default interpretation for the
+first value is fillStyle instead of strokeStyle).</p>
+
+<p>The fill method is used by tracing an invisible path using the
+pen('path') style, and then calling the fill method.  Disconnected
+paths can be created using pu() and pd().</p>
+
+<h2>
+<a name="conventions-for-musical-notes" class="anchor" href="#conventions-for-musical-notes"><span class="octicon octicon-link"></span></a>Conventions for Musical Notes</h2>
+
+<p>The play method plays a sequence of notes specified using a subset of
+standard ABC notation.  Capital C denotes middle C, and lowercase c is
+an octave higher.  Pitches and durations can be altered with commas,
+apostrophes, carets, underscores, digits, and slashes as in the
+standard.  Enclosing letters in square brackets represents a chord,
+and z represents a rest.  The default tempo is 120, but can be changed
+by passing a options object as the first parameter setting tempo, e.g.,
+{ tempo: 200 }.  Other options include volume: 0.5, type: 'sine' or
+'square' or 'sawtooth' or 'triangle', and envelope: which defines
+an ADSR envelope e.g., { a: 0.01, d: 0.2, s: 0.1, r: 0.1 }.</p>
+
+<p>The turtle's motion will pause while it is playing notes.  To play
+notes without stalling turtle movement, use the global function sound()
+instead of the turtle method play().</p>
+
+<h2>
+<a name="directing-logic-in-the-animation-queue" class="anchor" href="#directing-logic-in-the-animation-queue"><span class="octicon octicon-link"></span></a>Directing Logic in the Animation Queue</h2>
+
+<p>The direct method can be used to queue logic (including synchronous
+tests or actions) by running a function in the animation queue.  Unlike
+jquery queue(), direct arranges things so that if further animations
+are queued by the callback function, they are inserted (in natural
+recursive functional execution order) instead of being appended.</p>
+
+<h2>
+<a name="turnto-and-absolute-bearings" class="anchor" href="#turnto-and-absolute-bearings"><span class="octicon octicon-link"></span></a>Turnto and Absolute Bearings</h2>
+
+<p>The turnto method can turn to an absolute bearing (if called with a
+single numeric argument) or towards an absolute position on the
+screen.  The methods moveto and turnto accept either page or
+graphing coordinates.</p>
+
+<h2>
+<a name="moveto-and-two-flavors-of-cartesian-coordinates" class="anchor" href="#moveto-and-two-flavors-of-cartesian-coordinates"><span class="octicon octicon-link"></span></a>Moveto and Two Flavors of Cartesian Coordinates</h2>
+
+<p>Graphing coordinates are measured upwards and rightwards from the
+center of the page, and they are specified as bare numeric x, y
+arguments or [x, y] pairs as returned from getxy().</p>
+
+<p>Page coordinates are specified by an object with pageX and pageY
+properties, or with a pagexy() method that will return such an object.
+That includes, usefullly, mouse events and turtle objects.  Page
+coordinates are measured downward from the top-left corner of the
+page to the center (or transform-origin) of the given object.</p>
+
+<h2>
+<a name="hit-testing" class="anchor" href="#hit-testing"><span class="octicon octicon-link"></span></a>Hit Testing</h2>
+
+<p>The hit-testing functions touches() and enclosedby() will test for
+collisions using the convex hulls of the objects in question.
+The hull of an element defaults to the bounding box of the element
+(as transformed) but can be overridden by the turtleHull CSS property,
+if present.  The default turtle is given a turtle-shaped hull.</p>
+
+<h2>
+<a name="turtle-teaching-environment" class="anchor" href="#turtle-teaching-environment"><span class="octicon octicon-link"></span></a>Turtle Teaching Environment</h2>
+
+<p>A default turtle together with an interactive console are created by
+calling eval($.turtle()).  That call exposes all the turtle methods
+such as (fd, rt, getxy, etc) as global functions operating on the default
+turtle.  It will also set up a number of other global symbols to provide
+beginners with a simplified programming environment.</p>
+
+<p>In detail, after eval($.turtle()):</p>
 
 <ul>
 <li>An &lt;img id="turtle"&gt; is created if #turtle doesn't already exist.</li>
 <li>An eval debugging panel (see.js) is shown at the bottom of the screen.</li>
 <li>Turtle methods on the default turtle are packaged as globals, e.g., fd(10).</li>
 <li>Every #id element is turned into a global variable: window.id = $('#id').</li>
-<li>Globals are set up to save events: "lastclick", "lastmousemove", etc.</li>
 <li>Default turtle animation is set to 1 move per sec so steps can be seen.</li>
-<li>speed(movesPerSec) adjusts $.fx.speeds.turtle to 1000 / movesPerSec.</li>
-<li>tick([ticksPerSec,] fn) is similarly an easier-to-call setInterval.</li>
-<li>random(lessThanThisInteger || array) is an easy alternative to Math.random.</li>
-<li>remove() will remove the global turtle and global turtle methods.</li>
-<li>hatch([n,] [spec]) creates and returns any number of new turtles.</li>
-<li>see(a, b, c) logs tree-expandable data into the debugging panel.</li>
-<li>output(html or text) appends html to the document body.</li>
-<li>input(label, callback) appends a labelled input field to the document body.</li>
-</ul><p>For example, after eval($.turtle()), the following is a valid program
-in CoffeeScript syntax:</p>
+<li>Global event listeners are created to update global event variables.</li>
+<li>Methods of $.turtle.* (enumerated below) are exposed as global functions.</li>
+<li>String constants are defined for the 140 named CSS colors.</li>
+</ul><p>Beyond the functions to control the default turtle, the globals added by
+$.turtle() are as follows:</p>
 
 <pre>
-speed 100
-pen 'red'
-chaser = hatch()
-chaser.moveto 0,0
-chaser.bg 'red'
-player = turtle
+lastclick             // Event object of the last click event in the doc.
+lastmousemove         // The last mousemove event.
+lastmouseup           // The last mouseup event.
+lastmousedown         // The last mousedown event.
+keydown               // The last keydown event.
+keyup                 // The last keyup event.
+keypress              // The last keypress event.
+hatch([n,] [img])     // Creates and returns n turtles with the given img.
+cs()                  // Clears the screen, both the canvas and the body text.
+cg()                  // Clears the graphics canvas without clearing the text.
+ct()                  // Clears the text without clearing the canvas.
+defaultspeed(mps)     // Sets $.fx.speeds.turtle to 1000 / mps.
+tick([perSec,] fn)    // Sets fn as the tick callback (null to clear).
+random(n)             // Returns a random number [0..n-1].
+random(list)          // Returns a random element of the list.
+random('normal')      // Returns a gaussian random (mean 0 stdev 1).
+random('uniform')     // Returns a uniform random [0...1).
+random('position')    // Returns a random {pageX:x, pageY:y} coordinate.
+random('color')       // Returns a random hsl(*, 100%, 50%) color.
+random('gray')        // Returns a random hsl(0, 0, *) gray.
+remove()              // Removes default turtle and its globals (fd, etc).
+see(a, b, c...)       // Logs tree-expandable data into debugging panel.
+write(html)           // Appends html into the document body.
+read([label,] fn)     // Makes a one-time input field, calls fn after entry.
+readnum([label,] fn)  // Like read, but restricted to numeric input.
+readstr([label,] fn)  // Like read, but never converts input to a number.
+button([label,] fn)   // Makes a clickable button, calls fn when clicked.
+table(m, n)           // Outputs a table with m rows and n columns.
+sound('[DFG][EGc]')   // Plays musical notes now, without queueing.
+</pre>
+
+<p>Here is another CoffeeScript example that demonstrates some of
+the functions:</p>
+
+<pre>
+eval $.turtle()  # Create the default turtle and global functions.
+
+defaultspeed Infinity
+write "Catch blue before red gets you."
+bk 100
+r = hatch red
+b = hatch blue
 tick 10, -&gt;
-  player.turnto lastmousemove
-  player.fd 5
-  chaser.turnto player
-  chaser.rt (random 60) - 30
-  chaser.fd 5
-  if chaser.touches player
-    output "tag! you're it!"
-    tick -&gt;
+  turnto lastmousemove
+  fd 6
+  r.turnto turtle
+  r.fd 4
+  b.turnto bearing b
+  b.fd 3
+  if b.touches(turtle)
+    write "You win!"
+    tick off
+  else if r.touches(turtle)
+    write "Red got you!"
+    tick off
+  else if not b.enclosedby(document)
+    write "Blue got away!"
+    tick off
 </pre>
 
 <p>The turtle teaching environment is designed to work well with either
 Javascript or CoffeeScript.</p>
 
-<h2>License (MIT)</h2>
+<h2>
+<a name="jquery-css-hooks-for-turtle-geometry" class="anchor" href="#jquery-css-hooks-for-turtle-geometry"><span class="octicon octicon-link"></span></a>JQuery CSS Hooks for Turtle Geometry</h2>
+
+<p>Underlying turtle motion are turtle-oriented 2d transform jQuery cssHooks,
+with animation support on all motion:</p>
+
+<pre>
+$(q).css('turtleSpeed', '10');         // default speed in moves per second.
+$(q).css('turtlePosition', '30 40');   // position in local coordinates.
+$(q).css('turtlePositionX', '30px');   // x component.
+$(q).css('turtlePositionY', '40px');   // y component.
+$(q).css('turtleRotation', '90deg');   // rotation in degrees.
+$(q).css('turtleScale', '2');          // double the size of any element.
+$(q).css('turtleScaleX', '2');         // x stretch after twist.
+$(q).css('turtleScaleY', '2');         // y stretch after twist.
+$(q).css('turtleTwist', '45deg');      // turn before stretching.
+$(q).css('turtleForward', '50px');     // position in direction of rotation.
+$(q).css('turtleTurningRadius, '50px');// arc turning radius for rotation.
+$(q).css('turtlePenStyle', 'red');     // or 'red lineWidth 2px' etc.
+$(q).css('turtlePenDown', 'up');       // default 'down' to draw with pen.
+$(q).css('turtleHull', '5 0 0 5 0 -5');// fine-tune shape for collisions.
+</pre>
+
+<p>Arbitrary 2d transforms are supported, including transforms of elements
+nested within other elements that have css transforms. For example, arc
+paths of a turtle within a skewed div will transform to the proper elliptical
+arc.  Note that while turtle motion is transformed, lines and dots are not:
+for example, dots are always circular.  To get transformed circles, trace
+out an arc.</p>
+
+<p>Transforms on the turtle itself are used to infer the turtle position,
+direction, and rendering of the sprite.  ScaleY stretches the turtle
+sprite in the direction of movement also stretches distances for
+motion in all directions.  ScaleX stretches the turtle sprite perpendicular
+to the direction of motion and also stretches line and dot widths for
+drawing.</p>
+
+<p>A canvas is supported for drawing, but only created when the pen is
+used; pen styles include canvas style properties such as lineWidth
+and lineCap.</p>
+
+<p>A convex hull polygon can be set to be used by the collision detection
+and hit-testing functions (enclosedby, touches).  The turtleHull is a list
+of (unrotated) x-y coordinates relative to the object's transformOrigin.
+If set to 'auto' (the default) the hull is just the bounding box for the
+element.</p>
+
+<h2>
+<a name="license-mit" class="anchor" href="#license-mit"><span class="octicon octicon-link"></span></a>License (MIT)</h2>
 
 <p>Copyright (c) 2013 David Bau</p>
 
@@ -227,4 +379,4 @@ <h2>License (MIT)</h2>
     <!--[if !IE]><script>fixScale(document);</script><![endif]-->
 		
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/javascripts/main.js b/javascripts/main.js
new file mode 100644
index 0000000..d8135d3
--- /dev/null
+++ b/javascripts/main.js
@@ -0,0 +1 @@
+console.log('This would be the main JS file.');
diff --git a/jquery-turtle.js b/jquery-turtle.js
index 15f149a..58cdef8 100644
--- a/jquery-turtle.js
+++ b/jquery-turtle.js
@@ -4,112 +4,290 @@
 jQuery-turtle
 =============
 
-version 2.0.4
+version 2.0.6
 
 jQuery-turtle is a jQuery plugin for turtle graphics.
 
 With jQuery-turtle, every DOM element is a turtle that can be
-moved using LOGO-inspired turtle methods like fd, bk, rt, and lt.
+moved using turtle graphics methods like fd (forward), bk (back),
+rt (right turn), and lt (left turn).  The pen function allows
+a turtle to draw on a full-document canvas as it moves.
+
 <pre>
   $('#turtle').pen('red').rt(90).fd(100).lt(90).bk(50).fadeOut();
 </pre>
-The plugin also provides functions to help in a rotated,
-scaled, and transformed world where nested elements may be
-transformed.  There are functions for collision testing, absolute
-positioning, and absolute direction reading and setting.
+
+jQuery-turtle provides:
+  * Relative and absolute motion and drawing.
+  * Functions to ease basic input, output, and game-making for beginners.
+  * Operations on sets of turtles, and turtle motion of arbitrary elements.
+  * Accurate collision-testing of turtles with arbitrary convex hulls.
+  * Simplified access to CSS3 transforms, jQuery animations, Canvas, and Web Audio.
+  * An interactive turtle console in either Javascript or CoffeeScript.
+
+The plugin can also create a learning environment with a default
+turtle that is friendly for beginners.  The following is a complete
+CoffeeScript program that uses the default turtle to draw a grid of
+sixteen colored polygons.
+
+<pre>
+  eval $.turtle()  # Create the default turtle.
+
+  speed 100
+  for color in ['red', 'gold', 'green', 'blue']
+    for sides in [3..6]
+      pen color
+      for x in [1..sides]
+        fd 100 / sides
+        lt 360 / sides
+      pen 'none'
+      fd 40
+    slide 40, -160
+</pre>
 
 [Try an interactive demo (CoffeeScript syntax) here.](
 http://davidbau.github.io/jquery-turtle/demo.html)
 
-Under the covers, CSS3 2D transforms and jQuery animations are
-used to execute and store turtle movement, so jQuery-turtle
-interacts well with other jQuery animations or direct uses of
-2D CSS3 transforms.  The plugin sets up jQuery CSS hooks for
-synthetic CSS properties such as turtleForward that can be
-animated or used to directly manipulate turtle geometry at a basic
-mathematical level.
-
-A high-level educational environment is enabled by $.turtle().
-That call creates a set of global objects and functions
-catering to beginners.  These include a default turtle
-and global functions to control it; an onpage debugger panel;
-jQuery instances for every object with an #id; simplified
-globals to access recent mouse and keyboard events, and
-simplified functions for randomness, timers, animation control,
-and creation of new turtles.  The jQuery teaching environment
-has been developed to support a curriculum for young students.
 
 JQuery Methods for Turtle Movement
 ----------------------------------
 
-Turtle-oriented methods taking advantage of the css support:
+The turtle API is briefly summarized below.  All the following
+turtle-oriented methods operate on any jQuery object (including
+the default turtle, if used):
+
 <pre>
   $(x).fd(100)      // Forward relative motion in local coordinates.
   $(x).bk(50)       // Back.
   $(x).rt(90)       // Right turn.
   $(x).lt(45)       // Left turn.
+  $(x).slide(x, y)  // Move right by x while moving forward by y.
+  $(x).rarc(100,60) // Turn right 60 degrees tracing an arc of radius 100.
+  $(x).larc(50,360) // Left 360 degrees tracing a full circle of radius 50.
+  $(x).moveto({pageX:x,pageY:y} | [x,y])  // Absolute motion on page.
+  $(x).turnto(bearing || position)        // Absolute direction adjustment.
+  $(x).play("ccgg") // Plays notes using ABC notation and waits until done.
+
+  // Methods below happen in an instant, but line up in the animation queue.
+  $(x).home()       // Jumps to the center of the document, with bearing 0.
   $(x).pen('red')   // Sets a pen style, or 'none' for no drawing.
-  $(x).dot(12)      // Draws a dot of diameter 12.
-  $(x).erase()      // Erases under the turtles collision hull.
-  $(x).img('blue')  // Switch the image to a blue pointer.  May use any url.
-  $(x).moveto({pageX: 40, pageY: 140})  // Absolute motion in page coordinates.
-  $(x).turnto(heading || position)      // Absolute heading adjustment.
-  $(x).scale(1.5)   // Scales the element up to 150% size.
+  $(x).pu()         // Pen up - temporarily disables the pen (also pen(false)).
+  $(x).pd()         // Pen down - starts a new pen path.
+  $(x).pe()         // Uses the pen 'erase' style.
+  $(x).fill('gold') // Fills a shape previously outlined using pen('path').
+  $(x).dot(12)      // Draws a circular dot of diameter 12.
+  $(x).label('A')   // Prints an HTML label at the turtle location.
+  $(x).speed(10)    // Sets turtle animation speed to 10 moves per sec.
+  $(x).ht()         // Hides the turtle.
+  $(x).st()         // Shows the turtle.
+  $(x).wear('blue') // Switches to a blue shell.  Use any image or color.
+  $(x).scale(1.5)   // Scales turtle size and motion by 150%.
   $(x).twist(180)   // Changes which direction is considered "forward".
-  $(x).mirror(true) // Flips the turtle across its direction axis.
+  $(x).mirror(true) // Flips the turtle across its main axis.
   $(x).reload()     // Reloads the turtle's image (restarting animated gifs)
-  $(x).direct(fn)   // Like each, but this is set to $(elt) instead of elt.
+  $(x).direct(fn)   // Like each, but this is set to $(elt) instead of elt,
+                    // and the callback fn can insert into the animation queue.
+
   // Methods below this line do not queue for animation.
-  $(x).center()     // Page coordinate position of transform-origin.
-  $(x).direction()  // Absolute bearing taking into account nested transforms.
+  $(x).getxy()      // Local (center-y-up [x, y]) coordinates of the turtle.
+  $(x).pagexy()     // Page (topleft-y-down {pageX:x, pageY:y}) coordinates.
+  $(x).bearing([p]) // The turtles absolute direction (or direction towards p).
+  $(x).distance(p)  // Distance to p in page coordinates.
   $(x).shown()      // Shorthand for is(":visible")
   $(x).hidden()     // Shorthand for !is(":visible")
   $(x).touches(y)   // Collision tests elements (uses turtleHull if present).
   $(x).encloses(y)  // Containment collision test.
-  $(x).within(d, t) // Filters to items with centers within d of t.center().
+  $(x).within(d, t) // Filters to items with centers within d of t.pagexy().
   $(x).notwithin()  // The negation of within.
+  $(x).cell(y, x)   // Selects the yth row and xth column cell in a table.
+  $(x).hatch([n,] [img]) // Creates and returns n turtles with the given img.
 </pre>
 
-When $.fx.speeds.turtle is nonzero (the default is zero unless
-$.turtle() is called), the first four movement functions animate
-at that speed, and the remaining mutators also participate in the
-animation queue.  Note that property-reading functions such as
-touches() are synchronous and will not queue, and setting
-$.fx.speed.turtle to 0 will make movement functions synchronous.
+When the speed of a turtle is nonzero, the first seven movement
+functions animate at that speed (in moves per second), and the
+remaining mutators also participate in the animation queue.  The
+default turtle speed is a leisurely one move per second (as
+appropriate for the creature), but you may soon discover the
+desire to set speed higher.
+
+Setting the turtle speed to Infinity will make its movement synchronous,
+which makes the synchronous distance, direction, and hit-testing useful
+for realtime game-making.
+
+The turtle pen respects canvas styling: any valid strokeStyle is
+accepted; and also using a space-separated syntax, lineWidth, lineCap,
+lineJoin, miterLimit, and fillStyle can be specified, e.g.,
+pen('red lineWidth 5 lineCap square').  The same syntax applies for
+styling dot and fill (except that the default interpretation for the
+first value is fillStyle instead of strokeStyle).
+
+The fill method is used by tracing an invisible path using the
+pen('path') style, and then calling the fill method.  Disconnected
+paths can be created using pu() and pd().
+
+The play method plays a sequence of notes specified using a subset of
+standard ABC notation.  Capital C denotes middle C, and lowercase c is
+an octave higher.  Pitches and durations can be altered with commas,
+apostrophes, carets, underscores, digits, and slashes as in the
+standard.  Enclosing letters in square brackets represents a chord,
+and z represents a rest.  The default tempo is 120, but can be changed
+by passing a options object as the first parameter setting tempo, e.g.,
+{ tempo: 200 }.  Other options include volume: 0.5, type: 'sine' or
+'square' or 'sawtooth' or 'triangle', and envelope: which defines
+an ADSR envelope e.g., { a: 0.01, d: 0.2, s: 0.1, r: 0.1 }.
+
+The turtle's motion will pause while it is playing notes.  To play
+notes without stalling turtle movement, use the global function sound()
+instead of the turtle method play().
+
+The direct method can be used to queue logic (including synchronous
+tests or actions) by running a function in the animation queue.  Unlike
+jquery queue(), direct arranges things so that if further animations
+are queued by the callback function, they are inserted (in natural
+recursive functional execution order) instead of being appended.
+
+The turnto method can turn to an absolute bearing (if called with a
+single numeric argument) or towards an absolute position on the
+screen.  The methods moveto and turnto accept either page or
+graphing coordinates.
+
+Graphing coordinates are measured upwards and rightwards from the
+center of the page, and they are specified as bare numeric x, y
+arguments or [x, y] pairs as returned from getxy().
+
+Page coordinates are specified by an object with pageX and pageY
+properties, or with a pagexy() method that will return such an object.
+That includes, usefullly, mouse events and turtle objects.  Page
+coordinates are measured downward from the top-left corner of the
+page to the center (or transform-origin) of the given object.
+
+The hit-testing functions touches() and encloses() will test for
+collisions using the convex hulls of the objects in question.
+The hull of an element defaults to the bounding box of the element
+(as transformed) but can be overridden by the turtleHull CSS property,
+if present.  The default turtle is given a turtle-shaped hull.
 
-The absolute motion methods moveto and turnto accept any argument
-with pageX and pageY, including, usefully, mouse events.  They
-operate in absolute page coordinates even when the turtle is nested
-within further transformed elements.
+Turtle Teaching Environment
+---------------------------
 
-The hit-testing functions touches() and encloses() will test using
-the convex hull for the two objects in question. This defaults to
-the bounding box of the elements (as transformed) but can be overridden
-by the turtleHull CSS property, if present.
+A default turtle together with an interactive console are created by
+calling eval($.turtle()).  That call exposes all the turtle methods
+such as (fd, rt, getxy, etc) as global functions operating on the default
+turtle.  It will also set up a number of other global symbols to provide
+beginners with a simplified programming environment.
+
+In detail, after eval($.turtle()):
+  * An &lt;img id="turtle"&gt; is created if #turtle doesn't already exist.
+  * An eval debugging panel (see.js) is shown at the bottom of the screen.
+  * Turtle methods on the default turtle are packaged as globals, e.g., fd(10).
+  * Every #id element is turned into a global variable: window.id = $('#id').
+  * Default turtle animation is set to 1 move per sec so steps can be seen.
+  * Global event listeners are created to update global event variables.
+  * Methods of $.turtle.* (enumerated below) are exposed as global functions.
+
+Beyond the functions to control the default turtle, the globals added by
+$.turtle() are as follows:
+
+<pre>
+  lastclick             // Event object of the last click event in the doc.
+  lastmousemove         // The last mousemove event.
+  lastmouseup           // The last mouseup event.
+  lastmousedown         // The last mousedown event.
+  keydown               // The last keydown event.
+  keyup                 // The last keyup event.
+  keypress              // The last keypress event.
+  hatch([n,] [img])     // Creates and returns n turtles with the given img.
+  cs()                  // Clears the screen, both the canvas and the body text.
+  cg()                  // Clears the graphics canvas without clearing the text.
+  ct()                  // Clears the text without clearing the canvas.
+  defaultspeed(mps)     // Sets $.fx.speeds.turtle to 1000 / mps.
+  tick([perSec,] fn)    // Sets fn as the tick callback (null to clear).
+  random(n)             // Returns a random number [0..n-1].
+  random(list)          // Returns a random element of the list.
+  random('normal')      // Returns a gaussian random (mean 0 stdev 1).
+  random('uniform')     // Returns a uniform random [0...1).
+  random('position')    // Returns a random {pageX:x, pageY:y} coordinate.
+  random('color')       // Returns a random hsl(*, 100%, 50%) color.
+  random('gray')        // Returns a random hsl(0, 0, *) gray.
+  remove()              // Removes default turtle and its globals (fd, etc).
+  see(a, b, c...)       // Logs tree-expandable data into debugging panel.
+  write(html)           // Appends html into the document body.
+  read([label,] fn)     // Makes a one-time input field, calls fn after entry.
+  readnum([label,] fn)  // Like read, but restricted to numeric input.
+  readstr([label,] fn)  // Like read, but never converts input to a number.
+  button([label,] fn)   // Makes a clickable button, calls fn when clicked.
+  table(m, n)           // Outputs a table with m rows and n columns.
+  sound('[DFG][EGc]')   // Plays musical notes now, without queueing.
+</pre>
+
+Here is another CoffeeScript example that demonstrates some of
+the functions:
+
+<pre>
+  eval $.turtle()  # Create the default turtle and global functions.
+
+  defaultspeed Infinity
+  write "Catch blue before red gets you."
+  bk 100
+  r = hatch 'red'
+  b = hatch 'blue'
+  tick 10, ->
+    turnto lastmousemove
+    fd 6
+    r.turnto turtle
+    r.fd 4
+    b.turnto bearing b
+    b.fd 3
+    if b.touches(turtle)
+      write "You win!"
+      tick off
+    else if r.touches(turtle)
+      write "Red got you!"
+      tick off
+    else if not b.touches(document)
+      write "Blue got away!"
+      tick off
+</pre>
+
+The turtle teaching environment is designed to work well with either
+Javascript or CoffeeScript.
 
 JQuery CSS Hooks for Turtle Geometry
 ------------------------------------
 
-Turtle-oriented 2d transform cssHooks, with animation support on all
-motion:
+Underlying turtle motion are turtle-oriented 2d transform jQuery cssHooks,
+with animation support on all motion:
 
 <pre>
+  $(x).css('turtleSpeed', '10');         // default speed in moves per second.
   $(x).css('turtlePosition', '30 40');   // position in local coordinates.
-  $(x).css('turtlePositionX', '30');     // x component.
-  $(x).css('turtlePositionY', '40');     // y component.
-  $(x).css('turtleRotation', '90');      // rotation in degrees.
+  $(x).css('turtlePositionX', '30px');   // x component.
+  $(x).css('turtlePositionY', '40px');   // y component.
+  $(x).css('turtleRotation', '90deg');   // rotation in degrees.
   $(x).css('turtleScale', '2');          // double the size of any element.
-  $(x).css('turtleScaleX', '2');         // x stretch before rotate after twist.
-  $(x).css('turtleScaleY', '2');         // y stretch before rotate after twist.
-  $(x).css('turtleTwist', '45');         // turn before stretching.
-  $(x).css('turtleForward', '50');       // position in direction of rotation.
-  $(x).css('turtlePen', 'red');          // or 'red lineWidth 2px' etc.
+  $(x).css('turtleScaleX', '2');         // x stretch after twist.
+  $(x).css('turtleScaleY', '2');         // y stretch after twist.
+  $(x).css('turtleTwist', '45deg');      // turn before stretching.
+  $(x).css('turtleForward', '50px');     // position in direction of rotation.
+  $(x).css('turtleTurningRadius, '50px');// arc turning radius for rotation.
+  $(x).css('turtlePenStyle', 'red');     // or 'red lineWidth 2px' etc.
+  $(x).css('turtlePenDown', 'up');       // default 'down' to draw with pen.
   $(x).css('turtleHull', '5 0 0 5 0 -5');// fine-tune shape for collisions.
 </pre>
 
 Arbitrary 2d transforms are supported, including transforms of elements
-nested within other elements that have css transforms. Transforms are
-automatically decomposed to turtle components when necessary.
+nested within other elements that have css transforms. For example, arc
+paths of a turtle within a skewed div will transform to the proper elliptical
+arc.  Note that while turtle motion is transformed, lines and dots are not:
+for example, dots are always circular.  To get transformed circles, trace
+out an arc.
+
+Transforms on the turtle itself are used to infer the turtle position,
+direction, and rendering of the sprite.  ScaleY stretches the turtle
+sprite in the direction of movement also stretches distances for
+motion in all directions.  ScaleX stretches the turtle sprite perpendicular
+to the direction of motion and also stretches line and dot widths for
+drawing.
 
 A canvas is supported for drawing, but only created when the pen is
 used; pen styles include canvas style properties such as lineWidth
@@ -121,52 +299,6 @@ of (unrotated) x-y coordinates relative to the object's transformOrigin.
 If set to 'auto' (the default) the hull is just the bounding box for the
 element.
 
-Turtle Teaching Environment
----------------------------
-
-An optional teaching environment setup is created by eval($.turtle()).
-It provides easy packaging for the above functionality.
-
-After eval($.turtle()):
-  * An &lt;img id="turtle"&gt; is created if #turtle doesn't already exist.
-  * An eval debugging panel (see.js) is shown at the bottom of the screen.
-  * Turtle methods on the default turtle are packaged as globals, e.g., fd(10).
-  * Every #id element is turned into a global variable: window.id = $('#id').
-  * Globals are set up to save events: "lastclick", "lastmousemove", etc.
-  * Default turtle animation is set to 1 move per sec so steps can be seen.
-  * speed(movesPerSec) adjusts $.fx.speeds.turtle to 1000 / movesPerSec.
-  * tick([ticksPerSec,] fn) is similarly an easier-to-call setInterval.
-  * random(lessThanThisInteger || array) is an easy alternative to Math.random.
-  * remove() will remove the global turtle and global turtle methods.
-  * hatch([n,] [spec]) creates and returns any number of new turtles.
-  * see(a, b, c) logs tree-expandable data into the debugging panel.
-  * output(html or text) appends html to the document body.
-  * input(label, callback) appends a labelled input field to the document body.
-
-For example, after eval($.turtle()), the following is a valid program
-in CoffeeScript syntax:
-
-<pre>
-speed 100
-pen 'red'
-chaser = hatch()
-chaser.moveto 0,0
-chaser.bg 'red'
-player = turtle
-tick 10, ->
-  player.turnto lastmousemove
-  player.fd 5
-  chaser.turnto player
-  chaser.rt (random 60) - 30
-  chaser.fd 5
-  if chaser.touches player
-    output "tag! you're it!"
-    tick ->
-</pre>
-
-The turtle teaching environment is designed to work well with either
-Javascript or CoffeeScript.
-
 License (MIT)
 -------------
 
@@ -314,6 +446,10 @@ function subtractVector(v, s) {
   return [v[0] - s[0], v[1] - s[1]];
 }
 
+function scaleVector(v, s) {
+  return [v[0] * s, v[1] * s];
+}
+
 function translatedMVP(m, v, origin) {
   return addVector(matrixVectorProduct(m, subtractVector(v, origin)), origin);
 }
@@ -371,6 +507,30 @@ function decomposeSVD(m) {
   return [theta, sv1, sv2, phi];
 }
 
+// Returns approximate three bezier curve control points for a unit circle
+// arc from angle a1 to a2 (not including the beginning point).
+function approxBezierUnitArc(a1, a2) {
+  var a = (a2 - a1) / 2,
+      x4 = Math.cos(a),
+      y4 = Math.sin(a),
+      x1 = x4,
+      y1 = -y4,
+      q2 = 1 + x1 * x4 + y1 * y4,
+      k2 = 4/3 * (Math.sqrt(2 * q2) - q2) / (x1 * y4 - y1 * x4),
+      x2 = x1 - k2 * y1,
+      y2 = y1 + k2 * x1,
+      x3 = x2,
+      y3 = -y2,
+      ar = a + a1,
+      car = Math.cos(ar),
+      sar = Math.sin(ar);
+  return [
+     [x2 * car - y2 * sar, x2 * sar + y2 * car],
+     [x3 * car - y3 * sar, x3 * sar + y3 * car],
+     [Math.cos(a2), Math.sin(a2)]
+  ];
+}
+
 //////////////////////////////////////////////////////////////////////////
 // CSS TRANSFORMS
 // Basic manipulation of 2d CSS transforms.
@@ -406,9 +566,14 @@ function readTransformMatrix(elem) {
 function readTransformOrigin(elem, wh) {
   var gcs = (window.getComputedStyle ?  window.getComputedStyle(elem) : null),
       origin = (gcs && gcs[transformOrigin] || $.css(elem, 'transformOrigin'));
-  return origin && origin.indexOf('%') < 0 ?
-      $.map(origin.split(' '), parseFloat) :
-      [wh[0] / 2, wh[1] / 2];
+  if (origin && origin.indexOf('%') < 0) {
+    return $.map(origin.split(' '), parseFloat);
+  }
+  if (wh) {
+    return [wh[0] / 2, wh[1] / 2];
+  }
+  var sel = $(elem);
+  return [sel.width() / 2, sel.height() / 2];
 }
 
 // Composes all the 2x2 transforms up to the top.
@@ -501,7 +666,7 @@ function transformStyleAsMatrix(transformStyle) {
 
 //////////////////////////////////////////////////////////////////////////
 // ABSOLUTE PAGE POSITIONING
-// Dealing with the element center, rectangle, and direction on the page,
+// Dealing with the element origin, rectangle, and direction on the page,
 // taking into account nested parent transforms.
 //////////////////////////////////////////////////////////////////////////
 
@@ -530,8 +695,8 @@ function limitRotation(start, target, limit) {
   return normalizeRotation(target);
 }
 
-function getCenterLTWH(x0, y0, w, h) {
-  return { pageX: x0 + w / 2, pageY: y0 + h / 2 };
+function getRoundedCenterLTWH(x0, y0, w, h) {
+  return { pageX: Math.floor(x0 + w / 2), pageY: Math.floor(y0 + h / 2) };
 }
 
 function getStraightRectLTWH(x0, y0, w, h) {
@@ -662,7 +827,7 @@ function readPageGbcr() {
       left: 0,
       right: this.width || 0,
       width: this.width || 0,
-      height: this.height || 0,
+      height: this.height || 0
     }
   }
   return {
@@ -679,7 +844,7 @@ function readPageGbcr() {
 // to get origin position; then calculate displacement needed to move
 // turtle to target coordinates (again reversing parent distortions
 // if possible).
-function setCenterInPageCoordinates(elem, target, limit, localx, localy) {
+function computeTargetAsTurtlePosition(elem, target, limit, localx, localy) {
   var totalParentTransform = totalTransform2x2(elem.parentElement),
       inverseParent = inverse2x2(totalParentTransform),
       hidden = ($.css(elem, 'display') === 'none'),
@@ -690,9 +855,10 @@ function setCenterInPageCoordinates(elem, target, limit, localx, localy) {
       gbcr = cleanSwap(elem, swapout, readPageGbcr),
       middle = readTransformOrigin(elem, [gbcr.width, gbcr.height]),
       origin = addVector([gbcr.left, gbcr.top], middle),
-      pos, current, translation, localTarget;
+      pos, current, tr, localTarget;
   if (!inverseParent) { return; }
   if ($.isNumeric(limit)) {
+    tr = getElementTranslation(elem);
     pos = addVector(matrixVectorProduct(totalParentTransform, tr), origin);
     current = {
       pageX: pos[0],
@@ -704,11 +870,59 @@ function setCenterInPageCoordinates(elem, target, limit, localx, localy) {
       subtractVector([target.pageX, target.pageY], origin));
   if (localx || localy) {
     var ts = readTurtleTransform(elem, true),
-        r = (ts || 0) && convertToRadians(ts.rot);
-    localTarget[0] += Math.cos(r) * localx + Math.sin(r) * localy;
-    localTarget[1] += Math.sin(r) * localx - Math.cos(r) * localy;
+        sy = ts ? ts.sy : 1;
+    localTarget[0] += localx * sy;
+    localTarget[1] -= localy * sy;
+  }
+  return cssNum(localTarget[0]) + ' ' + cssNum(localTarget[1]);
+}
+
+function homeContainer(elem) {
+  var container = elem.offsetParent;
+  if (!container || container == drawing.surface) {
+    return document;
   }
-  $.style(elem, 'turtlePosition', localTarget.join(' '));
+  return container;
+}
+
+// Compute the home position and the turtle location in local turtle
+// coordinates; return the local offset from the home position as
+// an array of len 2.
+function computePositionAsLocalOffset(elem, home) {
+  if (!home) {
+    home = $(homeContainer(elem)).pagexy();
+  }
+  var totalParentTransform = totalTransform2x2(elem.parentElement),
+      inverseParent = inverse2x2(totalParentTransform),
+      hidden = ($.css(elem, 'display') === 'none'),
+      swapout = hidden ?
+        { position: "absolute", visibility: "hidden", display: "block" } : {},
+      substTransform = swapout[transform] = (inverseParent ? 'matrix(' +
+          $.map(inverseParent, cssNum).join(', ') + ', 0, 0)' : 'none'),
+      gbcr = cleanSwap(elem, swapout, readPageGbcr),
+      middle = readTransformOrigin(elem, [gbcr.width, gbcr.height]),
+      origin = addVector([gbcr.left, gbcr.top], middle),
+      ts = readTurtleTransform(elem, true),
+      localHome = inverseParent && matrixVectorProduct(inverseParent,
+          subtractVector([home.pageX, home.pageY], origin)),
+      isy = ts && 1 / ts.sy;
+  if (!inverseParent) { return; }
+  return [(ts.tx - localHome[0]) * isy, (localHome[1] - ts.ty) * isy];
+}
+
+function convertLocalXyToPageCoordinates(elem, localxy) {
+  var totalParentTransform = totalTransform2x2(elem.parentElement),
+      ts = readTurtleTransform(elem, true),
+      center = $(homeContainer(elem)).pagexy(),
+      result = [],
+      pageOffset, j;
+  for (j = 0; j < localxy.length; j++) {
+    pageOffset = matrixVectorProduct(
+        totalParentTransform, [localxy[j][0] * ts.sy, -localxy[j][1] * ts.sy]);
+    result.push({ pageX: center.pageX + pageOffset[0],
+                  pageY: center.pageY + pageOffset[1] });
+  }
+  return result;
 }
 
 // Uses getBoundingClientRect to figure out current position in page
@@ -718,10 +932,10 @@ function setCenterInPageCoordinates(elem, target, limit, localx, localy) {
 // to get the final x and y, returned as {pageX:, pagey:}.
 function getCenterInPageCoordinates(elem) {
   if ($.isWindow(elem)) {
-    return getCenterLTWH(
+    return getRoundedCenterLTWH(
         $(window).scrollLeft(), $(window).scrollTop(), ww(), wh());
-  } else if (elem.nodeType === 9) {
-    return getCenterLTWH(0, 0, dw(), dh());
+  } else if (elem.nodeType === 9 || elem == document.body) {
+    return getRoundedCenterLTWH(0, 0, dw(), dh());
   }
   var tr = getElementTranslation(elem),
       totalParentTransform = totalTransform2x2(elem.parentElement),
@@ -731,7 +945,7 @@ function getCenterInPageCoordinates(elem) {
         { position: "absolute", visibility: "hidden", display: "block" } : {},
       st = swapout[transform] = (inverseParent ? 'matrix(' +
           $.map(inverseParent, cssNum).join(', ') + ', 0, 0)' : 'none'),
-      substTransform = (st == 'matrix(1, 0, 0, 1, 0, 0)') ? 'none' : st;
+      substTransform = (st == 'matrix(1, 0, 0, 1, 0, 0)') ? 'none' : st,
       saved = elem.style[transform],
       gbcr = cleanSwap(elem, swapout, readPageGbcr),
       middle = readTransformOrigin(elem, [gbcr.width, gbcr.height]),
@@ -791,7 +1005,8 @@ function getCornersInPageCoordinates(elem, untransformed) {
   });
 }
 
-function setDirectionOnPage(elem, target, limit) {
+/*
+function computeDirectionAsTurtleRotation(elem, target, limit) {
   var totalParentTransform = totalTransform2x2(elem.parentElement),
       inverseParent = inverse2x2(totalParentTransform),
       ts = readTurtleTransform(elem, true);
@@ -808,13 +1023,13 @@ function setDirectionOnPage(elem, target, limit) {
   var rt = convertToRadians(target),
       lp = matrixVectorProduct(inverseParent, [Math.sin(rt), Math.cos(rt)]),
       tr = Math.atan2(lp[0], lp[1]);
-  ts.rot = radiansToDegrees(tr);
-  elem.style[transform] = writeTurtleTransform(ts);
+  return radiansToDegrees(tr);
 }
+*/
 
 function getDirectionOnPage(elem) {
   var ts = readTurtleTransform(elem, true),
-      r = convertToRadians(ts.rot),
+      r = convertToRadians(normalizeRotation(ts.rot)),
       ux = Math.sin(r), uy = Math.cos(r),
       totalParentTransform = totalTransform2x2(elem.parentElement),
       up = matrixVectorProduct(totalParentTransform, [ux, uy]);
@@ -837,7 +1052,7 @@ function scrollWindowToDocumentPosition(pos, limit) {
   if (ty < wh2) { ty = wh2; }
   targ = { pageX: tx, pageY: ty };
   if ($.isNumeric(limit)) {
-    targ = limitMovement(w.center(), targ, limit);
+    targ = limitMovement(w.origin(), targ, limit);
   }
   w.scrollLeft(targ.pageX - ww2);
   w.scrollTop(targ.pageY - wh2);
@@ -1106,9 +1321,16 @@ function normalizeRotation(x) {
   return x;
 }
 
+function normalizeRotationDelta(x) {
+  if (Math.abs(x) >= 720) {
+    x = x % 360 + (x > 0 ? 360 : -360);
+  }
+  return x;
+}
+
 //////////////////////////////////////////////////////////////////////////
 // TURTLE DRAWING SUPPORT
-// If pen, erase, or dot are used, then a full-page canvas is created
+// If pen, fill, or dot are used, then a full-page canvas is created
 // and used for drawing.
 //////////////////////////////////////////////////////////////////////////
 
@@ -1127,13 +1349,16 @@ function getTurtleClipSurface() {
     return drawing.surface;
   }
   var surface = document.createElement('samp');
-  $(surface).css({
-    position: 'absolute',
-    display: 'inline-block',
-    top: 0, left: 0, width: '100%', height: '100%',
-    'z-index': -1,
-    overflow: 'hidden'
-  });
+  $(surface)
+    .attr('id', '_turtlefield')
+    .css({
+      position: 'absolute',
+      display: 'inline-block',
+      top: 0, left: 0, width: '100%', height: '100%',
+      zIndex: -1,
+      fontFamily: 'inherit',
+      overflow: 'hidden'
+    });
   drawing.surface = surface;
   attachClipSurface();
   return surface;
@@ -1142,6 +1367,25 @@ function getTurtleClipSurface() {
 function attachClipSurface() {
   if (document.body) {
     $(drawing.surface).prependTo('body');
+    // Attach an event handler to forward mouse events from the body
+    // to turtles in the turtle field layer.
+    $('body').on('click.turtle ' +
+      'mouseup.turtle mousedown.turtle mousemove.turtle', function(e) {
+      if (e.target === this && !e.isTrigger) {
+        // Only forward events directly on the body that (geometrically)
+        // touch a turtle directly within the turtlefield.
+        var sel = $('#_turtlefield > .turtle').within('touch', e).eq(0);
+        if (sel.length === 1) {
+          // Erase portions of the event that are wrong for the turtle.
+          e.target = null;
+          e.relatedTarget = null;
+          e.fromElement = null;
+          e.toElement = null;
+          sel.trigger(e);
+          return false;
+        }
+      }
+    });
   } else {
     $(document).ready(attachClipSurface);
   }
@@ -1154,7 +1398,7 @@ function getTurtleDrawingCtx() {
   var surface = getTurtleClipSurface();
   drawing.canvas = document.createElement('canvas');
   $(drawing.canvas).css({'z-index': -1});
-  surface.appendChild(drawing.canvas);
+  surface.insertBefore(drawing.canvas, surface.firstChild);
   drawing.ctx = drawing.canvas.getContext('2d');
   resizecanvas();
   pollbodysize(resizecanvas);
@@ -1205,12 +1449,18 @@ function resizecanvas() {
   }
 }
 
-// turtlePen style syntax
+// turtlePenStyle style syntax
 function parsePenStyle(text, defaultProp) {
   if (!text) { return null; }
   text = text.trim();
   if (!text || text === 'none') { return null; }
   if (text === 'path') { return { savePath: true }; }
+  var eraseMode = false;
+  if (/^erase\b/.test(text)) {
+    text = text.replace(
+        /^erase\b/, 'white globalCompositeOperation destination-out');
+    eraseMode = true;
+  }
   var words = text.split(/\s+/),
       mapping = {
         strokeStyle: identity,
@@ -1219,8 +1469,10 @@ function parsePenStyle(text, defaultProp) {
         lineJoin: identity,
         miterLimit: parseFloat,
         fillStyle: identity,
+        globalCompositeOperation: identity
       },
       result = {}, j, end = words.length;
+  if (eraseMode) { result.eraseMode = true; }
   for (j = words.length - 1; j >= 0; --j) {
     if (mapping.hasOwnProperty(words[j])) {
       var key = words[j],
@@ -1245,15 +1497,63 @@ function writePenStyle(style) {
   return result.join(' ');
 }
 
+function parsePenDown(style) {
+  if (style == 'down' || style === true) return true;
+  if (style == 'up' || style === false) return false;
+  return undefined;
+}
+
+function writePenDown(bool) {
+  return bool ? 'down' : 'up';
+}
+
 function getTurtleData(elem) {
   var state = $.data(elem, 'turtleData');
   if (!state) {
-    state = $.data(elem, 'turtleData', { style: null, path: [] });
+    state = $.data(elem, 'turtleData', {
+      style: null,
+      path: [[]],
+      down: true,
+      speed: 'turtle',
+      turningRadius: 0,
+      // Below: support for image loading without messing up origin.
+      lastSeenOrigin: null,
+      lastSeenOriginTime: null,
+      lastSeenOriginTimer: null,
+      lastSeenOriginEvent: null
+    });
   }
   return state;
 }
 
-function makePenHook() {
+function getTurningRadius(elem) {
+  var state = $.data(elem, 'turtleData');
+  if (!state) { return 0; }
+  return state.turningRadius;
+}
+
+function makeTurningRadiusHook() {
+  return {
+    get: function(elem, computed, extra) {
+      return cssNum(getTurningRadius(elem)) + 'px';
+    },
+    set: function(elem, value) {
+      var radius = parseFloat(value);
+      if (isNaN(radius)) return;
+      getTurtleData(elem).turningRadius = radius;
+      elem.style.turtleTurningRadius = '' + cssNum(radius) + 'px';
+      if (radius === 0) {
+        var ts = readTurtleTransform(elem, false);
+        if (ts && (ts.rot > 180 || ts.rot <= -180)) {
+          ts.rot = normalizeRotation(ts.rot);
+          elem.style[transform] = writeTurtleTransform(ts);
+        }
+      }
+    }
+  };
+}
+
+function makePenStyleHook() {
   return {
     get: function(elem, computed, extra) {
       return writePenStyle(getTurtleData(elem).style);
@@ -1261,10 +1561,23 @@ function makePenHook() {
     set: function(elem, value) {
       var style = parsePenStyle(value, 'strokeStyle');
       getTurtleData(elem).style = style;
-      elem.style.turtlePen = writePenStyle(style);
-      if (style) {
-        flushPenState(elem);
-      }
+      elem.style.turtlePenStyle = writePenStyle(style);
+      flushPenState(elem);
+    }
+  };
+}
+
+function makePenDownHook() {
+  return {
+    get: function(elem, computed, extra) {
+      return writePenDown(getTurtleData(elem).down);
+    },
+    set: function(elem, value) {
+      var style = parsePenDown(value);
+      if (style === undefined) return;
+      getTurtleData(elem).down = style;
+      elem.style.turtlePenDown = writePenDown(style);
+      flushPenState(elem);
     }
   };
 }
@@ -1274,48 +1587,107 @@ function isPointNearby(a, b) {
          Math.round(a.pageY - b.pageY) === 0;
 }
 
-function applyPenStyle(ctx, ps) {
+function applyPenStyle(ctx, ps, scale) {
+  scale = scale || 1;
+  var extraWidth = ps.eraseMode ? 1 : 0;
   if (!ps || !('strokeStyle' in ps)) { ctx.strokeStyle = 'black'; }
-  if (!ps || !('lineWidth' in ps)) { ctx.lineWidth = 1.62; }
+  if (!ps || !('lineWidth' in ps)) { ctx.lineWidth = 1.62 * scale + extraWidth; }
   if (!ps || !('lineCap' in ps)) { ctx.lineCap = 'round'; }
   if (ps) {
     for (var a in ps) {
-      if (a === 'path') { continue; }
-      ctx[a] = ps[a];
+      if (a === 'savePath' || a === 'eraseMode') { continue; }
+      if (scale && a === 'lineWidth') {
+        ctx[a] = scale * ps[a] + extraWidth;
+      } else {
+        ctx[a] = ps[a];
+      }
     }
   }
 }
 
+function drawAndClearPath(path, style, scale) {
+  var ctx = getTurtleDrawingCtx(),
+      isClosed, skipLast,
+      j = path.length,
+      segment;
+  ctx.save();
+  ctx.beginPath();
+  // Scale up lineWidth by sx.  (TODO: consider parent transforms.)
+  applyPenStyle(ctx, style, scale);
+  while (j--) {
+    if (path[j].length) {
+      segment = path[j];
+      isClosed = segment.length > 2 && isPointNearby(
+          segment[0], segment[segment.length - 1]);
+      skipLast = isClosed && (!('pageX2' in segment[segment.length - 1]));
+      ctx.moveTo(segment[0].pageX, segment[0].pageY);
+      for (var k = 1; k < segment.length - (skipLast ? 1 : 0); ++k) {
+        if ('pageX2' in segment[k]) {
+          ctx.bezierCurveTo(
+             segment[k].pageX1, segment[k].pageY1,
+             segment[k].pageX2, segment[k].pageY2,
+             segment[k].pageX, segment[k].pageY);
+        } else {
+          ctx.lineTo(segment[k].pageX, segment[k].pageY);
+        }
+      }
+      if (isClosed) { ctx.closePath(); }
+    }
+  }
+  if ('fillStyle' in style) { ctx.fill(); }
+  if ('strokeStyle' in style) { ctx.stroke(); }
+  ctx.restore();
+  path.length = 1;
+  path[0].splice(0, path[0].length - 1);
+}
+
+function addBezierToPath(path, start, triples) {
+  if (!path.length || !isPointNearby(start, path[path.length - 1])) {
+    path.push(start);
+  }
+  for (var j = 0; j < triples.length; ++j) {
+    path.push({
+        pageX1: triples[j][0].pageX, pageY1: triples[j][0].pageY,
+        pageX2: triples[j][1].pageX, pageY2: triples[j][1].pageY,
+        pageX: triples[j][2].pageX, pageY: triples[j][2].pageY });
+  }
+}
+
 function flushPenState(elem) {
   var state = getTurtleData(elem);
-  if (!state.style) {
-    if (state.path.length) { state.path.length = 0; }
+  if (!state.style || (!state.down && !state.style.savePath)) {
+    if (state.path.length > 1) { state.path.length = 1; }
+    if (state.path[0].length) { state.path[0].length = 0; }
+    return;
+  }
+  if (!state.down) {
+    // Penup when saving path will start a new segment if one isn't started.
+    if (state.path.length && state.path[0].length) {
+      state.path.shift([]);
+    }
     return;
   }
+  if (state.lastSeenOrigin) { fixOriginIfWatching(elem); }
   var center = getCenterInPageCoordinates(elem);
   // Once the pen is down, the origin needs to be stable when the image
   // loads.
   watchImageToFixOriginOnLoad(elem);
-  if (!state.path.length ||
-      !isPointNearby(center, state.path[state.path.length - 1])) {
-    state.path.push(center);
+  if (!state.path[0].length ||
+      !isPointNearby(center, state.path[0][state.path[0].length - 1])) {
+    state.path[0].push(center);
   }
-  if (!state.style.path) {
-    var ctx = getTurtleDrawingCtx();
-        isClosed = isPointNearby(
-            state.path[0], state.path[state.path.length - 1]);
-    ctx.save();
-    applyPenStyle(ctx, state.style);
-    ctx.beginPath();
-    ctx.moveTo(state.path[0].pageX, state.path[0].pageY);
-    for (var j = 1; j < state.path.length - (isClosed ? 1 : 0); ++j) {
-      ctx.lineTo(state.path[j].pageX, state.path[j].pageY);
-    }
-    if (isClosed) { ctx.closePath(); }
-    if ('fillStyle' in state.style) { ctx.fill(); }
-    if ('strokeStyle' in state.style) { ctx.stroke(); }
-    ctx.restore();
-    state.path.splice(0, state.path.length - 1);
+  if (!state.style.savePath) {
+    var ts = readTurtleTransform(elem, true);
+    drawAndClearPath(state.path, state.style, ts.sx);
+  }
+}
+
+function endAndFillPenPath(elem, style) {
+  var ts = readTurtleTransform(elem, true),
+      state = getTurtleData(elem);
+  drawAndClearPath(state.path, style);
+  if (state.style && state.style.savePath) {
+    $.style(elem, 'turtlePenStyle', 'none');
   }
 }
 
@@ -1327,9 +1699,21 @@ function fillDot(position, diameter, style) {
   ctx.arc(position.pageX, position.pageY, diameter / 2, 0, 2*Math.PI, false);
   ctx.closePath();
   ctx.fill();
+  if (style.strokeStyle) {
+    ctx.stroke();
+  }
   ctx.restore();
 }
 
+function clearField(arg) {
+  if (!arg || /\bcanvas\b/.test(arg)) {
+    eraseBox(document, {fillStyle: 'transparent'});
+  }
+  if (!arg || /\btext\b/.test(arg)) {
+    $('body').contents().not('samp#_testpanel,samp#_turtlefield').remove();
+  }
+}
+
 function eraseBox(elem, style) {
   var c = getCornersInPageCoordinates(elem),
       ctx = getTurtleDrawingCtx(),
@@ -1358,27 +1742,38 @@ function eraseBox(elem, style) {
 
 function applyImg(sel, img) {
   if (sel[0].tagName == 'IMG') {
+    sel[0].src = '';
     sel[0].src = img.url;
+    sel.css({
+      backgroundImage: 'none',
+      height: 'auto',
+      width: 'auto'
+    });
     sel.css(img.css);
   } else {
-    sel.css({
+    var props = {
       backgroundImage: 'url(' + img.url + ')',
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
-      backgroundSize: img.css.width + 'px ' + img.css.height + 'px'
-    });
+    };
+    if (img.css.width && img.css.height) {
+      props.backgroundSize = img.css.width + 'px ' + img.css.height + 'px';
+    }
+    sel.css(props);
   }
 }
 
 function doQuickMove(elem, distance, sideways) {
   var ts = readTurtleTransform(elem, true),
-      r = (ts || 0) && convertToRadians(ts.rot),
-      dy = -Math.cos(r) * distance,
-      dx = Math.sin(r) * distance;
+      r = ts && convertToRadians(ts.rot),
+      scaledDistance = ts && (distance * ts.sy),
+      scaledSideways = ts && ((sideways || 0) * ts.sy),
+      dy = -Math.cos(r) * scaledDistance,
+      dx = Math.sin(r) * scaledDistance;
   if (!ts) { return; }
   if (sideways) {
-    dy += Math.sin(r) * sideways;
-    dx += Math.cos(r) * sideways;
+    dy += Math.sin(r) * scaledSideways;
+    dx += Math.cos(r) * scaledSideways;
   }
   ts.tx += dx;
   ts.ty += dy;
@@ -1388,9 +1783,9 @@ function doQuickMove(elem, distance, sideways) {
 
 function displacedPosition(elem, distance, sideways) {
   var ts = readTurtleTransform(elem, true),
-      r = (ts || 0) && convertToRadians(ts.rot),
-      scaledDistance = (ts || 0) && (distance * ts.sy),
-      scaledSideways = (ts || 0) && ((sideways || 0) * ts.sx),
+      r = ts && convertToRadians(ts.rot),
+      scaledDistance = ts && (distance * ts.sy),
+      scaledSideways = ts && ((sideways || 0) * ts.sy),
       dy = -Math.cos(r) * scaledDistance,
       dx = Math.sin(r) * scaledDistance;
   if (!ts) { return; }
@@ -1405,27 +1800,59 @@ function isPageCoordinate(obj) {
   return $.isNumeric(obj.pageX) && $.isNumeric(obj.pageY);
 }
 
+function makeTurtleSpeedHook() {
+  return {
+    get: function(elem, computed, extra) {
+      return getTurtleData(elem).speed;
+    },
+    set: function(elem, value) {
+      if ((!$.isNumeric(value) || value <= 0) &&
+          !(value in $.fx.speeds) && ('' + value != 'Infinity')) {
+        return;
+      }
+      getTurtleData(elem).speed = '' + value;
+    }
+  }
+}
+
+function animTime(elem) {
+  var state = $.data(elem, 'turtleData');
+  if (!state) return 'turtle';
+  if ($.isNumeric(state.speed) || state.speed == 'Infinity') {
+    return 1000 / state.speed;
+  }
+  return state.speed;
+}
+
 function makeTurtleForwardHook() {
   return {
     get: function(elem, computed, extra) {
-      var ts = readTurtleTransform(elem, computed);
+      // TODO: after reading turtleForward, we need to also
+      // adjust it if ts.tx/ty change due to an origin change,
+      // so that images don't stutter if they resize during an fd.
+      // OR - offset by origin, so that changes in its value are
+      // not a factor.
+      var ts = readTurtleTransform(elem, computed),
+          middle = readTransformOrigin(elem);
       if (ts) {
         var r = convertToRadians(ts.rot),
             c = Math.cos(r),
             s = Math.sin(r);
-        return (ts.tx * s - ts.ty * c) / ts.sy + 'px';
+        return cssNum(((ts.tx + middle[0]) * s - (ts.ty + middle[1]) * c)
+            / ts.sy) + 'px';
       }
     },
     set: function(elem, value) {
       var ts = readTurtleTransform(elem, true) ||
               {tx: 0, ty: 0, rot: 0, sx: 1, sy: 1, twi: 0},
+          middle = readTransformOrigin(elem),
           v = parseFloat(value) * ts.sy,
           r = convertToRadians(ts.rot),
           c = Math.cos(r),
           s = Math.sin(r),
-          p = ts.tx * c + ts.ty * s;
-      ts.tx = p * c + v * s;
-      ts.ty = p * s - v * c;
+          p = (ts.tx + middle[0]) * c + (ts.ty + middle[1]) * s;
+      ts.tx = p * c + v * s - middle[0];
+      ts.ty = p * s - v * c - middle[1];
       elem.style[transform] = writeTurtleTransform(ts);
       flushPenState(elem);
     }
@@ -1436,25 +1863,87 @@ function makeTurtleForwardHook() {
 function makeTurtleHook(prop, normalize, unit, displace) {
   return {
     get: function(elem, computed, extra) {
+      if (displace) fixOriginIfWatching(elem);
       var ts = readTurtleTransform(elem, computed);
       if (ts) { return ts[prop] + unit; }
     },
     set: function(elem, value) {
+      if (displace) fixOriginIfWatching(elem);
       var ts = readTurtleTransform(elem, true) ||
-          {tx: 0, ty: 0, rot: 0, sx: 1, sy: 1, twi: 0};
-      ts[prop] = normalize(value);
+          {tx: 0, ty: 0, rot: 0, sx: 1, sy: 1, twi: 0},
+          opt = { displace: displace };
+      ts[prop] = normalize(value, elem, ts, opt);
       elem.style[transform] = writeTurtleTransform(ts);
-      if (displace) {
+      if (opt.displace) {
         flushPenState(elem);
       }
     }
   };
 }
 
+function maybeArcRotation(end, elem, ts, opt) {
+  end = parseFloat(end);
+  var state = $.data(elem, 'turtleData'),
+      tradius = state ? state.turningRadius : 0;
+  if (tradius == 0) { return normalizeRotation(end); }
+  var r0 = ts.rot, r1, r1r, a1r, a2r, j, r, pts, triples,
+      delta = normalizeRotationDelta(end - r0),
+      radius = (delta > 0 ? tradius : -tradius) * ts.sy,
+      splits = 1,
+      splita = delta,
+      absang = Math.abs(delta),
+      tracing = (state && state.style && state.down),
+      r0r = convertToRadians(ts.rot),
+      dc = [Math.cos(r0r) * radius, Math.sin(r0r) * radius],
+      path, totalParentTransform, start, relative, points;
+  if (tracing) {
+    if (!state) {
+      state = getTurtleData(elem);
+    }
+    if (absang > 45) {
+      splits = Math.ceil(absang / 45);
+      splita = delta / splits;
+    }
+    path = state.path[0];
+    totalParentTransform = totalTransform2x2(elem.parentElement);
+    start = getCenterInPageCoordinates(elem);
+    relative = [];
+    while (--splits >= 0) {
+      r1 = splits === 0 ? end : r0 + splita;
+      a1r = convertToRadians(r0 + 180);
+      a2r = convertToRadians(r1 + 180);
+      relative.push.apply(relative, approxBezierUnitArc(a1r, a2r));
+      r0 = r1;
+    }
+    points = [];
+    r = matrixVectorProduct(totalParentTransform, dc);
+    for (j = 0; j < relative.length; j++) {
+      // Multiply each coordinate by radius and add to dc; then
+      // apply parent distortions to get relative offsets to the
+      // turtle's original position.
+      r = matrixVectorProduct(totalParentTransform,
+          addVector(scaleVector(relative[j], radius), dc));
+      points.push({
+        pageX: r[0] + start.pageX,
+        pageY: r[1] + start.pageY});
+    }
+    triples = [];
+    for (j = 0; j < points.length; j += 3) {
+      triples.push(points.slice(j, j + 3));
+    }
+    addBezierToPath(path, start, triples);
+  }
+  r1r = convertToRadians(end)
+  ts.tx += dc[0] - Math.cos(r1r) * radius;
+  ts.ty += dc[1] - Math.sin(r1r) * radius;
+  opt.displace = true;
+  return end;
+}
+
 function makeRotationStep(prop) {
   return function(fx) {
     if (!fx.delta) {
-      fx.delta = normalizeRotation(fx.end - fx.start);
+      fx.delta = normalizeRotationDelta(fx.end - fx.start);
       fx.start = fx.end - fx.delta;
     }
     $.cssHooks[prop].set(fx.elem, fx.start + fx.delta * fx.pos);
@@ -1490,6 +1979,7 @@ var XY = ['X', 'Y'];
 function makeTurtleXYHook(publicname, propx, propy, displace) {
   return {
     get: function(elem, computed, extra) {
+      fixOriginIfWatching(elem);
       var ts = readTurtleTransform(elem, computed);
       if (ts) {
         if (displace || ts[propx] != ts[propy]) {
@@ -1501,6 +1991,7 @@ function makeTurtleXYHook(publicname, propx, propy, displace) {
       }
     },
     set: function(elem, value, extra) {
+      fixOriginIfWatching(elem);
       var ts = readTurtleTransform(elem, true) ||
               {tx: 0, ty: 0, rot: 0, sx: 1, sy: 1, twi: 0};
       var parts = (typeof(value) == 'string' ? value.split(/\s+/) : [value]);
@@ -1517,29 +2008,69 @@ function makeTurtleXYHook(publicname, propx, propy, displace) {
   };
 }
 
+function fixOriginIfWatching(elem) {
+  // A function to reposition an image turtle each time its origin
+  // changes from the last seen origin, to keep the origin in the
+  // same location on the page.
+  var state = $.data(elem, 'turtleData');
+  if (state && state.lastSeenOrigin) {
+    var oldOrigin = state.lastSeenOrigin,
+        newOrigin = readTransformOrigin(elem),
+        now = (new Date).getTime();
+    if (state.lastSeenOriginEvent && elem.complete) {
+      $.event.remove(elem, 'load.turtle', state.lastSeenOriginEvent);
+      state.lastSeenOriginEvent = null;
+      state.lastSeenOriginTime = now;
+    }
+    if (newOrigin[0] != oldOrigin[0] || newOrigin[1] != oldOrigin[1]) {
+      var ts = readTurtleTransform(elem, true);
+      ts.tx += oldOrigin[0] - newOrigin[0];
+      ts.ty += oldOrigin[1] - newOrigin[1];
+      state.lastSeenOrigin = newOrigin;
+      state.lastSeenOriginTime = now;
+      elem.style[transform] = writeTurtleTransform(ts);
+    } else if (elem.tagName == 'IMG' && !elem.complete) {
+      state.lastSeenOriginTime = now;
+      if (!state.lastSeenOriginEvent) {
+        state.lastSeenOriginEvent = (function() { fixOriginIfWatching(elem); });
+        $.event.add(elem, 'load.turtle', state.lastSeenOriginEvent);
+      }
+    } else if (!state.lastSeenOriginTime) {
+      state.lastSeenOriginTime = now;
+    } else if (!state.lastSeenOriginEvent &&
+        now - state.lastSeenOriginTime > 1000) {
+      // Watch for an additional second after anything interesting;
+      // then clear the watcher.
+      clearInterval(state.lastSeenOriginTimer);
+      state.lastSeenOriginTimer = null;
+      state.lastSeenOriginTime = null;
+      state.lastSeenOrigin = null;
+    }
+  }
+}
+
 function watchImageToFixOriginOnLoad(elem) {
-  if (!elem || elem.tagName !== 'IMG' && elem.complete ||
-      $.data(elem, 'turtleFixingOrigin')) {
+  if (!elem || elem.tagName !== 'IMG' ||
+      $(elem).css('position') != 'absolute') {
     return;
   }
-  $.data(elem, 'turtleFixingOrigin', true);
-  var oldOrigin = readTransformOrigin(elem,
-          [$(elem).width(), $(elem).height()]),
-      fixOrigin = function() {
-    var newOrigin = readTransformOrigin(elem,
-            [$(elem).width(), $(elem).height()]),
-        ts = readTurtleTransform(elem, true);
-    $.removeData(elem, 'turtleFixingOrigin');
-    ts.tx += oldOrigin[0] - newOrigin[0];
-    ts.ty += oldOrigin[1] - newOrigin[1];
-    elem.style[transform] = writeTurtleTransform(ts);
-    jQuery.event.remove(elem, 'load', fixOrigin);
-  };
-  jQuery.event.add(elem, 'load', fixOrigin);
+  var state = getTurtleData(elem),
+      now = (new Date).getTime();
+  if (state.lastSeenOrigin) {
+    // Already tracking: let it continue.
+    fixOriginIfWatching(elem);
+    return;
+  }
+  state.lastSeenOrigin = readTransformOrigin(elem);
+  state.lastSeenOriginTimer = setInterval(function() {
+    fixOriginIfWatching(elem);
+  }, 200);
+  fixOriginIfWatching(elem);
 }
 
+
 function withinOrNot(obj, within, distance, x, y) {
-  var sel, gbcr;
+  var sel, gbcr, pos, d2;
   if (x === undefined && y === undefined) {
     sel = $(distance);
     gbcr = getPageGbcr(sel[0]);
@@ -1555,33 +2086,46 @@ function withinOrNot(obj, within, distance, x, y) {
       });
     }
   }
+  if ($.isNumeric(x) && $.isNumeric(y)) {
+    pos = [x, y];
+  } else {
+    pos = x;
+  }
+  if ($.isArray(pos)) {
+    // [x, y]: local coordinates.
+    pos = convertLocalXyToPageCoordinates(obj[0] || document.body, [pos])[0];
+  }
   if (distance === 'touch') {
-    sel = $(x);
-    gbcr = getPageGbcr(sel[0]);
-    if (polyMatchesGbcr(getCornersInPageCoordinates(sel[0]), gbcr)) {
+    if (isPageCoordinate(pos)) {
       return obj.filter(function() {
-        var thisgbcr = getPageGbcr(this);
-        // !isDisjoint test assumes gbcr is tight.
-        return within === (!isDisjointGbcr(gbcr, thisgbcr) &&
-          (gbcrEncloses(gbcr, thisgbcr) || sel.touches(this)));
+        return within === $(this).encloses(pos);
       });
     } else {
-      return obj.filter(function() {
-        return within === sel.touches(this);
-      });
+      sel = $(pos);
+      gbcr = getPageGbcr(sel[0]);
+      if (polyMatchesGbcr(getCornersInPageCoordinates(sel[0]), gbcr)) {
+        return obj.filter(function() {
+          var thisgbcr = getPageGbcr(this);
+          // !isDisjoint test assumes gbcr is tight.
+          return within === (!isDisjointGbcr(gbcr, thisgbcr) &&
+            (gbcrEncloses(gbcr, thisgbcr) || sel.touches(this)));
+        });
+      } else {
+        return obj.filter(function() {
+          return within === sel.touches(this);
+        });
+      }
     }
   }
-  var ctr = $.isNumeric(x) && $.isNumeric(y) ? { pageX: x, pageY: y } :
-    isPageCoordinate(x) ? x :
-    $(x).center(),
-    d2 = distance * distance;
+  d2 = distance * distance;
   return obj.filter(function() {
     var gbcr = getPageGbcr(this);
-    if (isGbcrOutside(ctr, distance, d2, gbcr)) { return !within; }
-    if (isGbcrInside(ctr, d2, gbcr)) { return within; }
-    var thisctr = getCenterInPageCoordinates(this),
-        dx = ctr.pageX - thisctr.pageX,
-        dy = ctr.pageY - thisctr.pageY;
+    if (isGbcrOutside(pos, distance, d2, gbcr)) { return !within; }
+    if (isGbcrInside(pos, d2, gbcr)) { return within; }
+    fixOriginIfWatching(this);
+    var thispos = getCenterInPageCoordinates(this),
+        dx = pos.pageX - thispos.pageX,
+        dy = pos.pageY - thispos.pageY;
     return within === (dx * dx + dy * dy <= d2);
   });
 }
@@ -1593,12 +2137,15 @@ function withinOrNot(obj, within, distance, x, y) {
 
 $.extend(true, $, {
   cssHooks: {
-    turtlePen: makePenHook(),
+    turtlePenStyle: makePenStyleHook(),
+    turtlePenDown: makePenDownHook(),
+    turtleSpeed: makeTurtleSpeedHook(),
     turtleForward: makeTurtleForwardHook(),
+    turtleTurningRadius: makeTurningRadiusHook(),
     turtlePosition: makeTurtleXYHook('turtlePosition', 'tx', 'ty', true),
     turtlePositionX: makeTurtleHook('tx', identity, 'px', true),
     turtlePositionY: makeTurtleHook('ty', identity, 'px', true),
-    turtleRotation: makeTurtleHook('rot', normalizeRotation, 'deg', false),
+    turtleRotation: makeTurtleHook('rot', maybeArcRotation, 'deg', true),
     turtleScale: makeTurtleXYHook('turtleScale', 'sx', 'sy', false),
     turtleScaleX: makeTurtleHook('sx', identity, '', false),
     turtleScaleY: makeTurtleHook('sy', identity, '', false),
@@ -1606,6 +2153,8 @@ $.extend(true, $, {
     turtleHull: makeHullHook()
   },
   cssNumber: {
+    turtleRotation: true,
+    turtleSpeed: true,
     turtleScale: true,
     turtleScaleX: true,
     turtleScaleY: true,
@@ -1627,84 +2176,407 @@ $.extend(true, $.fx, {
   }
 });
 
+function wraphelp(text, fn) {
+  fn.helptext = text;
+  return fn;
+}
+
+function helpwrite(text) {
+  see.html('<aside style="line-height:133%;word-break:normal;' +
+           'white-space:normal">' + text + '</aside>');
+}
+function globalhelp(obj) {
+  var helptable = $.extend({}, dollar_turtle_methods, turtlefn),
+      helplist, j;
+  if (obj && (!$.isArray(obj.helptext))) {
+    if (obj in helptable) {
+      obj = helptable[obj];
+    }
+  }
+  if (obj && $.isArray(obj.helptext) && obj.helptext.length) {
+    for (j = 0; j < obj.helptext.length; ++j) {
+      var text = obj.helptext[j];
+      helpwrite(text.replace(/<(u|mark)>/g,
+          '<$1 style="border:1px solid black;text-decoration:none;' +
+          'word-break:keep-all;white-space:nowrap">'));
+    }
+    return;
+  }
+  helplist = [];
+  for (var name in helptable) {
+    if (helptable[name].helptext && helptable[name].helptext.length) {
+      helplist.push(name);
+    }
+  }
+  helplist.sort();
+  helpwrite("help available for: " + helplist.join(" "));
+}
+globalhelp.helptext = [];
+
 var turtlefn = {
-  rt: function(amount) {
-    return this.animate({'turtleRotation': '+=' + amount}, 'turtle');
-  },
-  lt: function(amount) {
-    return this.animate({'turtleRotation': '-=' + amount}, 'turtle');
-  },
-  fd: function(amount, y) {
-    var sideways = 0;
-    if (y !== undefined) {
-      sideways = amount;
-      amount = y;
-    }
-    // Fast path: do the move directly when there is no animation.
-    if (!$.fx.speeds.turtle) {
-      return this.each(function(j, elem) {
-        var q = $.queue(elem), doqueue = (q && q.length > 0);
-        function domove() {
-          doQuickMove(elem, amount, sideways);
-          if (doqueue) { $.dequeue(elem); }
-        }
-        if (doqueue) {
-          domove.finish = domove;
-          q.push(domove);
-        } else {
-          domove();
-        }
+  rt: wraphelp(
+  ["<u>rt(degrees)</u> Right turn. Pivots clockwise by some degrees: " +
+      "<mark>rt 90</mark>"],
+  function rt(amount) {
+    return this.direct(function(j, elem) {
+      this.animate({turtleRotation: '+=' + cssNum(amount || 0) + 'deg'},
+          animTime(elem));
+    });
+  }),
+  lt: wraphelp(
+  ["<u>lt(degrees)</u> Left turn. Pivots counterclockwise by some degrees: " +
+      "<mark>lt 90</mark>"],
+  function lt(amount) {
+    return this.direct(function(j, elem) {
+      this.animate({turtleRotation: '-=' + cssNum(amount || 0) + 'deg'},
+          animTime(elem));
+    });
+  }),
+  fd: wraphelp(
+  ["<u>fd(pixels)</u> Forward. Moves ahead by some pixels: " +
+      "<mark>fd 100</mark>"],
+  function fd(amount) {
+    var elem, q, doqueue;
+    if (this.length == 1 && !$.fx.speeds.turtle &&
+        animTime(elem = this[0]) == 'turtle') {
+      q = $.queue(elem);
+      doqueue = (q.length > 0);
+      function domove() {
+        fixOriginIfWatching(elem);
+        doQuickMove(elem, amount, 0);
+        if (doqueue) { $.dequeue(elem); }
+      }
+      if (doqueue) {
+        domove.finish = domove;
+        q.push(domove);
+      } else {
+        domove();
+      }
+      return this;
+    }
+    return this.direct(function(j, elem) {
+      fixOriginIfWatching(elem);
+      this.animate({turtleForward: '+=' + cssNum(amount || 0) + 'px'},
+          animTime(elem));
+    });
+  }),
+  bk: wraphelp(
+  ["<u>bk(pixels)</u> Back. Moves in reverse by some pixels: " +
+      "<mark>bk 100</mark>"],
+  function bk(amount) {
+    return this.fd(-amount);
+  }),
+  slide: wraphelp(
+  ["<u>slide(x, y)</u> Slides right x and forward y pixels without turning: " +
+      "<mark>slide 50, 100</mark>"],
+  function slide(x, y) {
+    if (!y) { y = 0; }
+    if (!x) { x = 0; }
+    return this.direct(function(j, elem) {
+      this.animate({turtlePosition:
+          displacedPosition(elem, y, x)}, animTime(elem));
+    });
+  }),
+  rarc: wraphelp(
+  ["<u>rarc(radius, degrees)</u> Right arc. " +
+      "Curves right some degrees, with a radius: " +
+      "<mark>rarc 100, 45</mark>"],
+  function rarc(radius, amount) {
+    if (!radius || !amount) {
+      return this.rt(amount);
+    }
+    return this.direct(function(j, elem) {
+      var oldRadius = this.css('turtleTurningRadius');
+      this.css({turtleTurningRadius: (amount < 0) ? -radius : radius});
+      this.animate({turtleRotation: '+=' + cssNum(amount) + 'deg'},
+          animTime(elem));
+      this.direct(function() {
+        this.css({turtleTurningRadius: oldRadius});
       });
+    });
+  }),
+  larc: wraphelp(
+  ["<u>larc(radius, degrees)</u> Left arc. " +
+      "Curves left some degrees, with a radius: " +
+      "<mark>larc 100, 45</mark>"],
+  function larc(radius, amount) {
+    if (!radius || !amount) {
+      return this.lt(amount);
     }
-    if (!sideways) {
-      return this.animate({'turtleForward': '+=' + amount}, 'turtle');
-    } else {
-      return this.direct(function(j, elem) {
-        this.animate({'turtlePosition':
-            displacedPosition(elem, amount, sideways)}, 'turtle');
+    return this.direct(function(j, elem) {
+      var oldRadius = this.css('turtleTurningRadius');
+      this.css({turtleTurningRadius: (amount < 0) ? -radius : radius});
+      this.animate({turtleRotation: '-=' + cssNum(amount) + 'deg'},
+          animTime(elem));
+      this.direct(function() {
+        this.css({turtleTurningRadius: oldRadius});
       });
+    });
+  }),
+  moveto: wraphelp(
+  ["<u>moveto(x, y)</u> Move to graphing coordinates (see <u>getxy</u>): " +
+      "<mark>moveto 50, 100</mark>",
+   "<u>moveto(obj)</u> Move to page coordinates " +
+      "or an object on the page (see <u>pagexy</u>): " +
+      "<mark>moveto lastmousemove</mark>"],
+  function moveto(x, y) {
+    var position = x, localx = 0, localy = 0, limit = null;
+    if ($.isNumeric(position) && $.isNumeric(y)) {
+      // moveto x, y: use local coordinates.
+      localx = parseFloat(position);
+      localy = parseFloat(y);
+      position = null;
+      limit = null;
+    } else if ($.isArray(position)) {
+      // moveto [x, y], limit: use local coordinates (limit optional).
+      localx = position[0];
+      localy = position[1];
+      position = null;
+      limit = y;
+    } else if ($.isNumeric(y)) {
+      // moveto obj, limit: limited motion in the direction of obj.
+      limit = y;
     }
-  },
-  bk: function(amount) {
-    return this.fd(-amount);
-  },
-  pen: function(penstyle) {
+    // Otherwise moveto {pos}, limit: absolute motion with optional limit.
     return this.direct(function(j, elem) {
-      this.css('turtlePen', penstyle);
+      var pos = position;
+      if (pos === null) {
+        pos = $(homeContainer(elem)).pagexy();
+      }
+      if (pos && !isPageCoordinate(pos)) {
+        try {
+          pos = $(pos).pagexy();
+        } catch (e) {
+          return;
+        }
+      }
+      if (!pos || !isPageCoordinate(pos)) return;
+      if ($.isWindow(elem)) {
+        scrollWindowToDocumentPosition(pos, limit);
+        return;
+      } else if (elem.nodeType === 9) {
+        return;
+      }
+      this.animate({turtlePosition:
+          computeTargetAsTurtlePosition(elem, pos, limit, localx, localy)},
+          animTime(elem));
     });
-  },
-  dot: function(style, diameter) {
-    if ($.isNumeric(style) && diameter === undefined) {
-      diameter = style;
-      style = null;
+  }),
+  turnto: wraphelp(
+  ["<u>turnto(degrees)</u> Turn to a bearing. " +
+      "North is 0, East is 90: <mark>turnto 270</turnto>",
+   "<u>turnto(x, y)</u> Turn to graphing coordinates: " +
+      "<mark>turnto 50, 100</mark>",
+   "<u>turnto(obj)</u> Turn to page coordinates or an object on the page: " +
+      "<mark>turnto lastmousemove</mark>"],
+  function turnto(bearing, y) {
+    if ($.isNumeric(y) && $.isNumeric(bearing)) {
+      // turnto x, y: convert to turnto [x, y].
+      bearing = [bearing, y];
+      y = null;
     }
-    if (diameter === undefined) { diameter = 8.8; }
+    return this.direct(function(j, elem) {
+      if ($.isWindow(elem) || elem.nodeType === 9) return;
+      // turnto bearing: just use the given absolute.
+      var limit = null, ts, r,
+          targetpos = null, nlocalxy = null;
+      if ($.isNumeric(bearing)) {
+        r = convertToRadians(bearing);
+        fixOriginIfWatching(elem);
+        targetpos = getCenterInPageCoordinates(elem);
+        targetpos.pageX += Math.sin(r) * 1024;
+        targetpos.pageY -= Math.cos(r) * 1024;
+        limit = y;
+      } else if ($.isArray(bearing)) {
+        nlocalxy = computePositionAsLocalOffset(elem);
+        nlocalxy[0] -= bearing[0];
+        nlocalxy[1] -= bearing[1];
+      } else if (isPageCoordinate(bearing)) {
+        targetpos = bearing;
+      } else {
+        try {
+          targetpos = $(bearing).pagexy();
+        } catch(e) {
+          return;
+        }
+      }
+      if (!nlocalxy) {
+        nlocalxy = computePositionAsLocalOffset(elem, targetpos);
+      }
+      dir = radiansToDegrees(Math.atan2(-nlocalxy[0], -nlocalxy[1]));
+      if (!(limit === null)) {
+        ts = readTurtleTransform(elem, true);
+        r = convertToRadians(ts.rot);
+        dir = limitRotation(ts.rot, dir, limit);
+      }
+      this.animate({turtleRotation: dir}, animTime(elem));
+    });
+  }),
+  home: wraphelp(
+  ["<u>home()</u> Goes home. " +
+      "Jumps to the center without drawing: <mark>home()</mark>"],
+  function home(container) {
+    return this.direct(function(j, elem) {
+      var down = this.css('turtlePenDown'),
+          radius = this.css('turtleTurningRadius'),
+          hc = container || homeContainer(elem);
+      this.css({turtlePenDown: 'up', turtleTurningRadius: 0 });
+      this.css({
+        turtlePosition:
+          computeTargetAsTurtlePosition(
+              elem, $(hc).pagexy(), null, 0, 0),
+        turtleRotation: 0});
+      this.css({turtlePenDown: down, turtleTurningRadius: radius });
+    });
+  }),
+  pen: wraphelp(
+  ["<u>pen(color)</u> Selects a pen. " +
+      "Chooses a color and style for the pen: <mark>pen 'red'</mark>."],
+  function pen(penstyle) {
+    return this.direct(function(j, elem) {
+      if (penstyle === undefined) {
+        penstyle = 'black';
+      }
+      if (penstyle === false || penstyle === true ||
+          penstyle == 'down' || penstyle == 'up') {
+        this.css('turtlePenDown', penstyle);
+      } else {
+        this.css('turtlePenStyle', penstyle);
+      }
+    });
+  }),
+  fill: wraphelp(
+  ["<u>fill(color)</u> Fills a path traced using " +
+      "<u>pen 'path'</u>: " +
+      "<mark>pen 'path'; rarc 100, 90; fill 'blue'</mark>"],
+  function fill(style) {
     if (!style) { style = 'black'; }
     var ps = parsePenStyle(style, 'fillStyle');
     return this.direct(function(j, elem) {
-      var c = this.center();
-      fillDot(c, diameter, ps);
-      // Once drawing begins, origin must be stable.
-      watchImageToFixOriginOnLoad(elem);
+      endAndFillPenPath(elem, ps);
     });
-  },
-  erase: function(style) {
-    if (!style) { style = 'transparent'; }
+  }),
+  dot: wraphelp(
+  ["<u>dot(color, diameter)</u> Draws a dot. " +
+      "Color and diameter are optional: " +
+      "<mark>dot 'blue'</mark>"],
+  function dot(style, diameter) {
+    if ($.isNumeric(style)) {
+      // Allow for parameters in either order.
+      var t = style;
+      style = diameter;
+      diameter = t;
+    }
+    if (diameter === undefined) { diameter = 8.8; }
+    if (!style) { style = 'black'; }
     var ps = parsePenStyle(style, 'fillStyle');
     return this.direct(function(j, elem) {
-      eraseBox(elem, ps);
+      var c = this.pagexy(),
+          ts = readTurtleTransform(elem, true),
+          extraDiam = (ps.eraseMode ? 2 : 0);
+      // Scale by sx.  (TODO: consider parent transforms.)
+      fillDot(c, diameter * ts.sx + extraDiam, ps);
       // Once drawing begins, origin must be stable.
       watchImageToFixOriginOnLoad(elem);
     });
-  },
-  img: function (name) {
+  }),
+  wait: wraphelp(
+  ["<u>wait(seconds)</u> Waits some seconds before proceeding. " +
+      "<mark>fd 100; wait 2.5; bk 100</mark>"],
+  function wait(seconds) {
+    return this.delay(seconds * 1000);
+  }),
+  st: wraphelp(
+  ["<u>st()</u> Show turtle. The reverse of " +
+      "<u>ht()</u>. <mark>st()</mark>"],
+  function st() {
+    return this.direct(function() { this.show(); });
+  }),
+  ht: wraphelp(
+  ["<u>ht()</u> Hide turtle. The turtle can be shown again with " +
+      "<u>st()</u>. <mark>ht()</mark>"],
+  function ht() {
+    return this.direct(function() { this.hide(); });
+  }),
+  pu: wraphelp(
+  ["<u>pu()</u> Pen up. Tracing can be resumed with " +
+      "<u>pd()</u>. <mark>pu()</mark>"],
+  function pu() {
+    return this.pen(false);
+  }),
+  pd: wraphelp(
+  ["<u>pd()</u> Pen down. Resumes tracing a path that was paused with " +
+      "<u>pu()</u>. <mark>pd()</mark>"],
+  function pd() {
+    return this.pen(true);
+  }),
+  pe: wraphelp(
+  ["<u>pe()</u> Pen erase. Can overtrace old " +
+      "lines to erase them.  <mark>pen 'red'; fd 100; pe(); bk 100</mark>"],
+  function pe() {
+    return this.pen('erase');
+  }),
+  play: wraphelp(
+  ["<u>play(notes)</u> Play notes. Notes are specified in " +
+      "<a href='/prx/000/https/github.com\"http://abcnotation.com/\"'>ABC notation</a>. " +
+      "<mark>play \"de[dBFA]2[cGEC]4\"</mark>"],
+  function play(notes) {
+    var args = arguments;
+    return this.queue(function() {
+      // playABC will call $(this).dequeue() when song is done.
+      playABC(this, args);
+    });
+  }),
+  speed: wraphelp(
+  ["<u>speed(persec)</u> Set turtle speed in moves per second: " +
+      "<mark>speed Infinity</mark>"],
+  function speed(mps) {
+    return this.direct(function(j, elem) {
+      this.css('turtleSpeed', mps);
+    });
+  }),
+  wear: wraphelp(
+  ["<u>wear(color)</u> Sets the turtle shell color: " +
+      "<mark>wear 'turquoise'</mark>",
+   "<u>wear(url)</u> Sets the turtle image url: " +
+      "<mark>wear 'http://bit.ly/1bgrQ0p'</mark>"],
+  function wear(name) {
     var img = nameToImg(name);
     if (!img) return this;
-    return this.direct(function() {
+    return this.direct(function(j, elem) {
+      // Bug workaround - if backgroudnImg isn't cleared early enough,
+      // the turtle image doesn't update.  (Even though this is done
+      // later in applyImg.)
+      this.css({
+        backgroundImage: 'none',
+      });
+      // Keep the position of the origin unchanged even if the image resizes.
+      watchImageToFixOriginOnLoad(elem);
       applyImg(this, img);
+      fixOriginIfWatching(elem);
     });
-  },
-  reload: function() {
+  }),
+  label: wraphelp(
+  ["<u>label(text)</u> Labels the current position with HTML: " +
+      "<mark>label 'remember'</mark>"],
+  function label(html, fn) {
+    return this.direct(function() {
+      var out = output(html, 'label').css({
+        position: 'absolute',
+        display: 'inline-block',
+        top: 0,
+        left: 0
+      }).addClass('turtle').appendTo(getTurtleClipSurface());
+      out.css({
+        turtlePosition: computeTargetAsTurtlePosition(
+            out.get(0), this.pagexy(), null, 0, 0)
+      });
+      if ($.isFunction(fn)) {
+        out.direct(fn);
+      }
+    });
+  }),
+  reload: function reload() {
     // Used to reload images to cycle animated gifs.
     return this.direct(function(j, elem) {
       if ($.isWindow(elem) || elem.nodeType === 9) {
@@ -1718,58 +2590,90 @@ var turtlefn = {
       }
     });
   },
-  center: function() {
+  hatch: wraphelp(
+  ["<u>hatch(count, color)</u> Hatches any number of new turtles. Optional " +
+      "color name. <mark>g = hatch 5; g.direct -> @fd random 500</mark>"],
+  function(count, spec) {
     if (!this.length) return;
-    return getCenterInPageCoordinates(this[0]);
-  },
-  moveto: function(position, limit, y) {
-    if ($.isNumeric(position) && $.isNumeric(limit)) {
-      position = { pageX: parseFloat(position), pageY: parseFloat(limit) };
-      limit = null;
+    if (spec === undefined && !$.isNumeric(count)) {
+      spec = count;
+      count = 1;
     }
-    var localx = 0, localy = 0;
-    if ($.isNumeric(y) && $.isNumeric(limit)) {
-      localx = limit;
-      localy = y;
-      limit = null;
+    // Determine the container in which to hatch the turtle.
+    var container = this[0], clone = null;
+    if ($.isWindow(container) || container.nodeType === 9) {
+      container = getTurtleClipSurface();
+    } else if (/^(?:br|img|input|hr)$/i.test(container.tagName)) {
+      container = container.parentElement;
+      clone = this[0];
     }
-    return this.direct(function(j, elem) {
-      var pos = position;
-      if (pos && !isPageCoordinate(pos)) { pos = $(pos).center(); }
-      if (!pos || !isPageCoordinate(pos)) return this;
-      if ($.isWindow(elem)) {
-        scrollWindowToDocumentPosition(pos, limit);
-        return;
-      } else if (elem.nodeType === 9) {
-        return;
+    // Create the turtle(s)
+    if (count === 1) {
+      // Pass through identical jquery instance in the 1 case.
+      return hatchone(
+          typeof spec === 'function' ? spec(0) : spec, container, clone);
+    } else {
+      var k = 0, result = [];
+      for (; k < count; ++k) {
+        result.push(hatchone(
+            typeof spec === 'function' ? spec(k) : spec, container, clone)[0]);
       }
-      setCenterInPageCoordinates(elem, pos, limit, localx, localy);
-      // moveto implies a request for a stable origin.
-      watchImageToFixOriginOnLoad(elem);
-      flushPenState(elem);
-    });
-  },
-  direction: function() {
+      return $(result);
+    }
+  }),
+  pagexy: wraphelp(
+  ["<u>pagexy()</u> Page coordinates as obj, with " +
+      "top-left based obj.pageX, obj.pageY: " +
+      "<mark>c = pagexy(); fd 500; moveto c</mark>"],
+  function pagexy() {
     if (!this.length) return;
-    var elem = this[0], dir;
+    fixOriginIfWatching(this[0]);
+    return getCenterInPageCoordinates(this[0]);
+  }),
+  getxy: wraphelp(
+  ["<u>getxy()</u> Returns graphing coordinates [x, y], center-based: " +
+      "<mark>v = getxy(); slide -v[0], -v[1]</mark>"],
+  function getxy() {
+    if (!this.length) return;
+    return computePositionAsLocalOffset(this[0]);
+  }),
+  bearing: wraphelp(
+  ["<u>bearing()</u> Returns turtle bearing. North is 0; East is 90: " +
+      "<mark>write bearing()</mark>",
+   "<u>bearing(obj)</u> <u>bearing(x, y)</u> Returns the direction " +
+      "from the turtle towards an object or coordinate: " +
+      "<mark>write bearing(lastmouseclick)</mark>"],
+  function bearing(x, y) {
+    if (!this.length) return;
+    var elem = this[0], pos = x, dir, cur;
+    if (pos !== undefined) {
+      cur = $(elem).pagexy();
+      if ($.isNumeric(y) && $.isNumeric(x)) { pos = [x, y]; }
+      if ($.isArray(pos)) {
+        pos = convertLocalXyToPageCoordinates(elem, [pos])[0];
+      }
+      if (!isPageCoordinate(pos)) { pos = $(pos).pagexy(); }
+      return radiansToDegrees(
+          Math.atan2(pos.pageX - cur.pageX, cur.pageY - pos.pageY));
+    }
     if ($.isWindow(elem) || elem.nodeType === 9) return 0;
     return getDirectionOnPage(elem);
-  },
-  turnto: function(direction, limit) {
-    return this.direct(function(j, elem) {
-      if ($.isWindow(elem) || elem.nodeType === 9) return;
-      var dir = direction;
-      if (!$.isNumeric(direction)) {
-        var pos = direction, cur = $(elem).center();
-        if (pos && !isPageCoordinate(pos)) { pos = $(pos).center(); }
-        if (!pos || !isPageCoordinate(pos)) return;
-        dir = radiansToDegrees(
-            Math.atan2(pos.pageX - cur.pageX, cur.pageY - pos.pageY));
-      }
-      setDirectionOnPage(elem, dir, limit);
-    });
-  },
-  mirror: function(val) {
+  }),
+  distance: wraphelp(
+  ["<u>distance(obj)</u> Returns the distance from the turtle to " +
+      "another object: <mark>write distance(lastmouseclick)</mark>",
+   "<u>distance(x, y)</u> Returns the distance from the turtle to " +
+      "graphing coorindates: <mark>write distance(100, 0)</mark>"],
+  function distance(pos, y) {
+    if (!this.length) return;
+    var elem = this[0], dx, dy, cur = $(elem).pagexy();
+    if ($.isNumeric(y) && $.isNumeric(x)) { pos = { pageX: pos, pageY: y }; }
+    else if (!isPageCoordinate(pos)) { pos = $(pos).pagexy(); }
+    dx = pos.pageX - cur.pageX;
+    dy = pos.pageY - cur.pageY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }),
+  mirror: function mirror(val) {
     if (val === undefined) {
       // Zero arguments returns true if mirrored.
       var c = $.map(this.css('turtleScale').split(' '), parseFloat),
@@ -1785,7 +2689,11 @@ var turtlefn = {
       }
     });
   },
-  twist: function(val) {
+  twist: wraphelp(
+  ["<u>twist(degrees)</u> Set the primary direction of the turtle. Allows " +
+      "use of images that face a different direction than 'up': " +
+      "<mark>twist(90)</mark>"],
+  function twist(val) {
     if (val === undefined) {
       return parseFloat(this.css('turtleTwist'));
     }
@@ -1793,25 +2701,49 @@ var turtlefn = {
       if ($.isWindow(elem) || elem.nodeType === 9) return;
       this.css('turtleTwist', val);
     });
-  },
-  scale: function(valx, valy) {
-    if (valx === undefined && valy === undefined) {
-      return parseFloat(this.css('turtleTwist'));
-    }
-    var val = '' + cssNum(valx) +
-        (valy === undefined ? '' : ' ' + cssNum(valy));
+  }),
+  scale: wraphelp(
+  ["<u>scale(factor)</u> Scales all motion up or down by a factor. " +
+      "To double all drawing: <mark>scale(2)</mark>"],
+  function scale(valx, valy) {
+    if (valy === undefined) { valy = valx; }
+    // Disallow scaling to zero using this method.
+    if (!valx || !valy) { return this; }
     return this.direct(function(j, elem) {
       if ($.isWindow(elem) || elem.nodeType === 9) return;
-      this.css('turtleScale', val);
+      var c = $.map($.css(elem, 'turtleScale').split(' '), parseFloat);
+      if (c.length === 1) { c.push(c[0]); }
+      c[0] *= valx;
+      c[1] *= valy;
+      this.css('turtleScale', $.map(c, cssNum).join(' '));
     });
-  },
-  shown: function() {
+  }),
+  cell: wraphelp(
+  ["<u>cell(r, c)</u> Cell in row r and column c in a table. " +
+      "Use together with the table function: " +
+      "<mark>g = table 8, 8; g.cell(0,2).text 'hello'</mark>"],
+  function cell(r, c) {
+    var sel = this.find(
+        $.isNumeric(r) ? 'tr:nth-of-type(' + (r + 1) + ')' : 'tr');
+    return sel.find(
+        $.isNumeric(c) ? 'td:nth-of-type(' + (c + 1) + ')' : 'td');
+  }),
+  shown: wraphelp(
+  ["<u>shown()</u> True if turtle is shown, false if hidden: " +
+      "<mark>ht(); write shown()</mark>"],
+  function shown() {
     return this.is(':visible');
-  },
-  hidden: function() {
+  }),
+  hidden: wraphelp(
+  ["<u>hidden()</u> True if turtle is hidden: " +
+      "<mark>ht(); write hidden()</mark>"],
+  function hidden() {
     return this.is(':hidden');
-  },
-  encloses: function(arg, y) {
+  }),
+  encloses: wraphelp(
+  ["<u>encloses(obj)</u> True if the first element fully encloses obj: " +
+      "<mark>write $(window).encloses(turtle)</mark>"],
+  function encloses(arg, y) {
     if (!this.length || this.hidden()) return false;
     if ($.isNumeric(arg) && $.isNumeric(y)) {
       arg = [{ pageX: arg, pageY: y }];
@@ -1845,11 +2777,18 @@ var turtlefn = {
       }
     }
     return !!allok;
-  },
-  touches: function(arg, y) {
+  }),
+  touches: wraphelp(
+  ["<u>touches(obj)</u> True if the first element touches obj: " +
+      "<mark>write turtle1.touches(turtle2)</mark>"],
+  function touches(arg, y) {
     if (this.hidden() || !this.length) { return false; }
     if ($.isNumeric(arg) && $.isNumeric(y)) {
-      arg = [{ pageX: arg, pageY: y }];
+      arg = [arg, y];
+    }
+    if ($.isArray(arg) && arg.length == 2 &&
+        $.isNumeric(arg[0]) && $.isNumeric(arg[1])) {
+      arg = convertLocalXyToPageCoordinates(this[0] || document.body, [arg])[0];
     }
     if (!arg) return false;
     if (typeof arg === 'string') { arg = $(arg); }
@@ -1875,14 +2814,14 @@ var turtlefn = {
       }
     }
     return !!anyok;
-  },
-  within: function(distance, x, y) {
+  }),
+  within: function within(distance, x, y) {
     return withinOrNot(this, true, distance, x, y);
   },
-  notwithin: function(distance, x, y) {
+  notwithin: function notwithin(distance, x, y) {
     return withinOrNot(this, false, distance, x, y);
   },
-  direct: function(qname, callback, args) {
+  direct: function direct(qname, callback, args) {
     if ($.isFunction(qname)) {
       args = callback;
       callback = qname;
@@ -1907,7 +2846,7 @@ var turtlefn = {
           }),
           action = animation.finish = (args ?
           (function() { callback.apply($(elem), args); }) :
-          (function() { callback.call($(elem), j, elem); }));
+          (function() { callback.call($(elem), index, elem); }));
       $.queue(elem, qname, animation);
     }
     var elem, sel, length = this.length, j = 0;
@@ -1928,7 +2867,6 @@ var turtlefn = {
 
 $.fn.extend(turtlefn);
 
-
 //////////////////////////////////////////////////////////////////////////
 // TURTLE GLOBAL ENVIRONMENT
 // Implements educational support when $.turtle() is called:
@@ -1942,7 +2880,7 @@ $.fn.extend(turtlefn);
 // * Sets up a global "hatch" function to make a new turtle.
 //////////////////////////////////////////////////////////////////////////
 
-var turtleGIFUrl = "data:image/gif;base64,R0lGODlhKAAvAPIHAAFsOACSRQ2ZRQySQzCuSBygRQ+DPv///yH5BAlkAAcAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAKAAvAAAD/ni63P4wygVqnVjWQnoBWdgAXdmBYkiaJZpiK0u4ryafNUwYw0AUHFruARgEjkiBcOgAAJ+FwXJSMcwglqwlFcMxskZkIbDNAKwmlOUoQB4JyDK1a7AMxm4k3K3NNlkVRwVteQF4bnVnJR9/J0VihQKHeU4mjCMzhYN5m5EfgE2BeQJ7eoUBkm10RKeGeKQEhGKHfaynpIMCkrF6kxcRRbJuk3o/HcJkGndAsqSnHW/Iv7aoHEDQhaVAeXXA2YvIpYaFUwdnz4S4gxy6b+RYBs+ci0+wUJdNrcSubri6AgMAlhPVT1w0NwbjeBvmoWCehAG6YWFzTBcvNsT2RSxnfM5atlkO3y28BQcWw30cFQBoBYseM5NxtBBZqUkWB4Pbjji5OYVgEmIXHVYqYYBIpmHIOhWqAwoTASlJkKGSSqbLjCUxqjjzRK7PNAqWqrQKYPCrjRYqaWqKKaILPnNrIm40C8OAgQ8cZTIx42Wvjrd+gUkMrIEu4cMLEgAAIfkECWQABwAsAAAAACgALwCCAm04AJJFDZlFDJJDL65IHKBGDIM+////A/54utz+MMoFgKkzy1qIL4AmNoBneuEolqeZqhnbEi+8zagdE8YwEIVOTfewBI5IwZDoAASfBSUzUqlalwcnCgup9pCBQqDKqJy4pAoYTECSzefmtSIQr492N9wld6nDAndhglo5TWcAgXh3dYIXQkuFNHdRa5WMIBiHHwCCbWyKYHUCF10Wf5R2Ah6heHloCqhrqwK1dUBIuHobA61Il2wnvrAAA0+hq4JBRwS1YJpFSR1BHp5JvqUQBncnwMzSd1yyuYG1QHUdzoNr4p3coh0f1KtAUO3KqaLntrXigslrmrERNIZKq3h5AgDMRRCNO3q2BB5pBCbhri7T3rlC9naJ3QaCCtusSpjRYxorBXzMagHFXMcxkajRcGcpVDyFv14V6WYEXkBfIZVAoxCPU82jggY4wWIB0TVGQGEakjMnZFKLUvms6EXwJUwZPFRU8aRIU1OtI6p+HQIW1oQ5RZykdPvWg4EpaYHQxZtlKV8NZP4KZpAAADs=";
+var turtleGIFUrl = "data:image/gif;base64,R0lGODlhKAAwAPEDAAFsOACSRTCuSAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJZAADACwAAAAAKAAwAAACzpyPqcvtByJ49EWBRaw8gZxNXfeB4ciVpoZWqim2zhfUNivP9h7EOQPg9VqSDVDocwUyQ8UFlrS8mobIciXoRRtBULGLBWm/EudVHA6fxVFw+v2mQtbwundhteuz2yp9z/cVMAPIhvIC2EdYiKHIxdhIBIkzgrjnCDSJiacpCbnp1HkoWklKYqo0KUfhxjhWBmQ5ibFaJTsbGYob1nb2+kdbVLNS++Lz5JVEBguhEmQW/GOcSUl09sxZffj1qP2zCPo9QBMuXVMubSS+/lAAACH5BAVkAAMALAEAAQAmAC4AAALNnI9pwKAP4wKiCiZzpLY6DR5c54XhSH5mhnbqugnBTF8wS+fBez+AvuvhdDxEA3NqXYqDnyXIcpIqu5fU8zlqr9OntgPlPrtk2TQcKKvXMpWSDYcu0vB6NVE90uskOY6fsvIGxxQDaFEIMciW6HOIKPhYYrK41qhQqXaZkFm2aSRpQxn6KUIaKVnatHfoZ6TF2sokFopY1PmIZFrryRkrk0dLpef1usXDMKXb5CIk5TqwY+s8idncw1EoPYxdjanVLSqk4aTqPGOOvaxRAAA7";
 
 var eventfn = { click:1, mouseup:1, mousedown:1, mousemove:1,
     keydown:1, keypress:1, keyup:1 };
@@ -1951,13 +2889,80 @@ var global_turtle = null;
 var global_turtle_methods = [];
 var attaching_ids = false;
 var dollar_turtle_methods = {
-  erase: function() { directIfGlobal(function() { $(document).erase() }); },
-  tick: function(x, y) { directIfGlobal(function() { tick(x, y); }); },
-  speed: function(mps) { directIfGlobal(function() { speed(mps); }); },
-  random: random,
-  hatch: hatch,
-  input: input,
-  output: output
+  cs: wraphelp(
+  ["<u>cs()</u> Clear screen. Erases both graphics canvas and " +
+      "body text: <mark>cs()</mark>"],
+  function cs() { directIfGlobal(function() { clearField() }); }),
+  cg: wraphelp(
+  ["<u>cg()</u> Clear graphics. Does not alter body text: " +
+      "<mark>cg()</mark>"],
+  function cg() { directIfGlobal(function() { clearField('canvas') }); }),
+  ct: wraphelp(
+  ["<u>ct()</u> Clear text. Does not alter graphics canvas: " +
+      "<mark>ct()</mark>"],
+  function ct() { directIfGlobal(function() { clearField('text') }); }),
+  tick: wraphelp(
+  ["<u>tick(fps, fn)</u> Calls fn fps times per second until " +
+      "<u>tick</u> is called again: " +
+      "<mark>c = 10; tick 1, -> c and write(c--) or tick()</mark>"],
+  function tick(tps, fn) {
+    directIfGlobal(function() { globaltick(tps, fn); });
+  }),
+  defaultspeed: wraphelp(
+  ["<u>defaultspeed(mps)</u> Sets default turtle speed for new turtles: " +
+      "<mark>defaultspeed 60</mark>"],
+  function defaultspeed(mps) {
+    directIfGlobal(function() { globaldefaultspeed(mps); }); }),
+  sound: function sound() { playABC(null, arguments); },
+  write: wraphelp(
+  ["<u>write(html)</u> Writes text output. Arbitrary HTML may be written: " +
+      "<mark>write 'Hello, world!'</mark>"],
+  function write(html) { return output(html, 'div'); }),
+  read: wraphelp(
+  ["<u>read(html, fn)</u> Reads text or numeric input. " +
+      "Calls fn once with the entered value: " +
+      "<mark>read 'Your name?', (v) -> write 'Hello ' + v</mark>"],
+  function read(a, b) { return input(a, b, 0); }),
+  readnum: wraphelp(
+  ["<u>readnum(html, fn)</u> Reads numeric input. Only numbers allowed: " +
+      "<mark>read 'Amount?', (v) -> write 'Tip: ' + (0.15 * v)</mark>"],
+  function readnum(a, b) { return input(a, b, 1); }),
+  readstr: wraphelp(
+  ["<u>readstr(html, fn)</u> Reads text input. Never " +
+      "converts input to a number: " +
+      "<mark>read 'Enter code', (v) -> write v.length + ' characters'</mark>"],
+  function readstr(a, b) { return input(a, b, -1); }),
+  random: wraphelp(
+  ["<u>random(n)</u> Returns a random non-negative integer less than n: " +
+      "<mark>write random 10</mark>",
+   "<u>random(list)</u> Returns a random member of the list: " +
+      "<mark>write random ['a', 'b', 'c']</mark>",
+   "<u>random('position')</u> Returns a random page position: " +
+      "<mark>moveto random 'position'</mark>",
+   "<u>random('color')</u> Returns a random page color: " +
+      "<mark>pen random 'color'</mark>"],
+  random),
+  hatch: wraphelp(
+  ["<u>hatch(count, color)</u> Hatches any number of new turtles. Optional " +
+      "color name. <mark>g = hatch 5; g.direct -> @fd random 500</mark>"],
+  function hatch(count, spec) {
+    if (global_turtle) return $(global_turtle).hatch(count, spec);
+    else return $(document).hatch(count, spec);
+  }),
+  button: wraphelp(
+  ["<u>button(text, fn)</u> Writes a button. Calls " +
+      "fn whenever the button is clicked: " +
+      "<mark>button 'GO', -> fd 100</mark>"],
+  button),
+  table: wraphelp(
+  ["<u>table(m, n)</u> Writes m rows and c columns. " +
+      "Access cells using <u>cell</u>: " +
+      "<mark>g = table 8, 8; g.cell(2,3).text 'hello'</mark>",
+   "<u>table(array)</u> Writes tabular data. " +
+      "Each nested array is a row: " +
+      "<mark>table [[1,2,3],[4,5,6]]</mark>"],
+  table),
+  help: globalhelp
 };
 
 $.turtle = function turtle(id, options) {
@@ -1988,10 +2993,6 @@ $.turtle = function turtle(id, options) {
   if (!options.hasOwnProperty('events') || options.events) {
     turtleevents(options.eventprefix);
   }
-  // Set up window-scoped event handler methods too.
-  if (!options.hasOwnProperty('handlers') || options.handlers) {
-    globalizeMethods($(window), eventfn);
-  }
   // Set up global objects by id.
   if (!options.hasOwnProperty('ids') || options.ids) {
     turtleids(options.idprefix);
@@ -2010,14 +3011,19 @@ $.turtle = function turtle(id, options) {
   if (!options.hasOwnProperty('functions') || options.functions) {
     $.extend(window, dollar_turtle_methods);
   }
-  // Set turtle speed
-  speed(options.hasOwnProperty('speed') ? options.speed : 1);
-  // Find or create a turtle if one does not exist.
+  // Set default turtle speed
+  globaldefaultspeed(options.hasOwnProperty('defaultspeed') ?
+      options.defaultspeed : 1);
+  // Initialize audio context (avoids delay in first notes).
+  try {
+    getAudioTop();
+  } catch (e) { }
+  // Find or create a singleton turtle if one does not exist.
   var selector = null;
   if (id) {
     selector = $('#' + id);
     if (!selector.length) {
-      selector = hatch(id);
+      selector = dollar_turtle_methods.hatch(id);
     }
   }
   if (selector && !selector.length) { selector = null; }
@@ -2025,9 +3031,9 @@ $.turtle = function turtle(id, options) {
   if (selector && selector.length === 1 &&
       (!options.hasOwnProperty('global') || options.global)) {
     var extraturtlefn = {
-      show:1, hide:1, css:1, fadeIn:1, fadeOut:1, fadeTo:1, fadeToggle:1,
-      animate:1, delay:1, stop:1, finish:1, toggle:1, remove:1 };
-    var globalfn = $.extend({}, turtlefn, extraturtlefn);
+      css:1, fadeIn:1, fadeOut:1, fadeTo:1, fadeToggle:1,
+      animate:1, stop:1, toggle:1, finish:1, remove:1 };
+    var globalfn = $.extend({}, turtlefn, eventfn, extraturtlefn);
     global_turtle_methods.push.apply(global_turtle_methods,
        globalizeMethods(selector, globalfn));
     global_turtle = selector[0];
@@ -2037,8 +3043,9 @@ $.turtle = function turtle(id, options) {
   if (!options.hasOwnProperty('panel') || options.panel) {
     var retval = null,
         seeopt = {
-      title: 'turtle test panel',
-      abbreviate: [undefined]
+      title: 'turtle test panel - Enter commands or type help for help',
+      abbreviate: [undefined],
+      consolehook: seehelphook
     };
     if (selector) { seeopt.abbreviate.push(selector); }
     if (options.title) {
@@ -2061,15 +3068,43 @@ $.turtle = function turtle(id, options) {
 
 $.extend($.turtle, dollar_turtle_methods);
 
+function seehelphook(text, result) {
+  if (typeof result == 'function' && /^\w+\s*$/.test(text) && result.helptext) {
+    globalhelp(result);
+    return true;
+  }
+  return false;
+}
+
+function copyhelp(method, fname, extrahelp, globalfn) {
+  if (method.helptext) {
+    globalfn.helptext = method.helptext;
+  } else if (fname in extrahelp) {
+    globalfn.helptext = extrahelp[fname];
+  }
+  return globalfn;
+}
+
+var extrahelp = {
+  remove: ["<u>remove()</u> Removes main turtle completely. " +
+      "Also removes <u>fd</u>, <u>bk</u>, <u>rt</u>, etc: " +
+      "<mark>remove()</mark>"],
+  finish: ["<u>finish()</u> Finishes turtle animation. " +
+      "Does not pause for effect: " +
+      "<mark>finish()</mark>"]
+};
+
 function globalizeMethods(thisobj, fnames) {
   var replaced = [];
   for (var fname in fnames) {
     if (fnames.hasOwnProperty(fname) && !(fname in window)) {
       replaced.push(fname);
-      window[fname] = (function() {
+      window[fname] = (function(fname) {
         var method = thisobj[fname], target = thisobj;
-        return (function() { return method.apply(target, arguments); });
-      })();
+        return copyhelp(method, fname, extrahelp,
+            (function() { /* Use parentheses to call a function */
+                return method.apply(target, arguments); }));
+      })(fname);
     }
   }
   return replaced;
@@ -2104,12 +3139,67 @@ function onDOMNodeRemoved(e) {
 }
 
 function isCSSColor(color) {
-  if (!/^[a-z]+$/i.exec(color)) { return false; }
+  if (!/^[a-z]+$|^(?:rgb|hsl)a?\([^)]*\)$|^\#[a-f0-9]{3}(?:[a-f0-9]{3})?$/i
+      .exec(color)) {
+    return false;
+  }
   var d = document.createElement('div'), unset = d.style.color;
   d.style.color = color;
   return (unset != d.style.color);
 }
 
+function createTurtleShellOfColor(color) {
+  var c = document.createElement('canvas');
+  c.width = 40;
+  c.height = 48;
+  var ctx = c.getContext('2d'),
+      cx = 20,
+      cy = 26;
+  ctx.beginPath();
+  ctx.arc(cx, cy, 16, 0, 2 * Math.PI, false);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.beginPath();
+  // Half of a symmetric turtle shell pattern.
+  var pattern = [
+    [[5, -14], [3, -11]],
+    [[3, -11], [7, -8], [4, -4]],
+    [[4, -4], [7, 0], [4, 4]],
+    [[4, 4], [7, 8], [3, 11]],
+    [[7, -8], [12, -9], null],
+    [[7, 0], [15, 0], null],
+    [[7, 8], [12, 9], null],
+    [[3, 11], [1, 15], null]
+  ];
+  for (var j = 0; j < pattern.length; j++) {
+    var path = pattern[j], connect = true;
+    ctx.moveTo(cx + path[0][0], cy + path[0][1]);
+    for (var k = 1; k < path.length; k++) {
+      if (path[k] !== null) {
+        ctx.lineTo(cx + path[k][0], cy + path[k][1]);
+      }
+    }
+    for (var k = path.length - 1; k >= 0; k--) {
+      if (path[k] === null) {
+        k--;
+        ctx.moveTo(cx - path[k][0], cy + path[k][1]);
+      } else {
+        ctx.lineTo(cx - path[k][0], cy + path[k][1]);
+      }
+    }
+  }
+  ctx.lineWidth = 1.1;
+  ctx.strokeStyle = 'rgba(255,255,255,0.75)';
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(cx, cy, 15.5, 0, 2 * Math.PI, false);
+  ctx.closePath();
+  ctx.strokeStyle = 'rgba(0,0,0,0.4)';
+  ctx.stroke();
+  return c.toDataURL();
+}
+
 function createPointerOfColor(color) {
   var c = document.createElement('canvas');
   c.width = 40;
@@ -2130,50 +3220,25 @@ var entityMap = {
   "&": "&amp;",
   "<": "&lt;",
   ">": "&gt;",
-  '"': '&quot;',
+  '"': '&quot;'
 };
 
 function escapeHtml(string) {
   return String(string).replace(/[&<>"]/g, function(s) {return entityMap[s];});
 }
 
-// Turtle creation function.
-function hatch(count, spec) {
-  if (spec === undefined && !$.isNumeric(count)) {
-    spec = count;
-    count = 1;
-  }
-  if (count === 1) {
-    // Pass through identical jquery instance in the 1 case.
-    return hatchone(typeof spec === 'function' ? spec(0) : spec);
-  } else {
-    var j = 0, result = [];
-    for (; j < count; ++j) {
-      result.push(hatchone(typeof spec === 'function' ? spec(j) : spec)[0]);
-    }
-    return $(result);
-  }
-}
-
 function nameToImg(name) {
-  if (name == 'turtle') return {
-    url: turtleGIFUrl,
-    css: {
-      width: 20,
-      height: 24,
-      turtleHull: "-8 -5 -8 6 0 -13 8 6 8 -5 0 9",
-      transformOrigin: '10px 13px',
-      opacity: 0.5
-    }
-  };
+  if (name == 'turtle') { name = 'mediumseagreen'; }
   if (isCSSColor(name)) return {
-    url: createPointerOfColor(name),
+    url: createTurtleShellOfColor(name),
     css: {
       width: 20,
       height: 24,
-      turtleHull: "-10 11 0 -13 10 11",
+      turtleHull: "-8 -5 -8 6 0 -13 8 6 8 -5 0 9",
       transformOrigin: '10px 13px',
-      opacity: 0.8
+      opacity: 0.5,
+      backgroundImage: 'url(' + turtleGIFUrl + ')',
+      backgroundSize: 'contain'
     }
   };
   var openicon =
@@ -2206,14 +3271,16 @@ function nameToImg(name) {
       css: {
         width: targetSize,
         height: targetSize,
+        transformOrigin: '50% 50%',
         opacity: 1
       }
     }
   }
-  if (/^(?:https?:\/)?\//i.exec(name)) {
+  if (/^(?:(?:https?|data):)?\//i.exec(name)) {
     return {
       url: name,
       css: {
+        transformOrigin: '50% 50%',
         opacity: 1
       }
     }
@@ -2221,7 +3288,7 @@ function nameToImg(name) {
   return null;
 }
 
-function hatchone(name) {
+function hatchone(name, container, clonepos) {
   var isID = name && /^[a-zA-Z]\w*$/.exec(name),
       isTag = name && /^<.*>$/.exec(name),
       img = nameToImg(name) ||
@@ -2240,12 +3307,29 @@ function hatchone(name) {
   } else {
     result = $('<div>' + escapeHtml(name) + '</div>');
   }
+  // Position the turtle inside the container.
   result.css({
-    'position': 'absolute',
-    'display': 'inline-block',
-    'top': 0,
-    'left': 0
-  }).appendTo(getTurtleClipSurface()).moveto(document);
+    position: 'absolute',
+    display: 'inline-block',
+    top: 0,
+    left: 0
+  });
+  if (!container || container.nodeType == 9 || $.isWindow(container)) {
+    container = getTurtleClipSurface();
+  }
+  result.appendTo(container);
+
+  // Move it to the starting pos.
+  if (clonepos) {
+    var t = $.style(clonepos, 'transform');
+    if (t) {
+      result.css({transform: $.style(clonepos, 'transform')});
+    } else {
+      result.home(clonepos);
+    }
+  } else {
+    result.home(container);
+  }
 
   // Every hatched turtle has class="turtle".
   result.addClass('turtle');
@@ -2282,18 +3366,26 @@ function random(arg) {
   }
   if (arg == 'position') {
     return {
-      pageX: random(dw()),
-      pageY: random(dh())
+      pageX: random(dw() + 1),
+      pageY: random(dh() + 1)
     };
   }
+  if (arg == 'color') {
+    return 'hsl(' + Math.floor(Math.random() * 360) + ',100%,50%)';
+  }
+  if (arg == 'gray') {
+    return 'hsl(0,0,' + Math.floor(Math.random() * 100) + '%)';
+  }
   return Math.random();
 }
 
 // Simplify setInterval(fn, 1000) to just tick(fn).
 var tickinterval = null;
-function tick(rps, fn) {
-  fn = arguments.length >= 2 ? fn : rps;
-  rps = arguments.length > 1 && $.isNumeric(rps) ? rps : 1;
+function globaltick(rps, fn) {
+  if (fn === undefined && $.isFunction(rps)) {
+    fn = rps;
+    rps = 1;
+  }
   if (tickinterval) {
     window.clearInterval(tickinterval);
     tickinterval = null;
@@ -2304,7 +3396,7 @@ function tick(rps, fn) {
 }
 
 // Allow speed to be set in moves per second.
-function speed(mps) {
+function globaldefaultspeed(mps) {
   if (mps === undefined) {
     return 1000 / $.fx.speeds.turtle;
   } else {
@@ -2349,22 +3441,55 @@ function turtleevents(prefix) {
 }
 
 // Simplify $('body').append(html).
-function output(html) {
+function output(html, defaulttag) {
   if (html === undefined || html === null) {
-    return $('<img>').img('turtle').appendTo('body');
+    // Print a turtle shell when no arguments.
+    return $('<img>').wear('turtle').css({background: 'none'}).appendTo('body');
+  }
+  var wrapped = false, result = null;
+  html = '' + html;
+  while ((result === null || result.length != 1) && !wrapped) {
+    // Wrap if obviously not surrounded by a tag already, or if we tried
+    // to trust a surrounding tag but found multiple bits.
+    if (html.charAt(0) != '<' || html.charAt(html.length - 1) != '>' ||
+        (result !== null && result.length != 1)) {
+      html = '<' + defaulttag + ' style="display:inline-block">' +
+          html + '</' + defaulttag + '>';
+      wrapped = true;
+    }
+    result = $(html);
   }
-  if (!html || html[0] != '<' || html.indexOf('>') == -1) {
-    html = '<div>' + escapeHtml(html) + '</div>';
+  result.appendTo('body');
+  if (wrapped && defaulttag == 'div') {
+    result.after('<br>');
   }
-  return $(html).appendTo('body');
+  return result;
 }
 
-// Simplify $('body').append('<input>' + label) and onchange hookup.
-function input(name, callback) {
+// Simplify $('body'>.append('<button>' + label + '</button>').click(fn).
+function button(name, callback) {
   if ($.isFunction(name) && callback === undefined) {
     callback = name;
     name = null;
   }
+  if (name === null || name === undefined) {
+    name = '\u25CE';
+  }
+  var result = $('<button>' + escapeHtml(name) + '</button>');
+  result.appendTo('body');
+  if (callback) {
+    result.click(callback);
+  }
+  return result;
+}
+
+
+// Simplify $('body').append('<input>' + label) and onchange hookup.
+function input(name, callback, numeric) {
+  if ($.isFunction(name) && !callback) {
+    callback = name;
+    name = null;
+  }
   name = $.isNumeric(name) || name ? name : '&rArr;';
   var textbox = $('<input>'),
       label = $(
@@ -2380,28 +3505,307 @@ function input(name, callback) {
     }
   }
   function newval() {
+    if (!validate()) { return false; }
     var val = textbox.val();
     if (debounce && lastseen == val) { return; }
     dodebounce();
     lastseen = val;
     textbox.remove();
     label.append(val);
-    if ($.isNumeric(val)) {
+    if (numeric > 0 || (
+      numeric >= 0 && $.isNumeric(val) && ('' + parseFloat(val) == val))) {
       val = parseFloat(val);
     }
     if (callback) { callback.call(thisval, val); }
   }
+  function validate() {
+    if (!numeric) return true;
+    var val = textbox.val(),
+        nval = val.replace(/[^0-9\.]/g, '');
+    if (val != nval || !$.isNumeric(nval)) {
+      textbox.val(nval);
+      return false;
+    }
+    return true;
+  }
   function key(e) {
-    if (e.which == 13) { newval(); }
+    if (e.which == 13) {
+      if (!validate()) { return false; }
+      newval();
+    }
+    if (numeric > 0 && (e.which >= 32 && e.which <= 127) &&
+        (e.which < '0'.charCodeAt(0) || e.which > '9'.charCodeAt(0))) {
+      return false;
+    }
   }
   dodebounce();
-  textbox.on('keydown', key);
+  textbox.on('keypress keydown', key);
   textbox.on('change', newval);
   $('body').append(label);
   textbox.focus();
   return thisval;
 }
 
+function table(height, width, cellCss, tableCss) {
+  var contents = null, row, col;
+  if ($.isArray(height)) {
+    tableCss = cellCss;
+    cellCss = width;
+    contents = height;
+    height = contents.length;
+    width = 0;
+    for (row = 0; row < height; row++) {
+      if ($.isArray(contents[row])) {
+        width = Math.max(width, contents[row].length);
+      } else {
+        width = Math.max(width, 1);
+      }
+    }
+  }
+  var html = ['<table>'];
+  for (row = 0; row < height; row++) {
+    html.push('<tr>');
+    for (col = 0; col < width; col++) {
+      if (contents) {
+        if ($.isArray(contents[row]) && col < contents[row].length) {
+          html.push('<td>' + escapeHtml(contents[row][col]) + '</td>');
+        } else if (!$.isArray(contents[row]) && col == 0) {
+          html.push('<td>' + escapeHtml(contents[row]) + '</td>');
+        } else {
+          html.push('<td></td>');
+        }
+      } else {
+        html.push('<td></td>');
+      }
+    }
+    html.push('</tr>');
+  }
+  html.push('</table>');
+  var result = $(html.join(''));
+  var defaultCss = {
+    borderCollapse: 'collapse',
+    width: '35px',
+    height: '35px',
+    border: '1px solid black',
+    tableLayout: 'fixed',
+    textAlign: 'center',
+    margin: '0',
+    padding: '0'
+  };
+  result.css($.extend({}, defaultCss,
+    { width: 'auto', height: 'auto', maxWidth: 'auto', border: 'none'},
+    tableCss));
+  result.find('td').css($.extend({}, defaultCss, cellCss));
+  result.appendTo('body');
+  return result;
+}
+
+//////////////////////////////////////////////////////////////////////////
+// WEB AUDIO SUPPORT
+// Definition of play("ABC") - uses ABC music note syntax.
+//////////////////////////////////////////////////////////////////////////
+
+var ABCtoken = /\s+|\[|\]|>+|<+|(?:(?:\^\^|\^|__|_|=|)[A-Ga-g](?:,+|'+|))|\d*\/\d+|\d+|\/+|[xzXZ]|./g;
+var audioTop = null;
+function isAudioPresent() {
+  return !!(window.audioContext || window.webkitAudioContext);
+}
+function getAudioTop() {
+  if (!audioTop) {
+    var ac = new (window.AudioContext || window.webkitAudioContext),
+        dcn = ac.createDynamicsCompressor(),
+        firstTime = null;
+    dcn.connect(ac.destination);
+    audioTop = {
+      ac: ac,
+      out: dcn,
+      // Partial workaround for http://crbug.com/254942:
+      // add little extra pauses before scheduling envelopes.
+      // A quarter second or so seems to be needed at initial startup,
+      // then 1/64 second before scheduling each envelope afterwards.
+      nextStartTime: function() {
+        if (firstTime === null) {
+          firstTime = ac.currentTime;
+        }
+        return Math.max(firstTime + 0.25,
+                        ac.currentTime + 0.015625);
+      }
+    }
+  }
+  return audioTop;
+}
+function parseABCNotes(str) {
+  var tokens = str.match(ABCtoken), result = [], stem = null,
+      index = 0, dotted = 0, t;
+  while (index < tokens.length) {
+    if (/^s+$/.test(tokens[index])) { index++; continue; }
+    if (/</.test(tokens[index])) { dotted = -tokens[index++].length; continue; }
+    if (/>/.test(tokens[index])) { dotted = tokens[index++].length; continue; }
+    stem = parseStem(tokens, index);
+    if (stem === null) {
+      // Skip unparsable bits
+      index++;
+      continue;
+    }
+    if (stem !== null) {
+      if (dotted && result.length) {
+        if (dotted > 0) {
+          t = (1 - Math.pow(0.5, dotted)) * stem.value.time;
+        } else {
+          t = (Math.pow(0.5, -dotted) - 1) * result[result.length - 1].time;
+        }
+        result[result.length - 1].time += t;
+        stem.value.time -= t;
+        dotted = 0;
+      }
+      result.push(stem.value);
+      index = stem.index;
+    }
+  }
+  return result;
+}
+function parseStem(tokens, index) {
+  var pitch = [];
+  if (index < tokens.length && tokens[index] == '[') {
+    index++;
+    while (index < tokens.length && /[A-Ga-g]/.test(tokens[index])) {
+      pitch.push(tokens[index++]);
+    }
+    if (tokens[index] != ']') {
+      return null;
+    }
+    index++;
+  } else if (index < tokens.length && /[A-Ga-g]/.test(tokens[index])) {
+    pitch.push(tokens[index++]);
+  } else if (/^[xzXZ]$/.test(tokens[index])) {
+    // Rest - no pitch.
+    index++;
+  } else {
+    return null;
+  }
+  var duration = '';
+  if (tokens.length && /\d|\//.test(tokens[index])) {
+    duration = tokens[index++];
+  }
+  return {
+    index: index,
+    value: {
+      pitch: pitch,
+      duration: duration,
+      frequency: pitch.map(pitchToFrequency),
+      time: durationToTime(duration)
+    }
+  }
+}
+function pitchToFrequency(pitch) {
+  var m = /^(\^\^|\^|__|_|=|)([A-Ga-g])(,+|'+|)$/.exec(pitch);
+  if (!m) { return null; }
+  var n = {C:-9,D:-7,E:-5,F:-4,G:-2,A:0,B:2,c:3,d:5,e:7,f:8,g:10,a:12,b:14};
+  var a = { '^^':2, '^':1, '': 0, '=':0, '_':-1, '__':-2 };
+  var semitone = n[m[2]] + a[m[1]] + (/,/.test(m[3]) ? -12 : 12) * m[3].length;
+  return 440 * Math.pow(2, semitone / 12);
+}
+function durationToTime(duration) {
+  var m = /^(\d*)(?:\/(\d*))?$|^(\/+)$/.exec(duration), n, d;
+  if (m[3]) return Math.pow(0.5, m[3].length);
+  n = (m[1] ? parseFloat(m[1]) : 1);
+  d = (m[2] ? parseFloat(m[2]) : /\//.test(duration) ? 2 : 1);
+  return n / d;
+}
+function playABC(elem, args) {
+  if (!isAudioPresent()) {
+    if (elem) { $(elem).dequeue(); }
+    return;
+  }
+  var atop = getAudioTop(),
+      firstvoice = 0, argindex, voice, freqmult, beatsecs,
+      volume = 0.5, tempo = 120, transpose = 0, type = ['square'],
+      venv = {a: 0.01, d: 0.2, s: 0.1, r: 0.1}, envelope = [venv],
+      start_time = null, end_time = atop.ac.currentTime,
+      notes, vtype, time, fingers, strength, i, g, t,
+      atime, slast, rtime, stime, dt, opts;
+  if ($.isPlainObject(args[0])) {
+    opts = args[0];
+    if ('volume' in opts) { volume = opts.volume; }
+    if ('tempo' in opts) { tempo = opts.tempo; }
+    if ('transpose' in opts) { transpose = opts.transpose; }
+    if ('type' in opts) { type = opts.type; }
+    if ('envelope' in opts) {
+      if ($.isArray(opts.envelope)) {
+        envelope = []
+        for (i = 0; i < opts.envelope.length; i++) {
+          envelope.push($.extend({}, venv, opts.envelope[i]));
+        }
+      } else {
+        $.extend(venv, opts.envelope);
+      }
+    }
+    firstvoice = 1;
+  }
+  beatsecs = 60 / tempo;
+  if (!$.isArray(type)) { type = [type]; }
+  if (!$.isArray(volume)) { volume = [volume]; }
+  if (!$.isArray(transpose)) { transpose = [transpose]; }
+  for (argindex = firstvoice; argindex < args.length; argindex++) {
+    voice = argindex - firstvoice;
+    notes = parseABCNotes(args[argindex]);
+    vtype = type[voice % type.length] || 'square';
+    fingers = 0;
+    for (i = 0; i < notes.length; i++) {
+      fingers = Math.max(fingers, notes[i].frequency.length);
+    }
+    if (fingers == 0) { continue; }
+    // Attenuate chorded voice so chorded power matches volume.
+    strength = volume[voice % volume.length] / Math.sqrt(fingers);
+    venv = envelope[voice % envelope.length];
+    freqmult = Math.pow(2, transpose[voice % transpose.length] / 12);
+    if (start_time === null) {
+      start_time = atop.nextStartTime();
+    }
+    time = start_time;
+    for (i = 0; i < notes.length; i++) {
+      t = notes[i].time;
+      if (notes[i].frequency.length > 0) {
+        g = atop.ac.createGainNode();
+        stime = t * beatsecs + time;
+        atime = Math.min(t, venv.a) * beatsecs + time;
+        rtime = Math.max(0, t + venv.r) * beatsecs + time;
+        if (atime > rtime) { atime = rtime = (atime + rtime) / 2; }
+        if (rtime < stime) { stime = rtime; rtime = t * beatsecs + time; }
+        dt = venv.d * beatsecs;
+        g.gain.setValueAtTime(0, time);
+        g.gain.linearRampToValueAtTime(strength, atime);
+        g.gain.setTargetAtTime(venv.s * strength, atime, dt);
+        slast = venv.s + (1 - venv.s) * Math.exp((atime - stime) / dt);
+        g.gain.setValueAtTime(slast * strength, stime);
+        g.gain.linearRampToValueAtTime(0, rtime);
+        g.connect(atop.out);
+        for (var x = 0; x < notes[i].frequency.length; x++) {
+          var o = atop.ac.createOscillator();
+          o.type = vtype;
+          o.frequency.value = notes[i].frequency[x] * freqmult;
+          o.connect(g);
+          o.start(time);
+          o.stop(rtime);
+        }
+      }
+      time += t * beatsecs;
+    }
+    end_time = Math.max(end_time, time);
+  }
+  function callDequeueWhenDone() {
+    if (atop.ac.currentTime < end_time) {
+      setTimeout(callDequeueWhenDone, (end_time - atop.ac.currentTime) * 1000);
+    } else {
+      $(elem).dequeue();
+    }
+  }
+  if (elem) {
+    callDequeueWhenDone();
+  }
+}
+
+
 //////////////////////////////////////////////////////////////////////////
 // SEE LOGGING SUPPORT
 // A copy of see.js here.
@@ -2458,6 +3862,7 @@ function init(options) {
   if (options.hasOwnProperty('history')) { uselocalstorage = options.history; }
   if (options.hasOwnProperty('coffee')) { coffeescript = options.coffee; }
   if (options.hasOwnProperty('abbreviate')) { abbreviate = options.abbreviate; }
+  if (options.hasOwnProperty('consolehook')) { consolehook= options.consolehook; }
   if (options.hasOwnProperty('noconflict')) { noconflict(options.noconflict); }
   if (panel) {
     // panel overrides element and autoscroll.
@@ -2493,7 +3898,7 @@ function seeeval(scope, code) {
 
 var varpat = '[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*';
 var initialvardecl = new RegExp(
-  '^\\s*var\\s+(?:' + varpat + '\\s*,)*' + varpat + '\\s*;\\s*');
+  '^\\s*var\\s+(?:' + varpat + '\\s*,\\s*)*' + varpat + '\\s*;\\s*');
 
 function barecs(s) {
   // Compile coffeescript in bare mode.
@@ -2516,7 +3921,9 @@ function exportsee() {
   see.eval = seeeval;
   see.barecs = barecs;
   see.here = 'eval(' + seepkg + '.init())';
-  see.clear = clear;
+  see.clear = seeclear;
+  see.hide = seehide;
+  see.show = seeshow;
   see.js = seejs;
   see.cs = '(function(){return eval(' + seepkg + '.barecs(arguments[0]));})';
   see.version = version;
@@ -2527,7 +3934,7 @@ function noteoldvalue(name) {
   return {
     name: name,
     has: window.hasOwnProperty(name),
-    value: window[name],
+    value: window[name]
   };
 }
 
@@ -3032,16 +4439,15 @@ function flushqueue() {
 var addedpanel = false;
 var inittesttimer = null;
 var abbreviate = [{}.undefined];
+var consolehook = null;
 
-function show(flag) {
-  if (!addedpanel) { return; }
-  if (arguments.length === 0 || flag) {
-    $('#_testpanel').show();
-  } else {
-    $('#_testpanel').hide();
-  }
+function seehide() {
+  $('#_testpanel').hide();
+}
+function seeshow() {
+  $('#_testpanel').show();
 }
-function clear() {
+function seeclear() {
   if (!addedpanel) { return; }
   $('#_testlog').find('._log').not('#_testpaneltitle').remove();
 }
@@ -3109,6 +4515,7 @@ function tryinitpanel() {
         $('#_testlog').prepend(formattitle(paneltitle));
       }
     }
+    $('#_testpanel').show();
   } else {
     if (!window.document.getElementById('_testlog') && window.document.body) {
       initlogcss();
@@ -3118,7 +4525,7 @@ function tryinitpanel() {
         state.height = Math.min(wheight(), Math.max(10, wheight() - 50));
       }
       $('body').prepend(
-        '<samp id="_testpanel" style="overflow:hidden;' +
+        '<samp id=" _testpanel style="overflow:hidden;z-index:99;' +
             'position:fixed;bottom:0;left:0;width:100%;height:' + state.height +
             'px;background:rgba(240,240,240,0.8);' +
             'font:10pt monospace;' +
@@ -3178,11 +4585,13 @@ function tryinitpanel() {
           // Actually execute the command and log the results (or error).
           try {
             var result = seeeval(currentscope, text);
-            for (var j = abbreviate.length - 1; j >= 0; --j) {
-              if (result === abbreviate[j]) break;
-            }
-            if (j < 0) {
-              loghtml(repr(result));
+            if (!consolehook || !consolehook(text, result)) {
+              for (var j = abbreviate.length - 1; j >= 0; --j) {
+                if (result === abbreviate[j]) break;
+              }
+              if (j < 0) {
+                loghtml(repr(result));
+              }
             }
           } catch (e) {
             see(e);
@@ -3250,4 +4659,6 @@ function tryinitpanel() {
   }
 }
 
+eval(" scope jquery-turtle , + seejs + , this ) + })(jQuery diff --git a/params.json b/params.json index 2d6e6d2..fa93323 100644 - a/params.json + b/params.json @ -1 +1 @ - name : jQuery-turtle , tagline : Turtle Graphics for JQuery , body : jQuery-turtle\r\n="============\r\n\r\nversion" 2.0.4\r\n\r\njQuery-turtle is a jQuery plugin for turtle graphics.\r\n\r\nWith jQuery-turtle every DOM element is a turtle that can be\r\nmoved using LOGO-inspired turtle methods like fd bk rt and lt.\r\n><pre>\r\n  $('#turtle').pen('red').rt(90).fd(100).lt(90).bk(50).fadeOut();\r\n</pre>\r\nThe plugin also provides functions to help in a rotated,\r\nscaled, and transformed world where nested elements may be\r\ntransformed.  There are functions for collision testing, absolute\r\npositioning, and absolute direction reading and setting.\r\n\r\n[Try an interactive demo (CoffeeScript syntax) here.](\r\nhttp://davidbau.github.io/jquery-turtle/demo.html)\r\n\r\nUnder the covers, CSS3 2D transforms and jQuery animations are\r\nused to execute and store turtle movement, so jQuery-turtle\r\ninteracts well with other jQuery animations or direct uses of\r\n2D CSS3 transforms.  The plugin sets up jQuery CSS hooks for\r\nsynthetic CSS properties such as turtleForward that can be\r\nanimated or used to directly manipulate turtle geometry at a basic\r\nmathematical level.\r\n\r\nA high-level educational environment is enabled by $.turtle().\r\nThat call creates a set of global objects and functions\r\ncatering to beginners.  These include a default turtle\r\nand global functions to control it; an onpage debugger panel;\r\njQuery instances for every object with an #id; simplified\r\nglobals to access recent mouse and keyboard events, and\r\nsimplified functions for randomness, timers, animation control,\r\nand creation of new turtles.  The jQuery teaching environment\r\nhas been developed to support a curriculum for young students.\r\n\r\nJQuery Methods for Turtle Movement\r\n----------------------------------\r\n\r\nTurtle-oriented methods taking advantage of the css support:\r\n<pre>\r\n  $(x).fd(100)      // Forward relative motion in local coordinates.\r\n  $(x).bk(50)       // Back.\r\n  $(x).rt(90)       // Right turn.\r\n  $(x).lt(45)       // Left turn.\r\n  $(x).pen('red')   // Sets a pen style, or 'none' for no drawing.\r\n  $(x).dot(12)      // Draws a dot of diameter 12.\r\n  $(x).erase()      // Erases under the turtles collision hull.\r\n  $(x).img('blue')  // Switch the image to a blue pointer.  May use any url.\r\n  $(x).moveto({pageX: 40, pageY: 140})  // Absolute motion in page coordinates.\r\n  $(x).turnto(heading || position)      // Absolute heading adjustment.\r\n  $(x).scale(1.5)   // Scales the element up to 150% size.\r\n  $(x).twist(180)   // Changes which direction is considered \"forward\".\r\n  $(x).mirror(true) // Flips the turtle across its direction axis.\r\n  $(x).reload()     // Reloads the turtle's image (restarting animated gifs)\r\n  $(x).direct(fn)   // Like each, but this is set to $(elt) instead of elt.\r\n  // Methods below this line do not queue for animation.\r\n  $(x).center()     // Page coordinate position of transform-origin.\r\n  $(x).direction()  // Absolute bearing taking into account nested transforms.\r\n  $(x).shown()      // Shorthand for is(\":visible\")\r\n  $(x).hidden()     // Shorthand for !is(\":visible\")\r\n  $(x).touches(y)   // Collision tests elements (uses turtleHull if present).\r\n  $(x).encloses(y)  // Containment collision test.\r\n  $(x).within(d, t) // Filters to items with centers within d of t.center().\r\n  $(x).notwithin()  // The negation of within.\r\n</pre>\r\n\r\nWhen $.fx.speeds.turtle is nonzero (the default is zero unless\r\n$.turtle() is called), the first four movement functions animate\r\nat that speed, and the remaining mutators also participate in the\r\nanimation queue.  Note that property-reading functions such as\r\ntouches() are synchronous and will not queue, and setting\r\n$.fx.speed.turtle to 0 will make movement functions synchronous.\r\n\r\nThe absolute motion methods moveto and turnto accept any argument\r\nwith pageX and pageY, including, usefully, mouse events.  They\r\noperate in absolute page coordinates even when the turtle is nested\r\nwithin further transformed elements.\r\n\r\nThe hit-testing functions touches() and encloses() will test using\r\nthe convex hull for the two objects in question. This defaults to\r\nthe bounding box of the elements (as transformed) but can be overridden\r\nby the turtleHull CSS property, if present.\r\n\r\nJQuery CSS Hooks for Turtle Geometry\r\n------------------------------------\r\n\r\nTurtle-oriented 2d transform cssHooks, with animation support on all\r\nmotion:\r\n\r\n<pre>\r\n  $(x).css('turtlePosition', '30 40');   // position in local coordinates.\r\n  $(x).css('turtlePositionX', '30');     // x component.\r\n  $(x).css('turtlePositionY', '40');     // y component.\r\n  $(x).css('turtleRotation', '90');      // rotation in degrees.\r\n  $(x).css('turtleScale', '2');          // double the size of any element.\r\n  $(x).css('turtleScaleX', '2');         // x stretch before rotate after twist.\r\n  $(x).css('turtleScaleY', '2');         // y stretch before rotate after twist.\r\n  $(x).css('turtleTwist', '45');         // turn before stretching.\r\n  $(x).css('turtleForward', '50');       // position in direction of rotation.\r\n  $(x).css('turtlePen', 'red');          // or 'red lineWidth 2px' etc.\r\n  $(x).css('turtleHull', '5 0 0 5 0 -5');// fine-tune shape for collisions.\r\n</pre>\r\n\r\nArbitrary 2d transforms are supported, including transforms of elements\r\nnested within other elements that have css transforms. Transforms are\r\nautomatically decomposed to turtle components when necessary.\r\n\r\nA canvas is supported for drawing, but only created when the pen is\r\nused; pen styles include canvas style properties such as lineWidth\r\nand lineCap.\r\n\r\nA convex hull polygon can be set to be used by the collision detection\r\nand hit-testing functions (encloses, touches).  The turtleHull is a list\r\nof (unrotated) x-y coordinates relative to the object's transformOrigin.\r\nIf set to 'auto' (the default) the hull is just the bounding box for the\r\nelement.\r\n\r\nTurtle Teaching Environment\r\n---------------------------\r\n\r\nAn optional teaching environment setup is created by eval($.turtle()).\r\nIt provides easy packaging for the above functionality.\r\n\r\nAfter eval($.turtle()):\r\n  * An &lt;img id=\"turtle\"&gt; is created if #turtle doesn't already exist.\r\n  * An eval debugging panel (see.js) is shown at the bottom of the screen.\r\n  * Turtle methods on the default turtle are packaged as globals, e.g., fd(10).\r\n  * Every #id element is turned into a global variable: window.id = $('#id').\r\n  * Globals are set up to save events: \"lastclick\", \"lastmousemove\", etc.\r\n  * Default turtle animation is set to 1 move per sec so steps can be seen.\r\n  * speed(movesPerSec) adjusts $.fx.speeds.turtle to 1000 / movesPerSec.\r\n  * tick([ticksPerSec,] fn) is similarly an easier-to-call setInterval.\r\n  * random(lessThanThisInteger || array) is an easy alternative to Math.random.\r\n  * remove() will remove the global turtle and global turtle methods.\r\n  * hatch([n,] [spec]) creates and returns any number of new turtles.\r\n  * see(a, b, c) logs tree-expandable data into the debugging panel.\r\n  * output(html or text) appends html to the document body.\r\n  * input(label, callback) appends a labelled input field to the document body.\r\n\r\nFor example, after eval($.turtle()), the following is a valid program\r\nin CoffeeScript syntax:\r\n\r\n<pre>\r\nspeed 100\r\npen 'red'\r\nchaser = hatch()\r\nchaser.moveto 0,0\r\nchaser.bg 'red'\r\nplayer = turtle\r\ntick 10, ->\r\n  player.turnto lastmousemove\r\n  player.fd 5\r\n  chaser.turnto player\r\n  chaser.rt (random 60) - 30\r\n  chaser.fd 5\r\n  if chaser.touches player\r\n    output \"tag! you're it!\"\r\n    tick ->\r\n</pre>\r\n\r\nThe turtle teaching environment is designed to work well with either\r\nJavascript or CoffeeScript.\r\n\r\nLicense (MIT)\r\n-------------\r\n\r\nCopyright (c) 2013 David Bau\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in\r\nall copies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\r\nTHE SOFTWARE.\r\n\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
\ No newline at end of file
+{"name":"jQuery-turtle","tagline":"Turtle Graphics for JQuery","body":"jQuery-turtle\r\n=============\r\n\r\nversion 2.0.7\r\n\r\njQuery-turtle is a jQuery plugin for turtle graphics.\r\n\r\nWith jQuery-turtle, every DOM element is a turtle that can be\r\nmoved using turtle graphics methods like fd (forward), bk (back),\r\nrt (right turn), and lt (left turn).  The pen function allows\r\na turtle to draw on a full-document canvas as it moves.\r\n\r\n<pre>\r\n$('#turtle').pen('red').rt(90).fd(100).lt(90).bk(50).fadeOut();\r\n</pre>\r\n\r\njQuery-turtle provides:\r\n  * Relative and absolute motion and drawing.\r\n  * Functions to ease basic input, output, and game-making for beginners.\r\n  * Operations on sets of turtles, and turtle motion of arbitrary elements.\r\n  * Accurate collision-testing of turtles with arbitrary convex hulls.\r\n  * Simplified access to CSS3 transforms, jQuery animations, Canvas, and Web Audio.\r\n  * An interactive turtle console in either Javascript or CoffeeScript.\r\n\r\nThe plugin can also create a learning environment with a default\r\nturtle that is friendly for beginners.  The following is a complete\r\nCoffeeScript program that uses the default turtle to draw a grid of\r\nsixteen colored polygons.\r\n\r\n<pre>\r\neval $.turtle()  # Create the default turtle.\r\n\r\nspeed 100\r\nfor color in [red, gold, green, blue]\r\n  for sides in [3..6]\r\n    pen color\r\n    for x in [1..sides]\r\n      fd 100 / sides\r\n      lt 360 / sides\r\n    pen null\r\n    fd 40\r\n  slide 40, -160\r\n</pre>\r\n\r\n[Try an interactive demo (CoffeeScript syntax) here.](\r\nhttp://davidbau.github.io/jquery-turtle/demo.html)\r\n\r\n\r\nJQuery Methods for Turtle Movement\r\n----------------------------------\r\n\r\nThe turtle API is briefly summarized below.  All the following\r\nturtle-oriented methods operate on any jQuery object (including\r\nthe default turtle, if used):\r\n\r\n<pre>\r\n$(q).fd(100)      // Forward relative motion in local coordinates.\r\n$(q).bk(50)       // Back.\r\n$(q).rt(90)       // Right turn.  Optional turning radius second arg.\r\n$(q).lt(45)       // Left turn.  Optional turning radius second arg.\r\n$(q).slide(x, y)  // Slide right by x while sliding forward by y.\r\n$(q).moveto({pageX:x,pageY:y} | [x,y])  // Absolute motion on page.\r\n$(q).jumpto({pageX:x,pageY:y} | [x,y])  // Like moveto, without drawing.\r\n$(q).turnto(bearing || position)        // Absolute direction adjustment.\r\n$(q).play(\"ccgg\") // Plays notes using ABC notation and waits until done.\r\n\r\n// Methods below happen in an instant, but line up in the animation queue.\r\n$(q).home()       // Jumps to the center of the document, with bearing 0.\r\n$(q).pen('red')   // Sets a pen style, or 'none' for no drawing.\r\n$(q).pu()         // Pen up - temporarily disables the pen (also pen(false)).\r\n$(q).pd()         // Pen down - starts a new pen path.\r\n$(q).pe()         // Uses the pen 'erase' style.\r\n$(q).fill('gold') // Fills a shape previously outlined using pen('path').\r\n$(q).dot(12)      // Draws a circular dot of diameter 12.  Color second arg.\r\n$(q).label('A')   // Prints an HTML label at the turtle location.\r\n$(q).speed(10)    // Sets turtle animation speed to 10 moves per sec.\r\n$(q).ht()         // Hides the turtle.\r\n$(q).st()         // Shows the turtle.\r\n$(q).wear('blue') // Switches to a blue shell.  Use any image or color.\r\n$(q).scale(1.5)   // Scales turtle size and motion by 150%.\r\n$(q).twist(180)   // Changes which direction is considered \"forward\".\r\n$(q).mirror(true) // Flips the turtle across its main axis.\r\n$(q).reload()     // Reloads the turtle's image (restarting animated gifs)\r\n$(q).direct(fn)   // Like each, but this is set to $(elt) instead of elt,\r\n                  // and the callback fn can insert into the animation queue.\r\n\r\n// Methods below this line do not queue for animation.\r\n$(q).getxy()      // Local (center-y-up [x, y]) coordinates of the turtle.\r\n$(q).pagexy()     // Page (topleft-y-down {pageX:x, pageY:y}) coordinates.\r\n$(q).bearing([p]) // The turtles absolute direction (or direction towards p).\r\n$(q).distance(p)  // Distance to p in page coordinates.\r\n$(q).shown()      // Shorthand for is(\":visible\")\r\n$(q).hidden()     // Shorthand for !is(\":visible\")\r\n$(q).touches(y)   // Collision tests elements (uses turtleHull if present).\r\n$(q).enclosedby(y)// Containment collision test.\r\n$(q).within(d, t) // Filters to items with centers within d of t.pagexy().\r\n$(q).notwithin()  // The negation of within.\r\n$(q).cell(y, x)   // Selects the yth row and xth column cell in a table.\r\n$(q).hatch([n,] [img]) // Creates and returns n turtles with the given img.\r\n</pre>\r\n\r\n\r\nSpeed and Turtle Animation\r\n--------------------------\r\n\r\nWhen the speed of a turtle is nonzero, the first eight movement\r\nfunctions animate at that speed (in moves per second), and the\r\nremaining mutators also participate in the animation queue.  The\r\ndefault turtle speed is a leisurely one move per second (as\r\nappropriate for the creature), but you may soon discover the\r\ndesire to set speed higher.\r\n\r\nSetting the turtle speed to Infinity will make its movement synchronous,\r\nwhich makes the synchronous distance, direction, and hit-testing useful\r\nfor realtime game-making.\r\n\r\nPen and Fill Styles\r\n-------------------\r\n\r\nThe turtle pen respects canvas styling: any valid strokeStyle is\r\naccepted; and also using a space-separated syntax, lineWidth, lineCap,\r\nlineJoin, miterLimit, and fillStyle can be specified, e.g.,\r\npen('red lineWidth 5 lineCap square').  The same syntax applies for\r\nstyling dot and fill (except that the default interpretation for the\r\nfirst value is fillStyle instead of strokeStyle).\r\n\r\nThe fill method is used by tracing an invisible path using the\r\npen('path') style, and then calling the fill method.  Disconnected\r\npaths can be created using pu() and pd().\r\n\r\nConventions for Musical Notes\r\n-----------------------------\r\n\r\nThe play method plays a sequence of notes specified using a subset of\r\nstandard ABC notation.  Capital C denotes middle C, and lowercase c is\r\nan octave higher.  Pitches and durations can be altered with commas,\r\napostrophes, carets, underscores, digits, and slashes as in the\r\nstandard.  Enclosing letters in square brackets represents a chord,\r\nand z represents a rest.  The default tempo is 120, but can be changed\r\nby passing a options object as the first parameter setting tempo, e.g.,\r\n{ tempo: 200 }.  Other options include volume: 0.5, type: 'sine' or\r\n'square' or 'sawtooth' or 'triangle', and envelope: which defines\r\nan ADSR envelope e.g., { a: 0.01, d: 0.2, s: 0.1, r: 0.1 }.\r\n\r\nThe turtle's motion will pause while it is playing notes.  To play\r\nnotes without stalling turtle movement, use the global function sound()\r\ninstead of the turtle method play().\r\n\r\nDirecting Logic in the Animation Queue\r\n--------------------------------------\r\n\r\nThe direct method can be used to queue logic (including synchronous\r\ntests or actions) by running a function in the animation queue.  Unlike\r\njquery queue(), direct arranges things so that if further animations\r\nare queued by the callback function, they are inserted (in natural\r\nrecursive functional execution order) instead of being appended.\r\n\r\nTurnto and Absolute Bearings\r\n----------------------------\r\n\r\nThe turnto method can turn to an absolute bearing (if called with a\r\nsingle numeric argument) or towards an absolute position on the\r\nscreen.  The methods moveto and turnto accept either page or\r\ngraphing coordinates.\r\n\r\nMoveto and Two Flavors of Cartesian Coordinates\r\n-----------------------------------------------\r\n\r\nGraphing coordinates are measured upwards and rightwards from the\r\ncenter of the page, and they are specified as bare numeric x, y\r\narguments or [x, y] pairs as returned from getxy().\r\n\r\nPage coordinates are specified by an object with pageX and pageY\r\nproperties, or with a pagexy() method that will return such an object.\r\nThat includes, usefullly, mouse events and turtle objects.  Page\r\ncoordinates are measured downward from the top-left corner of the\r\npage to the center (or transform-origin) of the given object.\r\n\r\nHit Testing\r\n-----------\r\n\r\nThe hit-testing functions touches() and enclosedby() will test for\r\ncollisions using the convex hulls of the objects in question.\r\nThe hull of an element defaults to the bounding box of the element\r\n(as transformed) but can be overridden by the turtleHull CSS property,\r\nif present.  The default turtle is given a turtle-shaped hull.\r\n\r\nTurtle Teaching Environment\r\n---------------------------\r\n\r\nA default turtle together with an interactive console are created by\r\ncalling eval($.turtle()).  That call exposes all the turtle methods\r\nsuch as (fd, rt, getxy, etc) as global functions operating on the default\r\nturtle.  It will also set up a number of other global symbols to provide\r\nbeginners with a simplified programming environment.\r\n\r\nIn detail, after eval($.turtle()):\r\n  * An &lt;img id=\"turtle\"&gt; is created if #turtle doesn't already exist.\r\n  * An eval debugging panel (see.js) is shown at the bottom of the screen.\r\n  * Turtle methods on the default turtle are packaged as globals, e.g., fd(10).\r\n  * Every #id element is turned into a global variable: window.id = $('#id').\r\n  * Default turtle animation is set to 1 move per sec so steps can be seen.\r\n  * Global event listeners are created to update global event variables.\r\n  * Methods of $.turtle.* (enumerated below) are exposed as global functions.\r\n  * String constants are defined for the 140 named CSS colors.\r\n\r\nBeyond the functions to control the default turtle, the globals added by\r\n$.turtle() are as follows:\r\n\r\n<pre>\r\nlastclick             // Event object of the last click event in the doc.\r\nlastmousemove         // The last mousemove event.\r\nlastmouseup           // The last mouseup event.\r\nlastmousedown         // The last mousedown event.\r\nkeydown               // The last keydown event.\r\nkeyup                 // The last keyup event.\r\nkeypress              // The last keypress event.\r\nhatch([n,] [img])     // Creates and returns n turtles with the given img.\r\ncs()                  // Clears the screen, both the canvas and the body text.\r\ncg()                  // Clears the graphics canvas without clearing the text.\r\nct()                  // Clears the text without clearing the canvas.\r\ndefaultspeed(mps)     // Sets $.fx.speeds.turtle to 1000 / mps.\r\ntick([perSec,] fn)    // Sets fn as the tick callback (null to clear).\r\nrandom(n)             // Returns a random number [0..n-1].\r\nrandom(list)          // Returns a random element of the list.\r\nrandom('normal')      // Returns a gaussian random (mean 0 stdev 1).\r\nrandom('uniform')     // Returns a uniform random [0...1).\r\nrandom('position')    // Returns a random {pageX:x, pageY:y} coordinate.\r\nrandom('color')       // Returns a random hsl(*, 100%, 50%) color.\r\nrandom('gray')        // Returns a random hsl(0, 0, *) gray.\r\nremove()              // Removes default turtle and its globals (fd, etc).\r\nsee(a, b, c...)       // Logs tree-expandable data into debugging panel.\r\nwrite(html)           // Appends html into the document body.\r\nread([label,] fn)     // Makes a one-time input field, calls fn after entry.\r\nreadnum([label,] fn)  // Like read, but restricted to numeric input.\r\nreadstr([label,] fn)  // Like read, but never converts input to a number.\r\nbutton([label,] fn)   // Makes a clickable button, calls fn when clicked.\r\ntable(m, n)           // Outputs a table with m rows and n columns.\r\nsound('[DFG][EGc]')   // Plays musical notes now, without queueing.\r\n</pre>\r\n\r\nHere is another CoffeeScript example that demonstrates some of\r\nthe functions:\r\n\r\n<pre>\r\neval $.turtle()  # Create the default turtle and global functions.\r\n\r\ndefaultspeed Infinity\r\nwrite \"Catch blue before red gets you.\"\r\nbk 100\r\nr = hatch red\r\nb = hatch blue\r\ntick 10, ->\r\n  turnto lastmousemove\r\n  fd 6\r\n  r.turnto turtle\r\n  r.fd 4\r\n  b.turnto bearing b\r\n  b.fd 3\r\n  if b.touches(turtle)\r\n    write \"You win!\"\r\n    tick off\r\n  else if r.touches(turtle)\r\n    write \"Red got you!\"\r\n    tick off\r\n  else if not b.enclosedby(document)\r\n    write \"Blue got away!\"\r\n    tick off\r\n</pre>\r\n\r\nThe turtle teaching environment is designed to work well with either\r\nJavascript or CoffeeScript.\r\n\r\nJQuery CSS Hooks for Turtle Geometry\r\n------------------------------------\r\n\r\nUnderlying turtle motion are turtle-oriented 2d transform jQuery cssHooks,\r\nwith animation support on all motion:\r\n\r\n<pre>\r\n$(q).css('turtleSpeed', '10');         // default speed in moves per second.\r\n$(q).css('turtlePosition', '30 40');   // position in local coordinates.\r\n$(q).css('turtlePositionX', '30px');   // x component.\r\n$(q).css('turtlePositionY', '40px');   // y component.\r\n$(q).css('turtleRotation', '90deg');   // rotation in degrees.\r\n$(q).css('turtleScale', '2');          // double the size of any element.\r\n$(q).css('turtleScaleX', '2');         // x stretch after twist.\r\n$(q).css('turtleScaleY', '2');         // y stretch after twist.\r\n$(q).css('turtleTwist', '45deg');      // turn before stretching.\r\n$(q).css('turtleForward', '50px');     // position in direction of rotation.\r\n$(q).css('turtleTurningRadius, '50px');// arc turning radius for rotation.\r\n$(q).css('turtlePenStyle', 'red');     // or 'red lineWidth 2px' etc.\r\n$(q).css('turtlePenDown', 'up');       // default 'down' to draw with pen.\r\n$(q).css('turtleHull', '5 0 0 5 0 -5');// fine-tune shape for collisions.\r\n</pre>\r\n\r\nArbitrary 2d transforms are supported, including transforms of elements\r\nnested within other elements that have css transforms. For example, arc\r\npaths of a turtle within a skewed div will transform to the proper elliptical\r\narc.  Note that while turtle motion is transformed, lines and dots are not:\r\nfor example, dots are always circular.  To get transformed circles, trace\r\nout an arc.\r\n\r\nTransforms on the turtle itself are used to infer the turtle position,\r\ndirection, and rendering of the sprite.  ScaleY stretches the turtle\r\nsprite in the direction of movement also stretches distances for\r\nmotion in all directions.  ScaleX stretches the turtle sprite perpendicular\r\nto the direction of motion and also stretches line and dot widths for\r\ndrawing.\r\n\r\nA canvas is supported for drawing, but only created when the pen is\r\nused; pen styles include canvas style properties such as lineWidth\r\nand lineCap.\r\n\r\nA convex hull polygon can be set to be used by the collision detection\r\nand hit-testing functions (enclosedby, touches).  The turtleHull is a list\r\nof (unrotated) x-y coordinates relative to the object's transformOrigin.\r\nIf set to 'auto' (the default) the hull is just the bounding box for the\r\nelement.\r\n\r\nLicense (MIT)\r\n-------------\r\n\r\nCopyright (c) 2013 David Bau\r\n\r\nPermission is hereby granted, free of charge, to any person obtaining a copy\r\nof this software and associated documentation files (the \"Software\"), to deal\r\nin the Software without restriction, including without limitation the rights\r\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\ncopies of the Software, and to permit persons to whom the Software is\r\nfurnished to do so, subject to the following conditions:\r\n\r\nThe above copyright notice and this permission notice shall be included in\r\nall copies or substantial portions of the Software.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\r\nTHE SOFTWARE.\r\n\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
\ No newline at end of file
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
new file mode 100644
index 0000000..b48c8a8
--- /dev/null
+++ b/stylesheets/stylesheet.css
@@ -0,0 +1,427 @@
+/*******************************************************************************
+Slate Theme for GitHub Pages
+by Jason Costello, @jsncostello
+*******************************************************************************/
+
+@import url(pygment_trac.css);
+
+/*******************************************************************************
+MeyerWeb Reset
+*******************************************************************************/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*******************************************************************************
+Theme Styles
+*******************************************************************************/
+
+body {
+  box-sizing: border-box;
+  color:#373737;
+  background: #212121;
+  font-size: 16px;
+  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 0;
+  font-weight: 700;
+  color:#222222;
+  font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
+  letter-spacing: -1px;
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+h2 {
+  padding-bottom: 10px;
+  font-size: 32px;
+  background: url('../images/bg_hr.png') repeat-x bottom;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 21px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  font-size: 16px;
+}
+
+p {
+  margin: 10px 0 15px 0;
+}
+
+footer p {
+  color: #f2f2f2;
+}
+
+a {
+  text-decoration: none;
+  color: #007edf;
+  text-shadow: none;
+
+  transition: color 0.5s ease;
+  transition: text-shadow 0.5s ease;
+  -webkit-transition: color 0.5s ease;
+  -webkit-transition: text-shadow 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -moz-transition: text-shadow 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -o-transition: text-shadow 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  -ms-transition: text-shadow 0.5s ease;
+}
+
+#main_content a:hover {
+  color: #0069ba;
+  text-shadow: #0090ff 0px 0px 2px;
+}
+
+footer a:hover {
+  color: #43adff;
+  text-shadow: #0090ff 0px 0px 2px;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
+img {
+  position: relative;
+  margin: 0 auto;
+  max-width: 739px;
+  padding: 5px;
+  margin: 10px 0 10px 0;
+  border: 1px solid #ebebeb;
+
+  box-shadow: 0 0 5px #ebebeb;
+  -webkit-box-shadow: 0 0 5px #ebebeb;
+  -moz-box-shadow: 0 0 5px #ebebeb;
+  -o-box-shadow: 0 0 5px #ebebeb;
+  -ms-box-shadow: 0 0 5px #ebebeb;
+}
+
+pre, code {
+  width: 100%;
+  color: #222;
+  background-color: #fff;
+
+  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+  font-size: 14px;
+
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+
+
+
+}
+
+pre {
+  width: 100%;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  overflow: auto;
+}
+
+code {
+  padding: 3px;
+  margin: 0 3px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+
+pre code {
+  display: block;
+  box-shadow: none;
+}
+
+blockquote {
+  color: #666;
+  margin-bottom: 20px;
+  padding: 0 0 0 20px;
+  border-left: 3px solid #bbb;
+}
+
+ul, ol, dl {
+  margin-bottom: 15px
+}
+
+ul li {
+  list-style: inside;
+  padding-left: 20px;
+}
+
+ol li {
+  list-style: decimal inside;
+  padding-left: 20px;
+}
+
+dl dt {
+  font-weight: bold;
+}
+
+dl dd {
+  padding-left: 20px;
+  font-style: italic;
+}
+
+dl p {
+  padding-left: 20px;
+  font-style: italic;
+}
+
+hr {
+  height: 1px;
+  margin-bottom: 5px;
+  border: none;
+  background: url('../images/bg_hr.png') repeat-x center;
+}
+
+table {
+  border: 1px solid #373737;
+  margin-bottom: 20px;
+  text-align: left;
+ }
+
+th {
+  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 10px;
+  background: #373737;
+  color: #fff;
+ }
+
+td {
+  padding: 10px;
+  border: 1px solid #373737;
+ }
+
+form {
+  background: #f2f2f2;
+  padding: 20px;
+}
+
+img {
+  width: 100%;
+  max-width: 100%;
+}
+
+/*******************************************************************************
+Full-Width Styles
+*******************************************************************************/
+
+.outer {
+  width: 100%;
+}
+
+.inner {
+  position: relative;
+  max-width: 640px;
+  padding: 20px 10px;
+  margin: 0 auto;
+}
+
+#forkme_banner {
+  display: block;
+  position: absolute;
+  top:0;
+  right: 10px;
+  z-index: 10;
+  padding: 10px 50px 10px 10px;
+  color: #fff;
+  background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
+  font-weight: 700;
+  box-shadow: 0 0 10px rgba(0,0,0,.5);
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+#header_wrap {
+  background: #212121;
+  background: -moz-linear-gradient(top, #373737, #212121);
+  background: -webkit-linear-gradient(top, #373737, #212121);
+  background: -ms-linear-gradient(top, #373737, #212121);
+  background: -o-linear-gradient(top, #373737, #212121);
+  background: linear-gradient(top, #373737, #212121);
+}
+
+#header_wrap .inner {
+  padding: 50px 10px 30px 10px;
+}
+
+#project_title {
+  margin: 0;
+  color: #fff;
+  font-size: 42px;
+  font-weight: 700;
+  text-shadow: #111 0px 0px 10px;
+}
+
+#project_tagline {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 300;
+  background: none;
+  text-shadow: #111 0px 0px 10px;
+}
+
+#downloads {
+  position: absolute;
+  width: 210px;
+  z-index: 10;
+  bottom: -40px;
+  right: 0;
+  height: 70px;
+  background: url('../images/icon_download.png') no-repeat 0% 90%;
+}
+
+.zip_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom left;
+}
+
+.tar_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom right;
+  margin-left: 10px;
+}
+
+.zip_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top left;
+}
+
+.tar_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top right;
+}
+
+#main_content_wrap {
+  background: #f2f2f2;
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #111;
+}
+
+#main_content {
+  padding-top: 40px;
+}
+
+#footer_wrap {
+  background: #212121;
+}
+
+
+
+/*******************************************************************************
+Small Device Styles
+*******************************************************************************/
+
+@media screen and (max-width: 480px) {
+  body {
+    font-size:14px;
+  }
+
+  #downloads {
+    display: none;
+  }
+
+  .inner {
+    min-width: 320px;
+    max-width: 480px;
+  }
+
+  #project_title {
+  font-size: 32px;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  h3 {
+    font-size: 21px;
+  }
+
+  h4 {
+    font-size: 18px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  code, pre {
+    min-width: 320px;
+    max-width: 480px;
+    font-size: 11px;
+  }
+
+}
