Creation

1 files changed, 10565 insertions, 0 deletions

diff --git a/morphic.js b/morphic.js
new file mode 100644
index 0000000..9bbeaa0
--- /dev/null
+++ b/morphic.js
@@ -0,0 +1,10565 @@
+/*
+
+    morphic.js
+
+    a lively Web-GUI
+    inspired by Squeak
+
+    written by Jens Mšnig
+    jens@moenig.org
+
+    Copyright (C) 2013 by Jens Mšnig
+
+    This file is part of Snap!. 
+
+    Snap! is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as
+    published by the Free Software Foundation, either version 3 of
+    the License, or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+    documentation contents
+    ----------------------
+    I. inheritance hierarchy
+    II. object definition toc
+    III. yet to implement
+    IV. open issues
+    V. browser compatibility
+    VI. the big picture
+    VII. programming guide
+        (1) setting up a web page
+            (a) single world
+            (b) multiple worlds
+            (c) an application
+        (2) manipulating morphs
+        (3) events
+            (a) mouse events
+            (b) context menu
+            (c) dragging
+            (d) dropping
+            (e) keyboard events
+            (f) resize event
+            (g) combined mouse-keyboard events
+            (h) text editing events
+        (4) stepping
+        (5) creating new kinds of morphs
+        (6) development and user modes
+        (7) turtle graphics
+        (8) damage list housekeeping
+        (9) minifying morphic.js
+    VIII. acknowledgements
+    IX. contributors
+
+
+    I. hierarchy
+    -------------
+    the following tree lists all constructors hierarchically,
+    indentation indicating inheritance. Refer to this list to get a
+    contextual overview:
+
+    Color
+    Node
+        Morph
+            BlinkerMorph
+                CursorMorph
+            BouncerMorph*
+            BoxMorph
+                InspectorMorph
+                MenuMorph
+                MouseSensorMorph*
+                SpeechBubbleMorph
+            CircleBoxMorph
+                SliderButtonMorph
+                SliderMorph
+            ColorPaletteMorph
+                GrayPaletteMorph
+            ColorPickerMorph
+            FrameMorph
+                ScrollFrameMorph
+                    ListMorph
+                StringFieldMorph
+                WorldMorph
+            HandleMorph
+            HandMorph
+            PenMorph
+            ShadowMorph
+            StringMorph
+            TextMorph
+            TriggerMorph
+                MenuItemMorph
+    Point
+    Rectangle
+
+
+    II. toc
+    -------
+    the following list shows the order in which all constructors are
+    defined. Use this list to locate code in this document:
+
+
+    Global settings
+    Global functions
+
+    Color
+    Point
+    Rectangle
+    Node
+    Morph
+    ShadowMorph
+    HandleMorph
+    PenMorph
+    ColorPaletteMorph
+    GrayPaletteMorph
+    ColorPickerMorph
+    BlinkerMorph
+    CursorMorph
+    BoxMorph
+    SpeechBubbleMorph
+    CircleBoxMorph
+    SliderButtonMorph
+    SliderMorph
+    MouseSensorMorph*
+    InspectorMorph
+    MenuMorph
+    StringMorph
+    TextMorph
+    TriggerMorph
+    MenuItemMorph
+    FrameMorph
+    ScrollFrameMorph
+    ListMorph
+    StringFieldMorph
+    BouncerMorph*
+    HandMorph
+    WorldMorph
+
+    * included only for demo purposes
+
+
+    III. yet to implement
+    ---------------------
+    - keyboard support for scroll frames and lists
+
+
+    IV. open issues
+    ----------------
+    - blurry shadows don't work well in Chrome
+
+
+    V. browser compatibility
+    ------------------------
+    I have taken great care and considerable effort to make morphic.js
+    runnable and appearing exactly the same on all current browsers
+    available to me:
+
+    - Firefox for Windows
+    - Firefox for Mac
+    - Chrome for Windows (blurry shadows have some issues)
+    - Chrome for Mac
+    - Safari for Windows
+    - safari for Mac
+    - Safari for iOS (mobile)
+    - IE for Windows
+    - Opera for Windows
+    - Opera for Mac
+
+
+    VI. the big picture
+    -------------------
+    Morphic.js is completely based on Canvas and JavaScript, it is just
+    Morphic, nothing else. Morphic.js is very basic and covers only the
+    bare essentials:
+
+        * a stepping mechanism (a time-sharing multiplexer for lively
+          user interaction ontop of a single OS/browser thread)
+        * progressive display updates (only dirty rectangles are
+          redrawn in each display cycle)
+        * a tree structure
+        * a single World per Canvas element (although you can have
+          multiple worlds in multiple Canvas elements on the same web
+          page)
+        * a single Hand per World (but you can support multi-touch
+          events)
+        * a single text entry focus per World
+
+    In its current state morphic.js doesn't support Transforms (you
+    cannot rotate Morphs), but with PenMorph there already is a simple
+    LOGO-like turtle that you can use to draw onto any Morph it is
+    attached to. I'm planning to add special Morphs that support these
+    operations later on, but not for every Morph in the system.
+    Therefore these additions ("sprites" etc.) are likely to be part of
+    other libraries ("microworld.js") in separate files.
+
+    the purpose of morphic.js is to provide a malleable framework that
+    will let me experiment with lively GUIs for my hobby horse, which
+    is drag-and-drop, blocks based programming languages. Those things
+    (BYOB4 - http://byob.berkeley.edu) will be written using morphic.js
+    as a library.
+
+
+    VII. programming guide
+    ----------------------
+    Morphic.js provides a library for lively GUIs inside single HTML
+    Canvas elements. Each such canvas element functions as a "world" in
+    which other visible shapes ("morphs") can be positioned and
+    manipulated, often directly and interactively by the user. Morphs
+    are tree nodes and may contain any number of submorphs ("children").
+
+    All things visible in a morphic World are morphs themselves, i.e.
+    all text rendering, blinking cursors, entry fields, menus, buttons,
+    sliders, windows and dialog boxes etc. are created with morphic.js
+    rather than using HTML DOM elements, and as a consequence can be
+    changed and adjusted by the programmer regardless of proprietary
+    browser behavior.
+
+    Each World has an - invisible - "Hand" resembling the mouse cursor
+    (or the user's finger on touch screens) which handles mouse events,
+    and may also have a keyboardReceiver to handle key events.
+
+    The basic idea of Morphic is to continuously run display cycles and
+    to incrementally update the screen by only redrawing those  World
+    regions    which have been "dirtied" since the last redraw. Before
+    each shape is processed for redisplay it gets the chance to perform
+    a "step" procedure, thus allowing for an illusion of concurrency.
+
+
+    (1) setting up a web page
+    -------------------------
+    Setting up a web page for Morphic always involves three steps:
+    adding one or more Canvas elements, defining one or more worlds,
+    initializing and starting the main loop.
+
+
+    (a) single world
+    -----------------
+    Most commonly you will want your World to fill the browsers's whole
+    client area. This default situation is easiest and most straight
+    forward.
+
+    example html file:
+
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <title>Morphic!</title>
+            <script type="text/javascript" src="morphic.js"></script>
+            <script type="text/javascript">
+                var world;
+
+                window.onload = function () {
+                    world = new WorldMorph(
+                        document.getElementById('world'));
+                    setInterval(loop, 50);
+                };
+
+                function loop() {
+                    world.doOneCycle();
+                }
+            </script>
+        </head>
+        <body>
+            <canvas id="world" tabindex="1" width="800" height="600">
+                <p>Your browser doesn't support canvas.</p>
+            </canvas>
+        </body>
+    </html>
+
+    if you use ScrollFrames or otherwise plan to support mouse wheel
+    scrolling events, you might also add the following inline-CSS
+    attribute to the Canvas element:
+
+        style="position: absolute;"
+
+    which will prevent the World to be scrolled around instead of the
+    elements inside of it in some browsers.
+
+
+    (b) multiple worlds
+    -------------------
+    If you wish to create a web page with more than one world, make
+    sure to prevent each world from auto-filling the whole page and
+    include    it in the main loop. It's also a good idea to give each
+    world its own tabindex:
+
+    example html file:
+
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <title>Morphic!</title>
+            <script type="text/javascript" src="morphic.js"></script>
+            <script type="text/javascript">
+                var world1, world2;
+
+                window.onload = function () {
+                    world1 = new WorldMorph(
+                        document.getElementById('world1'), false);
+                    world2 = new WorldMorph(
+                        document.getElementById('world2'), false);
+                    setInterval(loop, 50);
+                };
+
+                function loop() {
+                    world1.doOneCycle();
+                    world2.doOneCycle();
+                }
+            </script>
+        </head>
+        <body>
+            <p>first world:</p>
+            <canvas id="world1" tabindex="1" width="600" height="400">
+                <p>Your browser doesn't support canvas.</p>
+            </canvas>
+            <p>second world:</p>
+            <canvas id="world2" tabindex="2" width="400" height="600">
+                <p>Your browser doesn't support canvas.</p>
+            </canvas>
+        </body>
+    </html>
+
+
+    (c) an application
+    -------------------
+    Of course, most of the time you don't want to just plain use the
+    standard Morhic World "as is" out of the box, but write your own
+    application (something like Scratch!) in it. For such an
+    application you'll create your own morph prototypes, perhaps
+    assemble your own "window frame" and bring it all to life in a
+    customized World state. the following example creates a simple
+    snake-like mouse drawing game.
+
+    example html file:
+
+    <!DOCTYPE html>
+    <html>
+        <head>
+            <title>touch me!</title>
+            <script type="text/javascript" src="morphic.js"></script>
+            <script type="text/javascript">
+                var worldCanvas, sensor;
+
+                window.onload = function () {
+                    var x, y, w, h;
+
+                    worldCanvas = document.getElementById('world');
+                    world = new WorldMorph(worldCanvas);
+                    world.isDevMode = false;
+                    world.color = new Color();
+
+                    w = 100;
+                    h = 100;
+
+                    x = 0;
+                    y = 0;
+
+                    while ((y * h) < world.height()) {
+                        while ((x * w) < world.width()) {
+                            sensor = new MouseSensorMorph();
+                            sensor.setPosition(new Point(x * w, y * h));
+                            sensor.alpha = 0;
+                            sensor.setExtent(new Point(w, h));
+                            world.add(sensor);
+                            x += 1;
+                        }
+                        x = 0;
+                        y += 1;
+                    }
+                    setInterval(loop, 50);
+                };
+
+                function loop() {
+                    world.doOneCycle();
+                }
+            </script>
+        </head>
+        <body bgcolor='black'>
+            <canvas id="world" width="800" height="600">
+                <p>Your browser doesn't support canvas.</p>
+            </canvas>
+        </body>
+    </html>
+
+    To get an idea how you can craft your own custom morph prototypes
+    I've included two examples which should give you an idea how to add
+    properties, override inherited methods and use the stepping
+    mechanism for "livelyness":
+
+        BouncerMorph
+        MouseSensorMorph
+
+    For the sake of sharing a single file I've included those examples
+    in morphic.js itself. Usually you'll define your additions in a
+    separate file and keep morphic.js untouched.
+
+
+    (2) manipulating morphs
+    -----------------------
+    There are many methods to programmatically manipulate morphs. Among
+    the most important and common ones among all morphs are the
+    following nine:
+
+    * hide()
+    * show()
+
+    * setPosition(aPoint)
+    * setExtent(aPoint)
+    * setColor(aColor)
+
+    * add(submorph)            - attaches submorph ontop
+    * addBack(submorph)        - attaches submorph underneath
+
+    * fullCopy()            - duplication
+    * destroy()                - deletion
+
+
+    (3) events
+    ----------
+    All user (and system) interaction is triggered by events, which are
+    passed on from the root element - the World - to its submorphs. The
+    World contains a list of system (browser) events it reacts to in its
+
+        initEventListeners()
+
+    method. Currently there are
+
+        - mouse
+        - drop
+        - keyboard
+        - (window) resize
+
+    events.
+
+    These system events are dispatched within the morphic World by the
+    World's Hand and its keyboardReceiver (usually the active text
+    cursor).
+
+
+    (a) mouse events:
+    -----------------
+    The Hand dispatches the following mouse events to relevant morphs:
+
+        mouseDownLeft
+        mouseDownRight
+        mouseClickLeft
+        mouseClickRight
+        mouseEnter
+        mouseLeave
+        mouseEnterDragging
+        mouseLeaveDragging
+        mouseMove
+        mouseScroll
+
+    If you wish your morph to react to any such event, simply add a
+    method of the same name as the event, e.g:
+
+        MyMorph.prototype.mouseMove = function(pos) {};
+
+    The only optional parameter of such a method is a Point object
+    indicating the current position of the Hand inside the World's
+    coordinate system.
+
+    Events may be "bubbled" up a morph's owner chain by calling
+
+        this.escalateEvent(functionName, arg)
+
+    in the event handler method's code.
+
+    Likewise, removing the event handler method will render your morph
+    passive to the event in question.
+
+
+    (b) context menu:
+    -----------------
+    By default right-clicking (or single-finger tap-and-hold) on a morph
+    also invokes its context menu (in addition to firing the
+    mouseClickRight event). A morph's context menu can be customized by
+    assigning a Menu instance to its
+
+        customContextMenu
+
+    property, or altogether suppressed by overriding its inherited
+
+        contextMenu()
+
+    method.
+
+
+    (c) dragging:
+    -------------
+    Dragging a morph is initiated when the left mouse button is pressed,
+    held and the mouse is moved.
+
+    You can control whether a morph is draggable by setting its
+
+        isDraggable
+
+    property either to false or true. If a morph isn't draggable itself
+    it will pass the pick-up request up its owner chain. This lets you
+    create draggable composite morphs like Windows, DialogBoxes,
+    Sliders etc.
+
+    Sometimes it is desireable to make "template" shapes which cannot be
+    moved themselves, but from which instead duplicates can be peeled
+    off. This is especially useful for building blocks in construction
+    kits, e.g. the MIT-Scratch palette. Morphic.js lets you control this
+    functionality by setting the
+
+        isTemplate
+
+    property flag to true for any morph whose "isDraggable" property is
+    turned off. When dragging such a Morph the hand will instead grab
+    a duplicate of the template whose "isDraggable" flag is true and
+    whose "isTemplate" flag is false, in other words: a non-template.
+
+    Dragging is indicated by adding a drop shadow to the morph in hand.
+    If a morph follows the hand without displaying a drop shadow it is
+    merely being moved about without changing its parent (owner morph),
+    e.g. when "dragging" a morph handle to resize its owner, or when
+    "dragging" a slider button.
+
+    Right before a morph is picked up its
+
+        prepareToBeGrabbed(handMorph)
+
+    method is invoked, if it is present. Immediately after the pick-up
+    the former parent's
+
+        reactToGrabOf(grabbedMorph)
+
+    method is called, again only if it exists.
+
+    Similar to events, these  methods are optional and don't exist by
+    default. For a simple example of how they can be used to adjust
+    scroll bars in a scroll frame please have a look at their
+    implementation in FrameMorph.
+
+
+    (d) dropping:
+    -------------
+    Dropping is triggered when the left mouse button is either pressed
+    or released while the Hand is dragging a morph.
+
+    Dropping a morph causes it to become embedded in a new owner morph.
+    You can control this embedding behavior by setting the prospective
+    drop target's
+
+        acceptsDrops
+
+    property to either true or false, or by overriding its inherited
+
+        wantsDropOf(aMorph)
+
+    method.
+
+    Right after a morph has been dropped its
+
+        justDropped(handMorph)
+
+    method is called, and its new parent's
+
+        reactToDropOf(droppedMorph, handMorph)
+
+    method is invoked, again only if each method exists.
+
+    Similar to events, these  methods are optional and by default are
+    not present in morphs by default (watch out for inheritance,
+    though!). For a simple example of how they can be used to adjust
+    scroll bars in a scroll frame please have a look at their
+    implementation in FrameMorph.
+
+    Drops of image elements from outside the world canvas are dispatched as
+
+        droppedImage(aCanvas, name)
+        droppedSVG(anImage, name)
+
+    events to interested Morphs at the mouse pointer. If you want you Morph
+    to e.g. import outside images you can add the droppedImage() and / or the
+    droppedSVG() methods to it. The parameter passed to the event handles is
+    a new offscreen canvas element representing a copy of the original image
+    element which can be directly used, e.g. by assigning it to another
+    Morph's image property. In the case of a dropped SVG it is an image
+    element (not a canvas), which has to be rasterized onto a canvas before
+    it can be used. The benefit of handling SVGs as image elements is that
+    rasterization can be deferred until the destination scale is known, taking
+    advantage of SVG's ability for smooth scaling. If instead SVGs are to be
+    rasterized right away, you can set the
+    
+        MorphicPreferences.rasterizeSVGs
+    
+    preference to <true>. In this case dropped SVGs also trigger the
+    droppedImage() event with a canvas containing a rasterized version of the
+    SVG.
+
+    The same applies to drops of audio or text files from outside the world
+    canvas.
+
+    Those are dispatched as
+    
+        droppedAudio(anAudio, name)
+        droppedText(aString, name)
+
+    events to interested Morphs at the mouse pointer.
+    
+    if none of the above content types can be determined, the file contents
+    is dispatched as an ArrayBuffer to interested Morphs:
+
+        droppedBinary(anArrayBuffer, name)
+
+
+    (e) keyboard events
+    -------------------
+    The World dispatches the following key events to its active
+    keyboardReceiver:
+
+        keypress
+        keydown
+        keyup
+
+    Currently the only morph which acts as keyboard receiver is
+    CursorMorph, the basic text editing widget. If you wish to add
+    keyboard support to your morph you need to add event handling
+    methods for
+
+        processKeyPress(event)
+        processKeyDown(event)
+        processKeyUp(event)
+
+    and activate them by assigning your morph to the World's
+
+        keyboardReceiver
+
+    property.
+    
+    Note that processKeyUp() is optional and doesn't have to be present
+    if your morph doesn't require it.
+
+
+    (f) resize event
+    ----------------
+    The Window resize event is handled by the World and allows the
+    World's extent to be adjusted so that it always completely fills
+    the browser's visible page. You can turn off this default behavior
+    by setting the World's
+
+        useFillPage
+
+    property to false.
+
+    Alternatively you can also initialize the World with the
+    useFillPage switch turned off from the beginning by passing the
+    false value as second parameter to the World's constructor:
+
+        world = new World(aCanvas, false);
+
+    Use this when creating a web page with multiple Worlds.
+
+    if "useFillPage" is turned on the World dispatches an
+
+        reactToWorldResize(newBounds)
+
+    events to all of its children (toplevel only), allowing each to
+    adjust to the new World bounds by implementing a corresponding
+    method, the passed argument being the World's new dimensions after
+    completing the resize. By default, the "reactToWorldResize" Method
+    does not exist.
+
+    Example:
+
+    Add the following method to your Morph to let it automatically
+    fill the whole World, but leave a 10 pixel border uncovered:
+
+        MyMorph.prototype.reactToWorldResize = function (rect) {
+            this.changed();
+            this.bounds = rect.insetBy(10);
+            this.drawNew();
+            this.changed();
+        };
+
+
+    (g) combined mouse-keyboard events
+    ----------------------------------
+    Occasionally you'll want an object to react differently to a mouse
+    click or to some other mouse event while the user holds down a key
+    on the keyboard. Such "shift-click", "ctl-click", or "alt-click"
+    events can be implemented by querying the World's
+
+        currentKey
+
+    property inside the function that reacts to the mouse event. This
+    property stores the keyCode of the key that's currently pressed.
+    Once the key is released by the user it reverts to null.
+
+
+    (h) text editing events
+    -----------------------
+    Much of Morphic's "liveliness" comes out of allowing text elements
+    (instances of either single-lined StringMorph or multi-lined TextMorph)
+    to be directly manipulated and edited by users. This requires other
+    objects which may have an interest in the text element's state to react
+    appropriately. Therefore text elements and their manipulators emit
+    a stream of events, mostly by "bubbling" them up the text element's
+    owner chain. Text elements' parents are notified about the following
+    events:
+    
+    Whenever the user presses a key on the keyboard while a text element
+    is being edited, a
+    
+        reactToKeystroke(event)
+
+    is escalated up its parent chain, the "event" parameter being the
+    original one received by the World.
+    
+    Once the user has completed the edit, the following events are
+    dispatched:
+    
+        accept() - <enter> was pressed on a single line of text
+        cancel() - <esc> was pressed on any text element
+
+    Note that "accept" only gets triggered by single-line texte elements,
+    as the <enter> key is used to insert line breaks in multi-line
+    elements. Therefore, whenever a text edit is terminated by the user
+    (accepted, cancelled or otherwise), 
+
+        reactToEdit(StringOrTextMorph)
+
+    is triggered.
+
+    If the MorphicPreference's
+    
+        useSliderForInput
+    
+    setting is turned on, a slider is popped up underneath the currently
+    edited text element letting the user insert numbers out of the given
+    slider range. Whenever this happens, i.e. whenever the slider is moved
+    or while the slider button is pressed, a stream of
+
+        reactToSliderEdit(StringOrTextMorph)
+
+    events is dispatched, allowing for "Bret-Victor" style "live coding"
+    applications.
+
+    In addition to user-initiated events text elements also emit
+    change notifications to their direct parents whenever their drawNew()
+    method is invoked. That way complex Morphs containing text elements
+    get a chance to react if something about the embedded text has been
+    modified programmatically. These events are:
+    
+        layoutChanged() - sent from instances of TextMorph
+        fixLayout() - sent from instances of StringMorph
+
+    they are different so that Morphs which contain both multi-line and
+    single-line text elements can hold them apart.
+
+
+    (4) stepping
+    ------------
+    Stepping is what makes Morphic "magical". Two properties control
+    a morph's stepping behavior: the fps attribute and the step()
+    method.
+
+    By default the
+
+        step()
+
+    method does nothing. As you can see in the examples of BouncerMorph
+    and MouseSensorMorph you can easily override this inherited method
+    to suit your needs.
+
+    By default the step() method is called once per display cycle.
+    Depending on the number of actively stepping morphs and the
+    complexity of your step() methods this can cause quite a strain on
+    your CPU, and also result in your application behaving differently
+    on slower computers than on fast ones.
+
+    setting
+
+        myMorph.fps
+
+    to a number lower than the interval for the main loop lets you free
+    system resources (albeit at the cost of a less responsive or slower
+    behavior for this particular morph).
+
+
+    (5) creating new kinds of morphs
+    --------------------------------
+    The real fun begins when you start to create new kinds of morphs
+    with customized shapes. Imagine, e.g. jigsaw puzzle pieces or
+    musical notes. For this you have to override the default
+
+        drawNew()
+
+    method.
+
+    This method creates a new offscreen Canvas and stores it in
+    the morph's
+
+        image
+
+    property.
+
+    Use the following template for a start:
+
+        MyMorph.prototype.drawNew = function() {
+            var context;
+            this.image = newCanvas(this.extent());
+            context = this.image.getContext('2d');
+            // use context to paint stuff here
+        };
+
+    If your new morph stores or references other morphs outside of the
+    submorph tree in other properties, be sure to also override the
+    default
+
+        copyRecordingReferences()
+
+    method accordingly if you want it to support duplication.
+
+
+    (6) development and user modes
+    ------------------------------
+    When working with Squeak on Scratch or BYOB among the features I
+    like the best and use the most is inspecting what's going on in
+    the World while it is up and running. That's what development mode
+    is for (you could also call it debug mode). In essence development
+    mode controls which context menu shows up. In user mode right
+    clicking (or double finger tapping) a morph invokes its
+
+        customContextMenu
+
+    property, whereas in development mode only the general
+
+        developersMenu()
+
+    method is called and the resulting menu invoked. The developers'
+    menu features Gui-Builder-wise functionality to directly inspect,
+    take apart, reassamble and otherwise manipulate morphs and their
+    contents.
+    
+    Instead of using the "customContextMenu" property you can also
+    assign a more dynamic contextMenu by overriding the general
+    
+        userMenu()
+    
+    method with a customized menu constructor. The difference between
+    the customContextMenu property and the userMenu() method is that
+    the former is also present in development mode and overrides the
+    developersMenu() result. For an example of how to use the
+    customContextMenu property have a look at TextMorph's evaluation
+    menu, which is used for the Inspector's evaluation pane.
+
+    When in development mode you can inspect every Morph's properties
+    with the inspector, including all of its methods. The inspector
+    also lets you add, remove and rename properties, and even edit
+    their values at runtime. Like in a Smalltalk environment the inspect
+    features an evaluation pane into which you can type in arbitrary
+    JavaScript code and evaluate it in the context of the inspectee.
+
+    Use switching between user and development modes while you are
+    developing an application and disable switching to development once
+    you're done and deploying, because generally you don't want to
+    confuse end-users with inspectors and meta-level stuff.
+
+
+    (7) turtle graphics
+    -------------------
+
+    The basic Morphic kernel features a simple LOGO turtle constructor
+    called
+
+        PenMorph
+
+    which you can use to draw onto its parent Morph. By default every
+    Morph in the system (including the World) is able to act as turtle
+    canvas and can display pen trails. Pen trails will be lost whenever
+    the trails morph (the pen's parent) performs a "drawNew()"
+    operation. If you want to create your own pen trails canvas, you
+    may wish to modify its
+
+        penTrails()
+
+    property, so that it keeps a separate offscreen canvas for pen
+    trails (and doesn't loose these on redraw).
+
+    the following properties of PenMorph are relevant for turtle
+    graphics:
+
+        color        - a Color
+        size        - line width of pen trails
+        heading        - degrees
+        isDown        - drawing state
+
+    the following commands can be used to actually draw something:
+
+        up()        - lift the pen up, further movements leave no trails
+        down()        - set down, further movements leave trails
+        clear()        - remove all trails from the current parent
+        forward(n)    - move n steps in the current direction (heading)
+        turn(n)        - turn right n degrees
+
+    Turtle graphics can best be explored interactively by creating a
+    new PenMorph object and by manipulating it with the inspector
+    widget.
+
+    NOTE: PenMorph has a special optimization for recursive operations
+    called
+
+        warp(function)
+
+    You can significantly speed up recursive ops and increase the depth
+    of recursion that's displayable by wrapping WARP around your
+    recursive function call:
+
+    example:
+
+        myPen.warp(function () {
+            myPen.tree(12, 120, 20);
+        })
+
+    will be much faster than just invoking the tree function, because it
+    prevents the parent's parent from keeping track of every single line
+    segment and instead redraws the outcome in a single pass.
+
+
+    (8) damage list housekeeping
+    ----------------------------
+    Morphic's progressive display update comes at the cost of having to
+    cycle through a list of "broken rectangles" every display cycle. If
+    this list gets very long working this damage list can lead to a
+    seemingly dramatic slow-down of the Morphic system. Typically this
+    occurs when updating the layout of complex Morphs with very many
+    submorphs, e.g. when resizing an inspector window.
+    
+    An effective strategy to cope with this is to use the inherited
+    
+        trackChanges
+        
+    property of the Morph prototype for damage list housekeeping.
+
+    The trackChanges property of the Morph prototype is a Boolean switch
+    that determines whether the World's damage list ('broken' rectangles)
+    tracks changes. By default the switch is always on. If set to false
+    changes are not stored. This can be very useful for housekeeping of
+    the damage list in situations where a large number of (sub-) morphs
+    are changed more or less at once. Instead of keeping track of every
+    single submorph's changes tremendous performance improvements can be
+    achieved by setting the trackChanges flag to false before propagating
+    the layout changes, setting it to true again and then storing the full
+    bounds of the surrounding morph. An an example refer to the
+    
+        moveBy()
+    
+    method of HandMorph, and to the
+
+        fixLayout()
+        
+    method of InspectorMorph, or the
+    
+        startLayout()
+        endLayout()
+
+    methods of SyntaxElementMorph in the Snap application.    
+    
+
+    (9) minifying morphic.js
+    ------------------------
+    Coming from Smalltalk and being a Squeaker at heart I am a huge fan
+    of browsing the code itself to make sense of it. Therefore I have
+    included this documentation and (too little) inline comments so all
+    you need to get going is this very file.
+
+    Nowadays with live streaming HD video even on mobile phones 250 KB
+    shouldn't be a big strain on bandwith, still minifying and even
+    compressing morphic.js down do about 100 KB may sometimes improve
+    performance in production use.
+
+    Being an attorney-at-law myself you programmer folk keep harassing
+    me with rabulistic nitpickings about free software licenses. I'm
+    releasing morphic.js under an AGPL license. Therefore please make
+    sure to adhere to that license in any minified or compressed version.
+
+
+    VIII. acknowledgements
+    ----------------------
+    The original Morphic was designed and written by Randy Smith and
+    John Maloney for the SELF programming language, and later ported to
+    Squeak (Smalltalk) by John Maloney and Dan Ingalls, who has also
+    ported it to JavaScript (the Lively Kernel), once again setting
+    a "Gold Standard" for self sustaining systems which morphic.js
+    cannot and does not aspire to meet.
+
+    This Morphic implementation for JavaScript is not a direct port of
+    Squeak's Morphic, but still many individual functions have been
+    ported almost literally from Squeak, sometimes even including their
+    comments, e.g. the morph duplication mechanism fullCopy(). Squeak
+    has been a treasure trove, and if morphic.js looks, feels and
+    smells a lot like Squeak, I'll take it as a compliment.
+
+    Evelyn Eastmond has inspired and encouraged me with her wonderful
+    implementation of DesignBlocksJS. Thanks for sharing code, ideas
+    and enthusiasm for programming.
+
+    John Maloney has been my mentor and my source of inspiration for
+    these Morphic experiments. Thanks for the critique, the suggestions
+    and explanations for all things Morphic and for being my all time
+    programming hero.
+
+    I have originally written morphic.js in Florian Balmer's Notepad2
+    editor for Windows and later switched to Apple's Dashcode. I've also
+    come to depend on both Douglas Crockford's JSLint, Mozilla's Firebug
+    and Google's Chrome to get it right.
+
+
+    IX. contributors
+    ----------------------
+    Joe Otto found and fixed many early bugs and taught me some tricks.
+    Nathan Dinsmore contributed mouse wheel scrolling, cached
+    background texture handling and countless bug fixes.
+    Ian Reynolds contributed backspace key handling for Chrome.
+    Davide Della Casa contributed performance optimizations for Firefox.
+
+    - Jens Mšnig
+*/
+
+// Global settings /////////////////////////////////////////////////////
+
+/*global window, HTMLCanvasElement, getMinimumFontHeight, FileReader, Audio,
+FileList, getBlurredShadowSupport*/
+
+var morphicVersion = '2013-March-11';
+var modules = {}; // keep track of additional loaded modules
+var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug
+
+var standardSettings = {
+    minimumFontHeight: getMinimumFontHeight(), // browser settings
+    globalFontFamily: '',
+    menuFontName: 'sans-serif',
+    menuFontSize: 12,
+    bubbleHelpFontSize: 10,
+    prompterFontName: 'sans-serif',
+    prompterFontSize: 12,
+    prompterSliderSize: 10,
+    handleSize: 15,
+    scrollBarSize: 12,
+    mouseScrollAmount: 40,
+    useSliderForInput: false,
+    useVirtualKeyboard: true,
+    rasterizeSVGs: false
+};
+
+var touchScreenSettings = {
+    minimumFontHeight: standardSettings.minimumFontHeight,
+    globalFontFamily: '',
+    menuFontName: 'sans-serif',
+    menuFontSize: 24,
+    bubbleHelpFontSize: 18,
+    prompterFontName: 'sans-serif',
+    prompterFontSize: 24,
+    prompterSliderSize: 20,
+    handleSize: 26,
+    scrollBarSize: 24,
+    mouseScrollAmount: 40,
+    useSliderForInput: true,
+    useVirtualKeyboard: true,
+    rasterizeSVGs: false
+};
+
+var MorphicPreferences = standardSettings;
+
+// Global Functions ////////////////////////////////////////////////////
+
+function nop() {
+    // do explicitly nothing
+    return null;
+}
+
+function localize(string) {
+    // override this function with custom localizations
+    return string;
+}
+
+function isNil(thing) {
+    return thing === undefined || thing === null;
+}
+
+function contains(list, element) {
+    // answer true if element is a member of list
+    return list.some(function (any) {
+        return any === element;
+    });
+}
+
+function detect(list, predicate) {
+    // answer the first element of list for which predicate evaluates
+    // true, otherwise answer null
+    var i, size = list.length;
+    for (i = 0; i < size; i += 1) {
+        if (predicate.call(null, list[i])) {
+            return list[i];
+        }
+    }
+    return null;
+}
+
+function sizeOf(object) {
+    // answer the number of own properties
+    var size = 0, key;
+    for (key in object) {
+        if (object.hasOwnProperty(key)) {
+            size += 1;
+        }
+    }
+    return size;
+}
+
+function isString(target) {
+    return typeof target === 'string' || target instanceof String;
+}
+
+function isObject(target) {
+    return target !== null &&
+        (typeof target === 'object' || target instanceof Object);
+}
+
+function radians(degrees) {
+    return degrees * Math.PI / 180;
+}
+
+function degrees(radians) {
+    return radians * 180 / Math.PI;
+}
+
+function fontHeight(height) {
+    var minHeight = Math.max(height, MorphicPreferences.minimumFontHeight);
+    return minHeight * 1.2; // assuming 1/5 font size for ascenders
+}
+
+function newCanvas(extentPoint) {
+    // answer a new empty instance of Canvas, don't display anywhere
+    var canvas, ext;
+    ext = extentPoint || {x: 0, y: 0};
+    canvas = document.createElement('canvas');
+    canvas.width = ext.x;
+    canvas.height = ext.y;
+    return canvas;
+}
+
+function getMinimumFontHeight() {
+    // answer the height of the smallest font renderable in pixels
+    var str = 'I',
+        size = 50,
+        canvas = document.createElement('canvas'),
+        ctx,
+        maxX,
+        data,
+        x,
+        y;
+    canvas.width = size;
+    canvas.height = size;
+    ctx = canvas.getContext('2d');
+    ctx.font = '1px serif';
+    maxX = ctx.measureText(str).width;
+    ctx.fillStyle = 'black';
+    ctx.textBaseline = 'bottom';
+    ctx.fillText(str, 0, size);
+    for (y = 0; y < size; y += 1) {
+        for (x = 0; x < maxX; x += 1) {
+            data = ctx.getImageData(x, y, 1, 1);
+            if (data.data[3] !== 0) {
+                return size - y + 1;
+            }
+        }
+    }
+    return 0;
+}
+
+function getBlurredShadowSupport() {
+    // check for Chrome issue 90001
+    // http://code.google.com/p/chromium/issues/detail?id=90001
+    var source, target, ctx;
+    source = document.createElement('canvas');
+    source.width = 10;
+    source.height = 10;
+    ctx = source.getContext('2d');
+    ctx.fillStyle = 'rgb(255, 0, 0)';
+    ctx.beginPath();
+    ctx.arc(5, 5, 5, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fill();
+    target = document.createElement('canvas');
+    target.width = 10;
+    target.height = 10;
+    ctx = target.getContext('2d');
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = 'rgba(0, 0, 255, 1)';
+    ctx.drawImage(source, 0, 0);
+    return ctx.getImageData(0, 0, 1, 1).data[3] ? true : false;
+}
+
+function getDocumentPositionOf(aDOMelement) {
+    // answer the absolute coordinates of a DOM element in the document
+    var pos, offsetParent;
+    if (aDOMelement === null) {
+        return {x: 0, y: 0};
+    }
+    pos = {x: aDOMelement.offsetLeft, y: aDOMelement.offsetTop};
+    offsetParent = aDOMelement.offsetParent;
+    while (offsetParent !== null) {
+        pos.x += offsetParent.offsetLeft;
+        pos.y += offsetParent.offsetTop;
+        if (offsetParent !== document.body &&
+                offsetParent !== document.documentElement) {
+            pos.x -= offsetParent.scrollLeft;
+            pos.y -= offsetParent.scrollTop;
+        }
+        offsetParent = offsetParent.offsetParent;
+    }
+    return pos;
+}
+
+function clone(target) {
+    // answer a new instance of target's type
+    if (typeof target === 'object') {
+        var Clone = function () {};
+        Clone.prototype = target;
+        return new Clone();
+    }
+    return target;
+}
+
+function copy(target) {
+    // answer a shallow copy of target
+    var value, c, property;
+
+    if (typeof target !== 'object') {
+        return target;
+    }
+    value = target.valueOf();
+    if (target !== value) {
+        return new target.constructor(value);
+    }
+    if (target instanceof target.constructor &&
+            target.constructor !== Object) {
+        c = clone(target.constructor.prototype);
+        for (property in target) {
+            if (target.hasOwnProperty(property)) {
+                c[property] = target[property];
+            }
+        }
+    } else {
+        c = {};
+        for (property in target) {
+            if (!c[property]) {
+                c[property] = target[property];
+            }
+        }
+    }
+    return c;
+}
+
+// Colors //////////////////////////////////////////////////////////////
+
+// Color instance creation:
+
+function Color(r, g, b, a) {
+    // all values are optional, just (r, g, b) is fine
+    this.r = r || 0;
+    this.g = g || 0;
+    this.b = b || 0;
+    this.a = a || ((a === 0) ? 0 : 1);
+}
+
+// Color string representation: e.g. 'rgba(255,165,0,1)'
+
+Color.prototype.toString = function () {
+    return 'rgba(' +
+        Math.round(this.r) + ',' +
+        Math.round(this.g) + ',' +
+        Math.round(this.b) + ',' +
+        this.a + ')';
+};
+
+// Color copying:
+
+Color.prototype.copy = function () {
+    return new Color(
+        this.r,
+        this.g,
+        this.b,
+        this.a
+    );
+};
+
+// Color comparison:
+
+Color.prototype.eq = function (aColor) {
+    // ==
+    return aColor &&
+        this.r === aColor.r &&
+        this.g === aColor.g &&
+        this.b === aColor.b;
+};
+
+// Color conversion (hsv):
+
+Color.prototype.hsv = function () {
+    // ignore alpha
+    var max, min, h, s, v, d,
+        rr = this.r / 255,
+        gg = this.g / 255,
+        bb = this.b / 255;
+    max = Math.max(rr, gg, bb);
+    min = Math.min(rr, gg, bb);
+    h = max;
+    s = max;
+    v = max;
+    d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+        h = 0;
+    } else {
+        switch (max) {
+        case rr:
+            h = (gg - bb) / d + (gg < bb ? 6 : 0);
+            break;
+        case gg:
+            h = (bb - rr) / d + 2;
+            break;
+        case bb:
+            h = (rr - gg) / d + 4;
+            break;
+        }
+        h /= 6;
+    }
+    return [h, s, v];
+};
+
+Color.prototype.set_hsv = function (h, s, v) {
+    // ignore alpha, h, s and v are to be within [0, 1]
+    var i, f, p, q, t;
+    i = Math.floor(h * 6);
+    f = h * 6 - i;
+    p = v * (1 - s);
+    q = v * (1 - f * s);
+    t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+    case 0:
+        this.r = v;
+        this.g = t;
+        this.b = p;
+        break;
+    case 1:
+        this.r = q;
+        this.g = v;
+        this.b = p;
+        break;
+    case 2:
+        this.r = p;
+        this.g = v;
+        this.b = t;
+        break;
+    case 3:
+        this.r = p;
+        this.g = q;
+        this.b = v;
+        break;
+    case 4:
+        this.r = t;
+        this.g = p;
+        this.b = v;
+        break;
+    case 5:
+        this.r = v;
+        this.g = p;
+        this.b = q;
+        break;
+    }
+
+    this.r *= 255;
+    this.g *= 255;
+    this.b *= 255;
+
+};
+
+// Color mixing:
+
+Color.prototype.mixed = function (proportion, otherColor) {
+    // answer a copy of this color mixed with another color, ignore alpha
+    var frac1 = Math.min(Math.max(proportion, 0), 1),
+        frac2 = 1 - frac1;
+    return new Color(
+        this.r * frac1 + otherColor.r * frac2,
+        this.g * frac1 + otherColor.g * frac2,
+        this.b * frac1 + otherColor.b * frac2
+    );
+};
+
+Color.prototype.darker = function (percent) {
+    // return an rgb-interpolated darker copy of me, ignore alpha
+    var fract = 0.8333;
+    if (percent) {
+        fract = (100 - percent) / 100;
+    }
+    return this.mixed(fract, new Color(0, 0, 0));
+};
+
+Color.prototype.lighter = function (percent) {
+    // return an rgb-interpolated lighter copy of me, ignore alpha
+    var fract = 0.8333;
+    if (percent) {
+        fract = (100 - percent) / 100;
+    }
+    return this.mixed(fract, new Color(255, 255, 255));
+};
+
+Color.prototype.dansDarker = function () {
+    // return an hsv-interpolated darker copy of me, ignore alpha
+    var hsv = this.hsv(),
+        result = new Color(),
+        vv = Math.max(hsv[2] - 0.16, 0);
+    result.set_hsv(hsv[0], hsv[1], vv);
+    return result;
+};
+
+// Points //////////////////////////////////////////////////////////////
+
+// Point instance creation:
+
+function Point(x, y) {
+    this.x = x || 0;
+    this.y = y || 0;
+}
+
+// Point string representation: e.g. '12@68'
+
+Point.prototype.toString = function () {
+    return Math.round(this.x.toString()) +
+        '@' + Math.round(this.y.toString());
+};
+
+// Point copying:
+
+Point.prototype.copy = function () {
+    return new Point(this.x, this.y);
+};
+
+// Point comparison:
+
+Point.prototype.eq = function (aPoint) {
+    // ==
+    return this.x === aPoint.x && this.y === aPoint.y;
+};
+
+Point.prototype.lt = function (aPoint) {
+    // <
+    return this.x < aPoint.x && this.y < aPoint.y;
+};
+
+Point.prototype.gt = function (aPoint) {
+    // >
+    return this.x > aPoint.x && this.y > aPoint.y;
+};
+
+Point.prototype.ge = function (aPoint) {
+    // >=
+    return this.x >= aPoint.x && this.y >= aPoint.y;
+};
+
+Point.prototype.le = function (aPoint) {
+    // <=
+    return this.x <= aPoint.x && this.y <= aPoint.y;
+};
+
+Point.prototype.max = function (aPoint) {
+    return new Point(Math.max(this.x, aPoint.x),
+        Math.max(this.y, aPoint.y));
+};
+
+Point.prototype.min = function (aPoint) {
+    return new Point(Math.min(this.x, aPoint.x),
+        Math.min(this.y, aPoint.y));
+};
+
+// Point conversion:
+
+Point.prototype.round = function () {
+    return new Point(Math.round(this.x), Math.round(this.y));
+};
+
+Point.prototype.abs = function () {
+    return new Point(Math.abs(this.x), Math.abs(this.y));
+};
+
+Point.prototype.neg = function () {
+    return new Point(-this.x, -this.y);
+};
+
+Point.prototype.mirror = function () {
+    return new Point(this.y, this.x);
+};
+
+Point.prototype.floor = function () {
+    return new Point(
+        Math.max(Math.floor(this.x), 0),
+        Math.max(Math.floor(this.y), 0)
+    );
+};
+
+Point.prototype.ceil = function () {
+    return new Point(Math.ceil(this.x), Math.ceil(this.y));
+};
+
+// Point arithmetic:
+
+Point.prototype.add = function (other) {
+    if (other instanceof Point) {
+        return new Point(this.x + other.x, this.y + other.y);
+    }
+    return new Point(this.x + other, this.y + other);
+};
+
+Point.prototype.subtract = function (other) {
+    if (other instanceof Point) {
+        return new Point(this.x - other.x, this.y - other.y);
+    }
+    return new Point(this.x - other, this.y - other);
+};
+
+Point.prototype.multiplyBy = function (other) {
+    if (other instanceof Point) {
+        return new Point(this.x * other.x, this.y * other.y);
+    }
+    return new Point(this.x * other, this.y * other);
+};
+
+Point.prototype.divideBy = function (other) {
+    if (other instanceof Point) {
+        return new Point(this.x / other.x, this.y / other.y);
+    }
+    return new Point(this.x / other, this.y / other);
+};
+
+Point.prototype.floorDivideBy = function (other) {
+    if (other instanceof Point) {
+        return new Point(Math.floor(this.x / other.x),
+            Math.floor(this.y / other.y));
+    }
+    return new Point(Math.floor(this.x / other),
+        Math.floor(this.y / other));
+};
+
+// Point polar coordinates:
+
+Point.prototype.r = function () {
+    var t = (this.multiplyBy(this));
+    return Math.sqrt(t.x + t.y);
+};
+
+Point.prototype.degrees = function () {
+/*
+    answer the angle I make with origin in degrees.
+    Right is 0, down is 90
+*/
+    var tan, theta;
+
+    if (this.x === 0) {
+        if (this.y >= 0) {
+            return 90;
+        }
+        return 270;
+    }
+    tan = this.y / this.x;
+    theta = Math.atan(tan);
+    if (this.x >= 0) {
+        if (this.y >= 0) {
+            return degrees(theta);
+        }
+        return 360 + (degrees(theta));
+    }
+    return 180 + degrees(theta);
+};
+
+Point.prototype.theta = function () {
+/*
+    answer the angle I make with origin in radians.
+    Right is 0, down is 90
+*/
+    var tan, theta;
+
+    if (this.x === 0) {
+        if (this.y >= 0) {
+            return radians(90);
+        }
+        return radians(270);
+    }
+    tan = this.y / this.x;
+    theta = Math.atan(tan);
+    if (this.x >= 0) {
+        if (this.y >= 0) {
+            return theta;
+        }
+        return radians(360) + theta;
+    }
+    return radians(180) + theta;
+};
+
+// Point functions:
+
+Point.prototype.crossProduct = function (aPoint) {
+    return this.multiplyBy(aPoint.mirror());
+};
+
+Point.prototype.distanceTo = function (aPoint) {
+    return (aPoint.subtract(this)).r();
+};
+
+Point.prototype.rotate = function (direction, center) {
+    // direction must be 'right', 'left' or 'pi'
+    var offset = this.subtract(center);
+    if (direction === 'right') {
+        return new Point(-offset.y, offset.y).add(center);
+    }
+    if (direction === 'left') {
+        return new Point(offset.y, -offset.y).add(center);
+    }
+    // direction === 'pi'
+    return center.subtract(offset);
+};
+
+Point.prototype.flip = function (direction, center) {
+    // direction must be 'vertical' or 'horizontal'
+    if (direction === 'vertical') {
+        return new Point(this.x, center.y * 2 - this.y);
+    }
+    // direction === 'horizontal'
+    return new Point(center.x * 2 - this.x, this.y);
+};
+
+Point.prototype.distanceAngle = function (dist, angle) {
+    var deg = angle, x, y;
+    if (deg > 270) {
+        deg = deg - 360;
+    } else if (deg < -270) {
+        deg = deg + 360;
+    }
+    if (-90 <= deg && deg <= 90) {
+        x = Math.sin(radians(deg)) * dist;
+        y = Math.sqrt((dist * dist) - (x * x));
+        return new Point(x + this.x, this.y - y);
+    }
+    x = Math.sin(radians(180 - deg)) * dist;
+    y = Math.sqrt((dist * dist) - (x * x));
+    return new Point(x + this.x, this.y + y);
+};
+
+// Point transforming:
+
+Point.prototype.scaleBy = function (scalePoint) {
+    return this.multiplyBy(scalePoint);
+};
+
+Point.prototype.translateBy = function (deltaPoint) {
+    return this.add(deltaPoint);
+};
+
+Point.prototype.rotateBy = function (angle, centerPoint) {
+    var center = centerPoint || new Point(0, 0),
+        p = this.subtract(center),
+        r = p.r(),
+        theta = angle - p.theta();
+    return new Point(
+        center.x + (r * Math.cos(theta)),
+        center.y - (r * Math.sin(theta))
+    );
+};
+
+// Point conversion:
+
+Point.prototype.asArray = function () {
+    return [this.x, this.y];
+};
+
+// Rectangles //////////////////////////////////////////////////////////
+
+// Rectangle instance creation:
+
+function Rectangle(left, top, right, bottom) {
+    this.init(new Point((left || 0), (top || 0)),
+            new Point((right || 0), (bottom || 0)));
+}
+
+Rectangle.prototype.init = function (originPoint, cornerPoint) {
+    this.origin = originPoint;
+    this.corner = cornerPoint;
+};
+
+// Rectangle string representation: e.g. '[0@0 | 160@80]'
+
+Rectangle.prototype.toString = function () {
+    return '[' + this.origin.toString() + ' | ' +
+        this.extent().toString() + ']';
+};
+
+// Rectangle copying:
+
+Rectangle.prototype.copy = function () {
+    return new Rectangle(
+        this.left(),
+        this.top(),
+        this.right(),
+        this.bottom()
+    );
+};
+
+// creating Rectangle instances from Points:
+
+Point.prototype.corner = function (cornerPoint) {
+    // answer a new Rectangle
+    return new Rectangle(
+        this.x,
+        this.y,
+        cornerPoint.x,
+        cornerPoint.y
+    );
+};
+
+Point.prototype.rectangle = function (aPoint) {
+    // answer a new Rectangle
+    var org, crn;
+    org = this.min(aPoint);
+    crn = this.max(aPoint);
+    return new Rectangle(org.x, org.y, crn.x, crn.y);
+};
+
+Point.prototype.extent = function (aPoint) {
+    //answer a new Rectangle
+    var crn = this.add(aPoint);
+    return new Rectangle(this.x, this.y, crn.x, crn.y);
+};
+
+// Rectangle accessing - setting:
+
+Rectangle.prototype.setTo = function (left, top, right, bottom) {
+    // note: all inputs are optional and can be omitted
+
+    this.origin = new Point(
+        left || ((left === 0) ? 0 : this.left()),
+        top || ((top === 0) ? 0 : this.top())
+    );
+
+    this.corner = new Point(
+        right || ((right === 0) ? 0 : this.right()),
+        bottom || ((bottom === 0) ? 0 : this.bottom())
+    );
+};
+
+// Rectangle accessing - getting:
+
+Rectangle.prototype.area = function () {
+    //requires width() and height() to be defined
+    var w = this.width();
+    if (w < 0) {
+        return 0;
+    }
+    return Math.max(w * this.height(), 0);
+};
+
+Rectangle.prototype.bottom = function () {
+    return this.corner.y;
+};
+
+Rectangle.prototype.bottomCenter = function () {
+    return new Point(this.center().x, this.bottom());
+};
+
+Rectangle.prototype.bottomLeft = function () {
+    return new Point(this.origin.x, this.corner.y);
+};
+
+Rectangle.prototype.bottomRight = function () {
+    return this.corner.copy();
+};
+
+Rectangle.prototype.boundingBox = function () {
+    return this;
+};
+
+Rectangle.prototype.center = function () {
+    return this.origin.add(
+        this.corner.subtract(this.origin).floorDivideBy(2)
+    );
+};
+
+Rectangle.prototype.corners = function () {
+    return [this.origin,
+        this.bottomLeft(),
+        this.corner,
+        this.topRight()];
+};
+
+Rectangle.prototype.extent = function () {
+    return this.corner.subtract(this.origin);
+};
+
+Rectangle.prototype.height = function () {
+    return this.corner.y - this.origin.y;
+};
+
+Rectangle.prototype.left = function () {
+    return this.origin.x;
+};
+
+Rectangle.prototype.leftCenter = function () {
+    return new Point(this.left(), this.center().y);
+};
+
+Rectangle.prototype.right = function () {
+    return this.corner.x;
+};
+
+Rectangle.prototype.rightCenter = function () {
+    return new Point(this.right(), this.center().y);
+};
+
+Rectangle.prototype.top = function () {
+    return this.origin.y;
+};
+
+Rectangle.prototype.topCenter = function () {
+    return new Point(this.center().x, this.top());
+};
+
+Rectangle.prototype.topLeft = function () {
+    return this.origin;
+};
+
+Rectangle.prototype.topRight = function () {
+    return new Point(this.corner.x, this.origin.y);
+};
+
+Rectangle.prototype.width = function () {
+    return this.corner.x - this.origin.x;
+};
+
+Rectangle.prototype.position = function () {
+    return this.origin;
+};
+
+// Rectangle comparison:
+
+Rectangle.prototype.eq = function (aRect) {
+    return this.origin.eq(aRect.origin) &&
+        this.corner.eq(aRect.corner);
+};
+
+Rectangle.prototype.abs = function () {
+    var newOrigin, newCorner;
+
+    newOrigin = this.origin.abs();
+    newCorner = this.corner.max(newOrigin);
+    return newOrigin.corner(newCorner);
+};
+
+// Rectangle functions:
+
+Rectangle.prototype.insetBy = function (delta) {
+    // delta can be either a Point or a Number
+    var result = new Rectangle();
+    result.origin = this.origin.add(delta);
+    result.corner = this.corner.subtract(delta);
+    return result;
+};
+
+Rectangle.prototype.expandBy = function (delta) {
+    // delta can be either a Point or a Number
+    var result = new Rectangle();
+    result.origin = this.origin.subtract(delta);
+    result.corner = this.corner.add(delta);
+    return result;
+};
+
+Rectangle.prototype.growBy = function (delta) {
+    // delta can be either a Point or a Number
+    var result = new Rectangle();
+    result.origin = this.origin.copy();
+    result.corner = this.corner.add(delta);
+    return result;
+};
+
+Rectangle.prototype.intersect = function (aRect) {
+    var result = new Rectangle();
+    result.origin = this.origin.max(aRect.origin);
+    result.corner = this.corner.min(aRect.corner);
+    return result;
+};
+
+Rectangle.prototype.merge = function (aRect) {
+    var result = new Rectangle();
+    result.origin = this.origin.min(aRect.origin);
+    result.corner = this.corner.max(aRect.corner);
+    return result;
+};
+
+Rectangle.prototype.round = function () {
+    return this.origin.round().corner(this.corner.round());
+};
+
+Rectangle.prototype.spread = function () {
+    // round me by applying floor() to my origin and ceil() to my corner
+    return this.origin.floor().corner(this.corner.ceil());
+};
+
+Rectangle.prototype.amountToTranslateWithin = function (aRect) {
+/*
+    Answer a Point, delta, such that self + delta is forced within
+    aRectangle. when all of me cannot be made to fit, prefer to keep
+    my topLeft inside. Taken from Squeak.
+*/
+    var dx, dy;
+
+    if (this.right() > aRect.right()) {
+        dx = aRect.right() - this.right();
+    }
+    if (this.bottom() > aRect.bottom()) {
+        dy = aRect.bottom() - this.bottom();
+    }
+    if ((this.left() + dx) < aRect.left()) {
+        dx = aRect.left() - this.right();
+    }
+    if ((this.top() + dy) < aRect.top()) {
+        dy = aRect.top() - this.top();
+    }
+    return new Point(dx, dy);
+};
+
+// Rectangle testing:
+
+Rectangle.prototype.containsPoint = function (aPoint) {
+    return this.origin.le(aPoint) && aPoint.lt(this.corner);
+};
+
+Rectangle.prototype.containsRectangle = function (aRect) {
+    return aRect.origin.gt(this.origin) &&
+        aRect.corner.lt(this.corner);
+};
+
+Rectangle.prototype.intersects = function (aRect) {
+    var ro = aRect.origin, rc = aRect.corner;
+    return (rc.x >= this.origin.x) &&
+        (rc.y >= this.origin.y) &&
+        (ro.x <= this.corner.x) &&
+        (ro.y <= this.corner.y);
+};
+
+// Rectangle transforming:
+
+Rectangle.prototype.scaleBy = function (scale) {
+    // scale can be either a Point or a scalar
+    var o = this.origin.multiplyBy(scale),
+        c = this.corner.multiplyBy(scale);
+    return new Rectangle(o.x, o.y, c.x, c.y);
+};
+
+Rectangle.prototype.translateBy = function (factor) {
+    // factor can be either a Point or a scalar
+    var o = this.origin.add(factor),
+        c = this.corner.add(factor);
+    return new Rectangle(o.x, o.y, c.x, c.y);
+};
+
+// Rectangle converting:
+
+Rectangle.prototype.asArray = function () {
+    return [this.left(), this.top(), this.right(), this.bottom()];
+};
+
+Rectangle.prototype.asArray_xywh = function () {
+    return [this.left(), this.top(), this.width(), this.height()];
+};
+
+// Nodes ///////////////////////////////////////////////////////////////
+
+// Node instance creation:
+
+function Node(parent, childrenArray) {
+    this.init(parent || null, childrenArray || []);
+}
+
+Node.prototype.init = function (parent, childrenArray) {
+    this.parent = parent || null;
+    this.children = childrenArray || [];
+};
+
+// Node string representation: e.g. 'a Node[3]'
+
+Node.prototype.toString = function () {
+    return 'a Node' + '[' + this.children.length.toString() + ']';
+};
+
+// Node accessing:
+
+Node.prototype.addChild = function (aNode) {
+    this.children.push(aNode);
+    aNode.parent = this;
+};
+
+Node.prototype.addChildFirst = function (aNode) {
+    this.children.splice(0, null, aNode);
+    aNode.parent = this;
+};
+
+Node.prototype.removeChild = function (aNode) {
+    var idx = this.children.indexOf(aNode);
+    if (idx !== -1) {
+        this.children.splice(idx, 1);
+    }
+};
+
+// Node functions:
+
+Node.prototype.root = function () {
+    if (this.parent === null) {
+        return this;
+    }
+    return this.parent.root();
+};
+
+Node.prototype.depth = function () {
+    if (this.parent === null) {
+        return 0;
+    }
+    return this.parent.depth() + 1;
+};
+
+Node.prototype.allChildren = function () {
+    // includes myself
+    var result = [this];
+    this.children.forEach(function (child) {
+        result = result.concat(child.allChildren());
+    });
+    return result;
+};
+
+Node.prototype.forAllChildren = function (aFunction) {
+    if (this.children.length > 0) {
+        this.children.forEach(function (child) {
+            child.forAllChildren(aFunction);
+        });
+    }
+    aFunction.call(null, this);
+};
+
+Node.prototype.allLeafs = function () {
+    var result = [];
+    this.allChildren().forEach(function (element) {
+        if (element.children.length === 0) {
+            result.push(element);
+        }
+    });
+    return result;
+};
+
+Node.prototype.allParents = function () {
+    // includes myself
+    var result = [this];
+    if (this.parent !== null) {
+        result = result.concat(this.parent.allParents());
+    }
+    return result;
+};
+
+Node.prototype.siblings = function () {
+    var myself = this;
+    if (this.parent === null) {
+        return [];
+    }
+    return this.parent.children.filter(function (child) {
+        return child !== myself;
+    });
+};
+
+Node.prototype.parentThatIsA = function (constructor) {
+    // including myself
+    if (this instanceof constructor) {
+        return this;
+    }
+    if (!this.parent) {
+        return null;
+    }
+    return this.parent.parentThatIsA(constructor);
+};
+
+Node.prototype.parentThatIsAnyOf = function (constructors) {
+    // including myself
+    var yup = false,
+        myself = this;
+    constructors.forEach(function (each) {
+        if (myself.constructor === each) {
+            yup = true;
+            return;
+        }
+    });
+    if (yup) {
+        return this;
+    }
+    if (!this.parent) {
+        return null;
+    }
+    return this.parent.parentThatIsAnyOf(constructors);
+};
+
+// Morphs //////////////////////////////////////////////////////////////
+
+// Morph: referenced constructors
+
+var Morph;
+var WorldMorph;
+var HandMorph;
+var ShadowMorph;
+var FrameMorph;
+var MenuMorph;
+var HandleMorph;
+var StringFieldMorph;
+var ColorPickerMorph;
+var SliderMorph;
+var ScrollFrameMorph;
+var InspectorMorph;
+var StringMorph;
+var TextMorph;
+
+// Morph inherits from Node:
+
+Morph.prototype = new Node();
+Morph.prototype.constructor = Morph;
+Morph.uber = Node.prototype;
+
+// Morph settings:
+
+/*
+    damage list housekeeping
+
+    the trackChanges property of the Morph prototype is a Boolean switch
+    that determines whether the World's damage list ('broken' rectangles)
+    tracks changes. By default the switch is always on. If set to false
+    changes are not stored. This can be very useful for housekeeping of
+    the damage list in situations where a large number of (sub-) morphs
+    are changed more or less at once. Instead of keeping track of every
+    single submorph's changes tremendous performance improvements can be
+    achieved by setting the trackChanges flag to false before propagating
+    the layout changes, setting it to true again and then storing the full
+    bounds of the surrounding morph. An an example refer to the
+
+        fixLayout()
+        
+    method of InspectorMorph, or the
+    
+        startLayout()
+        endLayout()
+
+    methods of SyntaxElementMorph in the Snap application.
+*/
+
+Morph.prototype.trackChanges = true;
+Morph.prototype.shadowBlur = 4;
+
+// Morph instance creation:
+
+function Morph() {
+    this.init();
+}
+
+// Morph initialization:
+
+Morph.prototype.init = function () {
+    Morph.uber.init.call(this);
+    this.isMorph = true;
+    this.bounds = new Rectangle(0, 0, 50, 40);
+    this.color = new Color(80, 80, 80);
+    this.texture = null; // optional url of a fill-image
+    this.cachedTexture = null; // internal cache of actual bg image
+    this.alpha = 1;
+    this.isVisible = true;
+    this.isDraggable = false;
+    this.isTemplate = false;
+    this.acceptsDrops = false;
+    this.noticesTransparentClick = false;
+    this.drawNew();
+    this.fps = 0;
+    this.customContextMenu = null;
+    this.lastTime = Date.now();
+    this.onNextStep = null; // optional function to be run once
+};
+
+// Morph string representation: e.g. 'a Morph 2 [20@45 | 130@250]'
+
+Morph.prototype.toString = function () {
+    return 'a ' +
+        (this.constructor.name ||
+            this.constructor.toString().split(' ')[1].split('(')[0]) +
+        ' ' +
+        this.children.length.toString() + ' ' +
+        this.bounds;
+};
+
+// Morph deleting:
+
+Morph.prototype.destroy = function () {
+    if (this.parent !== null) {
+        this.fullChanged();
+        this.parent.removeChild(this);
+    }
+};
+
+// Morph stepping:
+
+Morph.prototype.stepFrame = function () {
+    if (!this.step) {
+        return null;
+    }
+    var current, elapsed, leftover, nxt;
+    current = Date.now();
+    elapsed = current - this.lastTime;
+    if (this.fps > 0) {
+        leftover = (1000 / this.fps) - elapsed;
+    } else {
+        leftover = 0;
+    }
+    if (leftover < 1) {
+        this.lastTime = current;
+        if (this.onNextStep) {
+            nxt = this.onNextStep;
+            this.onNextStep = null;
+            nxt.call(this);
+        }
+        this.step();
+        this.children.forEach(function (child) {
+            child.stepFrame();
+        });
+    }
+};
+
+Morph.prototype.nextSteps = function (arrayOfFunctions) {
+    var lst = arrayOfFunctions || [],
+        nxt = lst.shift(),
+        myself = this;
+    if (nxt) {
+        this.onNextStep = function () {
+            nxt.call(myself);
+            myself.nextSteps(lst);
+        };
+    }
+};
+
+Morph.prototype.step = function () {
+    nop();
+};
+
+// Morph accessing - geometry getting:
+
+Morph.prototype.left = function () {
+    return this.bounds.left();
+};
+
+Morph.prototype.right = function () {
+    return this.bounds.right();
+};
+
+Morph.prototype.top = function () {
+    return this.bounds.top();
+};
+
+Morph.prototype.bottom = function () {
+    return this.bounds.bottom();
+};
+
+Morph.prototype.center = function () {
+    return this.bounds.center();
+};
+
+Morph.prototype.bottomCenter = function () {
+    return this.bounds.bottomCenter();
+};
+
+Morph.prototype.bottomLeft = function () {
+    return this.bounds.bottomLeft();
+};
+
+Morph.prototype.bottomRight = function () {
+    return this.bounds.bottomRight();
+};
+
+Morph.prototype.boundingBox = function () {
+    return this.bounds;
+};
+
+Morph.prototype.corners = function () {
+    return this.bounds.corners();
+};
+
+Morph.prototype.leftCenter = function () {
+    return this.bounds.leftCenter();
+};
+
+Morph.prototype.rightCenter = function () {
+    return this.bounds.rightCenter();
+};
+
+Morph.prototype.topCenter = function () {
+    return this.bounds.topCenter();
+};
+
+Morph.prototype.topLeft = function () {
+    return this.bounds.topLeft();
+};
+
+Morph.prototype.topRight = function () {
+    return this.bounds.topRight();
+};
+Morph.prototype.position = function () {
+    return this.bounds.origin;
+};
+
+Morph.prototype.extent = function () {
+    return this.bounds.extent();
+};
+
+Morph.prototype.width = function () {
+    return this.bounds.width();
+};
+
+Morph.prototype.height = function () {
+    return this.bounds.height();
+};
+
+Morph.prototype.fullBounds = function () {
+    var result;
+    result = this.bounds;
+    this.children.forEach(function (child) {
+        if (child.isVisible) {
+            result = result.merge(child.fullBounds());
+        }
+    });
+    return result;
+};
+
+Morph.prototype.fullBoundsNoShadow = function () {
+    // answer my full bounds but ignore any shadow
+    var result;
+    result = this.bounds;
+    this.children.forEach(function (child) {
+        if (!(child instanceof ShadowMorph) && (child.isVisible)) {
+            result = result.merge(child.fullBounds());
+        }
+    });
+    return result;
+};
+
+Morph.prototype.visibleBounds = function () {
+    // answer which part of me is not clipped by a Frame
+    var visible = this.bounds,
+        frames = this.allParents().filter(function (p) {
+            return p instanceof FrameMorph;
+        });
+    frames.forEach(function (f) {
+        visible = visible.intersect(f.bounds);
+    });
+    return visible;
+};
+
+// Morph accessing - simple changes:
+
+Morph.prototype.moveBy = function (delta) {
+    this.changed();
+    this.bounds = this.bounds.translateBy(delta);
+    this.children.forEach(function (child) {
+        child.moveBy(delta);
+    });
+    this.changed();
+};
+
+Morph.prototype.silentMoveBy = function (delta) {
+    this.bounds = this.bounds.translateBy(delta);
+    this.children.forEach(function (child) {
+        child.silentMoveBy(delta);
+    });
+};
+
+Morph.prototype.setPosition = function (aPoint) {
+    var delta = aPoint.subtract(this.topLeft());
+    if ((delta.x !== 0) || (delta.y !== 0)) {
+        this.moveBy(delta);
+    }
+};
+
+Morph.prototype.silentSetPosition = function (aPoint) {
+    var delta = aPoint.subtract(this.topLeft());
+    if ((delta.x !== 0) || (delta.y !== 0)) {
+        this.silentMoveBy(delta);
+    }
+};
+
+Morph.prototype.setLeft = function (x) {
+    this.setPosition(
+        new Point(
+            x,
+            this.top()
+        )
+    );
+};
+
+Morph.prototype.setRight = function (x) {
+    this.setPosition(
+        new Point(
+            x - this.width(),
+            this.top()
+        )
+    );
+};
+
+Morph.prototype.setTop = function (y) {
+    this.setPosition(
+        new Point(
+            this.left(),
+            y
+        )
+    );
+};
+
+Morph.prototype.setBottom = function (y) {
+    this.setPosition(
+        new Point(
+            this.left(),
+            y - this.height()
+        )
+    );
+};
+
+Morph.prototype.setCenter = function (aPoint) {
+    this.setPosition(
+        aPoint.subtract(
+            this.extent().floorDivideBy(2)
+        )
+    );
+};
+
+Morph.prototype.setFullCenter = function (aPoint) {
+    this.setPosition(
+        aPoint.subtract(
+            this.fullBounds().extent().floorDivideBy(2)
+        )
+    );
+};
+
+Morph.prototype.keepWithin = function (aMorph) {
+    // make sure I am completely within another Morph's bounds
+    var leftOff, rightOff, topOff, bottomOff;
+    leftOff = this.fullBounds().left() - aMorph.left();
+    if (leftOff < 0) {
+        this.moveBy(new Point(-leftOff, 0));
+    }
+    rightOff = this.fullBounds().right() - aMorph.right();
+    if (rightOff > 0) {
+        this.moveBy(new Point(-rightOff, 0));
+    }
+    topOff = this.fullBounds().top() - aMorph.top();
+    if (topOff < 0) {
+        this.moveBy(new Point(0, -topOff));
+    }
+    bottomOff = this.fullBounds().bottom() - aMorph.bottom();
+    if (bottomOff > 0) {
+        this.moveBy(new Point(0, -bottomOff));
+    }
+};
+
+// Morph accessing - dimensional changes requiring a complete redraw
+
+Morph.prototype.setExtent = function (aPoint) {
+    if (!aPoint.eq(this.extent())) {
+        this.changed();
+        this.silentSetExtent(aPoint);
+        this.changed();
+        this.drawNew();
+    }
+};
+
+Morph.prototype.silentSetExtent = function (aPoint) {
+    var ext, newWidth, newHeight;
+    ext = aPoint.round();
+    newWidth = Math.max(ext.x, 0);
+    newHeight = Math.max(ext.y, 0);
+    this.bounds.corner = new Point(
+        this.bounds.origin.x + newWidth,
+        this.bounds.origin.y + newHeight
+    );
+};
+
+Morph.prototype.setWidth = function (width) {
+    this.setExtent(new Point(width || 0, this.height()));
+};
+
+Morph.prototype.silentSetWidth = function (width) {
+    // do not drawNew() just yet
+    var w = Math.max(Math.round(width || 0), 0);
+    this.bounds.corner = new Point(
+        this.bounds.origin.x + w,
+        this.bounds.corner.y
+    );
+};
+
+Morph.prototype.setHeight = function (height) {
+    this.setExtent(new Point(this.width(), height || 0));
+};
+
+Morph.prototype.silentSetHeight = function (height) {
+    // do not drawNew() just yet
+    var h = Math.max(Math.round(height || 0), 0);
+    this.bounds.corner = new Point(
+        this.bounds.corner.x,
+        this.bounds.origin.y + h
+    );
+};
+
+Morph.prototype.setColor = function (aColor) {
+    if (aColor) {
+        if (!this.color.eq(aColor)) {
+            this.color = aColor;
+            this.changed();
+            this.drawNew();
+        }
+    }
+};
+
+// Morph displaying:
+
+Morph.prototype.drawNew = function () {
+    // initialize my surface property
+    this.image = newCanvas(this.extent());
+    var context = this.image.getContext('2d');
+    context.fillStyle = this.color.toString();
+    context.fillRect(0, 0, this.width(), this.height());
+    if (this.cachedTexture) {
+        this.drawCachedTexture();
+    } else if (this.texture) {
+        this.drawTexture(this.texture);
+    }
+};
+
+Morph.prototype.drawTexture = function (url) {
+    var myself = this;
+    this.cachedTexture = new Image();
+    this.cachedTexture.onload = function () {
+        myself.drawCachedTexture();
+    };
+    this.cachedTexture.src = this.texture = url; // make absolute
+};
+
+Morph.prototype.drawCachedTexture = function () {
+    var bg = this.cachedTexture,
+        cols = Math.floor(this.image.width / bg.width),
+        lines = Math.floor(this.image.height / bg.height),
+        x,
+        y,
+        context = this.image.getContext('2d');
+
+    for (y = 0; y <= lines; y += 1) {
+        for (x = 0; x <= cols; x += 1) {
+            context.drawImage(bg, x * bg.width, y * bg.height);
+        }
+    }
+    this.changed();
+};
+
+/*
+Morph.prototype.drawCachedTexture = function () {
+    var context = this.image.getContext('2d'),
+        pattern = context.createPattern(this.cachedTexture, 'repeat');
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, this.image.width, this.image.height);
+    this.changed();
+};
+*/
+
+Morph.prototype.drawOn = function (aCanvas, aRect) {
+    var rectangle, area, delta, src, context, w, h, sl, st;
+    if (!this.isVisible) {
+        return null;
+    }
+    rectangle = aRect || this.bounds();
+    area = rectangle.intersect(this.bounds).round();
+    if (area.extent().gt(new Point(0, 0))) {
+        delta = this.position().neg();
+        src = area.copy().translateBy(delta).round();
+        context = aCanvas.getContext('2d');
+        context.globalAlpha = this.alpha;
+
+        sl = src.left();
+        st = src.top();
+        w = Math.min(src.width(), this.image.width - sl);
+        h = Math.min(src.height(), this.image.height - st);
+
+        if (w < 1 || h < 1) {
+            return null;
+        }
+
+        context.drawImage(
+            this.image,
+            src.left(),
+            src.top(),
+            w,
+            h,
+            area.left(),
+            area.top(),
+            w,
+            h
+        );
+
+    /* "for debugging purposes:"
+
+        try {
+            context.drawImage(
+                this.image,
+                src.left(),
+                src.top(),
+                w,
+                h,
+                area.left(),
+                area.top(),
+                w,
+                h
+            );
+        } catch (err) {
+            alert('internal error\n\n' + err
+                + '\n ---'
+                + '\n canvas: ' + aCanvas
+                + '\n canvas.width: ' + aCanvas.width
+                + '\n canvas.height: ' + aCanvas.height
+                + '\n ---'
+                + '\n image: ' + this.image
+                + '\n image.width: ' + this.image.width
+                + '\n image.height: ' + this.image.height
+                + '\n ---'
+                + '\n w: ' + w
+                + '\n h: ' + h
+                + '\n sl: ' + sl
+                + '\n st: ' + st
+                + '\n area.left: ' + area.left()
+                + '\n area.top ' + area.top()
+                );
+        }
+    */
+
+    }
+};
+
+Morph.prototype.fullDrawOn = function (aCanvas, aRect) {
+    var rectangle;
+    if (!this.isVisible) {
+        return null;
+    }
+    rectangle = aRect || this.fullBounds();
+    this.drawOn(aCanvas, rectangle);
+    this.children.forEach(function (child) {
+        child.fullDrawOn(aCanvas, rectangle);
+    });
+};
+
+Morph.prototype.hide = function () {
+    this.isVisible = false;
+    this.changed();
+    this.children.forEach(function (child) {
+        child.hide();
+    });
+};
+
+Morph.prototype.show = function () {
+    this.isVisible = true;
+    this.changed();
+    this.children.forEach(function (child) {
+        child.show();
+    });
+};
+
+Morph.prototype.toggleVisibility = function () {
+    this.isVisible = (!this.isVisible);
+    this.changed();
+    this.children.forEach(function (child) {
+        child.toggleVisibility();
+    });
+};
+
+// Morph full image:
+
+Morph.prototype.fullImageClassic = function () {
+    // why doesn't this work for all Morphs?
+    var fb = this.fullBounds(),
+        img = newCanvas(fb.extent()),
+        ctx = img.getContext('2d');
+    ctx.translate(-this.bounds.origin.x, -this.bounds.origin.y);
+    this.fullDrawOn(img, fb);
+    img.globalAlpha = this.alpha;
+    return img;
+};
+
+Morph.prototype.fullImage = function () {
+    var img, ctx, fb;
+    img = newCanvas(this.fullBounds().extent());
+    ctx = img.getContext('2d');
+    fb = this.fullBounds();
+    this.allChildren().forEach(function (morph) {
+        if (morph.isVisible) {
+            ctx.globalAlpha = morph.alpha;
+            ctx.drawImage(
+                morph.image,
+                morph.bounds.origin.x - fb.origin.x,
+                morph.bounds.origin.y - fb.origin.y
+            );
+        }
+    });
+    return img;
+};
+
+// Morph shadow:
+
+Morph.prototype.shadowImage = function (off, color) {
+    // fallback for Windows Chrome-Shadow bug
+    var fb, img, outline, sha, ctx,
+        offset = off || new Point(7, 7),
+        clr = color || new Color(0, 0, 0);
+    fb = this.fullBounds().extent();
+    img = this.fullImage();
+    outline = newCanvas(fb);
+    ctx = outline.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.drawImage(
+        img,
+        -offset.x,
+        -offset.y
+    );
+    sha = newCanvas(fb);
+    ctx = sha.getContext('2d');
+    ctx.drawImage(outline, 0, 0);
+    ctx.globalCompositeOperation = 'source-atop';
+    ctx.fillStyle = clr.toString();
+    ctx.fillRect(0, 0, fb.x, fb.y);
+    return sha;
+};
+
+Morph.prototype.shadowImageBlurred = function (off, color) {
+    var fb, img, sha, ctx,
+        offset = off || new Point(7, 7),
+        blur = this.shadowBlur,
+        clr = color || new Color(0, 0, 0);
+    fb = this.fullBounds().extent().add(blur * 2);
+    img = this.fullImage();
+    sha = newCanvas(fb);
+    ctx = sha.getContext('2d');
+    ctx.shadowOffsetX = offset.x;
+    ctx.shadowOffsetY = offset.y;
+    ctx.shadowBlur = blur;
+    ctx.shadowColor = clr.toString();
+    ctx.drawImage(
+        img,
+        blur - offset.x,
+        blur - offset.y
+    );
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 0;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.drawImage(
+        img,
+        blur - offset.x,
+        blur - offset.y
+    );
+    return sha;
+};
+
+Morph.prototype.shadow = function (off, a, color) {
+    var shadow = new ShadowMorph(),
+        offset = off || new Point(7, 7),
+        alpha = a || ((a === 0) ? 0 : 0.2),
+        fb = this.fullBounds();
+    shadow.setExtent(fb.extent().add(this.shadowBlur * 2));
+    if (useBlurredShadows) {
+        shadow.image = this.shadowImageBlurred(offset, color);
+        shadow.alpha = alpha;
+        shadow.setPosition(fb.origin.add(offset).subtract(this.shadowBlur));
+    } else {
+        shadow.image = this.shadowImage(offset, color);
+        shadow.alpha = alpha;
+        shadow.setPosition(fb.origin.add(offset));
+    }
+    return shadow;
+};
+
+Morph.prototype.addShadow = function (off, a, color) {
+    var shadow,
+        offset = off || new Point(7, 7),
+        alpha = a || ((a === 0) ? 0 : 0.2);
+    shadow = this.shadow(offset, alpha, color);
+    this.addBack(shadow);
+    this.fullChanged();
+    return shadow;
+};
+
+Morph.prototype.getShadow = function () {
+    var shadows;
+    shadows = this.children.slice(0).reverse().filter(
+        function (child) {
+            return child instanceof ShadowMorph;
+        }
+    );
+    if (shadows.length !== 0) {
+        return shadows[0];
+    }
+    return null;
+};
+
+Morph.prototype.removeShadow = function () {
+    var shadow = this.getShadow();
+    if (shadow !== null) {
+        this.fullChanged();
+        this.removeChild(shadow);
+    }
+};
+
+// Morph pen trails:
+
+Morph.prototype.penTrails = function () {
+    // answer my pen trails canvas. default is to answer my image
+    return this.image;
+};
+
+// Morph updating:
+
+Morph.prototype.changed = function () {
+    if (this.trackChanges) {
+        var w = this.root();
+        if (w instanceof WorldMorph) {
+            w.broken.push(this.visibleBounds().spread());
+        }
+    }
+    if (this.parent) {
+        this.parent.childChanged(this);
+    }
+};
+
+Morph.prototype.fullChanged = function () {
+    if (this.trackChanges) {
+        var w = this.root();
+        if (w instanceof WorldMorph) {
+            w.broken.push(this.fullBounds().spread());
+        }
+    }
+};
+
+Morph.prototype.childChanged = function () {
+    // react to a  change in one of my children,
+    // default is to just pass this message on upwards
+    // override this method for Morphs that need to adjust accordingly
+    if (this.parent) {
+        this.parent.childChanged(this);
+    }
+};
+
+// Morph accessing - structure:
+
+Morph.prototype.world = function () {
+    var root = this.root();
+    if (root instanceof WorldMorph) {
+        return root;
+    }
+    if (root instanceof HandMorph) {
+        return root.world;
+    }
+    return null;
+};
+
+Morph.prototype.add = function (aMorph) {
+    var owner = aMorph.parent;
+    if (owner !== null) {
+        owner.removeChild(aMorph);
+    }
+    this.addChild(aMorph);
+};
+
+Morph.prototype.addBack = function (aMorph) {
+    var owner = aMorph.parent;
+    if (owner !== null) {
+        owner.removeChild(aMorph);
+    }
+    this.addChildFirst(aMorph);
+};
+
+Morph.prototype.topMorphSuchThat = function (predicate) {
+    var next;
+    if (predicate.call(null, this)) {
+        next = detect(
+            this.children.slice(0).reverse(),
+            predicate
+        );
+        if (next) {
+            return next.topMorphSuchThat(predicate);
+        }
+        return this;
+    }
+    return null;
+};
+
+Morph.prototype.morphAt = function (aPoint) {
+    var morphs = this.allChildren().slice(0).reverse(),
+        result = null;
+    morphs.forEach(function (m) {
+        if (m.fullBounds().containsPoint(aPoint) &&
+                (result === null)) {
+            result = m;
+        }
+    });
+    return result;
+};
+
+/*
+    alternative -  more elegant and possibly more
+    performant - solution for morphAt.
+    Has some issues, commented out for now
+
+Morph.prototype.morphAt = function (aPoint) {
+    return this.topMorphSuchThat(function (m) {
+        return m.fullBounds().containsPoint(aPoint);
+    });
+};
+*/
+
+Morph.prototype.overlappedMorphs = function () {
+    //exclude the World
+    var world = this.world(),
+        fb = this.fullBounds(),
+        myself = this,
+        allParents = this.allParents(),
+        allChildren = this.allChildren(),
+        morphs;
+
+    morphs = world.allChildren();
+    return morphs.filter(function (m) {
+        return m.isVisible &&
+            m !== myself &&
+            m !== world &&
+            !contains(allParents, m) &&
+            !contains(allChildren, m) &&
+            m.fullBounds().intersects(fb);
+    });
+};
+
+// Morph pixel access:
+
+Morph.prototype.getPixelColor = function (aPoint) {
+    var point, context, data;
+    point = aPoint.subtract(this.bounds.origin);
+    context = this.image.getContext('2d');
+    data = context.getImageData(point.x, point.y, 1, 1);
+    return new Color(
+        data.data[0],
+        data.data[1],
+        data.data[2],
+        data.data[3]
+    );
+};
+
+Morph.prototype.isTransparentAt = function (aPoint) {
+    var point, context, data;
+    if (this.bounds.containsPoint(aPoint)) {
+        if (this.texture) {
+            return false;
+        }
+        point = aPoint.subtract(this.bounds.origin);
+        context = this.image.getContext('2d');
+        data = context.getImageData(
+            Math.floor(point.x),
+            Math.floor(point.y),
+            1,
+            1
+        );
+        return data.data[3] === 0;
+    }
+    return false;
+};
+
+// Morph duplicating:
+
+Morph.prototype.copy = function () {
+    var c = copy(this);
+    c.parent = null;
+    c.children = [];
+    c.bounds = this.bounds.copy();
+    return c;
+};
+
+Morph.prototype.fullCopy = function () {
+    /*
+    Produce a copy of me with my entire tree of submorphs. Morphs
+    mentioned more than once are all directed to a single new copy.
+    Other properties are also *shallow* copied, so you must override
+    to deep copy Arrays and (complex) Objects
+    */
+    var dict = {}, c;
+    c = this.copyRecordingReferences(dict);
+    c.forAllChildren(function (m) {
+        m.updateReferences(dict);
+    });
+    return c;
+};
+
+Morph.prototype.copyRecordingReferences = function (dict) {
+    /*
+    Recursively copy this entire composite morph, recording the
+    correspondence between old and new morphs in the given dictionary.
+    This dictionary will be used to update intra-composite references
+    in the copy. See updateReferences().
+    Note: This default implementation copies ONLY morphs in the
+    submorph hierarchy. If a morph stores morphs in other properties
+    that it wants to copy, then it should override this method to do so.
+    The same goes for morphs that contain other complex data that
+    should be copied when the morph is duplicated.
+    */
+    var c = this.copy();
+    dict[this] = c;
+    this.children.forEach(function (m) {
+        c.add(m.copyRecordingReferences(dict));
+    });
+    return c;
+};
+
+Morph.prototype.updateReferences = function (dict) {
+    /*
+    Update intra-morph references within a composite morph that has
+    been copied. For example, if a button refers to morph X in the
+    orginal composite then the copy of that button in the new composite
+    should refer to the copy of X in new composite, not the original X.
+    */
+    var property;
+    for (property in this) {
+        if (property.isMorph && dict[property]) {
+            this[property] = dict[property];
+        }
+    }
+};
+
+// Morph dragging and dropping:
+
+Morph.prototype.rootForGrab = function () {
+    if (this instanceof ShadowMorph) {
+        return this.parent.rootForGrab();
+    }
+    if (this.parent instanceof ScrollFrameMorph) {
+        return this.parent;
+    }
+    if (this.parent === null ||
+            this.parent instanceof WorldMorph ||
+            this.parent instanceof FrameMorph ||
+            this.isDraggable === true) {
+        return this;
+    }
+    return this.parent.rootForGrab();
+};
+
+Morph.prototype.wantsDropOf = function (aMorph) {
+    // default is to answer the general flag - change for my heirs
+    if ((aMorph instanceof HandleMorph) ||
+            (aMorph instanceof MenuMorph) ||
+            (aMorph instanceof InspectorMorph)) {
+        return false;
+    }
+    return this.acceptsDrops;
+};
+
+Morph.prototype.pickUp = function (wrrld) {
+    var world = wrrld || this.world();
+    this.setPosition(
+        world.hand.position().subtract(
+            this.extent().floorDivideBy(2)
+        )
+    );
+    world.hand.grab(this);
+};
+
+Morph.prototype.isPickedUp = function () {
+    return this.parentThatIsA(HandMorph) !== null;
+};
+
+Morph.prototype.situation = function () {
+    // answer a dictionary specifying where I am right now, so
+    // I can slide back to it if I'm dropped somewhere else
+    if (this.parent) {
+        return {
+            origin: this.parent,
+            position: this.position().subtract(this.parent.position())
+        };
+    }
+    return null;
+};
+
+Morph.prototype.slideBackTo = function (situation, inSteps) {
+    var steps = inSteps || 5,
+        pos = situation.origin.position().add(situation.position),
+        xStep = -(this.left() - pos.x) / steps,
+        yStep = -(this.top() - pos.y) / steps,
+        stepCount = 0,
+        oldStep = this.step,
+        oldFps = this.fps,
+        myself = this;
+
+    this.fps = 0;
+    this.step = function () {
+        myself.fullChanged();
+        myself.silentMoveBy(new Point(xStep, yStep));
+        myself.fullChanged();
+        stepCount += 1;
+        if (stepCount === steps) {
+            situation.origin.add(myself);
+            if (situation.origin.reactToDropOf) {
+                situation.origin.reactToDropOf(myself);
+            }
+            myself.step = oldStep;
+            myself.fps = oldFps;
+        }
+    };
+};
+
+// Morph utilities:
+
+Morph.prototype.nop = function () {
+    nop();
+};
+
+Morph.prototype.resize = function () {
+    this.world().activeHandle = new HandleMorph(this);
+};
+
+Morph.prototype.move = function () {
+    this.world().activeHandle = new HandleMorph(
+        this,
+        null,
+        null,
+        null,
+        null,
+        'move'
+    );
+};
+
+Morph.prototype.hint = function (msg) {
+    var m, text;
+    text = msg;
+    if (msg) {
+        if (msg.toString) {
+            text = msg.toString();
+        }
+    } else {
+        text = 'NULL';
+    }
+    m = new MenuMorph(this, text);
+    m.isDraggable = true;
+    m.popUpCenteredAtHand(this.world());
+};
+
+Morph.prototype.inform = function (msg) {
+    var m, text;
+    text = msg;
+    if (msg) {
+        if (msg.toString) {
+            text = msg.toString();
+        }
+    } else {
+        text = 'NULL';
+    }
+    m = new MenuMorph(this, text);
+    m.addItem("Ok");
+    m.isDraggable = true;
+    m.popUpCenteredAtHand(this.world());
+};
+
+Morph.prototype.prompt = function (
+    msg,
+    callback,
+    environment,
+    defaultContents,
+    width,
+    floorNum,
+    ceilingNum,
+    isRounded
+) {
+    var menu, entryField, slider, isNumeric;
+    if (ceilingNum) {
+        isNumeric = true;
+    }
+    menu = new MenuMorph(
+        callback || null,
+        msg || '',
+        environment || null
+    );
+    entryField = new StringFieldMorph(
+        defaultContents || '',
+        width || 100,
+        MorphicPreferences.prompterFontSize,
+        MorphicPreferences.prompterFontName,
+        false,
+        false,
+        isNumeric
+    );
+    menu.items.push(entryField);
+    if (ceilingNum || MorphicPreferences.useSliderForInput) {
+        slider = new SliderMorph(
+            floorNum || 0,
+            ceilingNum,
+            parseFloat(defaultContents),
+            Math.floor((ceilingNum - floorNum) / 4),
+            'horizontal'
+        );
+        slider.alpha = 1;
+        slider.color = new Color(225, 225, 225);
+        slider.button.color = menu.borderColor;
+        slider.button.highlightColor = slider.button.color.copy();
+        slider.button.highlightColor.b += 100;
+        slider.button.pressColor = slider.button.color.copy();
+        slider.button.pressColor.b += 150;
+        slider.setHeight(MorphicPreferences.prompterSliderSize);
+        if (isRounded) {
+            slider.action = function (num) {
+                entryField.changed();
+                entryField.text.text = Math.round(num).toString();
+                entryField.text.drawNew();
+                entryField.text.changed();
+                entryField.text.edit();
+            };
+        } else {
+            slider.action = function (num) {
+                entryField.changed();
+                entryField.text.text = num.toString();
+                entryField.text.drawNew();
+                entryField.text.changed();
+            };
+        }
+        menu.items.push(slider);
+    }
+
+    menu.addLine(2);
+    menu.addItem('Ok', function () {
+        return entryField.string();
+    });
+    menu.addItem('Cancel', function () {
+        return null;
+    });
+    menu.isDraggable = true;
+    menu.popUpAtHand(this.world());
+    entryField.text.edit();
+};
+
+Morph.prototype.pickColor = function (
+    msg,
+    callback,
+    environment,
+    defaultContents
+) {
+    var menu, colorPicker;
+    menu = new MenuMorph(
+        callback || null,
+        msg || '',
+        environment || null
+    );
+    colorPicker = new ColorPickerMorph(defaultContents);
+    menu.items.push(colorPicker);
+    menu.addLine(2);
+    menu.addItem('Ok', function () {
+        return colorPicker.getChoice();
+    });
+    menu.addItem('Cancel', function () {
+        return null;
+    });
+    menu.isDraggable = true;
+    menu.popUpAtHand(this.world());
+};
+
+Morph.prototype.inspect = function (anotherObject) {
+    var world = this.world instanceof Function ?
+            this.world() : this.root() || this.world,
+        inspector,
+        inspectee = this;
+
+    if (anotherObject) {
+        inspectee = anotherObject;
+    }
+    inspector = new InspectorMorph(inspectee);
+    inspector.setPosition(world.hand.position());
+    inspector.keepWithin(world);
+    world.add(inspector);
+    inspector.changed();
+};
+
+// Morph menus:
+
+Morph.prototype.contextMenu = function () {
+    var world;
+
+    if (this.customContextMenu) {
+        return this.customContextMenu;
+    }
+    world = this.world instanceof Function ? this.world() : this.world;
+    if (world && world.isDevMode) {
+        if (this.parent === world) {
+            return this.developersMenu();
+        }
+        return this.hierarchyMenu();
+    }
+    return this.userMenu() ||
+        (this.parent && this.parent.userMenu());
+};
+
+Morph.prototype.hierarchyMenu = function () {
+    var parents = this.allParents(),
+        world = this.world instanceof Function ? this.world() : this.world,
+        menu = new MenuMorph(this, null);
+
+    parents.forEach(function (each) {
+        if (each.developersMenu && (each !== world)) {
+            menu.addItem(each.toString().slice(0, 50), function () {
+                each.developersMenu().popUpAtHand(world);
+            });
+        }
+    });
+    return menu;
+};
+
+Morph.prototype.developersMenu = function () {
+    // 'name' is not an official property of a function, hence:
+    var world = this.world instanceof Function ? this.world() : this.world,
+        userMenu = this.userMenu() ||
+            (this.parent && this.parent.userMenu()),
+        menu = new MenuMorph(this, this.constructor.name ||
+            this.constructor.toString().split(' ')[1].split('(')[0]);
+    if (userMenu) {
+        menu.addItem(
+            'user features...',
+            function () {
+                userMenu.popUpAtHand(world);
+            }
+        );
+        menu.addLine();
+    }
+    menu.addItem(
+        "color...",
+        function () {
+            this.pickColor(
+                menu.title + '\ncolor:',
+                this.setColor,
+                this,
+                this.color
+            );
+        },
+        'choose another color \nfor this morph'
+    );
+    menu.addItem(
+        "transparency...",
+        function () {
+            this.prompt(
+                menu.title + '\nalpha\nvalue:',
+                this.setAlphaScaled,
+                this,
+                (this.alpha * 100).toString(),
+                null,
+                1,
+                100,
+                true
+            );
+        },
+        'set this morph\'s\nalpha value'
+    );
+    menu.addItem(
+        "resize...",
+        'resize',
+        'show a handle\nwhich can be dragged\nto change this morph\'s' +
+            ' extent'
+    );
+    menu.addLine();
+    menu.addItem(
+        "duplicate",
+        function () {
+            this.fullCopy().pickUp(this.world());
+        },
+        'make a copy\nand pick it up'
+    );
+    menu.addItem(
+        "pick up",
+        'pickUp',
+        'disattach and put \ninto the hand'
+    );
+    menu.addItem(
+        "attach...",
+        'attach',
+        'stick this morph\nto another one'
+    );
+    menu.addItem(
+        "move...",
+        'move',
+        'show a handle\nwhich can be dragged\nto move this morph'
+    );
+    menu.addItem(
+        "inspect...",
+        'inspect',
+        'open a window\non all properties'
+    );
+    menu.addItem(
+        "pic...",
+        function () {
+            window.open(this.fullImageClassic().toDataURL());
+        },
+        'open a new window\nwith a picture of this morph'
+    );
+    menu.addLine();
+    if (this.isDraggable) {
+        menu.addItem(
+            "lock",
+            'toggleIsDraggable',
+            'make this morph\nunmovable'
+        );
+    } else {
+        menu.addItem(
+            "unlock",
+            'toggleIsDraggable',
+            'make this morph\nmovable'
+        );
+    }
+    menu.addItem("hide", 'hide');
+    menu.addItem("delete", 'destroy');
+    if (!(this instanceof WorldMorph)) {
+        menu.addLine();
+        menu.addItem(
+            "World...",
+            function () {
+                world.contextMenu().popUpAtHand(world);
+            },
+            'show the\nWorld\'s menu'
+        );
+    }
+    return menu;
+};
+
+Morph.prototype.userMenu = function () {
+    return null;
+};
+
+// Morph menu actions
+
+Morph.prototype.setAlphaScaled = function (alpha) {
+    // for context menu demo purposes
+    var newAlpha, unscaled;
+    if (typeof alpha === 'number') {
+        unscaled = alpha / 100;
+        this.alpha = Math.min(Math.max(unscaled, 0.1), 1);
+    } else {
+        newAlpha = parseFloat(alpha);
+        if (!isNaN(newAlpha)) {
+            unscaled = newAlpha / 100;
+            this.alpha = Math.min(Math.max(unscaled, 0.1), 1);
+        }
+    }
+    this.changed();
+};
+
+Morph.prototype.attach = function () {
+    var choices = this.overlappedMorphs(),
+        menu = new MenuMorph(this, 'choose new parent:'),
+        myself = this;
+
+    choices.forEach(function (each) {
+        menu.addItem(each.toString().slice(0, 50), function () {
+            each.add(myself);
+            myself.isDraggable = false;
+        });
+    });
+    if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+Morph.prototype.toggleIsDraggable = function () {
+    // for context menu demo purposes
+    this.isDraggable = !this.isDraggable;
+};
+
+Morph.prototype.colorSetters = function () {
+    // for context menu demo purposes
+    return ['color'];
+};
+
+Morph.prototype.numericalSetters = function () {
+    // for context menu demo purposes
+    return [
+        'setLeft',
+        'setTop',
+        'setWidth',
+        'setHeight',
+        'setAlphaScaled'
+    ];
+};
+
+// Morph entry field tabbing:
+
+Morph.prototype.allEntryFields = function () {
+    return this.allChildren().filter(function (each) {
+        return each.isEditable &&
+            (each instanceof StringMorph ||
+                each instanceof TextMorph);
+    });
+};
+
+Morph.prototype.nextEntryField = function (current) {
+    var fields = this.allEntryFields(),
+        idx = fields.indexOf(current);
+    if (idx !== -1) {
+        if (fields.length > idx + 1) {
+            return fields[idx + 1];
+        }
+    }
+    return fields[0];
+};
+
+Morph.prototype.previousEntryField = function (current) {
+    var fields = this.allEntryFields(),
+        idx = fields.indexOf(current);
+    if (idx !== -1) {
+        if (idx > 0) {
+            return fields[idx - 1];
+        }
+        return fields[fields.length - 1];
+    }
+    return fields[0];
+};
+
+Morph.prototype.tab = function (editField) {
+/*
+    the <tab> key was pressed in one of my edit fields.
+    invoke my "nextTab()" function if it exists, else
+    propagate it up my owner chain.
+*/
+    if (this.nextTab) {
+        this.nextTab(editField);
+    } else if (this.parent) {
+        this.parent.tab(editField);
+    }
+};
+
+Morph.prototype.backTab = function (editField) {
+/*
+    the <back tab> key was pressed in one of my edit fields.
+    invoke my "previousTab()" function if it exists, else
+    propagate it up my owner chain.
+*/
+    if (this.previousTab) {
+        this.previousTab(editField);
+    } else if (this.parent) {
+        this.parent.backTab(editField);
+    }
+};
+
+/*
+    the following are examples of what the navigation methods should
+    look like. Insert these at the World level for fallback, and at lower
+    levels in the Morphic tree (e.g. dialog boxes) for a more fine-grained
+    control over the tabbing cycle.
+
+Morph.prototype.nextTab = function (editField) {
+    var next = this.nextEntryField(editField);
+    editField.clearSelection();
+    next.selectAll();
+    next.edit();
+};
+
+Morph.prototype.previousTab = function (editField) {
+    var prev = this.previousEntryField(editField);
+    editField.clearSelection();
+    prev.selectAll();
+    prev.edit();
+};
+
+*/
+
+// Morph events:
+
+Morph.prototype.escalateEvent = function (functionName, arg) {
+    var handler = this.parent;
+    while (!handler[functionName] && handler.parent !== null) {
+        handler = handler.parent;
+    }
+    if (handler[functionName]) {
+        handler[functionName](arg);
+    }
+};
+
+// Morph eval:
+
+Morph.prototype.evaluateString = function (code) {
+    var result;
+
+    try {
+        result = eval(code);
+        this.drawNew();
+        this.changed();
+    } catch (err) {
+        this.inform(err);
+    }
+    return result;
+};
+
+// Morph collision detection:
+
+Morph.prototype.isTouching = function (otherMorph) {
+    var oImg = this.overlappingImage(otherMorph),
+        data = oImg.getContext('2d')
+            .getImageData(1, 1, oImg.width, oImg.height)
+            .data;
+    return detect(
+        data,
+        function (each) {
+            return each !== 0;
+        }
+    ) !== null;
+};
+
+Morph.prototype.overlappingImage = function (otherMorph) {
+    var fb = this.fullBounds(),
+        otherFb = otherMorph.fullBounds(),
+        oRect = fb.intersect(otherFb),
+        oImg = newCanvas(oRect.extent()),
+        ctx = oImg.getContext('2d');
+    if (oRect.width() < 1 || oRect.height() < 1) {
+        return newCanvas(new Point(1, 1));
+    }
+    ctx.drawImage(
+        this.fullImage(),
+        oRect.origin.x - fb.origin.x,
+        oRect.origin.y - fb.origin.y
+    );
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.drawImage(
+        otherMorph.fullImage(),
+        otherFb.origin.x - oRect.origin.x,
+        otherFb.origin.y - oRect.origin.y
+    );
+    return oImg;
+};
+
+// ShadowMorph /////////////////////////////////////////////////////////
+
+// ShadowMorph inherits from Morph:
+
+ShadowMorph.prototype = new Morph();
+ShadowMorph.prototype.constructor = ShadowMorph;
+ShadowMorph.uber = Morph.prototype;
+
+// ShadowMorph instance creation:
+
+function ShadowMorph() {
+    this.init();
+}
+
+// HandleMorph ////////////////////////////////////////////////////////
+
+// I am a resize / move handle that can be attached to any Morph
+
+// HandleMorph inherits from Morph:
+
+HandleMorph.prototype = new Morph();
+HandleMorph.prototype.constructor = HandleMorph;
+HandleMorph.uber = Morph.prototype;
+
+// HandleMorph instance creation:
+
+function HandleMorph(target, minX, minY, insetX, insetY, type) {
+    // if insetY is missing, it will be the same as insetX
+    this.init(target, minX, minY, insetX, insetY, type);
+}
+
+HandleMorph.prototype.init = function (
+    target,
+    minX,
+    minY,
+    insetX,
+    insetY,
+    type
+) {
+    var size = MorphicPreferences.handleSize;
+    this.target = target || null;
+    this.minExtent = new Point(minX || 0, minY || 0);
+    this.inset = new Point(insetX || 0, insetY || insetX || 0);
+    this.type =  type || 'resize'; // can also be 'move'
+    HandleMorph.uber.init.call(this);
+    this.color = new Color(255, 255, 255);
+    this.isDraggable = false;
+    this.noticesTransparentClick = true;
+    this.setExtent(new Point(size, size));
+};
+
+// HandleMorph drawing:
+
+HandleMorph.prototype.drawNew = function () {
+    this.normalImage = newCanvas(this.extent());
+    this.highlightImage = newCanvas(this.extent());
+    this.drawOnCanvas(
+        this.normalImage,
+        this.color,
+        new Color(100, 100, 100)
+    );
+    this.drawOnCanvas(
+        this.highlightImage,
+        new Color(100, 100, 255),
+        new Color(255, 255, 255)
+    );
+    this.image = this.normalImage;
+    if (this.target) {
+        this.setPosition(
+            this.target.bottomRight().subtract(
+                this.extent().add(this.inset)
+            )
+        );
+        this.target.add(this);
+        this.target.changed();
+    }
+};
+
+HandleMorph.prototype.drawOnCanvas = function (
+    aCanvas,
+    color,
+    shadowColor
+) {
+    var context = aCanvas.getContext('2d'),
+        p1,
+        p11,
+        p2,
+        p22,
+        i;
+
+    context.lineWidth = 1;
+    context.lineCap = 'round';
+
+    context.strokeStyle = color.toString();
+
+    if (this.type === 'move') {
+
+        p1 = this.bottomLeft().subtract(this.position());
+        p11 = p1.copy();
+        p2 = this.topRight().subtract(this.position());
+        p22 = p2.copy();
+
+        for (i = 0; i <= this.height(); i = i + 6) {
+            p11.y = p1.y - i;
+            p22.y = p2.y - i;
+
+            context.beginPath();
+            context.moveTo(p11.x, p11.y);
+            context.lineTo(p22.x, p22.y);
+            context.closePath();
+            context.stroke();
+        }
+    }
+
+    p1 = this.bottomLeft().subtract(this.position());
+    p11 = p1.copy();
+    p2 = this.topRight().subtract(this.position());
+    p22 = p2.copy();
+
+    for (i = 0; i <= this.width(); i = i + 6) {
+        p11.x = p1.x + i;
+        p22.x = p2.x + i;
+
+        context.beginPath();
+        context.moveTo(p11.x, p11.y);
+        context.lineTo(p22.x, p22.y);
+        context.closePath();
+        context.stroke();
+    }
+
+    context.strokeStyle = shadowColor.toString();
+
+    if (this.type === 'move') {
+
+        p1 = this.bottomLeft().subtract(this.position());
+        p11 = p1.copy();
+        p2 = this.topRight().subtract(this.position());
+        p22 = p2.copy();
+
+        for (i = -2; i <= this.height(); i = i + 6) {
+            p11.y = p1.y - i;
+            p22.y = p2.y - i;
+
+            context.beginPath();
+            context.moveTo(p11.x, p11.y);
+            context.lineTo(p22.x, p22.y);
+            context.closePath();
+            context.stroke();
+        }
+    }
+
+    p1 = this.bottomLeft().subtract(this.position());
+    p11 = p1.copy();
+    p2 = this.topRight().subtract(this.position());
+    p22 = p2.copy();
+
+    for (i = 2; i <= this.width(); i = i + 6) {
+        p11.x = p1.x + i;
+        p22.x = p2.x + i;
+
+        context.beginPath();
+        context.moveTo(p11.x, p11.y);
+        context.lineTo(p22.x, p22.y);
+        context.closePath();
+        context.stroke();
+    }
+};
+
+// HandleMorph stepping:
+
+HandleMorph.prototype.step = null;
+
+HandleMorph.prototype.mouseDownLeft = function (pos) {
+    var world = this.root(),
+        offset = pos.subtract(this.bounds.origin),
+        myself = this;
+
+    if (!this.target) {
+        return null;
+    }
+    this.step = function () {
+        var newPos, newExt;
+        if (world.hand.mouseButton) {
+            newPos = world.hand.bounds.origin.copy().subtract(offset);
+            if (this.type === 'resize') {
+                newExt = newPos.add(
+                    myself.extent().add(myself.inset)
+                ).subtract(myself.target.bounds.origin);
+                newExt = newExt.max(myself.minExtent);
+                myself.target.setExtent(newExt);
+
+                myself.setPosition(
+                    myself.target.bottomRight().subtract(
+                        myself.extent().add(myself.inset)
+                    )
+                );
+            } else { // type === 'move'
+                myself.target.setPosition(
+                    newPos.subtract(this.target.extent())
+                        .add(this.extent())
+                );
+            }
+        } else {
+            this.step = null;
+        }
+    };
+    if (!this.target.step) {
+        this.target.step = function () {
+            nop();
+        };
+    }
+};
+
+// HandleMorph dragging and dropping:
+
+HandleMorph.prototype.rootForGrab = function () {
+    return this;
+};
+
+// HandleMorph events:
+
+HandleMorph.prototype.mouseEnter = function () {
+    this.image = this.highlightImage;
+    this.changed();
+};
+
+HandleMorph.prototype.mouseLeave = function () {
+    this.image = this.normalImage;
+    this.changed();
+};
+
+// HandleMorph duplicating:
+
+HandleMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = HandleMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.target && dict[this.target]) {
+        c.target = (dict[this.target]);
+    }
+    return c;
+};
+
+// HandleMorph menu:
+
+HandleMorph.prototype.attach = function () {
+    var choices = this.overlappedMorphs(),
+        menu = new MenuMorph(this, 'choose target:'),
+        myself = this;
+
+    choices.forEach(function (each) {
+        menu.addItem(each.toString().slice(0, 50), function () {
+            myself.isDraggable = false;
+            myself.target = each;
+            myself.drawNew();
+            myself.noticesTransparentClick = true;
+        });
+    });
+    if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+// PenMorph ////////////////////////////////////////////////////////////
+
+// I am a simple LOGO-wise turtle.
+
+// PenMorph: referenced constructors
+
+var PenMorph;
+
+// PenMorph inherits from Morph:
+
+PenMorph.prototype = new Morph();
+PenMorph.prototype.constructor = PenMorph;
+PenMorph.uber = Morph.prototype;
+
+// PenMorph instance creation:
+
+function PenMorph() {
+    this.init();
+}
+
+PenMorph.prototype.init = function () {
+    var size = MorphicPreferences.handleSize * 4;
+
+    // additional properties:
+    this.isWarped = false; // internal optimization
+    this.heading = 0;
+    this.isDown = true;
+    this.size = 1;
+    this.wantsRedraw = false;
+    this.penPoint = 'tip'; // or 'center"
+
+    HandleMorph.uber.init.call(this);
+    this.setExtent(new Point(size, size));
+};
+
+// PenMorph updating - optimized for warping, i.e atomic recursion
+
+PenMorph.prototype.changed = function () {
+    if (this.isWarped === false) {
+        var w = this.root();
+        if (w instanceof WorldMorph) {
+            w.broken.push(this.visibleBounds().spread());
+        }
+        if (this.parent) {
+            this.parent.childChanged(this);
+        }
+    }
+};
+
+// PenMorph display:
+
+PenMorph.prototype.drawNew = function (facing) {
+/*
+    my orientation can be overridden with the "facing" parameter to
+    implement Scratch-style rotation styles
+    
+*/
+    var context, start, dest, left, right, len,
+        direction = facing || this.heading;
+
+    if (this.isWarped) {
+        this.wantsRedraw = true;
+        return;
+    }
+    this.image = newCanvas(this.extent());
+    context = this.image.getContext('2d');
+    len = this.width() / 2;
+    start = this.center().subtract(this.bounds.origin);
+
+    if (this.penPoint === 'tip') {
+        dest = start.distanceAngle(len * 0.75, direction - 180);
+        left = start.distanceAngle(len, direction + 195);
+        right = start.distanceAngle(len, direction - 195);
+    } else { // 'middle'
+        dest = start.distanceAngle(len * 0.75, direction);
+        left = start.distanceAngle(len * 0.33, direction + 230);
+        right = start.distanceAngle(len * 0.33, direction - 230);
+    }
+
+    context.fillStyle = this.color.toString();
+    context.beginPath();
+
+    context.moveTo(start.x, start.y);
+    context.lineTo(left.x, left.y);
+    context.lineTo(dest.x, dest.y);
+    context.lineTo(right.x, right.y);
+
+    context.closePath();
+    context.strokeStyle = 'white';
+    context.lineWidth = 3;
+    context.stroke();
+    context.strokeStyle = 'black';
+    context.lineWidth = 1;
+    context.stroke();
+    context.fill();
+
+};
+
+// PenMorph access:
+
+PenMorph.prototype.setHeading = function (degrees) {
+    this.heading = parseFloat(degrees) % 360;
+    this.drawNew();
+    this.changed();
+};
+
+// PenMorph drawing:
+
+PenMorph.prototype.drawLine = function (start, dest) {
+    var context = this.parent.penTrails().getContext('2d'),
+        from = start.subtract(this.parent.bounds.origin),
+        to = dest.subtract(this.parent.bounds.origin);
+    if (this.isDown) {
+        context.lineWidth = this.size;
+        context.strokeStyle = this.color.toString();
+        context.lineCap = 'round';
+        context.lineJoin = 'round';
+        context.beginPath();
+        context.moveTo(from.x, from.y);
+        context.lineTo(to.x, to.y);
+        context.stroke();
+        if (this.isWarped === false) {
+            this.world().broken.push(
+                start.rectangle(dest).expandBy(
+                    Math.max(this.size / 2, 1)
+                ).intersect(this.parent.visibleBounds()).spread()
+            );
+        }
+    }
+};
+
+// PenMorph turtle ops:
+
+PenMorph.prototype.turn = function (degrees) {
+    this.setHeading(this.heading + parseFloat(degrees));
+};
+
+PenMorph.prototype.forward = function (steps) {
+    var start = this.center(),
+        dest,
+        dist = parseFloat(steps);
+    if (dist >= 0) {
+        dest = this.position().distanceAngle(dist, this.heading);
+    } else {
+        dest = this.position().distanceAngle(
+            Math.abs(dist),
+            (this.heading - 180)
+        );
+    }
+    this.setPosition(dest);
+    this.drawLine(start, this.center());
+};
+
+PenMorph.prototype.down = function () {
+    this.isDown = true;
+};
+
+PenMorph.prototype.up = function () {
+    this.isDown = false;
+};
+
+PenMorph.prototype.clear = function () {
+    this.parent.drawNew();
+    this.parent.changed();
+};
+
+// PenMorph optimization for atomic recursion:
+
+PenMorph.prototype.startWarp = function () {
+    this.wantsRedraw = false;
+    this.isWarped = true;
+};
+
+PenMorph.prototype.endWarp = function () {
+    this.isWarped = false;
+    if (this.wantsRedraw) {
+        this.drawNew();
+        this.wantsRedraw = false;
+    }
+    this.parent.changed();
+};
+
+PenMorph.prototype.warp = function (fun) {
+    this.startWarp();
+    fun.call(this);
+    this.endWarp();
+};
+
+PenMorph.prototype.warpOp = function (selector, argsArray) {
+    this.startWarp();
+    this[selector].apply(this, argsArray);
+    this.endWarp();
+};
+
+// PenMorph demo ops:
+// try these with WARP eg.: this.warp(function () {tree(12, 120, 20)})
+
+PenMorph.prototype.warpSierpinski = function (length, min) {
+    this.warpOp('sierpinski', [length, min]);
+};
+
+PenMorph.prototype.sierpinski = function (length, min) {
+    var i;
+    if (length > min) {
+        for (i = 0; i < 3; i += 1) {
+            this.sierpinski(length * 0.5, min);
+            this.turn(120);
+            this.forward(length);
+        }
+    }
+};
+
+PenMorph.prototype.warpTree = function (level, length, angle) {
+    this.warpOp('tree', [level, length, angle]);
+};
+
+PenMorph.prototype.tree = function (level, length, angle) {
+    if (level > 0) {
+        this.size = level;
+        this.forward(length);
+        this.turn(angle);
+        this.tree(level - 1, length * 0.75, angle);
+        this.turn(angle * -2);
+        this.tree(level - 1, length * 0.75, angle);
+        this.turn(angle);
+        this.forward(-length);
+    }
+};
+
+// ColorPaletteMorph ///////////////////////////////////////////////////
+
+var ColorPaletteMorph;
+
+// ColorPaletteMorph inherits from Morph:
+
+ColorPaletteMorph.prototype = new Morph();
+ColorPaletteMorph.prototype.constructor = ColorPaletteMorph;
+ColorPaletteMorph.uber = Morph.prototype;
+
+// ColorPaletteMorph instance creation:
+
+function ColorPaletteMorph(target, sizePoint) {
+    this.init(
+        target || null,
+        sizePoint || new Point(80, 50)
+    );
+}
+
+ColorPaletteMorph.prototype.init = function (target, size) {
+    ColorPaletteMorph.uber.init.call(this);
+    this.target = target;
+    this.targetSetter = 'color';
+    this.silentSetExtent(size);
+    this.choice = null;
+    this.drawNew();
+};
+
+ColorPaletteMorph.prototype.drawNew = function () {
+    var context, ext, x, y, h, l;
+
+    ext = this.extent();
+    this.image = newCanvas(this.extent());
+    context = this.image.getContext('2d');
+    this.choice = new Color();
+    for (x = 0; x <= ext.x; x += 1) {
+        h = 360 * x / ext.x;
+        for (y = 0; y <= ext.y; y += 1) {
+            l = 100 - (y / ext.y * 100);
+            context.fillStyle = 'hsl(' + h + ',100%,' + l + '%)';
+            context.fillRect(x, y, 1, 1);
+        }
+    }
+};
+
+ColorPaletteMorph.prototype.mouseMove = function (pos) {
+    this.choice = this.getPixelColor(pos);
+    this.updateTarget();
+};
+
+ColorPaletteMorph.prototype.mouseDownLeft = function (pos) {
+    this.choice = this.getPixelColor(pos);
+    this.updateTarget();
+};
+
+ColorPaletteMorph.prototype.updateTarget = function () {
+    if (this.target instanceof Morph && this.choice !== null) {
+        if (this.target[this.targetSetter] instanceof Function) {
+            this.target[this.targetSetter](this.choice);
+        } else {
+            this.target[this.targetSetter] = this.choice;
+            this.target.drawNew();
+            this.target.changed();
+        }
+    }
+};
+
+// ColorPaletteMorph duplicating:
+
+ColorPaletteMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = ColorPaletteMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.target && dict[this.target]) {
+        c.target = (dict[this.target]);
+    }
+    return c;
+};
+
+// ColorPaletteMorph menu:
+
+ColorPaletteMorph.prototype.developersMenu = function () {
+    var menu = ColorPaletteMorph.uber.developersMenu.call(this);
+    menu.addLine();
+    menu.addItem(
+        'set target',
+        "setTarget",
+        'choose another morph\nwhose color property\n will be' +
+            ' controlled by this one'
+    );
+    return menu;
+};
+
+ColorPaletteMorph.prototype.setTarget = function () {
+    var choices = this.overlappedMorphs(),
+        menu = new MenuMorph(this, 'choose target:'),
+        myself = this;
+
+    choices.push(this.world());
+    choices.forEach(function (each) {
+        menu.addItem(each.toString().slice(0, 50), function () {
+            myself.target = each;
+            myself.setTargetSetter();
+        });
+    });
+    if (choices.length === 1) {
+        this.target = choices[0];
+        this.setTargetSetter();
+    } else if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+ColorPaletteMorph.prototype.setTargetSetter = function () {
+    var choices = this.target.colorSetters(),
+        menu = new MenuMorph(this, 'choose target property:'),
+        myself = this;
+
+    choices.forEach(function (each) {
+        menu.addItem(each, function () {
+            myself.targetSetter = each;
+        });
+    });
+    if (choices.length === 1) {
+        this.targetSetter = choices[0];
+    } else if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+// GrayPaletteMorph ///////////////////////////////////////////////////
+
+var GrayPaletteMorph;
+
+// GrayPaletteMorph inherits from ColorPaletteMorph:
+
+GrayPaletteMorph.prototype = new ColorPaletteMorph();
+GrayPaletteMorph.prototype.constructor = GrayPaletteMorph;
+GrayPaletteMorph.uber = ColorPaletteMorph.prototype;
+
+// GrayPaletteMorph instance creation:
+
+function GrayPaletteMorph(target, sizePoint) {
+    this.init(
+        target || null,
+        sizePoint || new Point(80, 10)
+    );
+}
+
+GrayPaletteMorph.prototype.drawNew = function () {
+    var context, ext, gradient;
+
+    ext = this.extent();
+    this.image = newCanvas(this.extent());
+    context = this.image.getContext('2d');
+    this.choice = new Color();
+    gradient = context.createLinearGradient(0, 0, ext.x, ext.y);
+    gradient.addColorStop(0, 'black');
+    gradient.addColorStop(1, 'white');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, ext.x, ext.y);
+};
+
+// ColorPickerMorph ///////////////////////////////////////////////////
+
+// ColorPickerMorph inherits from Morph:
+
+ColorPickerMorph.prototype = new Morph();
+ColorPickerMorph.prototype.constructor = ColorPickerMorph;
+ColorPickerMorph.uber = Morph.prototype;
+
+// ColorPickerMorph instance creation:
+
+function ColorPickerMorph(defaultColor) {
+    this.init(defaultColor || new Color(255, 255, 255));
+}
+
+ColorPickerMorph.prototype.init = function (defaultColor) {
+    this.choice = defaultColor;
+    ColorPickerMorph.uber.init.call(this);
+    this.color = new Color(255, 255, 255);
+    this.silentSetExtent(new Point(80, 80));
+    this.drawNew();
+};
+
+ColorPickerMorph.prototype.drawNew = function () {
+    ColorPickerMorph.uber.drawNew.call(this);
+    this.buildSubmorphs();
+};
+
+ColorPickerMorph.prototype.buildSubmorphs = function () {
+    var cpal, gpal, x, y;
+
+    this.children.forEach(function (child) {
+        child.destroy();
+    });
+    this.children = [];
+    this.feedback = new Morph();
+    this.feedback.color = this.choice;
+    this.feedback.setExtent(new Point(20, 20));
+    cpal = new ColorPaletteMorph(
+        this.feedback,
+        new Point(this.width(), 50)
+    );
+    gpal = new GrayPaletteMorph(
+        this.feedback,
+        new Point(this.width(), 5)
+    );
+    cpal.setPosition(this.bounds.origin);
+    this.add(cpal);
+    gpal.setPosition(cpal.bottomLeft());
+    this.add(gpal);
+    x = (gpal.left() +
+        Math.floor((gpal.width() - this.feedback.width()) / 2));
+    y = gpal.bottom() + Math.floor((this.bottom() -
+        gpal.bottom() - this.feedback.height()) / 2);
+    this.feedback.setPosition(new Point(x, y));
+    this.add(this.feedback);
+};
+
+ColorPickerMorph.prototype.getChoice = function () {
+    return this.feedback.color;
+};
+
+ColorPickerMorph.prototype.rootForGrab = function () {
+    return this;
+};
+
+// BlinkerMorph ////////////////////////////////////////////////////////
+
+// can be used for text cursors
+
+var BlinkerMorph;
+
+// BlinkerMorph inherits from Morph:
+
+BlinkerMorph.prototype = new Morph();
+BlinkerMorph.prototype.constructor = BlinkerMorph;
+BlinkerMorph.uber = Morph.prototype;
+
+// BlinkerMorph instance creation:
+
+function BlinkerMorph(rate) {
+    this.init(rate);
+}
+
+BlinkerMorph.prototype.init = function (rate) {
+    BlinkerMorph.uber.init.call(this);
+    this.color = new Color(0, 0, 0);
+    this.fps = rate || 2;
+    this.drawNew();
+};
+
+// BlinkerMorph stepping:
+
+BlinkerMorph.prototype.step = function () {
+    this.toggleVisibility();
+};
+
+// CursorMorph /////////////////////////////////////////////////////////
+
+// I am a String/Text editing widget
+
+// CursorMorph: referenced constructors
+
+var CursorMorph;
+
+// CursorMorph inherits from BlinkerMorph:
+
+CursorMorph.prototype = new BlinkerMorph();
+CursorMorph.prototype.constructor = CursorMorph;
+CursorMorph.uber = BlinkerMorph.prototype;
+
+// CursorMorph preferences settings:
+
+CursorMorph.prototype.viewPadding = 1;
+
+// CursorMorph instance creation:
+
+function CursorMorph(aStringOrTextMorph) {
+    this.init(aStringOrTextMorph);
+}
+
+CursorMorph.prototype.init = function (aStringOrTextMorph) {
+    var ls;
+
+    // additional properties:
+    this.keyDownEventUsed = false;
+    this.target = aStringOrTextMorph;
+    this.originalContents = this.target.text;
+    this.originalAlignment = this.target.alignment;
+    this.slot = this.target.text.length;
+    CursorMorph.uber.init.call(this);
+    ls = fontHeight(this.target.fontSize);
+    this.setExtent(new Point(Math.max(Math.floor(ls / 20), 1), ls));
+    this.drawNew();
+    this.image.getContext('2d').font = this.target.font();
+    if (this.target instanceof TextMorph &&
+            (this.target.alignment !== 'left')) {
+        this.target.setAlignmentToLeft();
+    }
+    this.gotoSlot(this.slot);
+};
+
+// CursorMorph event processing:
+
+CursorMorph.prototype.processKeyPress = function (event) {
+    // this.inspectKeyEvent(event);
+    if (this.keyDownEventUsed) {
+        this.keyDownEventUsed = false;
+        return null;
+    }
+    if ((event.keyCode === 40) || event.charCode === 40) {
+        this.insert('(');
+        return null;
+    }
+    if ((event.keyCode === 37) || event.charCode === 37) {
+        this.insert('%');
+        return null;
+    }
+    if (event.keyCode) { // Opera doesn't support charCode
+        if (event.ctrlKey) {
+            this.ctrl(event.keyCode);
+        } else if (event.metaKey) {
+            this.cmd(event.keyCode);
+        } else {
+            this.insert(
+                String.fromCharCode(event.keyCode),
+                event.shiftKey
+            );
+        }
+    } else if (event.charCode) { // all other browsers
+        if (event.ctrlKey) {
+            this.ctrl(event.charCode);
+        } else if (event.metaKey) {
+            this.cmd(event.keyCode);
+        } else {
+            this.insert(
+                String.fromCharCode(event.charCode),
+                event.shiftKey
+            );
+        }
+    }
+    // notify target's parent of key event
+    this.target.escalateEvent('reactToKeystroke', event);
+};
+
+CursorMorph.prototype.processKeyDown = function (event) {
+    // this.inspectKeyEvent(event);
+    var shift = event.shiftKey;
+    this.keyDownEventUsed = false;
+    if (event.ctrlKey) {
+        this.ctrl(event.keyCode);
+        // notify target's parent of key event
+        this.target.escalateEvent('reactToKeystroke', event);
+        return;
+    }
+    if (event.metaKey) {
+        this.cmd(event.keyCode);
+        // notify target's parent of key event
+        this.target.escalateEvent('reactToKeystroke', event);
+        return;
+    }
+
+    switch (event.keyCode) {
+    case 37:
+        this.goLeft(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 39:
+        this.goRight(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 38:
+        this.goUp(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 40:
+        this.goDown(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 36:
+        this.goHome(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 35:
+        this.goEnd(shift);
+        this.keyDownEventUsed = true;
+        break;
+    case 46:
+        this.deleteRight();
+        this.keyDownEventUsed = true;
+        break;
+    case 8:
+        this.deleteLeft();
+        this.keyDownEventUsed = true;
+        break;
+    case 13:
+        if (this.target instanceof StringMorph) {
+            this.accept();
+        } else {
+            this.insert('\n');
+        }
+        this.keyDownEventUsed = true;
+        break;
+    case 27:
+        this.cancel();
+        this.keyDownEventUsed = true;
+        break;
+    default:
+        // this.inspectKeyEvent(event);
+    }
+    // notify target's parent of key event
+    this.target.escalateEvent('reactToKeystroke', event);
+};
+
+// CursorMorph navigation:
+
+/*
+// original non-scrolling code, commented out in case we need to fall back:
+
+CursorMorph.prototype.gotoSlot = function (newSlot) {
+    this.setPosition(this.target.slotPosition(newSlot));
+    this.slot = Math.max(newSlot, 0);
+};
+*/
+
+CursorMorph.prototype.gotoSlot = function (slot) {
+    var length = this.target.text.length,
+        pos = this.target.slotPosition(slot),
+        right,
+        left;
+    this.slot = slot < 0 ? 0 : slot > length ? length : slot;
+    if (this.parent && this.target.isScrollable) {
+        right = this.parent.right() - this.viewPadding;
+        left = this.parent.left() + this.viewPadding;
+        if (pos.x > right) {
+            this.target.setLeft(this.target.left() + right - pos.x);
+            pos.x = right;
+        }
+        if (pos.x < left) {
+            left = Math.min(this.parent.left(), left);
+            this.target.setLeft(this.target.left() + left - pos.x);
+            pos.x = left;
+        }
+        if (this.target.right() < right &&
+                right - this.target.width() < left) {
+            pos.x += right - this.target.right();
+            this.target.setRight(right);
+        }
+    }
+    this.show();
+    this.setPosition(pos);
+    if (this.parent
+            && this.parent.parent instanceof ScrollFrameMorph
+            && this.target.isScrollable) {
+        this.parent.parent.scrollCursorIntoView(this);
+    }
+};
+
+CursorMorph.prototype.goLeft = function (shift) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.slot - 1);
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.goRight = function (shift, howMany) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.slot + (howMany || 1));
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.goUp = function (shift) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.target.upFrom(this.slot));
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.goDown = function (shift) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.target.downFrom(this.slot));
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.goHome = function (shift) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.target.startOfLine(this.slot));
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.goEnd = function (shift) {
+    this.updateSelection(shift);
+    this.gotoSlot(this.target.endOfLine(this.slot));
+    this.updateSelection(shift);
+};
+
+CursorMorph.prototype.gotoPos = function (aPoint) {
+    this.gotoSlot(this.target.slotAt(aPoint));
+    this.show();
+};
+
+// CursorMorph selecting:
+
+CursorMorph.prototype.updateSelection = function (shift) {
+    if (shift) {
+        if (!this.target.endMark && !this.target.startMark) {
+            this.target.startMark = this.slot;
+            this.target.endMark = this.slot;
+        } else if (this.target.endMark !== this.slot) {
+            this.target.endMark = this.slot;
+            this.target.drawNew();
+            this.target.changed();
+        }
+    } else {
+        this.target.clearSelection();
+    }
+};
+
+// CursorMorph editing:
+
+CursorMorph.prototype.accept = function () {
+    var world = this.root();
+    if (world) {
+        world.stopEditing();
+    }
+    this.escalateEvent('accept', null);
+};
+
+CursorMorph.prototype.cancel = function () {
+    var world = this.root();
+    this.undo();
+    if (world) {
+        world.stopEditing();
+    }
+    this.escalateEvent('cancel', null);
+};
+
+CursorMorph.prototype.undo = function () {
+    this.target.text = this.originalContents;
+    this.target.changed();
+    this.target.drawNew();
+    this.target.changed();
+    this.gotoSlot(0);
+};
+
+CursorMorph.prototype.insert = function (aChar, shiftKey) {
+    var text;
+    if (aChar === '\u0009') {
+        this.target.escalateEvent('reactToEdit', this.target);
+        if (shiftKey) {
+            return this.target.backTab(this.target);
+        }
+        return this.target.tab(this.target);
+    }
+    if (!this.target.isNumeric ||
+            !isNaN(parseFloat(aChar)) ||
+            contains(['-', '.'], aChar)) {
+        if (this.target.selection() !== '') {
+            this.gotoSlot(this.target.selectionStartSlot());
+            this.target.deleteSelection();
+        }
+        text = this.target.text;
+        text = text.slice(0, this.slot) +
+            aChar +
+            text.slice(this.slot);
+        this.target.text = text;
+        this.target.drawNew();
+        this.target.changed();
+        this.goRight(false, aChar.length);
+    }
+};
+
+CursorMorph.prototype.ctrl = function (aChar) {
+    if ((aChar === 97) || (aChar === 65)) {
+        this.target.selectAll();
+    } else if (aChar === 90) {
+        this.undo();
+    } else if (aChar === 123) {
+        this.insert('{');
+    } else if (aChar === 125) {
+        this.insert('}');
+    } else if (aChar === 91) {
+        this.insert('[');
+    } else if (aChar === 93) {
+        this.insert(']');
+    } else if (aChar === 64) {
+        this.insert('@');
+    }
+
+};
+
+CursorMorph.prototype.cmd = function (aChar) {
+    if (aChar === 65) {
+        this.target.selectAll();
+    } else if (aChar === 90) {
+        this.undo();
+    }
+};
+
+CursorMorph.prototype.deleteRight = function () {
+    var text;
+    if (this.target.selection() !== '') {
+        this.gotoSlot(this.target.selectionStartSlot());
+        this.target.deleteSelection();
+    } else {
+        text = this.target.text;
+        this.target.changed();
+        text = text.slice(0, this.slot) + text.slice(this.slot + 1);
+        this.target.text = text;
+        this.target.drawNew();
+    }
+};
+
+CursorMorph.prototype.deleteLeft = function () {
+    var text;
+    if (this.target.selection()) {
+        this.gotoSlot(this.target.selectionStartSlot());
+        return this.target.deleteSelection();
+    }
+    text = this.target.text;
+    this.target.changed();
+    this.target.text = text.substring(0, this.slot - 1) +
+        text.substr(this.slot);
+    this.target.drawNew();
+    this.goLeft();
+};
+
+// CursorMorph destroying:
+
+CursorMorph.prototype.destroy = function () {
+    if (this.target.alignment !== this.originalAlignment) {
+        this.target.alignment = this.originalAlignment;
+        this.target.drawNew();
+        this.target.changed();
+    }
+    CursorMorph.uber.destroy.call(this);
+};
+
+// CursorMorph utilities:
+
+CursorMorph.prototype.inspectKeyEvent = function (event) {
+    // private
+    this.inform(
+        'Key pressed: ' +
+            String.fromCharCode(event.charCode) +
+            '\n------------------------' +
+            '\ncharCode: ' +
+            event.charCode.toString() +
+            '\nkeyCode: ' +
+            event.keyCode.toString() +
+            '\nshiftKey: ' +
+            event.shiftKey.toString() +
+            '\naltKey: ' +
+            event.altKey.toString() +
+            '\nctrlKey: ' +
+            event.ctrlKey.toString() +
+            '\ncmdKey: ' +
+            event.metaKey.toString()
+    );
+};
+
+// BoxMorph ////////////////////////////////////////////////////////////
+
+// I can have an optionally rounded border
+
+var BoxMorph;
+
+// BoxMorph inherits from Morph:
+
+BoxMorph.prototype = new Morph();
+BoxMorph.prototype.constructor = BoxMorph;
+BoxMorph.uber = Morph.prototype;
+
+// BoxMorph instance creation:
+
+function BoxMorph(edge, border, borderColor) {
+    this.init(edge, border, borderColor);
+}
+
+BoxMorph.prototype.init = function (edge, border, borderColor) {
+    this.edge = edge || 4;
+    this.border = border || ((border === 0) ? 0 : 2);
+    this.borderColor = borderColor || new Color();
+    BoxMorph.uber.init.call(this);
+};
+
+// BoxMorph drawing:
+
+BoxMorph.prototype.drawNew = function () {
+    var context;
+
+    this.image = newCanvas(this.extent());
+    context = this.image.getContext('2d');
+    if ((this.edge === 0) && (this.border === 0)) {
+        BoxMorph.uber.drawNew.call(this);
+        return null;
+    }
+    context.fillStyle = this.color.toString();
+    context.beginPath();
+    this.outlinePath(
+        context,
+        Math.max(this.edge - this.border, 0),
+        this.border
+    );
+    context.closePath();
+    context.fill();
+    if (this.border > 0) {
+        context.lineWidth = this.border;
+        context.strokeStyle = this.borderColor.toString();
+        context.beginPath();
+        this.outlinePath(context, this.edge, this.border / 2);
+        context.closePath();
+        context.stroke();
+    }
+};
+
+BoxMorph.prototype.outlinePath = function (context, radius, inset) {
+    var offset = radius + inset,
+        w = this.width(),
+        h = this.height();
+
+    // top left:
+    context.arc(
+        offset,
+        offset,
+        radius,
+        radians(-180),
+        radians(-90),
+        false
+    );
+    // top right:
+    context.arc(
+        w - offset,
+        offset,
+        radius,
+        radians(-90),
+        radians(-0),
+        false
+    );
+    // bottom right:
+    context.arc(
+        w - offset,
+        h - offset,
+        radius,
+        radians(0),
+        radians(90),
+        false
+    );
+    // bottom left:
+    context.arc(
+        offset,
+        h - offset,
+        radius,
+        radians(90),
+        radians(180),
+        false
+    );
+};
+
+
+// BoxMorph menus:
+
+BoxMorph.prototype.developersMenu = function () {
+    var menu = BoxMorph.uber.developersMenu.call(this);
+    menu.addLine();
+    menu.addItem(
+        "border width...",
+        function () {
+            this.prompt(
+                menu.title + '\nborder\nwidth:',
+                this.setBorderWidth,
+                this,
+                this.border.toString(),
+                null,
+                0,
+                100,
+                true
+            );
+        },
+        'set the border\'s\nline size'
+    );
+    menu.addItem(
+        "border color...",
+        function () {
+            this.pickColor(
+                menu.title + '\nborder color:',
+                this.setBorderColor,
+                this,
+                this.borderColor
+            );
+        },
+        'set the border\'s\nline color'
+    );
+    menu.addItem(
+        "corner size...",
+        function () {
+            this.prompt(
+                menu.title + '\ncorner\nsize:',
+                this.setCornerSize,
+                this,
+                this.edge.toString(),
+                null,
+                0,
+                100,
+                true
+            );
+        },
+        'set the corner\'s\nradius'
+    );
+    return menu;
+};
+
+BoxMorph.prototype.setBorderWidth = function (size) {
+    // for context menu demo purposes
+    var newSize;
+    if (typeof size === 'number') {
+        this.border = Math.max(size, 0);
+    } else {
+        newSize = parseFloat(size);
+        if (!isNaN(newSize)) {
+            this.border = Math.max(newSize, 0);
+        }
+    }
+    this.drawNew();
+    this.changed();
+};
+
+BoxMorph.prototype.setBorderColor = function (color) {
+    // for context menu demo purposes
+    if (color) {
+        this.borderColor = color;
+        this.drawNew();
+        this.changed();
+    }
+};
+
+BoxMorph.prototype.setCornerSize = function (size) {
+    // for context menu demo purposes
+    var newSize;
+    if (typeof size === 'number') {
+        this.edge = Math.max(size, 0);
+    } else {
+        newSize = parseFloat(size);
+        if (!isNaN(newSize)) {
+            this.edge = Math.max(newSize, 0);
+        }
+    }
+    this.drawNew();
+    this.changed();
+};
+
+BoxMorph.prototype.colorSetters = function () {
+    // for context menu demo purposes
+    return ['color', 'borderColor'];
+};
+
+BoxMorph.prototype.numericalSetters = function () {
+    // for context menu demo purposes
+    var list = BoxMorph.uber.numericalSetters.call(this);
+    list.push('setBorderWidth', 'setCornerSize');
+    return list;
+};
+
+// SpeechBubbleMorph ///////////////////////////////////////////////////
+
+/*
+    I am a comic-style speech bubble that can display either a string,
+    a Morph, a Canvas or a toString() representation of anything else.
+    If I am invoked using popUp() I behave like a tool tip.
+*/
+
+// SpeechBubbleMorph: referenced constructors
+
+var SpeechBubbleMorph;
+
+// SpeechBubbleMorph inherits from BoxMorph:
+
+SpeechBubbleMorph.prototype = new BoxMorph();
+SpeechBubbleMorph.prototype.constructor = SpeechBubbleMorph;
+SpeechBubbleMorph.uber = BoxMorph.prototype;
+
+// SpeechBubbleMorph instance creation:
+
+function SpeechBubbleMorph(
+    contents,
+    color,
+    edge,
+    border,
+    borderColor,
+    padding,
+    isThought
+) {
+    this.init(contents, color, edge, border, borderColor, padding, isThought);
+}
+
+SpeechBubbleMorph.prototype.init = function (
+    contents,
+    color,
+    edge,
+    border,
+    borderColor,
+    padding,
+    isThought
+) {
+    this.isPointingRight = true; // orientation of text
+    this.contents = contents || '';
+    this.padding = padding || 0; // additional vertical pixels
+    this.isThought = isThought || false; // draw "think" bubble
+    this.isClickable = false;
+    SpeechBubbleMorph.uber.init.call(
+        this,
+        edge || 6,
+        border || ((border === 0) ? 0 : 1),
+        borderColor || new Color(140, 140, 140)
+    );
+    this.color = color || new Color(230, 230, 230);
+    this.drawNew();
+};
+
+// SpeechBubbleMorph invoking:
+
+SpeechBubbleMorph.prototype.popUp = function (world, pos, isClickable) {
+    this.drawNew();
+    this.setPosition(pos.subtract(new Point(0, this.height())));
+    this.addShadow(new Point(2, 2), 80);
+    this.keepWithin(world);
+    world.add(this);
+    this.changed();
+    world.hand.destroyTemporaries();
+    world.hand.temporaries.push(this);
+
+    if (!isClickable) {
+        this.mouseEnter = function () {
+            this.destroy();
+        };
+    } else {
+        this.isClickable = true;
+    }
+};
+
+// SpeechBubbleMorph drawing:
+
+SpeechBubbleMorph.prototype.drawNew = function () {
+    // re-build my contents
+    if (this.contentsMorph) {
+        this.contentsMorph.destroy();
+    }
+    if (this.contents instanceof Morph) {
+        this.contentsMorph = this.contents;
+    } else if (isString(this.contents)) {
+        this.contentsMorph = new TextMorph(
+            this.contents,
+            MorphicPreferences.bubbleHelpFontSize,
+            null,
+            false,
+            true,
+            'center'
+        );
+    } else if (this.contents instanceof HTMLCanvasElement) {
+        this.contentsMorph = new Morph();
+        this.contentsMorph.silentSetWidth(this.contents.width);
+        this.contentsMorph.silentSetHeight(this.contents.height);
+        this.contentsMorph.image = this.contents;
+    } else {
+        this.contentsMorph = new TextMorph(
+            this.contents.toString(),
+            MorphicPreferences.bubbleHelpFontSize,
+            null,
+            false,
+            true,
+            'center'
+        );
+    }
+    this.add(this.contentsMorph);
+
+    // adjust my layout
+    this.silentSetWidth(this.contentsMorph.width() +
+        (this.padding ? this.padding * 2 : this.edge * 2));
+    this.silentSetHeight(this.contentsMorph.height() +
+        this.edge +
+        this.border * 2 +
+        this.padding * 2 +
+        2);
+
+    // draw my outline
+    SpeechBubbleMorph.uber.drawNew.call(this);
+
+    // position my contents
+    this.contentsMorph.setPosition(this.position().add(
+        new Point(
+            this.padding || this.edge,
+            this.border + this.padding + 1
+        )
+    ));
+};
+
+SpeechBubbleMorph.prototype.outlinePath = function (
+    context,
+    radius,
+    inset
+) {
+    var offset = radius + inset,
+        w = this.width(),
+        h = this.height(),
+        rad;
+
+    function circle(x, y, r) {
+        context.moveTo(x + r, y);
+        context.arc(x, y, r, radians(0), radians(360));
+    }
+
+    // top left:
+    context.arc(
+        offset,
+        offset,
+        radius,
+        radians(-180),
+        radians(-90),
+        false
+    );
+    // top right:
+    context.arc(
+        w - offset,
+        offset,
+        radius,
+        radians(-90),
+        radians(-0),
+        false
+    );
+    // bottom right:
+    context.arc(
+        w - offset,
+        h - offset - radius,
+        radius,
+        radians(0),
+        radians(90),
+        false
+    );
+    if (!this.isThought) { // draw speech bubble hook
+        if (this.isPointingRight) {
+            context.lineTo(
+                offset + radius,
+                h - offset
+            );
+            context.lineTo(
+                radius / 2 + inset,
+                h - inset
+            );
+        } else { // pointing left
+            context.lineTo(
+                w - (radius / 2 + inset),
+                h - inset
+            );
+            context.lineTo(
+                w - (offset + radius),
+                h - offset
+            );
+        }
+    }
+    // bottom left:
+    context.arc(
+        offset,
+        h - offset - radius,
+        radius,
+        radians(90),
+        radians(180),
+        false
+    );
+    if (this.isThought) {
+        // close large bubble:
+        context.lineTo(
+            inset,
+            offset
+        );
+        // draw thought bubbles:
+        if (this.isPointingRight) {
+            // tip bubble:
+            rad = radius / 4;
+            circle(rad + inset, h - rad - inset, rad);
+            // middle bubble:
+            rad = radius / 3.2;
+            circle(rad * 2 + inset, h - rad - inset * 2, rad);
+            // top bubble:
+            rad = radius / 2.8;
+            circle(rad * 3 + inset * 2, h - rad - inset * 4, rad);
+        } else { // pointing left
+            // tip bubble:
+            rad = radius / 4;
+            circle(w - (rad + inset), h - rad - inset, rad);
+            // middle bubble:
+            rad = radius / 3.2;
+            circle(w - (rad * 2 + inset), h - rad - inset * 2, rad);
+            // top bubble:
+            rad = radius / 2.8;
+            circle(w - (rad * 3 + inset * 2), h - rad - inset * 4, rad);
+        }
+    }
+};
+
+// SpeechBubbleMorph shadow
+
+/*
+    only take the 'plain' image, so the box rounding and the
+    shadow doesn't become conflicted by embedded scrolling panes
+*/
+
+SpeechBubbleMorph.prototype.shadowImage = function (off, color) {
+    // fallback for Windows Chrome-Shadow bug
+    var fb, img, outline, sha, ctx,
+        offset = off || new Point(7, 7),
+        clr = color || new Color(0, 0, 0);
+    fb = this.extent();
+    img = this.image;
+    outline = newCanvas(fb);
+    ctx = outline.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.drawImage(
+        img,
+        -offset.x,
+        -offset.y
+    );
+    sha = newCanvas(fb);
+    ctx = sha.getContext('2d');
+    ctx.drawImage(outline, 0, 0);
+    ctx.globalCompositeOperation = 'source-atop';
+    ctx.fillStyle = clr.toString();
+    ctx.fillRect(0, 0, fb.x, fb.y);
+    return sha;
+};
+
+SpeechBubbleMorph.prototype.shadowImageBlurred = function (off, color) {
+    var fb, img, sha, ctx,
+        offset = off || new Point(7, 7),
+        blur = this.shadowBlur,
+        clr = color || new Color(0, 0, 0);
+    fb = this.extent().add(blur * 2);
+    img = this.image;
+    sha = newCanvas(fb);
+    ctx = sha.getContext('2d');
+    ctx.shadowOffsetX = offset.x;
+    ctx.shadowOffsetY = offset.y;
+    ctx.shadowBlur = blur;
+    ctx.shadowColor = clr.toString();
+    ctx.drawImage(
+        img,
+        blur - offset.x,
+        blur - offset.y
+    );
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 0;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.drawImage(
+        img,
+        blur - offset.x,
+        blur - offset.y
+    );
+    return sha;
+};
+
+// SpeechBubbleMorph resizing
+
+SpeechBubbleMorph.prototype.fixLayout = function () {
+    this.removeShadow();
+    this.drawNew();
+    this.addShadow(new Point(2, 2), 80);
+};
+
+// CircleBoxMorph //////////////////////////////////////////////////////
+
+// I can be used for sliders
+
+var CircleBoxMorph;
+
+// CircleBoxMorph inherits from Morph:
+
+CircleBoxMorph.prototype = new Morph();
+CircleBoxMorph.prototype.constructor = CircleBoxMorph;
+CircleBoxMorph.uber = Morph.prototype;
+
+function CircleBoxMorph(orientation) {
+    this.init(orientation || 'vertical');
+}
+
+CircleBoxMorph.prototype.init = function (orientation) {
+    CircleBoxMorph.uber.init.call(this);
+    this.orientation = orientation;
+    this.autoOrient = true;
+    this.setExtent(new Point(20, 100));
+};
+
+CircleBoxMorph.prototype.autoOrientation = function () {
+    if (this.height() > this.width()) {
+        this.orientation = 'vertical';
+    } else {
+        this.orientation = 'horizontal';
+    }
+};
+
+CircleBoxMorph.prototype.drawNew = function () {
+    var radius, center1, center2, rect, points, x, y,
+        context, ext,
+        myself = this;
+
+    if (this.autoOrient) {
+        this.autoOrientation();
+    }
+    this.image = newCanvas(this.extent());
+    context = this.image.getContext('2d');
+
+    if (this.orientation === 'vertical') {
+        radius = this.width() / 2;
+        x = this.center().x;
+        center1 = new Point(x, this.top() + radius);
+        center2 = new Point(x, this.bottom() - radius);
+        rect = this.bounds.origin.add(new Point(0, radius)).corner(
+            this.bounds.corner.subtract(new Point(0, radius))
+        );
+    } else {
+        radius = this.height() / 2;
+        y = this.center().y;
+        center1 = new Point(this.left() + radius, y);
+        center2 = new Point(this.right() - radius, y);
+        rect = this.bounds.origin.add(new Point(radius, 0)).corner(
+            this.bounds.corner.subtract(new Point(radius, 0))
+        );
+    }
+    points = [ center1.subtract(this.bounds.origin),
+        center2.subtract(this.bounds.origin)];
+    points.forEach(function (center) {
+        context.fillStyle = myself.color.toString();
+        context.beginPath();
+        context.arc(
+            center.x,
+            center.y,
+            radius,
+            0,
+            2 * Math.PI,
+            false
+        );
+        context.closePath();
+        context.fill();
+    });
+    rect = rect.translateBy(this.bounds.origin.neg());
+    ext = rect.extent();
+    if (ext.x > 0 && ext.y > 0) {
+        context.fillRect(
+            rect.origin.x,
+            rect.origin.y,
+            rect.width(),
+            rect.height()
+        );
+    }
+};
+
+// CircleBoxMorph menu:
+
+CircleBoxMorph.prototype.developersMenu = function () {
+    var menu = CircleBoxMorph.uber.developersMenu.call(this);
+    menu.addLine();
+    if (this.orientation === 'vertical') {
+        menu.addItem(
+            "horizontal...",
+            'toggleOrientation',
+            'toggle the\norientation'
+        );
+    } else {
+        menu.addItem(
+            "vertical...",
+            'toggleOrientation',
+            'toggle the\norientation'
+        );
+    }
+    return menu;
+};
+
+CircleBoxMorph.prototype.toggleOrientation = function () {
+    var center = this.center();
+    this.changed();
+    if (this.orientation === 'vertical') {
+        this.orientation = 'horizontal';
+    } else {
+        this.orientation = 'vertical';
+    }
+    this.silentSetExtent(new Point(this.height(), this.width()));
+    this.setCenter(center);
+    this.drawNew();
+    this.changed();
+};
+
+// SliderButtonMorph ///////////////////////////////////////////////////
+
+var SliderButtonMorph;
+
+// SliderButtonMorph inherits from CircleBoxMorph:
+
+SliderButtonMorph.prototype = new CircleBoxMorph();
+SliderButtonMorph.prototype.constructor = SliderButtonMorph;
+SliderButtonMorph.uber = CircleBoxMorph.prototype;
+
+function SliderButtonMorph(orientation) {
+    this.init(orientation);
+}
+
+SliderButtonMorph.prototype.init = function (orientation) {
+    this.color = new Color(80, 80, 80);
+    this.highlightColor = new Color(90, 90, 140);
+    this.pressColor = new Color(80, 80, 160);
+    this.is3D = true;
+    this.hasMiddleDip = true;
+    SliderButtonMorph.uber.init.call(this, orientation);
+};
+
+SliderButtonMorph.prototype.autoOrientation = function () {
+    nop();
+};
+
+SliderButtonMorph.prototype.drawNew = function () {
+    var colorBak = this.color.copy();
+
+    SliderButtonMorph.uber.drawNew.call(this);
+    if (this.is3D) {
+        this.drawEdges();
+    }
+    this.normalImage = this.image;
+
+    this.color = this.highlightColor.copy();
+    SliderButtonMorph.uber.drawNew.call(this);
+    if (this.is3D) {
+        this.drawEdges();
+    }
+    this.highlightImage = this.image;
+
+    this.color = this.pressColor.copy();
+    SliderButtonMorph.uber.drawNew.call(this);
+    if (this.is3D) {
+        this.drawEdges();
+    }
+    this.pressImage = this.image;
+
+    this.color = colorBak;
+    this.image = this.normalImage;
+
+};
+
+SliderButtonMorph.prototype.drawEdges = function () {
+    var context = this.image.getContext('2d'),
+        gradient,
+        radius,
+        w = this.width(),
+        h = this.height();
+
+    context.lineJoin = 'round';
+    context.lineCap = 'round';
+
+    if (this.orientation === 'vertical') {
+        context.lineWidth = w / 3;
+        gradient = context.createLinearGradient(
+            0,
+            0,
+            context.lineWidth,
+            0
+        );
+        gradient.addColorStop(0, 'white');
+        gradient.addColorStop(1, this.color.toString());
+
+        context.strokeStyle = gradient;
+        context.beginPath();
+        context.moveTo(context.lineWidth * 0.5, w / 2);
+        context.lineTo(context.lineWidth * 0.5, h - w / 2);
+        context.stroke();
+
+        gradient = context.createLinearGradient(
+            w - context.lineWidth,
+            0,
+            w,
+            0
+        );
+        gradient.addColorStop(0, this.color.toString());
+        gradient.addColorStop(1, 'black');
+
+        context.strokeStyle = gradient;
+        context.beginPath();
+        context.moveTo(w - context.lineWidth * 0.5, w / 2);
+        context.lineTo(w - context.lineWidth * 0.5, h - w / 2);
+        context.stroke();
+
+        if (this.hasMiddleDip) {
+            gradient = context.createLinearGradient(
+                context.lineWidth,
+                0,
+                w - context.lineWidth,
+                0
+            );
+
+            radius = w / 4;
+            gradient.addColorStop(0, 'black');
+            gradient.addColorStop(0.35, this.color.toString());
+            gradient.addColorStop(0.65, this.color.toString());
+            gradient.addColorStop(1, 'white');
+
+            context.fillStyle = gradient;
+            context.beginPath();
+            context.arc(
+                w / 2,
+                h / 2,
+                radius,
+                radians(0),
+                radians(360),
+                false
+            );
+            context.closePath();
+            context.fill();
+        }
+    } else if (this.orientation === 'horizontal') {
+        context.lineWidth = h / 3;
+        gradient = context.createLinearGradient(
+            0,
+            0,
+            0,
+            context.lineWidth
+        );
+        gradient.addColorStop(0, 'white');
+        gradient.addColorStop(1, this.color.toString());
+
+        context.strokeStyle = gradient;
+        context.beginPath();
+        context.moveTo(h / 2, context.lineWidth * 0.5);
+        context.lineTo(w - h / 2, context.lineWidth * 0.5);
+        context.stroke();
+
+        gradient = context.createLinearGradient(
+            0,
+            h - context.lineWidth,
+            0,
+            h
+        );
+        gradient.addColorStop(0, this.color.toString());
+        gradient.addColorStop(1, 'black');
+
+        context.strokeStyle = gradient;
+        context.beginPath();
+        context.moveTo(h / 2, h - context.lineWidth * 0.5);
+        context.lineTo(w - h / 2, h - context.lineWidth * 0.5);
+        context.stroke();
+
+        if (this.hasMiddleDip) {
+            gradient = context.createLinearGradient(
+                0,
+                context.lineWidth,
+                0,
+                h - context.lineWidth
+            );
+
+            radius = h / 4;
+            gradient.addColorStop(0, 'black');
+            gradient.addColorStop(0.35, this.color.toString());
+            gradient.addColorStop(0.65, this.color.toString());
+            gradient.addColorStop(1, 'white');
+
+            context.fillStyle = gradient;
+            context.beginPath();
+            context.arc(
+                this.width() / 2,
+                this.height() / 2,
+                radius,
+                radians(0),
+                radians(360),
+                false
+            );
+            context.closePath();
+            context.fill();
+        }
+    }
+};
+
+//SliderButtonMorph events:
+
+SliderButtonMorph.prototype.mouseEnter = function () {
+    this.image = this.highlightImage;
+    this.changed();
+};
+
+SliderButtonMorph.prototype.mouseLeave = function () {
+    this.image = this.normalImage;
+    this.changed();
+};
+
+SliderButtonMorph.prototype.mouseDownLeft = function (pos) {
+    this.image = this.pressImage;
+    this.changed();
+    this.escalateEvent('mouseDownLeft', pos);
+};
+
+SliderButtonMorph.prototype.mouseClickLeft = function () {
+    this.image = this.highlightImage;
+    this.changed();
+};
+
+SliderButtonMorph.prototype.mouseMove = function () {
+    // prevent my parent from getting picked up
+    nop();
+};
+
+// SliderMorph ///////////////////////////////////////////////////
+
+// SliderMorph inherits from CircleBoxMorph:
+
+SliderMorph.prototype = new CircleBoxMorph();
+SliderMorph.prototype.constructor = SliderMorph;
+SliderMorph.uber = CircleBoxMorph.prototype;
+
+function SliderMorph(start, stop, value, size, orientation, color) {
+    this.init(
+        start || 1,
+        stop || 100,
+        value || 50,
+        size || 10,
+        orientation || 'vertical',
+        color
+    );
+}
+
+SliderMorph.prototype.init = function (
+    start,
+    stop,
+    value,
+    size,
+    orientation,
+    color
+) {
+    this.target = null;
+    this.action = null;
+    this.start = start;
+    this.stop = stop;
+    this.value = value;
+    this.size = size;
+    this.offset = null;
+    this.button = new SliderButtonMorph();
+    this.button.isDraggable = false;
+    this.button.color = new Color(200, 200, 200);
+    this.button.highlightColor = new Color(210, 210, 255);
+    this.button.pressColor = new Color(180, 180, 255);
+    SliderMorph.uber.init.call(this, orientation);
+    this.add(this.button);
+    this.alpha = 0.3;
+    this.color = color || new Color(0, 0, 0);
+    this.setExtent(new Point(20, 100));
+    // this.drawNew();
+};
+
+SliderMorph.prototype.autoOrientation = function () {
+    nop();
+};
+
+SliderMorph.prototype.rangeSize = function () {
+    return this.stop - this.start;
+};
+
+SliderMorph.prototype.ratio = function () {
+    return this.size / this.rangeSize();
+};
+
+SliderMorph.prototype.unitSize = function () {
+    if (this.orientation === 'vertical') {
+        return (this.height() - this.button.height()) /
+            this.rangeSize();
+    }
+    return (this.width() - this.button.width()) /
+        this.rangeSize();
+};
+
+SliderMorph.prototype.drawNew = function () {
+    var bw, bh, posX, posY;
+
+    SliderMorph.uber.drawNew.call(this);
+    this.button.orientation = this.orientation;
+    if (this.orientation === 'vertical') {
+        bw  = this.width() - 2;
+        bh = Math.max(bw, Math.round(this.height() * this.ratio()));
+        this.button.silentSetExtent(new Point(bw, bh));
+        posX = 1;
+        posY = Math.min(
+            Math.round((this.value - this.start) * this.unitSize()),
+            this.height() - this.button.height()
+        );
+    } else {
+        bh = this.height() - 2;
+        bw  = Math.max(bh, Math.round(this.width() * this.ratio()));
+        this.button.silentSetExtent(new Point(bw, bh));
+        posY = 1;
+        posX = Math.min(
+            Math.round((this.value - this.start) * this.unitSize()),
+            this.width() - this.button.width()
+        );
+    }
+    this.button.setPosition(
+        new Point(posX, posY).add(this.bounds.origin)
+    );
+    this.button.drawNew();
+    this.button.changed();
+};
+
+SliderMorph.prototype.updateValue = function () {
+    var relPos;
+    if (this.orientation === 'vertical') {
+        relPos = this.button.top() - this.top();
+    } else {
+        relPos = this.button.left() - this.left();
+    }
+    this.value = Math.round(relPos / this.unitSize() + this.start);
+    this.updateTarget();
+};
+
+SliderMorph.prototype.updateTarget = function () {
+    if (this.action) {
+        if (typeof this.action === 'function') {
+            this.action.call(this.target, this.value);
+        } else { // assume it's a String
+            this.target[this.action](this.value);
+        }
+    }
+};
+
+// SliderMorph duplicating:
+
+SliderMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = SliderMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.target && dict[this.target]) {
+        c.target = (dict[this.target]);
+    }
+    if (c.button && dict[this.button]) {
+        c.button = (dict[this.button]);
+    }
+    return c;
+};
+
+// SliderMorph menu:
+
+SliderMorph.prototype.developersMenu = function () {
+    var menu = SliderMorph.uber.developersMenu.call(this);
+    menu.addItem(
+        "show value...",
+        'showValue',
+        'display a dialog box\nshowing the selected number'
+    );
+    menu.addItem(
+        "floor...",
+        function () {
+            this.prompt(
+                menu.title + '\nfloor:',
+                this.setStart,
+                this,
+                this.start.toString(),
+                null,
+                0,
+                this.stop - this.size,
+                true
+            );
+        },
+        'set the minimum value\nwhich can be selected'
+    );
+    menu.addItem(
+        "ceiling...",
+        function () {
+            this.prompt(
+                menu.title + '\nceiling:',
+                this.setStop,
+                this,
+                this.stop.toString(),
+                null,
+                this.start + this.size,
+                this.size * 100,
+                true
+            );
+        },
+        'set the maximum value\nwhich can be selected'
+    );
+    menu.addItem(
+        "button size...",
+        function () {
+            this.prompt(
+                menu.title + '\nbutton size:',
+                this.setSize,
+                this,
+                this.size.toString(),
+                null,
+                1,
+                this.stop - this.start,
+                true
+            );
+        },
+        'set the range\ncovered by\nthe slider button'
+    );
+    menu.addLine();
+    menu.addItem(
+        'set target',
+        "setTarget",
+        'select another morph\nwhose numerical property\nwill be ' +
+            'controlled by this one'
+    );
+    return menu;
+};
+
+SliderMorph.prototype.showValue = function () {
+    this.inform(this.value);
+};
+
+SliderMorph.prototype.userSetStart = function (num) {
+    // for context menu demo purposes
+    this.start = Math.max(num, this.stop);
+};
+
+SliderMorph.prototype.setStart = function (num) {
+    // for context menu demo purposes
+    var newStart;
+    if (typeof num === 'number') {
+        this.start = Math.min(
+            Math.max(num, 0),
+            this.stop - this.size
+        );
+    } else {
+        newStart = parseFloat(num);
+        if (!isNaN(newStart)) {
+            this.start = Math.min(
+                Math.max(newStart, 0),
+                this.stop - this.size
+            );
+        }
+    }
+    this.value = Math.max(this.value, this.start);
+    this.updateTarget();
+    this.drawNew();
+    this.changed();
+};
+
+SliderMorph.prototype.setStop = function (num) {
+    // for context menu demo purposes
+    var newStop;
+    if (typeof num === 'number') {
+        this.stop = Math.max(num, this.start + this.size);
+    } else {
+        newStop = parseFloat(num);
+        if (!isNaN(newStop)) {
+            this.stop = Math.max(newStop, this.start + this.size);
+        }
+    }
+    this.value = Math.min(this.value, this.stop);
+    this.updateTarget();
+    this.drawNew();
+    this.changed();
+};
+
+SliderMorph.prototype.setSize = function (num) {
+    // for context menu demo purposes
+    var newSize;
+    if (typeof num === 'number') {
+        this.size = Math.min(
+            Math.max(num, 1),
+            this.stop - this.start
+        );
+    } else {
+        newSize = parseFloat(num);
+        if (!isNaN(newSize)) {
+            this.size = Math.min(
+                Math.max(newSize, 1),
+                this.stop - this.start
+            );
+        }
+    }
+    this.value = Math.min(this.value, this.stop - this.size);
+    this.updateTarget();
+    this.drawNew();
+    this.changed();
+};
+
+SliderMorph.prototype.setTarget = function () {
+    var choices = this.overlappedMorphs(),
+        menu = new MenuMorph(this, 'choose target:'),
+        myself = this;
+
+    choices.push(this.world());
+    choices.forEach(function (each) {
+        menu.addItem(each.toString().slice(0, 50), function () {
+            myself.target = each;
+            myself.setTargetSetter();
+        });
+    });
+    if (choices.length === 1) {
+        this.target = choices[0];
+        this.setTargetSetter();
+    } else if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+SliderMorph.prototype.setTargetSetter = function () {
+    var choices = this.target.numericalSetters(),
+        menu = new MenuMorph(this, 'choose target property:'),
+        myself = this;
+
+    choices.forEach(function (each) {
+        menu.addItem(each, function () {
+            myself.action = each;
+        });
+    });
+    if (choices.length === 1) {
+        this.action = choices[0];
+    } else if (choices.length > 0) {
+        menu.popUpAtHand(this.world());
+    }
+};
+
+SliderMorph.prototype.numericalSetters = function () {
+    // for context menu demo purposes
+    var list = SliderMorph.uber.numericalSetters.call(this);
+    list.push('setStart', 'setStop', 'setSize');
+    return list;
+};
+
+// SliderMorph stepping:
+
+SliderMorph.prototype.step = null;
+
+SliderMorph.prototype.mouseDownLeft = function (pos) {
+    var world, myself = this;
+
+    if (!this.button.bounds.containsPoint(pos)) {
+        this.offset = new Point(); // return null;
+    } else {
+        this.offset = pos.subtract(this.button.bounds.origin);
+    }
+    world = this.root();
+    this.step = function () {
+        var mousePos, newX, newY;
+        if (world.hand.mouseButton) {
+            mousePos = world.hand.bounds.origin;
+            if (myself.orientation === 'vertical') {
+                newX = myself.button.bounds.origin.x;
+                newY = Math.max(
+                    Math.min(
+                        mousePos.y - myself.offset.y,
+                        myself.bottom() - myself.button.height()
+                    ),
+                    myself.top()
+                );
+            } else {
+                newY = myself.button.bounds.origin.y;
+                newX = Math.max(
+                    Math.min(
+                        mousePos.x - myself.offset.x,
+                        myself.right() - myself.button.width()
+                    ),
+                    myself.left()
+                );
+            }
+            myself.button.setPosition(new Point(newX, newY));
+            myself.updateValue();
+        } else {
+            this.step = null;
+        }
+    };
+};
+
+// MouseSensorMorph ////////////////////////////////////////////////////
+
+// for demo and debuggin purposes only, to be removed later
+
+var MouseSensorMorph;
+
+// MouseSensorMorph inherits from BoxMorph:
+
+MouseSensorMorph.prototype = new BoxMorph();
+MouseSensorMorph.prototype.constructor = MouseSensorMorph;
+MouseSensorMorph.uber = BoxMorph.prototype;
+
+// MouseSensorMorph instance creation:
+
+function MouseSensorMorph(edge, border, borderColor) {
+    this.init(edge, border, borderColor);
+}
+
+MouseSensorMorph.prototype.init = function (edge, border, borderColor) {
+    MouseSensorMorph.uber.init.call(this);
+    this.edge = edge || 4;
+    this.border = border || 2;
+    this.color = new Color(255, 255, 255);
+    this.borderColor = borderColor || new Color();
+    this.isTouched = false;
+    this.upStep = 0.05;
+    this.downStep = 0.02;
+    this.noticesTransparentClick = false;
+    this.drawNew();
+};
+
+MouseSensorMorph.prototype.touch = function () {
+    var myself = this;
+    if (!this.isTouched) {
+        this.isTouched = true;
+        this.alpha = 0.6;
+
+        this.step = function () {
+            if (myself.isTouched) {
+                if (myself.alpha < 1) {
+                    myself.alpha = myself.alpha + myself.upStep;
+                }
+            } else if (myself.alpha > (myself.downStep)) {
+                myself.alpha = myself.alpha - myself.downStep;
+            } else {
+                myself.alpha = 0;
+                myself.step = null;
+            }
+            myself.changed();
+        };
+    }
+};
+
+MouseSensorMorph.prototype.unTouch = function () {
+    this.isTouched = false;
+};
+
+MouseSensorMorph.prototype.mouseEnter = function () {
+    this.touch();
+};
+
+MouseSensorMorph.prototype.mouseLeave = function () {
+    this.unTouch();
+};
+
+MouseSensorMorph.prototype.mouseDownLeft = function () {
+    this.touch();
+};
+
+MouseSensorMorph.prototype.mouseClickLeft = function () {
+    this.unTouch();
+};
+
+// InspectorMorph //////////////////////////////////////////////////////
+
+// InspectorMorph: referenced constructors
+
+var ListMorph;
+var TriggerMorph;
+
+// InspectorMorph inherits from BoxMorph:
+
+InspectorMorph.prototype = new BoxMorph();
+InspectorMorph.prototype.constructor = InspectorMorph;
+InspectorMorph.uber = BoxMorph.prototype;
+
+// InspectorMorph instance creation:
+
+function InspectorMorph(target) {
+    this.init(target);
+}
+
+InspectorMorph.prototype.init = function (target) {
+    // additional properties:
+    this.target = target;
+    this.currentProperty = null;
+    this.showing = 'attributes';
+    this.markOwnProperties = false;
+
+    // initialize inherited properties:
+    InspectorMorph.uber.init.call(this);
+
+    // override inherited properties:
+    this.silentSetExtent(
+        new Point(
+            MorphicPreferences.handleSize * 20,
+            MorphicPreferences.handleSize * 20 * 2 / 3
+        )
+    );
+    this.isDraggable = true;
+    this.border = 1;
+    this.edge = 5;
+    this.color = new Color(60, 60, 60);
+    this.borderColor = new Color(95, 95, 95);
+    this.drawNew();
+
+    // panes:
+    this.label = null;
+    this.list = null;
+    this.detail = null;
+    this.work = null;
+    this.buttonInspect = null;
+    this.buttonClose = null;
+    this.buttonSubset = null;
+    this.buttonEdit = null;
+    this.resizer = null;
+
+    if (this.target) {
+        this.buildPanes();
+    }
+};
+
+InspectorMorph.prototype.setTarget = function (target) {
+    this.target = target;
+    this.currentProperty = null;
+    this.buildPanes();
+};
+
+InspectorMorph.prototype.buildPanes = function () {
+    var attribs = [], property, myself = this, ctrl, ev;
+
+    // remove existing panes
+    this.children.forEach(function (m) {
+        if (m !== this.work) { // keep work pane around
+            m.destroy();
+        }
+    });
+    this.children = [];
+
+    // label
+    this.label = new TextMorph(this.target.toString());
+    this.label.fontSize = MorphicPreferences.menuFontSize;
+    this.label.isBold = true;
+    this.label.color = new Color(255, 255, 255);
+    this.label.drawNew();
+    this.add(this.label);
+
+    // properties list
+    for (property in this.target) {
+        if (property) { // dummy condition, to be refined
+            attribs.push(property);
+        }
+    }
+    if (this.showing === 'attributes') {
+        attribs = attribs.filter(function (prop) {
+            return typeof myself.target[prop] !== 'function';
+        });
+    } else if (this.showing === 'methods') {
+        attribs = attribs.filter(function (prop) {
+            return typeof myself.target[prop] === 'function';
+        });
+    } // otherwise show all properties
+    this.list = new ListMorph(
+        this.target instanceof Array ? attribs : attribs.sort(),
+        null, // label getter
+        this.markOwnProperties ?
+                [ // format list
+                    [ // format element: [color, predicate(element]
+                        new Color(0, 0, 180),
+                        function (element) {
+                            return myself.target.hasOwnProperty(element);
+                        }
+                    ]
+                ]
+                : null
+    );
+    this.list.action = function (selected) {
+        var val, txt, cnts;
+        val = myself.target[selected];
+        myself.currentProperty = val;
+        if (val === null) {
+            txt = 'NULL';
+        } else if (isString(val)) {
+            txt = val;
+        } else {
+            txt = val.toString();
+        }
+        cnts = new TextMorph(txt);
+        cnts.isEditable = true;
+        cnts.enableSelecting();
+        cnts.setReceiver(myself.target);
+        myself.detail.setContents(cnts);
+    };
+    this.list.hBar.alpha = 0.6;
+    this.list.vBar.alpha = 0.6;
+    this.list.contents.step = null;
+    this.add(this.list);
+
+    // details pane
+    this.detail = new ScrollFrameMorph();
+    this.detail.acceptsDrops = false;
+    this.detail.contents.acceptsDrops = false;
+    this.detail.isTextLineWrapping = true;
+    this.detail.color = new Color(255, 255, 255);
+    this.detail.hBar.alpha = 0.6;
+    this.detail.vBar.alpha = 0.6;
+    ctrl = new TextMorph('');
+    ctrl.isEditable = true;
+    ctrl.enableSelecting();
+    ctrl.setReceiver(this.target);
+    this.detail.setContents(ctrl);
+    this.add(this.detail);
+
+    // work ('evaluation') pane
+    // don't refresh the work pane if it already exists
+    if (this.work === null) {
+        this.work = new ScrollFrameMorph();
+        this.work.acceptsDrops = false;
+        this.work.contents.acceptsDrops = false;
+        this.work.isTextLineWrapping = true;
+        this.work.color = new Color(255, 255, 255);
+        this.work.hBar.alpha = 0.6;
+        this.work.vBar.alpha = 0.6;
+        ev = new TextMorph('');
+        ev.isEditable = true;
+        ev.enableSelecting();
+        ev.setReceiver(this.target);
+        this.work.setContents(ev);
+    }
+    this.add(this.work);
+
+    // properties button
+    this.buttonSubset = new TriggerMorph();
+    this.buttonSubset.labelString = 'show...';
+    this.buttonSubset.action = function () {
+        var menu;
+        menu = new MenuMorph();
+        menu.addItem(
+            'attributes',
+            function () {
+                myself.showing = 'attributes';
+                myself.buildPanes();
+            }
+        );
+        menu.addItem(
+            'methods',
+            function () {
+                myself.showing = 'methods';
+                myself.buildPanes();
+            }
+        );
+        menu.addItem(
+            'all',
+            function () {
+                myself.showing = 'all';
+                myself.buildPanes();
+            }
+        );
+        menu.addLine();
+        menu.addItem(
+            (myself.markOwnProperties ?
+                    'un-mark own' : 'mark own'),
+            function () {
+                myself.markOwnProperties = !myself.markOwnProperties;
+                myself.buildPanes();
+            },
+            'highlight\n\'own\' properties'
+        );
+        menu.popUpAtHand(myself.world());
+    };
+    this.add(this.buttonSubset);
+
+    // inspect button
+    this.buttonInspect = new TriggerMorph();
+    this.buttonInspect.labelString = 'inspect...';
+    this.buttonInspect.action = function () {
+        var menu, world, inspector;
+        if (isObject(myself.currentProperty)) {
+            menu = new MenuMorph();
+            menu.addItem(
+                'in new inspector...',
+                function () {
+                    world = myself.world();
+                    inspector = new InspectorMorph(
+                        myself.currentProperty
+                    );
+                    inspector.setPosition(world.hand.position());
+                    inspector.keepWithin(world);
+                    world.add(inspector);
+                    inspector.changed();
+                }
+            );
+            menu.addItem(
+                'here...',
+                function () {
+                    myself.setTarget(myself.currentProperty);
+                }
+            );
+            menu.popUpAtHand(myself.world());
+        } else {
+            myself.inform(
+                (myself.currentProperty === null ?
+                        'null' : typeof myself.currentProperty) +
+                            '\nis not inspectable'
+            );
+        }
+    };
+    this.add(this.buttonInspect);
+
+    // edit button
+
+    this.buttonEdit = new TriggerMorph();
+    this.buttonEdit.labelString = 'edit...';
+    this.buttonEdit.action = function () {
+        var menu;
+        menu = new MenuMorph(myself);
+        menu.addItem("save", 'save', 'accept changes');
+        menu.addLine();
+        menu.addItem("add property...", 'addProperty');
+        menu.addItem("rename...", 'renameProperty');
+        menu.addItem("remove...", 'removeProperty');
+        menu.popUpAtHand(myself.world());
+    };
+    this.add(this.buttonEdit);
+
+    // close button
+    this.buttonClose = new TriggerMorph();
+    this.buttonClose.labelString = 'close';
+    this.buttonClose.action = function () {
+        myself.destroy();
+    };
+    this.add(this.buttonClose);
+
+    // resizer
+    this.resizer = new HandleMorph(
+        this,
+        150,
+        100,
+        this.edge,
+        this.edge
+    );
+
+    // update layout
+    this.fixLayout();
+};
+
+InspectorMorph.prototype.fixLayout = function () {
+    var x, y, r, b, w, h;
+
+    Morph.prototype.trackChanges = false;
+
+    // label
+    x = this.left() + this.edge;
+    y = this.top() + this.edge;
+    r = this.right() - this.edge;
+    w = r - x;
+    this.label.setPosition(new Point(x, y));
+    this.label.setWidth(w);
+    if (this.label.height() > (this.height() - 50)) {
+        this.silentSetHeight(this.label.height() + 50);
+        this.drawNew();
+        this.changed();
+        this.resizer.drawNew();
+    }
+
+    // list
+    y = this.label.bottom() + 2;
+    w = Math.min(
+        Math.floor(this.width() / 3),
+        this.list.listContents.width()
+    );
+
+    w -= this.edge;
+    b = this.bottom() - (2 * this.edge) -
+        MorphicPreferences.handleSize;
+    h = b - y;
+    this.list.setPosition(new Point(x, y));
+    this.list.setExtent(new Point(w, h));
+
+    // detail
+    x = this.list.right() + this.edge;
+    r = this.right() - this.edge;
+    w = r - x;
+    this.detail.setPosition(new Point(x, y));
+    this.detail.setExtent(new Point(w, (h * 2 / 3) - this.edge));
+
+    // work
+    y = this.detail.bottom() + this.edge;
+    this.work.setPosition(new Point(x, y));
+    this.work.setExtent(new Point(w, h / 3));
+
+    // properties button
+    x = this.list.left();
+    y = this.list.bottom() + this.edge;
+    w = this.list.width();
+    h = MorphicPreferences.handleSize;
+    this.buttonSubset.setPosition(new Point(x, y));
+    this.buttonSubset.setExtent(new Point(w, h));
+
+    // inspect button
+    x = this.detail.left();
+    w = this.detail.width() - this.edge -
+        MorphicPreferences.handleSize;
+    w = w / 3 - this.edge / 3;
+    this.buttonInspect.setPosition(new Point(x, y));
+    this.buttonInspect.setExtent(new Point(w, h));
+
+    // edit button
+    x = this.buttonInspect.right() + this.edge;
+    this.buttonEdit.setPosition(new Point(x, y));
+    this.buttonEdit.setExtent(new Point(w, h));
+
+    // close button
+    x = this.buttonEdit.right() + this.edge;
+    r = this.detail.right() - this.edge -
+        MorphicPreferences.handleSize;
+    w = r - x;
+    this.buttonClose.setPosition(new Point(x, y));
+    this.buttonClose.setExtent(new Point(w, h));
+
+    Morph.prototype.trackChanges = true;
+    this.changed();
+
+};
+
+InspectorMorph.prototype.setExtent = function (aPoint) {
+    InspectorMorph.uber.setExtent.call(this, aPoint);
+    this.fixLayout();
+};
+
+//InspectorMorph editing ops:
+
+InspectorMorph.prototype.save = function () {
+    var txt = this.detail.contents.children[0].text.toString(),
+        prop = this.list.selected;
+    try {
+        // this.target[prop] = evaluate(txt);
+        this.target.evaluateString('this.' + prop + ' = ' + txt);
+        if (this.target.drawNew) {
+            this.target.changed();
+            this.target.drawNew();
+            this.target.changed();
+        }
+    } catch (err) {
+        this.inform(err);
+    }
+};
+
+InspectorMorph.prototype.addProperty = function () {
+    var myself = this;
+    this.prompt(
+        'new property name:',
+        function (prop) {
+            if (prop) {
+                myself.target[prop] = null;
+                myself.buildPanes();
+                if (myself.target.drawNew) {
+                    myself.target.changed();
+                    myself.target.drawNew();
+                    myself.target.changed();
+                }
+            }
+        },
+        this,
+        'property' // Chrome cannot handle empty strings (others do)
+    );
+};
+
+InspectorMorph.prototype.renameProperty = function () {
+    var myself = this,
+        propertyName = this.list.selected;
+    this.prompt(
+        'property name:',
+        function (prop) {
+            try {
+                delete (myself.target[propertyName]);
+                myself.target[prop] = myself.currentProperty;
+            } catch (err) {
+                myself.inform(err);
+            }
+            myself.buildPanes();
+            if (myself.target.drawNew) {
+                myself.target.changed();
+                myself.target.drawNew();
+                myself.target.changed();
+            }
+        },
+        this,
+        propertyName
+    );
+};
+
+InspectorMorph.prototype.removeProperty = function () {
+    var prop = this.list.selected;
+    try {
+        delete (this.target[prop]);
+        this.currentProperty = null;
+        this.buildPanes();
+        if (this.target.drawNew) {
+            this.target.changed();
+            this.target.drawNew();
+            this.target.changed();
+        }
+    } catch (err) {
+        this.inform(err);
+    }
+};
+
+// MenuMorph ///////////////////////////////////////////////////////////
+
+// MenuMorph: referenced constructors
+
+var MenuItemMorph;
+
+// MenuMorph inherits from BoxMorph:
+
+MenuMorph.prototype = new BoxMorph();
+MenuMorph.prototype.constructor = MenuMorph;
+MenuMorph.uber = BoxMorph.prototype;
+
+// MenuMorph instance creation:
+
+function MenuMorph(target, title, environment, fontSize) {
+    this.init(target, title, environment, fontSize);
+
+    /*
+    if target is a function, use it as callback:
+    execute target as callback function with the action property
+    of the triggered MenuItem as argument.
+    Use the environment, if it is specified.
+    Note: if action is also a function, instead of becoming
+    the argument itself it will be called to answer the argument.
+    For selections, Yes/No Choices etc.
+
+    else (if target is not a function):
+
+        if action is a function:
+        execute the action with target as environment (can be null)
+        for lambdafied (inline) actions
+
+        else if action is a String:
+        treat it as function property of target and execute it
+        for selector-like actions
+    */
+}
+
+MenuMorph.prototype.init = function (target, title, environment, fontSize) {
+    // additional properties:
+    this.target = target;
+    this.title = title || null;
+    this.environment = environment || null;
+    this.fontSize = fontSize || null;
+    this.items = [];
+    this.label = null;
+    this.world = null;
+    this.isListContents = false;
+
+    // initialize inherited properties:
+    MenuMorph.uber.init.call(this);
+
+    // override inherited properties:
+    this.isDraggable = false;
+
+    // immutable properties:
+    this.border = null;
+    this.edge = null;
+};
+
+MenuMorph.prototype.addItem = function (labelString, action, hint, color) {
+    /*
+    labelString is normally a single-line string. But it can also be one
+    of the following:
+    
+        * a multi-line string (containing line breaks)
+        * an icon (either a Morph or a Canvas)
+        * a tuple of format: [icon, string]
+    */
+    this.items.push([
+        localize(labelString || 'close'),
+        action || nop,
+        hint,
+        color]);
+};
+
+MenuMorph.prototype.addLine = function (width) {
+    this.items.push([0, width || 1]);
+};
+
+MenuMorph.prototype.createLabel = function () {
+    var text;
+    if (this.label !== null) {
+        this.label.destroy();
+    }
+    text = new TextMorph(
+        localize(this.title),
+        this.fontSize || MorphicPreferences.menuFontSize,
+        MorphicPreferences.menuFontName,
+        true,
+        false,
+        'center'
+    );
+    text.alignment = 'center';
+    text.color = new Color(255, 255, 255);
+    text.backgroundColor = this.borderColor;
+    text.drawNew();
+    this.label = new BoxMorph(3, 0);
+    this.label.color = this.borderColor;
+    this.label.borderColor = this.borderColor;
+    this.label.setExtent(text.extent().add(4));
+    this.label.drawNew();
+    this.label.add(text);
+    this.label.text = text;
+};
+
+MenuMorph.prototype.drawNew = function () {
+    var myself = this,
+        item,
+        fb,
+        x,
+        y,
+        isLine = false;
+
+    this.children.forEach(function (m) {
+        m.destroy();
+    });
+    this.children = [];
+    if (!this.isListContents) {
+        this.edge = 5;
+        this.border = 2;
+    }
+    this.color = new Color(255, 255, 255);
+    this.borderColor = new Color(60, 60, 60);
+    this.silentSetExtent(new Point(0, 0));
+
+    y = 2;
+    x = this.left() + 4;
+    if (!this.isListContents) {
+        if (this.title) {
+            this.createLabel();
+            this.label.setPosition(this.bounds.origin.add(4));
+            this.add(this.label);
+            y = this.label.bottom();
+        } else {
+            y = this.top() + 4;
+        }
+    }
+    y += 1;
+    this.items.forEach(function (tuple) {
+        isLine = false;
+        if (tuple instanceof StringFieldMorph ||
+                tuple instanceof ColorPickerMorph ||
+                tuple instanceof SliderMorph) {
+            item = tuple;
+        } else if (tuple[0] === 0) {
+            isLine = true;
+            item = new Morph();
+            item.color = myself.borderColor;
+            item.setHeight(tuple[1]);
+        } else {
+            item = new MenuItemMorph(
+                myself.target,
+                tuple[1],
+                tuple[0],
+                myself.fontSize || MorphicPreferences.menuFontSize,
+                MorphicPreferences.menuFontName,
+                myself.environment,
+                tuple[2], // bubble help hint
+                tuple[3] // color
+            );
+        }
+        if (isLine) {
+            y += 1;
+        }
+        item.setPosition(new Point(x, y));
+        myself.add(item);
+        y = y + item.height();
+        if (isLine) {
+            y += 1;
+        }
+    });
+
+    fb = this.fullBounds();
+    this.silentSetExtent(fb.extent().add(4));
+    this.adjustWidths();
+    MenuMorph.uber.drawNew.call(this);
+};
+
+MenuMorph.prototype.maxWidth = function () {
+    var w = 0;
+
+    if (this.parent instanceof FrameMorph) {
+        if (this.parent.scrollFrame instanceof ScrollFrameMorph) {
+            w = this.parent.scrollFrame.width();
+        }
+    }
+    this.children.forEach(function (item) {
+
+        if (item instanceof MenuItemMorph) {
+            w = Math.max(w, item.children[0].width() + 8);
+        } else if ((item instanceof StringFieldMorph) ||
+                (item instanceof ColorPickerMorph) ||
+                (item instanceof SliderMorph)) {
+            w = Math.max(w, item.width());
+        }
+    });
+    if (this.label) {
+        w = Math.max(w, this.label.width());
+    }
+    return w;
+};
+
+MenuMorph.prototype.adjustWidths = function () {
+    var w = this.maxWidth(),
+        isSelected,
+        myself = this;
+    this.children.forEach(function (item) {
+        item.silentSetWidth(w);
+        if (item instanceof MenuItemMorph) {
+            isSelected = (item.image === item.pressImage);
+            item.createBackgrounds();
+            if (isSelected) {
+                item.image = item.pressImage;
+            }
+        } else {
+            item.drawNew();
+            if (item === myself.label) {
+                item.text.setPosition(
+                    item.center().subtract(
+                        item.text.extent().floorDivideBy(2)
+                    )
+                );
+            }
+        }
+    });
+};
+
+MenuMorph.prototype.unselectAllItems = function () {
+    this.children.forEach(function (item) {
+        if (item instanceof MenuItemMorph) {
+            item.image = item.normalImage;
+        }
+    });
+    this.changed();
+};
+
+MenuMorph.prototype.popup = function (world, pos) {
+    this.drawNew();
+    this.setPosition(pos);
+    this.addShadow(new Point(2, 2), 80);
+    this.keepWithin(world);
+    if (world.activeMenu) {
+        world.activeMenu.destroy();
+    }
+    world.add(this);
+    world.activeMenu = this;
+    this.fullChanged();
+};
+
+MenuMorph.prototype.popUpAtHand = function (world) {
+    var wrrld = world || this.world;
+    this.popup(wrrld, wrrld.hand.position());
+};
+
+MenuMorph.prototype.popUpCenteredAtHand = function (world) {
+    var wrrld = world || this.world;
+    this.drawNew();
+    this.popup(
+        wrrld,
+        wrrld.hand.position().subtract(
+            this.extent().floorDivideBy(2)
+        )
+    );
+};
+
+MenuMorph.prototype.popUpCenteredInWorld = function (world) {
+    var wrrld = world || this.world;
+    this.drawNew();
+    this.popup(
+        wrrld,
+        wrrld.center().subtract(
+            this.extent().floorDivideBy(2)
+        )
+    );
+};
+
+// StringMorph /////////////////////////////////////////////////////////
+
+// I am a single line of text
+
+// StringMorph inherits from Morph:
+
+StringMorph.prototype = new Morph();
+StringMorph.prototype.constructor = StringMorph;
+StringMorph.uber = Morph.prototype;
+
+// StringMorph instance creation:
+
+function StringMorph(
+    text,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    isNumeric,
+    shadowOffset,
+    shadowColor,
+    color,
+    fontName
+) {
+    this.init(
+        text,
+        fontSize,
+        fontStyle,
+        bold,
+        italic,
+        isNumeric,
+        shadowOffset,
+        shadowColor,
+        color,
+        fontName
+    );
+}
+
+StringMorph.prototype.init = function (
+    text,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    isNumeric,
+    shadowOffset,
+    shadowColor,
+    color,
+    fontName
+) {
+    // additional properties:
+    this.text = text || ((text === '') ? '' : 'StringMorph');
+    this.fontSize = fontSize || 12;
+    this.fontName = fontName || MorphicPreferences.globalFontFamily;
+    this.fontStyle = fontStyle || 'sans-serif';
+    this.isBold = bold || false;
+    this.isItalic = italic || false;
+    this.isEditable = false;
+    this.isNumeric = isNumeric || false;
+    this.isPassword = false;
+    this.shadowOffset = shadowOffset || new Point(0, 0);
+    this.shadowColor = shadowColor || null;
+    this.isShowingBlanks = false;
+    this.blanksColor = new Color(180, 140, 140);
+
+    // additional properties for text-editing:
+    this.isScrollable = true; // scrolls into view when edited
+    this.currentlySelecting = false;
+    this.startMark = 0;
+    this.endMark = 0;
+    this.markedTextColor = new Color(255, 255, 255);
+    this.markedBackgoundColor = new Color(60, 60, 120);
+
+    // initialize inherited properties:
+    StringMorph.uber.init.call(this);
+
+    // override inherited properites:
+    this.color = color || new Color(0, 0, 0);
+    this.noticesTransparentClick = true;
+    this.drawNew();
+};
+
+StringMorph.prototype.toString = function () {
+    // e.g. 'a StringMorph("Hello World")'
+    return 'a ' +
+        (this.constructor.name ||
+            this.constructor.toString().split(' ')[1].split('(')[0]) +
+        '("' + this.text.slice(0, 30) + '...")';
+};
+
+StringMorph.prototype.password = function (letter, length) {
+    var ans = '',
+        i;
+    for (i = 0; i < length; i += 1) {
+        ans += letter;
+    }
+    return ans;
+};
+
+StringMorph.prototype.font = function () {
+    // answer a font string, e.g. 'bold italic 12px sans-serif'
+    var font = '';
+    if (this.isBold) {
+        font = font + 'bold ';
+    }
+    if (this.isItalic) {
+        font = font + 'italic ';
+    }
+    return font +
+        this.fontSize + 'px ' +
+        (this.fontName ? this.fontName + ', ' : '') +
+        this.fontStyle;
+};
+
+StringMorph.prototype.drawNew = function () {
+    var context, width, start, stop, i, p, c, x, y,
+        txt = this.isPassword ?
+                this.password('*', this.text.length) : this.text;
+
+    // initialize my surface property
+    this.image = newCanvas();
+    context = this.image.getContext('2d');
+    context.font = this.font();
+
+    // set my extent
+    width = Math.max(
+        context.measureText(txt).width +
+            Math.abs(this.shadowOffset.x),
+        1
+    );
+    this.bounds.corner = this.bounds.origin.add(
+        new Point(
+            width,
+            fontHeight(this.fontSize) + Math.abs(this.shadowOffset.y)
+        )
+    );
+    this.image.width = width;
+    this.image.height = this.height();
+
+    // prepare context for drawing text
+    context.font = this.font();
+    context.textAlign = 'left';
+    context.textBaseline = 'bottom';
+
+    // first draw the shadow, if any
+    if (this.shadowColor) {
+        x = Math.max(this.shadowOffset.x, 0);
+        y = Math.max(this.shadowOffset.y, 0);
+        context.fillStyle = this.shadowColor.toString();
+        context.fillText(txt, x, fontHeight(this.fontSize) + y);
+    }
+
+    // now draw the actual text
+    x = Math.abs(Math.min(this.shadowOffset.x, 0));
+    y = Math.abs(Math.min(this.shadowOffset.y, 0));
+    context.fillStyle = this.color.toString();
+
+    if (this.isShowingBlanks) {
+        this.renderWithBlanks(context, x, fontHeight(this.fontSize) + y);
+    } else {
+        context.fillText(txt, x, fontHeight(this.fontSize) + y);
+    }
+
+    // draw the selection
+    start = Math.min(this.startMark, this.endMark);
+    stop = Math.max(this.startMark, this.endMark);
+    for (i = start; i < stop; i += 1) {
+        p = this.slotPosition(i).subtract(this.position());
+        c = txt.charAt(i);
+        context.fillStyle = this.markedBackgoundColor.toString();
+        context.fillRect(p.x, p.y, context.measureText(c).width + 1 + x,
+            fontHeight(this.fontSize) + y);
+        context.fillStyle = this.markedTextColor.toString();
+        context.fillText(c, p.x + x, fontHeight(this.fontSize) + y);
+    }
+
+    // notify my parent of layout change
+    if (this.parent) {
+        if (this.parent.fixLayout) {
+            this.parent.fixLayout();
+        }
+    }
+};
+
+StringMorph.prototype.renderWithBlanks = function (context, startX, y) {
+    var space = context.measureText(' ').width,
+        blank = newCanvas(new Point(space, this.height())),
+        ctx = blank.getContext('2d'),
+        words = this.text.split(' '),
+        x = startX || 0,
+        isFirst = true;
+
+    // create the blank form
+    ctx.fillStyle = this.blanksColor.toString();
+    ctx.arc(
+        space / 2,
+        blank.height / 2,
+        space / 2,
+        radians(0),
+        radians(360)
+    );
+    ctx.fill();
+
+    function drawBlank() {
+        context.drawImage(blank, x, 0);
+        x += space;
+    }
+
+    // render my text inserting blanks
+    words.forEach(function (word) {
+        if (!isFirst) {
+            drawBlank();
+        }
+        isFirst = false;
+        if (word !== '') {
+            context.fillText(word, x, y);
+            x += context.measureText(word).width;
+        }
+    });
+};
+
+// StringMorph mesuring:
+
+StringMorph.prototype.slotPosition = function (slot) {
+    // answer the position point of the given index ("slot")
+    // where the cursor should be placed
+    var txt = this.isPassword ?
+                this.password('*', this.text.length) : this.text,
+        dest = Math.min(Math.max(slot, 0), txt.length),
+        context = this.image.getContext('2d'),
+        xOffset,
+        x,
+        y,
+        idx;
+
+    xOffset = 0;
+    for (idx = 0; idx < dest; idx += 1) {
+        xOffset += context.measureText(txt[idx]).width;
+    }
+    this.pos = dest;
+    x = this.left() + xOffset;
+    y = this.top();
+    return new Point(x, y);
+};
+
+StringMorph.prototype.slotAt = function (aPoint) {
+    // answer the slot (index) closest to the given point
+    // so the cursor can be moved accordingly
+    var txt = this.isPassword ?
+                this.password('*', this.text.length) : this.text,
+        idx = 0,
+        charX = 0,
+        context = this.image.getContext('2d');
+
+    while (aPoint.x - this.left() > charX) {
+        charX += context.measureText(txt[idx]).width;
+        idx += 1;
+        if (idx === txt.length) {
+            if ((context.measureText(txt).width -
+                    (context.measureText(txt[idx - 1]).width / 2)) <
+                    (aPoint.x - this.left())) {
+                return idx;
+            }
+        }
+    }
+    return idx - 1;
+};
+
+StringMorph.prototype.upFrom = function (slot) {
+    // answer the slot above the given one
+    return slot;
+};
+
+StringMorph.prototype.downFrom = function (slot) {
+    // answer the slot below the given one
+    return slot;
+};
+
+StringMorph.prototype.startOfLine = function () {
+    // answer the first slot (index) of the line for the given slot
+    return 0;
+};
+
+StringMorph.prototype.endOfLine = function () {
+    // answer the slot (index) indicating the EOL for the given slot
+    return this.text.length;
+};
+
+StringMorph.prototype.rawHeight = function () {
+    // answer my corrected fontSize
+    return this.height() / 1.2;
+};
+
+// StringMorph menus:
+
+StringMorph.prototype.developersMenu = function () {
+    var menu = StringMorph.uber.developersMenu.call(this);
+
+    menu.addLine();
+    menu.addItem("edit", 'edit');
+    menu.addItem(
+        "font size...",
+        function () {
+            this.prompt(
+                menu.title + '\nfont\nsize:',
+                this.setFontSize,
+                this,
+                this.fontSize.toString(),
+                null,
+                6,
+                500,
+                true
+            );
+        },
+        'set this String\'s\nfont point size'
+    );
+    if (this.fontStyle !== 'serif') {
+        menu.addItem("serif", 'setSerif');
+    }
+    if (this.fontStyle !== 'sans-serif') {
+        menu.addItem("sans-serif", 'setSansSerif');
+    }
+    if (this.isBold) {
+        menu.addItem("normal weight", 'toggleWeight');
+    } else {
+        menu.addItem("bold", 'toggleWeight');
+    }
+    if (this.isItalic) {
+        menu.addItem("normal style", 'toggleItalic');
+    } else {
+        menu.addItem("italic", 'toggleItalic');
+    }
+    if (this.isShowingBlanks) {
+        menu.addItem("hide blanks", 'toggleShowBlanks');
+    } else {
+        menu.addItem("show blanks", 'toggleShowBlanks');
+    }
+    if (this.isPassword) {
+        menu.addItem("show characters", 'toggleIsPassword');
+    } else {
+        menu.addItem("hide characters", 'toggleIsPassword');
+    }
+    return menu;
+};
+
+StringMorph.prototype.toggleIsDraggable = function () {
+    // for context menu demo purposes
+    this.isDraggable = !this.isDraggable;
+    if (this.isDraggable) {
+        this.disableSelecting();
+    } else {
+        this.enableSelecting();
+    }
+};
+
+StringMorph.prototype.toggleShowBlanks = function () {
+    this.isShowingBlanks = !this.isShowingBlanks;
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.toggleWeight = function () {
+    this.isBold = !this.isBold;
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.toggleItalic = function () {
+    this.isItalic = !this.isItalic;
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.toggleIsPassword = function () {
+    this.isPassword = !this.isPassword;
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.setSerif = function () {
+    this.fontStyle = 'serif';
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.setSansSerif = function () {
+    this.fontStyle = 'sans-serif';
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.setFontSize = function (size) {
+    // for context menu demo purposes
+    var newSize;
+    if (typeof size === 'number') {
+        this.fontSize = Math.round(Math.min(Math.max(size, 4), 500));
+    } else {
+        newSize = parseFloat(size);
+        if (!isNaN(newSize)) {
+            this.fontSize = Math.round(
+                Math.min(Math.max(newSize, 4), 500)
+            );
+        }
+    }
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.setText = function (size) {
+    // for context menu demo purposes
+    this.text = Math.round(size).toString();
+    this.changed();
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.numericalSetters = function () {
+    // for context menu demo purposes
+    return [
+        'setLeft',
+        'setTop',
+        'setAlphaScaled',
+        'setFontSize',
+        'setText'
+    ];
+};
+
+// StringMorph editing:
+
+StringMorph.prototype.edit = function () {
+    this.root().edit(this);
+};
+
+StringMorph.prototype.selection = function () {
+    var start, stop;
+    start = Math.min(this.startMark, this.endMark);
+    stop = Math.max(this.startMark, this.endMark);
+    return this.text.slice(start, stop);
+};
+
+StringMorph.prototype.selectionStartSlot = function () {
+    return Math.min(this.startMark, this.endMark);
+};
+
+StringMorph.prototype.clearSelection = function () {
+    this.currentlySelecting = false;
+    this.startMark = 0;
+    this.endMark = 0;
+    this.drawNew();
+    this.changed();
+};
+
+StringMorph.prototype.deleteSelection = function () {
+    var start, stop, text;
+    text = this.text;
+    start = Math.min(this.startMark, this.endMark);
+    stop = Math.max(this.startMark, this.endMark);
+    this.text = text.slice(0, start) + text.slice(stop);
+    this.changed();
+    this.clearSelection();
+};
+
+StringMorph.prototype.selectAll = function () {
+    if (this.isEditable) {
+        this.startMark = 0;
+        this.endMark = this.text.length;
+        this.drawNew();
+        this.changed();
+    }
+};
+
+StringMorph.prototype.mouseDownLeft = function (pos) {
+    if (this.isEditable) {
+        this.clearSelection();
+    } else {
+        this.escalateEvent('mouseDownLeft', pos);
+    }
+};
+
+StringMorph.prototype.mouseClickLeft = function (pos) {
+    var cursor;
+    if (this.isEditable) {
+        if (!this.currentlySelecting) {
+            this.edit(); // creates a new cursor
+        }
+        cursor = this.root().cursor;
+        if (cursor) {
+            cursor.gotoPos(pos);
+        }
+        this.currentlySelecting = true;
+    } else {
+        this.escalateEvent('mouseClickLeft', pos);
+    }
+};
+
+StringMorph.prototype.enableSelecting = function () {
+    this.mouseDownLeft = function (pos) {
+        this.clearSelection();
+        if (this.isEditable && (!this.isDraggable)) {
+            this.edit();
+            this.root().cursor.gotoPos(pos);
+            this.startMark = this.slotAt(pos);
+            this.endMark = this.startMark;
+            this.currentlySelecting = true;
+        }
+    };
+    this.mouseMove = function (pos) {
+        if (this.isEditable &&
+                this.currentlySelecting &&
+                (!this.isDraggable)) {
+            var newMark = this.slotAt(pos);
+            if (newMark !== this.endMark) {
+                this.endMark = newMark;
+                this.drawNew();
+                this.changed();
+            }
+        }
+    };
+};
+
+StringMorph.prototype.disableSelecting = function () {
+    this.mouseDownLeft = StringMorph.prototype.mouseDownLeft;
+    delete this.mouseMove;
+};
+
+// TextMorph ////////////////////////////////////////////////////////////////
+
+// I am a multi-line, word-wrapping String, quasi-inheriting from StringMorph
+
+// TextMorph inherits from Morph:
+
+TextMorph.prototype = new Morph();
+TextMorph.prototype.constructor = TextMorph;
+TextMorph.uber = Morph.prototype;
+
+// TextMorph instance creation:
+
+function TextMorph(
+    text,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    alignment,
+    width,
+    fontName,
+    shadowOffset,
+    shadowColor
+) {
+    this.init(text,
+        fontSize,
+        fontStyle,
+        bold,
+        italic,
+        alignment,
+        width,
+        fontName,
+        shadowOffset,
+        shadowColor);
+}
+
+TextMorph.prototype.init = function (
+    text,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    alignment,
+    width,
+    fontName,
+    shadowOffset,
+    shadowColor
+) {
+    // additional properties:
+    this.text = text || (text === '' ? text : 'TextMorph');
+    this.words = [];
+    this.lines = [];
+    this.lineSlots = [];
+    this.fontSize = fontSize || 12;
+    this.fontName = fontName || MorphicPreferences.globalFontFamily;
+    this.fontStyle = fontStyle || 'sans-serif';
+    this.isBold = bold || false;
+    this.isItalic = italic || false;
+    this.alignment = alignment || 'left';
+    this.shadowOffset = shadowOffset || new Point(0, 0);
+    this.shadowColor = shadowColor || null;
+    this.maxWidth = width || 0;
+    this.maxLineWidth = 0;
+    this.backgroundColor = null;
+    this.isEditable = false;
+
+    //additional properties for ad-hoc evaluation:
+    this.receiver = null;
+
+    // additional properties for text-editing:
+    this.isScrollable = true; // scrolls into view when edited
+    this.currentlySelecting = false;
+    this.startMark = 0;
+    this.endMark = 0;
+    this.markedTextColor = new Color(255, 255, 255);
+    this.markedBackgoundColor = new Color(60, 60, 120);
+
+    // initialize inherited properties:
+    TextMorph.uber.init.call(this);
+
+    // override inherited properites:
+    this.color = new Color(0, 0, 0);
+    this.noticesTransparentClick = true;
+    this.drawNew();
+};
+
+TextMorph.prototype.toString = function () {
+    // e.g. 'a TextMorph("Hello World")'
+    return 'a TextMorph' + '("' + this.text.slice(0, 30) + '...")';
+};
+
+TextMorph.prototype.font = StringMorph.prototype.font;
+
+TextMorph.prototype.parse = function () {
+    var myself = this,
+        paragraphs = this.text.split('\n'),
+        canvas = newCanvas(),
+        context = canvas.getContext('2d'),
+        oldline = '',
+        newline,
+        w,
+        slot = 0;
+
+    context.font = this.font();
+    this.maxLineWidth = 0;
+    this.lines = [];
+    this.lineSlots = [0];
+    this.words = [];
+
+    paragraphs.forEach(function (p) {
+        myself.words = myself.words.concat(p.split(' '));
+        myself.words.push('\n');
+    });
+
+    this.words.forEach(function (word) {
+        if (word === '\n') {
+            myself.lines.push(oldline);
+            myself.lineSlots.push(slot);
+            myself.maxLineWidth = Math.max(
+                myself.maxLineWidth,
+                context.measureText(oldline).width
+            );
+            oldline = '';
+        } else {
+            if (myself.maxWidth > 0) {
+                newline = oldline + word + ' ';
+                w = context.measureText(newline).width;
+                if (w > myself.maxWidth) {
+                    myself.lines.push(oldline);
+                    myself.lineSlots.push(slot);
+                    myself.maxLineWidth = Math.max(
+                        myself.maxLineWidth,
+                        context.measureText(oldline).width
+                    );
+                    oldline = word + ' ';
+                } else {
+                    oldline = newline;
+                }
+            } else {
+                oldline = oldline + word + ' ';
+            }
+            slot += word.length + 1;
+        }
+    });
+};
+
+TextMorph.prototype.drawNew = function () {
+    var context, height, i, line, width, shadowHeight, shadowWidth,
+        offx, offy, x, y, start, stop, p, c;
+
+    this.image = newCanvas();
+    context = this.image.getContext('2d');
+    context.font = this.font();
+    this.parse();
+
+    // set my extent
+    shadowWidth = Math.abs(this.shadowOffset.x);
+    shadowHeight = Math.abs(this.shadowOffset.y);
+    height = this.lines.length * (fontHeight(this.fontSize) + shadowHeight);
+    if (this.maxWidth === 0) {
+        this.bounds = this.bounds.origin.extent(
+            new Point(this.maxLineWidth + shadowWidth, height)
+        );
+    } else {
+        this.bounds = this.bounds.origin.extent(
+            new Point(this.maxWidth + shadowWidth, height)
+        );
+    }
+    this.image.width = this.width();
+    this.image.height = this.height();
+
+    // prepare context for drawing text
+    context = this.image.getContext('2d');
+    context.font = this.font();
+    context.textAlign = 'left';
+    context.textBaseline = 'bottom';
+
+    // fill the background, if desired
+    if (this.backgroundColor) {
+        context.fillStyle = this.backgroundColor.toString();
+        context.fillRect(0, 0, this.width(), this.height());
+    }
+
+    // draw the shadow, if any
+    if (this.shadowColor) {
+        offx = Math.max(this.shadowOffset.x, 0);
+        offy = Math.max(this.shadowOffset.y, 0);
+        context.fillStyle = this.shadowColor.toString();
+
+        for (i = 0; i < this.lines.length; i = i + 1) {
+            line = this.lines[i];
+            width = context.measureText(line).width + shadowWidth;
+            if (this.alignment === 'right') {
+                x = this.width() - width;
+            } else if (this.alignment === 'center') {
+                x = (this.width() - width) / 2;
+            } else { // 'left'
+                x = 0;
+            }
+            y = (i + 1) * (fontHeight(this.fontSize) + shadowHeight)
+                - shadowHeight;
+            context.fillText(line, x + offx, y + offy);
+        }
+    }
+
+    // now draw the actual text
+    offx = Math.abs(Math.min(this.shadowOffset.x, 0));
+    offy = Math.abs(Math.min(this.shadowOffset.y, 0));
+    context.fillStyle = this.color.toString();
+
+    for (i = 0; i < this.lines.length; i = i + 1) {
+        line = this.lines[i];
+        width = context.measureText(line).width + shadowWidth;
+        if (this.alignment === 'right') {
+            x = this.width() - width;
+        } else if (this.alignment === 'center') {
+            x = (this.width() - width) / 2;
+        } else { // 'left'
+            x = 0;
+        }
+        y = (i + 1) * (fontHeight(this.fontSize) + shadowHeight)
+            - shadowHeight;
+        context.fillText(line, x + offx, y + offy);
+    }
+
+    // draw the selection
+    start = Math.min(this.startMark, this.endMark);
+    stop = Math.max(this.startMark, this.endMark);
+    for (i = start; i < stop; i += 1) {
+        p = this.slotPosition(i).subtract(this.position());
+        c = this.text.charAt(i);
+        context.fillStyle = this.markedBackgoundColor.toString();
+        context.fillRect(p.x, p.y, context.measureText(c).width + 1,
+            fontHeight(this.fontSize));
+        context.fillStyle = this.markedTextColor.toString();
+        context.fillText(c, p.x, p.y + fontHeight(this.fontSize));
+    }
+
+    // notify my parent of layout change
+    if (this.parent) {
+        if (this.parent.layoutChanged) {
+            this.parent.layoutChanged();
+        }
+    }
+};
+
+TextMorph.prototype.setExtent = function (aPoint) {
+    this.maxWidth = Math.max(aPoint.x, 0);
+    this.changed();
+    this.drawNew();
+};
+
+// TextMorph mesuring:
+
+TextMorph.prototype.columnRow = function (slot) {
+    // answer the logical position point of the given index ("slot")
+    var row,
+        col,
+        idx = 0;
+
+    for (row = 0; row < this.lines.length; row += 1) {
+        idx = this.lineSlots[row];
+        for (col = 0; col < this.lines[row].length; col += 1) {
+            if (idx === slot) {
+                return new Point(col, row);
+            }
+            idx += 1;
+        }
+    }
+    // return new Point(0, 0);
+    return new Point(
+        this.lines[this.lines.length - 1].length - 1,
+        this.lines.length - 1
+    );
+};
+
+TextMorph.prototype.slotPosition = function (slot) {
+    // answer the physical position point of the given index ("slot")
+    // where the cursor should be placed
+    var colRow = this.columnRow(slot),
+        context = this.image.getContext('2d'),
+        shadowHeight = Math.abs(this.shadowOffset.y),
+        xOffset = 0,
+        yOffset,
+        x,
+        y,
+        idx;
+
+    yOffset = colRow.y * (fontHeight(this.fontSize) + shadowHeight);
+    for (idx = 0; idx < colRow.x; idx += 1) {
+        xOffset += context.measureText(this.lines[colRow.y][idx]).width;
+    }
+    x = this.left() + xOffset;
+    y = this.top() + yOffset;
+    return new Point(x, y);
+};
+
+TextMorph.prototype.slotAt = function (aPoint) {
+    // answer the slot (index) closest to the given point
+    // so the cursor can be moved accordingly
+    var charX = 0,
+        row = 0,
+        col = 0,
+        shadowHeight = Math.abs(this.shadowOffset.y),
+        context = this.image.getContext('2d');
+
+    while (aPoint.y - this.top() >
+            ((fontHeight(this.fontSize) + shadowHeight) * row)) {
+        row += 1;
+    }
+    row = Math.max(row, 1);
+    while (aPoint.x - this.left() > charX) {
+        charX += context.measureText(this.lines[row - 1][col]).width;
+        col += 1;
+    }
+    return this.lineSlots[Math.max(row - 1, 0)] + col - 1;
+};
+
+TextMorph.prototype.upFrom = function (slot) {
+    // answer the slot above the given one
+    var above,
+        colRow = this.columnRow(slot);
+    if (colRow.y < 1) {
+        return slot;
+    }
+    above = this.lines[colRow.y - 1];
+    if (above.length < colRow.x - 1) {
+        return this.lineSlots[colRow.y - 1] + above.length;
+    }
+    return this.lineSlots[colRow.y - 1] + colRow.x;
+};
+
+TextMorph.prototype.downFrom = function (slot) {
+    // answer the slot below the given one
+    var below,
+        colRow = this.columnRow(slot);
+    if (colRow.y > this.lines.length - 2) {
+        return slot;
+    }
+    below = this.lines[colRow.y + 1];
+    if (below.length < colRow.x - 1) {
+        return this.lineSlots[colRow.y + 1] + below.length;
+    }
+    return this.lineSlots[colRow.y + 1] + colRow.x;
+};
+
+TextMorph.prototype.startOfLine = function (slot) {
+    // answer the first slot (index) of the line for the given slot
+    return this.lineSlots[this.columnRow(slot).y];
+};
+
+TextMorph.prototype.endOfLine = function (slot) {
+    // answer the slot (index) indicating the EOL for the given slot
+    return this.startOfLine(slot) +
+        this.lines[this.columnRow(slot).y].length - 1;
+};
+
+// TextMorph editing:
+
+TextMorph.prototype.edit = StringMorph.prototype.edit;
+
+TextMorph.prototype.selection = StringMorph.prototype.selection;
+
+TextMorph.prototype.selectionStartSlot
+    = StringMorph.prototype.selectionStartSlot;
+
+TextMorph.prototype.clearSelection = StringMorph.prototype.clearSelection;
+
+TextMorph.prototype.deleteSelection = StringMorph.prototype.deleteSelection;
+
+TextMorph.prototype.selectAll = StringMorph.prototype.selectAll;
+
+TextMorph.prototype.mouseDownLeft = StringMorph.prototype.mouseDownLeft;
+
+TextMorph.prototype.mouseClickLeft = StringMorph.prototype.mouseClickLeft;
+
+TextMorph.prototype.enableSelecting = StringMorph.prototype.enableSelecting;
+
+TextMorph.prototype.disableSelecting = StringMorph.prototype.disableSelecting;
+
+TextMorph.prototype.selectAllAndEdit = function () {
+    this.edit();
+    this.selectAll();
+};
+
+// TextMorph menus:
+
+TextMorph.prototype.developersMenu = function () {
+    var menu = TextMorph.uber.developersMenu.call(this);
+    menu.addLine();
+    menu.addItem("edit", 'edit');
+    menu.addItem(
+        "font size...",
+        function () {
+            this.prompt(
+                menu.title + '\nfont\nsize:',
+                this.setFontSize,
+                this,
+                this.fontSize.toString(),
+                null,
+                6,
+                100,
+                true
+            );
+        },
+        'set this Text\'s\nfont point size'
+    );
+    if (this.alignment !== 'left') {
+        menu.addItem("align left", 'setAlignmentToLeft');
+    }
+    if (this.alignment !== 'right') {
+        menu.addItem("align right", 'setAlignmentToRight');
+    }
+    if (this.alignment !== 'center') {
+        menu.addItem("align center", 'setAlignmentToCenter');
+    }
+    menu.addLine();
+    if (this.fontStyle !== 'serif') {
+        menu.addItem("serif", 'setSerif');
+    }
+    if (this.fontStyle !== 'sans-serif') {
+        menu.addItem("sans-serif", 'setSansSerif');
+    }
+    if (this.isBold) {
+        menu.addItem("normal weight", 'toggleWeight');
+    } else {
+        menu.addItem("bold", 'toggleWeight');
+    }
+    if (this.isItalic) {
+        menu.addItem("normal style", 'toggleItalic');
+    } else {
+        menu.addItem("italic", 'toggleItalic');
+    }
+    return menu;
+};
+
+TextMorph.prototype.setAlignmentToLeft = function () {
+    this.alignment = 'left';
+    this.drawNew();
+    this.changed();
+};
+
+TextMorph.prototype.setAlignmentToRight = function () {
+    this.alignment = 'right';
+    this.drawNew();
+    this.changed();
+};
+
+TextMorph.prototype.setAlignmentToCenter = function () {
+    this.alignment = 'center';
+    this.drawNew();
+    this.changed();
+};
+
+TextMorph.prototype.toggleIsDraggable
+    = StringMorph.prototype.toggleIsDraggable;
+
+TextMorph.prototype.toggleWeight = StringMorph.prototype.toggleWeight;
+
+TextMorph.prototype.toggleItalic = StringMorph.prototype.toggleItalic;
+
+TextMorph.prototype.setSerif = StringMorph.prototype.setSerif;
+
+TextMorph.prototype.setSansSerif = StringMorph.prototype.setSansSerif;
+
+TextMorph.prototype.setText = StringMorph.prototype.setText;
+
+TextMorph.prototype.setFontSize = StringMorph.prototype.setFontSize;
+
+TextMorph.prototype.numericalSetters = StringMorph.prototype.numericalSetters;
+
+// TextMorph evaluation:
+
+TextMorph.prototype.evaluationMenu = function () {
+    var menu = new MenuMorph(this, null);
+    menu.addItem(
+        "do it",
+        'doIt',
+        'evaluate the\nselected expression'
+    );
+    menu.addItem(
+        "show it",
+        'showIt',
+        'evaluate the\nselected expression\nand show the result'
+    );
+    menu.addItem(
+        "inspect it",
+        'inspectIt',
+        'evaluate the\nselected expression\nand inspect the result'
+    );
+    menu.addLine();
+    menu.addItem("select all", 'selectAllAndEdit');
+    return menu;
+};
+
+TextMorph.prototype.setReceiver = function (obj) {
+    this.receiver = obj;
+    this.customContextMenu = this.evaluationMenu();
+};
+
+TextMorph.prototype.doIt = function () {
+    this.receiver.evaluateString(this.selection());
+    this.edit();
+};
+
+TextMorph.prototype.showIt = function () {
+    var result = this.receiver.evaluateString(this.selection());
+    if (result !== null) {
+        this.inform(result);
+    }
+};
+
+TextMorph.prototype.inspectIt = function () {
+    var result = this.receiver.evaluateString(this.selection()),
+        world = this.world(),
+        inspector;
+    if (result !== null) {
+        inspector = new InspectorMorph(result);
+        inspector.setPosition(world.hand.position());
+        inspector.keepWithin(world);
+        world.add(inspector);
+        inspector.changed();
+    }
+};
+
+// TriggerMorph ////////////////////////////////////////////////////////
+
+// I provide basic button functionality
+
+// TriggerMorph inherits from Morph:
+
+TriggerMorph.prototype = new Morph();
+TriggerMorph.prototype.constructor = TriggerMorph;
+TriggerMorph.uber = Morph.prototype;
+
+// TriggerMorph instance creation:
+
+function TriggerMorph(
+    target,
+    action,
+    labelString,
+    fontSize,
+    fontStyle,
+    environment,
+    hint,
+    labelColor
+) {
+    this.init(
+        target,
+        action,
+        labelString,
+        fontSize,
+        fontStyle,
+        environment,
+        hint,
+        labelColor
+    );
+}
+
+TriggerMorph.prototype.init = function (
+    target,
+    action,
+    labelString,
+    fontSize,
+    fontStyle,
+    environment,
+    hint,
+    labelColor
+) {
+    // additional properties:
+    this.target = target || null;
+    this.action = action || null;
+    this.environment = environment || null;
+    this.labelString = labelString || null;
+    this.label = null;
+    this.hint = hint || null;
+    this.fontSize = fontSize || MorphicPreferences.menuFontSize;
+    this.fontStyle = fontStyle || 'sans-serif';
+    this.highlightColor = new Color(192, 192, 192);
+    this.pressColor = new Color(128, 128, 128);
+    this.labelColor = labelColor || new Color(0, 0, 0);
+
+    // initialize inherited properties:
+    TriggerMorph.uber.init.call(this);
+
+    // override inherited properites:
+    this.color = new Color(255, 255, 255);
+    this.drawNew();
+};
+
+// TriggerMorph drawing:
+
+TriggerMorph.prototype.drawNew = function () {
+    this.createBackgrounds();
+    if (this.labelString !== null) {
+        this.createLabel();
+    }
+};
+
+TriggerMorph.prototype.createBackgrounds = function () {
+    var context,
+        ext = this.extent();
+
+    this.normalImage = newCanvas(ext);
+    context = this.normalImage.getContext('2d');
+    context.fillStyle = this.color.toString();
+    context.fillRect(0, 0, ext.x, ext.y);
+
+    this.highlightImage = newCanvas(ext);
+    context = this.highlightImage.getContext('2d');
+    context.fillStyle = this.highlightColor.toString();
+    context.fillRect(0, 0, ext.x, ext.y);
+
+    this.pressImage = newCanvas(ext);
+    context = this.pressImage.getContext('2d');
+    context.fillStyle = this.pressColor.toString();
+    context.fillRect(0, 0, ext.x, ext.y);
+
+    this.image = this.normalImage;
+};
+
+TriggerMorph.prototype.createLabel = function () {
+    if (this.label !== null) {
+        this.label.destroy();
+    }
+    this.label = new StringMorph(
+        this.labelString,
+        this.fontSize,
+        this.fontStyle,
+        false, // bold
+        false, // italic
+        false, // numeric
+        null, // shadow offset
+        null, // shadow color
+        this.labelColor
+    );
+    this.label.setPosition(
+        this.center().subtract(
+            this.label.extent().floorDivideBy(2)
+        )
+    );
+    this.add(this.label);
+};
+
+// TriggerMorph duplicating:
+
+TriggerMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = TriggerMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.label && dict[this.label]) {
+        c.label = (dict[this.label]);
+    }
+    return c;
+};
+
+// TriggerMorph action:
+
+TriggerMorph.prototype.trigger = function () {
+    /*
+    if target is a function, use it as callback:
+    execute target as callback function with action as argument
+    in the environment as optionally specified.
+    Note: if action is also a function, instead of becoming
+    the argument itself it will be called to answer the argument.
+    for selections, Yes/No Choices etc:
+
+    else (if target is not a function):
+
+        if action is a function:
+        execute the action with target as environment (can be null)
+        for lambdafied (inline) actions
+
+        else if action is a String:
+        treat it as function property of target and execute it
+        for selector-like actions
+    */
+    if (typeof this.target === 'function') {
+        if (typeof this.action === 'function') {
+            this.target.call(this.environment, this.action.call());
+        } else {
+            this.target.call(this.environment, this.action);
+        }
+    } else {
+        if (typeof this.action === 'function') {
+            this.action.call(this.target);
+        } else { // assume it's a String
+            this.target[this.action]();
+        }
+    }
+};
+
+// TriggerMorph events:
+
+TriggerMorph.prototype.mouseEnter = function () {
+    this.image = this.highlightImage;
+    this.changed();
+    if (this.hint) {
+        this.bubbleHelp(this.hint);
+    }
+};
+
+TriggerMorph.prototype.mouseLeave = function () {
+    this.image = this.normalImage;
+    this.changed();
+    if (this.hint) {
+        this.world().hand.destroyTemporaries();
+    }
+};
+
+TriggerMorph.prototype.mouseDownLeft = function () {
+    this.image = this.pressImage;
+    this.changed();
+};
+
+TriggerMorph.prototype.mouseClickLeft = function () {
+    this.image = this.highlightImage;
+    this.changed();
+    this.trigger();
+};
+
+// TriggerMorph bubble help:
+
+TriggerMorph.prototype.bubbleHelp = function (contents) {
+    var myself = this;
+    this.fps = 2;
+    this.step = function () {
+        if (this.bounds.containsPoint(this.world().hand.position())) {
+            myself.popUpbubbleHelp(contents);
+        }
+        myself.fps = 0;
+        delete myself.step;
+    };
+};
+
+TriggerMorph.prototype.popUpbubbleHelp = function (contents) {
+    new SpeechBubbleMorph(
+        localize(contents),
+        null,
+        null,
+        1
+    ).popUp(this.world(), this.rightCenter().add(new Point(-8, 0)));
+};
+
+// MenuItemMorph ///////////////////////////////////////////////////////
+
+// I automatically determine my bounds
+
+var MenuItemMorph;
+
+// MenuItemMorph inherits from TriggerMorph:
+
+MenuItemMorph.prototype = new TriggerMorph();
+MenuItemMorph.prototype.constructor = MenuItemMorph;
+MenuItemMorph.uber = TriggerMorph.prototype;
+
+// MenuItemMorph instance creation:
+
+function MenuItemMorph(
+    target,
+    action,
+    labelString, // can also be a Morph or a Canvas or a tuple: [icon, string]
+    fontSize,
+    fontStyle,
+    environment,
+    hint,
+    color
+) {
+    this.init(
+        target,
+        action,
+        labelString,
+        fontSize,
+        fontStyle,
+        environment,
+        hint,
+        color
+    );
+}
+
+MenuItemMorph.prototype.createLabel = function () {
+    var icon, lbl, np;
+    if (this.label !== null) {
+        this.label.destroy();
+    }
+    if (isString(this.labelString)) {
+        this.label = this.createLabelString(this.labelString);
+    } else if (this.labelString instanceof Array) {
+        // assume its pattern is: [icon, string] 
+        this.label = new Morph();
+        this.label.alpha = 0; // transparent
+        this.label.add(icon = this.createIcon(this.labelString[0]));
+        this.label.add(lbl = this.createLabelString(this.labelString[1]));
+        lbl.setCenter(icon.center());
+        lbl.setLeft(icon.right() + 4);
+        this.label.bounds = (icon.bounds.merge(lbl.bounds));
+        this.label.drawNew();
+    } else { // assume it's either a Morph or a Canvas
+        this.label = this.createIcon(this.labelString);
+    }
+    this.silentSetExtent(this.label.extent().add(new Point(8, 0)));
+    np = this.position().add(new Point(4, 0));
+    this.label.bounds = np.extent(this.label.extent());
+    this.add(this.label);
+};
+
+MenuItemMorph.prototype.createIcon = function (source) {
+    // source can be either a Morph or an HTMLCanvasElement
+    var icon = new Morph(),
+        src;
+    icon.image = source instanceof Morph ? source.fullImage() : source;
+    // adjust shadow dimensions
+    if (source instanceof Morph && source.getShadow()) {
+        src = icon.image;
+        icon.image = newCanvas(
+            source.fullBounds().extent().subtract(
+                this.shadowBlur * (useBlurredShadows ? 1 : 2)
+            )
+        );
+        icon.image.getContext('2d').drawImage(src, 0, 0);
+    }
+    icon.silentSetWidth(icon.image.width);
+    icon.silentSetHeight(icon.image.height);
+    return icon;
+};
+
+MenuItemMorph.prototype.createLabelString = function (string) {
+    var lbl = new TextMorph(
+        string,
+        this.fontSize,
+        this.fontStyle
+    );
+    lbl.setColor(this.labelColor);
+    return lbl;
+};
+
+// MenuItemMorph events:
+
+MenuItemMorph.prototype.mouseEnter = function () {
+    if (!this.isListItem()) {
+        this.image = this.highlightImage;
+        this.changed();
+    }
+    if (this.hint) {
+        this.bubbleHelp(this.hint);
+    }
+};
+
+MenuItemMorph.prototype.mouseLeave = function () {
+    if (!this.isListItem()) {
+        this.image = this.normalImage;
+        this.changed();
+    }
+    if (this.hint) {
+        this.world().hand.destroyTemporaries();
+    }
+};
+
+MenuItemMorph.prototype.mouseDownLeft = function (pos) {
+    if (this.isListItem()) {
+        this.parent.unselectAllItems();
+        this.escalateEvent('mouseDownLeft', pos);
+    }
+    this.image = this.pressImage;
+    this.changed();
+};
+
+MenuItemMorph.prototype.mouseMove = function () {
+    if (this.isListItem()) {
+        this.escalateEvent('mouseMove');
+    }
+};
+
+MenuItemMorph.prototype.mouseClickLeft = function () {
+    if (!this.isListItem()) {
+        this.parent.destroy();
+        this.root().activeMenu = null;
+    }
+    this.trigger();
+};
+
+MenuItemMorph.prototype.isListItem = function () {
+    if (this.parent) {
+        return this.parent.isListContents;
+    }
+    return false;
+};
+
+MenuItemMorph.prototype.isSelectedListItem = function () {
+    if (this.isListItem()) {
+        return this.image === this.pressImage;
+    }
+    return false;
+};
+
+// FrameMorph //////////////////////////////////////////////////////////
+
+// I clip my submorphs at my bounds
+
+// Frames inherit from Morph:
+
+FrameMorph.prototype = new Morph();
+FrameMorph.prototype.constructor = FrameMorph;
+FrameMorph.uber = Morph.prototype;
+
+function FrameMorph(aScrollFrame) {
+    this.init(aScrollFrame);
+}
+
+FrameMorph.prototype.init = function (aScrollFrame) {
+    this.scrollFrame = aScrollFrame || null;
+
+    FrameMorph.uber.init.call(this);
+    this.color = new Color(255, 250, 245);
+    this.drawNew();
+    this.acceptsDrops = true;
+
+    if (this.scrollFrame) {
+        this.isDraggable = false;
+        this.noticesTransparentClick = false;
+        this.alpha = 0;
+    }
+};
+
+FrameMorph.prototype.fullBounds = function () {
+    var shadow = this.getShadow();
+    if (shadow !== null) {
+        return this.bounds.merge(shadow.bounds);
+    }
+    return this.bounds;
+};
+
+FrameMorph.prototype.fullImage = function () {
+    // use only for shadows
+    return this.image;
+};
+
+FrameMorph.prototype.fullDrawOn = function (aCanvas, aRect) {
+    var rectangle, dirty;
+    if (!this.isVisible) {
+        return null;
+    }
+    rectangle = aRect || this.fullBounds();
+    dirty = this.bounds.intersect(rectangle);
+    if (!dirty.extent().gt(new Point(0, 0))) {
+        return null;
+    }
+    this.drawOn(aCanvas, dirty);
+    this.children.forEach(function (child) {
+        if (child instanceof ShadowMorph) {
+            child.fullDrawOn(aCanvas, rectangle);
+        } else {
+            child.fullDrawOn(aCanvas, dirty);
+        }
+    });
+};
+
+// FrameMorph scrolling optimization:
+
+FrameMorph.prototype.moveBy = function (delta) {
+    this.changed();
+    this.bounds = this.bounds.translateBy(delta);
+    this.children.forEach(function (child) {
+        child.silentMoveBy(delta);
+    });
+    this.changed();
+};
+
+// FrameMorph scrolling support:
+
+FrameMorph.prototype.submorphBounds = function () {
+    var result = null;
+
+    if (this.children.length > 0) {
+        result = this.children[0].bounds;
+        this.children.forEach(function (child) {
+            result = result.merge(child.fullBounds());
+        });
+    }
+    return result;
+};
+
+FrameMorph.prototype.keepInScrollFrame = function () {
+    if (this.scrollFrame === null) {
+        return null;
+    }
+    if (this.left() > this.scrollFrame.left()) {
+        this.moveBy(
+            new Point(this.scrollFrame.left() - this.left(), 0)
+        );
+    }
+    if (this.right() < this.scrollFrame.right()) {
+        this.moveBy(
+            new Point(this.scrollFrame.right() - this.right(), 0)
+        );
+    }
+    if (this.top() > this.scrollFrame.top()) {
+        this.moveBy(
+            new Point(0, this.scrollFrame.top() - this.top())
+        );
+    }
+    if (this.bottom() < this.scrollFrame.bottom()) {
+        this.moveBy(
+            0,
+            new Point(this.scrollFrame.bottom() - this.bottom(), 0)
+        );
+    }
+};
+
+FrameMorph.prototype.adjustBounds = function () {
+    var subBounds,
+        newBounds,
+        myself = this;
+
+    if (this.scrollFrame === null) {
+        return null;
+    }
+
+    subBounds = this.submorphBounds();
+    if (subBounds && (!this.scrollFrame.isTextLineWrapping)) {
+        newBounds = subBounds
+            .expandBy(this.scrollFrame.padding)
+            .growBy(this.scrollFrame.growth)
+            .merge(this.scrollFrame.bounds);
+    } else {
+        newBounds = this.scrollFrame.bounds.copy();
+    }
+    if (!this.bounds.eq(newBounds)) {
+        this.bounds = newBounds;
+        this.drawNew();
+        this.keepInScrollFrame();
+    }
+
+    if (this.scrollFrame.isTextLineWrapping) {
+        this.children.forEach(function (morph) {
+            if (morph instanceof TextMorph) {
+                morph.setWidth(myself.width());
+                myself.setHeight(
+                    Math.max(morph.height(), myself.scrollFrame.height())
+                );
+            }
+        });
+    }
+
+    this.scrollFrame.adjustScrollBars();
+};
+
+// FrameMorph dragging & dropping of contents:
+
+FrameMorph.prototype.reactToDropOf = function () {
+    this.adjustBounds();
+};
+
+FrameMorph.prototype.reactToGrabOf = function () {
+    this.adjustBounds();
+};
+
+// FrameMorph duplicating:
+
+FrameMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = FrameMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.frame && dict[this.scrollFrame]) {
+        c.frame = (dict[this.scrollFrame]);
+    }
+    return c;
+};
+
+// FrameMorph menus:
+
+FrameMorph.prototype.developersMenu = function () {
+    var menu = FrameMorph.uber.developersMenu.call(this);
+    if (this.children.length > 0) {
+        menu.addLine();
+        menu.addItem(
+            "move all inside...",
+            'keepAllSubmorphsWithin',
+            'keep all submorphs\nwithin and visible'
+        );
+    }
+    return menu;
+};
+
+FrameMorph.prototype.keepAllSubmorphsWithin = function () {
+    var myself = this;
+    this.children.forEach(function (m) {
+        m.keepWithin(myself);
+    });
+};
+
+// ScrollFrameMorph ////////////////////////////////////////////////////
+
+ScrollFrameMorph.prototype = new FrameMorph();
+ScrollFrameMorph.prototype.constructor = ScrollFrameMorph;
+ScrollFrameMorph.uber = FrameMorph.prototype;
+
+function ScrollFrameMorph(scroller, size, sliderColor) {
+    this.init(scroller, size, sliderColor);
+}
+
+ScrollFrameMorph.prototype.init = function (scroller, size, sliderColor) {
+    var myself = this;
+
+    ScrollFrameMorph.uber.init.call(this);
+    this.scrollBarSize = size || MorphicPreferences.scrollBarSize;
+    this.autoScrollTrigger = null;
+    this.isScrollingByDragging = true;    // change if desired
+    this.hasVelocity = true; // dto.
+    this.padding = 0; // around the scrollable area
+    this.growth = 0; // pixels or Point to grow right/left when near edge
+    this.isTextLineWrapping = false;
+    this.contents = scroller || new FrameMorph(this);
+    this.add(this.contents);
+    this.hBar = new SliderMorph(
+        null, // start
+        null, // stop
+        null, // value
+        null, // size
+        'horizontal',
+        sliderColor
+    );
+    this.hBar.setHeight(this.scrollBarSize);
+    this.hBar.action = function (num) {
+        myself.contents.setPosition(
+            new Point(
+                myself.left() - num,
+                myself.contents.position().y
+            )
+        );
+    };
+    this.hBar.isDraggable = false;
+    this.add(this.hBar);
+    this.vBar = new SliderMorph(
+        null, // start
+        null, // stop
+        null, // value
+        null, // size
+        'vertical',
+        sliderColor
+    );
+    this.vBar.setWidth(this.scrollBarSize);
+    this.vBar.action = function (num) {
+        myself.contents.setPosition(
+            new Point(
+                myself.contents.position().x,
+                myself.top() - num
+            )
+        );
+    };
+    this.vBar.isDraggable = false;
+    this.add(this.vBar);
+};
+
+ScrollFrameMorph.prototype.adjustScrollBars = function () {
+    var hWidth = this.width() - this.scrollBarSize,
+        vHeight = this.height() - this.scrollBarSize;
+
+    this.changed();
+    if (this.contents.width() > this.width() +
+            MorphicPreferences.scrollBarSize) {
+        this.hBar.show();
+        if (this.hBar.width() !== hWidth) {
+            this.hBar.setWidth(hWidth);
+        }
+
+        this.hBar.setPosition(
+            new Point(
+                this.left(),
+                this.bottom() - this.hBar.height()
+            )
+        );
+        this.hBar.start = 0;
+        this.hBar.stop = this.contents.width() - this.width();
+        this.hBar.size =
+            this.width() / this.contents.width() * this.hBar.stop;
+        this.hBar.value = this.left() - this.contents.left();
+        this.hBar.drawNew();
+    } else {
+        this.hBar.hide();
+    }
+
+    if (this.contents.height() > this.height() +
+            this.scrollBarSize) {
+        this.vBar.show();
+        if (this.vBar.height() !== vHeight) {
+            this.vBar.setHeight(vHeight);
+        }
+
+        this.vBar.setPosition(
+            new Point(
+                this.right() - this.vBar.width(),
+                this.top()
+            )
+        );
+        this.vBar.start = 0;
+        this.vBar.stop = this.contents.height() - this.height();
+        this.vBar.size =
+            this.height() / this.contents.height() * this.vBar.stop;
+        this.vBar.value = this.top() - this.contents.top();
+        this.vBar.drawNew();
+    } else {
+        this.vBar.hide();
+    }
+};
+
+ScrollFrameMorph.prototype.addContents = function (aMorph) {
+    this.contents.add(aMorph);
+    this.contents.adjustBounds();
+};
+
+ScrollFrameMorph.prototype.setContents = function (aMorph) {
+    this.contents.children.forEach(function (m) {
+        m.destroy();
+    });
+    this.contents.children = [];
+    aMorph.setPosition(this.position().add(this.padding + 2));
+    this.addContents(aMorph);
+};
+
+ScrollFrameMorph.prototype.setExtent = function (aPoint) {
+    if (this.isTextLineWrapping) {
+        this.contents.setPosition(this.position().copy());
+    }
+    ScrollFrameMorph.uber.setExtent.call(this, aPoint);
+    this.contents.adjustBounds();
+};
+
+// ScrollFrameMorph scrolling by dragging:
+
+ScrollFrameMorph.prototype.scrollX = function (steps) {
+    var cl = this.contents.left(),
+        l = this.left(),
+        cw = this.contents.width(),
+        r = this.right(),
+        newX;
+
+    newX = cl + steps;
+    if (newX > l) {
+        newX = l;
+    }
+    if (newX + cw < r) {
+        newX = r - cw;
+    }
+    if (newX !== cl) {
+        this.contents.setLeft(newX);
+    }
+};
+
+ScrollFrameMorph.prototype.scrollY = function (steps) {
+    var ct = this.contents.top(),
+        t = this.top(),
+        ch = this.contents.height(),
+        b = this.bottom(),
+        newY;
+
+    newY = ct + steps;
+    if (newY > t) {
+        newY = t;
+    }
+    if (newY + ch < b) {
+        newY = b - ch;
+    }
+    if (newY !== ct) {
+        this.contents.setTop(newY);
+    }
+};
+
+ScrollFrameMorph.prototype.step = function () {
+    nop();
+};
+
+ScrollFrameMorph.prototype.mouseDownLeft = function (pos) {
+    if (!this.isScrollingByDragging) {
+        return null;
+    }
+    var world = this.root(),
+        oldPos = pos,
+        myself = this,
+        deltaX = 0,
+        deltaY = 0,
+        friction = 0.8;
+
+    this.step = function () {
+        var newPos;
+        if (world.hand.mouseButton &&
+                (world.hand.children.length === 0) &&
+                (myself.bounds.containsPoint(world.hand.position()))) {
+            newPos = world.hand.bounds.origin;
+            deltaX = newPos.x - oldPos.x;
+            if (deltaX !== 0) {
+                myself.scrollX(deltaX);
+            }
+            deltaY = newPos.y - oldPos.y;
+            if (deltaY !== 0) {
+                myself.scrollY(deltaY);
+            }
+            oldPos = newPos;
+        } else {
+            if (!myself.hasVelocity) {
+                myself.step = function () {
+                    nop();
+                };
+            } else {
+                if ((Math.abs(deltaX) < 0.5) &&
+                        (Math.abs(deltaY) < 0.5)) {
+                    myself.step = function () {
+                        nop();
+                    };
+                } else {
+                    deltaX = deltaX * friction;
+                    myself.scrollX(Math.round(deltaX));
+                    deltaY = deltaY * friction;
+                    myself.scrollY(Math.round(deltaY));
+                }
+            }
+        }
+        this.adjustScrollBars();
+    };
+};
+
+ScrollFrameMorph.prototype.startAutoScrolling = function () {
+    var myself = this,
+        inset = MorphicPreferences.scrollBarSize * 3,
+        world = this.world(),
+        hand,
+        inner,
+        pos;
+
+    if (!world) {
+        return null;
+    }
+    hand = world.hand;
+    if (!this.autoScrollTrigger) {
+        this.autoScrollTrigger = Date.now();
+    }
+    this.step = function () {
+        pos = hand.bounds.origin;
+        inner = myself.bounds.insetBy(inset);
+        if ((myself.bounds.containsPoint(pos)) &&
+                (!(inner.containsPoint(pos))) &&
+                (hand.children.length > 0)) {
+            myself.autoScroll(pos);
+        } else {
+            myself.step = function () {
+                nop();
+            };
+            myself.autoScrollTrigger = null;
+        }
+    };
+};
+
+ScrollFrameMorph.prototype.autoScroll = function (pos) {
+    var inset, area;
+
+    if (Date.now() - this.autoScrollTrigger < 500) {
+        return null;
+    }
+
+    inset = MorphicPreferences.scrollBarSize * 3;
+    area = this.topLeft().extent(new Point(this.width(), inset));
+    if (area.containsPoint(pos)) {
+        this.scrollY(inset - (pos.y - this.top()));
+    }
+    area = this.topLeft().extent(new Point(inset, this.height()));
+    if (area.containsPoint(pos)) {
+        this.scrollX(inset - (pos.x - this.left()));
+    }
+    area = (new Point(this.right() - inset, this.top()))
+        .extent(new Point(inset, this.height()));
+    if (area.containsPoint(pos)) {
+        this.scrollX(-(inset - (this.right() - pos.x)));
+    }
+    area = (new Point(this.left(), this.bottom() - inset))
+        .extent(new Point(this.width(), inset));
+    if (area.containsPoint(pos)) {
+        this.scrollY(-(inset - (this.bottom() - pos.y)));
+    }
+    this.adjustScrollBars();
+};
+
+// ScrollFrameMorph scrolling by editing text:
+
+ScrollFrameMorph.prototype.scrollCursorIntoView = function (morph) {
+    var txt = morph.target,
+        offset = txt.position().subtract(this.contents.position()),
+        ft = this.top() + this.padding,
+        fb = this.bottom() - this.padding;
+    this.contents.setExtent(txt.extent().add(offset).add(this.padding));
+    if (morph.top() < ft) {
+        this.contents.setTop(this.contents.top() + ft - morph.top());
+        morph.setTop(ft);
+    } else if (morph.bottom() > fb) {
+        this.contents.setBottom(this.contents.bottom() + fb - morph.bottom());
+        morph.setBottom(fb);
+    }
+    this.adjustScrollBars();
+};
+
+// ScrollFrameMorph events:
+
+ScrollFrameMorph.prototype.mouseScroll = function (y, x) {
+    if (y) {
+        this.scrollY(y * MorphicPreferences.mouseScrollAmount);
+    }
+    if (x) {
+        this.scrollX(x * MorphicPreferences.mouseScrollAmount);
+    }
+    this.adjustScrollBars();
+};
+
+// ScrollFrameMorph duplicating:
+
+ScrollFrameMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = ScrollFrameMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.contents && dict[this.contents]) {
+        c.contents = (dict[this.contents]);
+    }
+    if (c.hBar && dict[this.hBar]) {
+        c.hBar = (dict[this.hBar]);
+        c.hBar.action = function (num) {
+            c.contents.setPosition(
+                new Point(c.left() - num, c.contents.position().y)
+            );
+        };
+    }
+    if (c.vBar && dict[this.vBar]) {
+        c.vBar = (dict[this.vBar]);
+        c.vBar.action = function (num) {
+            c.contents.setPosition(
+                new Point(c.contents.position().x, c.top() - num)
+            );
+        };
+    }
+    return c;
+};
+
+// ScrollFrameMorph menu:
+
+ScrollFrameMorph.prototype.developersMenu = function () {
+    var menu = ScrollFrameMorph.uber.developersMenu.call(this);
+    if (this.isTextLineWrapping) {
+        menu.addItem(
+            "auto line wrap off...",
+            'toggleTextLineWrapping',
+            'turn automatic\nline wrapping\noff'
+        );
+    } else {
+        menu.addItem(
+            "auto line wrap on...",
+            'toggleTextLineWrapping',
+            'enable automatic\nline wrapping'
+        );
+    }
+    return menu;
+};
+
+
+ScrollFrameMorph.prototype.toggleTextLineWrapping = function () {
+    this.isTextLineWrapping = !this.isTextLineWrapping;
+};
+
+// ListMorph ///////////////////////////////////////////////////////////
+
+ListMorph.prototype = new ScrollFrameMorph();
+ListMorph.prototype.constructor = ListMorph;
+ListMorph.uber = ScrollFrameMorph.prototype;
+
+function ListMorph(elements, labelGetter, format) {
+/*
+    passing a format is optional. If the format parameter is specified
+    it has to be of the following pattern:
+
+        [
+            [<color>, <single-argument predicate>],
+            ...
+        ]
+
+    multiple color conditions can be passed in such a format list, the
+    last predicate to evaluate true when given the list element sets
+    the given color. If no condition is met, the default color (black)
+    will be assigned.
+    
+    An example of how to use fomats can be found in the InspectorMorph's
+    "markOwnProperties" mechanism.
+*/
+    this.init(
+        elements || [],
+        labelGetter || function (element) {
+            if (isString(element)) {
+                return element;
+            }
+            if (element.toSource) {
+                return element.toSource();
+            }
+            return element.toString();
+        },
+        format || []
+    );
+}
+
+ListMorph.prototype.init = function (elements, labelGetter, format) {
+    ListMorph.uber.init.call(this);
+
+    this.contents.acceptsDrops = false;
+    this.color = new Color(255, 255, 255);
+    this.hBar.alpha = 0.6;
+    this.vBar.alpha = 0.6;
+    this.elements = elements || [];
+    this.labelGetter = labelGetter;
+    this.format = format;
+    this.listContents = null;
+    this.selected = null;
+    this.action = null;
+    this.acceptsDrops = false;
+    this.buildListContents();
+};
+
+ListMorph.prototype.buildListContents = function () {
+    var myself = this;
+    if (this.listContents) {
+        this.listContents.destroy();
+    }
+    this.listContents = new MenuMorph(
+        this.select,
+        null,
+        this
+    );
+    if (this.elements.length === 0) {
+        this.elements = ['(empty)'];
+    }
+    this.elements.forEach(function (element) {
+        var color = null;
+
+        myself.format.forEach(function (pair) {
+            if (pair[1].call(null, element)) {
+                color = pair[0];
+            }
+        });
+        myself.listContents.addItem(
+            myself.labelGetter(element), // label string
+            element, // action
+            null, // hint
+            color
+        );
+    });
+    this.listContents.setPosition(this.contents.position());
+    this.listContents.isListContents = true;
+    this.listContents.drawNew();
+    this.addContents(this.listContents);
+};
+
+ListMorph.prototype.select = function (item) {
+    this.selected = item;
+    if (this.action) {
+        this.action.call(null, item);
+    }
+};
+
+ListMorph.prototype.setExtent = function (aPoint) {
+    var lb = this.listContents.bounds,
+        nb = this.bounds.origin.copy().corner(
+            this.bounds.origin.add(aPoint)
+        );
+
+    if (nb.right() > lb.right() && nb.width() <= lb.width()) {
+        this.listContents.setRight(nb.right());
+    }
+    if (nb.bottom() > lb.bottom() && nb.height() <= lb.height()) {
+        this.listContents.setBottom(nb.bottom());
+    }
+    ListMorph.uber.setExtent.call(this, aPoint);
+};
+
+// StringFieldMorph ////////////////////////////////////////////////////
+
+// StringFieldMorph inherit from FrameMorph:
+
+StringFieldMorph.prototype = new FrameMorph();
+StringFieldMorph.prototype.constructor = StringFieldMorph;
+StringFieldMorph.uber = FrameMorph.prototype;
+
+function StringFieldMorph(
+    defaultContents,
+    minWidth,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    isNumeric
+) {
+    this.init(
+        defaultContents || '',
+        minWidth || 100,
+        fontSize || 12,
+        fontStyle || 'sans-serif',
+        bold || false,
+        italic || false,
+        isNumeric
+    );
+}
+
+StringFieldMorph.prototype.init = function (
+    defaultContents,
+    minWidth,
+    fontSize,
+    fontStyle,
+    bold,
+    italic,
+    isNumeric
+) {
+    this.defaultContents = defaultContents;
+    this.minWidth = minWidth;
+    this.fontSize = fontSize;
+    this.fontStyle = fontStyle;
+    this.isBold = bold;
+    this.isItalic = italic;
+    this.isNumeric = isNumeric || false;
+    this.text = null;
+    StringFieldMorph.uber.init.call(this);
+    this.color = new Color(255, 255, 255);
+    this.isEditable = true;
+    this.acceptsDrops = false;
+    this.drawNew();
+};
+
+StringFieldMorph.prototype.drawNew = function () {
+    var txt;
+    txt = this.text ? this.string() : this.defaultContents;
+    this.text = null;
+    this.children.forEach(function (child) {
+        child.destroy();
+    });
+    this.children = [];
+    this.text = new StringMorph(
+        txt,
+        this.fontSize,
+        this.fontStyle,
+        this.isBold,
+        this.isItalic,
+        this.isNumeric
+    );
+
+    this.text.isNumeric = this.isNumeric; // for whichever reason...
+    this.text.setPosition(this.bounds.origin.copy());
+    this.text.isEditable = this.isEditable;
+    this.text.isDraggable = false;
+    this.text.enableSelecting();
+    this.silentSetExtent(
+        new Point(
+            Math.max(this.width(), this.minWidth),
+            this.text.height()
+        )
+    );
+    StringFieldMorph.uber.drawNew.call(this);
+    this.add(this.text);
+};
+
+StringFieldMorph.prototype.string = function () {
+    return this.text.text;
+};
+
+StringFieldMorph.prototype.mouseClickLeft = function (pos) {
+    if (this.isEditable) {
+        this.text.edit();
+    } else {
+        this.escalateEvent('mouseClickLeft', pos);
+    }
+};
+
+// StringFieldMorph duplicating:
+
+StringFieldMorph.prototype.copyRecordingReferences = function (dict) {
+    // inherited, see comment in Morph
+    var c = StringFieldMorph.uber.copyRecordingReferences.call(
+        this,
+        dict
+    );
+    if (c.text && dict[this.text]) {
+        c.text = (dict[this.text]);
+    }
+    return c;
+};
+
+// BouncerMorph ////////////////////////////////////////////////////////
+
+// I am a Demo of a stepping custom Morph
+
+var BouncerMorph;
+
+// Bouncers inherit from Morph:
+
+BouncerMorph.prototype = new Morph();
+BouncerMorph.prototype.constructor = BouncerMorph;
+BouncerMorph.uber = Morph.prototype;
+
+// BouncerMorph instance creation:
+
+function BouncerMorph() {
+    this.init();
+}
+
+// BouncerMorph initialization:
+
+BouncerMorph.prototype.init = function (type, speed) {
+    BouncerMorph.uber.init.call(this);
+    this.fps = 50;
+
+    // additional properties:
+    this.isStopped = false;
+    this.type = type || 'vertical';
+    if (this.type === 'vertical') {
+        this.direction = 'down';
+    } else {
+        this.direction = 'right';
+    }
+    this.speed = speed || 1;
+};
+
+// BouncerMorph moving:
+
+BouncerMorph.prototype.moveUp = function () {
+    this.moveBy(new Point(0, -this.speed));
+};
+
+BouncerMorph.prototype.moveDown = function () {
+    this.moveBy(new Point(0, this.speed));
+};
+
+BouncerMorph.prototype.moveRight = function () {
+    this.moveBy(new Point(this.speed, 0));
+};
+
+BouncerMorph.prototype.moveLeft = function () {
+    this.moveBy(new Point(-this.speed, 0));
+};
+
+// BouncerMorph stepping:
+
+BouncerMorph.prototype.step = function () {
+    if (!this.isStopped) {
+        if (this.type === 'vertical') {
+            if (this.direction === 'down') {
+                this.moveDown();
+            } else {
+                this.moveUp();
+            }
+            if (this.fullBounds().top() < this.parent.top() &&
+                    this.direction === 'up') {
+                this.direction = 'down';
+            }
+            if (this.fullBounds().bottom() > this.parent.bottom() &&
+                    this.direction === 'down') {
+                this.direction = 'up';
+            }
+        } else if (this.type === 'horizontal') {
+            if (this.direction === 'right') {
+                this.moveRight();
+            } else {
+                this.moveLeft();
+            }
+            if (this.fullBounds().left() < this.parent.left() &&
+                    this.direction === 'left') {
+                this.direction = 'right';
+            }
+            if (this.fullBounds().right() > this.parent.right() &&
+                    this.direction === 'right') {
+                this.direction = 'left';
+            }
+        }
+    }
+};
+
+// HandMorph ///////////////////////////////////////////////////////////
+
+// I represent the Mouse cursor
+
+// HandMorph inherits from Morph:
+
+HandMorph.prototype = new Morph();
+HandMorph.prototype.constructor = HandMorph;
+HandMorph.uber = Morph.prototype;
+
+// HandMorph instance creation:
+
+function HandMorph(aWorld) {
+    this.init(aWorld);
+}
+
+// HandMorph initialization:
+
+HandMorph.prototype.init = function (aWorld) {
+    HandMorph.uber.init.call(this);
+    this.bounds = new Rectangle();
+
+    // additional properties:
+    this.world = aWorld;
+    this.mouseButton = null;
+    this.mouseOverList = [];
+    this.mouseDownMorph = null;
+    this.morphToGrab = null;
+    this.grabOrigin = null;
+    this.temporaries = [];
+    this.touchHoldTimeout = null;
+};
+
+HandMorph.prototype.changed = function () {
+    var b;
+    if (this.world !== null) {
+        b = this.fullBounds();
+        if (!b.extent().eq(new Point())) {
+            this.world.broken.push(this.fullBounds().spread());
+        }
+    }
+
+};
+
+// HandMorph navigation:
+
+HandMorph.prototype.morphAtPointer = function () {
+    var morphs = this.world.allChildren().slice(0).reverse(),
+        myself = this,
+        result = null;
+
+    morphs.forEach(function (m) {
+        if (m.visibleBounds().containsPoint(myself.bounds.origin) &&
+                result === null &&
+                m.isVisible &&
+                (m.noticesTransparentClick ||
+                    (!m.isTransparentAt(myself.bounds.origin))) &&
+                (!(m instanceof ShadowMorph))) {
+            result = m;
+        }
+    });
+    if (result !== null) {
+        return result;
+    }
+    return this.world;
+};
+
+/*
+    alternative -  more elegant and possibly more
+    performant - solution for morphAtPointer.
+    Has some issues, commented out for now
+
+HandMorph.prototype.morphAtPointer = function () {
+    var myself = this;
+    return this.world.topMorphSuchThat(function (m) {
+        return m.visibleBounds().containsPoint(myself.bounds.origin) &&
+            m.isVisible &&
+            (m.noticesTransparentClick ||
+                (! m.isTransparentAt(myself.bounds.origin))) &&
+            (! (m instanceof ShadowMorph));
+    });
+};
+*/
+
+HandMorph.prototype.allMorphsAtPointer = function () {
+    var morphs = this.world.allChildren(),
+        myself = this;
+    return morphs.filter(function (m) {
+        return m.isVisible &&
+            m.visibleBounds().containsPoint(myself.bounds.origin);
+    });
+};
+
+// HandMorph dragging and dropping:
+/*
+    drag 'n' drop events, method(arg) -> receiver:
+
+        prepareToBeGrabbed(handMorph) -> grabTarget
+        reactToGrabOf(grabbedMorph) -> oldParent
+        wantsDropOf(morphToDrop) ->  newParent
+        justDropped(handMorph) -> droppedMorph
+        reactToDropOf(droppedMorph, handMorph) -> newParent
+*/
+
+HandMorph.prototype.dropTargetFor = function (aMorph) {
+    var target = this.morphAtPointer();
+    while (!target.wantsDropOf(aMorph)) {
+        target = target.parent;
+    }
+    return target;
+};
+
+HandMorph.prototype.grab = function (aMorph) {
+    var oldParent = aMorph.parent;
+    if (aMorph instanceof WorldMorph) {
+        return null;
+    }
+    if (this.children.length === 0) {
+        this.world.stopEditing();
+        this.grabOrigin = aMorph.situation();
+        aMorph.addShadow();
+        if (aMorph.prepareToBeGrabbed) {
+            aMorph.prepareToBeGrabbed(this);
+        }
+        this.add(aMorph);
+        this.changed();
+        if (oldParent && oldParent.reactToGrabOf) {
+            oldParent.reactToGrabOf(aMorph);
+        }
+    }
+};
+
+HandMorph.prototype.drop = function () {
+    var target, morphToDrop;
+    if (this.children.length !== 0) {
+        morphToDrop = this.children[0];
+        target = this.dropTargetFor(morphToDrop);
+        this.changed();
+        target.add(morphToDrop);
+        morphToDrop.changed();
+        morphToDrop.removeShadow();
+        this.children = [];
+        this.setExtent(new Point());
+        if (morphToDrop.justDropped) {
+            morphToDrop.justDropped(this);
+        }
+        if (target.reactToDropOf) {
+            target.reactToDropOf(morphToDrop, this);
+        }
+        this.dragOrigin = null;
+    }
+};
+
+// HandMorph event dispatching:
+/*
+    mouse events:
+
+        mouseDownLeft
+        mouseDownRight
+        mouseClickLeft
+        mouseClickRight
+        mouseEnter
+        mouseLeave
+        mouseEnterDragging
+        mouseLeaveDragging
+        mouseMove
+        mouseScroll
+*/
+
+HandMorph.prototype.processMouseDown = function (event) {
+    var morph, expectedClick, actualClick;
+
+    this.destroyTemporaries();
+    this.morphToGrab = null;
+    if (this.children.length !== 0) {
+        this.drop();
+        this.mouseButton = null;
+    } else {
+        morph = this.morphAtPointer();
+        if (this.world.activeMenu) {
+            if (!contains(
+                    morph.allParents(),
+                    this.world.activeMenu
+                )) {
+                this.world.activeMenu.destroy();
+            } else {
+                clearInterval(this.touchHoldTimeout);
+            }
+        }
+        if (this.world.activeHandle) {
+            if (morph !== this.world.activeHandle) {
+                this.world.activeHandle.destroy();
+            }
+        }
+        if (this.world.cursor) {
+            if (morph !== this.world.cursor.target) {
+                this.world.stopEditing();
+            }
+        }
+        if (!morph.mouseMove) {
+            this.morphToGrab = morph.rootForGrab();
+        }
+        if (event.button === 2 || event.ctrlKey) {
+            this.mouseButton = 'right';
+            actualClick = 'mouseDownRight';
+            expectedClick = 'mouseClickRight';
+        } else {
+            this.mouseButton = 'left';
+            actualClick = 'mouseDownLeft';
+            expectedClick = 'mouseClickLeft';
+        }
+        this.mouseDownMorph = morph;
+        while (!this.mouseDownMorph[expectedClick]) {
+            this.mouseDownMorph = this.mouseDownMorph.parent;
+        }
+        while (!morph[actualClick]) {
+            morph = morph.parent;
+        }
+        morph[actualClick](this.bounds.origin);
+    }
+};
+
+HandMorph.prototype.processTouchStart = function (event) {
+    var myself = this;
+    clearInterval(this.touchHoldTimeout);
+    if (event.touches.length === 1) {
+        this.touchHoldTimeout = setInterval( // simulate mouseRightClick
+            function () {
+                myself.processMouseDown({button: 2});
+                myself.processMouseUp({button: 2});
+                event.preventDefault();
+                clearInterval(myself.touchHoldTimeout);
+            },
+            400
+        );
+        this.processMouseMove(event.touches[0]); // update my position
+        this.processMouseDown({button: 0});
+        event.preventDefault();
+    }
+};
+
+HandMorph.prototype.processTouchMove = function (event) {
+    if (event.touches.length === 1) {
+        var touch = event.touches[0];
+        this.processMouseMove(touch);
+        clearInterval(this.touchHoldTimeout);
+    }
+};
+
+HandMorph.prototype.processTouchEnd = function (event) {
+    clearInterval(this.touchHoldTimeout);
+    nop(event);
+    this.processMouseUp({button: 0});
+};
+
+HandMorph.prototype.processMouseUp = function () {
+    var morph = this.morphAtPointer(),
+        context,
+        contextMenu,
+        expectedClick;
+
+    this.destroyTemporaries();
+    if (this.children.length !== 0) {
+        this.drop();
+    } else {
+        if (this.mouseButton === 'left') {
+            expectedClick = 'mouseClickLeft';
+        } else {
+            expectedClick = 'mouseClickRight';
+            if (this.mouseButton) {
+                context = morph;
+                contextMenu = context.contextMenu();
+                while ((!contextMenu) &&
+                        context.parent) {
+                    context = context.parent;
+                    contextMenu = context.contextMenu();
+                }
+                if (contextMenu) {
+                    contextMenu.popUpAtHand(this.world);
+                }
+            }
+        }
+        while (!morph[expectedClick]) {
+            morph = morph.parent;
+        }
+        morph[expectedClick](this.bounds.origin);
+    }
+    this.mouseButton = null;
+};
+
+HandMorph.prototype.processMouseMove = function (event) {
+    var pos,
+        posInDocument = getDocumentPositionOf(this.world.worldCanvas),
+        mouseOverNew,
+        myself = this,
+        morph,
+        topMorph,
+        fb;
+
+    pos = new Point(
+        event.pageX - posInDocument.x,
+        event.pageY - posInDocument.y
+    );
+
+    this.setPosition(pos);
+
+    // determine the new mouse-over-list:
+    // mouseOverNew = this.allMorphsAtPointer();
+    mouseOverNew = this.morphAtPointer().allParents();
+
+    if ((this.children.length === 0) &&
+            (this.mouseButton === 'left')) {
+        topMorph = this.morphAtPointer();
+        morph = topMorph.rootForGrab();
+        if (topMorph.mouseMove) {
+            topMorph.mouseMove(pos);
+        }
+
+        // if a morph is marked for grabbing, just grab it
+        if (this.morphToGrab) {
+            if (this.morphToGrab.isDraggable) {
+                morph = this.morphToGrab;
+                this.grab(morph);
+            } else if (this.morphToGrab.isTemplate) {
+                morph = this.morphToGrab.fullCopy();
+                morph.isTemplate = false;
+                morph.isDraggable = true;
+                this.grab(morph);
+                this.grabOrigin = this.morphToGrab.situation();
+            }
+            // if the mouse has left its fullBounds, center it
+            fb = morph.fullBounds();
+            if (!fb.containsPoint(pos)) {
+                this.bounds.origin = fb.center();
+                this.grab(morph);
+                this.setPosition(pos);
+            }
+
+        }
+
+/*
+    original, more cautious code for grabbing Morphs,
+    retained in case of needing    to fall back:
+
+        if (morph === this.morphToGrab) {
+            if (morph.isDraggable) {
+                this.grab(morph);
+            } else if (morph.isTemplate) {
+                morph = morph.fullCopy();
+                morph.isTemplate = false;
+                morph.isDraggable = true;
+                this.grab(morph);
+            }
+        }
+*/
+
+    }
+
+    this.mouseOverList.forEach(function (old) {
+        if (!contains(mouseOverNew, old)) {
+            if (old.mouseLeave) {
+                old.mouseLeave();
+            }
+            if (old.mouseLeaveDragging && this.mouseButton) {
+                old.mouseLeaveDragging();
+            }
+        }
+    });
+    mouseOverNew.forEach(function (newMorph) {
+        if (!contains(myself.mouseOverList, newMorph)) {
+            if (newMorph.mouseEnter) {
+                newMorph.mouseEnter();
+            }
+            if (newMorph.mouseEnterDragging && this.mouseButton) {
+                newMorph.mouseEnterDragging();
+            }
+        }
+
+        // autoScrolling support:
+        if (myself.children.length > 0) {
+            if (newMorph instanceof ScrollFrameMorph) {
+                if (!newMorph.bounds.insetBy(
+                        MorphicPreferences.scrollBarSize * 3
+                    ).containsPoint(myself.bounds.origin)) {
+                    newMorph.startAutoScrolling();
+                }
+            }
+        }
+    });
+    this.mouseOverList = mouseOverNew;
+};
+
+HandMorph.prototype.processMouseScroll = function (event) {
+    var morph = this.morphAtPointer();
+    while (morph && !morph.mouseScroll) {
+        morph = morph.parent;
+    }
+    if (morph) {
+        morph.mouseScroll(
+            (event.detail / -3) || (
+                event.hasOwnProperty('wheelDeltaY') ?
+                        event.wheelDeltaY / 120 :
+                        event.wheelDelta / 120
+            ),
+            event.wheelDeltaX / 120 || 0
+        );
+    }
+};
+
+/*
+    drop event:
+
+        droppedImage
+        droppedSVG
+        droppedAudio
+        droppedText
+*/
+
+HandMorph.prototype.processDrop = function (event) {
+/*
+    find out whether an external image or audio file was dropped
+    onto the world canvas, turn it into an offscreen canvas or audio
+    element and dispatch the
+    
+        droppedImage(canvas, name)
+        droppedSVG(image, name)
+        droppedAudio(audio, name)
+    
+    events to interested Morphs at the mouse pointer
+*/
+    var files = event instanceof FileList ? event
+                : event.target.files || event.dataTransfer.files,
+        file,
+        txt = event.dataTransfer ?
+                event.dataTransfer.getData('Text/HTML') : null,
+        src,
+        target = this.morphAtPointer(),
+        img = new Image(),
+        canvas,
+        i;
+
+    function readSVG(aFile) {
+        var pic = new Image(),
+            frd = new FileReader();
+        while (!target.droppedSVG) {
+            target = target.parent;
+        }
+        pic.onload = function () {
+            target.droppedSVG(pic, aFile.name);
+        };
+        frd = new FileReader();
+        frd.onloadend = function (e) {
+            pic.src = e.target.result;
+        };
+        frd.readAsDataURL(aFile);
+    }
+
+    function readImage(aFile) {
+        var pic = new Image(),
+            frd = new FileReader();
+        while (!target.droppedImage) {
+            target = target.parent;
+        }
+        pic.onload = function () {
+            canvas = newCanvas(new Point(pic.width, pic.height));
+            canvas.getContext('2d').drawImage(pic, 0, 0);
+            target.droppedImage(canvas, aFile.name);
+        };
+        frd = new FileReader();
+        frd.onloadend = function (e) {
+            pic.src = e.target.result;
+        };
+        frd.readAsDataURL(aFile);
+    }
+
+    function readAudio(aFile) {
+        var snd = new Audio(),
+            frd = new FileReader();
+        while (!target.droppedAudio) {
+            target = target.parent;
+        }
+        frd.onloadend = function (e) {
+            snd.src = e.target.result;
+            target.droppedAudio(snd, aFile.name);
+        };
+        frd.readAsDataURL(aFile);
+    }
+
+    function readText(aFile) {
+        var frd = new FileReader();
+        while (!target.droppedText) {
+            target = target.parent;
+        }
+        frd.onloadend = function (e) {
+            target.droppedText(e.target.result, aFile.name);
+        };
+        frd.readAsText(aFile);
+    }
+
+    function readBinary(aFile) {
+        var frd = new FileReader();
+        while (!target.droppedBinary) {
+            target = target.parent;
+        }
+        frd.onloadend = function (e) {
+            target.droppedBinary(e.target.result, aFile.name);
+        };
+        frd.readAsArrayBuffer(aFile);
+    }
+
+    function parseImgURL(html) {
+        var url = '',
+            i,
+            c,
+            start = html.indexOf('<img src="');
+        if (start === -1) {return null; }
+        start += 10;
+        for (i = start; i < html.length; i += 1) {
+            c = html[i];
+            if (c === '"') {
+                return url;
+            }
+            url = url.concat(c);
+        }
+        return null;
+    }
+
+    if (files.length > 0) {
+        for (i = 0; i < files.length; i += 1) {
+            file = files[i];
+            if (file.type.indexOf("svg") !== -1
+                    && !MorphicPreferences.rasterizeSVGs) {
+                readSVG(file);
+            } else if (file.type.indexOf("image") === 0) {
+                readImage(file);
+            } else if (file.type.indexOf("audio") === 0) {
+                readAudio(file);
+            } else if (file.type.indexOf("text") === 0) {
+                readText(file);
+            } else { // assume it's meant to be binary
+                readBinary(file);
+            }
+        }
+    } else if (txt) {
+        while (!target.droppedImage) {
+            target = target.parent;
+        }
+        img = new Image();
+        img.onload = function () {
+            canvas = newCanvas(new Point(img.width, img.height));
+            canvas.getContext('2d').drawImage(img, 0, 0);
+            target.droppedImage(canvas);
+        };
+        src = parseImgURL(txt);
+        if (src) {img.src = src; }
+    }
+};
+
+// HandMorph tools
+
+HandMorph.prototype.destroyTemporaries = function () {
+/*
+    temporaries are just an array of morphs which will be deleted upon
+    the next mouse click, or whenever another temporary Morph decides
+    that it needs to remove them. The primary purpose of temporaries is
+    to display tools tips of speech bubble help.
+*/
+    var myself = this;
+    this.temporaries.forEach(function (morph) {
+        if (!(morph.isClickable
+                && morph.bounds.containsPoint(myself.position()))) {
+            morph.destroy();
+            myself.temporaries.splice(myself.temporaries.indexOf(morph), 1);
+        }
+    });
+};
+
+// HandMorph dragging optimization
+
+HandMorph.prototype.moveBy = function (delta) {
+    Morph.prototype.trackChanges = false;
+    HandMorph.uber.moveBy.call(this, delta);
+    Morph.prototype.trackChanges = true;
+    this.fullChanged();
+};
+
+
+// WorldMorph //////////////////////////////////////////////////////////
+
+// I represent the <canvas> element
+
+// WorldMorph inherits from FrameMorph:
+
+WorldMorph.prototype = new FrameMorph();
+WorldMorph.prototype.constructor = WorldMorph;
+WorldMorph.uber = FrameMorph.prototype;
+
+// WorldMorph instance creation:
+
+function WorldMorph(aCanvas, fillPage) {
+    this.init(aCanvas, fillPage);
+}
+
+// WorldMorph initialization:
+
+WorldMorph.prototype.init = function (aCanvas, fillPage) {
+    WorldMorph.uber.init.call(this);
+    this.color = new Color(205, 205, 205); // (130, 130, 130)
+    this.alpha = 1;
+    this.bounds = new Rectangle(0, 0, aCanvas.width, aCanvas.height);
+    this.drawNew();
+    this.isVisible = true;
+    this.isDraggable = false;
+    this.currentKey = null; // currently pressed key code
+    this.worldCanvas = aCanvas;
+
+    // additional properties:
+    this.useFillPage = fillPage;
+    if (this.useFillPage === undefined) {
+        this.useFillPage = true;
+    }
+    this.isDevMode = false;
+    this.broken = [];
+    this.hand = new HandMorph(this);
+    this.keyboardReceiver = null;
+    this.lastEditedText = null;
+    this.cursor = null;
+    this.activeMenu = null;
+    this.activeHandle = null;
+    this.virtualKeyboard = null;
+
+    this.initEventListeners();
+};
+
+// World Morph display:
+
+WorldMorph.prototype.brokenFor = function (aMorph) {
+    // private
+    var fb = aMorph.fullBounds();
+    return this.broken.filter(function (rect) {
+        return rect.intersects(fb);
+    });
+};
+
+WorldMorph.prototype.fullDrawOn = function (aCanvas, aRect) {
+    WorldMorph.uber.fullDrawOn.call(this, aCanvas, aRect);
+    this.hand.fullDrawOn(aCanvas, aRect);
+};
+
+WorldMorph.prototype.updateBroken = function () {
+    var myself = this;
+    this.broken.forEach(function (rect) {
+        if (rect.extent().gt(new Point(0, 0))) {
+            myself.fullDrawOn(myself.worldCanvas, rect);
+        }
+    });
+    this.broken = [];
+};
+
+WorldMorph.prototype.doOneCycle = function () {
+    this.stepFrame();
+    this.updateBroken();
+};
+
+WorldMorph.prototype.fillPage = function () {
+    var pos = getDocumentPositionOf(this.worldCanvas),
+        clientHeight = window.innerHeight,
+        clientWidth = window.innerWidth,
+        myself = this;
+
+
+    if (pos.x > 0) {
+        this.worldCanvas.style.position = "absolute";
+        this.worldCanvas.style.left = "0px";
+        pos.x = 0;
+    }
+    if (pos.y > 0) {
+        this.worldCanvas.style.position = "absolute";
+        this.worldCanvas.style.top = "0px";
+        pos.y = 0;
+    }
+    if (document.body.scrollTop) { // scrolled down b/c of viewport scaling
+        clientHeight = document.documentElement.clientHeight;
+    }
+    if (document.body.scrollLeft) { // scrolled left b/c of viewport scaling
+        clientWidth = document.documentElement.clientWidth;
+    }
+
+    if (this.worldCanvas.width !== clientWidth) {
+        this.worldCanvas.width = clientWidth;
+        this.setWidth(clientWidth);
+    }
+    if (this.worldCanvas.height !== clientHeight) {
+        this.worldCanvas.height = clientHeight;
+        this.setHeight(clientHeight);
+    }
+    this.children.forEach(function (child) {
+        if (child.reactToWorldResize) {
+            child.reactToWorldResize(myself.bounds.copy());
+        }
+    });
+};
+
+// WorldMorph global pixel access:
+
+WorldMorph.prototype.getGlobalPixelColor = function (point) {
+/*
+    answer the color at the given point.
+
+    Note: for some strange reason this method works fine if the page is
+    opened via HTTP, but *not*, if it is opened from a local uri
+    (e.g. from a directory), in which case it's always null.
+
+    This behavior is consistent throughout several browsers. I have no
+    clue what's behind this, apparently the imageData attribute of
+    canvas context only gets filled with meaningful data if transferred
+    via HTTP ???
+
+    This is somewhat of a showstopper for color detection in a planned
+    offline version of Snap.
+
+    The issue has also been discussed at: (join lines before pasting)
+    http://stackoverflow.com/questions/4069400/
+    canvas-getimagedata-doesnt-work-when-running-locally-on-windows-
+    security-excep
+
+    The suggestion solution appears to work, since the settings are
+    applied globally.
+*/
+    var dta = this.worldCanvas.getContext('2d').getImageData(
+        point.x,
+        point.y,
+        1,
+        1
+    ).data;
+    return new Color(dta[0], dta[1], dta[2]);
+};
+
+// WorldMorph events:
+
+WorldMorph.prototype.initVirtualKeyboard = function () {
+    var myself = this;
+
+    if (this.virtualKeyboard) {
+        document.body.removeChild(this.virtualKeyboard);
+        this.virtualKeyboard = null;
+    }
+    if (!MorphicPreferences.useVirtualKeyboard) {
+        return;
+    }
+    this.virtualKeyboard = document.createElement("input");
+    this.virtualKeyboard.type = "text";
+    this.virtualKeyboard.style.color = "transparent";
+    this.virtualKeyboard.style.backgroundColor = "transparent";
+    this.virtualKeyboard.style.border = "none";
+    this.virtualKeyboard.style.outline = "none";
+    this.virtualKeyboard.style.position = "absolute";
+    this.virtualKeyboard.style.top = "0px";
+    this.virtualKeyboard.style.left = "0px";
+    this.virtualKeyboard.style.width = "0px";
+    this.virtualKeyboard.style.height = "0px";
+    document.body.appendChild(this.virtualKeyboard);
+
+    this.virtualKeyboard.addEventListener(
+        "keydown",
+        function (event) {
+            // remember the keyCode in the world's currentKey property
+            myself.currentKey = event.keyCode;
+            if (myself.keyboardReceiver) {
+                myself.keyboardReceiver.processKeyDown(event);
+            }
+            // supress backspace override
+            if (event.keyIdentifier === 'U+0008' ||
+                    event.keyIdentifier === 'Backspace') {
+                event.preventDefault();
+            }
+            // supress tab override and make sure tab gets
+            // received by all browsers
+            if (event.keyIdentifier === 'U+0009' ||
+                    event.keyIdentifier === 'Tab') {
+                if (myself.keyboardReceiver) {
+                    myself.keyboardReceiver.processKeyPress(event);
+                }
+                event.preventDefault();
+            }
+        },
+        false
+    );
+
+    this.virtualKeyboard.addEventListener(
+        "keyup",
+        function (event) {
+            // flush the world's currentKey property
+            myself.currentKey = null;
+            // dispatch to keyboard receiver
+            if (myself.keyboardReceiver) {
+                if (myself.keyboardReceiver.processKeyUp) {
+                    myself.keyboardReceiver.processKeyUp(event);
+                }
+            }
+            event.preventDefault();
+        },
+        false
+    );
+
+    this.virtualKeyboard.addEventListener(
+        "keypress",
+        function (event) {
+            if (myself.keyboardReceiver) {
+                myself.keyboardReceiver.processKeyPress(event);
+            }
+            event.preventDefault();
+        },
+        false
+    );
+};
+
+WorldMorph.prototype.initEventListeners = function () {
+    var canvas = this.worldCanvas, myself = this;
+
+    if (myself.useFillPage) {
+        myself.fillPage();
+    } else {
+        this.changed();
+    }
+
+    canvas.addEventListener(
+        "mousedown",
+        function (event) {
+            myself.hand.processMouseDown(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "touchstart",
+        function (event) {
+            myself.hand.processTouchStart(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "mouseup",
+        function (event) {
+            event.preventDefault();
+            myself.hand.processMouseUp(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "touchend",
+        function (event) {
+            myself.hand.processTouchEnd(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "mousemove",
+        function (event) {
+            myself.hand.processMouseMove(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "touchmove",
+        function (event) {
+            myself.hand.processTouchMove(event);
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "contextmenu",
+        function (event) {
+            // suppress context menu for Mac-Firefox
+            event.preventDefault();
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "keydown",
+        function (event) {
+            // remember the keyCode in the world's currentKey property
+            myself.currentKey = event.keyCode;
+            if (myself.keyboardReceiver) {
+                myself.keyboardReceiver.processKeyDown(event);
+            }
+            // supress backspace override
+            if (event.keyIdentifier === 'U+0008' ||
+                    event.keyIdentifier === 'Backspace') {
+                event.preventDefault();
+            }
+            // supress tab override and make sure tab gets
+            // received by all browsers
+            if (event.keyIdentifier === 'U+0009' ||
+                    event.keyIdentifier === 'Tab') {
+                if (myself.keyboardReceiver) {
+                    myself.keyboardReceiver.processKeyPress(event);
+                }
+                event.preventDefault();
+            }
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "keyup",
+        function (event) {
+            // flush the world's currentKey property
+            myself.currentKey = null;
+            // dispatch to keyboard receiver
+            if (myself.keyboardReceiver) {
+                if (myself.keyboardReceiver.processKeyUp) {
+                    myself.keyboardReceiver.processKeyUp(event);
+                }
+            }
+            event.preventDefault();
+        },
+        false
+    );
+
+    canvas.addEventListener(
+        "keypress",
+        function (event) {
+            if (myself.keyboardReceiver) {
+                myself.keyboardReceiver.processKeyPress(event);
+            }
+            event.preventDefault();
+        },
+        false
+    );
+
+    canvas.addEventListener( // Safari, Chrome
+        "mousewheel",
+        function (event) {
+            myself.hand.processMouseScroll(event);
+            event.preventDefault();
+        },
+        false
+    );
+    canvas.addEventListener( // Firefox
+        "DOMMouseScroll",
+        function (event) {
+            myself.hand.processMouseScroll(event);
+            event.preventDefault();
+        },
+        false
+    );
+
+    document.body.addEventListener(
+        "paste",
+        function (event) {
+            var txt = event.clipboardData.getData("Text");
+            if (txt && myself.cursor) {
+                myself.cursor.insert(txt);
+            }
+        },
+        false
+    );
+
+    window.addEventListener(
+        "dragover",
+        function (event) {
+            event.preventDefault();
+        },
+        false
+    );
+    window.addEventListener(
+        "drop",
+        function (event) {
+            myself.hand.processDrop(event);
+            event.preventDefault();
+        },
+        false
+    );
+
+    window.addEventListener(
+        "resize",
+        function () {
+            if (myself.useFillPage) {
+                myself.fillPage();
+            }
+        },
+        false
+    );
+
+    window.onbeforeunload = function (evt) {
+        var e = evt || window.event,
+            msg = "Are you sure you want to leave?";
+        // For IE and Firefox
+        if (e) {
+            e.returnValue = msg;
+        }
+        // For Safari / chrome
+        return msg;
+    };
+};
+
+WorldMorph.prototype.mouseDownLeft = function () {
+    nop();
+};
+
+WorldMorph.prototype.mouseClickLeft = function () {
+    nop();
+};
+
+WorldMorph.prototype.mouseDownRight = function () {
+    nop();
+};
+
+WorldMorph.prototype.mouseClickRight = function () {
+    nop();
+};
+
+WorldMorph.prototype.wantsDropOf = function () {
+    // allow handle drops if any drops are allowed
+    return this.acceptsDrops;
+};
+
+WorldMorph.prototype.droppedImage = function () {
+    return null;
+};
+
+WorldMorph.prototype.droppedSVG = function () {
+    return null;
+};
+
+// WorldMorph text field tabbing:
+
+WorldMorph.prototype.nextTab = function (editField) {
+    var next = this.nextEntryField(editField);
+    if (next) {
+        editField.clearSelection();
+        next.selectAll();
+        next.edit();
+    }
+};
+
+WorldMorph.prototype.previousTab = function (editField) {
+    var prev = this.previousEntryField(editField);
+    if (prev) {
+        editField.clearSelection();
+        prev.selectAll();
+        prev.edit();
+    }
+};
+
+// WorldMorph menu:
+
+WorldMorph.prototype.contextMenu = function () {
+    var menu;
+
+    if (this.isDevMode) {
+        menu = new MenuMorph(this, this.constructor.name ||
+            this.constructor.toString().split(' ')[1].split('(')[0]);
+    } else {
+        menu = new MenuMorph(this, 'Morphic');
+    }
+    if (this.isDevMode) {
+        menu.addItem("demo...", 'userCreateMorph', 'sample morphs');
+        menu.addLine();
+        menu.addItem("hide all...", 'hideAll');
+        menu.addItem("show all...", 'showAllHiddens');
+        menu.addItem(
+            "move all inside...",
+            'keepAllSubmorphsWithin',
+            'keep all submorphs\nwithin and visible'
+        );
+        menu.addItem(
+            "inspect...",
+            'inspect',
+            'open a window on\nall properties'
+        );
+        menu.addLine();
+        menu.addItem(
+            "restore display",
+            'changed',
+            'redraw the\nscreen once'
+        );
+        menu.addItem(
+            "fill page...",
+            'fillPage',
+            'let the World automatically\nadjust to browser resizings'
+        );
+        if (useBlurredShadows) {
+            menu.addItem(
+                "sharp shadows...",
+                'toggleBlurredShadows',
+                'sharp drop shadows\nuse for old browsers'
+            );
+        } else {
+            menu.addItem(
+                "blurred shadows...",
+                'toggleBlurredShadows',
+                'blurry shades,\n use for new browsers'
+            );
+        }
+        menu.addItem(
+            "color...",
+            function () {
+                this.pickColor(
+                    menu.title + '\ncolor:',
+                    this.setColor,
+                    this,
+                    this.color
+                );
+            },
+            'choose the World\'s\nbackground color'
+        );
+        if (MorphicPreferences === standardSettings) {
+            menu.addItem(
+                "touch screen settings",
+                'togglePreferences',
+                'bigger menu fonts\nand sliders'
+            );
+        } else {
+            menu.addItem(
+                "standard settings",
+                'togglePreferences',
+                'smaller menu fonts\nand sliders'
+            );
+        }
+        menu.addLine();
+    }
+    if (this.isDevMode) {
+        menu.addItem(
+            "user mode...",
+            'toggleDevMode',
+            'disable developers\'\ncontext menus'
+        );
+    } else {
+        menu.addItem("development mode...", 'toggleDevMode');
+    }
+    menu.addItem("about morphic.js...", 'about');
+    return menu;
+};
+
+WorldMorph.prototype.userCreateMorph = function () {
+    var myself = this, menu, newMorph;
+
+    function create(aMorph) {
+        aMorph.isDraggable = true;
+        aMorph.pickUp(myself);
+    }
+
+    menu = new MenuMorph(this, 'make a morph');
+    menu.addItem('rectangle', function () {
+        create(new Morph());
+    });
+    menu.addItem('box', function () {
+        create(new BoxMorph());
+    });
+    menu.addItem('circle box', function () {
+        create(new CircleBoxMorph());
+    });
+    menu.addLine();
+    menu.addItem('slider', function () {
+        create(new SliderMorph());
+    });
+    menu.addItem('frame', function () {
+        newMorph = new FrameMorph();
+        newMorph.setExtent(new Point(350, 250));
+        create(newMorph);
+    });
+    menu.addItem('scroll frame', function () {
+        newMorph = new ScrollFrameMorph();
+        newMorph.contents.acceptsDrops = true;
+        newMorph.contents.adjustBounds();
+        newMorph.setExtent(new Point(350, 250));
+        create(newMorph);
+    });
+    menu.addItem('handle', function () {
+        create(new HandleMorph());
+    });
+    menu.addLine();
+    menu.addItem('string', function () {
+        newMorph = new StringMorph('Hello, World!');
+        newMorph.isEditable = true;
+        create(newMorph);
+    });
+    menu.addItem('text', function () {
+        newMorph = new TextMorph(
+            "Ich wei\u00DF nicht, was soll es bedeuten, dass ich so " +
+                "traurig bin, ein M\u00E4rchen aus uralten Zeiten, das " +
+                "kommt mir nicht aus dem Sinn. Die Luft ist k\u00FChl " +
+                "und es dunkelt, und ruhig flie\u00DFt der Rhein; der " +
+                "Gipfel des Berges funkelt im Abendsonnenschein. " +
+                "Die sch\u00F6nste Jungfrau sitzet dort oben wunderbar, " +
+                "ihr gold'nes Geschmeide blitzet, sie k\u00E4mmt ihr " +
+                "goldenes Haar, sie k\u00E4mmt es mit goldenem Kamme, " +
+                "und singt ein Lied dabei; das hat eine wundersame, " +
+                "gewalt'ge Melodei. Den Schiffer im kleinen " +
+                "Schiffe, ergreift es mit wildem Weh; er schaut " +
+                "nicht die Felsenriffe, er schaut nur hinauf in " +
+                "die H\u00F6h'. Ich glaube, die Wellen verschlingen " +
+                "am Ende Schiffer und Kahn, und das hat mit ihrem " +
+                "Singen, die Loreley getan."
+        );
+        newMorph.isEditable = true;
+        newMorph.maxWidth = 300;
+        newMorph.drawNew();
+        create(newMorph);
+    });
+    menu.addItem('speech bubble', function () {
+        newMorph = new SpeechBubbleMorph('Hello, World!');
+        create(newMorph);
+    });
+    menu.addLine();
+    menu.addItem('gray scale palette', function () {
+        create(new GrayPaletteMorph());
+    });
+    menu.addItem('color palette', function () {
+        create(new ColorPaletteMorph());
+    });
+    menu.addItem('color picker', function () {
+        create(new ColorPickerMorph());
+    });
+    menu.addLine();
+    menu.addItem('sensor demo', function () {
+        newMorph = new MouseSensorMorph();
+        newMorph.setColor(new Color(230, 200, 100));
+        newMorph.edge = 35;
+        newMorph.border = 15;
+        newMorph.borderColor = new Color(200, 100, 50);
+        newMorph.alpha = 0.2;
+        newMorph.setExtent(new Point(100, 100));
+        create(newMorph);
+    });
+    menu.addItem('animation demo', function () {
+        var foo, bar, baz, garply, fred;
+
+        foo = new BouncerMorph();
+        foo.setPosition(new Point(50, 20));
+        foo.setExtent(new Point(300, 200));
+        foo.alpha = 0.9;
+        foo.speed = 3;
+
+        bar = new BouncerMorph();
+        bar.setColor(new Color(50, 50, 50));
+        bar.setPosition(new Point(80, 80));
+        bar.setExtent(new Point(80, 250));
+        bar.type = 'horizontal';
+        bar.direction = 'right';
+        bar.alpha = 0.9;
+        bar.speed = 5;
+
+        baz = new BouncerMorph();
+        baz.setColor(new Color(20, 20, 20));
+        baz.setPosition(new Point(90, 140));
+        baz.setExtent(new Point(40, 30));
+        baz.type = 'horizontal';
+        baz.direction = 'right';
+        baz.speed = 3;
+
+        garply = new BouncerMorph();
+        garply.setColor(new Color(200, 20, 20));
+        garply.setPosition(new Point(90, 140));
+        garply.setExtent(new Point(20, 20));
+        garply.type = 'vertical';
+        garply.direction = 'up';
+        garply.speed = 8;
+
+        fred = new BouncerMorph();
+        fred.setColor(new Color(20, 200, 20));
+        fred.setPosition(new Point(120, 140));
+        fred.setExtent(new Point(20, 20));
+        fred.type = 'vertical';
+        fred.direction = 'down';
+        fred.speed = 4;
+
+        bar.add(garply);
+        bar.add(baz);
+        foo.add(fred);
+        foo.add(bar);
+
+        create(foo);
+    });
+    menu.addItem('pen', function () {
+        create(new PenMorph());
+    });
+    if (myself.customMorphs) {
+        menu.addLine();
+        myself.customMorphs().forEach(function (morph) {
+            menu.addItem(morph.toString(), function () {
+                create(morph);
+            });
+        });
+    }
+    menu.popUpAtHand(this);
+};
+
+WorldMorph.prototype.toggleDevMode = function () {
+    this.isDevMode = !this.isDevMode;
+};
+
+WorldMorph.prototype.hideAll = function () {
+    this.children.forEach(function (child) {
+        child.hide();
+    });
+};
+
+WorldMorph.prototype.showAllHiddens = function () {
+    this.forAllChildren(function (child) {
+        if (!child.isVisible) {
+            child.show();
+        }
+    });
+};
+
+WorldMorph.prototype.about = function () {
+    var versions = '', module;
+
+    for (module in modules) {
+        if (modules.hasOwnProperty(module)) {
+            versions += ('\n' + module + ' (' + modules[module] + ')');
+        }
+    }
+    if (versions !== '') {
+        versions = '\n\nmodules:\n\n' +
+            'morphic (' + morphicVersion + ')' +
+            versions;
+    }
+
+    this.inform(
+        'morphic.js\n\n' +
+            'a lively Web GUI\ninspired by Squeak\n' +
+            morphicVersion +
+            '\n\nwritten by Jens M\u00F6nig\njens@moenig.org' +
+            versions
+    );
+};
+
+WorldMorph.prototype.edit = function (aStringOrTextMorph) {
+    var pos = getDocumentPositionOf(this.worldCanvas);
+
+    if (!aStringOrTextMorph.isEditable) {
+        return null;
+    }
+    if (this.cursor) {
+        this.cursor.destroy();
+    }
+    if (this.lastEditedText) {
+        this.lastEditedText.clearSelection();
+    }
+    this.cursor = new CursorMorph(aStringOrTextMorph);
+    aStringOrTextMorph.parent.add(this.cursor);
+    this.keyboardReceiver = this.cursor;
+
+    this.initVirtualKeyboard();
+    if (MorphicPreferences.useVirtualKeyboard) {
+        this.virtualKeyboard.style.top = this.cursor.top() + pos.y + "px";
+        this.virtualKeyboard.style.left = this.cursor.left() + pos.x + "px";
+        this.virtualKeyboard.focus();
+    }
+
+    if (MorphicPreferences.useSliderForInput) {
+        if (!aStringOrTextMorph.parentThatIsA(MenuMorph)) {
+            this.slide(aStringOrTextMorph);
+        }
+    }
+};
+
+WorldMorph.prototype.slide = function (aStringOrTextMorph) {
+    // display a slider for numeric text entries
+    var val = parseFloat(aStringOrTextMorph.text),
+        menu,
+        slider;
+
+    if (isNaN(val)) {
+        val = 0;
+    }
+    menu = new MenuMorph();
+    slider = new SliderMorph(
+        val - 25,
+        val + 25,
+        val,
+        10,
+        'horizontal'
+    );
+    slider.alpha = 1;
+    slider.color = new Color(225, 225, 225);
+    slider.button.color = menu.borderColor;
+    slider.button.highlightColor = slider.button.color.copy();
+    slider.button.highlightColor.b += 100;
+    slider.button.pressColor = slider.button.color.copy();
+    slider.button.pressColor.b += 150;
+    slider.silentSetHeight(MorphicPreferences.scrollBarSize);
+    slider.silentSetWidth(MorphicPreferences.menuFontSize * 10);
+    slider.drawNew();
+    slider.action = function (num) {
+        aStringOrTextMorph.changed();
+        aStringOrTextMorph.text = Math.round(num).toString();
+        aStringOrTextMorph.drawNew();
+        aStringOrTextMorph.changed();
+        aStringOrTextMorph.escalateEvent(
+            'reactToSliderEdit',
+            aStringOrTextMorph
+        );
+    };
+    menu.items.push(slider);
+    menu.popup(this, aStringOrTextMorph.bottomLeft().add(new Point(0, 5)));
+};
+
+WorldMorph.prototype.stopEditing = function () {
+    if (this.cursor) {
+        this.lastEditedText = this.cursor.target;
+        this.cursor.destroy();
+        this.cursor = null;
+        this.lastEditedText.escalateEvent('reactToEdit', this.lastEditedText);
+    }
+    this.keyboardReceiver = null;
+    if (this.virtualKeyboard) {
+        this.virtualKeyboard.blur();
+        document.body.removeChild(this.virtualKeyboard);
+        this.virtualKeyboard = null;
+    }
+    this.worldCanvas.focus();
+};
+
+WorldMorph.prototype.toggleBlurredShadows = function () {
+    useBlurredShadows = !useBlurredShadows;
+};
+
+WorldMorph.prototype.togglePreferences = function () {
+    if (MorphicPreferences === standardSettings) {
+        MorphicPreferences = touchScreenSettings;
+    } else {
+        MorphicPreferences = standardSettings;
+    }
+};