ZIM DOCS

http://zimjs.com/docs.html
http://zimjs.com/updates.html
http://zimjs.com/tips.html
http://zimjs.com/bits.html

A. ABOUT ZIM
ZIM is an JavaScript Canvas Framework powered by CreateJS and adds many components, conveniences and controls for making general Interactive Media.

The ZIM site at http://zimjs.com features the following sections:

LEARN tutorials on how to start and code in ZIM
CODE ZIM Frame template and code context
DOCS the objects and commands all defined
NEWS latest features and articles
ABOUT features, applications, archives, reviews, etc.
EXAMPLES sample projects created in ZIM
GOLD BARS with online editor, sharing, tips and badges

B. ABOUT THE DOCS
The docs are divided into modules:
FRAME, DISPLAY, METHODS, CONTROLS, CODE, WRAP, META, LIBRARIES
Let's have a brief look at each...

---------------------------------
1. FRAME - the framework class that makes and scales the canvas and stage
var frame = new Frame("fit"); // defaults to full screen no scaling
frame.on("ready", function() {
    var stage = frame.stage;
    frame.loadAssets(["pic.png", "sound.mp3"]); // optional asset loading
    frame.on("complete", function() {
        var pic = frame.asset("pic.png").center(stage);
        frame.asset("sound.mp3").play();
        stage.update();
    }); // end asset loading complete
}); // end ready
also handles zim colors like frame.blue, tabs, keydown and keyup, etc.
colors are now available on the zim namespace - blue, red, yellow...

---------------------------------
3. DISPLAY - classes for objects viewed on the stage like shapes and components
var circle = new Circle(100, "red"); // also Rectangle, Triangle and Blob
var button = new Button(200, 100, "GO!");
etc. and dozens more like Label, Slider, Dial, Tabs, ColorPicker...

---------------------------------
4. METHODS - methods for the display objects above
circle.center(stage); // adds to and centers button on stage
circle.drag(); // allows the circle to be dragged and dropped
circle.animate(obj:{alpha:0}, 5000); // fades out circle over 5 seconds
etc. and dozens more - also see PRINCIPLES sections below...

---------------------------------
5. CONTROLS - classes that affect Display objects
new MotionController(stage, circle); // circle moves to mouse press
new Pages(stage, {page:home}, {page:help}); // handle pages and swiping
new Layout(stage,[{object:header},{object:content},{object:footer}]);
responsive design with many more options (like css flex table)
etc. including Parallax, Scroller, Guide, Grid, Emitter, SoundWave...

---------------------------------
5. CODE - non-Canvas code convienence functions
var array = ["red", "yellow", "green", "blue"];
var color = shuffle(array)[0]; // shuffles array and picks first color
var color = array[rand(array.length-1)]; // gets random element
etc. many more including browser functions and asynchronus calls

---------------------------------
6. WRAP - a dozen three-letter global functions starting with z
zog("hello world"); // short for console.log();
zid("tagID"); // short for document.getElementById();
etc. including selectors similar to $() in jQuery

---------------------------------
7. META - a few classes and functions operating on zim
DISTILL = true;
distill(); // writes to console all the commands used to reduce code
zimify(createjsObj); // adds zim Methods to native createjs display objects
wonder.count("wow"); // once set up records different types of stats

---------------------------------
8. LIBRARIES - other ZIM helper modules found here:
http://zimjs.com/code.html#libraries
Including: SOCKET, GAME, PHYSICS, THREE, PIZZAZZ 1, 2 and 3 modules
The docs for these are found at the top of the code for each module

C. THE DOCS

------------------------------------
MODULE 1: ZIM FRAME
------------------------------------

************************************
[59101] Frame(scaling, width, height, color, outerColor, assets, path, progress, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors, retina, mouseMoveOutside, captureMouse, shim, maxConnections)

Frame
zim class - extends a createjs EventDispatcher

DESCRIPTION
Frame creates a canvas and stage.
Frame lets you decide how you want your stage to scale.
It also provides events for ready, resizing and orientation change
as well as a way to remake the canvas if necessary.
Frame handles loading Bitmap, Sound, etc. assets by wrapping PreloadJS
See https://zimjs.com/frame.html for sample templates using Frame.

ZIM ASSET TOOL
See https://zimjs.com/assetlist/
Optionally use this tool to prepare an array of assets from a folder.
Thanks Richard Musgrave for the prompting.

CANVAS ALTERNATIVE CONTENT
Frame will move any tag with an id of canvasIDAlternative into the canvas tag.
By default, the canvasID is "myCanvas" so use an id of "myCanvasAlternative".
This allows you to show content for non-canvas browsers.
The content may also be indexed by search engines - one would hope
and is read by screen readers (see also ZIM Accessibility).

NOTE: as of ZIM 10.6.1
frame.asset() is available as a global function asset()

NOTE: addTo(), center(), centerReg(), loc(), pos(), new Ticker.add()
default to the stage of the first frame made
use the setDefault() method to set a frame to the default frame

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// load assets right in Frame call
// see the assets and path and progress are optional

var frame = new Frame("fit", 1024, 768, "#ddd", "#333", "image.png", "assets/", new Waiter());
frame.on("ready", function() {
   var stage = frame.stage;
   var stageW = frame.width;
   var stageH = frame.height;

   // use global shortcut to frame.asset()
   asset("image.png").center();

   stage.update();
}); // end ready

EXAMPLE
var frame = new Frame("fit", 1024, 768, dark, light);
frame.on("ready", function() {
   var stage = frame.stage;
   var stageW = frame.width;
   var stageH = frame.height;

   // code here - or optionally load assets

   frame.loadAssets("image.png");
   frame.on("complete", function() {

      // app code goes here if waiting for assets
      var image = asset("image.png");
      image.center();
      stage.update();

   }); // end asset complete

   // OR for multiple assets in an assets folder:

   frame.loadAssets(["sound.mp3", "spriteData.json", "spriteImage.png"], "assets/");
   frame.on("complete", function() {

      // app code goes here if waiting for assets
      var soundInstance = asset("sound.mp3").play();
      // later soundInstance.paused = true; // etc.

      var sprite = new Sprite({json:asset("spriteData.json")});
      sprite.center().run(2000);
      // the image for the sprite is specified in the JSON
      // but we still want to load it so it is in the loadAssets()
      // and the JSON data will take care of adding it to the sprite

      stage.update();

   }); // end asset complete

}); // end of ready


EXAMPLE
   // With multiple loadAsset() calls you can assign the results to a variable
   // and use that variable for the events independently
   // Warning, each of these will still call a frame complete event
   // so usually you would use one or the other but not both

   var first = frame.loadAssets("image.png");
   first.on("complete", function() {
      var image = frame.asset("image.png").center();
   });

   var second = frame.loadAssets("sound.mp3");
   second.on("complete", function() {
      var sound = frame.asset("sound.mp3").play();
   });


PARAMETERS supports DUO - parameters or single object with properties below
scaling - (default "full") can have values as follows
   "fit"      sets canvas and stage to dimensions and scales to fit inside window size
   "outside"  sets canvas and stage to dimensions and scales to fit outside window size
   "full"     sets stage to window size with no scaling
   "tagID"    add canvas to HTML tag of ID - set to dimensions if provided - no scaling

FIT and OUTSIDE: width and height will set the stage width and height and the canvas is then scaled
this is handy because all your dimensions are set to start
FULL: width and height are ignored when scaling as these are set to the window width and height
TAG: if width and height are provided then the canvas and stage will be these dimensions
if width and height are not provided in tag mode, the canvas and stage will take the dimensions of the tag
this means, the tag must have some sort of width and height dimensions set or it will be really big!

width - (default 1024 except for full**) the width of the stage
height - (default 768 except for full**) the height of the stage
** if tag mode and no width or height then these will be the width and height of the tag
color - (default null) the background color of the frame (any CSS value) - or just set in styles
   will be see-through if not specified
outerColor - (default null) the body color of the HTML page - null will not adjust the background color
assets - (default null) - 1. a string asset or 2. an array of assets or 3. ZIM asset object
   1. "logo.png"
   2. ["logo.png", "bounce.mp3"]
   3. {asset:"logo.png", path:"assets/", loadTimeout:2000, noCORSonImage:true}
   ** see the loadAssets() method for details - including more file types, etc.
   NOTE: "complete", "progress" and "fileLoaded" events are not dispatched
      use loadAssets() for these if desired
      the "ready" event will be dispatched when the canvas is ready and initial assets are loaded
   NOTE: the loadAssets() method can still be used as desired
   SEE: https://zimjs.com/assetlist/ for many files
path - (default null) - a string path for the assets
   if an assets object is provide with a path then this parameter is ignored
progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading
rollover - (default true) activates rollovers
touch - (default true) activates touch on mobile
scrollTop - (default false) activates scrolling on older apple devices to hide the url bar
align - (default "center") for fit and outside, the horizontal alignment "left", "center/middle", "right"
valign - (default "center") for fit and outside, the vertical alignment "top", "center/middle", "bottom"
canvasID - (default "myCanvas" or if subsequent frame, myCanvas+randomID) will be set to tagIDCanvas if a tagID is provided - eg. scaling="test", canvasID="testCanvas"
rollPerSecond - (default 20) times per second rollover is activated (if rollover parameter is true)
delay - (default .03 and 1 for mobile) seconds to resize at load and after orientation change (also see ZIM TIME constant)
   some devices are slow to report true width and height
   At loading, mobile will be tested right away and then at .1 seconds
   the default is to then test again at the delay (default 1 second)
   At resize, mobile will be tested every .05 seconds up to the delay
   set this to some other time if desired
   if set to 0 then no additional test will be done - not even the one at .03 seconds
canvasCheck - (default true) check to see if there is canvas support - uses !!window.HTMLCanvasElement
gpu - (default false) set to true to use a CreateJS StageGL stage for GPU renderer
   note: retina will be turned off if gpu is on otherwise antialiasing really looks bad
   See: http://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/ (written before version 1 release)
gpuObj - (default null) object with following properties (with defaults) See CreateJS docs on GITHUB:
   preserveBuffer (false), antialias (false), transparent (false), premultiply (false), autoPurge (1200)
nextFrame - (default null) set to zim Frame object of Frame underneath current Frame to pass events to nextFrame
nextStage - (default null) alternative to nextFrame if the stage beneath current Frame is not a ZIM Frame but just a CreateJS Stage
allowDefault - (default false - true for tag mode) set to true to allow default mouse, key and scrollwheel events on canvas
   See also the zil property of frame that allows you to add and remove these events dynamically (except for mouse swipe scroll and zoom on mobile)
   allowDefault of false also sets body overflow to hidden - which is good for full, fit and outside modes
   also see allowDefault property
loadFailObj - (default result of frame.makeCircles) object that shows if asset() does not exist or did not load withing loadTimeout
   This will be given a type property of "EmptyAsset"
   Set the loadFailObj property below to null to set no object - but this will yield errors unless each resulting asset() is tested
   Set to new Container() to show nothing (but avoid errors) - or new Rectangle(10, 10) to show little black square, etc.
sensors - (default false) set to true to capture Frame devicemotion and deviceorientation events - see Events
retina - (default true) scales stage to use pixelDensity (sharper when scaling up) and supports Adobe Animate export
   may need to set mouse event targets to e.stageX/zim.scaX and e.stageY.zim.scaY
   except for using stage.getObjectUnderPoint()
   ZIM overrides CreateJS localToGlobal, globalToLocal and localToLocal to accomodate stage scaling
   This was a major adjustment to transform(), bezier controls, outline, physics, etc.
   set to false to return to traditional PRE ZIM 10.3.0 unscaled stage
mouseMoveOutside - (default false) set to true to capture mouse movement outside the stage
   see also mouseX and mouseY properties of frame - these work with ZIM retina without adjusting for stage scale
captureMouse - (default true) set to false to not use stagemousemove event to set frame.mouseX and frame.mouseY (good with Retina)
shim - (default null) used by ZIM SHIM 2 https://zimjs.com/animate/ to create Frame with pre-existing stage and canvas
   accepts an object with stage and canvas properties - lets Adobe handle resize
maxConnections - (default 1) set the maximum number of concurrent connections.
   From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,
   so any additional connections may remain in a pending state until the browser opens the connection.

METHODS
loadAssets(assets, path, progress, xhr, time, loadTimeout, outputAudioSprite, crossOrigin, fileType, queueOnly, maxConnections) // also accepts ZIM DUO configuration object as single parameter
   // see also assets and path parameters of Frame - which share the info below
   // see https://zimjs.com/assetlist/ to get an array of many files
   assets - a file (url String or asset object) or files in an Array
      each asset String is how you then access the asset with the asset() method of Frame
      asset types (from CreateJS PreloadJS): Image, JSON, Sound, SVG, Text, XML
      asset can also be an ZIM asset object:
         {id:string, src:url/filename, loadTimeout:1, maxNum:num, noCORSonImage:true}
         then can use the id to access the asset in the asset() method of Frame
         filename will be added to a path if a path parameter is provided
         loadTimeout (default 8) will override the loadAssets() loadTimeout
            this is how many seconds to wait for asset before error and a complete fires even though asset not loaded
         maxNum (browser default) is used with sound to specify the maximum number of sounds of the same source to play at one time
            this can be used with the interrupt parameter of the play() method
            to ignore multiple sounds or start the sound over again instead of playing multiple versions
         noCORSonImage (default false) set to true to make an HTML img tag and read it into a ZIM Bitmap to avoid CORS testing
            it then uses ZIM expand(0) to add a CreateJS hitArea to the Bitmap allowing it to be interactive and avoid CORS
            thanks Disco for the technique
            note: this means the Bitmap will be interactive everywhere - not just in opaque areas
            note: loading images this way will not count as progress (bytes loaded ratio) in the progress event but do count for fileloaded and complete events
      asset can also be a font object:
         {font:name, src:url, type:string, weight:string, style:string} // with last three properties being optional
         eg.
         {font: "wildwood", src:"ChurchintheWildwood-Regular.ttf", type:"OpenType"} // type is not needed
         {font: "regu", src:"regul-bold.woff", weight:"bold"}
         {src:"https://fonts.googleapis.com/css?family=Roboto"}
         For google fonts you add extra information to the url so the font (family), type, weight and style are ignored
         If absolute src is used, path parameter is ignored - otherwise path is added to start of src
         After loading, can just use:
            var label = new Label("hello", 30, "wildwood") // or whatever the font property is
      asset can be an AudioSprite - which is a single sound file and data for sounds within the sound file:
         ZIM has a format for the data and so does CreateJS - there is also the parseAudioSprite() method for importing formats
         See the parseAudioSound parameter to pre-parse the ZIM format then use the resulting CreateJS format to avoid live parsing (maybe save a millisecond)
         ZIM FORMAT:
            {src:"audiosprite.mp3", audioSprite:[
                   // [id, startime(s), endtime(s)]
                   // prefer this when making audioSprites by hand in Premiere or Audition
                   ['blackball', 1.041, 2.475],
                   ['bounce', 3.567, 4.232]
            ]}
         CREATEJS FORMAT:
            {src: "audiosprite.mp3", data:{ // extra data property
                audioSprite: [
                    {id:"sound1", startTime:0, duration:500}, // time in ms
                    {id:"sound2", startTime:1000, duration:400},
                    {id:"sound3", startTime:1700, duration: 1000}
                ]
            }}
   path - pass in an optional path String that gets prepended to the asset
      when accessing the asset with the asset() method you do NOT include the path
      assets with an absolute URL (http[s]://etc.) will ignore path
   progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading
   xhr (default false or true if Progress is a ProgressBar) set to true to load text and WebAdio (not needed for normal sound mp3, wav, etc.)
   time (default 0) is the minimum number of seconds for the complete event to trigger
      use this for testing or to always have time to show a loading message
   loadTimeout (default 8) is how many seconds to wait for asset before error and a complete fires even though asset not loaded
   outputAudioSprite (default false) set to true when passing in a ZIM AudioSprite format to output to the console a CreateJS AudioSprite JSON object
       JSON.parse() this object before passing in to loadAssets() - and add single quotes around console output as those are stripped by console
   crossOrigin (default "anonymous") - leave at default to load from Amazon S3, etc.
      had to add <AllowedMethod>HEAD</AllowedMethod> in CORSRule of CORS configuration on Amazon S3 for fonts
      https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
      https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors
      and had to edit distribution behaviours for cache header > whitelist and move over Origin
      NOTE: this will still not get past CORS if there is no CORS provided
      see noCORSonImage property of ZIM asset object for an image solution to bypass CORS
   fileType (default null) in cases where the file type cannot be parsed or is parsed incorrectly, this overrides
      might have to split up loading as this fileType gets applied to all files loaded
      Types are for CreateJS PreloadJS: https://www.createjs.com/docs/preloadjs/classes/LoadQueue.html
          createjs.Types.BINARY: Raw binary data via XHR
          createjs.Types.CSS: CSS files
          createjs.Types.IMAGE: Common image formats
          createjs.Types.JAVASCRIPT: JavaScript files
          createjs.Types.JSON: JSON data
          createjs.Types.JSONP: JSON files cross-domain
          createjs.Types.MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest
          createjs.Types.SOUND: Audio file formats
          createjs.Types.SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet instance.
          createjs.Types.SVG: SVG files
          createjs.Types.TEXT: Text files - XHR only
          createjs.Types.VIDEO: Video objects
          createjs.Types.XML: XML data
   queueOnly (default false) - set to true to send events only to the Queue object (see below) rather than the Frame
      when using queues to accept events, remember that the frame also receives events
      if you also have some general frame events for loading, set this parameter to true to avoid accident
   maxConnections - (default the Frame maxConnections) set the maximum number of concurrent connections.
      From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,
      so any additional connections may remain in a pending state until the browser opens the connection.
   RETURNS: a Queue object that can be used for control with multiple loadAssets calls
   Each Queue will trigger progress, assetload and complete events
   Each Queue will have a preload property to the CreateJS LoadQueue and an isLoading property
   The frame also has these events and properties but acts for all loading - so be careful - see the queueOnly parameter
   It is recommended to use the Queue any time you use multiple LoadAssets() calls at the same time
   You still access assets with frame.asset() as outlined below whether you use the Queue or not
asset(file, width, height) - access an asset such as an image or sound - see loadAssets() for more on types
   ** asset() is available as a global function asset() or if zns (ZIM name space) is true then as zim.asset()
   ** if there are two or more frames, then use frame.asset() not asset()
   ** traditionally, these have been preloaded into the Frame asset parameter or with Frame loadAssets()
   ** As of ZIM Cat, using asset() without preloading will automatically load the asset (and display an image as a Bitmap) - thanks Ami Hanya for suggestion
   ** asset() will add "complete" and "assetLoad" event to the asset object
   ** Adding a width and height will help the auto-loading otherwise, ZIM will recall positioning applied before the asset is loaded
   ** otherwise there is no need to add a width and height - only do so to optionally help auto-loading
   if the asset was loaded with a string then use the string (less the path if provided)
   if the asset was loaded with a full URL then use the full URL here
   if the asset uses an asset object with an id then use the id
   if the asset is an image then this is a Bitmap which can be added to the stage, etc.
   if the asset is a sound then use asset(file).play();
      play has ZIM DUO params of volume, loop, loopCount, pan, offset, delay, interrupt
      see the ZIM Docs on Sound (below the Frame) for param information
   if the asset is anything else, then it is what it is!
   asset() will have a type property depending on what type
      for instance, an image will have type "Bitmap" as it is a ZIM Bitmap object
      but an auto-loaded image will have type "Image" as it is actually a Container holding a Bitmap
      and its Bitmap can be accessed with the bitmap property - so asset("auto.png").bitmap will access the Bitmap
   asset.getIDs() will return an array of asset IDs.
object(name) - get a DisplayObject (for example a Circle or Button) by its name.
   ** object() is available as a global function object() or if zns (ZIM name space) is true then as zim.object()
   DisplayObjects do not start with a name but can be named if desired. Usually, we use variable names to reference an object
   See the DisplayObject name property and the nam() short chainable method to set a name
   object.getNames() will return an array of object names that have been set.
   any object that is named the same name as another object will overwrite the other object and will not be in the object() list anymore
follow(obj, boundary, damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, lag)
   moves obj container to keep provided object in middle of stage view
   pass in null for obj to stop following
   See https://zimjs.com/ten/follow.html - with keys
   See https://codepen.io/danzen/pen/gNKQYY - with press
   ** supports DUO - parameters or single object with properties below
   obj - the Display Object to follow - works well if controlling obj with ZIM Motion Controller (mousedown, keydown, gamebutton, gamestick)
      unlike Physics follow() the obj for Frame follow() must be in a container - the container will be moved
   boundary - (default stage size) - or use a ZIM Boundary() object to specify x, y, width and height to keep obj inside
      see also followBoundary property of Frame to update this boundary in a frame "resize" event function when frame is in "full" scaling mode
   damp - (default .05) the damping of the motion - 1 moves faster, 0 not at all
   dampY - (default damp) can set to damp vertical movement at a separate rate
   leftOffset - (default 0 from left of boundary)
   rightOffset - (default 0 from right of boundary) - differs from Physics follow which is distance from 0 to right offset
      the object will try and move to leftOffset when moving right and rightOffset when moving left
      this counters the damping so that the user can see in the direction of motion
      when the object is not being controled it moves to the average between left and right offsets
   upOffSet - (default 0 from top of boundary)
   downOffSet - (default 0 from bottom of boundary)
      same as offsets above but in the y direction
   offsetDamp - (default .02) the damping for moving the object to the offset
   offsetDampY - (default offsetDamp) - damping for moving the object to the y offset if desired to be different than x
   horizontal - (default true) set to false to not follow horizontally
   vertical - (default true) set to false to not follow vertically
   borderLock - (default false) set to true to stop container at boundary
   lag - (default false) set to true to position object back from direction of motion
      this gives more view as moving but sort of goes in two directions when motion stops
setDefault() - sets the frame to be the default frame
   by default ;=) the default frame is the first frame made
   the default frame has the stage that addTo(), center(), etc. will use as the default container
   a global varible called zdf is also available
makeCat(height) - returns a ZIM Cat icon - provide height rather than scaling for better caching if cached
   if mobile, the icon will be cached - can uncache() it if desired
makeIcon(edges, box, slats, borderColor, borderWidth) - returns a ZIM Z icon
   edges defaults to zim.light and is the top and bottom line in the Z
   box defaults to zim.dark and is the background box color
   slats defaults to the ZIM colors but can be set to any array of five colors (setting true will set to zim.silver)
   borderColor and borderWidth default to null - or borderWidth 1 if color set and borderColor black if borderWidth set
madeWith(color, text, edges, box, slats, borderColor, borderWidth) - returns a ZIM Z icon with Made With message
   color - (default zim.dark) change color of text (pass in clear to hide text)
   text - (default: "Made with ZIM") change to desired made with message
   other parameters see makeIcon() above
makeCircles(radius, multiple) - returns ZIM Circles (centered reg)
   radius defaults to 100
   multiple defaults to false which will return a ZIM Shape - set to true to return a ZIM Container of ZIM Circles
remakeCanvas(width, height) - removes old canvas and makes a new one and a new stage
   will have to set your local stage, stageW and stageH variables again
update() - call this if frame position is moved on the HTML page
   for instance, when a div to left has its display style set to none and the frame shifts over
   calling update() will dispatch an update event to any TextArea, Loader or Tag objects
   so they resize properly with the new frame.x and frame.y values
dispose() - removes canvas, resize listener and stage

PROPERTIES
type - holds the class name as a String
stage - read only reference to the zim Stage - to change run remakeCanvas()
   frame gives the stage read only stage.width and stage.height properties
   frame gives the stage a frame property that points to the frame that made the stage
canvas - a reference to the frame's canvas tag
canvasID - a reference to the frame's canvas ID
color - the color of the frame background - any css color
outerColor - the color of the body of the HTML page - set with styles
tag - the containing tag if scaling is set to an HTML tag id (else null)
isDefault - a Boolean to indicate whether the Frame is the default frame (see setDefault() method)
   the default frame has the stage that addTo(), center(), etc. will use as the default container
   a global varible called zdf is also available
isLoading - a Boolean to indicate whether loadAssets() is currently loading assets (also, each queue has an isLoading property)
width - read only reference to the stage width - to change run remakeCanvas()
height - read only reference to the stage height - to change run remakeCanvas()
scale - read only returns the scale of the canvas - will return 1 for full and tag scale modes
mouseX, mouseY - read only value of the mouse x and y positions on the canvas
   note: the frame captureMouse parameter must be set to true (default)
   note: this value includes the division by the stage scale needed for ZIM Retina
   whereas getting the mouse coordinates from a mouse event object does not include division by the stage scale
   set frame's mouseMoveOutside parameter to true to capture movement outside the canvas
mousedownEvent - a reference to the frame "stagemousedown" event - can set frame.off("stagemousedown", frame.mousedownEvent)
mousemoveEvent - a reference to the frame "stagemousemove" event - can set frame.off("stagemousemove", frame.mousemoveEvent)
orientation - "vertical" or "horizontal" (updated live with orientation change)
visibleLeft, visibleTop, visibleRight, visibleBottom - in "outside" scale mode these give window edge locations relative to the stage
   can be used to position items like navigation relative to window as the frame resize event is fired
   in all scale modes other than "outside", the values are 0, stageW, 0, stageH
zil - reference to zil events that stop canvas from shifting or scrolling - also see allowDefaults parameter
   can set allowDefault property to false then allow specific defaults by removing zil events - see zil global function
   example: window.removeEventListener("keydown", frame.zil[0]); removes keydown preventions (for page up, page down, home, end, etc)
allowDefault - set to true to remove zil or false to set zil (see above) also affects body overflow
colors: orange, green, pink, blue, brown, yellow, red, purple, silver, tin, grey, lighter, moon, light, dark, darker, white, black, clear (0 alpha), faint (.01 alpha)
followBoundary - update with a ZIM Boundary for follow() if "full" mode Frame "resize" event happens, etc.
altKey - true if the alt key is being pressed otherwise false
ctrlKey - true if the ctrl key is being pressed otherwise false
metaKey - true if the meta key (⌘ command on Mac or ⊞ windows key) is being pressed otherwise false
shiftKey - true if the shift key is being pressed otherwise false
loadFailObj - the object that shows if images are broken - will be given a type property of "EmptyAsset"
startTime - datestamp of when frame was made - used internally
retina - read-only Boolean as to whether stage (as opposed to the canvas) was scaled for pixelDensity during Frame creation

EVENTS
"ready" - fired when the stage is made
"failed" - fired if no canvas support (and canvasCheck parameter is set to true - which is the default)
"resize" - fired on resize of screen
"update" - fired when frame.update() is called - read by Loader, TextArea and Tag objects
   note: this is for when the frame is moved within an html page
   for instance, when a div to the left has its display set to none - then call frame.update();
"orientation" - fired on orientation change
"keydown" - fired on keydown - just like the window keydown event with eventObject.keyCode, etc.
   also stores frame.altKey, frame.ctrlKey, frame.metaKey, frame.shiftKey
"keyup" - fired on keyup - just like the window keyup event with eventObject.keyCode, etc.
"wheel" - fired on mousewheel (Window wheel event)
   can get eventObject.deltaX and eventObject.deltaY
   these vary greatly in value based on Browser
   may want to just ask for sign(eventObject.deltaY) and multiply it by a factor
   and then perhaps constrain the value - here the scale is constrained between .5 and 5
   note - when changing scale, it is better to multiply by a factor rather than add to the scale
   eg. circle.scale = constrain(circle.scale*(sign(e.deltaY)>0?.75:1.25), .5, 5);
"deviceorientation" - MUST SET Frame sensors parameter to true
   fired as device orientation changes:
   eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)
   eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)
   eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)
      note rotation.z is 360-alpha compared to the HTML 5 specs
      note also that beta, gamma and alpha from the HTML 5 specs are also provided
   eg.
   var label = new Label().center();
   frame.on("deviceorientation", function(e) {
      label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
      stage.update();
   });
"devicemotion" - MUST SET Frame sensors parameter to true
   fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion
   eg.
   var label = new Label().center();
   frame.on("devicemotion", function(e) {
      label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;
      stage.update();
   });

ASSET EVENTS
loadAssets() will trigger these events on the Frame object and on the specific queue (eg. var queue = frame.loadAssets();)
NOTE: if loadAssets() queueOnly parameter is true, then only the queue receives the events - see queueOnly parameter
"progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress (fonts not included)
   the event object has a progress property between 0 and 1
"assetload" - fired when an asset loaded with loadAssets() or asset() has loaded (use asset property of event object - with type and id properties) (fonts not included)
"complete" - fired when all assets loaded with loadAssets() or asset() are loaded (then use frame.asset())
"error" - fired when there is a problem loading an asset with loadAssets()


MORE: http://zimjs.com/code/bits.html?title=Frame


************************************
[61000] Images - loaded into asset()

Images
ZIM Bitmap Class

DESCRIPTION
Images can be loaded with the Frame assets parameter (also see the path parameter)
and will be ready to display in the Frame "ready" event function.
Also, at anytime, images can be loaded with the Frame loadAssets() method which has a "complete" event.
ZIM wraps the CreateJS PreloadJS library and helps make loading images easier.

To view an image use the global asset() function and add the image to the stage or another container.
The global asset() function is a shortcut to the Frame asset() method (which can also be used).
The asset() returns a reference to a ZIM Bitmap - so has the methods and properies of a Bitmap.
** If there are two or more frames, then use frame.asset() not asset().
If you need two or more of the same asset, then clone() the asset:

asset("pic.png").center();
asset("pic.png").pos(100,100,RIGHT,BOTTOM);
// will just move the asset from the center to the bottom right

asset("pic.png").center();
asset("pic.png").clone().pos(100,100,RIGHT,BOTTOM);
// will show two images, one centered and one at the bottom right

As of ZIM Cat, asset() can also load an image directly without loading through the Frame.
This will just call loadAsset() in behind the scenes so for multiple assets,
it is better to batch these in an array and use the traditional assets parameter of Frame.
Also, just using asset() must re-apply any chained methods the need the dimensions (like center() and pos()).
So, while asset() works as a form of lazy-loading, perhaps use it sparingly.

ERRORS
Loading assets onto the canvas when users interact with the canvas can cause a CORS error.
CORS stands for Cross Origin Resource Sharing.
This error can happen as you test locally or if you are loading images from another server.
See https://zimjs.com/tips.html#IMAGES for tips on how to avoid this error as testing.

See the solution linked to above as a first solution.
A way to avoid the CORS error when using images and sound from other servers (without CORS permission)
is to use https://cors.zimjs.com/https://theurltotheasset.jpg as the URL.
The ZIM asset object can also be used {id:"name", src:https://theurltotheasset.jpg, noCORSonImage:true}
At which point asset("name") would be used to access the asset.
It is preferred that CORS be worked out when possible rather than using the above techniques.

EXAMPLE
var frame = new Frame({assets:"pic.png", path:"path/"});
frame.on("ready", function() {
   asset("pic.png").center().drag();
}); // end frame ready

EXAMPLE
// multiple pictures fading in
var frame = new Frame({assets:["pic.png", "pic2.jpg"], path:"path/"});
frame.on("ready", function() {
   asset("pic.png").center().alp(0).animate({alpha:1});
   asset("pic2.png").pos(100,100).alp(0).animate({alpha:1});
}); // end frame ready

EXAMPLE
// lazy loading
var frame = new Frame();
frame.on("ready", function() {
   asset("pic.png").center().drag();
}); // end frame ready

EXAMPLE
// loading an asset on request
var frame = new Frame();
frame.on("ready", function() {
   var button = new Button().center().tap(function () {
      var loading = frame.loadAssets("pic.png", "assets/");
      loading.on("complete", function () { // or use frame.on("complete",...)
         button.removeFrom();
         asset("pic.png").center().drag();
         stage.update();
      }); // end asset load
   }); // end button tap
}); // end frame ready

PARAMETERS
See Frame asset and path parameters

METHODS
See Frame loadAssets() and assets() methods
See all the methods of a ZIM Bitmap()
ALSO ZIM 4TH adds all the methods listed under ZIM Container, such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO See the CreateJS Easel Docs for Bitmap methods, such as:
on(), off(), getBounds(), setBounds(), dispatchEvent(), etc.

PROPERTIES
See all the properties of a ZIM Bitmap()
ALSO See the CreateJS Easel Docs for Bitmap properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.


************************************
[61108] Sounds - loaded into asset()

Sounds
CreateJS Sound class

DESCRIPTION
ZIM loads sounds as assets just like images - and provides a play method.
In the background, sounds are handled with a single CreateJS Sound object for all sounds.
ZIM wraps the CreateJS PreloadJS and SoundJS libraries to offer simplified loading.

ZIM has not changed the Sound class but we include Sound in the docs for completeness.
The full docs on Sound can be found here https://www.createjs.com/docs/soundjs/classes/Sound.html

**************
DO NOT make a new Sound() - rather, pass the sound url into the Frame assets parameter.
Or load sounds when desired with Frame loadAssets() and wait for a complete event.
In either case, use asset() to play the sound
**************

The sound(s) will be available as asset("sound.mp3")
or with path if no path was provided or with an id if the ZIM {id, src, maxNum} asset object was used.
To play the sound use the play() method see the parameters listed below
The play() method will return a CreateJS AbstractSoundInstance
which has a complete event, and various properties like volume, pan, paused, etc.

Warning: Sounds, like images, will have a CORS error if loaded locally unless dealt with
as detailed here: https://zimjs.com/tips.html#SOUND

Warning: Sound cannot be played before the user interacts with the page.
This is a general Browswer rule to stop being bombarded with sounds.
It means that you will have to make a start button or a splash page
that the user interacts with before a background sound can be played.

EXAMPLE
var frame = new Frame({assets:"sound.mp3", path:"path/"});
frame.on("ready", function() {

   // sound needs interaction...
   stage.on("stagemousedown", function() {

      // use the play() right on the sound asset
      // could add loop:true or loopCount:2 into play, etc.
      // see parameters of play() below

      var sound = asset("sound.mp3").play({volume:2});

      // adjust the sound after...
      timeout(1, function() {
         sound.volume = 1;
      });
      timeout(2, function() {
         sound.paused = true;
      });
      timeout(3, function() {
         sound.paused = false;
      });
      sound.on("complete", function() {
         frame.color = red;
         stage.update();
      });

   }); // end stagemousedown
}); // end frame ready

EXAMPLE
// here we use maxNum to limit a sound to be played only once at a time
// so this will stop multiple copies of the same source from playing
// below we use interrupt to adjust how that will work
// sound2.mp3 will play multiple times at the same time (up to 100 or 2 in IE)

var assets = [{id:"sound", maxNum:1, src:"sound.mp3"}, "sound2.mp3"];
var path = "assets/";
var frame = new Frame({assets:assets, path:path}); // or {assets, path} in ES6
frame.on("ready", function() {
   new Button().center().tap(function () {

      // without the maxNum above, this sound would play each time the button is pressed
      // so there would be multiple versions of it playing (annoying) - up to 100
      // which is the default max num (perhaps 2 in IE).

      // with the maxNum set, only that number of versions will play at once.
      // so if maxNum is 1 then only one will play no matter how many times the button is pressed
      // when the sound is done, pressing the button will play the sound again
      // this is the default interrupt setting of "none".
      // this is probably better but might not be the best.

      // a possible better solution is to start the sound over each time the button is pressed
      // to do that, an interrupt setting of "any" can be used
      // there are also settings of early and late - see the params of play for info

      // use the id not the src
      asset("sound").play({volume:.1, interrupt:"any"}); // start the sound again each time

   });
}); // end frame ready

METHODS
play(volume, loop, loopCount, pan, offset, interrupt) - play the sound
   *** Supports ZIM DUO - regular parameters or single configuration object {}
   *** returns a CreateJS AbstractSoundInstance (of course). Detailed docs are here:
   *** https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
   *** See the methods and properties listed after the play parameters
   volume (default 1) - set the volume
   loop (default false) - set to true to loop forever or a number based on loopCount
   loopCount (default null) - change to how many times to play the sound
      there is no need to set loop if loopCount is set
   pan (default 0) - set towards -1 to pan left and towards 1 to pan right
      may not work locally but should work on server
   offset (default 0) - elapsed time in seconds for which to start playing
   interrupt (default "none") - how to interrupt a sound if a sound with the same source is played
       and the maximum number of instances of the sound are already playing
      "none" - do not interrupt the previously playing sound(s) (with the same source)
      "any" - interrupt the previously playing sound(s) (with the same source)
      "early" - interrupt only the previously playing sound that has progressed the least
      "late" - interrupt only the previously playing sound that has progressed the most
      ** thank you CreateJS and SoundJS for providing these options

ABSTRACT SOUND INSTANCE
The return result of the play() makes a CreateJS AbstractSoundInstance
var sound = asset("sound.mp3").play(); // sound is an AbstractSoundInstance

METHODS (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
stop() - stops the sound and sets the time to 0
play() - plays the sound again - usually, the sound is already playing from the asset().play()
   but if it is stopped - this will start it again - but only with config object parameter

PROPERTIES (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
paused - set to true to pause and false to unpause
muted - set to true to mute - but sound keeps playing or false to unmute
volume - the volume with 1 being the default
pan - set from -1 (full left) to 1 (full right) with 0 in middle (may not work until on server)
position - set to place in sound in milliseconds (ZIM TIME constant does not affect this)
duration - the length of the sound in milliseconds

EVENTS (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
complete - dispatched when the sound has reached the end - after any loops (not before)
loop - dispatched when the sound loops (but not at end of last loop - that is complete)


************************************
[61257] LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN

LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN
zim constants

DESCRIPTION
ZIM positioning constants for convenience if desired.
These are all equal to strings with lowercase values.
So using TOP is the same as using "top"

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Tip("hello", RIGHT, MIDDLE).show();
// same as
new Tip("hello", "right", "middle").show();


************************************
[61290] GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH

GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH
zim constants

DESCRIPTION
ZIM bind constants, if desired.  See ZIM Bind().
These are all equal to strings with lowercase values.
So using GET is the same as using "get"

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var bind = new Bind("url", POST);
new Circle().center().bind("circle", {x:BOTH, y:BOTH, alpha:TO});


************************************
[61317] SINE, SQUARE, TRIANGLE, SAW, ZAP

SINE, SQUARE, TRIANGLE, SAW, ZAP
zim constants

DESCRIPTION
ZIM wave form constants, if desired.  See ZIM Synth().
These are all equal to strings with lowercase values.
So using SINE is the same as using "sine" (different than Math.sin()...)

Note: SAWTOOTH is also available which evaluates to "sawtooth" - same result as SAW

Note: ZAP is a reverse SAW

Constants for the musical notes - A, C#, Bb, etc. were considered
but there are hundreds of them at different octaves and # cannot be used as an identifier.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var synth = new Synth();
synth.tone(.5, "A", SQUARE);


************************************
[61350] orange, green, pink, blue, brown, yellow, purple, red, black, darker, dark, grey, gray, tin, silver, fog, mist, light, moon, lighter, white, faint, clear

orange, green, pink, blue, brown, yellow, purple, red, black, darker, dark, grey, gray, tin, silver, fog, mist, light, moon, lighter, white, faint, clear
zim constants (lowercase)

DESCRIPTION
ZIM colors for convenience - such as blue, green, dark, etc.
Traditional HTML colors as strings can also be used such as "blue", "tomato", etc.
Also available are HEX numbers as strings such as "#333" or "#cc0000"
and RGB and RGBA as strings such as "rgb(0,0,255)" or "rgba(0,0,0,.2)" (.2 is alpha)

NOTE: these started off as properties of the frame so frame.blue
but the frame properties have now been removed as they are stored on the zim namespace or as globals

DARKEN AND LIGHTEN
ZIM has added darken() and lighten() methods to the JS String prototype to handle easy darkening and lightening of colors
This is very handy in desiging.

GRADIENTS
ZIM DisplayObjects accept GradientColor(), RadialColor() and BitmapColor() objects - see docs under the CODE module for info.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Circle(100, blue).center();
// is the same as
new Circle(100, "#50c4b7").center();

// ZIM colors (or HTML colors) can have alpha adjusted as follows:
convertColor(blue, "rgba", .5);



------------------------------------
MODULE 2: ZIM DISPLAY
------------------------------------

************************************
[05917] Coordinates(canvasID)

Helper functions for localToGlobal, globalToLocal and localToLocal



************************************
[05965] Stage(canvasID)

Stage
zim class - extends a createjs.Stage which extends a createjs.Container

DESCRIPTION
An extension of a createjs.Stage that includes read only type, width and height properties, loop and hitTestGrid methods.
When using zim.Frame, there should be no reason to make a zim.Stage.
This was put in place to match the ZIM TypeScript typings for stage width and height.
Also see https://www.createjs.com/docs/easeljs/classes/Stage.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var stage = new Stage("canvasID");

PARAMETERS
canvasID - (default null) string ID for canvas tag

METHODS
loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details
    see the ZIM Display Methods loop() for details
hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
   see the ZIM Display Methods hitTestGrid() for details
See the CreateJS Easel Docs for Stage methods, such as:
clear, update, toDataURL
And all the Container methods such as:
on, off, setBounds, getBounds, globalToLocal, etc.

PROPERTIES
frame - if made with ZIM Frame then frame points to the frame that made the stage
type - holds the class name as a String
width - read only width set by ZIM Frame
height - read only height set by ZIM Frame

ALSO: See the CreateJS Easel Docs for Stage properties, such as:
autoClear, canvas, nextStage, etc.
and all the Container properties, such as:
children, mouseChildren, filters, cacheCanvas, etc.

Note: also makes a partial zdf allowing circle.center() to work
but will be overwritten if an actual Frame is made

EVENTS
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events (plus a ZIM pressdown - same as mousedown) such as:
click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[06108] StageGL(canvasID, options)

StageGL
zim class - extends a zim.Stage which extends a createjs.Stage

DESCRIPTION
An extension of a zim.Stage for WebGL support
See ZIM Stage and https://www.createjs.com/docs/easeljs/classes/StageGL.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var stage = new StageGL("canvasID", {preserveBuffer:true, antialias:true});

PARAMETERS
canvasID - (default null) string ID for canvas tag
options - (default null) an object literal with the following properties
   FROM https://www.createjs.com/docs/easeljs/classes/StageGL.html
preserveBuffer (default false)
   If true, the canvas is NOT auto-cleared by WebGL (the spec discourages setting this to true). This is useful if you want persistent draw effects.
   antialias (default false)
      Specifies whether or not the browser's WebGL implementation should try to perform anti-aliasing. This will also enable linear pixel sampling on power-of-two textures (smoother images).
   transparent (default false)
      If true, the canvas is transparent. This is very expensive, and should be used with caution.
   premultiply (default false)
      Alters color handling. If true, this assumes the shader must account for pre-multiplied alpha. This can help avoid visual halo effects with some assets, but may also cause problems with other assets.
   autoPurge (default 1200)
       How often the system should automatically dump unused textures with purgeTextures(autoPurge) every autoPurge/2 draws. See purgeTextures for more information.

METHODS
loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details
    see the ZIM Display Methods loop() for details
hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
   see the ZIM Display Methods hitTestGrid() for details
See the CreateJS Easel Docs for StageGL methods:
https://www.createjs.com/docs/easeljs/classes/StageGL.html

PROPERTIES
frame - if made with ZIM Frame then frame points to the frame that made the stage
type - holds the class name as a String
width - read only width set by ZIM Frame
height - read only height set by ZIM Frame

See the CreateJS Easel Docs for Stage properties:
https://www.createjs.com/docs/easeljs/classes/StageGL.html

Note: also makes a partial zdf allowing circle.center() to work
but will be overwritten if an actual Frame is made

EVENTS
ZIM adds a pressdown event to match a pressup event - it is the same as mousedown
See the CreateJS Easel Docs for StageGL events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events (plus a ZIM pressdown - same as mousedown) such as:
click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[06258] Container(a, b, c, d, style, group, inherit)

Container
zim class - extends a createjs.Container

DESCRIPTION
A Container object is used to hold other display objects or other containers.
You can then move or scale the container and all objects inside will move or scale.
You can apply an event on a container and use the target property of the event object
to access the object in the container that caused the event
or use the currentTarget property of the event object to access the container itself.
Containers do not have bounds unless some items in the container have bounds -
at which point the bounds are the combination of the bounds of the objects with bounds.
You can manually set the bounds with setBounds(x,y,w,h) - read the CreateJS docs.
Or pass in width and height, or boundsX, boundsY, width, height to have Container set bounds
Manually set bounds will not update automatically unless you setBounds(null).

NOTE: All the ZIM shapes and components extend the Container.
This means all shapes and components inherit the methods and properties below
and indeed, the Container inherits all the createjs.Container methods and properties.
See the CreateJS documentation for x, y, alpha, rotation, on(), addChild(), etc.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var container = new Container();
stage.addChild(container);
container.x = 100; container.y = 100;

// demonstration of adding drag() to a Container
var rect = new Rectangle(100, 100, "blue");
container.addChild(rect); // add rectangle to container
var circle = new Circle(40, "red");
circle.center(container) // add the circle to the container and center
container.drag(); // will drag either the rectangle or the circle
container.drag({currentTarget:true}); // will drag both the rectangle and the circle

// below will reduce the alpha of the object in the container that was clicked (target)
container.on("click" function(e) {e.target.alpha = .5; stage.update();})
// below will reduce the alpha of all the objects in the container (currentTarget)
container.on("click" function(e) {e.currentTarget.alpha = .5; stage.update();})

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** Container supports three different sets of parameters as follows:
a - (default null) - width and height equal to parameter a (x and y will be 0)
a, b - (default null) - the width and height (x and y will be 0)
a, b, c, d - (default null) - the x, y, width and height of the bounds
   if parameter a is not set, then the Container will take bounds that grow with its content
   the bounds of the Container can be set at any time with setBounds(a, b, c, d)
   if the bounds are set, then the Container bounds will not change as content is added
   the bounds can be removed with setBounds(null) and the Container will get auto bounds
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly


NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle();
circle.center(); // add circle to stage and center
circle.drag();

// alternatively, we can still use the traditional ZIM functions:
center(circle, stage);
drag(circle);

// ZIM DUO works the same way as before - eg.
circle.drag({slide:true});

METHODS
* This class has all the DISPLAY METHODS introduced in ZIM 4TH
* the methods are available to all ZIM Display objects that extend a ZIM Container
* such as ZIM Rectangle, Circle, Triangle, BLob
* as well as all components like: Label, Button, Slider, Dial, Tab, Pane, etc.
* as well as the ZIM display wrappers: Container, Shape, Sprite, MovieClip and Bitmap
cache(width||x, height||y, null||width, null||height, scale, options, margin) - overrides CreateJS cache() and returns object for chaining
   If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
   width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
   height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
   width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
   height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
   scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
   options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
   margin - (default 0) add or subtract a margin from the bounds
      eg. margin:10 will make the cache size 10 pixels more on all sides
      this can be handy when caching objects with borders - that go half outside the natural bounds
uncache() - uncaches and returns object for chaining
setBounds(width||x, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
   If you do not provide the any parameters, then the bounds will be reset to the calculated bounds
   width||x - (default null) the width of the bounds - or the x if four parameters are provided
   height||y - (default width) the height of the bounds - or the y if four parameters are provided
   width - (default null) the width of the bounds - or null if only the first two parameters are provided
   height - (default null) the height of the bounds - or null if only the first two parameters are provided
childrenToBitmap() - turns content to a Bitmap and adds bitmap to container - removing all other children
specialColor(colorCommand, colorObject) - used internally by ZIM Shapes
   to set GradientColor, RadialColor and BitmapColor on a fill or stroke color command
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - clones the container, its properties and all its children
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if a Container holds a new Circle(20,[blue,green])
   then its clone might be blue or green
   If exact is set to true then the clone will be whatever color was picked for the original circle
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
draggable - set to true for a default drag() and false for a noDrag()
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scale, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Container


************************************
[06575] Shape(a, b, c, d, graphics, optimize, style, group, inherit)

Shape
zim class - extends a createjs.Shape

DESCRIPTION
ZIM Shape lets you draw dynamic shapes beyond the ZIM provided shapes.
You make a new shape object and then draw in its graphics property
using similar commands to the HTML Canvas commands (and Flash Bitmap drawing).
See the CreateJS Easel Shapes and Graphics docs:
http://www.createjs.com/docs/easeljs/classes/Graphics.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

NOTE: as of ZIM 10.6.0 the tiny API is available right on the Shape (no need for graphics)

EXAMPLE
var shape = new Shape().addTo();
shape.graphics.beginFill(red).drawRect(0,0,200,100);
// similar to Rectangle(200, 100, "Red");

// or we can use the tiny API (see methods)
// NOTE: these can be chained directly on the Shape object
new Shape().f(red).dr(0,0,200,100).addTo();

// we can draw lines, etc.
var g = shape.graphics; // shorter reference to graphics object
g.beginStroke(blue).moveTo(200,200).lineTo(300,300);

// or we can use the tiny API (see methods)
new Shape().s(blue).ss(5).mt(200,200).lt(300,300).addTo();

// to change a color or stroke after it has been made use command:
var shape = new Shape().addTo();
var strokeColor = shape.s(red).command;
shape.dr(50,50,100,100);
stage.update();
timeout(1, function(){
   strokeColor.style = blue;
   stage.update();
});

// note - we can draw as much as we want in the same shape

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** Shape supports three different sets of parameters as follows:
a - (default null) - width and height equal to parameter a (x and y will be 0)
a, b - (default null) - the width and height (x and y will be 0)
a, b, c, d - (default null) - the x, y, width and height of the bounds
graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)
   or just use the graphics property of the shape object (like usual)
optimize - (default false) set to true to not store graphics methods directly on Shape
   this means the shapes graphics property will need to be used to access f(), s(), ss(), etc.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
The following shortcuts to CreateJS graphics methods are provided (as long as optimize is false)
See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters
mt()   moveTo
lt()   lineTo
a()    arc
at()   arcTo
bt()   bezierCurveTo
qt()   quadraticCurveTo
r()    rect
cp()   closePath
c()    clear
f()    beginFill
lf()   beginLinearGradientFill
rf()   beginRadialGradientFill
bf()   beginBitmapFill
ef()   endFill
ss()   setStrokeStyle
sd()   setStrokeDash
s()    beginStroke
ls()   beginLinearGradientStroke
rs()   beginRadialGradientStroke
bs()   beginBitmapStroke
es()   endStroke
dr()   drawRect
rr()   drawRoundRect
rc()   drawRoundRectComplex
dc()   drawCircle
de()   drawEllipse
dp()   drawPolyStar
p()    decodePath
cache(width||x, height||y, null||width, null||height, scale, options, margin) - overrides CreateJS cache() and returns object for chaining
   If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
   width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
   height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
   width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
   height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
   scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
   options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
   margin - (default 0) add or subtract a margin from the bounds
      eg. margin:10 will make the cache size 10 pixels more on all sides
      this can be handy when caching objects with borders - that go half outside the natural bounds
setBounds(width||x, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
   width||x - (default null) the width of the bounds - or the x if four parameters are provided
   height||y - (default width) the height of the bounds - or the y if four parameters are provided
   width - (default null) the width of the bounds - or null if only the first two parameters are provided
   height - (default null) the height of the bounds - or null if only the first two parameters are provided
hasProp(property) - returns true if String property exists on object else returns false
clone(recursive) - makes a copy of the shape
   recursive defaults to true so copy will have own copy of graphics
   set recursive to false to have clone share graphic property
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), placeReg(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
command - save a previously chained operation as a command
   then can use the command to change the operation later (see example above)
type - holds the class name as a String
draggable - set to true for a default drag() and false for a noDrag()
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Shape properties, such as:
graphics, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.

EVENTS
ZIM adds a pressdown event to match a pressup event - it is the same as mousedown
See the CreateJS Easel Docs for Shape events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Shape


************************************
[06875] Bitmap(image, width, height, left, top, id, style, group, inherit)

Bitmap
zim class - extends a createjs.Bitmap

DESCRIPTION
Makes a Bitmap object from an image.
It is best to use the assets and path parameters of ZIM Frame or the loadAssets() method of Frame
to preload the image and then use the asset() method to access the Bitmap.
See the ZIM Frame class and asset example on the ZIM Frame page of templates.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var frame = new Frame();
frame.on("ready", function() {
   var stage = frame.stage;
   frame.loadAssets("logo.jpg");
   frame.on("complete", function() {
      var logo = frame.asset("logo.jpg"); // logo is a Bitmap
      logo.center();
      stage.update();
   });
});

EXAMPLE
// turn a container of circles into a Bitmap
var circles = new Container(stageW, stageH).addTo();
loop(400, function() {
   new Circle(rand(10), [pink,green,blue,yellow,purple], dark).center(circles);
});
var pic = new Bitmap(circles).drag();
circles.dispose();

previous to ZIM 10.8.0 we needed to use the cacheCanvas:
var pic = new Bitmap(circles.cache().cacheCanvas).drag();
curcles.uncache(); etc.

EXAMPLE
// fill a Bitmap with noise:
var noise = new Noise();
// empty Bitmap size 200, 200
var bmp = new Bitmap(null,200,200).center();
// we fill the bitmap starting from top left going across in the inner loop,
// then down, then across, etc. until we get to bottom right.
var f = 50; // used to make noise bigger or smaller - see the blob comment below
for (var y = 0; y < bmp.height; y++) {
   for (var x = 0; x < bmp.width; x++) {
      // the noise methods return a number from -1 to 1
      // by adding 1 we get a number between 0 and 2 then divide by 2
      // and we multiply this by 255 to get a number between 0 and 255
      value = (noise.simplex2D(x, y)+1)/2 * 255;
      // or get blobs by smoothing and adjusting frequency:
      // var value = smoothStep((noise.simplex2D(x/f, y/f)+1)/2, .3,.35) * 255;
      // imageData is four values per pixel
      // the red, green, blue and alpha
      // in one big long array - each value will be constrained to between 0 and 255
      // this i value will increase by 4 each time
      // then we write the same value for red, green, blue to get a shade of grey
      var i = (x + y * bmp.width) * 4;
      bmp.imageData.data[i] = value; // red (0-255)
      bmp.imageData.data[i + 1] = value; // green (0-255)
      bmp.imageData.data[i + 2] = value; // blue (0-255)
      bmp.imageData.data[i + 3] = 255; // alpha (0-255)
   }
}
bmp.drawImageData();

EXAMPLE
// applying filters
var bitmap = frame.asset("statue.jpg");
bitmap.filters = [new createjs.BlurFilter(25, 25, 1)];
bitmap.cache().center();

EXAMPLE
// getting the color at point(100, 100) on the Bitmap
var bitmap = frame.asset("statue.jpg").cache();
var ctx = bitmap.cacheCanvas.getContext('2d');
var data = ctx.getImageData(100, 100, 1, 1).data;
var color = "rgba("+data.join(", ")+")";

EXAMPLE
// a Base64 image:
var image = "data:image/png;base64,longlistofcharacters";
var logo;
Bitmap.fromData(image, function (bitmap) {
   logo = bitmap.center();
   stage.update();
});

EXAMPLE
var thumbs = [];
var cols = 5;
var rows = 5;

var image = asset("yourimage.jpg");
var w = image.width/cols;
var h = image.height/cols;
loop(rows, function (r) {
   loop(cols, function (c) {
      // make Bitmap show a different part of the main image each time
      // note: width, height, left, top
      // NOT x, y, width, height like Container
      // left and top specifiy where in an image
      // to start the picture at 0,0 in the Bitmap
      thumbs.push(new Bitmap(image, w, h, c*w, r*h));
   });
});
var tile = new Tile(thumbs, cols, rows, 0, 0, true).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
image - an HTML image URL (may not load right away - see Frame loadAssets)
   or as of 10.8.0 a DisplayObject - this will be turned into a cacheCanvas
   and then the DisplayObject turned back to its previous cached setting
width - (default image width or 100) the width of the resulting Bitmap - will potentially crop an image
   see also height, left and top parameters
   which allow part of an image to be drawn into the Bitmap
   and is handy rather than masking to cut up an image into squares for instance
height - (default image height or 100) the height of the resulting Bitmap
left - (default 0) where on the source image to start the left of the image
top - (default 0) where on the source image to start the top of the image
id - an optional id
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
fromData(data, callback) - STATIC method so use the Bitmap class directly: Bitmap.fromData()
   The callback will receive a reference to the Bitmap after 50ms or 100ms.
   There is no event for making a Bitmap from base64 for instance - so this will have to do.
drawImageData(x, y, sourceX, sourceY, sourceWidth, sourceHeight) - draws the Bitmap's imageData data to the Bitmap
   NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
   See the imageData property which should be set before using the drawImageData() method
   ZIM calls a putImageData method for the HTML Canvas and then transfers this to the Bitmap
   See also https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData - but let ZIM do the work...
   Usually just leave the parameters blank
   x - (default 0) where to start putting the drawing in the x
   y - (default 0) where to start putting the drawing in the y
   sourceX - (default 0) where in the imageData to start using the data in the x
   sourceY - (default 0) where in the imageData to start using the data in the y
   sourceWidth - (default the width of the imageData) how much width of the data to use
   sourceHeight - (default the height of the imageData) how much height of the data to use
cache(width||x, height||y, null||width, null||height, scale, options) - overrides CreateJS cache() and returns object for chaining
   ** Usually you do not want to cache a Bitmap as it is already a Bitmap ;-)
   ** But for applying a filter or using a cacheCanvas to get a context, etc. then you might.
   If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
   width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
   height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
   width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
   height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
   scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
   options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
getColorAt(x,y) - returns the rgba() value at the x and y location
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Bitmap methods, such as:
on(), off(), getBounds(), setBounds(), dispatchEvent(), etc.

PROPERTIES
type - holds the class name as a String
imageData - data for the pixels stored in a data property of an ImageData object
   NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
   The data property is an one dimensional Array with consecutive red, green, blue, alpha values (0-255) for each pixels
   eg. 0,0,0,255,255,255,255,255 is a black pixel with 1 alpha and a white pixel with 1 alpha
   You set this before calling the Bitmap drawImageData() method
   See also https://developer.mozilla.org/en-US/docs/Web/API/ImageData - but let ZIM do the work
draggable - set to true for a default drag() and false for a noDrag()
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
id (fileID in TypeScript) - the filename used in the frame.loadAssets()
   if you add the path the file name then it will be included with the id
   if you add the path with the path parameter, it will not be included with the id
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Bitmap properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.

EVENTS
ZIM adds a pressdown event to match a pressup event - it is the same as mousedown
See the CreateJS Easel Docs for Bitmap events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Bitmap


************************************
[07242] Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, label, frame, style, group, inherit)

Sprite
zim class - extends a createjs.Sprite

DESCRIPTION
A Sprite plays an animation of a spritesheet
which is a set of images layed out in one file.
You play the Sprite with the run() method.
This animates the Sprite over a given time
with various features like playing a labelled animation,
playing animation series,
SEE: https://zimjs.com/spritesheet/index.html
AND: https://zimjs.com/spritesheet/skateboard.html
wait, loop, rewind and call functions.
This actually runs a ZIM animation and animates the frames.

NOTE: A ZIM Sprite handles both an evenly tiled spritesheet - use cols and rows
and an un-evenly tiled spritesheet - use the json parameter.
The json can come from TexturePacker for instance exported for EaselJS/CreateJS
CreateJS Easel Sprite and SpriteSheet docs:
http://www.createjs.com/docs/easeljs/classes/Sprite.html
http://www.createjs.com/docs/easeljs/classes/SpriteSheet.html
You can optionally pass in an existing createjs.SpriteSheet as a parameter.
When you do so, all other parameters are ignored.

NOTE: You can use CreateJS gotoAndPlay(), play(), etc.
but we found the framerate could not be kept
with other animations or Ticker events running.
So we recommend using the ZIM Sprite run() method.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// inside Frame template
// boom.png is a sprite sheet found online
// It has 8 columns and 6 rows that we can visually count
// We can enter a total parameter if it does not end evenly in the grid
// A graphics editor (like Photoshop) could be used to see
// if there is an offset or spacing, etc. and enter those as parameters
// In this case, we do not need to do any of this - just enter the cols and rows

frame.on("complete", function() {
   var spriteImage = frame.asset("boom.png");

   var animation = new Sprite({
      image:spriteImage,
      cols:8,
      rows:6,
      animations:{mid:[10,20], end:[30,40]} // optional animations with labels
      // see CreateJS SpriteSheet docs for the various animation format as there are a few different ones!
   });
   animation.center();
   animation.run(2); // plays the frames of the Sprite over 2 seconds (master time)

   // OR use the label to play the frames listed in animations parameter
   animation.run(1, "mid");

   // OR run a series of animations
   // by passing an array of label objects to the label parameter
   // these each have a time so the master time is ignored
   // they can also have any of the run() parameters
   // if you provide an array of labels, you cannot rewind the overall animation
   animation.run(null, [
      {label:"mid", time:1},
      {label:"end", time:.5, loop:true, loopCount:5, call:function(){zog("loops done");}},
      {startFrame:10, endFrame:20, time:1}
   ]);

   // OR can call a function when done
   animation.run(1, "mid", function(){
      stage.removeChild(animation);
      stage.update();
   });

   // OR can loop the animation
   animation.run({time:2, loop:true}); // see run() parameters for more
});

EXAMPLE
// using Sprite as a texture atlas - or spritesheet of different images
// see: https://zimjs.com/explore/fruit.html
// load in assets and path
var frame = new Frame({assets:["fruit.png", "fruit.json"], path:"assets/"});
frame.on("ready", function() {
   new Sprite({json:frame.asset("fruit.json"), label:"apple"}).center();
   frame.stage.update();
});

EXAMPLE
// Here is an example with CreateJS SpriteSheet data
// robot.png is a sprite sheet made by ZOE based on a Flash swf
// you can also make your own with Photoshop or Texture Packer

frame.loadAssets("robot.png");
frame.on("complete", function() {

   // using ZOE to export swf animation to spritesheet data
   // spritesheet data uses the image name, not the Bitmap itself
   var image = frame.asset("robot.png").image;
   var spriteData = {
      "framerate":24,
      "images":[image],
      "frames":[[0, 0, 256, 256, 0, -54, -10], many more - etc.],
      "animations":{}
   };
   var animation = new Sprite({json:spriteData});
   animation.center();
   animation.run(2); // note, duration alternative to framerate
});

OR
// load in data from external JSON
frame.loadAssets(["robot.json", "robot.png"]);
// ... same as before
var animation = new Sprite({json:frame.asset("robot.json")});
// ... same as before

// see CreateJS SpriteSheet docs for the format of the JSON file
// including various animation formats

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
image - the ZIM Bitmap for the spritesheet
cols - (default 1) - the columns in the spritesheet
rows - (default 1) the rows in the spritesheet
count - (default cols*rows) how many total frames in the spritesheet
offsetX - (default 0) the pixels from the left edge to the frames
offsetY - (default 0) the pixels from the top edge to the frames
spacingX - (default 0) the horizontal spacing between the frames
spacingY - (default 0) the vertical spacing between the frames
width - (default image width) the width including offset and spacing for frames
height - (default image height) the height including offset and spacing for frames
animations - (default null) an object literal of labels holding frames to play
   {label:3, another:[4,10]}
   run(1, "label") would play frame 3 for a second
   run(1, "another") would play frames 4 to 10 for a second
   {unordered:{frames:[1,2,3,22,23,24,"anotherLabel",5,6], next:prevLabel}}
   There are also ways to set speeds - but would recommend dividing into simple labels
   and using the label series technique available with the run() method
json - (default null) a JSON string for a CreateJS SpriteSheet
   If you pass in a json parameter, all other parameters are ignored
   NOTE: remember that JSON needs quotes around the animation properties above:
   {"label":3, "another":[4,10]}
id - (default randomly assigned) an id you can use in other animations - available as sprite.id
   use this id in other animations for pauseRun and stopRun to act on these as well
globalControl - (default true) pauseRun and stopRun will control other animations with same id
spriteSheet - (default null) pass in a CreateJS SpriteSheet to build a Sprite from that
label - (default null) pass in a label to stop on initially - to play from a label use the run({label:val}) method
frame - (default zimDefaultFrame) specify a Frame other than the default frame
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, tweek, id, globalControl)
   The run() method animates the Sprite over an amount of time
   Would recommend this method over the CreateJS play() and gotoAndPlay()
   methods because the framerate for these get overwritten by other stage.update() calls
   With run() you get other nice ZIM animate features as well as follows:
   Returns the object for chaining
   Can be paused with pauseAnimate(true) or unpaused with pauseAnimate(false)
   Can be stopped with stopAnimate() on the Sprite
   supports DUO - parameters or single object with properties below
   time (default 1) - the time in seconds to run the animations (the master time)
   label (default null) - a label specified in the Sprite animations parameter
      if this is an array holding label objects for example:
      [{label:"run", time:1}, {label:"stand", time:2}]
      then the sprite will play the series with the times given and ignore the master time
      Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)
      then this will be the last of the series to run
      rewind is not available on the outside series but is available on an inside series
   call - (default null) the function to call when the animation is done
   params - (default target) a single parameter for the call function (eg. use object literal or array)
   wait - (default 0) seconds to wait before doing animation
   waitedCall - (default null) call the function after a wait time if there is one
   waitedParams - (default null) parameters to pass to the waitedCall function
   loop - (default false) set to true to loop animation
   loopCount - (default 0) if loop is true how many times it will loop (0 is forever)
   loopWait - (default 0) seconds to wait before looping (post animation wait)
   loopCall - (default null) calls function after loop and loopWait (not including last loop)
   loopParams - (default target) parameters to send loopCall function
   loopWaitCall - (default null) calls function after at the start of loopWait
   loopWaitParams - (default target) parameters to send loopWaitCall function
   rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) (not available on label series)
   rewindWait (default 0) seconds to wait in the middle of the rewind
   rewindCall (default null) calls function at middle of rewind after rewindWait
   rewindParams - (default target) parameters to send rewindCall function
   rewindWaitCall (default null) calls function at middle of rewind before rewindWait
   rewindWaitParams - (default target) parameters to send rewindCall function
   rewindTime - (default time) set to a time in seconds to adjust the time to rewind
   rewindEase - (default null) see ease parameter for options for rewind ease
      note - this goes backwards - so "bounceOut" would happen at the end of the rewind
   startFrame - (default null - or 0) the frame to start on - will be overridden by a label with frames
   endFrame - (default null - or totalFrames) the frame to end on - will be overridden by a label with frames
   tweek - (default 1) a factor for extra time on rewind and loops if needed
   id - (default randomly assigned) an id you can use in other animations - available as sprite.id
      use this id in other animations for pauseRun and stopRun to act on these as well
   globalControl - (default true) pauseRun and stopRun will control other animations with same id
pauseRun(state) - pause or unpause the animation (including an animation series)
   state - (default true) when true the animation is paused - set to false to unpause
   returns object for chaining
stopRun() - stop the sprite from animating
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Sprite methods, such as:
play(), gotoAndPlay(), gotoAndStop(), stop(), advance(),
on(), off(), getBounds(), setBounds(), dispatchEvent(), etc.

PROPERTIES
id - an id that you can use in other animations to also be controlled by pauseRun() and stopRun()
frame - get and set the current frame of the Sprite
normalizedFrame - if animations have CreateJS speeds applied, zim handles these by making extra frames
   for example, if a speed is given of .5 then two frames are made (min resulution is .1)
normalizedFrames - an array of total frames after being normalized - really for internal usage
totalFrames - get the total frames of the Sprite - read only
animations - the animations data with labels of frames to animate
running - is the sprite animation being run (includes both paused and unpaused) - read only
runPaused - is the sprite animation paused (also returns paused if not running) - read only
   note: this only syncs to pauseRun() and stopRun() not pauseAnimate() and stopAnimate()
   note: CreateJS has paused, etc. but use that only if running the CreateJS methods
   such as gotoAndPlay(), gotoAndStop(), play(), stop()
draggable - set to true for a default drag() and false for a noDrag()
** bounds must be set first for these to work
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Sprite properties, such as:
currentFrame, framerate, paused, currentAnimation, currentAnimationFrame, spriteSheet,
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.

EVENTS
ZIM adds a pressdown event to match a pressup event - it is the same as mousedown
See the CreateJS Easel Docs for Sprite events, such as:
animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Sprite


************************************
[07897] MovieClip(mode, startPosition, loop, labels, style, group, inherit)

MovieClip
zim class - extends a createjs.MovieClip

DESCRIPTION
A MovieClip adds timelines to a Container.
The timelines are animate() zimTween properties.
The zimTween property returns a CreateJS Tween object.
Primarily made to support Adobe Animate MovieClip export.
*Consider this experimental for the moment...

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var movieClip = new MovieClip();
var circle = new Circle(20, blue).animate({
   props:{scale:3}, time:.1, rewind:true, loop:true
});

// time is in frames NOT in ms - so 100 frames at the Ticker.framerate 60 fps by default is almost 2 seconds
// note that to change the Ticker's framerate use setFPS(mobile, desktop) method
// if you use one number then both mobile and desktop are set to that fps.
// Note that the defaults are 30 fps mobile and 60 fps desktop

movieClip.timeline.addTween(circle.zimTween);
movieClip.play();
movieClip.center();
stage.on("stagemousedown", function() {
movieClip.paused = !movieClip.paused;
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
// from the CreateJS MovieClip docs: http://www.createjs.com/docs/easeljs/classes/MovieClip.html
mode - (default "independent") or single_frame (based on startPosition) or synched (syncs to parent)
startPosition - (default 0) the start position of the MovieClip (*could not get to work)
loop - (default true) set to false not to loop (*did not seem to loop so use loop:true in zim.animate())
labels - (default null) declare label property with position value
   eg. {explode:20} to use with gotoAndPlay("explode") rather than gotoAndPlay(20)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for MovieClip methods, such as:
play(), gotoAndPlay(), gotoAndStop(), stop(), advance(),
on(), off(), getBounds(), setBounds(), dispatchEvent(), etc.

PROPERTIES
type - holds the class name as a String
draggable - set to true for a default drag() and false for a noDrag()
** bounds must be set first for these to work
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for MovieClip properties, such as:
currentFrame, totalFrames, currentLabel, duration, framerate, labels, loop, mode, paused, startPosition, timeline,
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, parent, etc.

EVENTS
ZIM adds a pressdown event to match a pressup event - it is the same as mousedown
See the CreateJS Easel Docs for MovieClip events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[08053] SVGContainer(svg, splitTypes, geometric, showControls, interactive, style, group, inherit)

SVGContainer
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Parses SVG and adds items to a ZIM Container.
Items are created as ZIM Shapes: Circle, Rectangle, Blob, Squiggle.
If geometric is true then Circle and Rectangle are used otherwise Blob is used.
Items can be accessed using svgcontainer.getChildAt(0), etc.
See: https://zimjs.com/svg/
See: https://zimjs.com/explore/svgcontainer.html

An SVG path string can be passed directly to a Squiggle or Blob points parameter
and so avoiding the SVGContainer - see ZIM Squiggle and Blob

WARNING: this should be considered experimental
The idea is that paths from SVG can be made editable in ZIM
or animation, dragging, or Label along paths can be accommodated
As such, not all SVG features will work - no CSS, Text, Gradients, DropShadows, etc.
It is possible that these will be added at some point
See also the ZIM svgToBitmap() function under META to get an exact image of the SVG
Thank you https://github.com/colinmeinke/svg-arc-to-cubic-bezier for the Arc conversion

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var svgContainer = new SVGContainer(frame.asset("sample.svg")).addTo();

// OR

var svg = `<svg  width="150" height="200" xmlns="h t t p ://www.w3.org/2000/svg">
<path id="lineAB" d="M 0 0 l 150 200" stroke="red" stroke-width="3" fill="none" />
</svg>`;
var svgContainer = new SVGContainer(svg).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
svg - an SVG file loaded into a frame.asset() or SVG text
splitTypes - (default false) - set to true to split different types of paths into separate objects
geometric - (default true) - set to false to load Rectangle and Circle objects as Blob objects
showControls - (default true) set to false to start with controls not showing
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shapes
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
processPath(path) - path is an SVG path string - returns a ZIM Blob or Squiggle points array
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
svg - a reference to the SVG text
type - holds the class name as a String
** bounds must be set first for these to work
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[09117] CustomShape(x, y, w, h)

CustomShape
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Used internally to make ZIM Shapes - Circle, Rectangle, Triangle, etc.
Holds the following properties in common:
color, colorRange, borderColor, borderWidth, thickness, dashed, dashedOffset, corner
Holds the following functions in common:  (most methods applied through ZIM 4TH methods)
setColorRange, cloneAll(), linearGradient (depreciated), radialGradient (depreciated)

NOTE: this is NOT a generic Shape - see the zim.Shape() class for that.

EXAMPLE
// would recommend just extending a Container() for custom shapes / objects
// unless properties listed above are needed over multiple projects
// but it could be done with matching various private properties, etc.
// also note that a Blob can make just about any shape...
var Smile = function(color) {
   this.super_constructor(-100,-20,200,70);
   this._color = color;
   this.shape = new Shape().addTo(this);
   // this is an example of how ZIM changes shape color
   // will need to go through and do similar things for borderColor, etc.
   this.colorCommand = this.shape.f(this._color).command;
   this.shape.mt(-100,-20).bt(0,70,0,70,100,-20);
}
extend(Smile, CustomShape);

var smile = new Smile(red).center();
timeout(1, function () {
   smile.color = blue;
   stage.update();
});

SEE - ZIM shapes for details.


************************************
[09341] Circle(radius, color, borderColor, borderWidth, dashed, percent, percentClose, strokeObj, style, group, inherit)

Circle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a circle shape inside a container.
The registration and origin will be the center.
NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle(50, "red");
circle.center();

// or with 10 pixel grey stroke
var circle = new Circle(50, "red", "#666", 10);

// fill the circle with a radial gradient fill
circle.colorCommand.radialGradient([yellow,green], [0, .7], 0, 0, 20, 0, 0, 50);

// make a half circle - or any percent of a circle
var semi = new Circle({radius:200, color:pink, percent:50}).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
radius - |ZIM VEE| (default 50) the radius (from the center to the edge or half the diameter) ;-)
color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
percent - (default 100) set to a percentage of a circle (arc) - registration stays at radius center, bounds shrink to arc
percentClose - (default true) set to false to not close the border of a circle with percent set
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   // note, not all applicable to a Circle - perhaps just ignoreScale...
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
cloneAll(exact, style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
   exact (default false) in theory will copy ZIM VEE values as they are in the original
   see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - gives access to the circle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
radius - gets or sets the radius.
   The radius is independent of scaling and can be different than the width/2
   Setting the radius redraws the circle but any current scaling is kept
** setting widths, heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
mouseChildren - set to false so you do not drag the shape inside the circle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Circle


************************************
[09552] Rectangle(width, height, color, borderColor, borderWidth, corner, dashed, strokeObj, style, group, inherit)

Rectangle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a rectangle shape inside a container.
The registration and origin will be top left corner.
NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var rect = new Rectangle(200, 100, "blue");
rect.center();

// or with rounded corners:
var rect = new Rectangle({width:200, height:100, color:"blue", corner:20});

// or with 2 pixel white stroke
var rect = new Rectangle(200, 100, "blue", "white", 2);

// fill the rectangle with a Bitmap fill assuming icon has been loaded - not the image property
rect.colorCommand.bitmap(frame.asset("icon.png").image);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - |ZIM VEE| (default the height if provided else 100) the width
height - |ZIM VEE| (default the width if provided else 100) the height
color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
corner - (default 0) the round of corner
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
   exact (default false) in theory will copy ZIM VEE values as they are in the original
   see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - gives access to the rectangle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
mouseChildren - set to false so  you do not drag the shape inside the rectangle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Rectangle


************************************
[09749] Triangle(a, b, c, color, borderColor, borderWidth, center, adjust, dashed, strokeObj, style, group, inherit)

Triangle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a triangle shape inside a container using three line lengths.
Passing one length parameter makes an equilateral triangle.
Passing two length parameters makes an isosceles triangle.
Passing -1 as the last length parameter makes a 90 degree triangle.
NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var tri = new Triangle(200, null, null, "green");
tri.center();

// all three sides specified - tall pointy triangle with yellow stroke of 10 pixels
var tri = new Triangle(100, 200, 200, "green", "yellow", 10);

// here we adjust so rotation looks better
var tri = new Triangle({a:200, color:"green", adjust:30});
tri.center();
tri.animate({obj:{rotation:360}, time:3, ease:"linear", loop:true});

// here we fill the triangle with a linear gradient fill
triangle.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, triangle.width, 0);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
a, b and c - |ZIM VEE| (default 100) the lengths of the sides
   a will run horizontally along the bottom
   b is upwards and c is back to the origin
   if c is set to -1 will assume a 90 angle
color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
center - (default true) puts the registration point to the center
adjust - (default 0) pixels to bring center towards vertical base
   the actual center is not really the weighted center
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
   strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
   exact (default false) in theory will copy ZIM VEE values as they are in the original
   see main class for style, group, inherit parameters
exact (default false) in theory will copy ZIM VEE values as they are in the original
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - gives access to the triangle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
one, two, three - read only - points with x, y properties for bottom left, bottom right, top right
angles - read only - Array of angles [bottom left, bottom right, top right]
adjusted - read only - the value of the adjust parameter or 0 if no adjust was supplied
mouseChildren - set to false so  you do not drag the shape inside the triangle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Triangle


************************************
[10008] Poly(radius, sides, pointSize, color, borderColor, borderWidth, dashed, strokeObj, style, group, inherit)

Poly
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a regular polygon with radius like a Circle.
The number of sides can be set as well as a pointSize that will make star-like shapes
The registration and origin will be the center.
NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var poly = new Poly(200, 5, 0, pink).center(); // pentagon

var poly = new Poly(200, 5, .6, pink).center(); // five point star

new Poly(200, 8, 2.5, purple)
   .sca(1.1).center().sha("rgba(0,0,0,.3)", 10,10,5); // backing...
new Poly(200, 8, 2.5, pink)
   .center();
new Label({text:"P O L Y", color:green, font:"impact", outlineColor:blue, size:75, shiftVertical:10})
   .sha().rot(-25).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
radius - |ZIM VEE| (default 50) the radius (from the center to the edge or half the diameter) ;-)
sides - |ZIM VEE| (default 5) the number of sides
pointSize - |ZIM VEE| (default 0) a factor that will indent or outdent the sides to form stars
   0 is no indent - 1 is a complete indent - which will have no fill and if there is a border will look like a stick figure
   beyond 1 is cool - it overlaps on itself and makes multiple patterns
color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
   exact (default false) in theory will copy ZIM VEE values as they are in the original
   see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
radius - gets or sets the radius.
   The radius is independent of scaling and can be different than the width/2
   Setting the radius redraws the circle but any current scaling is kept
sides - get or set the sides of the shape
pointSize - get or set the point size of the shape (can be animated too)
shape - gives access to the poly shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
** setting widths, heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
mouseChildren - set to false so you do not drag the shape inside the circle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[10241] Line(length, thickness, color, startHead, endHead, dashed, strokeObj, lineType, lineOrientation, curveH, curveV, points, style, group, inherit)

Line
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a straight line with a length and thickness.
See also ZIM Squiggle() with points:[[0,0], [100,0] for instance for Bezier handles, etc.
See also ZIM Shape() for custom lines, curves, etc.
The registration and origin will be at the start point at the left.
Start point and end point can be adjusted in various ways to accommodate animation, etc.
NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var line = new Line(500).center(); // centered line

EXAMPLE
var line = new Line({points:[[0,0],[100,0],[100,100],[200,100]]}).center(); // over, up, over, etc.
// or with quadratic curves:
// 100,0 is control point to x,y of 100,50
var line = new Line({points:[[0,0],[100,0,100,50],[100,100,200,100]]}).center(); // over, up, over
// or with bezier curves:
// 100,0 is first control point, 100,0 is second control point and 100,50 is final point
var line = new Line({points:[[0,0],[100,0,100,0,100,50],[100,100,100,100,200,100]]}).center(); // over, up, over

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
length - |ZIM VEE| (default 100) the length of the line - see also length property and start and end point properties
thickness - |ZIM VEE| (default 3) the size of the stroke in pixels
color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
startHead - |ZIM VEE| (default "none") the start head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this
endHead - |ZIM VEE| (default "none") the end head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
lineType - (default "straight") - by default the line is a straight line between points
   set to "corner" to draw only horizontal and vertical lines at 90 degree angles between lines (see lineOrientation)
   set to "curve" to draw horizontal and vertical lines with curves between lines (see lineOrientation)
lineOrientation - (default "auto") - for lineType other than straight automatically decide between horizontal or vertical
   set to "horizontal" to draw two horizontal lines and one vertical line between points
   set to "vertical" to draw two vertical lines and one horizontal line between points
curveH - (default 100) - for "curve" lineType this is the horizontal distance of the curve
curveV - (default 100) - for "curve" lineType this is the vertical distance of the curve
points - (default null) an Array of points for the line which will ignore length and lineType parameters
   points in the array can have the following formats (a mix is okay too):
   [x,y] points for straight lines.  This format should also be used for first point
   [cpX, cpY, x, y] for quadratic curve to with a single control point followed by the destination point
   [cp1X, cp1Y, cp2X, cp2Y, x, y] for Bezier curve to with start and end control points followed by the destination point
   // see the ZIM Shape docs (or https://www.createjs.com/docs/easeljs/classes/Graphics) for details on the curves
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setPoints(a, b, c, d) - pass in two ZIM Points or four numbers to set start points and end points or an array of points
   this will not change the x and y of the shape
   also see startPoint, endPoint, startX, startY, endX, endY properties
   if an array is used the points are remade like when made with the points parameter
from(a, b) - pass in a ZIM Point or two numbers to set the start point
to(a, b) - pass in a ZIM Point or two numbers to set the end point
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
   exact (default false) in theory will copy ZIM VEE values as they are in the original
   see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** below will not change the x and y of the shape
** if points is being used: length, startPoint, start and end X and Y, endPoint and angle are ignored - use the point property
length - gets or sets the length of the line - will grow from its registration point
startPoint - (ZIM Point or x,y object) get or set the start point
startX - get or set the start x point - allows for animation
startY - get or set the start y point - allows for animation
endPoint - (ZIM Point or x,y object) get or set the end point
endX - get or set the end x point - allows for animation
endY - get or set the end y point - allows for animation
startHead - get or set the start head - see startHead parameter
endHead - get or set the end head - see endHead parameter
angle - gets (not sets) the current angle relative to the line (does not include line rotation)
points - get and set the points array (see points parameter) - ignoring all settings above
** above will not change the x and y of the shape
shape - gives access to the line shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   depreciated - see ZIM GradientColor, RadialColor and BitmapColor
thickness - get and set the stroke size in pixels
thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
lineType - read only access to type of line "straight", "corner", "curve"
** setting widths, heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
mouseChildren - set to false so you do not drag the shape inside the circle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[10876] Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)

Squiggle
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a squiggly line with a number of points.
The points have Bezier controls - little handles that change the shape of the line.
The type of control can be specified overall and individually - and can be hidden or shown
The type of control can be changed by double clicking the point - colors of the handles will change
Points can be added by clicking on the line or removed by SHIFT clicking a point.
CTRL Z will undo adding or removing a point
The shape of the line can be recorded with the recordData() method and recreated with the setData() method
The Squiggle is set by default to show and hide controls when clicked
It is also draggable by default when the controls are showing
It can be set to copy with a shift click

MULTIPLE SELECT
Multiple points can be selected and dragged or moved with the keyboard arrows (moves 10 pixels with shift key down)

NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var squiggle = new Squiggle().center(); // makes a line with default 4 points with Bezier controls
var line = new Squiggle({points:2, controlType:"none"}).pos(100,100); // makes a diagonal straight line that is editable

EXAMPLE
// Animate along a Squiggle
// see https://zimjs.com/explore/squiggleAnimate.html for more
var line = new Squiggle().center();
new Circle(10, red).addTo().animate({path:line}, 1000);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| - (default green) the line color as any CSS color including "rgba()" for alpha
thickness - (default 2) the thickness of the line in pixels
points - (default 5) a number of points to start with to make the shape
   OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)
   OR an array of points as follows:
   [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
   controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
   rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location
   circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
   controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
length - (default 300) the default length of line used to create the squiggle (also specifies the squiggle's bounds(0, 0, length, thickness))
controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
controlType - (default "straight") one of four String values as follows:
   none - there are no control rectangles (they are actually set at 0,0).  This makes a corner at the circle point.
   mirror - the control rectangles reflect one another about the point circle - lengths are kept even
   straight - the control rectangles keep a straight line through the point circle but length is independent
   free - the control rectangle moves independently from the other control rectangle
   ** The controlType can be specified for each point - see the points parameter
   ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
showControls - (default true) set to false to start with controls not showing - can change this after with controlsVisible property or showControls() and hideControls() methods
lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
allowToggle - (default true) set false to let turn off clicks showing and hiding controls
move - (default true) set to false to disable dragging when controls are showing
   can also set to "always" to allow movement when controls are not showing
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
onTop - (default true) set to false to not bring shape to top of container when dragging
stickColor - (default "#111") set the stick color of the controls
selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true
selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control
editPoints - (default true) lets user add points by pressing on shape path or remove points by shift click or hold
   set to "anywhere" to let users add points anywhere - will add points with controlType:"none"
   set to false to not allow adding or removing points with shift click or hold
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
approximateBounds(num, showPoints) - update the bounds based on a Rectangle
   that surrounds the number of points (default 80) distributed around the object path
   set showPoints to true to draw little dots on points
   use outline() after object has been added to the stage to see the bounds
addPoint(percent, controlType) - add a point at a percent (100) of the total curve
   this is handy to make path have the same number of points for animate() path tweens
   controlType can be as specified in main points parameter
   returns object for chaining
addPoints(num, controlType, startPoint, spread, dataOnly, points) - add num points between existing points
   controlType can be as specified in main points parameter
   specify a startPoint to add points between the startPoint and the next point (one segment of points)
   spread (default false) set to true to spread points evenly around path rather than evenly between segments
   dataOnly and points are used internally
   returns object for chaining
interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween
   used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)
   specify a startPoint to get points between the startPoint and the next point (one segment of points)
   spread (default false) set to true to spread number of points around path rather equal number between segments
   points (default all points) the points to work with in the same format as the points property
   even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution
   returns an array of point objects with x, y properties and an r property for ratio of distance along path
recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
   if toJSON (default false) is set to true, the return value is a JSON string
   the points data comes from the points property
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
   if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
   the points data is parsed with the set setPoints() so the number of points should be the same
   returns object for chaining
recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property
   popup - (default false) set to true to open a zim Pane (squiggle.pane) with the points in a zim TextArea (squiggle.textArea) (click off to close)
   NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Squiggle use JSON.parse(output);
   NOTE: using zog(JSON.stringify(squiggle.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
setPoints(data) - sets the Squiggle points to the data from recordPoints
   This does not remake the Squiggle but rather shifts the controls so the number of points should be the same
changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
   accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
   passing in null as the index will change all points to the specified properties
   the update parameter defaults to false so set to true to show update or call update() below
   this is so multiple changes can be batched before calling update - for instance when animating blobs.
transformPoints(transformType, amount, x, y) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining
   Note - does not adjust original Bounds
   transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"
   amount - the amount to transform
   x, y - (default 0, 0) the x and y position to transform about
update(normalize) - update the Squiggle if animating control points, etc. would do this in a Ticker
   set normalize (default false) to true to use pointsAdjusted for rotated and scaled points
   and if animating along the path after setting rotation or scale on point
   just leave out if only animating points
showControls() - shows the controls (and returns squiggle) also see controlsVisible property
hideControls() - hides the controls (and returns squiggle) also see controlsVisible property
toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)
   or pass in true to show controls or false to hide controls
traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!
   set start point greater than end point to traverse backwards
   will dispatch a "traversed" event when done
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
getPointAngle(index) - gets the angle made by the tangent at the index provided
getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]
   used internally for animating to path and adding removing Bezier points
getAdjacentSegmentData(index) - returns an array of two arrays:
   The first is an array of cubic Bezier points for segments adjacent and including the provided point index
   each element is in the form of [point1, controlPoint1, controlPoint2, point2]
   The second is an array of starting point indexes for the segments that were tested
   used internally to drag an animation along the path
getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided
   along with x and y values, the point has a z value that is the index of the squiggle point before the calculated point
   if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point
   ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment
   segmentRatios and segmentPoints will be calculated if not provided
   used internally for animating along the path - if lockControls is true, only animate will precalculate these values
linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to thicknessCommand linearGradient method (see properties below)
radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to thicknessCommand radialGradient method (see properties below)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact, commands) - makes a copy of the object
   exact (default false)
      ZIM VEE (Pick) values are active in clones unless exact is set to true
      For instance, if the object's color is [blue, green]
      then its clone might be blue or green - which could be different than the original
      If exact is set to true then the clone will be the color of the original object
   commands (default false) makes clones with current color and borderColor commands of object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - gives access to the shape of the squiggle
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
stickColor - get or set the stickColor - requires an update() to see changes
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
thickness - get and set the stroke size in pixels
thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
dashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
num - get the number of points - to set, use the points property
points - get or set the points array of the Squiggle in the same format as the points parameter:
   [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
pointsAdjusted - get points with any point rotation converted to 0 - see update(true)
pointControls - get an array of controls (a container) - use this to animate controls
pointCircles - get an array of control circles - use this to place some other object at the point
pointObjects - get an array of point objects for each point in the following format:
   [[control, circle, rect1, rect2, controlType], [etc.]]
   control - the container for the control that holds the circle and rectangles (also see pointControls)
   circle - the control point circle (also see pointCircles)
   rect1 - the first control point rectangle
   rect2 - the second control point rectangle
   controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
   NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
   NOTE: the update() method must be called if manually changing the control positions or type
   NOTE: if constantly animating the controls then use a Ticker.add(function(){squiggle.update();})
   NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options
addPointFactor - (default 20) used when placing new points along edge (editPoints is true)
   divides the distance between points by this amount - the smaller the more accurate but also slower
addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge
segmentPoints - a read-only array of cubic Bezier points for each segment
   each element is in the form of [point1, controlPoint1, controlPoint2, point2]
   used internally to animate to the path and add and remove Bezier points
segmentRatios - a read-only array of cumulative ratio lengths of segments
   for instance the default five points (four segments) is [.25, .5, .75, 1]
   used internally to animate to the path and attribute proportional time to each segment
controls - access to the container that holds the sets of controls
   each control is given a read-only num property
sticks - access to the container that holds the control sticks
lastSelected - access to the last selected (or created) control container
lastSelectedIndex - the index number of the last selected controls
controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
toggled - read-only Boolean property as to whether picker is showing
types - get or set the general array for the types ["mirror", "straight", "free", "none"]
   changing this or removing a type will adjust the order when the user double clicks the points to change their type
   this is not an array of types for each point - see the points property to access the types of each point
lockControls - Boolean to lock controls from being adjusted or not
lockControlType - Boolean to lock the type of the controls in their current state or not
allowToggle - Boolean to get or set clicking to show and hide controls
move - Boolean to drag or not drag Squiggle when controls are showing
   can also set to "always" to allow movement when controls are not showing
onTop - get or set the onTop
selectPoints - get or set whether points can be selected
interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc.
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS
will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event for when the bezier controls are adjusted (pressup only)
   if monitoring constant change is needed add a pressmove event to Squiggle.controls
   the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true
dispatches an "update" event if the points are changed or a point is added or removed
   this removes all listeners on the old shape and controls
   so any custom listeners on shape and controls will need to be re-applied - use the update event to do so
dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE
https://zimjs.com/squiggle
https://www.youtube.com/watch?v=BA1bGBU4itI&list=PLCIzupgRt1pYtMlYPtNTKCtztFBeOtyc0
Note the points property has been split into points and pointObjects (and there have been a few property changes) since the time of the video


************************************
[12695] Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)

Blob
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a blob shape inside a container using a number of points.
The points have Bezier controls - little handles that change the shape of the Blob.
The type of control can be specified overall and individually - and can be hidden or shown
The type of control can be changed by double clicking the point - colors of the handles will change
Points can be added by clicking on the shape or removed by SHIFT clicking a point.
CTRL Z will undo adding or removing a point
The shape of the Blob can be recorded with the recordData() method and recreated with the setData() method
The Blob is set by default to show and hide controls when clicked
It is also draggable by default when the controls are showing

MULTIPLE SELECT
Multiple points can be selected and dragged or moved with the keyboard arrows (moves 10 pixels with shift key down)

NOTE: mouseChildren is turned to false for all zim Shape containers.
NOTE: with the ZIM namespace zns = false, this overwrites a JS Blob - so the JS Blob is stored as document.Blob

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var blob = new Blob(); // makes a circle with default 4 points with Bezier controls
blob.center();

var moreBlob = new Blob({
   points:12, // 12 points for more complex shape
}).center();

var specifiedBlob = new Blob({
   color:purple,
   controlType:"free", // free will be default control type (rather than "straight")
   points:[
      // the control position x, y
      // then three point positions inside the control - so relative to the control position
      // 1. circle position x, y (usually the same as the control position - so 0,0)
      // 2. the location of the first control rectangle x and y
      // 3. the location of the second control rectangle x and y
      // then an optional specific type of control that overrides the controlType parameter (or the default type of "straight")
      [-100,-100,-100,100,100,-100,0,0,"mirror"], // this will be type "mirror"
      [100,-100,100,0,-50,0], // this will be type "free" because controlType parameter
      [100,100], // these will be type "none" because no dimensions (or dimensions 0) specified for controls
      [-100,100]
   ]
}).centerReg();

EXAMPLE
// Transform the original points of a Blob
// If you rotate or scale, this affects the control points - the little rectangles rotate or they scale
// To avoid this, the points themselves can be transformed (scaleX, scaleY, scale, rotation, x, y)
// This makes a square and scales it bigger without affecting control size or stroke size (if there were a stroke)
// Note the default number of points is 4 but they are arranged at the top, bottom and sides - so would make a diamond with just controlType:"none"
new Blob({controlType:"none"}).transformPoints("rotation", 45).transformPoints("scale", 2).center();

EXAMPLE
// make a Blob the shape of basic ZIM shapes
// this overrides the path parameter
new Blob({shape:"circle"}).pos(200,200);
new Blob({shape:new Rectangle(100,200)}).center();
new Blob({shape:new Triangle()}).transformPoints("rotation", 90).pos(50,50,true,true);

EXAMPLE
// Animate along a Blob
// see https://zimjs.com/explore/blobAnimate.html for more
// see https://zimjs.com/explore/blobAnimate2.html for more
var path = new Blob().center();
new Circle(10, red).addTo().animate({path:path}, 1000);

EXAMPLE
// Animate one Blob into another
var targetBlob = new Blob({points:"rectangle"});
var blob = new Blob({radius:50, points:"circle", interactive:false})
   .pos(200,200)
   .transformPoints("rotation", -45) // to better tween to rectangle
   .animate({
      props:{shape:targetBlob},
      time:1,
      rewind:true,
      loop:true
   });

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| - (default green) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
num - get the number of points - to set, use the points property
points - (default 4) a number of points to start with to make the shape
   OR a shape string of "circle", "rectangle" or "triangle"
   OR a ZIM Circle, Rectangle or Triangle with any dimensions that will be matched
   OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)
   OR an array of points as follows:
   [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
   controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
   circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
   rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location
   controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
radius - (default 100) the default radius of the circle used to create the blob (also specifies the blob's bounds(-radius, -radius, radius*2, radius*2))
controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
controlType - (default "straight") one of four String values as follows:
   none - there are no control rectangles (they are actually set at 0,0).  This makes a corner at the circle point.
   mirror - the control rectangles reflect one another about the point circle - lengths are kept even
   straight - the control rectangles keep a straight line through the point circle but length is independent
   free - the control rectangle moves independently from the other control rectangle
   ** The controlType can be specified for each point - see the points parameter
   ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
showControls - (default true) set to false to start with controls not showing - can change this after with control property or showControls() method
lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
   If a handleSize of 0 is chosen, then the sticks will disappear too
allowToggle - (default true) set false to let turn off clicks showing and hiding controls
move - (default true) set to false to disable dragging when controls are showing
   can also set to "always" to allow movement when controls are not showing
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
   or set to an array of line size then space size, etc.
   eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
onTop - (default true) set to false to not bring shape to top of container when dragging
stickColor - (default "#111") set the stick color of the controls
selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true
selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control
editPoints - (default true) lets user add points by pressing on shape path.
   set to "anywhere" to let users add points anywhere - will add points with controlType:"none"
   set to false to not allow adding or removing points with click or shift click
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
approximateBounds(num, showPoints) - update the bounds based on a Rectangle
   that surrounds the number of points (default 80) distributed around the object path
   set showPoints to true to draw little dots on points
   use outline() after object has been added to the stage to see the bounds
addPoint(percent, controlType) - add a point at a percent (100) of the total curve
   this is handy to make path have the same number of points for animate() path tweens
   controlType can be as specified in main points parameter
   returns object for chaining
addPoints(num, controlType, startPoint) - add num points between existing points
   controlType can be as specified in main points parameter
   specify a startPoint to add points between the startPoint and the next point (one segment of points)
   spread (default false) set to true to spread points evenly around path rather than evenly between segments
   dataOnly and points are used internally
   returns object for chaining
interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween
   used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)
   specify a startPoint to get points between the startPoint and the next point (one segment of points)
   spread (default false) set to true to spread number of points around path rather equal number between segments
   points (default all points) the points to work with in the same format as the points property
   even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution
   returns an array of point objects with x, y properties and an r property for ratio of distance along path
recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
   if toJSON (default false) is set to true, the return value is a JSON string
   the points data comes from the points property
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
   if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
   the points data is parsed with the set setPoints() so the number of points should be the same
   returns object for chaining
recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property
   popup - (default false) set to true to open a zim Pane (blob.pane) with the points in a zim TextArea (blob.textArea) (click off to close)
   NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Blob use JSON.parse(output);
   NOTE: using zog(JSON.stringify(blob.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
setPoints(data) - sets the Blob points to the data from recordPoints
   This does not remake the Blob but rather shifts the controls so the number of points should be the same
changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
   accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
   passing in null as the index will change all points to the specified properties
   the update parameter defaults to false so set to true to show update or call update() below
   this is so multiple changes can be batched before calling update - for instance when animating blobs.
transformPoints(transformType, amount, x, y) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining
   Note - does not adjust original Bounds
   transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"
   amount - the amount to transform
   x, y - (default 0, 0) the x and y position to transform about
update(normalize) - update the Blob if animating control points, etc. would do this in a Ticker
   set normalize (default false) to true to use pointsAdjusted for rotated and scaled points
   use true for manually editing points after setting rotation or scale on point
   just leave out if only animating points
showControls() - shows the controls (and returns blob) - or use  blob.controlsVisible = true property
hideControls() - hides the controls (and returns blob) - or use blob.controlsVisible = false property
toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)
   or pass in true to show controls or false to hide controls
traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!
   set start point greater than end point to traverse backwards
   will dispatch a "traversed" event when done
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
getPointAngle(index) - gets the angle made by the tangent at the index provided
getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]
   used internally for animating to path and adding removing Bezier points
getAdjacentSegmentData(index) - returns an array of two arrays:
   The first is an array of cubic Bezier points for segments adjacent and including the provided point index
   each element is in the form of [point1, controlPoint1, controlPoint2, point2]
   The second is an array of starting point indexes for the segments that were tested
   used internally to drag an animation along the path
   will wrap around the blob if needed
getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided
   along with x and y values, the point has a z value that is the index of the blob point before the calculated point
   if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point
   ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment (the first point)
   segmentRatios and segmentPoints will be calculated if not provided
   used internally for animating along the path - if lockControls is true, only animate will precalculate these values
linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to colorCommand linearGradient method (see properties below)
radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to colorCommand radialGradient method (see properties below)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact, commands) - makes a copy of the object
   exact (default false)
      ZIM VEE (Pick) values are active in clones unless exact is set to true
      For instance, if the object's color is [blue, green]
      then its clone might be blue or green - which could be different than the original
      If exact is set to true then the clone will be the color of the original object
   commands (default false) makes clones with current color commands of object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - gives access to the shape of the blob
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
   eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
   See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
stickColor - get or set the stick color of the controls - requires an update() to see changes
points - get or set the points array of the Blob in the same format as the points parameter:
   a number, a shape string ("circle", "rectangle", "triangle"), a ZIM Circle, Rectangle, Triangle
   or an array as follows:
   [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
pointsAdjusted - get points with any point rotation converted to 0 - see update(true)
pointControls - get an array of controls (a container) - use this to animate controls
pointCircles - get an array of control circles - use this to place some other object at the point
pointObjects - get an array of point objects for each point in the following format:
   [[control, circle, rect1, rect2, controlType], [etc.]]
   control - the container for the control that holds the circle and rectangles (also see pointControls)
   circle - the control point circle (also see pointCircles)
   rect1 - the first control point rectangle
   rect2 - the second control point rectangle
   controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
   NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
   NOTE: the update() method must be called if manually changing the control positions or type
   NOTE: if constantly animating the controls then use a Ticker.add(function(){blob.update();})
   NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options
addPointFactor - (default 20) used when placing new points along edge (editPoints is true)
   divides the distance between points by this amount - the smaller the more accurate but also slower
addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge
segmentPoints - a read-only array of cubic Bezier points for each segment
   each element is in the form of [point1, controlPoint1, controlPoint2, point2]
   used internally to animate to the path and add and remove Bezier points
segmentRatios - a read-only array of cumulative ratio lengths of segments
   for instance the default four points is [.25, .5, .75, 1]
   used internally to animate to the path and attribute proportional time to each segment
controls - access to the container that holds the sets of controls
   each control is given a read-only num property
sticks - access to the container that holds the control sticks
lastSelected - access to the last selected (or created) control container
lastSelectedIndex - the index number of the last selected controls
controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
types - get or set the general array for the types ["mirror", "straight", "free", "none"]
   changing this or removing a type will adjust the order when the user double clicks the points to change their type
   this is not an array of types for each point - see the points property to access the types of each point
lockControls - Boolean to lock controls from being adjusted or not
allowToggle - Boolean to get or set clicking to show and hide controls
move - Boolean to drag or not drag Blob when controls are showing
   can also set to "always" to allow movement when controls are not showing
lockControlType - Boolean to lock the type of the controls in their current state or not
onTop - get or set the onTop property
selectPoints - get or set whether points can be selected
interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc.
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS
will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event for when the bezier controls are adjusted (pressup only or moving with keys - thanks Yui Kim for find)
   if monitoring constant change is needed add a pressmove event to Blob.sets
   the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true
dispatches an "update" event if the points are changed or a point is added or removed
   this removes all listeners on the old shape and controls
   so any custom listeners on shape and controls will need to be re-applied - use the update event to do so
dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[14587] Flare(color, borderColor, borderWidth, crossAngle, thickness, thicknessA, thicknessB, pin, startX, startY, lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close, dashed, strokeObj, spineColor, spineBorderWidth, spineBorderColor, spineDashed, spineStrokeObj, closeColor, closeBorderWidth, closeBorderColor, closeDashed, closeStrokeObj, style, group, inherit)

Flare
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a flare shape - a shape with a gradual widening like flared pants or skirts.
The shape defaults to a horizontal rectangle flared outwardly to the right.
The flare angleA and angleB can be specified at any angle negative or positive.
The flare axis or spine can be at any angle to the horizontal positive in the x.
The cross or end angles can be specified relative to a normal the spine so 0 is -90.
Different color and border options are available and editable as properties.

More than one flare can be created in the same shape - these are called segments.
Multiple Flare objects can be easily combined into a ZIM MultiFlare
and a special FlareBox can be used to place flares or multiFlares around a rectangle
to be used for backings on buttons, pictures, etc.

See https://zimjs.com/ten/flare.html for examples of a 3D wall, a rocket and a button frame

NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Flare().center();

// a Rocket
var rocket = new Flare({
   thickness:100,
   angles:-90, // all segment angles will point up
   lengths:[40,.5,100,150,105],
   anglesA:[-20,89,-12,0,-22], // anglesB will be mirrored by default
   color:new GradientColor([dark,silver,dark],[.1,.6,.9],-50,0,50,0),
   cross:true // add a line at segment borders
}).center();

// see also MultiFlare and FlareBox examples

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)

color - (default black) the color of the flare
   if null and a border is speficied the color will be transparent
borderColor - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
crossAngle - (default 0) the angle from the normal of the spine
   so if the spine goes to the right at 0 degrees then 0 crossAngle starts at -90 and goes positive clockwise
   a crossAangle of -45 would look like a picture frame bevel
   if the flare starts at the top left corner of a rectangle
thickness - (default 20) the thickness at the start of the flare assuming 0 crossAngle
   this will be divided evenly to thicknessA on one side of the spine and thicknessB on the other side of the spine
thicknessA - (default null) - will be set to half the thickness if thicknessB is not set otherwise thickness-thicknessB
thicknessB - (default null) - will be set to half the thickness if thicknessA is not set otherwise thickness-thicknessA
pin - (default null) - set to a segment number to set registration point at the start of the segment
   Pin is used with MultiFlare to align flares at pinned segments
   Pin is used with FlareBox to place pinned segments at any of the four corners of the box
   When doing so, the Flare will be automatically rotated (corner number - pin number) * 90
   This can be overriden by rotating the flare to the desired rotation after creation
startX - (default 0) shift the start of the flare in the x from the registration point (note, pin will reset registration)
startY - (default 0) shift the start of the flare in the y from the registration point (note, pin will reset registration)
lengths - (default [200]) an array of spine lengths
angles - (default [0]) an array of angles (degrees) for the spines relative to 0 along the positive x axis
anglesA - (default [10]) an array of relative angles to the left of the current spine when heading along the spine
   so if the spine heads to the right, angleA is positive from the spine upwards
   think of these as how much the shape flares out from the spine on one side
anglesB - (default anglesA) an array of relative angles to the right of the current spine when heading along the spine
   so if the spine heads to the right, angleB is positive from the spine downwards
   think of these as how much the shape flares out from the spine on another side
anglesEnd - (default [0]) an array of angles at the end of each segment from the normal of each segment spine
   so if the spine goes to the right at 0 degrees then a 0 anglesEnd is perpendicular to the spine
   an anglesEnd of 45 would look like a picture frame bevel
   as the segments are placed around the picture frame clockwise
   note: end angles greatly change the look of flared segments
      poorly chosen angles can lead to flares crossing or massively diverging
      good choices depend on the length of the flares, the spine angles and the flare angles
      generally, a trial and error technique is the easiest to find the desired solution
cross - (default true) draw a crossing line at each segment - this draws each segment as a closed path
crossColors - (default null) an array of colors for each segment if cross is true
close - (default false) join the end of the last segment to the start of the first segment
dashed - (default false) set the dashed of the border if the borderColor or borderWidth is specified
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:2, ignoreScale:false}) set to adjust stroke properties
   caps options: "butt", "round", "square" or 0,1,2
   joints options: "miter", "round", "bevel" or 0,1,2
   miterLimit is the ration at which the mitered joint will be clipped
   ignoreScale set to true will draw the specified line thickness regardless of object scale
spineColor - (default null) as the spine is drawn, fill the shape it makes with this color
   this can create a picture frame effect as the spine color may hide half the flare for each segment
spineBorderWidth - (default null) the width of the spine
spineBorderColor - (default null) the color of the actual spine
spineDashed - (default false) set to true for dashed spine (if spineBorderWidth or spineBorderColor set)
spineStrokeObj - (default strokeObject) see strokeObject parameter for details
closeColor - (default color) the color of the segment created if closing the flare
closeBorderWidth - (default borderWidth) the borderWidth of the closing segment if closing the flare
closeBorderColor - (default borderColor) the borderColor of the closing segment if closing the flare
closeDashed - (default false) set to true for dashed closed segment (if closeBorderWidth or closeBorderColor set)
closeStrokeObj - (default strokeObject) see strokeObject parameter for details
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close) |ZIM DUO| - add segment(s) to the Flare - returns object for chaining
   see segment parameters for details - returns object for chaining
remake() - remake the Flare segments after setting properties
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
shape - access to the ZIM Shape for the flare(s)
spineShape - access to the ZIM Shape for the spine if spine is true
closeShape - access to the ZIM Shape for the closing segment if close is true
pin - get or set the pin number - which spine has the registration point
   see the pin parameter for more details
points - access to array of flare shape points {x,y}
   if not close - around outside then around inside
   if close - around each segment
pinPoints - access to array of spine points {x,y} and then to final end spine point
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
borderColor - get and set the stroke color
borderWidth - get and set the stroke size in pixels
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
closeColor - get and set the fill color of the close segment
closeBorderColor - get and set the stroke color of the close segment
closeBorderWidth - get and set the stroke size in pixels of the close segment
closeBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
spineColor - get and set the fill color of the spine shape
spineBorderColor - get and set the stroke color of the spine shape
spineBorderWidth - get and set the stroke size in pixels of the spine shape
spineBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html

** the following properties can be read or changed
** if changed, the remake() method must be run to see changes
** see the Flare parameters for definitions
thicknessA - number
thicknessB - number
cross - boolean
close - boolean
lengths - array
angles - array
anglesA - array
anglesB - array
anglesEnd - array
crossColors - array

** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
mouseChildren - set to false so  you do not drag the shape inside the rectangle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[15327] MultiFlare(flares, pins, angles, endToEnd, style, group, inherit)

MultiFlare
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Joins multiple Flare objects in one container
at the pin points of the flares or end to end.
See also ZIM Flare and ZIM FlareBox.

NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// a fan of legs with feet!
var flare = new Flare({lengths:[100,100,20,8],anglesA:[5,-5,60],anglesB:[5,-5,0]})
var multi = new MultiFlare().center();
loop(12, function(i) {
   multi.add(flare.rot(i*360/12))
});

// or prepare flares and angles ahead of time
var flares = [];
var angles = [];
loop(12, function(i) {
   flares.push(flare.clone());
   angles.push(i*360/12);
});
new MultiFlare(flares, null, angles).center();

// a ring of beads using endToEnd
var flare = new Flare({crossAngle:-360/12, lengths:[50,20,5,20,50],anglesA:[5,60,0,-60,-5]})
var flares = [];
var angles = [];
loop(12, function(i) {
   flares.push(flare.clone());
   angles.push(i*360/12);
});
new MultiFlare(flares, null, angles, true).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
flares - (default null) an array of ZIM Flares objects to add - also see add() method
pins - (default null) an array of pin indexes for the flares
   pins will set the registration point for each flare at whatever segment matches the pin index
angles - (default null) an array angles for the flares
endToEnd - (default false) set to true to locate each first segment point of the flare at the last segment point of the last flare
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(flares) - add an array of flares or a single flare to MultiFlare
   add() redraws the whole flare so for many, make an array to start and pass it in as an argument
remove(flares) - remove an array of flares or a single flare to MultiFlare
   remove() redraws the whole flare so for many, make an array to start and pass it in as an argument
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the multiFlare cloning the flares too
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** can get and change the following properties
** see the paremeters for details
** if properties are changed call the remake() method to update the MultiFlare
flares - array
pins - array
angles - array
endToEnd - boolean

** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
mouseChildren - set to false so  you do not drag the shape inside the rectangle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[15508] FlareBox(width, height, color, borderColor, borderWidth, flares, corners, pins, style, group, inherit)

FlareBox
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a Rectangle with ZIM Flare objects positioned around edges and corners.
Pass in an array of Flare objects or a MultiFlare
FlareBox places flares at specified corner indexes depending on flare pin index.
See also ZIM Flare and ZIM MultiFlare.

A FlareBox can be used as a backing and rollBacking for buttons and other components
to create exciting borders inspired by the tail lights of 2020 automibiles.

See: https://zimjs.com/ten/flare.html

NOTE: mouseChildren is turned to false for all zim Shape containers.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var border1 = new Flare({
   thickness:6,
   angles:[0,90], // to the right then down
   lengths:[60,90],
   anglesA:[3,-1.5], // flare angles
   anglesEnd:[45,0], // 0 is optional
   color:white,
   pin:1 // pin at flare corner
});

var border2 = new Flare({
   thickness:25,
   angles:[0,90], // to right then down
   lengths:[50,50],
   anglesA:[-2,2], // anglesB will mirror these if not provided
   anglesEnd:[45],
   color:dark,
   pin:1 // pin at flare corner
});

// put both flares at left top corner 0
// they each have pin of 1 so
// the rotation is (0-1)*90 = -90 (counter clockwise)
// they were to the right and down
// now they are up and to the right
var flareBox = new FlareBox(220, 100, blue, dark, 3, [border1, border2], [0,0])
   .centerReg();

// clone the flares for the rollover FlareBox
// put the first flare at corner 2
// the rotation becomes (2-1)*90 = 90 (clockwise)
// it was built to go to the right and down
// now it is going down and to the left
var flareBoxOver = new FlareBox(220, 100, green, dark, 3, [border1.clone(), border2.clone()], [2,0])
   .centerReg({add:false});

// use the flareBoxes as backings
var button = new Button({
   width:flareBox.width,
   height:flareBox.height,
   backing:flareBox,
   rollBacking:flareBoxOver
}).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 220) the width of the rectangle about which the Flare objects are placed
   this is a little larger than the ZIM Button default width
height - (default 80) the height of the rectangle about which the Flare objects are placed
   this is a little larger than the ZIM Button default height
color - (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
flares - (default null) an array of ZIM Flare objects or a single flare or a ZIM MultiFlare
corners - (default [0]) an array of corner indexes to place the pin points of the ZIM Flare objects
   corner indexes are:
      0 - LEFT TOP
      1 - RIGHT TOP
      2 - RIGHT BOTTOM
      3 - LEFT BOTTOM
pins - (default null) an array of pins of the ZIM Flare objects
   The pin index can be set on the Flare or through the MultiFlare or here in the FlareBox
   The pin is also the registration point of the flare so the flare will be placed at the corner at its pin
   FlareBox will also automatically rotate the flares with this formula:
      flare.rotation = (corner-pin)*90
   This formula allows for easy setting of angles on corners
   See the Button at https://zimjs.com/ten/flare.html
   This can be overridden by setting the flare rotation after the FlareBox is created
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the flareBox and clone flares as well
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
multiFlare - gives access to the ZIM Multiflare object
   this is made automatically by FlareBox if an array of flares was used
flares - an array of flares that belong to the multiFlare
backing - gives access to the rectangle backing shape
color - get and set the fill color of the backing shape
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the backing shape
   for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
   will set the color of the shape to half way between blue and pink
   shape.animate({color:red}, 1000); is a shortcut to animate the colorRange
   shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
borderColor - get and set the stroke color
borderWidth - get and set the stroke size in pixels
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
   see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
mouseChildren - set to false so  you do not drag the shape inside the rectangle
   if you nest things inside and want to drag them, will want to set to true
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[15731] Label(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, style, group, inherit)

Label
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a label - wraps the createjs Text object.
Can use with Button, CheckBox, RadioButtons and Pane.
Text seems to come in different sizes so we do our best.
Have tended to find that left and alphabetic are most consistent across browsers.
Custom fonts loaded through css can be used as well.
NOTE: can wrap text at given width using lineWidth parameter.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var label = new Label("Hello");
label.center(); // adds label to and centers on the stage

var label = new Label({
   text:"CLICK",
   size:100,
   font:"courier",
   color:"white",
   rollColor:"red",
   bold:true,
   italic:true
});
stage.addChild(label);
label.x = label.y = 100;
label.on("click", function(){zog("clicking");});

EXAMPLE
STYLE = {font:"courier"};
new Label("Hi Courier").center(); // will be courier not arial

STYLE = {text:"YAY!", color:"Red"};
new Label().center().mov(0,100); // will say YAY! in red arial font
new Label("Hello").center().mov(0,200); // will say Hello in red arial

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function

text |ZIM VEE| - String for the the text of the label
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default "black") color of font (any CSS color)
rollColor - (default color) the rollover color of the font
shadowColor - (default -1) for no shadow - set to any css color to see
shadowBlur - (default 14) if shadow is present
align - ((default "left") text registration point alignment also "center" and "right"
valign - (default "top") vertical registration point alignment alse "middle / center", "bottom"
bold - (default false) set the font to bold - note: fontOptions has been removed as of ZIM Cat
italic - (default false) set the font to italic - note: fontOptions has been removed as of ZIM Cat
variant - (default false) set to true to set the font to "small-caps" - note: fontOptions has been removed as of ZIM Cat
lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap
lineHeight - (default getMeasuredLineHeight) set to number to adjust line height
backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)
   the backing most likely should be centerReg() ie. backing:new Rectangle(200,50,yellow).centerReg()
   see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text
outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text
backgroundColor - (default null) set to CSS color to add a rectangular color around the label
   The background color will change size to match the text of the label
   Note: the backgroundColor is different than a backing which can be any Display Object
   and background parameters are ignored if a backing parameter is set
backgroundBorderColor - (default null) the background stroke color
backgroundBorderWidth - (default null) thickness of the background border
corner - (default 0) the round of corner of the background if there is one
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set)
padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical)
   padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingHorizontal - (default padding) places border out at top bottom
paddingVertical - (default padding) places border out at left and right
shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally
shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically
rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons)
labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight)
labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten
   for labelHeight to work, the labelWidth must also be set
   using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions
maxSize - (default null) set to limit the font size when using labelWidth and labelHeight
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setColorRange(color1, color2) - set a color range for label - used by colorRange property - returns obj for chaining
   if one color is used, the current color is used and color1 is the second color in the range
showRollColor(visible) - default true to show roll color (used internally)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if the object's color is [blue, green]
   then its clone might be blue or green - which could be different than the original
   If exact is set to true then the clone will be the color of the original object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
label - references the CreateJS Text object of the label
text - references the text property of the CreateJS Text object
size - the font size of the Label (without px)
font - get or set the font of the text
bold - get or set the bold (boolean) of the font
italic - get or set the italic (boolean) of the font
variant - get or set the variant (boolean) of the font (true is "small-caps")
align - get or set the horizontal alignment of the text
valign - get or set the vertical alignment of the text
paddingHorizontal - read-only value for paddingHorizontal of label
   note - no padding property - that gets split into paddingHorizontal and paddingVertical
paddingVertical - read-only value for paddingVertical of label
color - gets or sets the label text color
backgroundColor - gets or sets the label background color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
   setting the colorRange will change the color property of the label
   for instance, label.setColorRange(blue, pink) then label.colorRange = .5
   will set the color of the label to half way between blue and pink
   label.animate({color:red}, 1000); is a shortcut to animate the colorRange
   label.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange
rollColor - gets or sets the label rollover color
labelWidth - the width at which the text wraps
labelHeight - setting this and labelWidth will change the font size to fit within the specified dimensions
outlineLabel - reference to the outline CreateJS Text object if there is an outline
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
backing - access to backing object
background - access to background Rectangle if backgroundColor is set
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Label


************************************
[16338] LabelOnPath(label, path, percentAngle, percents, showPath, allowToggle, interactive, onTop, style, group, inherit)

LabelOnPath
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a label along a path of a Squiggle or Blob - which can be interactive, fixed, toggled or hidden
A list of percentages for where the letters are can be provided to move around letters
See: https://zimjs.com/explore/labelonpath.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var lop = new LabelOnPath({
   label:"Hello World",
   // label:new Label({text:"JELLO JIGGLES!", size:50}),
   // path:new Blob(),
   // path:new Squiggle({
   //     color:lighter,
   //     thickness:4,
   //     points:[[0,75,0,0,-100,200,100,-200],[300,75,0,0,-100,200,100,-200]]
   // }).transformPoints("scaleX",2).transformPoints("rotation",0),
   percentAngle:100, // default
   showPath:false, // default
   allowToggle:true, // default
   interactive:true, // default
   onTop:false // default
}).center();
zog(lop.text)

frame.on("keydown", function () {
   // shows percent spacing of letters along path
   // could pass [results] in as an array to percents parameter of LabelOnPath
   zog(lop.percents.toString());
   // uncomment to record the path
   // could pass this in as the points parameter to start with a given path
// lop.path.recordPoints(true);
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Label on Path") a String or a ZIM Label
   can set any label properties such as color, size, font, etc. on the label passed in
path - (default new Squiggle()) a ZIM Squiggle or ZIM Blob
   can set any properties such as color, points, etc. on the shape passed in
percentAngle - (default 100) from 0-100 (or beyond in either direction) as to how much to tilt the letters
percents - (default null) an array of percentage locations of the letters along the line - should match number of letters
showPath - (default true) Boolean to show path at start
allowToggle - (default true) Boolean to allow user to toggle path off and on
interactive - (default true) Boolean to allow user to change path with controls, drag or add and remove points
   can also set these individually on the path
onTop - (default false) - Boolean to set path on top when dragged
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
toggle(state) - leave off state to toggle path to opposite state.  Use true to hide and false to show - returns object for chaining
hidePath() - hides path - returns object for chaining
showPath() - shows path - returns object for chaining
resize() - if not interactive, call this to update the text on the path - returns object for chaining
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
   Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - the name of the class as a String
text - get or set the text on the path
path - read-only access to path - but can manipulate the path
letters - access to ZIM Container of labels used for letters
   for instance labels.loop(function (label) {label.color = red;});
   or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200});
numLetters - how many letters - same as letters.numChildren
percents - access to the array of percents for letter positioning - resize() after changing unless interactive which auto resizes
color - get or set the color of the text
allowToggle - get or set the Boolean to allow toggling the path
interactive - get or set the Boolean to allow interaction with the path
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()


ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[16631] LabelOnArc(label, size, font, color, radius, flip, spacing, letterSpacing, angles, showCircle, arcColor, arcBorderColor, arcBorderWidth, style, group, inherit)

LabelOnArc
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a label along an arc - see also LabelOnPath - for a more interactive version
Used internally for making labels on Radial and RadialMenu objects

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var loa = new LabelOnArc({
   label:"Hello World"
}).center();
zog(loa.text);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)

label - (default "Label on Arc") a String or a ZIM Label
   can set any label properties such as color, size, font, etc. on the label passed in
size - (default 30) the font size of the label
font - (default "verdana") the font of the label - can load custom fonts in Frame() or frame.loadAssets()
color - (default white) a color for the text can be any ZIM or CSS color
radius - (default 100) the radius of the circle to apply the arc of the text
flip - (default false) set to true to flip text if between 90 and 270
spacing - (default 0) the space between the Label and the arc - varies with different fonts
letterSpacing - (default 5) - the space between letters
angles - (default null) optionally specify an array of angles for the letters
   this will override letterSpacing - see also angles property to receive an array of angles
showCircle - (default false) set to true to see a circle - then use circle property to adjust if desired
arcColor - (default null) set to a color to see a filled arc
arcBorderColor - (default null) the borderColor of the arc
acrBorderWidth - (default 2 if arcBorderColor) the borderWidth of the arc
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - the name of the class as a String
text - get the text on the arc (make a new object if change of text is needed)
labels - an array of ZIM Label objects for the letters
letters - access to ZIM Container of labels used for letters
   for instance labels.loop(function (label) {label.color = red;});
   or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200});
numLetters - how many letters - same as letters.numChildren
letterHeight - get the height of letters
color - get or set the text color
circle - access to the circle object
arc - access to the arc object
angles - access to the array angles for letter positioning
   use angles.toString() to log angle data (for kerning)
   this can be modified and passed in as an angles property to start
innerRadius - the inside radius at the bottom of the text
outerRadius - the outside radius at the top of the text
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[16830] LabelLetters(label, align, valign, letterSpacing, spacings, cache, style, group, inherit)

LabelLetters
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Splits apart a ZIM Label into labels per characater
to allow manipulation of each character - animation, kerning, etc.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var letters = new LabelLetters("Label Letters", "center", "bottom", 5)
   .center()
   .animate({
      props:{scale:1.5, rotation:-10},
      wait:500,
      time:.2,
      sequence:50,
      rewind:true
   });

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Label Letters") a String or a ZIM Label
   can set any label properties such as color, size, font, etc. on the label passed in
align - (default "center") set to "left", "center" / "middle", "right" for registration x positioning
valign - (default "center") set to "top", "center" / "middle", "bottom" for registration y positioning
letterSpacing - (default 5) - the space between letters
spacings - (default null) - an array of the space between letters each letter
   0 is the index for the space between first and second letter
   the length of this should be one less than the number of letters
cache - (default false) set to true to cache each letter - improves performance on animation
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - the name of the class as a String
text - get the text of the original Label
labels - an array of ZIM Label objects for the letters
numLetters - how many letters (same as numChildren)
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[16972] Button(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBackgroundColor, rollToggleBackgroundColor, toggleColor, rollToggleColor, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, waitBacking, rollWaitBacking, waitIcon, rollWaitIcon, align, valign, indent, indentHorizontal, indentVertical, style, group, inherit)

Button
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Makes a button with rollover and many more features - see parameters.
You will need to pass in a Label to change the font properties of the button from the default.
You will then need to add the button to the stage and add a mousedown or click event.
Button rollover is done automatically.

You can set a backing display object (Shape, Bitmap, Pattern, etc.) in place of the standard rectangle.
You can set an icon display object in place of the standard text
You can set the Button to toggle between text, backings or icons
SEE the ZIM Pizzazz series for a growing selection of backings, patterns and icons
https://zimjs.com/bits/view/pizzazz.html
https://zimjs.com/bits/view/icons.html
https://zimjs.com/patterns.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var button = new Button(200,60,"CLICK");
button.center();
button.on("click", function(){zog("clicking");});

// OR add custom label (needed to change label color for instance)
var label = new Label({
   text:"POWER OPTION",
   size:40,
   backgroundColor:"violet",
   fontOptions:"bold"
});
var button = new Button({
   label:label,
   width:390,
   height:110,
   backgroundColor:"purple",
   rollBackgroundColor:"MediumOrchid",
   borderWidth:8,
   borderColor:"violet",
   gradient:.3,
   corner:0
});
button.center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function

width - (default 200) the width of the button
height - (default 60) the height of the button
label - (default "CLICK") ZIM Label or plain text with default settings (white)
backgroundColor |ZIM VEE| - (default "orange") background color of button (any CSS color)
rollBackgroundColor |ZIM VEE| - (default "lightorange") rollover background color of button
color |ZIM VEE| - (default "white") label color of button (any CSS color) unless a custom Label is set
rollColor |ZIM VEE| - (default "white") rollover label color of button
borderColor - (default null) the color of the border
borderRollColor - (default borderColor) the rollover color of the border
borderWidth - (default null) thickness of the border
corner - (default 20) the round of the corner (set to 0 for no corner)
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
hitPadding - (default 0) adds extra hit area to the button (good for mobile)
   Note that if the button alpha is 0 the button will still be active if hitPadding is not equal to 0
   Set the hitPadding property to 0 in this case - thanks Frank Los for the notice
gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button
gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button
dashed - (default false) set to true to turn the border to dashed - if the borderColor or borderWidth is provided
backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)
   assumed to be center registration for easy positioning *** as with all backings
   see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
   https://zimjs.com/bits/view/pizzazz.html
rollBacking - (default null) a Display object for the backing of the rolled-on button
rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off
icon - (default null) set to display object to add icon at the center of the button and remove label
   assumed to be center registration for easy positioning *** as with all icons
   https://zimjs.com/bits/view/icons.html
rollIcon - (default null) set to display object to show icon on rollover
toggle - (default null) set to string to toggle with label
   the button will not toggle if there is a wait parameter set
   see also toggle colors, backings and icons
toggleBackgroundColor - (default backgroundColor) background color to make button when toggled
rollToggleBackgroundColor - (default toggleBackgroundColor) background color for button when toggled and rolled over
toggleColor - (default label's color) color to make text when toggled
rollToggleColor - (default label's roll color) color for text when toggled and rolled over
toggleBacking - (default null) set to display object to set a different backing for toggled state
rollToggleBacking - (default null) set to display object to set a backing for the rolled toggle state
toggleIcon - (default null) set to display object to add icon at the center of the button and remove label in toggle state
rollToggleIcon - (default null) set to display object to show icon on rollover in toggle state
toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle
wait - (default null) - String word for button to show when button is pressed and a wait state is desired
   LOADING: this can be used as a loading message - so change the button to "LOADING"
   When the asset has loaded, use the clearWait() method to return to the normal button or toggled button state
   CONFIRMING: this can also be used to confirm user action rather than a full new confirm panel
   Set wait:"CONFIRM", set the waitBackgroundColor and rollWaitBackground parameters to red and the waitTime parameter to 4
   In a button mousedown (must use mousedown - not click or tap if ACTIONEVENT is mousedown - the default),
   check if the waiting property is true to test for confirmation
   The waiting property will not be true for the first button press but will be true during the wait period
   Perhaps set the waitModal parameter to true to clearWait() if the user clicks off the button
   Use the clearWait() method to clear or cancel the wait status - for instance, if the pane the button is in is closed
waitTime - (default 5 seconds) seconds to show wait state before reverting to normal button (also see ZIM TIME constant)
waitBackgroundColor - (default red) background color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollBackgroundColor) background color for button when waiting and rolled over
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
waitModal - (default false) set to true to clearWait() if the user clicks off the button
waitEnabled - (default true) set to false to disable button while wait is in progress
waitBacking - (default null) set to display object to set a different backing for wait state
rollWaitBacking - (default null) set to display object to a different roll backing for wait state
waitIcon - (default null) set to display object to add icon at the center of the button and remove label in wait state
rollWaitIcon - (default null) set to display object to show icon on rollover in wait state
align - (default "center") horizontal align of the label
valign - (default "center") vertical align of the label
indent - (default 10) indent of label when align or valign is set
indentHorizontal - (default indent) horizontal indent of label when align or valign is set
indentVertical - (default indent) vertical indent of label when align or valign is set
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)
   Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"
   note - all backing will have a pattern property if a pattern is set as a backing
setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)
   Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon"
toggle(state) - forces a toggle of label, backing and icon if set
   state defaults to null so just toggles if left blank
   pass in true to go to the toggled state and false to go to the original state
   returns object for chaining
wait() - forces a wait state - with wait text, backings and icons if set
clearWait() - clears a wait state of the button - sets it back to normal
removeWait() - removes (and clears) a wait state of the button so it will not trigger again
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
   exact - will ignore ZIM VEE values and clone the original values
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
text - references the text property of the Label object of the button
label - gives access to the label
color - get or set non-rolled on label color (if no icon specified)
rollColor - get or set rolled on label color
backgroundColor - get or set non-rolled on backing color (if no backing specified)
rollBackgroundColor - get or set rolled on backing color
rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off
borderColor - get or set non-rolled on border color
borderRollColor - get or set the border rolled color
hitPadding - extra padding for interactivity - see hitPadding parameter for extra notes
backing - references the backing of the button
   use setBacking() to change as with all backings
   note - all backings will have a pattern property if a pattern is set as a backing
rollBacking - references the rollBacking (if set)
icon - references the icon of the button (if set)
   use setIcon() to change as with all icons
rollIcon - references the rollIcon (if set)
rolled - read-only true if button is being rolled over else false
toggled - read-only true if button is in toggled state, false if button is in original state
   note: on mousedown toggle may not be switched over - except on mobile
   so would recommend for consistency checking on click or tap or mouseup
toggleBacking - references the toggle backing (if set)
rollToggleBacking - references the toggle roll backing (if set)
toggleIcon - references the toggle icon (if set)
rollToggleIcon - references the toggle roll icon (if set)
waiting - read-only true if button is in the waiting state within wait time
   note: must test this in a mousedown function not click or tap
waitBacking - references the wait backing (if set)
rollWaitBacking - references the wait roll backing (if set)
waitIcon - references the wait icon (if set)
rollWaitIcon - references the wait roll icon (if set)
focus - get or set the focus property of the Button used for tabOrder
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
for example seeing toggle take effect

EVENTS
dispatches a "waited" event if button is in wait state and the wait time has completed
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Button


************************************
[17812] CheckBox(size, label, startChecked, color, backgroundColor, borderColor, borderWidth, corner, margin, indicatorType, indicatorColor, tap, style, group, inherit)

CheckBox
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A checkbox that when pressed toggles the check and a checked property.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var checkBox = new CheckBox(50, "TEST");
checkBox.center();
checkBox.on("change", function() {
   zog(checkBox.checked); // will be true then false, etc.
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - (default 60) size in pixels (always square)
label - (default null) ZIM Label object - or String to make a default label (black)
startChecked - (default false) an initial parameter to set checked if true
color - (default "#111") the text color of the label
backgroundColor - (default "rgba(255,255,255,.8)") the background color of the box
borderColor - (default "#111") the color of the border
borderWidth - (default size/10) thickness of the border
corner - (default 0) the round of the corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
margin - (default 10) is on outside of box so clicking or pressing is easier
indicatorType - (default check) could be square (box) or x
indicatorColor - (default borderColor or black if no border) the color of the indicator
tap - (default false) set to true to tap to activate CheckBox rather than mousedown or click
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setChecked(Boolean) - defaults to true to set button checked (or use checked property)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
checked - gets or sets the check of the box
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
label - gives access to the label
text - the text of the label
background - the Rectangle of the checkBox
indicator - gives access to the check mark ie. indicator.sca(.8);
indicatorColor - get or set the color of the indicator
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when pressed on but not when the checked property is set

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=CheckBox


************************************
[18088] RadioButtons(size, buttons, vertical, color, backgroundColor, spacing, margin, always, indicatorColor, style, group, inherit)

RadioButtons
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A radio button set that lets you pick from choices.
Radio buttons can display radio buttons vertically (default) or horizontally.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var radioButtons = new RadioButtons(50, ["ONE", "TWO", "THREE"]);
radioButtons.center();
radioButtons.on("change", function() {
   zog(radioButtons.text); // will be ONE, TWO or THREE
   zog(radioButtons.selectedIndex); // will be 0, 1, or 2
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - (default 60) in pixels
buttons - an array of button data objects as follows:
   [{label:ZIM Label or text, id:optional id, selected:optional Boolean}, {etc...}]
   or just a list of labels for default labels ["hi", "bye", "what!"]
vertical - (default true) displays radio buttons vertically - set to false to display horizontally
color - (default "#111") the text color of the label
backgroundColor - (default "rgba(255,255,255,.8)") the background color of the circle
borderColor - (default "#111") the color of the border
borderWidth - (default size/9) thickness of the border
spacing - (size*.2 for vertical and size for horizontal) the space between radio button objects
margin - (size/5) the space around the radio button itself
always - (default false) if set true, cannot click on selection to unselect it
indicatorColor - (default borderColor or black) the color of the indicator
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setSelected(num) - sets the selected index (or use selectedIndex) -1 is default (none)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selected - gets the selected object - selected.label, selected.id, etc.
selectedIndex - gets or sets the selected index of the buttons
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
label - current selected label object
text - current selected label text
id - current selected id
buttons - an array of button Container objects holding the shape and label (note - different than buttons parameter)
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
indicators - an array of the zim Shape dot objects. indicators[0].color = "yellow";
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when pressed but not when selectedIndex is set
then ask for the properties above for info

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=RadioButtons


************************************
[18420] Toggle(width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, tap, toggleBackgroundColor, color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group, inherit)

Toggle
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Toggle button that toggles off and on - with optional labels
Thanks Andi Erni for the initial design and coding of the Toggle.
See: https://zimjs.com/explore/toggle.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Toggle({label:"ON"}).center().change(function (e) {
   zog(e.target.toggled)
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 80) the width of the toggle (less labels)
height - (default 50) the height of the toggle
label - (default null) an optional ZIM Label (or text for default label properties)
   also see labelLeft for left side text
startToggled - (default false) set to true to start in the toggled position
backgroundColor - (default "#C60") dark orange - set to any HTML color for background color
margin - (default 10) the distance around and between the toggle and its parts
indicatorType - (default "circle" or "round") set to "rectangle" or "square" for square indicator
indicatorColor - (default "#111")
toggleBackgroundColor - (default "#F93") orange - for toggled background color
   try setting the borderColor to the same color as the background for inner color change effect
color - (default "#111") the font color of the toggle
borderColor - (default null) the color of the border
borderWidth - (default null - or 1 if borderColor) the size of the border
corner - (default half the height) a corner radius - or an array of corners [topLeft, topRight, bottomRight, bottomLeft]
indicatorCorner - (default 0) change the corner radius of a rectangle toggleType - or an array of corners [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
time - (default .1) time in seconds for toggle to animate (also see ZIM TIME constant)
labelLeft - (default null) an optional ZIM Label for the left side of the toggle (or text for default label properties)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
toggle(state) - toggle the toggle - state defaults to true - set to false to un-toggle
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
toggled - gets the toggled state of the toggle - same as selected
text - gets the selected label text or "on" / "off" if no label
indicator - access to the indicator object
background - access to background Rectangle
label - access to the label if provided
labelLeft - access to the label on the left if provided
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event when pressed but not when toggle() is used

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[18667] Tip(text, align, valign, margin, marginH, marginV, outside, target, size, font, color, rollColor, shadowColor, shadowBlur, textAlign, textValign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, style, group, inherit)

Tip
zim class - extends a a zim.Label which extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Tip() can be used to show some extra information - the tip disappears after an amount of time
Tip has easy positioning along the inside edges or the outside edges of a target.

NOTE: Tip places the tip on the stage when the show() method is called
You can reposition with .mov() etc. if desired

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Tip("Press Circle").show(1); // wait one second and show tip at 40 pixels from bottom right

var circle = new Circle().center().tap(function () {
   circleTip.show();
});
var circleTip = new Tip({
   text:"This is a default ZIM Circle",
   backgroundColor:white,
   color:black,
   outside:true, // outside the circle
   target:circle,
   align:"center",
   valign:"bottom",
   margin:14,
   corner:0,
   size:20
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
text - (default "Here's a tip!") String for the the text of the tip
align - (default "right") the horizontal position of the tip ("left", "center"/"middle", "right")
valign - (default "bottom") the vertical position of the tip ("top", "center"/"middle", "bottom")
margin - (default 40) distance from side (unless centered) in pixels
marginH - (default margin) distance from horizontal edges
marginV - (default margin) distance from vertical edges
outside - (default false) set to true to place Tip on outside of container
target - (default zdf's stage) tip is placed on stage relative to container
** the rest are parameters for a Label (align and valign are set as textAlign and textValign)
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default "black") color of font (any CSS color)
rollColor - (default color) the rollover color of the font
shadowColor - (default "rgba(0,0,0,.3)") for no shadow - set to any css color to see
shadowBlur - (default 1) if shadow is present
textAlign - ((default "left") text registration point alignment also "center" and "right"
textValign - (default "center") vertical registration point alignment alse "middle / center", "bottom"
lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap
lineHeight - (default getMeasuredLineHeight) set to number to adjust line height
fontOptions - (default null) css VALUES as a single string for font-style font-variant font-weight
eg. "italic bold small-caps" or just "italic", etc.
backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)
see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text
outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text
backgroundColor - (default null) set to CSS color to add a rectangular color around the label
The background color will change size to match the text of the label
Note: the backgroundColor is different than a backing which can be any Display Object
and background parameters are ignored if a backing parameter is set
backgroundBorderColor - (default null) the background stroke color
backgroundBorderWidth - (default null) thickness of the background border
corner - (default 0) the round of corner of the background if there is one
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set)
padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical)
padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingHorizontal - (default padding) places border out at top bottom
paddingVertical - (default padding) places border out at left and right
shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally
shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically
rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons)
labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight)
labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten
for labelHeight to work, the labelWidth must also be set
using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions
maxSize - (default null) set to limit the font size when using labelWidth and labelHeight
bold - (default null) set to true to bold the tip
italic - (default null) set to true to italic the tip
variant - (default null) set to true to set the tip to small caps
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show(delay, time) - show the tip - delay in s defaults to 0 and time in s defaults to 2 (also see ZIM TIME constant)
hide() - hides tip - show() will also hide the tip automatically after the time provided
clear() - hides tip and removes the call to a delayed tip using a delay time in show()
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: See all methods of a Label() such as setColorRange(), etc.
ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
align - get or set the horizontal alignment
valign - get or set the vertical alignment
text - get or set the text of the Tip
ALSO: See all properties of a Label() such as size, color, etc.
ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[18906] Panel(width, height, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, backgroundColor, borderColor, borderWidth, corner, close, closeColor, arrow, align, shadowColor, shadowBlur, draggable, boundary, extraButton, style, group, inherit)

Panel
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A simple panel with titleBar and optional arrow for more panels.
Panel can be set draggable and can have a close button
See: https://zimjs.com/explore/panel.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var panel = new Panel({titleBar:series("TODAY", "TOMORROW")})
   .center();

// make a couple pages for the panels

// content for panel 1
var today = new Container(panel.width, panel.height).addTo(panel);
var sun = new Circle(30, yellow).center(today);

// content for panel 2
var tomorrow = new Container(panel.width, panel.height); // do not add yet
var label = new Label("-30").center(tomorrow);

// event to change content as panels change
panel.on("change", function () {
   if (today.parent) {
      today.removeFrom();
      tomorrow.center(panel);
   } else {
      tomorrow.removeFrom();
      today.center(panel);
   }
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the panel
height - (default 300) the height of the panel
titleBar - |ZIM VEE| (default "PANEL") a String or ZIM Label title for the panel that will be presented on a titleBar across the top
titleBarColor - |ZIM VEE| (default "black") the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - |ZIM VEE| (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
backgroundColor - |ZIM VEE| (default #eee) background color (use clear - or "rbga(0,0,0,0)" for no background)
borderColor - |ZIM VEE| (default #888) border color
borderWidth - (default 1) the thickness of the border
corner - (default 0) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
close - (default false) - add a close button top right
closeColor - (default titleBarColor) the color of the close button
arrow - (default true if more than one panel) set to false to not show an arrow if multiple panels
align - (default "left") set to "center", "middle" or "right" to align the label on the titleBar
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
extraButton - (default null) creates a little square button with the letter R for reset
   this is made with the group style id of "extraButton"
   use the extraButton property to access the button to change its label or capture an event, etc.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
nextPanel(index, event) - show next panel - the panels are set up to be a series or random or function based
   this means there is not necessarily an order to be able to go backwards to... so, only forward!
   If a series is provided to the Panel title, etc. then the index can be used to go to the title in the series at the index
   event (default false) will dispatch a change event if nextPanel is called
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
panelHeight - get and set the height of the panel without scaling it as height does (for width, remake the Panel object)
titleBar - access to the titleBar container
label - access to the label of the current panel
text - access to the text of the current panel
titleBar - gives access to the titleBar Container - which also has a background property
titleBarLabel - gives access to the titleBar label
close - access to the close button
arrow - access to the next arrow
background - access to the background Rectangle
extraButton - access to the Label for the extra button if extraButton parameter is set to true
   use this to set the text in the button (a one letter button is expected - for instance, i for info, x for close, etc.)
overlay - access to the overlay Rectangle used if enabled = false
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event when arrow is pressed to go to the next panel
dispatches a "close" event when closed with close button if there is a close button

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[19217] Pane(width, height, label, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, style, group, inherit)

Pane
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Adds a window for alerts, etc.
You need to call the pane.show() to show the pane and pane.hide() to hide it.
You do not need to add it to the stage - it adds itself centered.
You can change the x and y (the origin and registration point are in the middle).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var pane = new Pane(300, 200, "Watch out!", "#CCC");
pane.show(); // pressing anywhere will close pane (see parameters for options)

EXAMPLE
var pane = new Pane({width:600, height:250, modal:false, displayClose:false});
var cancel = new Button(220, 100, "CANCEL", "red").center(pane).mov(-130);
var confirm = new Button(220, 100, "CONFIRM", "green").center(pane).mov(130);
cancel.on("click", function() {pane.hide();});
confirm.on("click", function() {zgo("http://zimjs.com")});
pane.show(); // pressing anywhere will close pane (see parameters for options)

// custom backing with ZIM Pizzazz 3
// up top link to https://d309knd7es5f10.cloudfront.net/pizzazz_03.js
new Pane({
   label:new Label({color:white, text:"STOP", size:50}),
   backing:pizzazz.makePattern({
      type:"stripes",
      colors:series(red,black),
      rows:20
   }).alp(.8)
}).show();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 200) width of pane
height - (default 200) height of pane
label - (default null) an optional ZIM Label (or text for default label properties)
backgroundColor - (default "white") a css color for the background of the Pane
color - (default "black") a css color for the text color of the Pane
draggable - (default false) pass in true to drag the pane
resets - (default true) resets position to start on re-open - set to false to keep last position
modal - (default true) pane will close when user clicks off the pane - set to false to keep pane open
corner - (default 20) is the corner radius - set to 0 for no corner
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backdropColor - (default rgba(0,0,0,.2)) the color of the background that fills the stage
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 20) how blurred the shadow is if shadow is set
center - (default true) centers the pane
   if center is false you will have to set x and y for the pane
   the registration point and the origin inside the pane is in the center
   you can adjust the label placement by changing its x and y or registration point
displayClose - (default true) closes the Pane if display backing is pressed
   if draggable is set to true, displayClose will automatically be set to false
backdropClose - (default true) closes the Pane if backdrop is pressed
backing - (default null) a Display object for the backing of the pane (eg. Shape, Bitmap, Container, Sprite)
   see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
   as well as patterned backings using Pizzazz 3
fadeTime - (default 0) seconds to fade in and out - also see ZIM TIME constant
container - (default - the default stage) container for the pane
titleBar - (default null - no titleBar) a String or ZIM Label title for the pane that will be presented on a titleBar across the top
titleBarColor - (default "black") the color of the titleBar text if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
close - (default false) - a close X for the top right corner that closes the pane when pressed
closeColor - (default #555) - the color of the close X if close is requested
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show() - shows the pane (returns the pane for chaining)
hide(callEvent) - hides the pane - callEvent defaults to false - set to true to also call close event
toggle(state - default null) - shows if hidden and hides if showing (returns the pane for chaining)
   or pass in true to show pane or false to hide pane
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new pane for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
backing - or display - reference to the pane box
text - gives access to the label text
label - gives access to the label
titleBar - gives access to the titleBar Container - which also has a background property
titleBarLabel - gives access to the titleBar label
toggled - read-only Boolean property as to whether pane is showing
close - access to the ZIM Shape if there is a close X
backdrop - reference to the backdrop that covers the stage
container - get or set the container the pane will be added to
resetX - if reset is true you can dynamically adjust the position if needed
resetY - and the y position for reset...
enabled - set to false to disable component
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "close" event when closed by clicking on backing, display, close, etc. when applicable
dispatches a "fadedin" event if fadeTime is set and pane has finished its fade in animation
dispatches a "fadedout" event if fadeTime is set and pane has finished its fade out animation

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Pane


************************************
[19657] Window(width, height, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, style, group, inherit)

Window
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Adds a window for content that can be swiped and scrolled.
NOTE: if zim namespace zns = true then this overwrites a JS Window - so the JS Window is stored as document.window

NOTE: set the enable property to false if animating the position of the whole Window
then set the enable property to true on the animate call function.  See update() method for more.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var win = new Window({
   height:300,
   interactive:false,
   padding:0,
   slideDamp:.2
});
var container = new Container(); // make some content
var c; spacing = 10;
for (var i=0; i<4; i++) {
   c = frame.makeCircles();
   c.x = win.width/2;
   c.y = c.width/2 + (c.width+spacing)*i;
   container.addChild(c);
}
win.add(container); // add the content to the window
win.center();
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) the width of the window
height - (default 200) the height of window - including the titleBar if there is a titleBar
backgroundColor - (default #333) background color (use clear - or "rbga(0,0,0,0)" for no background)
borderColor - (default #999) border color
borderWidth - (default 1) the thickness of the border
padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical)
   padding is ignored if content x and y not 0 - and really only works on top left - so more like an indent
corner - (default 0) is the rounded corner of the window (does not accept corner array - scrollBars are too complicated)
swipe - (default auto/true) the direction for swiping set to none / false for no swiping
   also can set swipe to just vertical or horizontal
scrollBarActive - (default true) shows scrollBar (set to false to not)
scrollBarDrag - (default false) set to true to be able to drag the scrollBar
scrollBarColor - (default borderColor) the color of the scrollBar
scrollBarAlpha - (default .3) the transparency of the scrollBar
scrollBarFade - (default true) fades scrollBar unless being used
scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar
scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar
slide - (default true) Boolean to throw the content when drag/swipe released
slideDamp - (default .6) amount the slide damps when let go 1 for instant, .01 for long slide, etc.
slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal"
   slides past bounds and then snaps back to bounds when released
   vertical snaps when dragging up and down but not if dragging horizontal
interactive - (default true) allows interaction with content in window
   set to false and whole window will be swipeable but not interactive inside
shadowColor - (default rgba(0,0,0,.3)) the color of the shadow
shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow
paddingHorizontal - (default padding) places content in from left and right (ignored if content x not 0)
paddingVertical - (default padding) places content in from top and bottom (ignored if content y not 0)
scrollWheel - (default true) scroll vertically with scrollWheel
damp - (default null) set to .1 for instance to damp the scrolling
titleBar - (default null - no titleBar) a String or ZIM Label title for the window that will be presented on a titleBar across the top
titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
onTop - (default true) set to false to not bring Window to top of container when dragging
close - (default false) - a close X for the top right corner that closes the window when pressed
closeColor - (default #555) - the color of the close X if close is requested
cancelCurrentDrag - (default false) - set to true to cancel window dragging when document window loses focus
   this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default
fullSize - (default false) - set to true to add a fullsize icon to the titleBar
   to let user increase the size of the window to the frame - will turn into a reduce size icon
fullSizeColor - (default #555) - the color of the fullSize icon
resizeHandle - (default false) - set to true to rollover bottom right corner to resize window with resizeHandle
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(obj, replace) - adds obj to content container of window (at padding) must have bounds set
   it is best to position and size obj first before adding
   otherwise if adjusting to outside current content size then call update()
   replace defaults to false and if set to true, removes all content then adds the obj.
   returns window for chaining
remove(obj) - removes object from content container of window and updates - returns window for chaining
removeAll() - removes all objects from content container of window and updates - returns window for chaining
resize(width, height) - resizes the Window without scaling the content (also calls update() for scroll update)
   width and height are optional - returns window for chaining
update() - resets window scrolling if perhaps the content gets bigger or smaller
   update() does not quite update the dragBoundary due to a timeout in waiting for scrolls to be set
   so if animating the position of a window, set the enable property to false before animating
   then set the enable property to true on the animate call function
cancelCurrentDrag() - stop current drag on window - but add dragging back again for next drag
clone(recursive) - makes a copy with properties such as x, y, etc. also copied
   recursive (default true) clones the window content as well (set to false to not clone content)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
** see also the resize(width, height) method to resize the window without resizing the content
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
backing - CreateJS Shape used for backing of Window
content - ZIM Container used to hold added content
enabled - get or set whether the Window is enabled
scrollEnabled - get or set whether the Window can be scrolled
scrollBar - data object that holds the following properties (with defaults):
   you can set after object is made - call window.update() to see change
   scrollBar.horizontal = zim Shape // the horizontal scrollBar rectangle shape
   scrollBar.vertical = zim Shape // the vertical scrollBar rectangle shape
   scrollBar.color = borderColor; // the color of the scrollBar
   scrollBar.size = 6; // the width if vertical or the height if horizontal
   scrollBar.minSize = 12; // for the height if vertical or the width if horizontal
   scrollBar.spacing = 3 + size + borderWidth / 2;
   scrollBar.margin = 0; // adds extra space only at end by scrollBars
   scrollBar.corner = scrollBar.size / 2;
   scrollBar.showTime = .5; // s to fade in
   scrollBar.fadeTime = 3; // s to fade out
scrollX - gets and sets the content x position in the window (this will be negative)
scrollY - gets and sets the content y position in the window (this will be negative)
scrollXMax - gets the max we can scroll in x based on content width - window width (plus padding and margin)
scrollYMax - gets the max we can scroll in y based on content height - window height (plus padding and margin)
titleBar - access to the ZIM Container for the titleBar if there is a titleBar also has a backing property
titleBarLabel - access to the ZIM Label of the titleBar if there is a titleBar
close - access to the ZIM Shape if there is a close X
resizeHandle - access the ZIM Rectangle that makes up the resizeHandle when resizeHandle parameter is set to true
   resizeHandle.removeFrom() would stop resize from being available and resizeHandle.addTo(window) would activate it again
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "select" event when clicked on in a traditional manner (fast click with little movement)
dispatches a "hoverover" event when rolled on without moving for 300 ms
dispatches a "hoverout" event when not hovering due to movement or mouseout on the window
dispatches a "scrolling" event when the window scrolls
dispatches a "close" event when the window is closed with the x on the titleBar if there is a titleBar
dispatches a "slidestart" event if slide is true and window starts sliding (on pressup)
dispatches a "slidestop" event if slide is true and window stops sliding

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Window


************************************
[20595] Page(width, height, color, color2, vertical, pattern, scalePattern, cache, style, group, inherit)

Page
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
ZIM Page() is a Container() with Rectangle() backing.
For years, many questions were asked - how to make a page in ZIM.
Now, we have decided to officially answer that!  ZIM Page().
An easy way to handle linear gradients is provided as well as a custom background
such as a ZIM Pizzazz pattern.

To keep things brief, Page is expected to fit the stage.
So border, corner, dashed, etc. has been left out.
If the page is smaller and these are desired...
old-school-it and make a Container and add the desired Rectangle.

SEE: https://zimjs.com/cat/page.html
SEE: Docs for ZIM Pages() as well to handle multiple pages.
SEE: ZIM Panel(), ZIM Pane() and ZIM Window() for alternatives.

NOTE A Page object will start with one child or two children if a pattern is specified.
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var page = new Page(stageW, stageH, red, pink).addTo();
page.title = new Label("A Page!").loc(100,100,page);
page.content = new Circle().center(page);
page.nav = new Tabs().pos(0,100,CENTER,BOTTOM,page);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default zimDefaultFrame.width) the width of the Page
   but backing is sized to screen.width if no width is provided
height - (default zimDefaultFrame.height) the height of the Page
   but backing is sized to screen.height if no height is provided
color - (default zim.light) the color of the page
color2 - (default null) a second color which would form a zim.GradientColor() as the color
vertical - (default true) the direction for the gradient if there is a gradient
pattern - (default null) a DisplayObject that will be added to the page above the backing
   For instance, import ZIM pizzazz_03.js and use:
   pizzazz.makePattern("slants", series([grey,dark]), 20, 52, 40).alp(.2)
scalePattern - (default "bigger" / "outside") scale the pattern so it fits outside the window
   set to false for no scaling or:
   "smallest" uses the smallest scaling keeping proportion (fit)
   "biggest" uses the largest scaling keeping proportion (outside)
   "both" keeps both x and y scales - may stretch object (stretch)
cache - (default false or true for gradient or pattern) whether the backing and pattern is cached
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
clone(recursive) - makes a copy with properties such as x, y, etc. also copied
recursive (default false) - set to true to copy children of the object (these will not get custom properties, no drag, events, etc.)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
backing - access the backing Rectangle
pattern - access the pattern object if one is provided
color - get or set the color of the backing Rectangle
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[20745] Layer(width, height, titleBar, titleBarContainer, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, borderWidth, borderColor, dashed, transformObject, titleBarWidth, titleBarHeight, titleBarX, titleBarY, titleBarDraggable, close, closeColor, closeBackgroundColor, closeIndicatorColor, anchor, style, group, inherit)

Layer
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Layer is a ZIM Container with transform controls.
ZIM transform() objects have their mousechildren turned off so they can be dragged and transformed.
This means there can be no interactivity inside the transformed object.
Layer provides a solution to nest transformed objects in transformable containers.
It does so by providing a titleBar that can be used to turn on and off the transform of the container
and allow its contents to be transformed when the transform controls of the Layer are turned off.
This is more than just hiding the transform tools but rather removing and adding them.

The Layer titleBar will always remain visible on the stage
If the Layer is moved (not by its titleBar) so that the titleBar hits the edge,
then the titleBar will become anchored to the edge (unless anchor is set to false)
This creates an independent titleBar that can be moved to any location.
The titleBarPos() method can also be used to separate the titleBar at any time.
Drop the titleBar on the top left corner of the Layer or doubleClick it to snap it back on to the layer

NOTE: Layers can be added to a Transform Manager and saved with the persist sytem.
NOTE: Layers can be added to Layers (nested) along with any other type of DisplayObject content.
NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

SEE: https://zimjs.com/explore/layer.html

EXAMPLE
// adding the Layers above the content will allow pressing Layer titleBar objects inside other Layers
// adding everything right on the stage would not allow pressing titleBars inside other Layers - either way may be best, depending on content
var content = new Container(stageW, stageH).addTo();
var layers = new Container(stageW, stageH).addTo();

// create an outer layer with two inner layers - one holding a circle and the other two circles
var layer0 = new Layer(800, 500, "LAYER 0", layers).center(content);
var layer1 = new Layer(300, 400, "LAYER 1", layers).loc(50,50,layer0);
var circle1 = new Circle(50, pink).center(layer1).transform({visible:false});
var layer2 = new Layer(300, 400, "LAYER 2", layers).pos(50,50,true,false,layer0);
var circle2 = new Circle(50, green).center(layer2).mov(0, -80).transform({visible:false});
var circle3 = new Circle(50, blue).center(layer2).mov(0, 80).transform({visible:false});

// optionally store transforms
var t = new TransformManager([layer0, layer1, layer2, circle1, circle2, circle3], "layersID");
// t.clearPersist("layersID")

timeout(1, function () {
   layer2.resetTitleBar();
   layer2.turnOn();

   // if moving manually, must call resize()
   layer2.mov(30);
   layer2.resize();
   stage.update();
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the width of the Layer Container
height - (default 500) the height of the Layer Container not including the titleBar (which is not in the Container)
titleBar - (default "LAYER") a String or ZIM Label for the titleBar
titleBarContainer - (default null - zdf' stage) a container for the titleBar
   can group these with other Layers and hide them all by hiding the container for instance
   this also can help layer the titleBars above the content
backgroundColor - (default #eee) the background color of the titleBar
rollBackgroundColor - (default #fff) the roll background color of the titleBar
selectedBackgroundColor - (default #666) the selected background color of the titleBar
color - (default #666) the color of the titleBar text
rollColor - (default #666) the roll color of the titleBar text
selectedColor - (default #ddd) the selected color of the titleBar text
borderWidth - (default 1) the width of the ghost outline when the Layer is not selected
   to adjust the transform controls border width use the transformObject parameter and set the borderWidth property
borderColor - (default borderColor) the color of the ghost outline when the Layer is not selected
   to adjust the transform controls border color use the transformObject parameter and set the borderColor property
dashed - (default true) the dashed of the ghost outline when the Layer is not selected
   to adjust the transform controls border dashed use the transformObject parameter and set the dashed property
transformObject - (default {borderColor:selectedBackgroundColor}) any of the transform parameters as an object literal
   certain properties are overwritten by Layer as follows:
   {events:true, visible:false, ghostColor:borderColor, ghostWidth:borderWidth, ghostDashed:dashed, ghostHidden:true}
   use the transformControls.show() to show the transform controls once the Layer is made for instance:
   timeout(100, function(){layer.transformControls.show();}); // a timeout is needed as Layer gets created - sorry.
titleBarWidth - (default 100 + 30 if close) the width of the titleBar.  30 pixels will be added if close is true
titleBarHeight - (default 40) the height of the titleBar
titleBarX - (default null) the starting x position of the titleBar - see also titleBarPos() and resetTitleBar() methods
titleBarY - (default null) the starting y position of the titleBar - see also titleBarPos() and resetTitleBar() methods
titleBarDraggable - (default true) set to false to not let the titleBar be dragged.
   this is useful with the titleBarPos() to create a stationary menu for the layers - for instance along the edge like tabs
close - (default true) - set to false to not use the close checkbox
   WARNING: without the close checkbox, the user may make the layer bigger than the stage and not be able to deselect the layer
closeColor - (default selectedBackgroundColor) the border of the close checkBox
closeBackgroundColor - (default selectedBackgroundColor) the backgroundColor of the close checkBox
closeIndicatorColor - (default selectedColor) the indicator color of the close checkBox
anchor - (default true) set to false to not anchor the titleBar to the edge if dragged with the Layer (not the titleBar)
   with anchor true, the user can dock the titleBar to the edges and then drag them to any desired location
   the user can snap the titleBar back on the layer by dropping it on the top left corner of the layer or double clicking the titleBar
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
titleBarPos(x, y, right, bottom) - position the titleBar in the titleBarContainer - returns object for chaining
   This will undock the titleBar from the Layer so it can be moved independently
   unless titleBarDraggable is set to false
   See also titleBarX and titleBarY parameters to start titleBars at a certain position
resetTitleBar() - dock the titleBar back on the Layer - returns object for chaining
toggle(state) - toggle the controls or turn on or off the controls by providing a Boolean state - returns object for chaining
resize(dispatch) - resize the Layer and its children if Layer is manually adjusted - returns object for chaining
   for instance, layer.x = 10; layer.resize(); otherwise, the transform controls are broken!
   normal layer transforming using the controls automatically resize.
   Setting dispatch to true will dispatch a "transformed" event
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
transformControls - the transform transformControls object - see below for a description
anchor - get or set whether the titleBar will anchor to the edges of the titleBarContainer
toggled - read only if Layer has its transform turned on - or use transformControls.visible
   use toggle(state) to toggle controls or pass in true for show controls or false for hide controls
titleBar - access to the ZIM Container that holds the titleBar
titleBarDraggable - get or set whether the titleBar can be dragged
   use with titleBarPos() to permanently positing the titleBar
checkBox - access to the ZIM CheckBox that shows when the Layer is active and close is true
button - access to the ZIM Button that makes up the titleBar
label - access to the ZIM Label that is on the Button for the titleBar
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the transformControls property described below for more options.
ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

TRANSFORM CONTROLS OBJECT
Layer receives a transformControls property
This may be slightly delayed as Layer is prepared on stage
var layer = new Layer().center();
timeout(100, function(){zog(layer.transformControls);}); // will probably do the trick
The transformControls property holds the following:

TRANSFORM CONTROL OBJECT PROPERTIES
visible - read only whether the controls are visible
ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost
ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost
scaleControls - reference to the Container that holds the corner boxes for scaling
stretchXControls - reference to the Container that holds the left and right boxes for stretching
stretchYControls - reference to the Container that holds the top and bottom boxes for stretching
rotateControls - reference to the Container that holds the outer circles for rotating

TRANSFORM CONTROL OBJECT METHODS
hide() - hides the controls - returns object for chaining
show() - shows the controls - returns object for chaining
recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES
   if toJSON (default false) is set to true, the return value is a JSON string
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
   if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
   returns object for chaining
remove(noHide) - removes the controls - set noHide true if already hidden
add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show
allowToggleOn() - sets the show / hide controls on with click
allowToggleOff() - removes the show / hide controls on with click
showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters
hideGhost() - hide the ghost outline
toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost
   or set state to true to show ghost or false to not show ghost
addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters
removeGhost() - disable ghost outline functionality
disable() - may show the controls if visible but cannot use them
enable() - turns the using of the controls back on
resize(dispatch) - call resize if the object is transformed in ways other than with the controls
   set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager

EVENTS
dispatches a "transformed" event when being transformed
   the transformed event object has a transformType property
   the transformType property has values of "size", "move", "rotate", "stretch", "reg", "reset"
   the transformType also might be "resize" if resize(true) is called to dispatch a transformed event
   the transformed event object also has a pressup property that is true if on pressup and null if from pressmove
dispatches "transformshow" and "transformhide" events for when click to hide or show controls
If TransformManager() is used there are more events available such as "persistset", etc.

See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[21273] Waiter(container, speed, foregroundColor, backgroundColor, corner, shadowColor, shadowBlur, fadeTime, style, group, inherit)

Waiter
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Adds a little animated three dot wait widget.
You need to call waiter.show() to show the waiter and waiter.hide() to hide it.
You do not need to add it to the stage - it adds itself centered.
You can change the x and y (with origin and registration point in middle).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var waiter = new Waiter(stage);
waiter.show(); // show the waiter until assets load
frame.loadAssets("greeting.mp3");
frame.on("complete", function() {
   waiter.hide();
   frame.asset("greeting.mp3").play();
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
container - (default first frame's stage) the container that holds the waiter
speed - (default .6) cycle time in seconds (also see ZIM TIME constant)
backgroundColor - (default "orange") the background color
foregroundColor - (default "white") the dot color
corner - (default 14) the corner radius of the waiter box
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (defaults rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
fadeTime - (default 0) milliseconds to fade in and out
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show() - shows the waiter (returns the waiter for chaining)
hide() - hides the waiter
toggle(state - default null) - shows waiter if hidden and hides waiter if showing (returns the object for chaining)
   or pass in true to show waiter or false to hide waiter
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
display - reference to the waiter backing graphic
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Waiter


************************************
[21509] ProgressBar(barType, foregroundColor, backgroundColor, borderColor, borderWidth, padding, label, color, labelPosition, percentage, corner, shadowColor, shadowBlur, backing, delay, fastClose, container, autoHide, style, group, inherit)

ProgressBar
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Adds a little progress bar that can be scaled if desired
Pass in to progress parameter of the Frame or LoadAssets call to operate
or use on its own with the show(), hide() methods and percent property

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var progressBar = new ProgressBar();
frame.loadAssets({assets:"greeting.mp3", progress:progressBar});
// a bar will be centered on the default stage (or specify a container)
// the bar will show a percentage of asset bytes loaded
frame.on("complete", function() {
   // the bar will be removed when loading is complete
   frame.asset("greeting.mp3").play();
});

EXAMPLE
// testing progress bar:
new ProgressBar({barType:"rectangle"}).show().run(2); // run for 2 seconds

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
barType - (default "circle") set "rectangle" for rectangular progress bar
foregroundColor - (default green) the color of the bar
backgroundColor - (default dark) the color of the background
borderColor - (default backgroundColor) the color of the border - for "rectangle" barType
borderWidth - (default 10 "circle" or 0 "rectangle") the width of the border (or ring for "circle" barType)
padding - (default 2 for "circle" or 0 for "rectangle") the space between the bar and the backing
label - (null) set to a String or a ZIM Label to specifify label properties
color - (default foregroundColor) the color of the label if there is one
labelPosition - ("bottom" if label specified) also set to "top" to move label above progress bar
percentage - (default false) set to true to show percentage after label (set label to "" for only percentage)
corner - (default 15 for "rectangle" barType) set to 0 for square corners, etc.
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
backing - (default null) a Display object for the backing of the "rectangle" barType (eg. Shape, Bitmap, Container, Sprite)
See ZIM Pizzazz 3 - for patterns - these have a type of "Pattern" which makes them special
If a "pattern" is used then the normal backing will be used to mask the pattern
delay - (default .1) seconds to delay view of progress bar - helps not flash progress bar when content is cached (also see ZIM TIME constant)
fastClose - (default true) hide as soon as progress is done
   The complete event is delayed slightly after the progress bar is loaded
   Set to false to wait until the complete event triggers before removing the progress bar
container - (defaultFrame's stage) or specify a container to hold the progress bar
autoHide - (default true) set to false so bar does not hide when reaching 100%
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show() - shows the progress bar (returns the progress bar for chaining)
hide() - hides the progress bar
toggle(state - default null) - shows progress bar if hidden and hides progress bar if showing (returns the object for chaining)
   or pass in true to show progress bar or false to hide progress bar
run(time, close) - shows and runs the progress bar for the given time (default 3s) (also see ZIM TIME constant)
   setting close to true or false will set the main class autoHide setting
   thanks Racheli Golan for the request
setBacking(backing) - change the backing of the progress bar
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
percent - get or set the percent (0-100) complete of the progress bar
label - reference to the label if there is one
backing - reference to the backing shape.  This may be the backing DisplayObject if provided
   the backing will have a pattern property if a pattern is set for the backing
bar - reference to the bar shape
toggled - read-only Boolean that is true if progress bar is showing otherwise false
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
display - reference to the waiter backing graphic
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
group - used when the object is made to add STYLE with the group selector (like a CSS class)

EVENTS
Dispatches a "complete" event when the loading or running is complete
See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[21860] Indicator(width, height, num, foregroundColor, backgroundColor, borderColor, borderWidth, backdropColor, corner, indicatorType, fill, scale, lightScale, interactive, shadowColor, shadowBlur, selectedIndex, style, group, inherit)

Indicator
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A row of dots or squares that can be used to indicate a step, page, level, score, etc.
The indicator can be used as an input as well but often these are small so may not be best to rely on.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var lights = new Indicator({fill:true});
lights.selectedIndex = 0; // set the first light on
lights.center();
stage.on("stagemousedown", function() {
   // increase the indicator lights each click (then start over)
   lights.selectedIndex = (lights.selectedIndex+1) % lights.num;
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 100) width of indicator
height - (default 50) height of indicator
num - (default 6) the number of lights
foregroundColor - (default "orange") color of the light(s) turned on
backgroundColor - (default "grey") color of the light(s) turned off
borderColor - (default -1 for no border) border color of lights and backdrop (if backdrop)
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
backdropColor - (default -1 for no backdrop) backdrop rectangle around lights
corner - (default 0) the corner radius if there is a backdropColor provided
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
indicatorType - (default "dot" or "circle") can also be "box" or "square"
fill - (default false) set to true to fill in lights to the left of the selectedIndex
scale - (default 1) for all the lights including spacing
lightScale - (default 1) scale for each light - keeping the spacing unchanged
interactive - (default false) set to true to make lights clickable
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 5) the shadow blur if shadow is set
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets or sets the current index of the indicator
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
num - the assigned num value (how many light objects) (read only)
backdrop - gives access to the backdrop if there is one Rectangle
lights - an array of the light objects (zim Circle or Rectangle objects)
lightsContainer - gives access to the lights createjs.Container with its Circle or Rectangle children
enabled - set to false to disable component
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event if press is true and indicator is pressed on and lights change

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Indicator


************************************
[22091] List(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, style, group, inherit)

List
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container

DESCRIPTION
A vertical or horizontal list of items.
This is really a zim.Tabs object inside a zim.Window object.
The list can be strings, numbers or Label objects and these are added to Tabs buttons.
The list can also include any DisplayObject with bounds (which most ZIM objects have except a Shape needs bounds set manually with setBounds()).
If the object is not a string, number or Label then selection will not highlight and currently animateTo() may not work if size is different.
See: https://zimjs.com/explore/list.html
See: https://zimjs.com/explore/listObjects.html

ACCORDION
An accordion is a list with nested sections that expand open.
A special accordion object can be passed to the list parameter
that includes the menu items, styles for the sub menus
and properties to animate, shade and indent the sub menus.
See: https://zimjs.com/ten/accordion.html

PULLDOWN AND LIST COMPONENTS
The pulldown parameter can be set to true to make list act like a pulldown
This hides the backdrop and border and can be set to be collapsed or expanded
There are component items available for slider, checkbox and colorPicker
See: https://zimjs.com/ten/pulldown.html
There is also a checkBox parameter to make a list of checkboxes
This acts like a multiple select list
See: https://zimjs.com/ten/listcheckbox.html

SPACING, PADDING, INDENTING
These adjust depending on vertical or horizontal settings
The spacing is the distance between items (default 2)
The padding is the distance around the items but not between (default spacing)
So changing the spacing can seem to change the padding - but that can be overridden
There is also paddingVertical and paddingHorizontal that can be adjusted (default padding)
Indent only works with custom items in the list in left, right alignment or top, bottom valignment
This moves the items away from their alignment
There is also label indenting for items with labels - and labelIndentVertical and labelIndentHorizontal

NOTE: List can have a ZIM Organizer added with the organizer parameter
The organizer lets the user add, remove and move items up, down, to the top or the bottom
See: https://zimjs.com/docs?item=organizer
See: https://zimjs.com/explore/organizer.html

NOTE: set the enable property to false as animating the position of the List object (or its parent Window)
then set the enable property to true on the animate call function.  See update() in Window docs for more

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var list = new List({
   list:["Enormous", "Big", "Medium", "Small", "Puny"],
   viewNum:3, // this number will change the size of the list elements (default is 5)
}).center()
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of list
height - (default 200) height of list
list - (default Options 1-30) an array of strings, numbers or zim Label objects - these will be added to zim Tabs Buttons
   or include any DisplayObject with bounds - these will not get highlighted but will indicate a change event and selectedIndex
   currently objects with different sizes may not animateTo() properly - this will be fixed soon.
   A special Accordion object literal {} can be provided - see: https://zimjs.com/ten/accordion.html
      with the following properties:
      menu - a SIMPLE or COMPLEX hierarchy input - see ZIM Hierarchy() in the Code module
         note: if just providing the menu and the rest of the properties below are default
         then the Accordion object literal can be the SIMPLE or COMPLEX hierarchy input.
         In other words, no need to pass in {menu:{blah}} just pass in {blah}
      open - (default false) set to true to start the list opened
      shade - (default .2) the alpha of indented shade in sub menus - or false for no shading
      shift - (default 15) the pixels to indent the shade - and left or right aligned text of sub menus - or false for no indenting
      dim - (default .1) the alpha of dark background overlay on sub menus - or false for no dimming
      bloom - (default false) time in seconds for each submenu item to be added - or false to not animate sub menus in - if true default time is .1 second
      whither - (default false) time in seconds for each submenu item to be removed - or false to not animate sub menus out - if true default time is .1 second
      arrows - (default false) show arrows instead of +- for expanding and collapsing - thanks Christopher Browne for the request
      subStyles - (default null) an array of style objects for each sublevel - with all the color and background color properties
   note: the Accordion List is currently incompatible with the Organizer, addTo() and removeFrom()
viewNum - (default 5) how many items to show in the width and height provided
   adjusting this number will also change the overall scale of custom items
   or see the noScale parameter to avoid scaling custom items
vertical - (default true) set to false to make a horizontal list
currentSelected - (default false) set to true to show the current selection as highlighted
align - (default "center") horizontal align
valign - (default "center") vertical align
labelAlign - (default "center") horizontal align of the label only
labelValign - (default "center") vertical align of the label only
labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in list
labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set
labelIndentVertical - (default indent) vertical indent of label when align or valign is set
indent - (default 10) indent of items when align or valign is set and there are custom objects in list
spacing - (default 2) is the pixels between tab buttons
backgroundColor - (default "#777") the background color of the list elements (unless custom object)
rollBackgroundColor - (default "#555") the background color of the list element as rolled over
selectedBackgroundColor - (default "#444") the background color of the list element when selected
backdropColor - (default "#333") the background color of the list window (any CSS color)
color - (default "white") the text color of a deselected list element when not rolled over
rollColor - (default color) the rollover color
selectedColor - (default color) the text color of the selected list element
selectedRollColor - (default color) the text color of the rolled over selected list element
borderColor - (default #999) border color
borderWidth - (default 1) the thickness of the border
padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical)
corner - (default 0) is the rounded corner of the list (does not accept corner array - scrollBars are too complicated)
swipe - (default auto/true) the direction for swiping set to none / false for no swiping
   also can set swipe to just vertical or horizontal
scrollBarActive - (default true) shows scrollBar (set to false to not)
scrollBarDrag - (default true) set to false to not be able to drag the scrollBar
scrollBarColor - (default borderColor) the color of the scrollBar
scrollBarAlpha - (default .3) the transparency of the scrollBar
scrollBarFade - (default true) fades scrollBar unless being used
scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar
scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar
scrollBarOverlay - (default true) set to false to not overlay the scrollBar on the cotnent
   overlaying could hide content - but without overlay, content less than window size will show gap when no scrollBar
slide - (default true) Boolean to throw the content when drag/swipe released
slideDamp - (default .6) amount the slide damps when let go 1 for instant, .01 for long slide, etc.
slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal"
   slides past bounds and then snaps back to bounds when released
   vertical snaps when dragging up and down but not if dragging horizontal
shadowColor - (default rgba(0,0,0,.3)) the color of the shadow
shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow
paddingHorizontal - (default padding) places content in from left and right
paddingVertical - (default padding) places content in from top and bottom
scrollWheel - (default true) scroll vertically with scrollWheel
damp - (default null) set to .1 for instance to damp the scrolling
titleBar - (default null - no titleBar) a String or ZIM Label title for the list that will be presented on a titleBar across the top
titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag list
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
onTop - (default true) set to false to not bring list to top of container when dragging
close - (default false) - a close X for the top right corner that closes the list when pressed
closeColor - (default #555) - the color of the close X if close is requested
excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the custom buttons
organizer - (default null) the ZIM Organizer for the list
checkBox - (default false) set to true to turn labeled list into a list of ZIM CheckBox objects - thanks Dale789 for the prompting!
   See: https://zimjs.com/ten/listcheckbox.html
   use selected.checkBox to get access to the selected CheckBox
   use the checkBoxes property to get a list of the CheckBox objects
   use setCheck(index, type), setChecks(type), getCheck(index) methods to manipulate
   use STYLE to set CheckBox size
pulldown - (default false) set to true to have List act like a Pulldown
   See: https://zimjs.com/ten/pulldown.html
clone - (default false) set to true to add clones of the list items rather than the items themselves
cancelCurrentDrag - (default false) - set to true to cancel window dragging when document window loses focus
   this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default
selectedIndex - (default 0) - set the selectedIndex at start
noScale - (default false) - set to true to not scale custom items - this ignores viewNum
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
animateTo(index, timePerItem) - animate list to index at given time per item (default 50ms) - returns object for chaining
addAt(items, index, style, clone) - an array of items to insert at an index in the list - returns object for chaining
   clone defaults to false - set to true to add a clone of the item or items to the list
removeAt(number, index) - remove a number of elements (default 1) from the list starting at and including the index - returns object for chaining
clear() - clears the list
first() - select first list element - returns object to chain
last() - select last list element - returns object to chain
setCheck(index, type) - set the CheckBox at an index to true or false (the type parameter)
setChecks(type) - set all CheckBoxes to true or false (the type parameter) returns object for chaining
getCheck(index) - get the checked value of the CheckBox at an index
cancelCurrentDrag() - stop current drag on list - but add dragging back again for next drag
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

COMPONENT LIST ITEMS
These static methods make special List items with components
See: https://zimjs.com/ten/pulldown.html
Each may have a label, min, max, starting val, steps, etc.
Each has a call parameter for the function to call when the component changes
There are alternatively obj and property parameters
Setting these will change the property of the obj to the value of the component

List.slider(label, min, max, val, call, step, obj, property, paddingLeft, paddingRight)
   A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item
List.checkBox(label, checked, call, obj, property, paddingLeft, paddingRight)
   A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item
List.colorPicker(label, color, picker, call, obj, property, paddingLeft, paddingRight)
   A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item
   picker is an optional custom ZIM ColorPicker

This static method is used internally by the checkBox parameter of List
It can be used to create a checkBox list element - but also see List.checkBox() above
which is a little different and matches the format of the other List Items
List.checkItem(text, width, paddingHorizontal, paddingVertical, color, rollColor, backgroundColor, rollBackgroundColor, selectedColor, selectedRollColor, selectedBackgroundColor, selectedRollBackgroundColor)
   A static method (use it like List.checkItem("hello", 30, 300, 10, 10, white, etc.))
   To add a checkItem to a plain list use:
   new List({list:["goodbye", List.checkItem("hello", 30, 300, 10, 10, white), "what?"]})

ALSO: All Window methods

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - get or set the index of the selected list element
selectedIndexPlusPosition set the index and scroll the index into view - might be broken for lists with custom objects of different heights
accordionIndex - read only index of the selected item inside an accordion otherwise is undefined
selected - gets the current selected list object (ie. a Button)
   use selected.checkBox to access the selected CheckBox if checkBox parameter is true
currentValue - gets or sets the current value - in setting, it matches the first label that has the value anywhere in it
text - gets or sets the current selected label text
label - gets current selected label object
items (or list) - read-only array of list button objects or objects in the list
   this will change from the list entered as parameters as strings are turned into tab buttons, etc.
   use addAt() and removeAt() methods to manipulate
   custom items can be accessed using item.content - as the item is a container with a backing then content
   each item has the following properties:
      index, label, accordion (Label for accordion +- or arrows), listZID (see Hierarchy) and other properties depending on the item
checkBoxes - read-only array of CheckBox objects if checkBox parameter is true
itemsText - read-only array of text for labels (or null element if no label)
itemWidth - the width of each item (unless custom items)
itemHeight - the height of each item (unless custom items)
length - read-only length of the list
tabs - a reference to the tabs object used in the list
vertical - read-only true if list is vertical or false if horizontal
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: All Window properties - like titleBar, titleBarLabel, etc.

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event - then use selectedIndex or text to find data

ALSO: All Window events including "scrolling"

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[23143] Stepper(list, width, backgroundColor, borderColor, borderWidth, label, color, vertical, arrows, corner, shadowColor, shadowBlur, continuous, display, press, hold, holdDelay, holdSpeed, draggable, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward, selectedIndex, style, group, inherit)

Stepper
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Lets you step through a list of numbers or strings with arrows and keyboard arrows.
Uses mousedown to activate and defaults to stepping while pressing down
and going faster if you drag away from your press.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var stepper = new Stepper();
stepper.on("change", function() {
   zog(stepper.selectedIndex);
   zog(stepper.currentValue);
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
list - (default 1-10) pass in an array of strings or numbers to display one at a time
   change the stepperType parameter to display other than numbers
   for instance a set of words ["hello", "goodbye", "wow", "omg!"]
   would need a stepperType of "list" to be set
width - (default 100) is the width of the text box (you can scale the whole stepper if needed)
color - (default "white") for the arrows and the text box
borderColor - (default null) stroke color for the box
borderWidth - (default 1 if borderColor) stroke thickness for the box
label - (default null) which can be used to define custom text properties
vertical - (default false) set to true if you want the arrows above and below the text
arrows - (default true) - use graphical arrows (also see keyArrows to turn off keyboard arrows)
corner - (default 10) is the radius of the text box corners - set to 0 for square corners
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow
shadowBlur - (default 14) value for shadow blur if shadow is set
continuous - (default false) set to true to loop around or go back past 0 index
display - (default true) set to false just to just show the arrows and not the value
press - (default true) will advance on label mousedown - set to false to not advance on mousedown
hold - (default true) set to false to not step with extended press down
holdDelay - (default .4) time (seconds) to wait for first step with hold (also see ZIM TIME constant)
holdSpeed - (default .2) time (seconds) between steps as holding (also see ZIM TIME constant)
draggable - (default true) set to false to not step when dragging
dragSensitivity - (default .1) .01 changes really quickly - 1 changes at base rate
dragRange - (default 200) absolute distance (pixels) from press the drag will reach maximum
stepperType - (default "number") makes numbers, words, letters to step through
   also stepperType "list", "letter" - these get ranges below
min - (default 0 for number and "A" for letter) the minimum value (can make min bigger than max) (not for list stepperType)
max - (default 10 for number and "Z" for letter) the maximum value (can make max smaller than min) (not for list stepperType)
step - (default 1) the step value each time - can be decimal (only positive, only for number stepperType)
step2 - (default set to step) the step value when dragging perpendicular to main horizontal or vertical direction
   step2 will run with draggable set to true or with arrows2 set below (only positive, only for number stepperType)
arrows2 - (default true if step2 different than step and stepperType number - else false) secondary arrows perpendicular to main horizontal or vertical direction
   arrows2 will activate step2 above (only for number stepperType)
arrows2Scale - (default .5) the scale relative to the main arrows
keyEnabled - (default true) set to false to disable keyboard search / number picker
keyArrows - (default true) set to false to disable keyboard arrows
rightForward - (default true) set to false to make left the forward direction in your list
downForward - (default true except if stepperType is "number" then default false) set to false to make up the forward direction in your list
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
next() - goes to next
prev() - goes to previous
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets or sets the current index of the array and display
currentValue - gets or sets the current value of the array and display
currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
stepperArray - gets or sets the list
containerPrev, containerNext - access to the zim Container that holds the arrows
arrowPrev, arrowNext - access to the zim Triangle objects
arrowPrev2, arrowNext2 - access to the zim Triangle objects for arrows2
min, max - only for number mode at the moment - currently, do not change the max to be less than the min
label - access to the Label
textBox - access to the text box backing shape
continuous - does the stepper loop
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

EVENTS
dispatches a "change" event when changed by pressing an arrow or a keyboard arrow
(but not when setting selectedIndex or currentValue properties)

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[24056] Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, damp, currentValue, style, group, inherit)

Slider
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A traditional slider - will give values back based on min and max and position of button (knob).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var slider = new Slider({step:1})
   .center()
   .change(function() {
      zog(slider.currentValue); // 0-10 in steps of 1
   });
// or create an on("change", function) event (do not chain on)

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
min - (default 0) the minimum value for the slider
max - (default 10) the maximum value for the slider
step - (default 0) 0 is continuous decimal - 1 would provide steps of 1, 2 would provide steps of 2, etc.
button - (default small button with no label) - a zim Button or string as follows:
   "pill" - a narrow rectangle with rounded corners
   "aztec" - a quadrilateral with fat side and skinny side (default for sound)
   "circle" - a circle - can be oval with different width or height
   "grip" - adds three grip lines to button
barLength - (default 300) the length of the bar (the slider slides along its length)
barWidth - (default 3) the width of the bar (how fat the bar is)
barColor - (default "#666") the color of the bar (any CSS color)
vertical - (default false) set to true to make slider vertical
useTicks - (default false) set to true to show small ticks for each step (step > 0)
tickColor - (default barColor) set the tick color if ticks are set
tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount
semiTicks - (default .25) add a number of semiTicks.  1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc.
tickScale - (default 1) scale the height of the ticks
semiTickScale - (default 1) scale the height of the semiTicks
accentSize - (defualt 0) height of a bar next to slider that can be used to accent selection
accentOffset - (default 24) distance from edge of slider the accent will show
accentColor - (default zim.pink) color of filled part of accent
accentBackgroundColor - (default clear) color of background of accent
accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize
   this is used to stop bleeding of accent background
   but can also be used to make the accent half the width of the background so it runs in a track, etc.
   or fatter than the background so it runs on a wire or mono-rail
sound - (default false) - set to true to adjust various defaults for ticks, accent, button
inside - (default false) set to true to fit button inside bar (need to manually adjust widths)
keyArrows - (default true) set to false to disable keyboard arrows
keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
   if step is set, then this value is ignored and set to step
keyArrowsH - (default true) use left and right arrows when keyArrows is true
keyArrowsV - (default true) use up and down arrows when keyArrows is true
damp - (default null) set to value such as .1 to damp the slider currentValue
   use with Ticker rather than "change" event - eg:
   Ticker.add(function () {circle.x = slider.currentValue;});
currentValue - (default min) a starting value for the slider
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
currentValue - gets or sets the current value of the slider
currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
min, max, step - read only - the assigned values
bar - gives access to the bar Rectangle
button - gives access to the Button
ticks - gives access to the ticks (to position these for example)
accent - gives access to the access Shape
accentBacking - gives access to the accessBacking Shape
keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

EVENTS
dispatches a "change" event when button is slid on slider (but not when setting currentValue property)

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Slider


************************************
[24655] Selector(tile, borderColor, borderWidth, backgroundColor, corner, dashed, padding, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit);

Selector
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Selector acts on a ZIM Tile to provide an interactive selector that highlights a tile element.
The selector works as a select bar and a select pad.

See: https://zimjs.com/ten/wrapper.html which includes several Selector objects as bars
Selector as a pad would be similar to selecting letters on an onscreen TV remote system

Selector has a multi parameter that allows for multiple elements to be in selected mode.
The selectedIndex or selectedItem will only be the last selected.
And only one selecteIndex can be set at a time
but as many as desired can be set one after another - in a loop for instance.
The difference is that once selected, the item remains highlighted until unselected with a presseup.
This allows for a synth pad for instance where multiple notes can be played at the same time.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// the items in the Tile should be centerReg()
new Selector(new Tile(new Rectangle().centerReg(), 4, 4, 20, 20))
   .center()
   .change(function (e) {
      e.target.currentItem.alpha = 0;
      stage.update();
   });
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
tile - (default four red circles) the ZIM Tile to which to apply the selector
   the elements should have their registration centered
   see Tile for how to tile a series of different objects, etc.
   this will work as a horizontal or vertical bar or a grid selector
borderColor - (default "white") the border color of the selector
borderWidth - (default 2) the border width of the selector
backgroundColor - (default "rgba(0,0,0,.1)") the background color of the selector
corner - (default 10) the corner radius of the selector
dashed - (default false) the dashed border setting of the selector
paddingHorizontal - (default half tile spacingH) the space from the selected item
paddingVertical - (default half tile spacingV) the background color of the selector
speed - (default 2) the speed the selector moves to the next selection - can set to 0 for instant
diagonal - (default false) defaults to animate horizontally and vertically - set to true for diagonally
dim - (default null) set to true for .7 alpha or a number between 0-1 for tile to dim while selector animates
multi - (default false) set to true to enable multiple highlights
   selectedIndex and selectedItem will still read only the last selected tile or set only one tile at a time
   will need a multitouch devices - degrades fine to single touch if no multitouch
keyArrows - (default true) set to false to disable keyboard arrows
behind - (default false) set to true to put selector behind tile
resizeScale - (default false) set to true to resize the border as selector changes scale
selectedIndex - (default 0) the item index on which to start the selector - set to -1 for no selection
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - the index number of the selected item in the tile - set to -1 for no selection
currentItem - gets or sets the current item under the selector
noAnimate - set to make the next selectedIndex or currentItem call not animate to tile
MULTI - in a change event with multi set:
   downIndex - this will be the index under the selector on press down (or null if pressing up)
   upIndex - this will be the index under the selector on press up (or null if pressing down)
   downItem - this will be the item under the selector on press down (or null if pressing up)
   upItem - this will be the item under the selector on press up (or null if pressing down)
lastIndex - get the last selected index
lastItem - get the last selected item
selectedCol - get the index of the selected column
selectedRow - get the index of the selected row
lastCol - get the index of the last selected column
lastRow - get the index of the last selected row
tile - a reference to the Tile object
selector - a reference to the Rectangle object used as the selector
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event when selector finishes animating to a new selection
note that a tap() or mousedown/click function can be used if the selectedIndex is desired right away

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[25074] Dial(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, useTicks, innerTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, innerCircle, innerScale, innerColor, inner2Color, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, linear, gap, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, currentValue, style, group, inherit);

Dial
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A traditional dial - will give values back based on min and max and position of dial.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var dial = new Dial({step:1, color:"violet"});
dial.center();
dial.on("change", function() {
   zog(dial.currentValue); // 1-10 in steps of 1
});
stage.update();

EXAMPLE
// adding numbers around dial
dial.ticks.loop(function(tick,i) {
   new Label(i, 16).centerReg(tick).rot(-tick.rotation).mov(0,-20);
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
min - (default 0) the minimum value for the dial
max - (default 10) the maximum value for the dial
step - (default 1) 1 provides steps of 1, 0 is continuous decimal, 2 would provide steps of 2, etc.
width - (default 100) the width of the dial (diameter)
backgroundColor - (default "#666") the background color of the dial
indicatorColor - (default "#222") the color of the indicator
indicatorScale - (default 1) the scale of the indicator
indicatorType - (default "arrow" or "triangle") can also be "dot" or "circle", and "line" or "rectangle"
useTicks - (default true - unless step set to 0) will show lines for ticks
innerTicks (default false) set to true to put the ticks inside if step is set
tickColor - (default backgroundColor) set the tick color if ticks are set
tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount
semiTicks - (default 0) add a number of semiTicks.  1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc.
tickScale - (default 1) scale the height of the ticks
semiTickScale - (default 1) scale the height of the semiTicks
innerCircle - (default true) gives an inner knob look - set to false for flat
innerScale - (default 1) can be adjusted along with indicatorScale to get a variety of looks
innerColor - (default "rgba(0,0,0,.2)") color of first inner circle
inner2Color - (default "rgba(0,0,0,.1)") color of inside inner circle
accentSize - (defualt 0) height of a ring around the dial that can be used to accent selection
accentOffset - (default .45 width/2) distance from edge of dial the accent will show
accentColor - (default zim.pink) color of filled part of accent
accentBackgroundColor - (default clear) color of background of accent
accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize
   this is used to stop bleeding of accent background
   but can also be used to make the accent half the width of the background so it runs in a track, etc.
   or fatter than the background so it runs on a wire or mono-rail
sound - (default false) - set to true to rotate dial -180 and set a gap of .25
   adjusts various defaults for ticks, accent, indicatorType, etc.
linear - (default false - unless sound is true) - set to true to pressdrag up and down to increase and decrease dial
gap - (default 0) ratio of circle 360 to leave as a gap between dial start and dial end
limit - (default true) stops dial from spinning right around - set to false to not limit dial
keyArrows - (default true) set to false to disable keyboard arrows
keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
   if step is set, then this value is ignored and set to step
keyArrowsH - (default true) use left and right arrows when keyArrows is true
keyArrowsV - (default true) use up and down arrows when keyArrows is true
continuous - (default false) this turns the dial into a continuous dial from the min at the top
   The (max-min)/360 give a delta value per degree
   and as the dial goes clockwise it adds the delta and as it goes counterclockwise it subtracts the delta
   The steps are still used or not if set to zero
   The min and max are no longer a real min and max - see the continuousMin and continuousMax below
   limit is ignored or set to false when continuous is true
continuousMin - (default null) set to Number to limit the minimum total value of the dial when continuous is true
continuousMax - (default null) set to Number to limit the maximum total value of the dial when continuous is true
damp - (default null) set to value such as .1 to damp the slider currentValue
   IGNORED when limit set to false - otherwise may damp incorrectly
   use with Ticker rather than "change" event - eg:
   Ticker.add(function () {circle.x = slider.currentValue;});
currentValue - (default min value) - set the currentValue at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
currentValue - gets or sets the current value of the dial
currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
min, max - read only assigned values unless continuous is true - then write enabled
step - read only - the assigned values
continuous - gets a boolean as to whether the continuous is true (read only)
continuousMin - get or set the continuousMin if continuous is set to true
continuousMax - get or set the continuousMax if continuous is set to true
backing - gives access to the dial backing Circle
inner and inner2 give access to any inner circles
ticks - gives access to the ticks (to scale these for example)
accent - gives access to the access Shape
accentBacking - gives access to the accessBacking Shape
indicator - gives access to the indicator container with registration point at the dial center
indicatorShape - gives access to the shape on the end of the indicator (zim Triangle, Circle, Rectangle)
keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

EVENTS
dispatches a "change" event when dial changes value (but not when setting currentValue property)

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Dial


************************************
[25752] Tabs(width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, style, group, inherit)

Tabs
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A traditional tab layout for along the edge of content.
Can also act as an independent button row or column.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var tabs = new Tabs({tabs:["A", "B", "C", "D"], spacing:5, corner:14});
tabs.center();
tabs.on("change", function() {
   zog(tabs.selectedIndex);
   zog(tabs.text);
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 240) overall width of tab set (ZIM divides the width across tabs and spacing)
height - (default 60) height of tabs
tabs - (default ["1","2","3","4"]) an array of any String, Number, Label, Button, (or any DisplayObject)
   OR tab objects with the following properties available:
   any tab specific properties will override the default values from other parameters
   [{label:"String", width:200, backgroundColor:"red", rollBackgroundColor:"pink", selectedBackgroundColor:"grey", color:"yellow", selectedColor:"lime"}, {etc.}]
   label can be a String or a Label object - default text color is white
   Tab objects can also include wait properties for individual buttons.
   (this was put in place before Buttons were allowed in the tabs array - so you can just add a Button to the tab array instead)
   See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below
   wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
   also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
   wait will primarily be applicable when the tabs are used as a set of buttons rather than traditional tabbing
   Warning - do not use the same array for multiple tabs as the array is turned into an array of objects used by the Tabs object.
backgroundColor - (default "#777") the background color of a deselected tab when not rolled over
rollBackgroundColor - (default "#555") the rollover background color
selectedBackgroundColor - (default "#333") the background color of the selected tab (any CSS color)
selectedRollBackgroundColor - (default rollBackgroundColor) the background color of the selected tab on rollover (if currentEnabled is true)
color - (default "white") the text color of a deselected tab when not rolled over
rollColor - (default color) the rollover color (selected tabs do not roll over)
selectedColor - (default color) the text color of the selected tab (any CSS color)
selectedRollColor - (default rollColor) the text color of the selected tab on rollover (if currentEnabled is true)
vertical - (default false) set to true to make vertical tabs with text still horizontal
spacing - (default 1) is the pixels between tab buttons
currentEnabled - (default false) set to true to be able to press (a second time) the selected tab button
currentSelected - (default true) set to false to not highlight the current button (good for button bars)
   setting this to true will set currentEnabled to true
corner - (default 0) the corner radius of the tabs
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
base - (default "none") specifiy a side for flat bottom when corner is set (but not set to an array)
   other values are "bottom" (default when corner and not vertical), "left" (default when corner and vertical), "top", "right"
   ** this was flatBottom - but then vertical tabs were added so it was changed in ZIM 9.2.0
keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards
gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs
gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs
wait - (default null) String text for tab to say when pressed to enter a wait mode
   The wait parameters can be (and probably will be) set as properties for each individual tab in the tabs array
waitTime - (default 20000) milliseconds to stay in wait state before returning to normal tab
waitBackgroundColor - (default color) the color of the tab during wait period
rollWaitBackgroundColor - (default color) the color of the tab during wait period
waitBackgroundColor - (default red) color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
waitModal - (default false) set to true to exit wait state if user clicks off tabs or to another tab
waitEnabled - (default true) set to false to disable tabs while in wait mode
backdropColor - (default null) set to a color to show behind the tabs (handy for when corner is not 0)
align - (default "center") horizontal align
valign - (default "center") vertical align
labelAlign - (default "center") horizontal align of the label only
labelValign - (default "center") vertical align of the label only
labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in tabs
labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set
labelIndentVertical - (default indent) vertical indent of label when align or valign is set
indent - (default 10) indent of items when align or valign is set and there are custom objects in tabs
useTap - (default false) set to true to use tap to activate otherwise uses ACTIONEVENT (mousedown or click)
excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the buttons
selectedIndex - (default 0) - set the selectedIndex at start
styleLabels - (default false) - set to true to pass styles to Tab labels
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
addAt(items, index, setStyle) - an array of items to insert at an index in the tab - tabs will grow in size - returns the object for chaining
   To keep the same size - run insertAt() and then remake the Tabs using the tabs.buttons array as the tabs parameter
   Can also send in a setStyle object literal {} with color, rollColor, selectedColor and selectedRollColor plus the background color versions of these!
removeAt(index, number) - remove a tab index an number of items (default 1) - tabs will shrink in size - returns the object for chaining
first() - select first tab - returns object to chain
last() - select last tab - returns object to chain
getItemIndex(item) - gets the index of the list item provided

hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets or sets the selected index of the tabs
selected - gets the selected button - selected.enabled = true, etc.
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
tabs - gets or sets tabs object (will have to manually change buttons as well as adjust props)
backgroundColor - gets or sets default unselected background color - not applied to custom buttons
rollBackgroundColor - gets or sets default rolled over background color - not applied to custom buttons
selectedBackgroundColor - gets or sets default selected background color - not applied to custom buttons
selectedRollBackgroundColor - gets or sets default selected roll background color - not applied to custom buttons
color - gets or sets default unselected text color - not applied to custom buttons
rollColor - gets or sets default rolled over text color - not applied to custom buttons
selectedColor - gets or sets default selected text color - not applied to custom buttons
selectedRollColor - gets or sets default selected roll text color - not applied to custom buttons
text - gets current selected label text
label - gets current selected label object
buttons - an array of the ZIM Button objects. buttons[0].enabled = false;
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
buttonDown - the button that is currently being pressed
backdrop - reference to backdrop Rectangle if backdropColor is provided
keyEnabled - gets or sets whether the tab key and shift tab key cycles through tabs (does not affect accessibility)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when a tab changes (but not when setting selectedIndex property)

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Tabs


************************************
[26641] Pad(width, cols, rows, keys, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, selectedIndex, style, group, inherit)

Pad
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A pad that has rows and cols made of square keys.
When the keys are pressed the pad will dispatch a change event - get the selectedIndex or text property.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var pad = new Pad();
pad.center();
pad.on("change", function() {
   zog(pad.selectedIndex); // 0-8
   zog(pad.text); // 1-9
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** inherits STYLE from type selector for Pad, then general styles then type selector for Tabs
width - (default 150) overall width of pad (ZIM divides the width across cols and spacing)
cols - (default 3) the columns in the pad
rows - (default cols) the rows in the pad
keys - (default an Array for cols x rows) an array of key objects with the following properties available:
   any key specific properties will override the default values from other parameters
   [{label:"String", width:200, backgroundColor:"Red", rollBackgroundColor:"pink", selectedBackgroundColor:"grey"}, {etc.}]
   the label can be a String or a Label object - default text color is white
   Key objects can also include wait properties for individual buttons.
   See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below
   wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
   also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
backgroundColor - (default "#777") the background color of a deselected key when not rolled over
rollBackgroundColor - (default "#555") the rollover background color (selected keys do not roll over)
selectedBackgroundColor - (default "#333") the background color of the selected key (any CSS color)
color - (default "white") the text color of a deselected key when not rolled over
selectedColor - (default color) the text color of the selected key (any CSS color)
rollColor - (default color) the rollover color (selected keys do not roll over)
spacing - (default 1) is the pixels between key buttons
currentEnabled - (default true) set to false to make selected key not pressable
corner - (default 0) the corner radius of the keys
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
labelColor - (default "white") the color of the label
gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs
gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs
wait - (default null) String text for button to say when pressed to enter a wait mode
   The wait parameters can be (and probably will be) set as properties for each individual button in the pads array
waitTime - (default 20000) milliseconds to stay in wait state before returning to normal button
waitBackgroundColor - (default color) the color of the button during wait period
rollWaitBackgroundColor - (default color) the color of the button during wait period
waitBackgroundColor - (default red) color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
waitModal - (default false) set to true to exit wait state if user clicks off the pad or to another button
waitEnabled - (default true) set to false to disable pad while in wait mode
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets or sets the selected index of the pad
text - gets current selected label text
selected - gets the selected button - selected.enabled = true, etc.
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
label - gets current selected label object
selectedBackgroundColor - gets or sets default selected background color
backgroundColor - gets or sets default unselected background color
rollBackgroundColor - gets or sets default rolled over background color
color - gets or sets default unselected text color
rollColor - gets or sets default rolled over text color
selectedColor - gets or sets default selected text color
buttons - an array of the ZIM Button objects. buttons[0].enabled = false;
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
tabs - an array of the zim Tabs objects (one object per row)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when a pad changes (but not when setting selectedIndex property)

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=Pad


************************************
[26895] DPad(axis, width, backgroundColor, borderWidth, borderColor, indicatorColor, indicatorPressColor, indicatorScale, indicatorRadius, innerCircle, innerScale, activeRadius, clamp, logo, style, group, inherit)

DPad
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A DPad (Directional Pad) can be used to control x and y values
This is primarily handy on mobile where a substitute for keypresses is needed
The DPad can be set up for all directions, horizontal or vertical
The DPad can be passed in to a ZIM MotionController to control an object

See: https://zimjs.com/ten/dpad.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var dPadH = new DPad().pos(50,50,false,true);
new MotionController({
   target:new Circle().center(),
   type:dPadH,
   speed:mobile()?100:80,
   boundary:new Boundary(0,0,stageW,stageH)
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
axis - (default "all") set to "horizontal" or "vertical" or "all".  Appropriate arrows will show
width - (default 100) width of DPad backgroundColor - (default "#777") the background color of a deselected key when not rolled over
backgroundColor - (default "#666") the background color (any zim or html color)
indicatorColor - (default "#ddd") the color of the arrows
indicatorPressColor - (default "#eee") the color of the arrows as pressed
indicatorScale - (default 1) the scale of the arrows
indicatorRadius - (default null) set the indicator radius
innerCircle - (default true) set to false to not show an inner circle
innerScale - (default .5) the scale relative to the indicator
activeRadius - (default width*2) radius at which the DPad works
clamp - (default true) set to false to not limit the value between -1 and 1
logo - (default false) set to true to show the letter D in the DPad - or add your own
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
dirX, dirY - the x and y values for the DPad - between -1 and 1 if clamp is set
   these can be multiplied by a factor to adjust speed - or use speed parameter of associated MotionController
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
enabled - default is true - set to false to disable
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event with dirX and dirY provided as well on the event object

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[27100] Radial(labels, size, font, height, coreRadius, coreColor, startAngle, totalAngle, angles, flip, shiftVertical, icons, rollIcons, rotateIcons, iconsShiftVertical, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, selectedIndex, style, group, inherit)

Radial
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A radial ring with selectable buttons with lables or icons
Used internally by ZIM RadialMenu which has expandable rings for a hierarchical interface
Radial uses LabelOnArc for labels

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var radial = new Radial(["one", "two", "three", "four"]).center();
radial.change(function () {
   zog(radial.selectedIndex);
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)

labels - (default ["A", "B", "C", "D", "E"]) an array of text or ZIM Label objects for buttons
size - (default 30) label size
font - (default "verdana") the font - can also import fonts in Frame() asset parameter or frame.loadAssets()
startAngle - (default null) will start first button centered at top - see also totalAngle
   setting an angle will start left side of first button at this angle
   with 0 being the top (note, ZIM angles usually start along x axis - but not here)
totalAngle - (default 360) set to use only a portion of the circle - see also startAngle
angles - (default null) can set an array of angles for center of the buttons
   can use angles property toString() to get existing angle data
   this can be modified to suit and passed into this parameter for unequal button sizes
flip - (default true) flip the text between 90 and -180 (from 0 at top)
shiftRadial - (default 0) amount to shift text in radially
icons - (default null) set to an array of objects that will go under the text
   can set the labels to ["", "", "", etc.] to hide the text
   icons should be centerReg({add:false}) to ensure centered placement
rollIcons - (default null) set to an array of objects to replace icon when rolled over
rotateIcons - (default false) set to true to rotate icons around radial
iconsShiftRadial - (default 0) amount to shif the icons radially
height - (default 60) height of radial - not including core
coreRadius - (default 100) the radius of the core
   this is fairly large but can sca(.5) the radial after creating, etc.
coreColor - (default #333) the color of the core
backgroundColor - |ZIM VEE| - (default "#666") the background color of a button
   ZIM VEE means you can specify different colors for instance: series(blue, green, red, yellow)
   these would then be the color order of the buttons - same for rollBackgroundColor, etc.
rollBackgroundColor - |ZIM VEE| - (default "#777") the rollover background color of a button
selectedBackgroundColor - |ZIM VEE| - (default "#444") the background color of the selected button
selectedRollBackgroundColor - |ZIM VEE| - (default selectedBackgroundColor) the roll background color of the selected button
backdropColor - (default clear) set to change the color behind the radial - including spacingOuter
color - |ZIM VEE| - (default "white") the text color of the button
rollColor - |ZIM VEE| - (default color) the rollover text color of the button
selectedColor - |ZIM VEE| - (default color) the text color of the selected button
selectedRollColor - |ZIM VEE| - (default color) the rollover text color of the selected button
borderColor - (default #333) color of the button border
borderWidth - (default 2) width of the button border
gradient - (default null) set to a number between 0 and 1 - would suggest .1 for gradient on button
gap - (default 6 pixels or 3 degrees if gapAsAngle is true) gap between buttons
gapAsAngle - (default false) set to true set gap as angle
spacing - (default 6) radial spacing around button from core or edge of backdrop
spacingInner - (default spacing) inside radial spacing from core
spacingOuter - (default spacing) outside radial spacing from edge of backdrop
currentEnabled - (default false) set to true to make selected key pressable (for change event)
currentSelected - (default true) set to true to make selected key show selected colors
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets or sets the selected index of the pad
text - gets current selected label text
label - gets current selected label object
selected - gets the selected button - selected.enabled = true, etc.
buttons - a container of buttons
   each button has label and icon properties
angles - an array of angles to the center of the buttons
   can log angles.toString() to get angle data
   this can be adjusted and passed in to the angles parameter for unequal size buttons
core - a reference to the core circle object
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when the button changes (but not when setting selectedIndex property)
see also currentEnabled to get change event for each press - or use tap()

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[27500] RadialMenu(menu, size, font, height, coreRadius, coreColor, title, titleIcon, startAngle, totalAngle, flip, shiftRadial, rotateIcons, iconsShiftRadial, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, open, under, style, group, inherit)

RadialMenu
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
An expanding hierarchy menu of button rings - using ZIM Radial objects.
The menu is specified by a menu parameter in the format of a ZIM Hierarchy object.
Styles for each ring can be specified in the menu object.
Icons for each ring can be specified in the styles.

See https://zimjs.com/ten/radial.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var menu = {
   "one":[1,2,3,4], // an array is okay as all items are leaf nodes (end nodes)
   "two":{ // an object literal is required as one or more items hold other items
      "1":[], // this holds nothing (a leaf node) but still needs an empty array
      "2":["a", "b", "c"], // this holds a linear list - all leaf nodes
      "3":{ // this holds another nested list where at least one item holds more
         "emotions":["love","hate","happy","sad"],
         "flavors":["sweet","sour","bland","spicy"]
      }
   },
   "three":[1,2,3,4,5,6],
   "four":[1,2,3,4,5,6,7,8]
}
new RadialMenu(menu).sca(.5).center();
stage.update();

// OR ADD STYLES
// see https://zimjs.com/ten/radial.html for full example
// any Radial parameters can go in the styles:{} brackets
// including icons and rollIcons
// and can use series to apply background colors and colors to individual buttons
// PS - this is the EXTRA version of the simple ZIM Hierarchy format
// here we pass styles as an extra property - list is required
// styles is optional but used by ZIM RadialMenu to apply associated styles

var menu = {
   list:{
      "one":{
         list:["A","B","C","D"], // an array is okay as all items are leaf nodes (end nodes)
         styles:{backgroundColor:blue}
      },
      "two":{
         list:{ // an object literal is required as one or more items hold other items
            "1":[], // this holds nothing (a leaf node) but still needs an empty array
            "2":{
               list:["a", "b", "c"], // this holds a linear list - all leaf nodes
               styles:{}
            },
            "3":{ // this holds another nested list where at least one item holds more
               list:{
                  "emotions":{
                     list:["love","hate","happy","sad"],
                     styles:{}
                  },
                  "flavors":{
                     list:["sweet","sour","bland","spicy"]   ,
                     styles:{}
                  }
               },
               styles:{}
            }
         },
         styles:{}
      },
      "three":{
         list:[1,2,3,4,5,6],
         styles:{}
      },
      "four":{
         list:[1,2,3,4,5,6,7,8],
         styles:{}
      }
   },
   // the styles for the first list
   // here we make each backgroundColor a different color
   styles:{backgroundColor:series(red,green,blue,yellow)}
}

new RadialMenu(menu).sca(.5).center();
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)

menu - (default a simple menu) a ZIM Hierarchy (simple, simple EXTRA or complex)
   that holds the menu labels and optionally styles
   see the ZIM RadialMenu examples and the format descriptions of ZIM Hierarchy for details
size - (default 30) label size
font - (default "verdana") the font - can also import fonts in Frame() asset parameter or frame.loadAssets()
startAngle - (default null) will start first button centered at top - see also totalAngle
   setting an angle will start left side of first button at this angle
   with 0 being the top (note, ZIM angles usually start along x axis - but not here)
totalAngle - (default 360) set to use only a portion of the circle - see also startAngle
flip - (default true) flip the text between 90 and -180 (from 0 at top)
shiftRadial - (default 0) amount to shift text in radially
rotateIcons - (default false) set to true to rotate icons around radial
iconsShiftRadial - (default 0) amount to shif the icons radially
height - (default 60) height of radial - not including core or previous radials
coreRadius - (default 100) the radius of the core
   this is fairly large but can sca(.5) the radial after creating, etc.
coreColor - (default #333) the color of the core
title - (default "MENU") the label text in the core
titleIcon - (default null) an object to put under the title
** FOR BELOW: see menu parameter where colors can be set per ring and per button for ZIM VEE colors
backgroundColor - |ZIM VEE| - (default "#666") the background color of a button
   ZIM VEE means you can specify different colors for instance: series(blue, green, red, yellow)
   these would then be the color order of the buttons - same for rollBackgroundColor, etc.
rollBackgroundColor - |ZIM VEE| - (default "#777") the rollover background color of a button
selectedBackgroundColor - |ZIM VEE| - (default "#444") the background color of the selected button
selectedRollBackgroundColor - |ZIM VEE| - (default selectedBackgroundColor) the roll background color of the selected button
backdropColor - (default clear) set to change the color behind the radial - including spacingOuter
color - |ZIM VEE| - (default "white") the text color of the button
rollColor - |ZIM VEE| - (default color) the rollover text color of the button
selectedColor - |ZIM VEE| - (default color) the text color of the selected button
selectedRollColor - |ZIM VEE| - (default color) the rollover text color of the selected button
borderColor - (default #333) color of the button border
borderWidth - (default 2) width of the button border
gradient - (default null) set to a number between 0 and 1 - would suggest .1 for gradient on button
gap - (default 6 pixels or 3 degrees if gapAsAngle is true) gap between buttons
gapAsAngle - (default false) set to true set gap as angle
spacing - (default 6) radial spacing around button from core or edge of backdrop
spacingInner - (default spacing) inside radial spacing from nearest inside object
spacingOuter - (default spacing) outside radial spacing from edge of backdrop
currentEnabled - (default false) set to true to make selected key pressable (for change event)
currentSelected - (default true) set to true to make selected key show selected colors
open - (default false) set to true to start with first menu open
under - (default true) set to false to open menu rings in the top layer (usually under just in case there is a backdrop)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
closeRings(num) - close menu rings - default is all rings but use 1 to close the outer ring, 2 to close the two outer rings, etc.
   see the outerLevel property for the current outer ring number with core being 0
   opening rings programmatically is not yet supported but may be in the future
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedIndex - gets the selected index of the outer ring (setting may come soon)
selectedLevel - gets the index of the level with the latest selection - the core is 0
selectedMenu - gets a reference to the selected menu
outerLevel - gets the index number of the outside level - the core is 0
outerMenu - gets a reference to the outer menu
text - gets current selected label text
label - gets current selected label object
selected - gets the selected button
core - a reference to the core circle object
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to stage.update() after setting certain properties
and stage.update() in change event to see component change its graphics

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "change" event when the button changes (but not when setting selectedIndex property)
see also selectedIndex, selectedLevel, selected and text properties
see also currentEnabled to get change event for each press - or use tap()

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[27959] ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startBackgroundColor, draggable, shadowColor, shadowBlur, buttonBar, circles, indicator, backgroundColor, keyArrows, container, selectedIndex, style, group, inherit)

ColorPicker
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A traditional color picker which shows 256 Web colors by default or custom colors.
Can additionally show 16 greys and / or an alpha slider.
Picking on a color sets the swatch color and the selectedColor property.
OK dispatches a "change" event if the color changed or a close event if not.
The X dispatches a "close" event.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var cp = new ColorPicker();
cp.center();
cp.on("change", function() {
   zog(cp.selectedColor); // #ffcc99, etc. after pressing OK
   zog(cp.selectedAlpha); // 0-1
});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the width of the color picker
colors - (default 256 Web colors) an optional list of colors ["red", "#CCC", etc.]
cols - (default 10) how many columns to use if you pass in custom colors
spacing - (default 2) is the space between the color squares
greyPicker - (default true unless one row) shows an extra 16 greys (set to false to hide these)
   for the default colors it also includes 2 starting colors that record last picked colors
alphaPicker - (default true unless one row) shows an alpha slider (set to false to hide this)
   the swatch has a black, grey and white backing underneath to show multiple alpha effects
startBackgroundColor - (default the last color in color array) the starting color
draggable - (default true (false if no buttonBar)) whether you can drag the component - set to false to not drag
   a small grip under the color text shows if draggable
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
buttonBar - (default true unless one row) set to false to hide the button bar with OK and X (close)
circles - (default false) set to true to show colors in circles rather than squares
indicator - (default true) set to false to remove indicator from currentBackgroundColor
backgroundColor - (default black) the color of the background
keyArrows - (default true) set to false to disable keyboard arrows
container - (default frame.zdf) if using show(), hide(), toggle() can set which container to center on
selectedIndex - (default 0) - set the selectedIndex at start
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show() - show the picker (returns the picker for chaining)
hide() - hides the picker
toggle(state - default null) - shows if hidden and hides if showing (returns the picker for chaining)
   or pass in true to show picker or false to hide picker
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
selectedColor - gets or sets the selected color swatch
currentValue - same as selectedColor but consistent with other components
currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
selectedAlpha - gets or sets the selected alpha (set does not work if alphaPicker is false)
selectedIndex - get or sets the selected index of the colorPicker
colors - read only array of colors in picker - not including greys
greys - read only array of greys in picker if the grey picker is set
toggled - read-only Boolean property as to whether picker is showing
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
swatch - gets the Rectangle that is the color swatch
swatchBacking - gets the zim Shape that is under the swatch (seen if alpha set low)
swatchText - gets the Label that shows the color text
grip - gets the createjs.Shape for the grip if the panel is dragable
background - gets the Rectangle that is the background (cp.background.color = "white" - now a backgroundColor parameter)
okBut - references the OK Button
closeBut - references the X Button
indicator - gets the zim shape that is the indicator (if indicator is true)
NOTE: alphaPicker is true:
alpaBacking - gets reference to the Rectangle that makes the backing for the alpha slider
alphaBut - the Button on the alpha slider
alphaSlider - the Slider for the alpha
alphaText - the Label for the alpha
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches a "set" event when a different color or alpha is selected and updated in the picker if the buttonBar is showing
dispatches a "change" event when the OK button is activated and the color or alpha is different than before
   or if buttonBar is false dispatches "change" when a new color or alpha is selected
dispatches a "close" event if the OK button is activated and the color has not changed or the X button is pressed

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=ColorPicker


************************************
[28649] TextEditor(width, color, backgroundColor, fieldColor, fieldHeight, textSize, sizeList, optionList, colorList, fontList, live, button, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, wrap, limit, scroll, placeholder, password, borderColor, borderWidth, margin, corner, shadowColor, shadowBlur, draggable, boundary, style, group, inherit)

TextEditor
zim class - extends a zim.Panel which extends a zim.Container which extends a createjs.Container

DESCRIPTION
A configurable text editor for a ZIM Label - or text in code memory.
Call the editor.show(label) method and pass in the label - it will let the user change the following properties:
   text, color, bold, italic, align, size, and font
Which ones the editor uses can be set with parameters.

SEE: https://zimjs.com/cat/texteditor.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var label = new Label({
   text:"press to edit with TextEditor",
   italic:true,
   align:CENTER,
   font:"verdana"
}).center().expand().tap(function () {
   textEditor.show(label);
});

var textEditor = new TextEditor({
   colorList:true, // or array of colors
   optionList:["bold","italic","align"], // or true, or array with any of these
   sizeList:true, // or array of sizes
   fontList:true, // or array of fonts
   live:true, // default
   scroll:true // default, etc.
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
The TextEditor is made of of the following sub components
and many styles need to be set on the sub component types:
Panel, TextArea, Button, ColorPicker, Selector, Stepper, List
For instance STYLE = {type:{Panel:{titleBarBackgroundColor:red}}}
width - (default 400) the width of the editor
color - (dark) the color of the TextArea text in the editor
backgroundColor - (default lighter) the background color of the editor
fieldColor - (default backgroundColor darkened .05) - the background color of the TextArea
fieldHeight - (default button height plus 2 margins) - the height of the TextArea
textSize - (default 20) the size of the text in the TextArea
sizeList - (default false) set to true to show numbers from 5-500
   or set to an array of numbers used for the size Stepper [10,12,14,16] for instance
optionList - (default false) set to true to show ["bold", "italic", "align"]
   or set to an array with any of these values ["bold", "italic"] for instance
colorList - (default false) set to true to show the default ZIM ColorPicker
   or set to an array with colors [red, green, blue, black, "violet", "#333"] for instance
fontList - (default false) set to true to show a default list of fonts
   "Arial",
   "Courier New",
   "Georgia",
   "Helvetica",
   "Palatino",
   "Tahoma",
   "Verdana",
   // plus on desktop:
   "Impact",
   "Comic Sans"
   or set to an array with desired fonts ["courier", "verdana"] for instance
live - (default true) will update the label as the text is typed
   set to false to update only on button press - note, other setting update live regardless
button - (default green check) set to a custom ZIM Button if desired
titleBar - (default "Text Editor") a String or ZIM Label title for the panel that will be presented on a titleBar across the top
titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
wrap - (default true) set to false to not wrap text in TextArea (wrapping on the actual label can be done with label.lineWidth)
limit - (default null) set to a number to limit the TextArea number of characters
scroll - (default true) set to false to not show a vertical scrollbar when needed - note if textHeight is not high enough, a scrollbar may not show
placeholder - (default null) set to true to show default text - will be overwritten with label text if there is text
password - (default false) set to true to make the TextArea a password field - shows dots - the label will not show dots
borderColor - (default #888) border color
borderWidth - (default 1) the thickness of the border
margin - (default 10) the margin around the various sub components
corner - (default 0) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show(label, x, y) - show the editor and pass in the label to operate on
   the editor will appear centered above or below the text depending on where there is more room
   this can be overridden with the x and y parameters
   If the editor is already open it will not move
   Calling show(label2) on a different label will switch the editor to that label
   see also the label property
hide() - hides the editor
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: see all the methods of the ZIM Panel

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
textArea - reference to the TextArea
label - get or set the label associated with the textEditor
button - reference to the Button
   if various features are set:
color - reference to the Rectangle showing color
colorPicker - reference to the ColorPicker
bold - reference to the bold Button
italic - reference to the italic Button
align - reference to the align Selector
size - reference to the size Stepper
font - reference to the font List
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See all the properties of the ZIM Panel including close, titleBar, etc.

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
dispatches an "input" event when the text is changed - although default is to update live
dispatches a "set" event when button is pressed
dispatches a "close" event when closed

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[29141] Keyboard(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, hardKeyboard, style, group, inherit)

Keyboard
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
The Keyboard class makes a keyboard ideal for mobile or touch screens.
Often, it seems the mobile keyboard can cause problems with layout.
This in-canvas keyboard requires much less testing and concern.
The Keyboard can work with ZIM Labels to give input text without a TextArea.
Thanks Frank Los for the initial design and coding of the Keyboard.
Keyboard also captures hard keyboard keydown and will type that as well
See https://zimjs.com/keyboard

NOTE: press and hold down the vowels for multiple vowel options
NOTE: currently, multi-line Label input is not supported
NOTE: the width of the Label can be set by the Label's lineWidth paremeter
NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// create Labels to capture the text from the keyboard
var text1 = new Label({text:"", backgroundColor:white}).pos(100,100);
var text2 = new Label({text:"", backgroundColor:white}).pos(100,200);

// create a new Keyboard and pass in the labels as an array
// or if just one label, then pass in the label
var keyboard = new Keyboard([text1, text2]);

// if just the letter is needed use the keydown event
keyboard.on("keydown", function(e) {
   zog(e.letter);
});

// create events to capture a mousedown on the labels
var text1Event = text1.on("mousedown", activate);
var text2Event = text2.on("mousedown", activate);
function activate(e) {
   keyboard.show();
   // remove the events when keyboard is active
   text1.off("mousedown", text1Event);
   text2.off("mousedown", text2Event);
}
keyboard.show(); // optionally show the keyboard to start

// add back the events to show the keyboard
keyboard.on("close", function() {
   text1.on("mousedown", text1Event);
   text2.on("mousedown", text2Event);
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
labels - (default null) a ZIM Label to show letters in or an array of labels
   Keyboard will add a cursor to the Labels
   and provide management across multiple labels
   currently, multiline labels are not supported
   setting the label lineWidth will set the max width of the label
backgroundColor - (default "#333") an css color for the background color of the keys
color - (default "white") the color of the text
shiftBackgroundColor - (default "orange") the color of the active shift key
shiftHoldBackgroundColor - (default "red") the color of the active shift hold key
placeBackgroundColor - (default "50c4b7") the color of the arrow backings when placing cursor in label
placeColor - (default "50c4b7") the color of the arrow text when placing cursor in label
cursorColor - (default "50c4b7") the cursor color
shadeAlpha - (default .2) special keys are shaded darker by this alpha
margin - (default 5) the margin around the keyboard from the container width
corner - (default 30) the round of the corner (set to 0 for no corner)
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
draggable - (default false) set to true to show the drag handle at top right
placeClose - (default true) shows an x key to close the cursor placement menu
shadowColor - (default "rgba(0,0,0,.2)") set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
container - (default zimCurrentFrame stage) if placing Keyboard in different container or stage
data - (default see below) pass in data for the letters on the three sets of keyboards
   Below is the default data - change any of the keys to change keyboard
   There must be three boards (you can request more)
   There must be a button specified on the fourth row to toggle to the second screen and back
   There must be a button on the second and third screen at the start of the third row
   to toggle between the second and third screen
   The "shift" and "delete" keys are optional and can be moved or removed
   Where 10 keys can fit, there is a maximum of 10 keys but there can be less
   Use the data property to get this array if desired:
   var data = [
      [
         ["q","w","e","r","t","y","u","i","o","p"],
         ["a","s","d","f","g","h","j","k","l"],
         ["shift","z","x","c","v","b","n","m","backspace"],
         ["?123"] // rest of bottom line automatically added
      ],[
         ["1","2","3","4","5","6","7","8","9","0"],
         ["!","@","#","$","/","^","&","*","(",")"],
         ["1/2","-","'", "\"",":",";",",","?","backspace"],
         ["ABC"] // rest of bottom line automatically added
      ],[
         ["+","x","%","=","<",">","{","}","[","]"],
         ["€","£","¥", "$", "₩", "~", "`","¤","♡","☆"],
         ["2/2","_","\\","|","《","》","¡","¿","backspace"],
         ["ABC"] // rest of bottom line automatically added
      ]
   ];
place (default true) - set to false to not add place arrows when selecting Label
special (default null) - set to a string to add a special key to the left of the space bar
rtl (default false) - (Experimental) set to true to use right-to-left text
hardKeyboard (default true) - set to false to not include keypresses from physical keyboard
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
show(index) - shows the Keyboard - use this rather than addTo(), etc.
   index (default null) specify the index of the labels array to show cursor in
hide() - hides the keyboard
toggle(state - default null) - shows if hidden and hides if showing (returns the keyboard for chaining)
   or pass in true to show keyboard or false to hide keyboard
addChar(char) - add a character to the currentLabel at the currentIndex
removeChar() - removes the chararcter in the currentLabel at the currentIndex-1 (a backspace)
addLabels(labels) - add a ZIM Label or an array of Labels to the labels list for the Keyboard
removeLabels(labels) - remove a ZIM Label or an array of Labels
showPlace() - show the place menu for cursor
hidePlace() - hide the place menu for cursor
resize() - scales the keyboard to the stage with margin and places at bottom of screen
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a clone of the Keyboard
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
data - get the data array for the keyboard - see the data parameter for details and to set value for data
labels - get the labels array - use addLabels() and removeLabels() to set
selectedLabel - the label with the cursor or -1 if no cursor
selectedIndex - the index of the cursor in the selected label or -1 if no cursor
type - holds the class name as a String
toggled - read-only Boolean that is true if keyboard is visible and false if not
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
Dispatches a "keydown" event with an event object having a letter property
   keyboard.on("keydown", function(e) {zog(e.letter);}); // logs letter pressed or "del" for delete
Dispatches a "special" event if the special parameter is used and the special key is pressed
Dispatches a "close" event when close keyboard icon at bottom right is pressed

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[30282] Organizer(width, list, useAdd, useRemove, usePosition, autoAdd, autoRemove, autoPosition, addForward, removeForward, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, corner, keyEnabled, gradient, gloss, backdropColor, style, group, inherit)

Organizer
zim class - extends a zim.Tabs which extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Tabs bar of interface for organizing a ZIM List.
This includes add, up, down, toTop, toBottom and remove icon buttons.
The Organizer can sit above the list and allow the user to add, remove and reorder the list.
Adding an item will add an empty button - this would need to be filled with the user input, etc.
If the user input is not ready, the autoAdd parameter can be set to false.
The change event will report an orgType of "add" and the add() method can be used when the input is ready.
The same for positioning or removing if desired.

See: https://zimjs.com/explore/organizer.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
   var organizer = new Organizer(250)
      .change(function () {
         if (organizer.orgType=="add") organizer.orgItem.text = "new";
      });
   new List({
      width:250
      organizer:organizer // pass the organizer to the list
   });
      .center()
      .mov(0,40);
   stage.update();

   // OR

   var list = new List(250)
      .center()
      .mov(0,40);
   var organizer = new Organizer(250, list)
      .center()
      .mov(0,-80)
      .change(function () {
         if (organizer.orgType=="add") organizer.orgItem.text = "new";
      });
   stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of Tabs - this will determine the height as the Buttons are square.
   There is no vertical version of an Organizer.
list - (default null) an ZIM List object to control - or null to add later with the list property
useAdd - default(true) set to false to not include the add button
useRemove - default(true) set to false to not include the remove button
usePosition - default(true) set to false to not include the position buttons (up, down, toTop, toBottom)
autoAdd - default(useAdd) set to false to not automatically add an item
   the "change" event will still be dispatched and the orgType will be "add"
   the add() method can be used to add user input for instance
autoRemove - default(useRemove) set to false to not automatically add an item
   the "change" event will still be dispatched and the orgType will be "remove"
   the remove() method can be used to manually remove
autoPosition - default(usePosition) set to false to not automatically position an item
   the "change" event will still be dispatched and the orgType will be "up", "down", "top", "bottom"
   the up(), down(), toTop(), toBottom() methods can be used to manually position
addForward - (default true) set to false to add item behind the current item (in list index) when adding
removeForward - (default true) set to false to select the item before the current item (in list index) when deleting
backgroundColor - (default "#777") the background color of the buttons
rollBackgroundColor - (default "#555") the background color of the button as rolled over
selectedBackgroundColor - (default "#444") the background color of the button when selected
color - (default "white") the text color of a deselected button when not rolled over
rollColor - (default color) the rollover color
selectedColor - (default color) the text color of the selected button
selectedRollColor - (default color) the text color of the rolled over selected button
spacing - (default 2) the distance between the buttons
corner - (default 0) the corner radius of the tabs
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards
gradient - (default null) 0 to 1 (try .3) adds a gradient to the buttons
gloss - (default null) 0 to 1 (try .1) adds a gloss to the buttons
backdropColor - (default "#333") the background color of the list window (any CSS color)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(index, item, clone) - manually add item at index - both are optional - index defaults to current index
   clone defaults to false - set to true to add a clone of the item - returns object for chaining
up(index) - move item up one index number in list - index defaults to current index - returns object for chaining
down(index) - move item down one index number in list - index defaults to current index - returns object for chaining
toTop(index) - move item to top of list (index 0) - index defaults to current index - returns object for chaining
toBottom(index) - move item bottom of list (index length-1) - index defaults to current index - returns object for chaining
remove(index) - manually remove item at index - index defaults to current index - returns object for chaining
setButtons() - manually rotate buttons to match List direction - automatically done when added to list or list is initially added to organizer
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: All Tab methods

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
list - the list the organizer is operating on
lastIndex - read-only selected index before change event is dispatched
orgIndex - read-only current index of list - same as list.currentIndex
orgItem - read-only selected item of list - same as list.selected
orgType - read-only type of button pressed - "add", "remove", "up", "down", "top", "bottom"
removedItem - a reference to the item that has been removed when removed button is pressed or remove() is called
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: All Tab properties

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "change" event when the buttons are pressed (may be the same button again)
   use orgType for what type "add", "remove", "up", "down", "top", "bottom"
   use orgIndex or list.currentIndex for current list index
   use orgItem or list.selected for selected item
   use removedItem for a removed item
   use lastIndex for index before change

ALSO: All Tab events

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[30666] Scrambler(tile, keys, keyProperty, scramble, time, wait, num, shadowColor, shadowBlur, swap, swapLock, style, group, inherit)

Scrambler
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Takes a ZIM Tile and scrambles its items allowing the items to be dragged to unscramble.
Works on horizontal, vertical or grid versions of Tile (as in one column, one row or multiples)
Dispatches a "complete" event when done.
Can pass in an optional keys array that must match key properties
or an existing property of type keyType.
This allows, for instance, matching duplicate letters or colors.

See: https://zimjs.com/cat/scrambler.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// tile a rectangle with a color series, a dark border of width 3
// 4 columns and 1 row with a spacingH of 10
var tile = new Tile(new Rectangle(100,100,series(orange, green, blue, pink)), 4, 1, 10);

// add the tile to the Scrambler - by default it scrambles
var scrambler = new Scrambler(tile).center();

// when the tile is unscrambled it calls the complete function
scrambler.on("complete", function () {
   zogg("Yay!");
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
tile - an ZIM Tile
keys (default null) - An optional array of values that the order of the tile must match
   Without keys, Scrambler will match the exact starting order
   but sometimes there are multiple answers like two letter Ts or three color blues
   To solve this issue, a keys array can be provided
   Each tile should be given a key property to match the desired keys array
   For instance if keys = ["big", "small", "big", "small", "medium"]
   then each tile item should be given a item.key = "big", etc.
   The "complete" event will be dispatched when the tile key properties are in the order of the keys
   Also see keyProperty below for an alternative.
keyProperty (default null) - An optional tile item property to use to match the keys array (must have a keys array)
   For example, if keys = ["L", "O", "V", "E", "L", "Y"]
   There are two "L" items so matching the starting order is not necessary
   as the L items could be swapped and still be a correct answer
   If the items are ZIM Label objects (use the Label backing property to make tiles)
   then set the keyProperty to "text" and this will be used to match the keys array
   Another example - if keys = [blue, green, blue, red]
   then set keysArray to "color" if a set of Rectangles are tiled with these colors
scramble (default true) - set to false to not scramble the tile - see also the scramble() method
time (default null) - if scramble is set, this is the time in seconds to animate the scramble - see also ZIM TIME constant
wait (default null) - if scramble is set, this is the time in seconds to wait to scramble - see also ZIM TIME constant
num (default 1) - the number of times it will scramble within the time given if a time is given otherwise always just one
   this is good to scramble a small number of things - for instance set to 3 to visibly scramble 4 things...
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 5) how blurred the shadow is if the shadow is set
swap - (default false) set to true to not automatically shift tiles and swap the dragged tile with the tile that is dropped on
swapLock - (default false) set to true to lock tiles that are in the right spot - will set swap to true
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
scramble(time, wait, num) - scramble the tile - this is done by default when making the Scrambler
   but the default can be set to false and scramble called manually - or to rescramble, etc.
   time and wait default to 0 and are the seconds to animate and wait to animate - also see ZIM TIME constant
   num is how many times to scramble within the time - set to 3 for instance to scramble a small number of items
   note that the tiles cannot be dragged from when called to when done scrambling
solve(time, wait, disable) - solve the tile - so arrange the tile in the start order
   time and wait default to 0 and are the seconds to animate and wait to animate - also see ZIM TIME constant
   disable defaults to true and will stop the tile items from being draggable after solved
   this uses a noMouse() so mouse() can be called on each tile item at a later point if desired
test() - returns true if tiles match starting orientation or keys if keys provided
testItem(item, index) - test a specific item in the Scrambler to see if correct - index is optional otherwise it will calculate it
   note - there is a "complete" event and complete property so usually there is no need to test an item
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
complete - get whether the Scrambler is complete - also see the "complete" event
starts - an array of start indexes (will be [0,1,2,3...])
order - an array of the current index order (will be the scrambled order - eg. [3,2,0,1...])
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "complete" event when the tile changes to the same order as the start order
dispatches a "scrambled" event when the tile is finished scrambling

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[31098] Connectors(width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, style, group, inherit)

Connectors
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Adds nodes (any DisplayObject - default a Circle) that can be dragged to draw a connector line.
There are three main uses for Connectors:

1. Connecting dots like in coloring books - use linear:true
2. Making hieararchy type drawings - use snaps
3. Connecting objects like boxes together - pass in objects to the points

The num parameter limits the number of lines that can be drawn from a node.
The dropType can be set to require nodes to be dropped on or off other nodes (or the default, any).
There are min and max distances the connections can be made.
These and the other parameters provide a variety of game and puzzle options.

The Line can be set to have start and end heads.
The lineType in the Line can be set to "straight", "corner" or "curve"
Line also accepts points for any arrangement of a connector
but in this version, these have not been used in Connectors.

Currently, there are no pre-made lines - the user would have to make these.
In future versions, we will look at making nodes and lines based on a ZIM Hierarchy object.
This would also allow use to handle undo, redo and save.

See: https://zimjs.com/cat/connectors.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// draws four general connectors that can be connected to one another in a box
// adjust connector nodes after connections are complete
var connectors = new Connectors({linear:true}).center();
connectors.on("complete", function () {
connectors.nodes.loop(function (node) {
node.radius = 5;
node.color = red;
});
// or hide connectors
// connectors.nodes.alp(0);
stage.update();
});

EXAMPLE
// make a grid of connectors and only connect to other nodes
// do not let user delete a node or doubleclick to move a node
var points = [];
var spacing = 60;
loop(10, function(i) {
loop(10, function (j) {
points.push([i*spacing, j*spacing]);
});
});
var connectors = new Connectors({
points:points,
node:new Rectangle(12,12,purple).centerReg(),
line:new Line({color:purple, thickness:12}),
nodeRollColor:orange,
dropType:"on",
dblclick:false,
deleteNode:false,
max:70
}).center();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default null) the width of the connnectors container or will grow with added connectors
height - (default null) the height of the connnectors container or will grow with added connectors
points - (default [[0,0], [100,0], [100,100], [0,100]]) an array of point arrays for the connectors
   or can specify a ZIM Blob or Squiggle to place connectors on their points
      the Blob or Squiggle do not need to be added to the stage
      use the recordPoints(true) method of the Blob or Squiggle or see https://zimjs.com/nio/paths.html
   or can specify an array of a base (that connectors nodes will be added to) and baseInfo as follows:
      [[base, baseInfo], [base, baseInfo], [base, baseInfo], etc.]
   the baseInfo can be a number of nodes to place around all base sides
   or baseInfo can be an array with three different formats:
      [all]
      [left/right, top/bottom]
      [left, right, top, bottom]
   These can be numbers greater than 0 for the number of nodes on the side
      or 0 for no nodes on the side
      or -1 for both corners on the side
      or -2 for the first corner on the side
      or -3 for the second corner on the side
node - (default new Circle(10, grey, grey)) the DisplayObject to use as a node - should be centerReg()
line - (default new zim.Line({thickness:3, color:tin, strokeObj:{caps:"round"})) the line to use as the connector
   ZIM Line has a lineType parameter for "straight", "corner", and "curve" which will affect the connector lines
   ZIM Line has a lineOrientation parameter of "auto", "horizontal" or "vertical" that will affect the connector lines
   ZIM Line as curveH and curveV settings that will adjust the lines for the "curve" setting
   the caps should be set to "round" if drawing with clear or transparent nodes
linear - (default false) lines will only connect to points that are next to one another (in the point order)
   this is good for connecting dots
linearWrap - (default true) let the first point connect to the last point in the linear setting
linearOrder - (default false) require the points to be connected in order
num - (default null) set the maximum number of lines that can come from a node
snapH - (default null) snap the nodes to a provided horizontal distance
snapV - (default null) snap the nodes to a provided vertical distance
dropType - (default "any") determines what happens when a node is dropped as follows:
   "any" lets the node be dropped anywhere (and may be snapped)
   "on" will save the node if dropped on an existing node otherwise it is removed or put back to where it is dragged from
   "off" will save the node if not dropped on an existing node otherwise it is removed or put back to where it is dragged from
   "single" will save the node if dropped on a node with no existing connections otherwise it is removed or put back to where it is dragged from
   note - these only work with the currently dragged node - not other multiple selected nodes
deleteNode - (default true) set to false to not allow nodes to be deleted by holding or doubleclicking and delete key
dblclick - (default true) set to false to not allow nodes to be selected by doubleclicking
   selected nodes can be moved together
   selecting a node selects its children unless the ctrl key is held at which point it will not select children
   selected nodes can be deleted with the delete key (or hold to delete)
   deleting a node will delete its children
fullMove - (default true) set to false to not automatically drag a node when it is full (if num is set)
min - (default node radius or smallest dimension) the minimum distance from the node's parent a node must move before placing node
max - (default null) the maximum distance from the node's parent a node can be moved to be placed
boundary - (default null) a ZIM Boundary object for the nodes - or a DisplayObject such as the stage (see ZIM Drag)
expand - (default 0 or 10 on mobile) expand the node mousedown area
nodeRollColor - (default node.color.lighten(.2)) the color of the node as rolled over
nodeRollBorderColor - (default node.borderColor) the borderColor of the node as rolled over
nodeSelectedColor - (default white) the selected node color if doubleclicked
nodeSelectedBorderColor - (default node.borderColor) the selected node borderColor if doubleclicked
baseColor - (default node.color) the color of the node connected to a base DisplayObject (see points parameter)
baseBorderColor - (default node.borderColor) the borderColor of the node connected to a base DisplayObject (see points parameter)
baseRollover - (default false) set to true to change all nodes on a base to their roll colors when rolling over the base
rootLock - (default false) do not let the root node (a node in the points array) be draggable or deletable
grandChildren - (default true) do not let there be grandchildren - so there can only be the root nodes and their direct children
dblclickTime - (default .5) time in seconds to capture a double click within (also see ZIM TIME constant)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
addNode(x, y, base) - add a node at x and y (and on a base) - cannot add nodes in linear mode - see linear parameter
removeNode(node) - remove the node (and its children)
removeConnectors() - removes all nodes and connectors except for root nodes which were specified in the points parameter
selectNode(node, children) - select a node and its children unless children parameter is set to false
addBase(base, baseInfo) - add nodes to a base DisplayObject - see the points parameter for info about the baseInfo
removeBase(base) - remove the connectors for a base - the base will still need to be removed with removeFrom()
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
node - the DisplayObject used to make the connector nodes
   the node objects also have these added properties:
   creator - the node the node was created from (parent in hierarchy) on null if root node
   creatorLine - the line going back to the creator or null if root node
   creations - an array of nodes made from the node (its children in hiearchy)
   before - the node before it in the original points array (or null if first)
   after - the node after it in the original points array (or null if last)
   base - the base the node is associated with or null if no base
   selected - whether the node is selected or not
   orientation - the orientation of the lines from the node
line - the Line object used to make the connector lines
   the line objects also have these added properties:
   node - a reference to the node at the start of the line
   creatorNode - a reference to the node at the end of the line
nodes - the Container that holds the nodes
lines - the Container that holds the lines
points - a read only array of points of node
selectedList - a read-only array of selected nodes
bases - an Array of DisplayObjects used as bases (provided through the points parameter or addBase())
   the base objects also have these added properties and methods:
   connectors - an array of all connector nodes on the base
   connectorMoveEvent - reference to pressmove event on base
   connectorUpEvent - reference to pressmove event on base
   connectorOverEvent - reference to pressmove event on base
   connectorOutEvent - reference to pressmove event on base
   setConnectorColors(baseColor, baseBorderColor, nodeRollColor, nodeRollBorderColor) - method to set colors
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "connection" event when a node is made
dispatches a "noconnection" event if a connection is not made
dispatches a "complete" event in linear mode when the connections are complete

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[32105] Marquee(width, height, items, time, transition, speed, direction, marginLeft, marginRight, marqueeType, borderColor, borderWidth, refresh, mix, style, group, inherit)

Marquee
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A display for ads and promos using an optional ZIM Indicator with pause button.
The Marquee uses the ZIM Pages class to transition multiple items.
The items can be interactive ZIM objects made ahead of time and passed into the items parameters
Images can also be loaded with the load() method

See: https://zimjs.com/marquee.html for an example

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
   var promo1 = new Container(600, 200);
   new Rectangle(promo1.width, promo1.height, yellow).addTo(promo1);
   new Circle(30, red).center(promo1).drag();

   // could be more

   // optionally or alternatively, specify a Marquee object
   // there can be multiple image properties using end src as key
   // just use null as value if no URL
   var marqueeData = {"retina.jpg": ["https://zimjs.com/retina.html", "_blank"]};
   var marqueePath = "assets/";

   // create Marquee
   // note the actual width of marquee will be 25+25 more for added margins (optional)
   var marquee = new Marquee(600, 200, [promo1])
      .center()
      .load(marqueeData, marqueePath);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of marquee content
   final marquee width will have marginLeft and marginRight added to this width
height - (default 100) height of content and marquee
items - default(null) an array of Display Objects - can be interactive
time - default(5) time interval in seconds for changing items (also see ZIM TIME constant)
   also see marqueeTime property for each item to individually override the time for viewing
transition - default("slide") the transition between items
   options are: "none", "reveal", "slide", "fade", "clear", "black", "white", "fan"
speed - default(.5) speed of transition in seconds (also see ZIM TIME constant)
direction - default("right") location of next item relative to current item
   options are: "right", "left", "up", "down"
marginLeft - default(25) width at left of content for Indicator and Pause button
   set to 0 to not show indicator and pause button
marginRight - default(25) width at right of content for Z logo with animated MARQUEE
   set to 0 to not show Z logo with animated MARQUEE
marqueeType - (default "dot" or "circle") the Indicator type - also "box" or "square"
borderColor - (default "#333") border color - any ZIM or HTML color - set to -1 for no border
borderWidth - (default 1) width of border if borderColor - set to 0 for no border
refresh - (default 30*60 seconds) page refresh to handle browser memory build
mix - (default true) randomize content and then play in that order - different for each page load
   note: loaded files will always come after initial marquee items
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(obj, url, target) - add a Display Object (obj) - can be interactive content - returns obj for chaining
   can provide an overall url and target for url
   but often will provide navigation button, etc. as part of interactive content
remove(obj) - remove an object from the marquee - returns obj for chaining
   will also call a dispose() method on the obj if there is one
go(page) - transition to specific page (obj) or index - returns obj for chaining
pause(state, immediate) - pause or unpause the Marquee - returns obj for chaining
   can be used by interactive code to pause Marquee when interacting
   immediate (default false) set to true to make the Marquee go to next item right away when unpausing (no effect when pausing)
load(data, path) - Marquee object for images their optional action url and target: - returns obj for chaining
   data in format: {imageSrc:"actionURL", imageSrc:["actionURL", "target"], etc.}
   path: optional directory location such as a relative path: "assets/"
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
content - a reference to the ZIM Container that holds the content
pages - a reference to the ZIM Pages object that holds the items
   use pages.pages to access an array of pages, etc. - see Pages Class
button - a reference to the pause/play button if there is one
indicator - a reference to the ZIM Indicator if there is one - see Indicator Class
selectedIndex - the selected index of the Marquee
selected - the selected item of the Marquee
lastSelected - the last selected item of the Marquee
time - get or set the time of the marquee (between changing items)
speed - get the speed of the transition
paused - read only property as to whether the Marquee is paused - see pause() method
interval - a reference to the ZIM interval
left - a reference to the left Container
right - a reference to the right Container if there is one
icon - a reference to the Z icon if there is one
label - a reference to the MARQUEE Label that pops out of the Z if there is one
   eg. label.visible = false to not show label popping out
marqueeLoader - a reference to the ZIM loadAssets queue if load() is used
group - used when the object is made to add STYLE with the group selector (like a CSS class)

Each item gets a marquee property that points to the ZIM marquee it is in
Each item gets a marqueViews property recording how many times viewed
Each item can have a marqueeTime property set to ms to customize its view time

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "page" event when item starts to change
dispatches a "pagetransitioned" event when item finishes changing

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[32523] Loader(width, height, label, type, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, style, group, inherit)

Loader
zim class - extends a zim.Button which extends a zim.Container

DESCRIPTION
Loader lets you upload images, text or JSON.  These are available on the loaded event function.
Loader uses the HTML input type=file tag and overlays this with a createjs DOMElement.
Loader is a Button so can be displayed for the user to click on.
It defaults to a dashed line region as you can also drag and drop files to the loader.
You can also save an image using the save() method to a new browser window for the user to save

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var loader = new Loader({
   frame:frame,
   label:"UPLOAD PIC OR DROP PICS HERE",
   width:700,
   height:400,
   corner:50
}).center();
loader.on("loaded", function(e) {
   loop(e.bitmaps, function(bitmap){
      bitmap.centerReg().drag();
   });
   loader.removeFrom(stage);
   stage.update();
});

// and to later save for instance in a button event:
saveButton.on("click") {
   loader.save(stage); // or some other container... can specify crop bounds too
}

EXAMPLE
// loading a JSON file:
var loader = new Loader({
   frame:frame,
   type:"JSON",
   label:"UPLOAD JSON",
   width:700,
   height:400,
   corner:50
}).center();
// choose a test.json file with the following in it:
// {"test":"testing"}
loader.on("loaded", function(e) {
   zog(e.json.test); // "testing"
   loader.removeFrom();
   stage.update();
});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the button
height - (default 70) the height of the button
label - (default "UPLOAD PIC") ZIM Label or plain text
type - (default "image") set to "text" to receive text or "JSON" to receive a parsed JSON file
backgroundColor - (default "rgba(0,0,0,.05)") background color of button (any CSS color)
rollBackgroundColor - (default "rgba(0,0,0,.1)") rollover color of button backbground
color - (default "rgba(0,0,0,.5)") text color of button (any CSS color)
rollColor - (default color) rollover text color of button
borderColor - (default rgba(0,0,0,.3)) the color of the border
borderWidth - (default 1) thickness of the border
corner - (default 0) the round of the corner (set to 0 for no corner)
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
hitPadding - (default 0) adds extra hit area to the button (good for mobile)
gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button
gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button
backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)
   see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
   https://zimjs.com/bits/view/pizzazz.html
rollBacking - (default null) a Display object for the backing of the rolled-on button
rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off
icon - (default false) set to display object to add icon at the center of the button and remove label
   https://zimjs.com/bits/view/icons.html
rollIcon - (default false) set to display object to show icon on rollover
toggle - (default null) set to string to toggle with label or display object to toggle with icon or if no icon, the backing
rollToggle - (default null) set to display object to toggle with rollIcon or rollBacking if no icon
   there is no rollToggle for a label - that is handled by rollColor on the label
toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle
dashed - (default true) set to false to turn off the dashed for the border
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
resize() - call the resize event if the scale or position of the Loader is changed
   this will sync the location of the HTML input tag
   resize() is only needed if the scale or x, y of the Loader (or its container) is changed
   it is not needed for general window resizing - the Loader handles this
   Note: if the Frame itself changes location in the HTML document, call a frame.update()
   this will then dispatch an update event to the Loader and it will resize()
   this is not needed if resizing the window or scrolling - see Frame update() method docs
save(content, filename, x, y, width, height, cached, cachedBounds, type, data) - save a picture (supports ZIM DUO)
   content - the Display object to be saved such as a Container, Bitmap, etc.
   filename - (default random) - the text name of the file (with or without extension - also see type)
   x, y, width, height - the cropping bounds on that object otherwise defaults to 0,0,stageW,stageH
   cached - (default false) set to true if the object is currently already cached
   cachedBounds - if you are saving a different bounds than was previously cached
      setting the bounds here (createjs.Rectangle) will restore the cache to the previous bounds
   type - (default "png") set to "jpeg" for jpeg
   data - (default false) set to true to save as base64 data - thanks Andi Ermi for the request
      otherwise save returns the object for chaining

Button methods:
setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)
   Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"
   note - all backing will have a pattern property if a pattern is set as a backing
setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)
   Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon"
toggle(state) - forces a toggle of label if toggle param is string, else toggles icon if icon is set or otherwise toggles backing
   state defaults to null so just toggles
   pass in true to go to the toggled state and false to go to the original state
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
tag - the HTML input tag of type file - used for uploading
frame - get or set the frame - set this if changing frames
group - used when the object is made to add STYLE with the group selector (like a CSS class)

Button properties:
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
text - references the text property of the Label object of the button
label - gives access to the label
backgroundColor - get or set non-rolled on backing color (if no backing specified)
rollBackgroundColor - get or set rolled on backing color
color - get or set non-rolled on text color (if no icon specified)
rollColor - get or set rolled on text color
backing - references the backing of the button
rollBacking - references the rollBacking (if set)
icon - references the icon of the button (if set)
rollIcon - references the rollIcon (if set)
toggleObj - references the toggle object (string or display object if set)
rollToggle - references the rollToggle (if set)
toggled - true if button is in toggled state, false if button is in original state
enabled - default is true - set to false to disable
rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off
focus - get or set the focus property of the Button used for tabOrder
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

EVENTS
loaded - is dispatched when the files(s) are uploaded - the event object comes with the following properties:
   FOR IMAGES (see types array)
      e.bitmaps - an array of Bitmap objects of the loaded images
      e.bitmap - the first Bitmap to be created from the loaded images
      e.lastBitmap - the last Bitmap to be created from the loaded images
      e.total - the total Bitmap objects to be created from the loaded images
   FOR TEXT (see types array)
      e.texts - an array of String objects of the loaded text files
      e.text - the first text loaded
      e.lastText - the last text loaded
      e.total - the total number of texts loaded
   FOR JSON (see types array)
      e.jsons - an array of JSON objects of the loaded JSON files
      e.json - the first JSON object loaded
      e.lastJSON - the last JSON object loaded
      e.total - the total number of JSON files loaded

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[33061] TextArea(width, height, size, padding, color, backgroundColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, password, inputType, wrap, maxLength, frame, expand, style, group, inherit)

TextArea
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
TextArea creates an input text field by overlaying an HTML TextArea.
The TextArea is then overlayed with the createjs DOMElement
and scaled and positioned with ZIM code. This can also be used if selectable text is required
Access to the HTML tag is provided with the TextArea tag property.
So CSS Styles can be applied to the HTML tag as with any HTML textarea tag
The TextArea comes with a ZIM Rectangle in behind that you can adjust with parameters
or remove completely if you so desire using the TextArea background property
ie. myTextArea.background.alpha=0; or myTextArea.removeChild(myTextArea.background)
Due to the HTML tag being overlayed, the TextArea.resize() must be called if it is moved
(This is called automatically when the stage is resized)

NOTE: rotation and skewing of Tag is not supported - although might work with custom CSS transformations

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var textArea = new TextArea(300, 200).center();

var label = new Label({text:""}).pos(20,20);
textArea.on("input", function() {
   label.text = textArea.text;
   stage.update();
});

// to set scrollBars on TextArea use CSS on the TextArea tag property:
textArea.tag.style.overflow = "auto"; // etc.

// if manually scaled or positioned (or container is scaled or positioned)
// then the TextArea must be resized with the resize method
textArea.sca(.5).mov(200);
textArea.resize();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the TextArea backing (the textarea field will be that less the padding*2)
height - (default 70) the height of the TextArea backing (the textarea field will be that less the padding*2)
   Note: to set scrollBars use CSS: textArea.tag.style.overflow = "auto";
size - (default 20) a Number for the font-size of the TextArea (do not use px on the end)
   to change the font, use CSS on the tag property: textArea.tag.style.fontFamily = "courier";
padding - (default 5) the pixels between the backing border and the HTML textarea
color - (default "#666") text color (any CSS color)
backgroundColor - (default "rgba(256,256,256,.1)") background color of box
borderColor - (default rgba(0,0,0,.1)) the color of the border
borderWidth - (default 1) thickness of the border
corner - (default 0) the round of the corner (set to 0 for no corner)
   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default null) the shadow color (css color) of a drop shadow
shadowBlur - (default null) pixels of how blurred the shadow is if the shadow is set - eg. 10
dashed - (default true) set to false to turn off the dashed for the border
id - (default null) a string id for the HTML textarea tag for CSS styling, etc.
placeholder - (default null) a string that is used for the HTML textarea tag placeholder parameter
readOnly - (default false) set to true to make TextArea read only (still selectable)
spellCheck - (default true) set to false to turn Browser spell check off
password - (default false) set to true to turn the field into a password field - single line only (uses input field type=password and not TextArea)
wrap - (default true) set to false to stop the textarea from wrapping (css white-space:pre)
maxLength - (default null) set to a number to limit the number of characters in the textarea
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
expand - (default 20) hit area around background to count as a press on TextArea - handy for dragging as HTML tag area will override mouse on canvas
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setFocus(type) - sets the focus of the TextArea tag (thanks Armin for the prompting)
   type is a Boolean that defaults to true - set to false to make the TextArea blur (loose focus)
   might need timeout 100ms before setting
   see also focus property
resize() - call the resize method if the scale or position of the TextArea is changed
   this will sync the location of the HTML textarea tag
   resize() is only needed if the scale or x, y of the TextArea (or its container) is changed
   it is not needed for general window resizing - the TextArea handles this
   Note: if the Frame itself changes location in the HTML document, call a frame.update()
   this will then dispatch an update event to the TextArea and it will resize()
   this is not needed if resizing the window or scrolling - see Frame update() method docs
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
currentValue - get or set the text content of the TextArea
text - the same as currentValue - for convenience...
focus - get or set if the TextArea tag has focus or use setFocus() to set (might need timeout 100ms before setting)
readOnly - set to true to not be able to edit or to false to be able to edit (always can select)
maxLength - get or set the maximum number of characters typed - will not truncate existing characters until typed
tag - the HTML textarea tag - just a regular HMTL form tag which can be styled
background - access to the Rectangle() used for the background
   you can remove this with yourTextArea.background.removeFrom(yourTextArea);
   or adjust it dynamically with any of the Rectangle properties like color
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
   will be set to true if this component is the first made or component is the last to be used
frame - get or set the frame - set this if changing frames
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
focus, blur are dispatched when the text area gains and loses focus
input is dispatched when the text area is typed or pasted into
change is dispatched when the text area is different after losing focus
These are just the html events passed on through - note the difference between input and change!

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

MORE: http://zimjs.com/code/bits.html?title=TextArea


************************************
[33403] Tag(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit)

Tag
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Creates a <div></div> with id of id and overlays it on the Canvas with the createjs DOMElement
The tag is scaled and positioned with ZIM code and can be filled with any HTML desired
Access to the HTML tag is provided with the tag property (so you can use innerHTML or style on this)
However a convenience innerHTML and style properties have been added to Tag
CSS Styles can be applied to the HTML tag as with any HTML div tag
Or use the chainable add() method to add a String of HTML (instead of setting innerHTML)
Due to the HTML tag being overlayed, the tag.resize() must be called if it is manually scaled or moved
(This is called automatically when the stage is resized)

SEE: https://zimjs.com/explore/tag.html

NOTE: rotation and skewing of Tag is not supported - although might work with custom CSS transformations

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var tag = new Tag(300, 60).center().add("<h1>TITLE TEXT</h1>");
tag.style.color = red;

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the div tag
height - (default 70) the height of the div tag
   Note: to set scrollBars use CSS: tag.style.overflow = "auto";
id - (default zimTag_randomNumber) a string id for the HTML div tag.
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
backgroundColor - (default "rgba(0,0,0,0)") a ZIM Rectangle used as a background
padding - (default 10) inner padding between edge of background rectangle and HTML tag
paddingHorizontal - (default padding) inner horizontal padding between edge of background rectangle and HTML tag
paddingVertical - (default padding) inner vertical padding between edge of background rectangle and HTML tag
expand - (default 20) hit area around background to count as a press on Tag - handy for dragging as HTML tag area will override mouse on canvas
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(htmlString) - chainable method to add HTML to tag - calling add() again will append
   see innerHTML property as alternative or to overwrite the innerHTML
resize() - call the resize event if the scale or position of the tag is changed
   this will sync the location of the div tag
   resize() is only needed if the scale or x, y of the tag (or its container) is changed
   it is not needed for general window resizing - the Tag handles this
   Note: if the Frame itself changes location in the HTML document, call a frame.update()
   this will then dispatch an update event to the Tag and it will resize()
   this is not needed if resizing the window or scrolling - see Frame update() method docs
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
tagID - the assigned id of the tag
tag - the HTML div tag - just a regular HMTL div tag which can be styled
innerHTML - the innerHTML property of the tag (so myTag.tag.innerHTML is not needed)
background - access to the ZIM Rectangle used as the background
frame - get or set the frame - set this if changing frames
style - the style property of the tag (so myTag.tag.style is not needed)
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover



------------------------------------
MODULE 3: ZIM METHODS
------------------------------------

************************************
[33650] obj.addTo(container, index, localToLocal)

addTo
zim DisplayObject method

DESCRIPTION
A wrapper function for addChild() / addChildAt() to add the obj to the container.
This allows us to chain more effectively:
var circle = new Circle().addTo(stage).drag();
Also, ZIM has obj.center(container) and obj.centerReg(container) functions
where the obj comes first followed by the container.
So it is a pain to flip things and use container.addChild(obj)
Now, we can use obj.addTo(container) and the object we are adding comes first.
The index parameter is similar to an addChildAt()
We can also use obj.removeFrom() to automatically remove from the container

EXAMPLE
var circle = new Circle(50, "red");
circle.addTo(stage); // or just circle.addTo(); // for the default frame's stage
// with chaining - and dragging:
var circle = new Circle(50, "red").addTo(stage).drag();

var rect = new Rectangle(100, 100, "blue");
rect.addTo(stage, 0); // place on bottom

EXAMPLE
// Changing Coordinates
// An object may appear to change positions
// when you add from one container to another (the stage is a container too).
// This happens because the x and y origin inside the containers may be at different places
// yet the x and y property of the object remains unchanged.
// The localToLocal parameter converts between the coordinates and updates the x and y
// so that the object does not appear to jump - this defaults to true

var container = new Container().pos(100,100);
var rectangle = new Rectangle(200, 200, yellow).addTo(container);
// we want to drag the container and the circle
// but when the circle is in the container we want to drag the circle independently
// this leads to a tricky situation that can be solved as follows:
rectangle.on("mousedown", function() {container.drag({currentTarget:true});});
rectangle.on("pressup", function() {container.noDrag();});

var circle = new Circle(50, blue).center().drag();
// check to see if the circle is over the container and if so then add the circle
// try settin the third parameter to false to see what would normally happen
circle.on("pressup", function() {
   if (rectangle.hitTestReg(circle)) { // do not hitTest the container!
      circle.addTo(container); // keep position with default true as third parameter
   } else {
      circle.addTo(stage);
   }
   stage.update();
});

PARAMETERS supports DUO - parameters or single object with properties below
container - (default first frame's stage) the container to add to
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
localToLocal - (default true) makes object not move when added from one coordinate space to another
   this also may change the objects x and y properties - set to false not to do this
   localToLocal is ignored if object currently does not have a parent

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=addTo


************************************
[33735] obj.removeFrom(container)

removeFrom
zim DisplayObject method

DESCRIPTION
A chainable wrapper function for removeChild() that removes the obj from the container
Matches obj.addTo(container)
We have obj.removeFrom(container)

EXAMPLE
var circle = new Circle(50, "red");
circle.addTo(stage);
// later
circle.removeFrom(stage);

PARAMETERS
container - (default the object's parent) the container to remove the object from

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=removeFrom


************************************
[33768] obj.added(call, interval, maxTime)

added
zim DisplayObject method

DESCRIPTION
Calls callback function when object is added to the stage
CreateJS has an "added" event that triggers when an object is added to another container
but this container may not be on the stage.
added polls several times quickly and then every 100ms to see if the object has a stage property
Once it does then it calls the callback and removes the interval

EXAMPLE
var circle = new Circle(50, "red");
circle.added(function() {zog("has stage");});

PARAMETERS
callback - the function to call when added - will call right away if object is already added
   call will receive a reference to the stage and the object as parameters
interval - (default .1) time in seconds to check (also see ZIM TIME constant)
   keeps repeating until stage is there or maxTime is reached
maxTime - (default null) time in seconds to keep checking or forever if not provided

RETURNS id of interval so clearInterval(id) will stop added() from checking for stage


************************************
[33831] obj.centerReg(container, index, add)

centerReg
zim DisplayObject method

DESCRIPTION
Centers the registration point on the bounds - obj must have bounds set.
Will default to adding the object to the container.
If no container parameter is provided and the object is in a container,
centerReg will center the object in the current container. Thanks Bracer Jack for the suggestion.
If no container and the object is not in a container,
centerReg will center the object on the default frame's stage.
A convenience function for setting both registration points at once.
Also see center() for centering without changing the registration point.

SEE: https://zimjs.com/positioning

EXAMPLE
var rect = new Rectangle(100, 100, "blue");
rect.centerReg(); // centers registration, centers and adds to stage
rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true});

// To just center the registration and not add it to a container
// use rect.centerReg(null, null, false);
// This is different than in the past where leaving out parameters would just center the registration
// The change is to match the default behaviour of addTo() and center() to add to stage without parameters

PARAMETERS supports DUO - parameters or single object with properties below
container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
   will be ignored if the add parameter is false
add - (default true) set to false to only center the object's registration
   setting to false will not remove the object if already added to a container

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=centerReg


************************************
[33891] obj.center(container, index, add)

center
zim DisplayObject method

DESCRIPTION
Centers the object on the container.
Will default to adding the object to the container.
If no container parameter is provided and the object is in a container,
center will center the object in the current container. Thanks Bracer Jack for the suggestion.
If no container and the object is not in a container,
center will center the object on the default frame's stage.
Also see centerReg() for centering registration point at same time.

SEE: https://zimjs.com/positioning

EXAMPLE
var rect = new Rectangle(100, 100, "blue");
rect.center(); // centers and adds to stage
// the below animation will be around the registration point at the top left corner
// this is usually not desired - see centerReg() when rotating and scaling
rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true});

PARAMETERS supports DUO - parameters or single object with properties below
container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
   will be ignored if the add parameter is false
add - (default true) set to false to only center and not add the object to the container
   setting to false will not remove the object if already added to a container

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=center


************************************
[34003] obj.place(id)

place
zim DisplayObject method

DESCRIPTION
Sets the object to drag and logs to the console the x and y.
Also can use keyboard arrows for moving 1 pixel
and SHIFT keyboard arrows for moving 10 pixels.
This is for when building you can move an object around to position it
then when positioned, look at the console for the positioning code.
In your code, set the reported x and y and delete the place call.

EXAMPLE
circle.place("circle"); // lets you drag circle around - then see console

PARAMETERS
id - (default null) the name of the object so that the log gives you complete code

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=place


************************************
[34057] obj.placeReg(id)

placeReg
zim DisplayObject method

DESCRIPTION
Gives draggable indicator to position a registration point in an object
This is for when building and when positioned, look at the console
for registration code and delete the placeReg call.

EXAMPLE
myContainer.placeReg("myContainer"); // lets you drag an indicator around - then see console

PARAMETERS
id - (default null) the name of the object so that the log gives you complete code

RETURNS obj for chaining


************************************
[34101] obj.pos(x, y, horizontal, vertical, container, index, add, reg, regX, regY)

pos
zim DisplayObject method

DESCRIPTION
Chainable convenience function to position an object and optionally add to a container
pos() provides easy positioning around the edges of a container.

pos() has gone through three versions:
VERSION 1 - positioned the registration point and has been replaced with loc()
VERSION 2 - positioned left, right top or bottom with right and bottom being specified with boolean true
VERSION 3 - positions left, right, center, top and bottom with ZIM positioning constants

pos() positions objects from the edges of the container or on the stage if no container provided
This defaults to the left of the object from the left and the top of the object from the top
If the horizontal parameter is set to RIGHT it will position the right of the object from the right of the container
If the vertical parameter is set to BOTTOM it will position the bottom of the object from the bottom of the container
If CENTER is provided, it centers the object on the axis and then moves it the x or y provided
Setting reg (or regX, regY) to true will position to the registration point - also see POSREG constant

SEE: https://zimjs.com/positioning

EXAMPLE
// 1. adds circle to default stage moves left and top of circle to 100, 100
circle1.pos(100, 100);

// 2. adds circle to box and positions right and bottom of circle 100 and 200
// from right and bottom of box bounds
circle2.pos(100, 200, RIGHT, BOTTOM, box)
// or
circle2.pos(100, 200, "right", "bottom", box)
// or
circle2.pos(100, 200, true, true, box);

// 3. centers the circle in x and moves 100 and places circle 200 from bottom
circle3.pos(100, 200, CENTER, BOTTOM);

// 4. adds to stage and puts registration point at x=200 and y=0
circle4.pos({x:200, reg:true});

// 5. adds to stage and puts registration point at x=200 and y=radius (not y=0)
circle5.pos({x:200, regX:true});

PARAMETERS supports DUO - parameters or single object with properties below
x - (default null or 0 for right) the x distance in the container to the left or right side of the object
   which side, depends on the right parameter
   if reg or regX is true then it is the distance to the registration point not the side
y - (default null or 0 for bottom) the y distance in the container to the top or bottom of the object
   which one, depends on the bottom parameter
   if reg or regY is true then it is the distance to the registration point not the top or bottom
horizontal - (default LEFT) LEFT will position the left side to the left side of the container bounds
   set to RIGHT to postion the right side from the right of the container bounds
   if reg or regX is true then it is the distance to the registration point not the side
   set to CENTER or MIDDLE to center object and move amount provided in x
   if reg or regX is true then centers the registration point and moves the amount provided in x
vertical - (default TOP) TOP will position the top side to the top side of the container bounds
   set to BOTTOM to postion the bottom side from the bottom of the container bounds
   if reg or regY is true then it is the distance to the registration point not the side
   set to CENTER or MIDDLE to center object and move amount provided in y
   if reg or regY is true then centers the registration point and moves the amount provided in y
container - (default current container or zdf stage) the Container to add the obj to and position
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
add - (default true) add to container - set to false to not add
reg - (default false) set to true to position to the registration point rather than sides, top or bottom
   See: POSREG contant - set POSREG=true; to change the default pos() to position the registration point
   This is good to adjust legacy code - or if the original pos setting is preferred.
regX - (default reg) set to true to position x to the registration point rather than the sides
   will override reg if provided
regY - (default reg) set to true to position y to the registration point rather than the top or bottom
   will override reg if provided

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=pos


************************************
[34370] obj.loc(target|x, y, container, index, add, localToLocal)

loc
zim DisplayObject method

DESCRIPTION
locates obj registration at registration of provided target
or at x and y if numbers are provided
This is like the original pos() where the registration is used
But it a single object with x y properties can be passed as a parameter
Will calculate localToLocal if target is provided
Also can add to container at an index

SEE: https://zimjs.com/positioning

EXAMPLE
var circle1 = new Circle().pos(100,100);
var circle2 = new Circle().loc(circle1); // adds on top of circle1

EXAMPLE
new Circle().loc(400, 400); // places reg of circle at 400, 400
// note, this is different than pos(400, 400) which would place left top of circle at 400, 400

PARAMETERS supports DUO - parameters or single object with properties below
target | x - (default null) an object with x and y properties such as any ZIM Display Object (Rectangle, Button, etc)
   or a zim Point(100, 100) object or {x:100, y:300}, etc.
   or can be a Number for an x value - in which case, a y value might be expected too
y - (default null) an optional y value
container - (default current container or zdf stage) the Container to add the obj to and position
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
add - (default true) add to container - set to false to not add
localToLocal - (default true) if target is provided, the obj will be placed on the target matching locations across coordiate spaces

RETURNS obj for chaining


************************************
[34451] obj.mov(x, y)

mov
zim DisplayObject method

DESCRIPTION
Move the object over in the x and/or y
Equivalant to obj.x += x and obj.y += y
Pass in 0 for no shift in x if you just want to shift y
Gives chainable relative position

SEE: https://zimjs.com/positioning

EXAMPLE
var circle = new Circle().center().mov(50); // move to right 50

PARAMETERS supports DUO - parameters or single object with properties below
x - (default 0) the distance in x to move (can be negative)
y - (default 0) the distance in y to move (can be negative)

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=mov


************************************
[34486] obj.sca(scale, scaleY)

sca
zim DisplayObject method

DESCRIPTION
Chainable convenience function to do scaleX and scaleY in one call.
If you pass in just the scale parameter, it scales both x and y to this value.
If you pass in scale and scaleY then it scales x and y independently.
Also see scaleTo(), fit() and Layout().

EXAMPLE
circle.sca(.5); // x and y scale to .5
circle.sca(.5, 2); // x scale to .5 and y scale to 2

PARAMETERS
scale - the scale (1 being full scale, 2 being twice as big, etc.)
scaleY - (default null) pass this in to scale x and y independently

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=sca


************************************
[34519] obj.alp(alpha)

alp
zim DisplayObject method

DESCRIPTION
Chainable convenience function to set the alpha
See also the CreateJS set({prop:val, prop2:val}) method;

EXAMPLE
circle.alp(.5);

PARAMETERS
alpha - (default null) the alpha between 0 and 1

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=alp


************************************
[34545] obj.ble(blendMode)

ble
zim DisplayObject method

DESCRIPTION
Chainable convenience function to set the blendMode (compositeOperation)
See also the CreateJS set({prop:val, prop2:val}) method;
Also see:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

EXAMPLE
circle.ble("difference");

PARAMETERS
blendMode - (default difference) the blendMode string:
   normal, multiply, screen, overlay, darken, lighten
   color-dodge, color-burn,  hard-light, soft-light
   difference, exclusion, hue, saturation, color, luminosity

RETURNS obj for chaining


************************************
[34577] obj.hov(value, prop)

hov
zim DisplayObject method

DESCRIPTION
Chainable convenience function to set the rollover (hover) property of an object
This defaults to alpha if a number and color if a string
But the type of property can also be set - for multiple properties, use a Button
This sets mouseover and mouseout events on the object
It will also set the cursor of the object to "pointer"
This can be changed with the cursor property or the cur() method

EXAMPLE
circle.alp(.5).hov(.8);
new Rectangle(100,100,blue).hov(green);
triangle.hov(1.5, scale);

PARAMETERS
value - (default 1) the hover value of the property
   if a number, the default property is alpha
   if a string, the default property is color
   passing in -1 will remove the hover
prop - (default alpha or color as stated above) the property to change to the value on hover

RETURNS obj for chaining


************************************
[34637] obj.rot(rotation, x, y)

rot
zim DisplayObject method

DESCRIPTION
Chainable convenience function to set the rotation
See also the CreateJS set({prop:val, prop2:val}) method;

EXAMPLE
rect.rot(180);

PARAMETERS
rotation - (default null) the rotation in degrees
x - (default regX) set an x value to rotate about
y - (default regY) set a y value to rotate about

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=rot


************************************
[34685] obj.siz(width, height, only)

siz
zim DisplayObject method

DESCRIPTION
Chainable convenience function to set width and height in one call.
If you pass in just the width or height parameter, it keeps the aspect ratio.
If you want to set only the width or height, then set only to true.
If you pass in both the width and height then it sets both.
Note: that width and height will adjust the scaleX and scaleY of the object.
Also see width, height, widthOnly, heightOnly.

EXAMPLE
var rect = new Rectangle(100,200,blue).addTo(stage);
rect.siz(200); // sets width to 200 and height to 400
rect.siz(200, null, true); // sets width to 200 and leaves height at 200
rect.siz(200, 100); // sets width to 200 and height to 100

PARAMETERS
width - (default null) the width of the object
   setting only the width will set the widht and keep the aspect ratio
   unless the only parameter is set to true
height - (default null) the height of the object
   setting only the width will set the widht and keep the aspect ratio
   unless the only parameter is set to true
only - (default false) - defaults to keeping aspect ratio when one dimension set
   set to true to scale only a single dimension (like widthOnly and heightOnly properties)

RETURNS obj for chaining


************************************
[34733] obj.ske(skewX, skewY)

ske
zim DisplayObject method

DESCRIPTION
Chainable convenience function to skewX and skewY (slant)
See also the CreateJS set({prop:val, prop2:val}) method;

EXAMPLE
circle.ske(20);

PARAMETERS
skewX - (default null) the x skew
skewY - (default null) the y skew

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=ske


************************************
[34762] obj.reg(regX, regY, still)

reg
zim DisplayObject method

DESCRIPTION
Chainable convenience function to regX and regY (registration point)
The registration point is the point the object is positioned with
and the object scales and rotates around the registration point
See also the CreateJS set({prop:val, prop2:val}) method;
See also centerReg()

EXAMPLE
circle.reg(200, 200);

PARAMETERS
regX - (default null) the x registration
regY - (default null) the y registration
still - (default false) set to true to move the object to counter the registration change
   this will let you set the registration point without moving the object

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=reg


************************************
[34803] obj.top()

top
zim DisplayObject method

DESCRIPTION
Places object on top layer in container - if in a container
returns the object for chaining
Can also just addTo(container) to re-add to top
NOTE for some situations this will break code
so a safer way is obj.parent.setChildIndex(obj, obj.parent.numChildren-1);
which is what this method uses

EXAMPLE
circle.top(); // brings circle to the top of parent container

RETURNS obj for chaining


************************************
[34830] obj.bot()

bot
zim DisplayObject method

DESCRIPTION
Places object on bottom layer in container - if in a container
returns the object for chaining

EXAMPLE
circle.bot(); // put circle on bottom layer (0) of parent container

RETURNS obj for chaining


************************************
[34854] obj.ord(num)

ord
zim DisplayObject method

DESCRIPTION
Moves object layer order in container - if in a container
returns the object for chaining

EXAMPLE
circle.bot().ord(1); // put circle one layer up from bottom of parent container
circle.top().ord(-2); // put circle two layers down from top (third highest layer)

PARAMETERS
num - (default 0) the number of levels (layers) up or down to move the object
   1 will move the object one level higher, -1 will move it one level lower
   2 will move the object two levels higher, -2 will be two levels lower, etc.

RETURNS obj for chaining


************************************
[34884] obj.cur(type)

cur
zim DisplayObject method

DESCRIPTION
Chainable function that sets the object's cursor to the type provided - same as CSS cursors

EXAMPLE
var circle = new Circle(10, "red").center().cur(); // "pointer"
circle.on("click", function(){zog("yes");});

PARAMETERS
type - (default "pointer") the CSS cursor to set
   https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
   Common cursors are "default", "pointer", "Wait", "move", "grab", "grabbing", "zoom-in", "zoom-out", and various resize like "ew-resize"

RETURNS obj for chaining


************************************
[34913] obj.sha(color||Shadow, offsetX, offsetY, blur)

sha
zim DisplayObject method

DESCRIPTION
Chainable function that sets the object's drop shadow to a CreateJS Shadow indirectly or directly

EXAMPLE
// indirectly set the CreateJS Shadow
// with sha(color, offsetX, offsetY, blur)
var circle = new Circle(10, "red").center().sha("rgba(0,0,0,.2)", 10, 5, 5);

// directly set the CreateJS Shadow
// with sha(new createjs.Shadow())
var shadow = new createjs.Shadow("rgba(0,0,0,.2)", 10, 5, 5);
var circle1 = new Circle(10, "pink").center().mov(-30).sha(shadow);
var circle2 = new Circle(10, "yellow").center().mov(30).sha(shadow);

PARAMETERS
color||Shadow (default "rgba(0,0,0,.3)") the CSS color for the shadow - "red", dark, etc.
   or pass a single parameter that is a CreateJS Shadow object https://www.createjs.com/docs/easeljs/classes/Shadow.html
offsetX (default .08 the width or 5 if no width) the distance in the x that the shadow is moved over - can be negatitve
offsetY (default .08 the height or 5 if no height) the distance in the y that the shadow is moved over - can be negatitve
blur (default .16 the width or 10 if no width) the distance the shadow is blurred

RETURNS obj for chaining


************************************
[34955] obj.dep(depth)

dep
zim DisplayObject method

DESCRIPTION
A chainable method to set the depth property of a Display object for use with ZIM VR().
When the object is added to VR it will be cloned into two channels and shifted left and right based on its depth.
A depth of 0 will not shift the object and this will appear flat on the screen.
A depth of 20 will shift 20 pixels left and right and appear to come out of the screen.
A depth of -20 will appear to go into the screen.
Depending on the VR parallax settings, depth can also affect parallax.
A negative depth does not unless negativeParallax is set to true in the VR parameters.

EXAMPLE
var circle = new Circle().center().dep(10);

PARAMETERS
depth - (default 0) the apparent depth in ZIM VR - or set the depth property

RETURNS obj for chaining


************************************
[34987] obj.nam(name)

nam
zim DisplayObject method

DESCRIPTION
A chainable method to set the name property of a DisplayObject.
The object can then be accessed with object("name") (or zim.object("name") if zns is true)

BACKGROUND
CreateJS provides Containers with a name property and a getChildByName() method
but you have to remember to ask the parent container for the child and it is a little lengthy.
In ZIM Cat 01, nam() and object() were introduced as a global way to handle object names.
Usually, a variable name is used to reference objects but the name offers an alternative.

Note: naming an object with the same name will overwrite earlier names accessible through object()
This will NOT remove the name property from the previous object
So it is possible that the previous object can still be accessed with parent.getChildByName()
parent.getChildByName() will find the first child with that name in the container
object() will find the last named object with that name anywhere
We could remove previous name properties with the same name but we decided not to
Let us know your thoughts at zimjs.com/slack

EXAMPLE
new Circle().nam("ball").center();

// see what names there are:
zog(object.getNames()); // ["ball"] - if only "ball" has been named

if (mobile()) object("ball").sca(2);
else object("ball").dispose();

zog(object.getNames()); // [] - if only "ball" has been named

PARAMETERS
name - a String to set the name property of the object

RETURNS obj for chaining


************************************
[35043] obj.movement(call)

movement
zim DisplayObject method

DESCRIPTION
Chainable convenience method that captures mouse movement over an object.
This triggers when a mouseover is active and stagemousemovement dispatches.
It also triggers when a pressmove dispatches - so good for mobile.
A callback function is called on movement.

NOTE: set an object's noMovement property to true to remove these events

SEE: noMovement() as well

EXAMPLE
var pic = asset("picture.jpg").center().movement(function (e) {
   mask.widthOnly = e.stageX-pic.x;
   stage.update();
});
var mask = new Rectangle(pic.width, pic.height, frame.color).loc(pic).ord(-1);
pic.setMask(mask, true); // dynamic


RETURNS obj for chaining


************************************
[35099] obj.noMovement()

noMovement
zim DisplayObject method

DESCRIPTION
removes the events added with movement()

EXAMPLE
if (timer < 5) pic.noMovement();

RETURNS obj for chaining


************************************
[35122] obj.tap(call, distance, time, once)

tap
zim DisplayObject method

DESCRIPTION
Chainable convenience method that adds a mousedown and mouseup event to the object
that requires the to move less than distance parameter
This is more like a proper click - down up without dragging.
This method works on desktop or mobile, etc.
An optional time parameter is provided if a minimum time is desired.
Note that a click event also works on mobile as a "tap"
but click also allows dragging between down and up presses - so really is a mouseup.
This will automatically add a cursor of "pointer"
which can be changed with the cursor property or cur() method

NOTE: tap() ignores List titleBar and organizer as to not conflict with tapping on actual list
NOTE: set an object's noTap property to true to avoid activating a hold on an object

SEE: noTap() as well

EXAMPLE
new Circle(50, "red").tap(function (e) {
   e.target.alpha = .5;
   stage.update();
});

PARAMETERS
call - the function to call when clicked
   call will receive the event object as a parameter (with target, currentTarget, etc. properties)
distance - (default 5) distance in pixels within which the mouseup must occur for a click to be counted
time - (default 10000) time in ms within which the mouseup must occur for a click to be counted
once - (default false) set to true to capture only one click then auto-remove listeners

RETURNS obj for chaining


************************************
[35188] obj.noTap()

noTap
zim DisplayObject method

DESCRIPTION
removes the mousedown and mouseup events added with tap()

EXAMPLE
var circle = new Circle(50, "red").tap(function (e) {
   e.target.alpha = .5;
   stage.update();
});
if (score > 10) circle.noTap();

RETURNS obj for chaining


************************************
[35216] obj.hold(call, distance, time, once)

hold
zim DisplayObject method

DESCRIPTION
Chainable convenience method that adds a press and hold event to the object
The callback function will run after the object is held for a certain time without moving the object
This method can be used on mobile to replace shift keys, etc.
This will automatically add a cursor of "pointer" - although mobile will not see it
which can be changed with the cursor property or cur() method

NOTE: set an object's noHold property to true to avoid activating a hold on an object

SEE: noHold() as well

EXAMPLE
// remove circle if held for 1000 ms (one second)
new Circle(50, "red").hold(function (e) {
   e.target.removeFrom();
   stage.update();
});

PARAMETERS
call - the function to call after hold time
   call will receive the event object as a parameter (with target, currentTarget, etc. properties)
distance - (default 5) distance in pixels within which the mouseup must occur for a hold to be counted
time - (default 1.5) time in seconds before hold is activated
once - (default false) set to true to capture only one click then auto-remove listeners

RETURNS obj for chaining


************************************
[35302] obj.noHold()

noHold
zim DisplayObject method

DESCRIPTION
removes the mousedown and mouseup events added with hold()

EXAMPLE
var circle = new Circle(50, "red").hold(function (e) {
   e.target.removeFrom();
   stage.update();
});
if (score > 10) circle.noHold();

RETURNS obj for chaining


************************************
[35331] obj.change(call, once)

change
zim DisplayObject method

DESCRIPTION
Chainable convenience method that adds a change event to the object
This only works for components that dispatch a change event ;-)

SEE: noChange() as well

EXAMPLE
new Tabs().change(function (e) {
   zog(e.target.text); // the text of the selected tab
});

PARAMETERS
call - the function to call when changed
   call will receive the event object as a parameter (with target, currentTarget, etc. properties)
once - (default false) set to true to capture only one click then auto-remove listeners

RETURNS obj for chaining


************************************
[35366] obj.noChange()

noChange
zim DisplayObject method

DESCRIPTION
removes the change event added with change()

EXAMPLE
var tabs = new Tabs().change(function (e) {
   zog(e.target.text);
});
if (score > 10) tabs.noChange(); // removes change event

RETURNS obj for chaining


************************************
[35391] obj.drag(boundary, overCursor, dragCursor, all, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds, rect, currentTarget, offStage)

drag
zim DisplayObject method

DESCRIPTION
Adds drag and drop to an object with a variety of options.
Handles scaled, rotated nested objects.
Also see draggable property for setting a default drag() and noDrag()
and to indicate whether a drag has been set.

EXAMPLE
var radius = 50;
var circle = new Circle(radius, "red");
circle.center();
circle.drag();

// OR with chaining
var circle = new Circle(radius, "red").center().drag();

// OR with ZIM DUO
circle.drag({slide:true});

// BOUNDARY
// circle has its registration point in the middle
// keep registration point within rectangle starting at x=100, y=100
// and drag within a width of 500 and height of 400
var boundary = new Boundary(100,100,500,400);
circle.drag(boundary);

// or keep circle on the stage with the following
var boundary = new Boundary(0,0,stageW,stageH).contract(radius);
circle.drag(boundary); // drag within stage

// or by passing the stage (or a Container as a boundary)
circle.drag(stage); // drag within stage

PARAMETERS supports DUO - parameters or single object with properties below
boundary - (default null) a ZIM Boundary object for the drag boundary
   or a ZIM DisplayObject including stage
      if the boundary is a display object then ZIM will keep the shape of the object inside the bounds
      if the boundary object is a Blob, the target will stay within the Blob (experimental)
      if the drag is on a container and the "all" parameter is false
      then ZIM will recall the drag methods on each child of the container
      so the bound calculations are easier
   if surround is true then it will make sure the obj surrounds the boundary rather than stays within it
   this boundary is relative to the stage (global)
   if a boundary relative to the object's parent is desired then set the localBounds parameter to true
   Rectangle, Stage, StageGL - will keep object fully inside the bounds (based on bounds of object when adding drag)
overCursor - (default "pointer") the CSS cursor property as a string for rolling over the object
dragCursor - (default "pointer") the CSS cursor property as a string for pressing and dragging the object
all - (default false) set to true to drag a whole container rather than its parts (was called currentTarget)
   eg. container.drag(); will drag any object within the container
   container.drag({all:true}) will drag the whole container
   See: DRAGALL contant - set DRAGALL=true; to change the default drag to drag a whole container
swipe - (default false) which prevents a swipe from triggering when dragging
localBounds - (default false) which means the rect is global - set to true for a rect in the object parent frame
onTop - (default true) brings the dragged object to the top of the container - unless Keyboard at top.
   // to drag on top of keyboard, set the type property of the keyboard to "LowerKeyboard" - or anything other than Keyboard
surround - (default false) is for dragging a big object that always surrounds the boundary
slide - (default false) will let you throw the object and dispatch a slidestop event when done
slideDamp - (default .3) is the damping setting for the slide (1 is no damping and .1 will slide more, etc.)
slideSnap - (default true) lets the object go outside and snap back to bounds - also "vertical", "horizontal", and false
reg - (default false) when set to true will snap the registration of the object to the mouse position
removeTweens - (default true) will automatically remove tweens from dragged object unless set to false
startBounds - (default true) set to false to ignore bound rect before dragging (sometimes handy when putting drag on container)
rect - (depreciated) same as boundary - kept for backwards compatibility when using config object
currentTarget - (default false) same as the all parameter - kept for backwards compatibility when using config object
offStage - (default false) set to true to be able to drag object off stage (thanks Shammi!)

note: will not update stage if OPTIMIZE is set to true
unless Ticker.update is set to true or you run Ticker.always(stage) see zim.Ticker

EVENTS
Adds a "slidestart" event to the drag object that is dispatched when the object starts sliding - if slide is true
Adds a "slidestop" event to the drag object that is dispatched when the object comes to rest after sliding - if slide is true

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=drag


************************************
[35942] obj.noDrag(recursive)

noDrag
zim DisplayObject method

DESCRIPTION
Removes drag function from an object.
This is not a stopDrag function (as in the drop of a drag and drop).
Dropping happens automatically with the drag() function.
The noDrag function turns off the drag function so it is no longer draggable.

EXAMPLE
circle.noDrag();

PARAMETERS
recursive (default true) - turns off drags on children

RETURNS obj for chaining


************************************
[35995] obj.dragBoundary(boundary)

dragBoundary
zim DisplayObject method

DESCRIPTION
Dynamically changes or adds a boundary rectangle to the object being dragged with drag().

NOTE: replaces old ZIM dragRect() method

EXAMPLE
var boundary = new Boundary(100,100,500,400);
circle.dragBoundary(boundary);

PARAMETERS
boundary - is a ZIM Boundary object for the bounds - the local / global does not change from the original drag

RETURNS obj for chaining


************************************
[36027] obj.mouse()

mouse
zim DisplayObject method

DESCRIPTION
Sets object's mouseChildren and mouseEnabled properties to true
These are the defaults - used primarily to reverse ZIM noMouse()
which can be used to turn off mouseChildren and mouseEnabled

NOTE: just using mouse() does not add cursors or interactivity
see cur(), hov(), drag(), transform(), gesture(), or various mouse events

EXAMPLE
var circle = new Circle().drag();
timeout(1, function () {
   circle.noMouse(); // circle cannot not be dragged, etc.
   timeout(1, function () {
      circle.mouse(); // circle can be dragged
   });
});

RETURNS obj for chaining


************************************
[36060] obj.noMouse()

noMouse
zim DisplayObject method

DESCRIPTION
Sets object's mouseChildren and mouseEnabled properties to false
This can be used to save processing on complex objects that do not need interactivity

NOTE: this will prevent interactivity for cur(), hov(), drag(), transform(), gesture()
and any mouse events like mousedown, click, mouseover, etc.

EXAMPLE
var circle = new Circle().drag();
timeout(1, function () {
   circle.noMouse(); // circle cannot not be dragged, etc.
   timeout(1, function () {
      circle.mouse(); // circle can be dragged
   });
});

RETURNS obj for chaining


************************************
[36094] obj.wire(target, prop, twoWay, setSource, filter, call, input)

wire
zim DisplayObject method

DESCRIPTION
The wire() method connects an object (source) property to another object (target) property.
This can be one way (default) or two way with the twoWay parameter set to true.
For instance:
   new Slider().center().wire(circle, "scale"); // note the property as string
will change the scale of the circle as the slider's current value changes.
The currentValue (if the object has one) is the default input followed by selectedIndex.
If the source object has neither currentValue nor selectedIndex
then the input is the same property as the target property.
For instance:
   new Circle().center().wire(circle2, "x", true);
would mean changing either circle's x property would change the other.
Multiple wire() methods can be chained.
For instance:
   slider.wire(circle, "x").wire(circle, "y");
   slider.wire(circle, "scale").wire(circle2, "scale");

BACKGROUND
The wire system is an alternative to events at 25% the size of traditional JS addEventListener.
It is a single extra conditional in the Ticker that checks to see if a Dictionary list has length.
If it does it cycles through the list to see if input properties have changed
and if so, sets the target property.  Updates are batched to a single stage update
This is the same stage update that is used by any Ticker functions including those by drag, animate, etc.
Basically, wire is same system as events but with a more specific format - adds 1.4 k to ZIM file size.

WIRED
There is also a wired() method that can be be put on the target object
and points to a source object to set a specified propert.
This just flips the target and the source and calls the wire() function.
The methods MUST go on the second object made - so using either wire() or wired() covers use cases.
There are also noWire() and noWired() methods to remove connections - with various alternatives.

FILTER AND CALLBACK
wire is also similar to ZIM Bind and bind() but binds within ZIM where bind binds outside of ZIM.
Like Bind, wire uses an optional filter and callback function.
For instance:
   new Dial().center().wire(tone, "volume", null, filter, call);
will call the filter function before setting the target property (tone.volume).
The filter function will receive the data (the input currentValue) as its parameter
and MUST return data to be passed along but the data can be changed or tested.
The call function will be called after the target property is set.

See: https://zimjs.com/cat/wired.html
See: https://zimjs.com/cat/synth.html

EXAMPLE
var circle = new Circle(100, pink, dark).center();
new Dial({step:0, min:1, max:3})
   .center()
   .wire(circle, "scale");

// stage.update(); // depending, let the wire() set the stage update

EXAMPLE
// this time the circle (target) starts at a scale of 2
var circle = new Circle(100, pink, dark).sca(2).center();
// so we want the dial (source) to start at 2 as well
// we could use the Dial parameter currentValue:circle.scale
// or we can use the wire setSource to true
new Dial({step:0, min:1, max:3})
   .center()
   .wire(circle, "scale", null, true); // true for setSource to the target value

// stage.update(); // depending, let the wire() set the stage update

EXAMPLE
var rect = new Rectangle(100, 100, blue, dark)
   .pos(0,70,CENTER)
   .drag(stage);

new Slider({min:0, max:stageW-100, currentValue:rect.x})
   .pos(0,100,CENTER,BOTTOM)
   .wire(rect, "x", true, function (data) {
      if (data < 100 || data > stageW-100-100) rect.color = red;
      return data; // filter must return data - even if not changing it
   }, function (data) {
      if (data >= 100 && data <= stageW-100-100) rect.color = blue;
   });

// timeout(5, function () {
//    slider.noWire(); // remove slider rect wire
// });

EXAMPLE
var person = {num:1, hair:red, eyes:blue}
var shirt = {num:1, color:dark, pocket:dark}
wire(person, shirt, "num"); // will wire person num to shirt num
wired({ // or could use wire() - just showing wired()
   source:person, // will wire person hair property to shirt color property
   input:"hair",
   target:shirt,
   prop:"color"
});
person.num = 3;
person.hair = "blue";
// note: could use addWires(person) to add wire and wired methods to person if desired

timeout(.01, function () { // must wait for Ticker to go
   zog(shirt.num); // 3
   zog(shirt.color); // blue
});

PARAMETERS supports DUO - parameters or single object with properties below
** the current object is called the source - it will be setting the prop on the target
target - the object that has the property to wire to (and change)
prop (default input)- a String name of the property to change on the target
   if no property is provided it assumes the input property if provided
   the only time no prop would be useful is to wire together components
   like a Slider to a Dial where both will default to selectedIndex
twoWay (default false) - also have the change in prop on target change the source object's property
setSource (default false) - initially, by default, wire will change the target value to the source value
   setting setSource to true will initially set the source value to the target value
   this is independent of twoWay - so the twoWay setting does not matter
filter (default null) - a function to call before the prop is changed on the target (or source object if twoWay is true)
   this function receives a data parameter that holds the value of the property that will be changed on the target
   the prop value can be tested or changed
   the filter function MUST return the value whether it is modified or not
call (default null) - a function that is called once the property has been set on the target - receives the value as a parameter
input (default DEFAULTWIRE or "currentValue" or "selectedIndex" or prop) - an optional source property as a String
   wire will usually be used to wire a component to a DisplayObject
   and components usually have a currentValue or selectedIndex property that is changing in a change event, for instance
   so wire by default uses these if available and a change event is no longer needed
   Set ZIM DEFAULTWIRE constant to a String of the desired input if different than above.
   If the source object does not have a currentValue or selectedIndex property
   then the same property name as the target prop is used (unless an input is provided here)

RETURNS obj for chaining


************************************
[36259] obj.noWire(target, prop, input)

noWire
zim DisplayObject method

DESCRIPTION
turns off a wire() on the object - can optionally filter by target, prop and or input

EXAMPLE
if (circle.hitTestBounds(rect)) {
   slider.noWire();
   // or slider.noWire(circle); // if slider has more than one wire
});

EXAMPLE
timeout(10, function () {
   noWire(); // turn off all wires
   // noWire(null, null, "scale"); // turn off all wires adjusting scale
   // noWire({target:mySprite}); // turn off all wires on mySprite
});

RETURNS obj for chaining


************************************
[36295] obj.wired(source, prop, twoWay, setSource, filter, call, input)

wired
zim DisplayObject method

DESCRIPTION
Wires an object's property based on a source - see docs for ZIM wire() for details.
A wiring can be added only if the source object and the target object exist.
For instance we CANNOT do (even if we declare circle first):
   new Slider().center().wire(circle, "scale");
   var circle = new Circle().center();

OPTION 1:
   var circle = new Circle().center();
   new Slider().center().wire(circle, "scale");

OPTION 2:
   var slider = new Slider().center();
   new Circle().center().wired(slider, "scale"); // use wired()

wired() just switches the source and target and calls wired()
See the wire() method for parameters and description

EXAMPLE
var slider = new Slider().center();
new Circle().center().wired(slider, "scale");

RETURNS obj for chaining


************************************
[36335] obj.noWired()

noWired
zim DisplayObject method

DESCRIPTION
Turns off wired() on the object.

EXAMPLE
if (circle.hitTestBounds(rect)) {
   circle.noWired();
});

RETURNS obj for chaining


************************************
[36361] obj.bind(id, props, extra, filter, bindObj)

bind
zim DisplayObject method

DESCRIPTION
Binds the specified object properties to a Bind object's connection.
This could be a connection to localStorage or a server script to a database.
This will allow an cleaner way to save and retrieve data.
See the docs for the ZIM Bind class for more details and examples

See: https://zimjs.com/ten/bind.html

EXAMPLE
// LOCALSTORAGE example
var b = new Bind(); // create a Bind object - defaults to localStorage
// b.clear(); // clear localStorage memory

// bind() will get data remembered in localStorage
// and also set up the binding
var c = new Circle().center().bind("circle", ["x","y"]).drag();

// when we want to update the binding call the to() method
c.on("pressup", function () {b.to();});

PARAMETERS
** supports DUO - parameters or single object with properties below
id - a one-word string ID for the bind
   this will be used as the JSON key for the data
props - a property to bind as a string or an array of properties, eg. ["x","y"]
   or an object literal in the form {prop1:TO, prop2:FROM, prop3:BOTH, prop4:TO, etc.}
   by default the property will be bound as BOTH - as in TO and FROM
   this means data would be received on bind.to() calls and sent on bind.from() calls
extra (default null) extra information to be sent to the server (not localStorage)
   this could be an id or a search term, etc. it will have encodeURI() applied
   this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function to run before sending and after receiving data
   this will receive (data, command, extra) parameters
   the function must return the data - see Bind masterFilter parameter for more information
   note: the masterFilter if supplied will run as well before the filter
bindObj (default zimDefaultBind) - set to a specific bind object or keep as default
   see also ZIM Bind() setDefault parameter and default property

RETURNS obj for chaining


************************************
[36426] obj.noBind(props, removeConnectionData, call, bindObj)

noBind
zim DisplayObject method

DESCRIPTION
Removes a binding from an object and its bound data
See: bind() and ZIM Bind();

EXAMPLE
var b = new Bind(); // create a Bind object - defaults to localStorage
var c = new Circle().center().bind("circle", ["x","y"]).drag();
c.on("pressup", function () {b.to();});
new Button({label:"REMOVE"}).loc(100,100).tap(function () {
   // binding will be removed
   // next refresh, circle will be centered
   // but then will be bound again until button is pressed
   c.noBind();
});

PARAMETERS
** supports DUO - parameters or single object with properties below
props - (default null) a property or an array of properties for which to remove the bind
   leaveing this blank will remove all bindings on the object
removeConnectionData (default true) remove connection data
   this will clear removed data from localStorage for LOCALSTORAGE setting
   a "remove" property will be sent to the server for GET or POST
   with a JSON {id1:["prop1","prop2"], id2:["prop3"]} format of removed items
call is a callback function after the data is sent and received
   the callback function will receive a result "success" or "error ..." in its parameter
bindObj - (default zimDefaultBind) a specific bind object to remove from

RETURNS obj for chaining


************************************
[36472] obj.transform(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame)

transform
zim DisplayObject method

DESCRIPTION
The transform method adds transform controls to a display object.
The controls allow the user to move, scale, stretch, rotate and change the registration point.
Parameters are available to choose which of these transformations are available.
By default, all the transformations are available to use but
only the scale and registration point controls are showing.
The others work as the user rolls over the edges or the outer corners.
You can optionally set these to be visible as boxes on the sides and circles on the outer corners.

NOTE: works with the ZIM TransformManager() class to handle multiple transforms and saving data for persistence.
NOTE: the transformed object will have its mouseChildren set to false.

CLICK turns off and on the controls if allowToggle parameter is set to true (default is true)
If you use the TransformManager for multiple objects, the allowToggle is automatically set to true
SHIFT rotate snaps to 45
Dropping the registration point will snap to corners or center if close enough - unless CTRL is down
CTRL scale will scale about the registration point
CTRL DBLCLICK will reset scale to 1 and rotation to 0

EXAMPLE
rectangle.transform(); // shows handles for tranformations

EXAMPLE
rect.transform({ // scale and stretch only
   move:false,
   rotate:false
});

// hide the rectangle's bottom stretch control so only can stretch from top
// note - transform() expects there to be a control so do not remove a control
// also, the controls have a hitArea so setting alpha to 0 will not work
rect.transformControls.stretchYControls.getChildAt(1).sca(0);
// or set its visible to false
rect.transformControls.stretchYControls.getChildAt(1).visible = false;

// Record the transforms and remake transforms when page reloads
// Or see the TransformManager
if (localStorage && localStorage.data) rect.transformControls.setData(localStorage.data, true);
rect.on("transformed", function() {
   if (localStorage) localStorage.data = rect.transformControls.recordData(true);
});

// change the color of the controls
var r = new Rectangle(100,100,grey).center().transform({borderColor:blue})
r.transformControls.scaleControls.loop(function (control) {
   control.color = blue;
   control.updateCache();
});

PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) let user move object
stretchX - (default true) let user stretch object from left and right sides
stretchY - (default true) let user stretch object from top and bottom
scale - (default true) let user scale object from corners - might still be able to stretch from sides - see stretchX and stretchY
rotate - (default true) let user rotate object
allowToggle - (default true) let user hide and show controls with click - set to false not to let user hide controls
visible - (default true) show the controls to start
onTop - (default true) set to false to not move the selected shape to the top of its container
showStretch - (default false - true on mobile) show side boxes for stretching - a cursor will always show if stretchX or stretchY is true
showRotate - (default false - true on mobile) show circles at corners for rotation - a cursor will always show if rotation is true
showScale - (default true) show corner boxes for scaling - a cursor will always show if scale is set to true
showReg - (default true) show round circle for draggable registration point - rotates around registration point
showBorder - (default true) show rectangle border
borderColor - (default brown) any border color (CSS)
borderWidth - (default 1) the width of the border
dashed - (default false) set to true for dashed border
customCursors - (default true - false on mobile) set to false for system cursors (system cursors will not be rotated)
handleSize - (default 20 mobile - 10 desktop) the size of the control squares and circles
regSize - (default 16) the size of the registration point circle
snapDistance - (default 10) registration point will snap to corners and center if within this distance (and CTRL key not down)
snapRotation - (default 5) rotation will snap to angles divisible by this value
   holding CTRL will avoid snapping
   holding SHIFT will rotate only multiples of 45 degrees
cache (default true) - set to false to not cache the controls and cursors
events (default false) - set to true to receive events while controls are being opertated
   otherwise events will only trigger on pressup (not pressmove) - this conserves processing
ghostColor (default null) - color of outline when transform tools are not showing
ghostWidth (default null) - width of outline when transform tools are not showing
ghostDashed (default true) - dashed of outline if ghostColor or ghostWidth is set
ghostHidden (default false) - set to true to start with ghostHidden
frame (default zimDefaultFrame) - set to proper frame if on different frame

PROPERTIES
toggled - adds a read-only Boolean to the object that is true if controls are showing otherwise false

METHODS
toggle(state - default null) - added to the object
   shows controls if hidden and hides controls if showing (returns the object for chaining)
   or pass in true to show controls or false to hide controls

TRANSFORM CONTROL OBJECT
When tranform() is set on an object, the object receives a transformControls property
This holds the following:

PROPERTIES:
visible - read only whether the controls are visible
ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost
ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost
controls - reference to the Container that holds all the controls
scaleControls - reference to the Container that holds the corner boxes for scaling
stretchXControls - reference to the Container that holds the left and right boxes for stretching
stretchYControls - reference to the Container that holds the top and bottom boxes for stretching
rotateControls - reference to the Container that holds the outer circles for rotating

METHODS:
hide() - hides the controls - returns object for chaining
show() - shows the controls - returns object for chaining
recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES
   if toJSON (default false) is set to true, the return value is a JSON string
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
   if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
   returns object for chaining
remove(noHide) - removes the controls - set noHide true if already hidden
add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show
allowToggleOn() - sets the show / hide controls on with click
allowToggleOff() - removes the show / hide controls on with click
showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters
hideGhost() - hide the ghost outline
toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost
   or set state to true to show ghost or false to not show ghost
addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters
removeGhost() - disable ghost outline functionality
disable() - may show the controls if visible but cannot use them
enable() - turns the using of the controls back on
resize(dispatch) - call resize if the object is transformed in ways other than with the controls
   set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager
dispose() - remove all aspects of transform on object

EVENTS
Adds a "transformed" event to obj that is dispatched when pressup on any of the controls or on click
   if the events parameter (or events property on transformControls) is set to true then these happen on pressmove of controls
   the transformed event object has a transformType property
   the transformType property has values of "select" (if not moved), "size", "move", "rotate", "stretch", "reg" "reset"
   the transformed event object also has a pressup property that is true if on pressup and false if from pressmove
Adds "transformshow" and "transformhide" events for when click to hide or show controls
If TransformManager() is used there are more events available such as "persistset", etc.

RETURNS obj for chaining


************************************
[37671] obj.gesture(move, scale, rotate, boundary, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl, onTop, surround, circularBounds, rect)

gesture
zim DisplayObject method

DESCRIPTION
Sets multi-touch pan, pinch and rotate for position, scale and rotation
Handles scaled and rotated containers
Scale and rotation occur from the pinch point (with optional regControl for about the registration point)
Note - gesture() only works on the currentTarget - not a container's children (like drag() can)
ZIM Frame should have touch set to true (which is the default for mobile)
ALSO: see the noGesture() method to remove some or all gestures
ALSO: see the gestureBoundary() method to set or reset the boundary rectangle dynamically

EXAMPLE
rectangle.gesture(); // move, scale and rotate with no bounds

EXAMPLE
rect.gesture({
   rotate:false,
   rect:new createjs.Rectangle(0,0,stageW,stageH),
   minScale:.5,
   maxScale:3,
   slide:true
});

PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) move the object with average of fingers
scale - (default true) scale the object with first two fingers' pinch
rotate - (default true) rotate the object with first two fingers' rotation
boundary - (default null) ZIM Boundary rectangle with (x,y,w,h) to contain bounds of the object
   if surround is true then it will make sure the obj surrounds the boundary rather than stays within it
   See circularBounds parameter to keep circular shapes with boundary
minScale - (default null) a minimum scale
maxScale - (default null) a maximum scale
snapRotate - (default 1) degrees to snap rotation to after rotation is finished
localBounds - (default false) set to true to make rect for bounds local rather than global
slide - (default false) will let you throw the object and dispatch a slidestop event when done
slideEffect - (default 5) how much slide with 0 being no slide and then longer slide times and distance like 10, etc.
regControl (default false) set to true to rotate and scale around registration point rather than pinch point
onTop - (default true) brings the object to the top of the container
surround - (default false) is for dragging a big object that always surrounds the rect
   must specify a rect and currently not supported unless rotate is false
circularBounds - (default false) set to true if object is circular with center registration
   set to true to use radius to calculate rotated object in boundary if boundary is set
rect - (depreciated) same as boundary - kept for backwards compatibility

EVENTS
Adds move, scale and rotate events to obj (when associated gesture parameters are set to true)
If slide is true, obj dispatches a "slidestop" event when sliding stops

RETURNS obj for chaining


************************************
[38134] obj.noGesture(move, scale, rotate)

noGesture
zim DisplayObject method

DESCRIPTION
Removes multi-touch pan, pinch and rotation gestures from an object.
If all three are removed then deletes the zimTouch object and touch events from obj

EXAMPLE
rectangle.noGesture(); // removes all gestures
// or
rectangle.noGesture(true, true, false); // would leave rotation
// or with ZIM DUO
rectangle.noGesture({rotation:false}); // would leave rotation

PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) - set to false not to remove move gesture
scale - (default true) - set to false not to remove scale gesture
rotate - (default true) - set to false not to remove rotate gesture

RETURNS obj for chaining


************************************
[38181] obj.gestureBoundary(boundary, new)

gestureBoundary
zim DisplayObject method

DESCRIPTION
Dynamically changes or adds a boundary rectangle to the object being dragged with gesture().

EXAMPLE
var boundary = new Boundary(100,100,500,400); // x,y,w,h
circle.gestureBoundary(boundary);

OR pre ZIM 4TH
gestureBoundary(circle, boundary);

PARAMETERS
boundary - is a ZIM Boundary rectangle - the local / global does not change from the original gesture setting
update - (default true) reset base drag boundary

RETURNS obj for chaining


************************************
[38226] obj.addPhysics(dynamic, contract, shape, friction, linear, angular, density, bounciness, maskBits, categoryBits, physics, restitution)

addPhysics
zim DisplayObject method

DESCRIPTION
Add Physics to a DisplayObject.  DisplayObject should be centerReg() on the stage (or in non-transformed Container at 0,0 on stage)
The Physics world can be set up with the ZIM Physics() class in the Controls module.
Box2D and ZIM physics JavaScript helper module need to be imported.
If no physics world has been created, the addPhysics() method will create a default world.
The default world will have a borders around the stage and gravity of 10.
See: https://zimjs.com/physics/

NOTE: Adding physics also adds more methods and properties to the DisplayObject
See the Physics() docs for all the details

EXAMPLE
new Circle().center().addPhysics(); // circle will fall with gravity to the floor

EXAMPLE
// create a world with no gravity (viewed from top like air-hockey)
var physics = new Physics(0);

// create physics objects using the addPhysics() method
var circle = new Circle(50,blue,grey).center().addPhysics({bounciness:1.1});

// make sure to centerReg() any rectangular objects
var rect = new Rectangle(30,400).centerReg().pos(70).addPhysics(false); // static - do not move
var tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10}); // does not slide easily

// turn on dragging
physics.drag();

PARAMETERS
dynamic - (default true) - set to true to not move the physics body (static)
contract - (default 0) - make the physics body smaller (or bigger with negative) than bounds
shape - (default object shape) - "rectangle" for any object other than Cirlce, Dial and Triangle
   but can specify a "circle" for a Sprite or Bitmap, for instance - to try and match shape
   custom polygon bodies can also be made with manual Box2D and then use physics.setMap()
   but the only shapes available automatically are "rectangle", "circle", "triangle"
friction - (default .8) - how sticky will the body act - set to 0 to slide.
linear - (default .5) - linear damping which slows the movement - set to 0 for no damping
angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping
density - (default 1) - the density that can affect what happens with collisions
bounciness - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy (was restitution)
maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies
   as soon as maskBits is specified, the body will collide only with the categoryBits provided to the maskBits parameter
   1 will collide with bodies that do not have categoryBits specified including the borders
   to test collision with bodies that have categoryBits specified, use the pipe (|) as follows:
   1|2 will also collide with bodies having categoryBits of 2 specified
   so if another body has categoryBits of 4 then the bodies would not collide.
   1|2|4 would also collide with 4 but not bodies with categoryBits of 8, etc.
   2|4 would pass through any bodies without categoryBits of 2 or 4 including the borders
categoryBits - (default 1) - a collision category - by default, bodies are in category 1
   use with maskBits to say which bodies will collide with which other bodies
   the values are bit fields https://en.wikipedia.org/wiki/Bit_field so can have the following values:
   can be 2, 4, 8, 16, 32, 64, 128, 256, etc. up to 15 powers of 2
physics - (default zimDefaultPhysics)
restitution - (default bounciness) - replaced by bounciness - kept for backwards compatibility

RETURNS obj for chaining


************************************
[38313] obj.removePhysics()

removePhysics
zim DisplayObject method

DESCRIPTION
Remove Physics from a DisplayObject.
This removes various methods and properties that addPhysics() added
The object can be added back to the physics world with addPhysics()

EXAMPLE
obj.removePhysics(); // ;-)

RETURNS obj for chaining


************************************
[38343] obj.hitTestPoint(x, y, boundsCheck)

hitTestPoint
zim DisplayObject method

DESCRIPTION
See if shape of obj is hitting the global point x and y on the stage.

EXAMPLE
var circle = new Circle().loc(100,100).drag();
circle.on("pressmove", function() {
   if (circle.hitTestPoint(stageW/2, stageH/2)) {
      if (circle.alpha == 1) {
         circle.alpha = .5;
         stage.update();
      }
   } else {
      if (circle.alpha == .5) {
         circle.alpha = 1;
         stage.update();
      }
   }
});

PARAMETERS
x and y - the point we are testing to see if it hits the shape of the object
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

RETURNS a Boolean true if hitting, false if not


************************************
[38395] obj.hitTestReg(other, boundsCheck)

hitTestReg
zim DisplayObject method

DESCRIPTION
See if the shape shape of an object is hitting the registration point of object (other).

EXAMPLE
var circle = new Circle(50, "red").center().drag();
var rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", function() {
   if (circle.hitTestReg(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
})

PARAMETERS
other - the object whose registration point we are checking against
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

RETURNS a Boolean true if hitting, false if not

MORE: http://zimjs.com/code/bits.html?title=hitTestReg


************************************
[38441] obj.hitTestRect(other, num, boundsCheck)

hitTestRect
zim DisplayObject method

DESCRIPTION
See if a shape of an object is hitting points on a rectangle of another object.
The rectangle is based on the position, registration and bounds of object (other).
num is how many points on the edge of the rectangle we test - default is 0.
The four corners are always tested as well as the very middle of the rectangle.

EXAMPLE
var circle = new Circle(50, "red").center().drag();
var rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", function() {
   if (circle.hitTestRect(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
});

PARAMETERS
other - the object whose bounding rectangle we are checking against
num - (default 0) the number of points along each edge to check
   1 would put a point at the middle of each edge
   2 would put two points at 1/3 and 2/3 along the edge, etc.
   there are always points at the corners
   and one point in the middle of the rectangle
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

RETURNS a Boolean true if hitting, false if not

MORE: http://zimjs.com/code/bits.html?title=hitTestRect


************************************
[38521] obj.hitTestCircle(other, num, boundsCheck)

hitTestCircle
zim DisplayObject method

DESCRIPTION
See if the shape of an object is hitting points on a circle of another object.
The circle is based on the position, registration and bounds of object (other).
num is how many points around the circle we test - default is 8
Also checks center of circle hitting.

EXAMPLE
var circle = new Circle(50, "red").center().drag();
var triangle = new Triangle(100, 100, 100, "blue").loc(100,100);
circle.on("pressmove", function() {
   if (triangle.hitTestCircle(circle)) {
      stage.removeChild(triangle);
      stage.update();
   }
});

PARAMETERS
other - the object whose circle based on the bounding rect we are using
num - (default 8) the number of points evenly distributed around the circle
   and one point in the middle of the circle
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

RETURNS a Boolean true if hitting, false if not

MORE: http://zimjs.com/code/bits.html?title=hitTestCircle


************************************
[38588] obj.hitTestCircleRect(other, margin)

hitTestCircleRect
zim DisplayObject method

DESCRIPTION
Uses an equation to see if a circlular object is hitting the rectangle of another object.
DO NOT use with a rotated rectangle object - for that use hitTestRect() or hitTestCircle().
This is faster than hitTests on shapes - so will have the speed of hitTestBounds, hitTestCircles and hitTestGrid.
The circle is based on a the object radius if there is one
and if no radius then the average of the width and height divided by two.
A margin parameter is provided to tweak the hitTest
The rect is based on the bounds of the second object projected globally as a rectangle
If the second object bounds are rotated, the global bounds will be bigger to keep parallel to the axes

EXAMPLE
var ball = new Circle(50, "red").center().drag();
var box = new Rectangle(100, 100, "blue").loc(100,100);
ball.on("pressmove", function() {
   if (ball.hitTestCircleRect(box)) {
      zog("points!");
   }
});

PARAMETERS
other - the object whose bounds are used to see if circle shape is hitting
margin (default 0) pixels the distance between the circle and the bounds is increased or decreased to effect the hit

RETURNS a Boolean true if hitting, false if not


************************************
[38651] obj.hitTestCircles(other, margin)

hitTestCircles
zim DisplayObject method

DESCRIPTION
Uses an equation to see if two circles are intersecting.
This is faster than hitTests on shapes - so will have the speed of hitTestBounds and hitTestGrid.
The circles are based on the bounds of the two objects - it does not matter on which object the method is placed.
If the bounds are not square then half the average length of the sides is used as the radius.
A margin parameter is provided to tweak the hitTest

EXAMPLE
var ball = new Circle(50, "red").center().drag();
var basket = new Circle(100, "blue").loc(100,100);
ball.on("pressmove", function() {
   if (ball.hitTestCircles(basket)) {
      zog("points!");
   }
});

PARAMETERS
other - the object whose circle based on the bounding rect we are using
margin (default 0) pixels the distance between circles is increased or decreased to effect the hit

RETURNS a Boolean true if hitting, false if not


************************************
[38708] obj.hitTestBounds(other, margin, boundsShape)

hitTestBounds
zim DisplayObject method

DESCRIPTION
See if obj.getBounds() is hitting other.getBounds().
Margin can be adjusted to tweak the hitTest.
Pass in a boundsShape shape if you want a demonstration of where the bounds are.

EXAMPLE
var circle = new Circle(50, "red").center().drag();
var rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", function() {
   if (circle.hitTestBounds(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
});

PARAMETERS
other - another object whose rectanglular bounds we are testing
margin (default 0) shifted distance in pixels before hit is counted - can be positive or negative
boundsShape - (default null) an empty Shape or createjs.Shape
   you would need to add the boundsShape to the stage

RETURNS a Boolean true if hitting, false if not

MORE: http://zimjs.com/code/bits.html?title=hitTestBounds


************************************
[38768] obj.hitTestPath(other, num, showPoints)

hitTestPath
zim DisplayObject method

DESCRIPTION
See if the shape of an object is hitting points on a path of a Squiggle or Blob.
num is how many points between each point on the path we test - default is 2

EXAMPLE
var path = new Blob().center();
var circle = new Circle(50, purple).pos(100,100).drag();
circle.on("pressmove", function() {
   if (circle.hitTestPath(path, 3, true)) {
      circle.alpha -= .02;
      stage.update();
   }
});

PARAMETERS
other - the path (Squiggle or Blob) to test to see if the object shape is hitting
num - (default 2) the number of points added to the path roughly between each point
   this gets totalled - so num*numPoints and then distributed along the path
showPoints (default false) will draw small circles along the path where the hits will be tested

RETURNS a Boolean true if hitting, false if not


************************************
[38836] obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)

hitTestGrid
zim DisplayObject method

DESCRIPTION
Converts an x and y point to an index in a grid.
If you have a grid of rectangles, for instance, use this to find out which rectangle is beneath the cursor.
This technique will work faster than any of the other hit tests.

EXAMPLE
var tile = new Tile(new Rectangle(100,100),5,4,10,10).center();
var circle = new Circle(10,green).addTo().drag();
circle.on("pressmove", function (e) {
   var index = tile.hitTestGrid(tile.width, tile.height, 5, 4, circle.x, circle.y,0,0,10,10);
   zog(index);
});

PARAMETERS
width and height - the overall dimensions
cols and rows - how many of each (note it is cols and then rows)
x and y - where you are in the grid (eg. e.stageX and e.stageY)
offsetX and offsetY - (default 0) the distances the grid starts from the origin of the obj
spacingX and spacingY - (default 0) spacing between grid cells (null will be returned if x and y within spacing)
   spacing is only between the cells and is to be included in the width and height (but not outside the grid)
local - (default false) set to true to convert x and y to local values
type - (default index) which means the hitTestGrid returns the index of the cell beneath the x and y point
   starting with 0 at top left corner and counting columns along the row and then to the next row, etc.
   set type to "col" to return the column and "row" to return the row
   set to "array" to return all three in an Array [index, col, row]

RETURNS an index Number (or undefined) | col | row | an Array of [index, col, row]

MORE: http://zimjs.com/code/bits.html?title=hitTestGrid


************************************
[38910] obj.animate(props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck)

animate
zim DisplayObject method
powered by createjs.Tween (TweenJS)

DESCRIPTION
Animate object obj properties in time milliseconds.
You can set various types of easing like bounce, elastic, back, linear, sine, etc.
Handles callbacks, delays, loops, rewinds, relative, series and sequences of animations.
SEE: https://zimjs.com/animation

Shape Animation
ZIM animate() lets you animate one Squiggle to another or one Blob to another
See the props parameter under the convenience properties for shape and blobShift

Advanced Animation
ZIM animate() lets you animate along a path made with a zim Squiggle or Blob
These paths can be edited by the user and the animation will still work
The paths themselves can be animated or wiggled.
Orient and Flipping are available.
Dynamic speed can be set with percentSpeed and tied in to Accelerator and MotionController
Scrubbing animation and path animation is also supported with percentComplete
This can be used in Parallax with a Slider, Dial, MotionController, or general coding
Dragging along a path is as easy as setting the drag parameter to true
This can be done with while animating or with the animation paused
ZIM EXTRA! provides animation based on animation.
This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path
but EXTRA! also opens up endless possibilities as the input and output does not have to be the target.
This means that animation can also control properties of other objects.
SEE: https://zimjs.com/nio/

NOTE: to temporarily prevent animations from starting set ANIMATE to false
NOTE: see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running
NOTE: set mouseEnabled of target before calling animate as animate itself sets mouseEnabled and then resets to original after a delay

EXAMPLE
var circle = new Circle(50, "red");
circle.center();
circle.alpha = 0;
circle.sca(0);
circle.animate({alpha:1, scale:1}, .7, null, done);
function done(target) {
   // target is circle if params is not set
   target.drag();
}

// or with ZIM DUO and from parameter:
var circle = new Circle(50, "red");
circle.center();
circle.animate({props:{alpha:0, scale:0}, time:.7, from:true});

// note: there was no need to set alpha and scale to 0 before the animation
// because from will animate from property values in props {alpha:0, scale:0}
// to the present set values - which are 1 and 1 for the default scale and alpha.
// This allows you to place everything how you want it to end up
// and then easily animate to this state.
// An extra advantage of this is that you can use the ANIMATE constant to skip animations while building
// See the https://zimjs.com/ornamate.html example

// RELATIVE animation
// rotate the rectangle 360 degrees from its current rotation
rectangle.animate({rotation:"360"});

// pulse circle
var circle = new Circle(50, "red");
circle.center();
// pulse circle from scale 0 - 1 every second (use ZIM DUO)
circle.animate({props:{scale:0}, time:.5, loop:true, rewind:true, from:true});
// toggle pause the circle when stage is pressed
stage.on("stagemousedown", function() {
   circle.pauseAnimate(!circle.paused);
});

EXAMPLE
// using ZIM VEE value:
// this will animate the alpha to between .5 and 1 in either 1 second or 2 seconds
circle.animate({alpha:{min:.5, max:1}}, [1, 2]);

EXAMPLE
// Dynamic Animation
var rect = new Rectangle(200,200,red)
   .centerReg()
   .animate({
      props:{rotation:360},
      loop:true,
      time:2,
      ease:"linear",
      dynamic:true,
      set:{percentSpeed:0} // no speed to start
   });

// example using a Slider to set speed from 0 to 5 times as fast
var slider = new Slider(0,500).pos(100, 100);
slider.on("change", function () {
   rect.percentSpeed = slider.currentValue;
});

// example using an Accelerator and MotionController
// to set speed from -200 to 200 percent
// depending on mouse position
// multiple targets including Dynamo and Scroller objects can be added to Accelerator
// if adding multiple objects, use an array new Accelerator([rect, otherObject, anotherObject])
new MotionController({
target:new Accelerator(rect),
type:"mousemove",
minPercentSpeed:-200,
maxPercentSpeed:200
});

EXAMPLE
// Series example animating a circle in square formation
// Also showing that the series can include multiple targets
// Click on the stage to pause or unpause the animation

var rect = new Rectangle({color:pink})
   .centerReg()
   .sca(0); // hiding it to start

var circle = new Circle({color:purple}) // chaining the rest
   .addTo(stage)
   .pos(400,300)
   .animate({ // circle will be the default object for the inner animations
      props:[
         // an array of animate configuration objects
         {props:{x:600, y:300, scale:2}},
         {props:{x:600, y:500, scale:1}, call:function(){zog("part way");}},
         {props:{x:400, y:500}, time:.5, ease:"quadInOut"},
         {target:rect, props:{scale:3}, time:1, rewind:true, ease:"quadInOut"},
         {props:{x:400, y:300}}
      ],
      time:1, // will be the default time for the inner animations
      ease:"backOut", // will be the default ease for the inner animations
      id:"square", // will override any id set in the inner animations
      loop:true,
      loopCount:3,
      // note - no rewind or from parameters
      call:function(){zog("done");}
   });

   var paused = false;
   stage.on("stagemousedown", function() {
         paused = !paused;
         pauseAnimate(paused, "square");
   });

EXAMPLE
// sequence example to pulse two circles
var circles = new Container(stageW, stageH).addTo(stage);
var circle1 = new Circle(50, "red").center(circles);
var circle2 = new Circle(50, "blue").center(circles).mov(70);
circles.animate({
   props:{scale:1},
   time:.5,
   loop:true,
   rewind:true,
   from:true,
   sequence:.5
});

EXAMPLE
// animate() can animate any object property
// just use the animate function and pass in the object as the first parameter:

var obj = {age:10}
animate(obj, {age:20}, 1);
interval(.05, function () {
   zog(obj.age);
});

// or if you have a THREEJS mesh
// use quotes to animate a dot property:
animate(mesh, {"rotation.y":360*RAD}, 50);

// or CSS properties - see the CSS parameter for setup info
zss("tagID").opacity = 1; // set this even if it is default
animate(zid("tagID"), {opacity:0}, 2); // etc.

EXAMPLE
// Animate along a Squiggle or Blob path
// see https://zimjs.com/explore/squiggleAnimate.html for more
// see https://zimjs.com/explore/blobAnimate.html for more
// see https://zimjs.com/explore/blobAnimate2.html for more
var line = new Squiggle().center();
new Circle(10, red).addTo().animate({path:line}, 1);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function

props - the object literal holding properties and values to animate
   Basic examples: {x:200} or {rotation:360, alpha:0} or {scale:4} or {x:300, y:300, scale:"2"} (relative scale)
   There are custom options below including Convenience, ZIM VEE, Relative, and Series properties.
   ** Before ZIM 7.1, this parameter was called obj - as to not conflict with CreateJS TweenJS props (now renamed cjsProps)
      obj is still available as a parameter name for backwards compatibility when using a ZIM DUO configuration object
   CONVENIENCE PROPERTIES
      scale - for scaleX and scaleY
      color - on ZIM shapes for setColorRange() and animate colorRange from 0-1
          ** this property cannot be run in a series - rather animate in a call function to accomplish a series of color changes
      shape - animate from one ZIM Squiggle to another or one ZIM Blob to another
         for now, the matching Sqiggle or Blob must have the same number of points
         to pause or stop a shape tween use the animate id parameter
      note - animate from one note to another when animating a ZIM Synth tone()
         note ("A", "C2", "C#" or "Bf", etc.) is coverted to frequency
      blobShift - a number of points to shift the points of a Blob in clockwise direction
         this is when using a shape tween that is a Blob - can be negative
      path - pass in a Blob or Squiggle to animate along path
         https://zimjs.com/nio/path.html
         If the shape has lockControls set to false (the default) then the animation will be dynamic
         and adjust as the shape is changed.
         If a set animation path is desired then set the shape's lockControls to true
         NOTE: Do not re-amimate an object that is being animated on a path
         use a Container and animate the container on the path
         and animate the object inside the container - otherwise percentComplete conflicts
      startPercent - (default 0) set to a percent for where to start the target animating
         ZIM Bead objects will be given a startPercent that matches their start percentage
         currently not supported when dragging on path - it is very complicated
      percent - (default 100) how much percent to animate from the startPercent
         by default, the target will travel once along the path from its start position (startPercent)
         this can be less than the startPercent to make animation travel backwards on the path
         the percent can also be bigger than 100 as well as less than 0
         so a percent:300 will travel three times along the path - and then rewind if rewind is set
         and a percent of -150 will travel one and half times backwards along the path from the startPercent
         currently not supported when dragging on path - it is very complicated
      orient - an object with x and y to aim the target at
         https://zimjs.com/nio/orient.html
         when a path is used this will default to rotate to orient to path
         can set to false for no rotation
         can set to any object with an x, y point such as a circle on the stage - or {x:0, y:0} or a new zim Point, etc.
      flip - setting flip to true will flip the object horizontally when its x direction goes negative
         https://zimjs.com/nio/flip.html
         this will also work with orient to make sure the target is not upside down
         if object is pre-rotated then 90,-90,270 should work as ZIM will swap the the scaleX and scaleY
         but any unusual starting angles may not flip as desired - so put these in a Container and animate the container
      verticalFlip - setting verticalFlip to true will flip the object vertically when its y direction goes negative
         this will also work with orient to make sure the target is not upside down

      EXTRA! - the following convenience properties are available for ZIM EXTRA! (also see extra below)
         https://zimjs.com/nio/extra.html
         zoom - an array that represents scale proportions based on target's y position
            [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values
            zoom:[.5,1.5] scales the target based on its y position - animating y or along a path will show scaling
            zoom:10 - is like zoom:[0,10]
            zoom:true - is like zoom:[0,1]
            zoom:[1,3,stageH/2-100,stageH/2+200] would scale from 1 to 3 in this region and stay at 1 or 3 outside this region
         speed - an array that represents animation percentSpeed based on target's y position
            [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values
            speed:[20,100] sets percentSpeed based on target y position - animating y or along a path will have changing speed
            speed:40 - is like speed:[0,40]
            speed:true - is like speed:[0,100]
            ** will set dynamic property to true - as percentSpeed needs dynamic property set to true
         layer - an array that represents ratio of layer proportions based on target's y position
            [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values
            layer:[0,1] sets current layer based on target y position - animating y or along a path will have changing layers
            layer:1 - is like layer:[0,1]
            layer:true - is like layer:[0,target.parent.numChildren-1]
         fade - an array that represents ratio of alpha based on target's y position
            [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values
            fade:[.5,1] sets current alpha based on target y position - animating y or along a path will have changing alpha
            fade:1 - is like fade:[0,1]
            fade:true - is like fade:[0,1]
            fade:[0,1,stageH/2-100,stageH/2+200] - would change alpha in this y region
      extra - in addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:
         Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]
         The object has the following properties - all are optional except the outputProp which is required:
         |ZIM VEE| - each object below optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from
            inputObj - (default target) - the object with the input property - probably the animation target but could be any object
            inputProp - (default "y") - a string of the property name for the input - "x", "rotation", etc.
            inputMin - (default 0) - the minimum input value for the calculation - also see constrain
            inputMax - (default stageW if x inputProp else stageH) - the maximum input value for the calculation - also see constrain
            outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object
            outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.
            outputMin - (default 0) - the minimum output value for the calculation - also see constrain
            outputMax - (default 1) - the maximum output value for the calculation - also see constrain
            factor - (default 1) setting factor to -1 will reverse the direction of the animation
            outputRound - (default false) set to true to receive rounded output values
            constrain - (default true) constrain the output value to outputMin and outputMax
               set to false to let values go beyond provided mins and maxes
               this is quite usual when a proportion is easily figured at a certain range
               and continued increase or decrease is desired outside the range - just turn constrain to false.
         EXAMPLES:
         extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height
         extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position
         extra:{inputObj:circle, inputProp:"x", inputMax:stageW, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen
         ** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.
   |ZIM VEE| - each props property value optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from (except the EXTRA! properties which accept ZIM VEE values inside)
      these will be picked again if the loopPick parameter is true (default false)
   RELATIVE VALUES: you can pass in relative values by putting the numbers as strings
      rotation:"360" will animate the rotation of the object 360 degrees from its current rotation
      whereas rotation:360 will animate the rotation of the object to 360 degrees
   DOT PROPERTIES: you can animate properties on properties using quotes:
      Here is animate used as a function to animate a THREEJS mesh
         animate(mesh, {"rotation.y":360*RAD}, 5000);
   CSS PROPERTIES: animate can animate CSS properties
      ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed
      Set the css parameter to true and see the CSS parameter for more details
   ANIMATION SERIES: if you pass in an array for the props value, then this will run an animation series
      The array must hold animate configuration objects:
      [{props:{scale:2}, time:1, rewind:true}, {target:different, props:{x:100}}, etc.]
      If you run animate as a method on an object then this is the default object for the series
      but you can specify a target to override the default
      The default time and tween are as provided in the main parameters
      but you can specify these to override the default
      The id of the main parameters is used for the whole series and cannot be overridden
      The override parameter is set to false and cannot be overridden
      All other main parameters are available except rewind, sequence and from
      (rewind and from are available on the inner tweens - for sequence: the initial animation is considered)
      You currently cannot nest animation series
      Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)
      then this will be the last of the series to run
      Note: color cannot be animated in a series - rather animate in a call function to accomplish a series of color changes
      Note: a sequence cannot be seriesed and a series cannot be sequenced
time - |ZIM VEE| (default 1) the time for the tween in seconds (also see ZIM TIME constant)
   see also the rate parameter and property to dynamically change the time the animation takes (its speed)
ease - |ZIM VEE| (default "quadInOut") the equation type for easing ("bounceOut", "elasticIn", "backInOut", "linear", etc)
   see CreateJS easing: https://www.createjs.com/docs/tweenjs/classes/Ease.html
   also see easeAmount and easeFrequency parameters to adjust certain eases like back and elastic
call - (default null) the function to call when the animation is done
params - (default target) a single parameter for the call function (eg. use object literal or array)
wait - |ZIM VEE| (default 0) seconds to wait before doing animation
waitedCall - (default null) calls function after wait is done if there is a wait
waitedParams - (default target) parameters to send waitedCall function
loop - (default false) set to true to loop animation
loopCount - |ZIM VEE| (default 0) if loop is true how many times it will loop (0 is forever)
loopWait - |ZIM VEE| (default 0) seconds to wait before looping
loopCall - (default null) calls function after loop and loopWait (not including last loop)
loopParams - (default target) parameters to send loopCall function
loopWaitCall - (default null) calls function after at the start of loopWait
loopWaitParams - (default target) parameters to send loopWaitCall function
loopPick - (default false) remake any ZIM VEE (Pick) props for the next loop (thanks GSAP)
rewind - |ZIM VEE| (default false) set to true to rewind (reverse) animation (doubles animation time)
rewindWait - |ZIM VEE| (default 0) seconds to wait in the middle of the rewind
rewindCall - (default null) calls function at middle of rewind after rewindWait
rewindParams - (default target) parameters to send rewindCall function
rewindWaitCall - (default null) calls function at middle of rewind before rewindWait
rewindWaitParams - (default target) parameters to send rewindCall function
rewindTime - (default time) set the time in seconds for the rewind portion of an animation
rewindEase - (default null) overwrite the ease for the rewind direction
   this assumes that In is at the start of the rewind and Out is at the end of the rewind
   so setting rewindEase:"bounceOut" will bounce back at the start of the animation
   note - setting ease:"bounceOut" will bounce at the end of the animation
   this allows for a normal start with a bounce and then a normal start at rewind and a bounce
sequence - (default 0) the delay time in seconds to run on children of a container or an array of target animations
   with the addition of ZIM VEE object to the target, you must noPick the array
   for example, target = container or target = {noPick:[a,b,c]} and sequence = 1000
   would run the animation on the first child and then 1 second later, run the animation on the second child, etc.
   or in the case of the array, on element a and then 1 second later, element b, etc.
   If the loop prop is true then sequenceCall below would activate for each loop
   For an array, you must use the zim function with a target parameter - otherwise you can use the ZIM 4TH method
   Note: a sequence cannot be seriesed and a series cannot be sequenced
sequenceCall - (default null) the function that will be called when the sequence ends or on a sequence loop
sequenceParams - (default null) a parameter sent to the sequenceCall function
sequenceReverse - |ZIM VEE| (default false) set to true to sequence through container or array backwards
ticker - (default true) set to false to not use an automatic Ticker function
cjsProps - (default {override: true}) legacy - allows you to pass in CreateJS TweenJS configuration properties
css - (default false) set to true if there is no Frame
   ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed
   But other CreateJS versions will need the plugin available here:
      https://d309knd7es5f10.cloudfront.net/CSSPlugin01.js
      Add that at the top of your code in a script tag
      and at the top of the main script install:
      createjs.CSSPlugin.install();
   <script>
      // other versions of CreateJS need to import and install CSS Plugin
      // createjs.CSSPlugin.install();
      // the property must be set before you can animate
      zss("tagID").opacity = 1; // set this even if it is default
      animate(zid("tagID"), {opacity:0}, 2); // etc.
   </script>
protect - (default false) protects animation from being interrupted before finishing
   unless manually interrupted with stopAnimate()
   protect is always true (regardless of parameter setting) if loop or rewind parameters are set
override - (default true) subesequent tweens of any type on object cancel all earlier tweens on object
   set to false to allow multiple tweens of same object
from - |ZIM VEE| (default false) set to true to animate from obj properties to the current properties set on target
set - |ZIM VEE| (default null) an object of properties to set on the target to start (but after the wait time)
id - (default null) set to String to use with pauseAnimate(state, id) and stopAnimate(id) - thanks Sean Berwick for typo catch
   series animate gets only one overall id - so no id per animation object
events - (default false) set to true to receive an "animation" event on the target (or Container with a Container sequence)
sequenceTarget - (default null) used internally for processing sequence animations
dynamic - (default false) set to true to turn on dynamic speed animation via the percentSpeed property
   setting perecentSpeed (default 100) will adjust the speed of the animation
   to change speed with a Slider, Dial, MotionController, Accelerator, etc.
   use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation
drag - (default false) used with path in props to drag along path
   This can be done while animating or while the animation is paused
   Setting drag to true will set startPaused to true as well - set startPaused to false to animate and drag
   With rewind set, drag lets you change the direction of an animation while animating
   To turn drag off use the pause() method that animate() adds to the target
clamp - (default true) used with dynamic and non-looping - set to false to let time pass beyond animation start and end
startPaused - (default false - true if drag is true) Boolean - set to true to start the animation in the paused state
   Good for animating manually with the percentComplete property
clean - (default true) set to false to not delete animation ids etc. at end of animate()
   Could then use percentComplete to position tween and pauseTween(false) to start animating again
   Note... once tween has waited, percentComplete does not include wait period
   So clean cannot be used to restart an animation with a wait after the animation has waited
   Use the replayTween() method of the target to restart the latest animation on a target
obj - (depreciated) the old version of props - kept for backwards compatibility
seriesWait - (internal) used internally to hold setting relative values in correct series order
sequenceWait - (internal) used internally to tie sequence in to the animation chain for pauseAnimate and stopAnimate
rate - |ZIM VEE| - (default 1) change the speed at which the animation runs
   set to .5 to run at half the speed and 2 to run at twice the speed
   a ZIM VEE here will update each loop if loopPick is set to true
   to change the speed (time) of the animation for each loop
pauseOnBlur - (default true) as of ZIM 10.8.0, animate defaults to pause all animations on blur
   blur is when the window is reduced or a different tab gains focus on the Browser
   animate uses requestAninationFrame which slows down when the window is not in focus
   this can cause animations to go out of sync - pauseOnBlur will prevent this
   Can also set zim.pauseOnBlur=false or true to change this at any time
easeAmount - |ZIM VEE| - (default null) set to change the tween effect
   Ease amounts are as follows:
   quad (default 2) - exponent - this is the default ZIM tween
   cubic (default 3) - exponent
   quart (default 4) - exponent
   quint (default 5) - exponent
   back (default 1.7) - strength
   elastic (default 1) - amplitude - also see easeFrequency
   linear, bounce, circ, sin - no affect
   Note: used mostly with back and elastic (backIn, backOut, backInOut, etc.)
   as setting the tween to quadInOut and then easeAmount to 5
   would be the same as a quintInOut.
easeFrequency - |ZIM VEE| - (default .3 elasticIn and elasticOut or .3*1.5 elasticInOut)
   set to change the elastic ease frequency
   so tween:"elasticOut", easeFrequency:.2 is a faster elastic
   the time may also need to be increased or decreased as desired
   also see easeAmount where easeAmount:3 would be a larger elastic
timeUnit - (default TIME) override the TIME setting to "seconds" / "s" or "milliseconds" / "ms"
timeCheck - (default true) set to false to not have animate() warn of potentially wrong time units - see also TIMECHECK

PROPERTIES - zim.animate() adds the following properties to any object it animates:
   paused - read-only - when animating, paused is set to false
      When paused with pauseAnimate() then paused is set to true
      When stopped or before animation, paused is undefined or null
      There is only one paused property per object so pausing a specific id
      on an object with multiple animations will set paused to true
      even if other animations are still running.
      Pausing multiple objects should work fine.
   percentSpeed - get or set the percent of the animation speed
      100% is regular time, 50% is half as fast, 200% is twice as fast -100% is reverse normal speed, etc.
      use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation
   rate - changes the speed of the animation with 1 as a ratio
      so 1 is the default speed (time), .5 would be half the speed, 2 twice the speed, etc.
      does what percentSpeed does by changing the CreateJS timeScale property
      this does not require dynamic to be set and is probably more efficient
   percentComplete - get or set percent complete (0-100)
      this allows you to scrub through an animation with a Slider, Dial, MotionController, etc.
      should probably set startPaused parameter of animate() to true
      Setting percentComplete to 100 may cause the animation to start at the beginning
      but can set rewind:true and then set percentComplete to 50 - this will animate "backwards"
      Can use animation event and a test of percentComplete to stop animation at a percentage
      see  https://zimjs.com/explore/squigglepart.html

METHODS - see pauseAnimate() and stopAnimate() under the METHODS module
   Also - zim.animate() adds a pause(state, time) method to the target IF dynamic is set to true (or drag is true)
   This matches the pause() of Dynamo and Scroller and is used by Accelerator
      state - (default true) true pauses and setting the state to false will unpause the dynamic animation
      time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing
   endTween(callType) - stops the animation and sets the target to the properties at the end of the tween - returns target for chaining
      callType defaults to "all" which will run the call function and all the call functions in a series
      setting callType to "none" will not run the call function and not run any call function in a series
      setting callType to "main" will run the call function but not the call functions in a series
      note: any remaining rewindCall and loopCall functions will not be called when using endTween()
      note: endTween is complicated with ids, multiple animations, series, sequences, etc.
      if there is a problem, try adding the target to a Container and controlling separate animations on container and target
   resetTween() - sets the target back to the state at the start of the last animate() call - returns target for chaining
      note: resetTween is complicated with ids, multiple animations, series, sequences, etc.
      if there is a problem, try adding the target to a Container and controlling separate animations on container and target
   replayTween() - resets and runs the last animate() on the target - calls the animate function with the same parameters as the last time - returns target for chaining
      note: replayTween is complicated with ids, multiple animations, series, sequences, etc.
      if there is a problem, try adding the target to a Container and controlling separate animations on container and target
EVENTS - zim animate() will add an "animation" event to the target IF the events parameter is set to true (default is false)
   or the "animation" event will be added to the Container for a sequence in a Container
   or the "animation" event is added to the targets of an animation series
   If dynamic is set to true, will dispatch a "pause" event when animate is paused - could be delayed but time passed in to pause()

RETURNS the target for chaining (or null if no target is provided and run on zim with series)

MORE: http://zimjs.com/code/bits.html?title=animate


************************************
[41546] obj.stopAnimate(ids, toEnd, sample)

stopAnimate
zim function - and Display object function

DESCRIPTION
Stops tweens with the passed in id or array of ids.
If no id is passed then this will stop all tweens.
The id is set when using animate() or a Sprite id parameter.
An animation series will have the same id for all the animations inside.
To stop a Shape tween, set an id in the animate call and use that id to stop the shape tween
this is because the shape tween animation is not on the shape but on its many control points
See also pauseAnimate()

NOTE: formerly stopZimAnimate - which still works but is depreciated

NOTE: calling stopAnimate(id) stops tweens with this id on all objects
calling object.stopAnimate(id) stops tweens with this id on the target object

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// Note the override:true parameter
var rect = new Rectangle(200, 200, pink)
   .centerReg()
   .animate({obj:{scale:2}, time:2000, loop:true, rewind:true, id:"scale"})
   .animate({obj:{rotation:360}, time:4000, loop:true, ease:"linear", override:false});
rect.cursor = "pointer";
rect.on("click", function() {rect.stopAnimate()}); // will stop all tweens on rect
// OR
rect.on("click", function() {rect.stopAnimate("scale");}); // will stop scaling tween

stopAnimate("scale") // will stop tweens with the scale id on all objects

stopAnimate(); // will stop all animations

PARAMETERS
ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite
toEnd - (default false) set to true to call endTween() on targets to go to end of tween values
   warning: setting to true will make targets to go to the end of all their animations
   which could have the effect of ignoring ids for specific animations therefore stopping them as well

PROPERTIES
paused - zim.stopAnimate() will set paused property of stopped objects to null

RETURNS null if run as stopAnimate() or the obj if run as obj.stopAnimate()

MORE: http://zimjs.com/code/bits.html?title=stopAnimate


************************************
[41632] obj.pauseAnimate(state, ids)

pauseAnimate
zim function - and Display object function

DESCRIPTION
Pauses or unpauses tweens with the passed in id or array of ids.
If no id is passed then this will pause or unpause all tweens.
The id is set as a animate, move, Sprite parameter.
An animation series will have the same id for all the animations inside.
To pause a Shape tween, set an id in the animate call and use that id to pause the shape tween
this is because the shape tween animation is not on the shape but on its many control points
See also stopAnimate

NOTE: formerly pauseZimAnimate - which still works but is depreciated

NOTE: calling pauseAnimate(true, id) pauses tweens with this id on all objects
calling object.pauseAnimate(true, id) pauses tweens with this id on the target object

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle().center().animate({obj:{alpha:0}, repeat:true, rewind:true});
circle.on("mousedown", function() {
   circle.pauseAnimate(!circle.paused);
});

EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// note the override:true parameter
var rect = new Rectangle(200, 200, pink)
   .centerReg()
   .animate({obj:{scale:2}, time:2000, loop:true, rewind:true, id:"scale"})
   .animate({obj:{rotation:360}, time:4000, loop:true, ease:"linear", override:false});
rect.cursor = "pointer";
rect.on("click", function() {rect.pauseAnimate()}); // will pause all tweens on rect
// OR
var paused = false;
rect.on("click", function() {
   paused = !paused;
   rect.pauseAnimate(paused, "scale");
}); // will toggle the pausing of the scaling tween

pauseAnimate(false, "scale") // will unpause tweens with the scale id on all objects

pauseAnimate(); // will pause all animations

PARAMETERS
state - (default true) will pause tweens - set to false to unpause tweens
ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite

PROPERTIES
paused - zim.stopAnimate() will set paused property of paused objects to the value of the state parameter

RETURNS null if run as pauseAnimate() or the obj if run as obj.pauseAnimate()


************************************
[41727] obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType, ticker, wait)

wiggle
zim DisplayObject method

DESCRIPTION
Wiggles the property of the target object between a min and max amount to either side of the base amount
in a time between the min and max time.
Uses animate() so to pause or stop the wiggle use pauseAnimate and stopAnimate
either on the object or using an id that you pass in as a parameter

NOTE: calling pauseAnimate(true, id) pauses tweens with this id on all objects
calling target.pauseAnimate(true, id) pauses tweens with this id on the target object

EXAMPLE
var ball = new Circle().centerReg();
ball.wiggle("x", ball.x, 10, 30, 300, 1000);
// wiggles the ball 10-30 pixels to the left and right of center taking 300-1000 ms each time

ball.pauseAnimate(); // will pause the wiggle

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function

NOTE: if using wiggle as a zim function the first parameter is:
target - the object to wiggle

property - the property name as a String that will be width-indicatorLength-edgeLeft-edgeRight
baseAmount - |ZIM VEE| the center amount for the wiggle - wiggle will go to each side of this center
minAmount - |ZIM VEE| the min amount to change to a side of center
maxAmount - |ZIM VEE| (default minAmount) the max amount to change to a side of center
minTime - |ZIM VEE| (default 1) the min time in seconds to go from one side to the other (also see ZIM TIME constant)
maxTime - |ZIM VEE| (default minTime) the max time in seconds to go from one side to the other (also see ZIM TIME constant)
totalTime - (default forever) the total time in seconds until a stopAnimate is called on wiggle (also see ZIM TIME constant)
   adds a wiggleTimeout property to the wiggle target that holds the setTimeout id for cancelation of totalTime
type - (default "both") set to "positive" to wiggle only the positive side of the base or "negative" for negative side (or "both" for both)
ease - (default "quadInOut") the ease to apply to the animation
integer - (default false) tween to an integer value between min and max amounts
id - (default random id) the id to use for pauseAnimate() or stopAnimate()
startType - (default "both") set to "positive" to start wiggle in the positive side of the base or "negative" for negative side (or "both" for either)
ticker - (default true) set to false if wiggling a value other than a Display object property
wait - |ZIM VEE| - (default 0) time in seconds to wait between each wiggle - in addition to time set for wiggle

EVENTS
if totalTime is set, target will dispatch a wigglestop event when the wiggle stops

RETURNS target for chaining


************************************
[41837] obj.loop(call, reverse, step, start, end)

loop
zim DisplayObject method
NOTE: overrides earlier loop function with added container loop
so that we can use earlier loop function without createjs

DESCRIPTION
The loop function (see the CODE module for loop) lets you loop through:
1. If you pass in a Number for obj then loop() does function call that many times
2. If you pass in an Array then loop() loops through the array
3. If you pass in an Object literal then loop() loops through the object
4. If you pass in an String then loop() loops through the letters
5. If you pass in an HTML NodeList or HTMLCollection then loop() loops through the tags

The loop method lets you loop through a Container
NOTE: you can also pass the container as the first parameter of the loop function

6. The loop method loops through all the children of the container
and does the function for each one passing the child, currentIndex, totalLoops, startIndex, endIndex, obj.
So this is like for(i=0; i<obj; i++) {var child = obj.getChildAt(i);} loop
or for (var i in container.children) {var child = container.children[i];}

NOTE: If you pass in true for reverse, the loop is run backwards counting to 0 (by default)
NOTE: use return to act like a continue in a loop and go to the next loop
NOTE: return a value to return out of the loop completely like a break (and return a result if desired)

EXAMPLE
var container = new Container();
// LOOP FUNCTION - for more examples see the CODE Module loop() function
loop(1000, function(i) { // gets passed an index i, total 1000, start 0, end 999, obj 1000
   // make 1000 rectangles
   container.addChild(new Rectangle());
});
stage.addChild(container);

// LOOP METHOD
// loop through children of the container
container.loop(function(child, i) { // gets passed the child, index, total, start, end and obj
   child.x += i*2;
   child.y += i*2;
}, true); // true would reverse - so highest in stack to lowest, with i going from numChildren-1 to 0

PARAMETERS supports DUO - parameters or single object with properties below
call - the function to call
   the function will receive (as its final parameters) the index, total, start, end, obj
      where the index is the current index, total is how many times the loop will run
      start is the start index, end is the end index and obj is the object passed to the loop
   the starting parameters vary depending on the type of obj:
   if the obj is a number then the first parameter is the index (no extra starting parameters given)
   if the obj is an array then the first parameter is the element at the current index
   if the obj is an object literal then the first and second parameters are the property name and property value at the current index
   if the obj is a string then the first parameter is the letter at the current index
   if the obj is a container then the first parameter is the child of the container at the current index
   if the obj is an HTMLCollection then the first parameter is the tag
reverse - (default false) set to true to run the loop backwards to 0
step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards)
start - (default 0 or length-1 for reverse) index to start
end - (default length-1 or 0 for reverse) index to end

RETURNS any value returned from the loop - or true if no value is returned from a loop

MORE: http://zimjs.com/code/bits.html?title=loop


************************************
[41996] obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly)

scaleTo
zim DisplayObject method

DESCRIPTION
Scales object to a percentage of another object's bounds and scale
Percentage is from 0 - 100 (not 0-1).
Also see sca(), fit() and Layout().

EXAMPLE
circle.scaleTo(stage, 50); // scale to half the stageW
circle.scaleTo(stage, 10, 20); // fit within these scalings of the stage

PARAMETERS - supports DUO - parameters or single object with properties below
boundObj - the object that we are scaling to with percents below
percentX - (default no scaling) the scale in the x
percentY - (default no scaling) the scale in the y
   if both percentX and percentY are missing then assumes 100, 100 for each
type - (default "smallest") to fit inside or outside or stretch to bounds
   smallest: uses the smallest scaling keeping proportion (fit)
   biggest: uses the largest scaling keeping proportion (outside)
   both: keeps both x and y scales - may stretch object (stretch)
boundsOnly - (default false) set to true to scale to the boundObj's bounds only - ignoring current boundObj scale

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=scaleTo


************************************
[42064] obj.fit(left, top, width, height, inside)

fit
zim DisplayObject method

DESCRIPTION
Scale an object to fit inside (or outside) a rectangle and center it.
Actually scales and positions the object.
Object must have bounds set (setBounds()).

EXAMPLE
circle.fit(100, 100, 200, 300); // fits and centers in these dimensions

PARAMETERS supports DUO - parameters or single object with properties below
left, top, width, height - (default stage dimensions) the rectangle to fit
inside - (default true) fits the object inside the rectangle
   if inside is false then it fits the object around the bounds
   in both cases the object is centered

RETURNS an Object literal with the new and old details (bX is rectangle x, etc.):
{x:obj.x, y:obj.y, width:newW, height:newH, scale:scale, bX:left, bY:top, bWidth:width, bHeight:height}

MORE: http://zimjs.com/code/bits.html?title=fit


************************************
[42151] obj.boundsToGlobal(rect, flip)

boundsToGlobal
zim DisplayObject method

DESCRIPTION
Returns a createjs Rectangle of the bounds of object projected onto the stage.
Handles scaling and rotation.
If a createjs rectangle is passed in then it converts this rectangle
from within the frame of the obj to a global rectangle.
If flip (default false) is set to true it goes from global to local rect.
Used by drag() and hitTestBounds() above - probably you will not use this directly.

EXAMPLE
zog(circle.boundsToGlobal().x); // global x of circle

PARAMETERS
rect - (default null) a rect inside an object which you would like mapped to global
flip - (default false) make a global rect ported to local values

RETURNS a createjs Rectangle of the bounds of object projected onto the stage


************************************
[42213] obj.resetBounds(width||boundsX, height||boundsY, null||width, null||height)

resetBounds
zim DisplayObject method

DESCRIPTION
Pass in no parameters to reset the bounds to calculated bounds
Pass in width and height to set bounds to (0,0,width,height)
Pass in x, y, width and height to set bounds to (0,0,width,height)

NOTE: a container made with new Container() has auto calculated bounds
so the bounds (and width and height) adapt to surround any new children's bounds
A container set with bounds to start: new Container(100, 200) has static bounds
so the bounds (and width and height) will not change as new children are added
Calling container.resetBounds() with no parameter sets dynamic calculated bounds
Or you can reset the static bounds with parameters.

EXAMPLE
var container = new Container();
var rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 500, 300 dynamic bounds

var container = new Container(100, 100);
var rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 100, 100 static bounds

container.resetBounds();
zog(container.width, container.height); // 500, 300 dynamic bounds

container.resetBounds(200, 200);
rect.removeFrom();
zog(container.width, container.height); // 200, 200 static bounds

PARAMETERS
width - (default null) null will set dynamic bounds and the object will take on bounds of children if a Container
   setting a number for the width will set static bounds that do not change as objects are added
height - (default width) the height of the bounds
if there is a width supplied but no height then the height is set to the width
setting these run obj.setBounds(boundsX,boundsY,width,height);

OR if four parameters are set:
boundsX - (default 0) the x of the bounds
boundsY - (default 0) the y of the bounds
width - (default null) the width of the bounds
height - (default width) the height of the bounds
if there is a width supplied but no height then the height is set to the width
setting these run obj.setBounds(boundsX,boundsY,width,height);

RETURNS object for chaining


************************************
[42284] obj.copyMatrix(source)

copyMatrix
zim DisplayObject method

DESCRIPTION
Copies the transformation properties from the source to the obj
(x, y, rotation, reg, scale and skew)

NOTE: used internally by animate() and setMask() for copying transform of shapes to mask
also used in addDisplayMembers for clone() method

EXAMPLE
circle.copyMatrix(circle2);
// circle will now match circle2 in x, y, rotation, scale and skew properties

PARAMETERS
source - object from which the transform properties are being copied

RETURNS obj for chaining


************************************
[42322] obj.duplicate(exact)

duplicate
zim DisplayObject method

DESCRIPTION
clones the object but also any custom properties

EXAMPLE
var circle = new Circle();
circle.custom = 345;
var circle2 = circle.duplicate();
zog(circle2.custom); // 345

RETURNS cloned object with cloned custom properties


************************************
[42352] obj.expand(padding, paddingVertical, paddingRight, paddingBottom)

expand
zim DisplayObject method

DESCRIPTION
Adds a createjs hitArea to an object with an extra padding of padding.
Good for making mobile interaction better on labels, buttons, etc.

EXAMPLE
var circle = new Circle(10, "red");
circle.center();
circle.expand(); // makes hit area bigger
circle.on("click", function(){zog("yes");});

PARAMETERS - accepts ZIM DUO - regular parameters or a single configuration object
** one parameter for all padding
** two parameters for left/right and top/bottom
** four parameters for left/top/right/bottom with any blank to receive default 20
padding - (default 20) how many pixels to expand bounds
paddingVertical - (default null) the vertical padding (making padding for horizontal)
paddingRight - (default null) the right padding - if set then padding parameter is the leftPadding
paddingBottom - (default null) the bottom padding - if set then paddingVertical parameter is the paddingTop

RETURNS obj for chaining

MORE: http://zimjs.com/code/bits.html?title=expand


************************************
[42403] obj.setSwipe(swipe)

setSwipe
zim DisplayObject method

DESCRIPTION
Sets whether we want to swipe an object or not using ZIM Swipe.
Recursively sets children to same setting.

EXAMPLE
circle.swipe();

PARAMETERS
swipe - (default true) set to false to not swipe object

RETURNS obj for chaining


************************************
[42441] obj.setMask(mask, dynamic)

setMask
zim DisplayObject method

DESCRIPTION
Specifies a mask for an object - the object can be any display object.
The mask can be a ZIM (or CreateJS) Shape or a ZIM Rectangle, Circle, Triangle or Blob.
Masking must be done with a Shape and the ZIM shapes are actually containers with Shape objects in them.
So setMask() takes care of all the arrangements and updates the mask when using the following ZIM features:
drag(), animate(), gesture(), transform() and using the Bezier curves, etc. with Blob.

NOTE: a Bitmap can be used for masking using the CreateJS AlphaMaskFilter
See https://zimjs.com/explore/alphaMask.html and https://zimjs.com/explore/mask.html

NOTE: the mask you pass in can still be seen but you can set its alpha to 0
just watch, if you want to interact with the mask it cannot have 0 alpha
unless you provide a hit area with expand() for instance (use 0 for padding)
You can also set the alpha to .01

NOTE: before ZIM 6.7.1, setMask could not be chained - but now it can

EXAMPLE
var label = new Label("BIG", 200, null, "white");
label.center();
var rect = new Rectangle(200,100,"black");
rect.center().alpha = 0;
var label = new Label("BIG", 200, null, "white")
   .center()
   .drag()
   .setMask(rect);

NOTE: to drag something, the alpha cannot be 0
so we can use expand(rect, 0) to assign a hit area
then we can drag even if the alpha is 0 (or set the alpha to .01)

EXAMPLE
var label = new Label("BIG", 200, null, "white").center();
var rect = new Rectangle(200,100,"black")
   .expand(0)
   .center()
   .alp(0)
   .drag();
label.setMask(rect);

NOTE: animate(), drag(), gesture() and transform() work specially with zim shapes to make this work
otherwise, if you want to reposition your mask then set the dynamic parameter to true
or use a zim.Shape() or createjs.Shape directly to avoid this issue

EXAMPLE
// masking with a Blob
var image = frame.asset("pic.jpg").centerReg();
var blob = new Blob({color:faint}).center(); // this is draggable by default
image.setMask(blob);

PARAMETERS supports DUO - parameters or single object with properties below
mask - the object whose shape will be the mask
dynamic - (default false) set to true if mask is being moved
   Blobs and shapes with drag(), transform(), gesture() and animate() will auto set dynamic to true if dynamic parameter is left empty
   Setting dynamic to false for these will remain with a setting of dynamic false and the mask will not move once set

NOTE: use obj.setMask(null) to clear the mask

RETURNS the object for chaining
Older versions returned the mask shape - the mask shape can now be accessed by obj.zimMask or mask.zimMask

MORE: http://zimjs.com/code/bits.html?title=setMask


************************************
[42569] obj.outline(color, size, boundsOnly)

outline
zim DisplayObject method

DESCRIPTION
For testing purposes.
Draws a rectangle around the bounds of obj (adds rectangle to the objects parent).
Draws a cross at the origin of the object (0,0) where content will be placed.
Draws a circle at the registration point of the object (where it will be placed in its container).
These three things could be in completely different places ;-)

NOTE: warning - the outline is added to the object's container so this can affect the container's numChildren, etc.

NOTE: will not subsequently be resized unless called again in Ticker, pressmove event, etc.
ZIM could update this outline automatically in drag and animate
but since the outline() is used for testing, it is not a good idea to waste processing

EXAMPLE
var circle = new Circle(50, "red");
circle.center();
// show registration and origin at center and bounding box around outside
circle.outline();

EXAMPLE
Dynamic Examples
var ball = new Circle().center().drag({removeTweens:false});
ball.on("mousedown", function(){
   ball.outline();
});
ball.on("pressmove", function(){
   ball.outline();
});
ball.animate({rotation:360}, 4000);
Ticker.add(function() {ball.outline();});

EXAMPLE
// When applying outline() in a loop - loop in reverse
// as outlines are added to the object's container
var tile = new Tile(new Rectangle(), 5, 4, 10, 10).center();
tile.loop(function (item) {
   item.outline();
}, true); // reverse loop

PARAMETERS supports DUO - parameters or single object with properties below
color - (default brown) the color of the outline
size - (default 2) the stroke size of the outline
boundsOnly - (default false) set to true to see only rectangle bounds

PROPERTIES
adds a ZIMoutlineShape and ZIMoutlineShapeC to object
adds an outlineToggled read only property that is true if showing and false if not showing outline

METHODS
adds an outlineToggle(state) method to the object that toggles the outline when called
   or can pass in true to show outline or false to not show outline
   note - method does not update the stage
   returns object for chaining

RETURNS the obj for chaining;

MORE: http://zimjs.com/code/bits.html?title=outline



------------------------------------
MODULE 4: ZIM CONTROLS
------------------------------------

************************************
[42734] STYLE and Style()

STYLE
zim constant and static Class

DESCRIPTION
STYLE can be used to set any parameter on a DisplayObject and many of the Controls.
For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, Tile, Pen, Emitter, Scroller, etc.
These are applied at the time the objects are made.
They are cascading with each level overriding the previous level:

1. GENERAL: any style can be specified in general
   corner:30 will make all corners default to 30
2. TYPE: styles for object type can be set to override the general styles
   Button:{corner:0} will make all button corners default to 0
3. GROUP: styles for a group can be set to override the type styles
   homePage:{corner:20} will make all objects of that group default to 20
4. OBJECT: styles applied as parameters to the object override all other styles
   new Button({corner:40}) will make this button have a corner of 40

See: https://zimjs.com/style.html for an example
And: https://zimjs.com/test/styles.html for Control Styles

As of ZIM Cat, a Style class has been added with the static methods to manage styles
STYLE is an object so all of these are just a couple lines to make it easier to update the object.
These include methods such as clear(), add(), remember(), addType(), addGroup(), etc.
See the Style entry down below for a complete listing and description.

EXAMPLE
STYLE = {
   corner:20,
   backgroundColor:pink,
   type:{
      Button:{width:{min:100, max:500}, corner:0, centerReg:true, move:{y:series(-150, -50, 50, 150)}},
      Dial:{add:true, x:800, y:600, backgroundColor:red, scale:2, outline:true},
      Pane:{corner:ignore, color:white, draggable:true, width:300, label:"HI!"},
      ProgressBar:{add:true, x:200, y:600, barType:"rectangle", transform:true},
      Tabs:{add:true, x:100, y:100}
   },
   group:{
      homePage:{corner:30}
   }
}
new Button(); // will have a corner of 0 and be pink
new Button({group:"homePage"}); // will have a corner of 30 and be pink
new Button({corner:10, group:"homePage"}); // will have a corner of 10 and be pink
new Button({corner:"ignore"}) // will have a corner of its default 20 and be pink
new Button({style:false}).pos(700,100); // will have original default styles
new Dial(); // will be red and scaled twice as big and have an outline
new Tabs(); // will have a corner of 20 and selection will be pink
var p = new ProgressBar({corner:15}); // will be a bar with transform tools, corner 15
p.percent = 25;
new Pane().show(); // will ignore corner 30 and use its original 20 - it will say HI! in white and be draggable

EXAMPLE
STYLE = {
   borderColor:dark,
   borderWidth:5,
   type:{
      Rectangle:{
         // color:red,
         color:[red, pink, purple], // pick a random color from here
         centerReg:true,
         animate:{props:{rotation:360}, time:500, ease:"linear", loop:true},
         move:{x:series(-200, 0, 200)}
      }
   }
}
// make three spinning rectangles
loop(3, function(){new Rectangle();});

EXAMPLE
// Note: these commands are on the Style class not STYLE - but they operate on STYLE
// Also remember that ZIM STYLE only gets applied to new objects
// changing a STYLE will not change objects already created - this is different than CSS

// add a general color red style overwriting any previous color setting
Style.add({color:red});

// remove the general style for color
Style.remove("color");

// add styles for a Dial - overwriting all previous Dial styles
Style.addType("Dial", {useTicks:false, backgroundColor:yellow});

// remember current style using a "default" id
Style.remember();

// new Dials will use ticks and not be yellow
Style.addType("Dial", {useTicks:true});

// bring back the remembered styles so new Dials will have no ticks and be yellow
Style.recall();

// remember current STYLE to an id
Style.remember("myID");

// add styles for a group (existing objects are not changed - new ones will be)
Style.addGroup("big", {size:100});

the STYLE at the time myID was remembered will be active from now on
Style.recall("myID");

TRANSFORM STYLES
Transformations can also be applied (all are numbers - visible is a Boolean):
x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible
a bounds style has a value of {x:Number, y:Number, width:Number, height:Number}
where x and y are optional

RANDOM, RANGES, AND SERIES STYLES
Any property value can be a ZIM VEE value to make use of ZIM Pick see https://zimjs.com/docs.html?item=Pick
color:[red, green, blue] will pick a random color for each object for which the style is applied
x:series(100,200,300) will place subsequent objects at these locations
width:{min:100, max:500} will make objects with a width within this range
corner:{noPick:[0,40,0,40]}; will set corners - note we have to noPick this otherwise it would pick a number from the array for the corner value
See Docs on ZIM Pick() and ZIM series() for more information
Use the delayPick:true style to pass a PICK object to a control
See: https://zimjs.com/explore/circleArcs.html

FUNCTION STYLES
The following functions have been added:
addTo, loc, pos, center, centerReg, transform, drag, gesture, outline, bounds, mov, animate, wiggle and expand
Values of true will give default functionality for all but mov, animate and wiggle
ZIM DUO configuration objects can be set as a value for any of these
example: drag:true;  or  drag:{onTop:false}
For animate and wiggle, [] can be put around multiple configuration objects
to wiggle in the x and y for instance or run multiple animate calls on the object

CONVENIENCE STYLES
add:true - has been provided to add to the stage (use addTo for other containers)
move:{x:value, y:value} or move:x - mirrors the mov Function style (just adding the e)
pos: has corner convenience values: "left", "right", "top", "bottom", "rightbottom" or "bottomright", "center" and "centerReg"
style:false - will turn off all styles for the selector

EXCLUSION
A value of ignore can be used to exclude any earlier styles and return to the original default.
ignore is a ZIM global variable - if zns is true then use zim.ignore or just "ignore".
Setting style:false will exclude the object from all styles
All DisplayObjects have a style parameter (default true). Set to false to ignore styles.

GROUPS
All DisplayObjects have a group parameter.
This parameter accepts a string or a comma delimited string of multiple groups.
The group of components can then be targeted in the Group section of STYLE.
A group can contain just one component and act like an ID in CSS.

INHERIT
Objects can inherit styles from their parent
Eg. setting a color font property on List will pass that to Tabs which pass it to Button which passes it to Label
This was initially set up manually but a new inherit parameter was created for a better system
If any styles are not being applied as expected or as desired, let us know at https://zimjs.com/slack and we can adjust!
The inherit property on the Components can be used to pass an object literal of styles to the component directly as well

STYLES FOR CUSTOM CLASSES
EXAMPLE
// 1. collect parameters: style, group, inherit
// 2. after calling super constructor add these:
   this.type = "Classname";
   this.group = group;
   var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit);
// 3. collect parameters like so:
   if (radius==null) radius = DS.radius!=null?DS.radius:100; // where 100 is default
// 4. call styleTransforms at bottom of class:
   if (style!==false) zim.styleTransforms(this, DS);
// 5. use styles in your app code:
   STYLE = {
      type:{
         Classname:{
            radius:200
         }
      }
   }

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

Style() - ZIM class
Style provides static methods (on the class directly) to make changes to STYLE
These are very small - the techniques are provided as a comparison
Note: these affect only new objects - objects already created will not be changed

Style.clear() - clears the STYLE
   same as: STYLE = {};
Style.clearTypes() - clears the types
   same as: delete STYLE.types;
Style.clearGroups() - clears the groups
   same as: delete STYLE.groups
Style.remembered - property for holding remembered styles
   same as: remembered = {};
Style.remember(id) - stores a copy of the current style in memory at an id or "default"
   same as: remembered[id||"default"] = zim.copy(STYLE); // makes a copy and clones cloneable objects
Style.clearRemembered(id) - clears all remembered styles
   same as: delete remembered[id||"default"];
Style.recall(id) - sets the current style to a remembered STYLE
   same as: STYLE = remembered[id];
Style.add(obj) - adds general styles in form {newStile:val, newStyle2:value}
   same as: STYLE.newStyle = val; STYLE.newStyle2 = val;
Style.addType(typeName, obj) - adds a type along with its styles - overwrites the same type
   same as: STYLE.type.typeName = obj;
Style.addGroup(groupName, obj) - adds a group along with its styles - overwrites the same group
   same as: STYLE.group.groupName = obj;
Style.remove(styleName) - removes a single general style specified as a string - same as delete STYLE.styleName
   same as: delete STYLE.styleName;
Style.removeType(typeName) - removes a type as string
   same as: delete STYLE.type.typeName
Style.removeGroup(groupName) - removes a group as a string
   same as: delete STYLE.group.groupName


************************************
[43189] TIME

TIME
zim constant

DESCRIPTION
Set to "seconds" or "s" (default) or to "milliseconds" or "ms" to adjust how time is used in ZIM
This will affect all time input in functions such as:
animate()
wiggle()
timeout()
interval()
Sprite()
Emitter()
and various minor settings in
Swiper(), Tip(), Pen(), Marquee(), Button(), ProgressBar(), Stepper(), Pages(), Accessibility(), Frame()

animate(), timeout() and interval()
also have a timeUnit parameter that will override the TIME setting

NOTE: before ZIM Cat, all time was in milliseconds.
As of ZIM Cat, time defaults to seconds.
This was primarily to make animation times a little simpler for coders, especially youth
It also matches the units of industry animate engines such as GreenSock
Once animate() was adjusted, it made sense to change globally
The one question was timeout and interval which is based on JS setTimeout and setInterval
The order of the parameters are already switched (and other features are added)
so a simpler time adds additional incentive to use ZIM timeout and interval

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// default time is in seconds
new Circle().center().animate({x:0}, 2); // in 2 seconds

TIME = "milliseconds"; // go back to ms as in pre ZIM Cat.
new Circle().center().animate({x:stageW}, 2000); // 2000 ms

new Circle().center().animate({
   props:{y:0},
   time:2, // back to 2 seconds because timeUnit override
   timeUnit:"seconds"
});


************************************
[43238] TIMECHECK

TIMECHECK
zim constant

DESCRIPTION
Check to see if time is in right units - default true
logs a warning if ((TIME=="seconds" && time>10) || (TIME=="milliseconds" && time<9))
Set TIMECHECK = false to turn off check if desired - for instance if getting false positives

NOTE: as of ZIM Cat - time is in seconds rather than milliseconds
the TIMECHECK helps catch any conversion issues
See also the TIME constant if milliseconds is preferred

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// default time is in seconds
// the 20 seconds will cause a console log warning that time is in seconds
// as this is a pretty long time for most things and perhaps milliseconds was expected
// setting the TIMECHECK to false will prevent this message
// but there will be no warnings for other times either

TIMECHECK = false;
new Circle().center().wiggle("x", 100,200, 20, 40); // wiggle from 20 seconds to 40 seconds


************************************
[43269] ANIMATE

ANIMATE
zim constant

DESCRIPTION
Set to false to stop animate() calls from working.
Handy for testing your app so you do not have to wait for animations every time!
To animate things in you can place everything in their final positions
and then set the "from" parameter to true to animate from starting positions
like x or y offstage, scale or alpha of 0, etc.
Then to avoid waiting for animations to complete, you can just set ANIMATE = false
and all your objects will be in their final locations and you don't wait for animations
When you are ready to run your animations for a final version, etc. just delete the line
or set ANIMATE to true.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
ANIMATE = false;
// without the line above, the circles will animate in
// we would have to wait for them every time we load the app
// sometimes animations are even longer and this can waste development time
// when we add the line above, the circles are on stage right away
// this is easier and safer than commenting out all your animations

var circle1 = new Circle(200, green);
circle1.center();
circle1.x -= 110;
circle1.animate({props:{alpha:0, scale:0}, time:700, from:true});

var circle2 = new Circle(200, pink);
circle2.center();
circle2.x += 110;
circle2.animate({props:{alpha:0, scale:0}, time:700, wait:700, from:true});


************************************
[43310] OPTIMIZE

OPTIMIZE
zim constant

DESCRIPTION
A setting that relates to how stage.update() is used by the components.
Default is false which means some components will update the stage automatically:
   the Slider will update the stage so that you can see the knob slide;
   the CheckBox and RadioButtons when checked will update the stage;
   the Tabs change button colors and then update the stage;
   closing of a Pane will update the stage
   the Stepper also updates as does changing color of a button, label, etc.
However, concurrent stage.update() calls can slow down mobile performance.
So if you are making content for mobile you should set OPTIMIZE = true;
Then you will have to stage.update() in the change event handlers
but you were probably doing things in these events and updating anyway!
Just be careful - you might be testing a checkbox and it won't check...
So it takes some getting used to running in optimized mode.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// add this to the top of your script
OPTIMIZE = true;
var slider = new Slider();
slider.center();
// will not see the slider operate (aside from rolling over button)
// unless you call stage.update() in the change event
slider.on("change", function() {
   // do your code
   stage.update(); // now will see the slider operate
});

components affected by OPTIMIZE:
Label, Button, Checkbox, RadioButton, Pane, Stepper, Slider, Tabs

OPTIMIZE set to true also affects the ZIM Ticker
for functions like animate, drag, Scroller, Parallax
See zim.Ticker as you may have to set Ticker.update = true;


************************************
[43356] ACTIONEVENT

ACTIONEVENT
zim constant

DESCRIPTION
a setting that specifies the event type to trigger many of the components
default is "mousedown" which is more responsive on mobile
setting the constant to anything else, will cause the components to use "click"

for instance, with the default settings, the following components will act on mousedown
CheckBox, RadioButtons, Pane, Stepper and Tabs

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// put this at the top of your code
ACTIONEVENT = "click";
var checkBox = new CheckBox();
checkBox.center();
// note it now operates on mouseup (click)
// the default ACTIONEVENT is mousedown


************************************
[43384] DEFAULTWIRE

DEFAULTWIRE
zim constant

DESCRIPTION
The default setting for wire() and wired() source input type (the input parameter).
wire will usually be used to wire a component to a DisplayObject
and components usually have a currentValue or selectedIndex property that is changing in a change event, for instance

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// put this at the top of your code
DEFAULTWIRE = "selectedIndex";
var selector = new Selector(someTile).center();
new ColorPicker().center().wire(selector, "selectedIndex");

// the ColorPicker has a currentValue which would normally be the default for wire()
// but here we override this with the DEFAULTWIRE so the selectedIndex is used instead
// alternatively, the input parameter could be set to "selectedIndex"
// but perhaps there are many of these so the constant is provided for convenience


************************************
[43412] KEYFOCUS

KEYFOCUS
zim global variable (in guise of a constant)

DESCRIPTION
A global variable that stores the DisplayObjects that will receive keyboard focus.
This is a system for all DisplayObjects with keyboard controls (set to active).
Eligible DisplayObjects are:
   Squiggle, Blob, Stepper, Slider, Dial, Tabs, ColorPicker, TextArea
The first eligible DisplayObject made will set KEYFOCUS to itself.
Anytime an eligible DisplayObject is used it sets KEYFOCUS to itself.
Eligable DisplayObjects have a keyFocus property that can be manually set.
There is only one DisplayObject with key focus
so setting removes key focus from the last key focused component.

NOTE: if tabbing from one component to the next is needed, consider using ZIM Accessibility()

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var slider = new Slider().center().mov(0, -100);
var stepper = new Stepper().center().mov(0, 100);
// arrows will control the slider as it is the first component made
// if the stepper is used then arrows will control the stepper
// if stepper.keyFocus = true is set to start then the stepper would have key control
// alternatively, KEYFOCUS = stepper; would give the stepper key control
// setting KEYFOCUS = null; would make no component have key control (until the component is pressed)


************************************
[43446] POSREG

POSREG
zim global variable (in guise of a constant)

DESCRIPTION
A global variable that stores the desired setting for the reg parameter of pos()
pos() had traditionally positioned based on registration point
Now it defaults to position to the sides or the top and bottom
Setting POSREG = true; will make pos() default to positioning at the registration

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
POSREG = false; // default
new Rectangle().pos({x:10, right:true}); // will position right side 10 pixels from right

POSREG = true;
new Rectangle().pos({x:10, right:true}); // will position registration point 10 pixels from right


************************************
[43471] DRAGALL

DRAGALL
zim global variable (in guise of a constant)

DESCRIPTION
A global variable that stores the desired setting for the all parameter of drag()
By default, drag() will drag individual items in a container (currentTarget = false)
This is handy to quickly drag a bunch of things.
But some developers are used to dragging the whole container by default.
Setting DRAGALL=true will change drag calls to default to the whole container (currentTarget = true)

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
DRAGALL = false; // default
containerOfMonsters.drag(); // will drag individual monsters

DRAGALL = true;
containerOfMonsters.drag(); // will drag all the monsters at once


************************************
[43497] MOBILE

MOBILE
zim global variable (in guise of a constant)

DESCRIPTION
A global variable that overrides ZIM mobile()
There are a half-dozen settings in ZIM that use ZIM mobile() to adjust default parameters
and various interactions - some examples are:

Squiggle() / Blob()
// handleSize = mobile?20:10;
// some interactions with controls

Button()
// toggleEvent = mobile?"mousedown":"click";

transform()
// customCursors = mobile?false:true;
// handleSize = mobile?20:10;

Ticker.framerate = mobile?30:60;
// use Ticker.setFPS() to adjust

Accessibility()
// application = mobile?false:true;

Emitter()
// cache = mobile?false:true;

VR()
// swiper = mobile?false:true;

These settings will follow the value set by setting:
MOBILE = false;
or
MOBILE = true;

The default setting for MOBILE is "default";
If left as default, then ZIM uses the results from mobile();

WARNING: setting MOBILE will result in that value being returned from mobile();
To get an actual value from mobile() set MOBILE = "default" and run mobile();

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
MOBILE = false;
new Squiggle().center();
// will have smaller desktop Bezier handles even on mobile
// but will also set the Ticker framerate to 60, etc.
// unless MOBILE, at some point, is set back to default:
MOBILE = "default";

MOBILE = true;
new Blob().center();
// will have bigger mobile Bezier handles even on desktop
// but will also set the Ticker framerate to 30, etc.
// unless MOBILE, at some point, is set back to default:
MOBILE = "default";


************************************
[43563] Ticker = {}

Ticker
zim static class

DESCRIPTION
A static class to let ZIM use a requestAnimationFrame with a single stage update.
Used by ZIM animate, parallax, scrollers, etc. but any function can be added.
If a function has been added to the Ticker queue then it will run in the order added
along with a single stage update after all functions in queue have run.
There are settings that can adjust when the Ticker updates so see Usage notes below.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle(50, "red");
circle.center();
Ticker.add(function(){
   circle.x++;
}, stage); // stage is optional - will be the first stage made if left out

// to be able to remove the function:
Ticker.add(tryMe, stage);
function tryMe() {circle.x++;}
Ticker.remove(tryMe);

// OR with function literal, use the return value
var tickerFunction = Ticker.add(function(){circle.x++;}, stage);
Ticker.remove(tickerFunction);

// Check to see if a function is in the Ticker for that stage:
zog(Ticker.has(tickerFunction)); // false at the moment until added again

USAGE
if OPTIMIZE is true then the Ticker will not update the stage (it will still run functions)
however, OPTIMIZE can be overridden as follows (or with the always() method):

METHODS (static)
** As of ZIM 5.1.0, stage is optional and will default to the stage of first Frame object made
** WARNING - if you are in a second Frame you should pass stage as a parameter so it does not point to the first Frame's stage
Ticker.always(stage) - overrides OPTIMIZE and always runs an update for the stage even with no function in queue
Ticker.alwaysOff(stage) - stops an always Ticker for a stage
Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added
   the function will receive a CreateJS tick object with delta, time, timeStamp, etc. properties
Ticker.remove(function) - removes the function from the Ticker queue
Ticker.removeAll([stage]) - removes all functions from the Ticker queue (optionally per stage)
Ticker.has(function, stage) - returns a Boolean true if function is currently added to the Ticker for the stage - or false if not currently added
Ticker.setFPS(30, 60) - (mobile, pc) default is set at natural requestAnimationFrame speed - this seems to be the smoothest
Ticker.setTimingMode(mode) - (default "raf") RAF uses RequestAnimationFrame without framerate synching - gets screen synch (smooth) and background throttling
   set to "synched" for framerate synching - but will add some variance between updates
   set to "timeout" for setTimeout synching to framerate - no screen synch or background throttling (if RAF is not supported falls back to this mode)
   see CreateJS docs: http://www.createjs.com/docs/tweenjs/classes/Ticker.html
Ticker.raw(function) - a stand-alone direct call to RequestAnimationFrame for maximum speed
   Example: https://zimjs.com/raw/
   Does not use Dictionary lookup that the add() uses so provides ultimate speed for generative art, etc.
   Returns function as id so can use Ticker.removeRaw(id)
   function will receive a single parameter that is a DOMHighResTimeStamp
   raw() does not automatically update the stage so put a stage.update() in the function
   raw() is for when you want to run one function much like the draw() in Processing, the animate() renderer in ThreeJS, etc.
   add() is for when you want to run multiple functions with a single globally coordinated stage.update()
Ticker.removeRaw(id) - remove the raw function based on the return value of the var id = Ticker.raw(function)
Ticker.dispose([stage]) - removes all functions from the queue removes and removes the list (optionally per stage)

PROPERTIES (static)
Ticker.update = true - overrides OPTIMIZE and forces an update if a function is in the queue
Ticker.update = false - forces no update regardless of OPTIMIZE
Ticker.update = null (default) - only updates if there is a function in queue and OPTIMIZE is false
Ticker.list - a ZIM Dictionary holding arrays with the functions in the Ticker queue for each stage
Ticker.list.objects - the array of stages in the Ticker
Ticker.list.values - the array holding an array of functions for each stage in the Ticker
Ticker.framerate - read only - use setFPS() to set

the Ticker is used internally by zim functions like animate(), drag(), wire(), Scroller(), Parallax()
you are welcome to add functions - make sure to pass the stage in as a second parameter to the add() method

USAGE
1. if you have your own ticker going, just set OPTIMIZE = true and don't worry about a thing
2. if you do not have your own ticker going but still want OPTIMIZE true to avoid components updating automatically,
then set OPTIMIZE = true and set Ticker.update = true
this will run a single update only when needed in zim Ticker for any zim functions
3. if you want a ticker with a single update going all the time (with OPTIMIZE true or false) then
run Ticker.always([stage]); // optionally per stage
4. if for some reason (can't think of any) you want no ticker updates for zim but want component updates
then set OPTIMIZE = false and then set Ticker.update = false
5. if you want maximum speed use Ticker.raw(function) which flows directly through to a RequestAnimationFrame


************************************
[43883] Pages(pages, transition, speed, transitionTable, holder, style, group, inherit)

Pages
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Pages handle going between pages.
Make a Pages object and add it to the stage.
All your pages from then on are added to and manipulated inside the Pages object.
Pages allows you to set the destination pages for swipe events.
Other events like buttons can call the go(page, direction) method.
Consider using HotSpots() to efficiently handle multiple buttons.

ZIM Cat introduces the ZIM Page() class that makes a Container with a background Rectangle.
This can be used as a page or any Container or other DisplayObject can be used as a page.
Transitions with ZIM Emitter were also added in ZIM Cat.
See https://zimjs.com/cat/page.html

NOTE: if you have a TextArea, Tag or Loader on a page, ZIM will automatically add and remove it.
but if the TextArea, Tag or Loader is in a Container on the page then it must be manually added and removed.
See https://zimjs.com/test/textareapages.html for an example

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// make pages (these would be containers with content)
var home = new Page(stageW, stageH, blue);
var hide = new Page(stageW, stageH, green, pink); // makes a gradient
var find = new Page(stageW, stageH, yellow);

// If swipe is not specified Pages will automatically swipe horizontally
// to the next page and wrap and backwards to the last page and wrap
// Here we override this with swipe arrays

var pages = new Pages({
   pages:[
      // imagine pages to the left, right, up and down
      // swipe:["to page on left", "to page on right", etc.s]
      {page:home, swipe:[null,"info",hide,find]},
      {page:hide, swipe:[null,null,null,home]},
      {page:find, swipe:[null,null,home,null]}
   ],
   transition:"slide",
   speed:1 // slower than usual for demonstration
}).addTo();

// handle any events inserted into the swipe arrays
pages.on("info", function(){zog("info requested")});

// handle any custom requirements when arriving at a page
// the event gives you the page object
// so add a name properties just make it easier to manage
home.name = "home";
hide.name = "hide";
find.name = "find";
pages.on("page", function() {
   zog(pages.page.name); // now we know which page we are on
})

// you can manually go to pages as well
// we will make a little triangle to click:
var back = new Triangle({color:"red"});
back.center(find); // add triangle to find page
// not really supposed to add things to zim shapes
// they default to mouseChildren false
// we want to click on the back button
// so we have to set the mouseChildren of find to true
find.mouseChildren = true;
back.cur();
back.on("click", function() {pages.go(home, "up")});
stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
pages - (default null) an array of pages or page objects - for example:
   [home, hide] assuming home and hide Page or Container objects are made
   an optional swipe array holds mappings to swipe events ["right", "left", "down", "up"]
   these could be pages to the left, right, top and bottom of the current page
   or they can be call commands as strings that will dispatch events with that name
   if no page has swipe data, then pages will swipe horizontally to each other by default with no wrap
   if swipe data is desired then use page object format:
   [{page:home, swipe:[null,"info",hide,find]},{page:hide, swipe:[null,null,null,home]}]
   set swipe:[] to not swipe the page
   just setting one page with swipe:[] and leaving the rest blank, will mean no swiping
transition - (default "none") the type of transition "none", "reveal", "slide", "fade", "clear", "black", "white", "fan"
   A ZIM Emitter() can also be passed in as a transition.
   If the emitter has vertical or horizontal set to true then the emitter will sit above a slide transition
   otherwise the emitter will sit above a fade transition.
   The following built in emitter transitions are provided:
      "pixelDark", "pixelLight", "pixelZIM",
      "bubbleDark", "bubbleLight", "bubbleZIM",
      "lineDark", "lineLight", "lineZIM"
      "explodeDark" "explodeLight" "explodeZIM"
speed - (default 2) speed in seconds of the transition if set (see also ZIM TIME constant)
transitionTable - (default none) an array to override general transitions with following format:
   [[fromPage, toPage, "transition", seconds(optional)], etc.]
holder - (default the default stage) where are we putting the pages (used for setting transition properties)

METHODS
addPage(page, swipeArray) - lets you alternatively add pages after you create the object
removePage(page) - lets you remove a page (if on this page, call a go() first and remove on the page event)
setSwipeArray(page, swipeArray) - lets you set the swipe array for a page
go(newPage, direction, trans, ms) - lets you go to a page for events other than swipe events
   newPage can be a reference to the page or an index matching the pages array order
   direction is which way the pages is relative to the current page
   trans and ms are optional and will override any previously set transitions (speed in ms)
resize() - call to resize transitions - not the pages themselves (use layouts)
pause() - pauses a transition before it starts (call from swipe event)
unpause() - unpauses a paused transition (unless another go() command is called)
puff(time) - adds all the pages behind the currentPage (adding time (s) will auto call settle)
settle() - removes all pages except the currentPage
disable() - stops swipe from activating and sets active = false
enable() - enables swipe action and sets active = true
dispose() - clears your listeners and pages

PROPERTIES
type - holds the class name as a String
speed - of transitions in seconds (see also ZIM TIME constant)
transitionTable - [[fromPage, toPage, "transition", seconds(optional)], etc.] overrides default transition
page - the current page object (read)
index - the index of the current page in pages (read)
pages - the page array initially passed as a parameter including any updates if using addPage or removePage methods
lastPage - the last page before transition (read)
direction - direction of transition (read)
transitioning - read only Boolean as to whether the pages are transitioning
active - default true, boolean to have swipes active (good for layered Pages objects)
swipe - the ZIM Swipe object used for pages (can tweak distance to percentage if rescaling)
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
Pages dispatches a "page" event when the page changes (to a page in the swipe array)
myPages.on("page",function(e){...})
with myPages.page being set to the new page (e.target.page)
and myPages.lastPage being set to the old page (e.target.lastPage)
myPages.direction gets the direction of the transition (e.target.direction)

if there is a string in the swipe array like "info"
then the Pages() object dispatches an event equivalent to the string
for the data example above, myPages.on("info",function(e){...});
would trigger when the home page is swiped to the left

Pages dispatches a "swipe" event before changing pages if swiped
you can then get pages.page, pages.nextPage and pages.direction
you can pause() if needed the transition to handle data, etc. and then unpause()
you do not need to handle going to another page when swiping - that is handled automatically
so you probably will not use the swipe event unless handling data between pages

Pages also dispatches a "pagetransitioned" event when a transition is complete
you will have the same properties available as with the page event

USAGE
the first page object is the start page
for the data above, swiping the home page down automatically goes to the hide page
if the home page is swiped up it automatically goes to the find page
you can add pages with the addPage() method
it will not show until you swipe or go to it - unless it was the first page added
1. if the holder is the stage then add the pages object to the stage
2. if the holder is another container then add pages object to the holder
and add the holder to the stage (read this twice to make sure you got it!)
in the second case, you will have to mask the holder so you do not see transitions
DO NOT add the pages to the stage or holder - let Pages do it for you
sometimes you need a page to be on the stage to operate on it
if this is the case, call puff() and make adjustments
call settle() when done - or pass in a time in ms to puff to auto settle after that time
you can define multiple pages objects add and remove pages objects as needed

MORE: http://zimjs.com/code/bits.html?title=Pages


************************************
[44578] HotSpots(spots, local, mouseDowns)

HotSpots
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
HotSpots allow you to create multiple hotSpot objects on multiple pages.
A hotSpot is an invisible click area (like an image map in HTML).
You can alternatively specify an object and it will turn that into a hotSpot.
HotSpots lets you control many or all of your interactions in one place.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// our first hotSpot will be a 50 pixel square at 100, 100
// then we will add hotSpots to these items as well
var circle = new Circle(60, "red");
circle.center();

var button = new Button();
stage.addChild(button);
button.x = stageW - button.width - 100;
button.y = stageH - button.height - 100;

// make the hotSpots object
// these are all on the same page
// gets really handy when you have multiple pages with Pages
var hs = new HotSpots([
   {page:stage, rect:[100,100,50,50], call:function(){zog("hot!");}},
   {page:stage, rect:circle, call:function(){zog("circle!");}},
   {page:stage, rect:button, call:function(){zog("button!");}},
]);
// hs.show(); // uncomment this to see rectangle hotSpots
stage.update();

PARAMETERS supports DUO - parameters or single object with properties below
spots (default null) - an array of hotspot data objects with the following format:
   [{page:home, rect:[190,50,260,260], talk:"screen reader content", call:someFunction, callOver:optionalFunction, callOut:optionalFunction},
    {page:home, rect:[70,405,500,150], talk:"screen reader content", call:someOtherFunction, callOver:optionalFunction, callOut:optionalFunction}]
   the page should be a Container
   the rect is the [left, right, width, height] of a rectangle relative to the stage
   talk (optional) will provide text for screen reader if ZIM Accessibility() is turned on
   call is the callback function to call when a hotSpot is clicked
   callOver and callOut will add mouseover and mouseout event functions to the hotSpot
   instead of a rect array you can pass an object that must have setBounds() set
   [{page:home, rect:submitButton, call:function(){//code}}]
   the hotSpot will then use the button position and bounds as the rectangle
   note - in this case, HotSpots will actually add a mousedown or click event to the button
   null can be left here and then hotSpots added with add()
local (default true) hotSpot rect is based on local coordinates of the container
   use when the element scale independently from the stage
   if set to false then you pass in global coordinates and hotSpot will convert them
mouseDowns (default false) stops mousedown events on a button that is used as a hotSpot
   prevents users from activating a swipe on a button (when using ZIM Swipe)

METHODS
show() - shows the hotspots for testing during authoring time
hide() - hides the hotspots
add(page,rect,call) - can dynamically add hotSpots
remove(page,rect) - rect is optional - so can remove all spots on a page or by the rect
dispose() - removes listeners

PROPERTIES
type - holds the class name as a String
hotSpots - an array of HotSpot objects

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)

NOTE: the class does actually add rectangle shapes to your page
the spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape
this could have been done with "math" alone but rollover cursor would be a pain
the class creates HotSpot objects - see the class underneath this one


************************************
[44790] HotSpot(obj, x, y, width, height, call, callOver, callOut, local, talk)

HotSpot
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
HotSpot adds an invisible button to a container object (often think of this as the page).
If you want multiple spots it is more efficient to use the HotSpots class above
which manages multiple HotSpot objects (otherwise you end up with multiple event functions).
The spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape.
The spot will get a cursor of "pointer".

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var hs = new HotSpot(stage, 100, 100, 50, 50, myFunction);
function myFunction() {
   zog("activation!");
}
// hs.show(); // uncomment this to see rectangle hotSpot
stage.update();

PARAMETERS supports DUO - parameters or single object with properties below
holder - container object in which to place the hotspot (stage for instance)
x, y, width and height - of the rectangle for the hotspot
call - the function to call when the spot is pressed
local - (default true) hotSpot rect is based on local coordinates of the container
   use when the element scale independently from the stage
   if set to false then you pass in global coordinates and hotSpot will convert them
talk - (default "hotspot") text for ZIM Accessibility screen reader

METHODS
show() - helps when creating the spot to see where it is
hide() - hides the hotspot
dispose() - removes the listener and the spot

PROPERTIES
type - holds the class name as a String
spot - the actual hotSpot object that gets added to the container can be accessed with the spot property
eg. hs.spot

ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)


************************************
[44910] Guide(obj, vertical, percent, hideKey, pixelKey, style, group, inherit)

Guide Class
extends a zim.Container which extends a createjs.Container


DESCRIPTION
Guide shows a guideline to help layout assets with code.
Cursor x and y in percentage or pixels are shown along edges
as a distance from the guide.
You only need one guide per axis because you measure from the guide to your cursor.
Use the G key to toggle guide visibility.
Use the P key to toggle percent and pixels.
Make sure you remove the guide for your final version (dispose).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// simple form for a vertical guide
// use the distance from the guide to your cursor to measure
// so you only need one vertical guide for horizontal measurement
var guide = new Guide();

// better to add guides to a GuideManager
var manager = new GuideManager();
manager.add(new Guide(stage));
manager.add(new Guide(stage, false));

// or with pixels
// manager.add(new Guide(stage, true, false));
// manager.add(new Guide(stage, false, false));

// then you can remove all guides with
// manager.dispose();
// handy with guides on multiple Pages

// and in frame resize event we can resize all guides:
frame.on("resize", function() {manager.resize();})

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - (default the default stage) object to add guide to for example a Container
vertical - (default true) set to false for horizontal guide
percent - (default true) set to false to show pixels
hideKey - (default G) key to press to hide guide
pixelKey - (default P) key to press to swap percent and pixels

METHODS
resize() - resizes the guide if the container size changes (put in frame resize event)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
   alternatively, pass in true to show controls or false to hide controls
   note - method does not update the stage
dispose() - removes keyboard event listeners and guide

PROPERTIES
type - holds the class name as a String
toggled - boolean - read only true if controls are showing or false if controls are hidden
pixels - boolean - set to true to change to pixels, false to go to percent


************************************
[45218] Grid(obj, color, percent, hideKey, pixelKey, style, group, inherit)

Grid
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Grid shows gridlines to help layout assets with code (percent is default).
Cursor x and y percentage or pixels are shown along edges.
Use the G key to toggle grid visibility.
Use the P key to toggle percent and pixels.
Make sure you remove the grid for your final version (dispose).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var grid = new Grid();

// better to add grids to a GridManager
var manager = new GridManager();
manager.add(new Grid());

// or with pixels
// manager.add(new Grid(null, false));

// then you can remove all grids with
// grid.dispose();
// handy with guides on multiple Pages

// and in frame resize event we can resize all grids:
frame.on("resize", function() {manager.resize();})

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - (default the default stage) the object to add grid to (for example a Container)
color - (default black) the color of the grid
percent - (default true) set to false to show pixels
hideKey - (default G) key to press to hide grid
pixelKey - (default P) key to press to swap percent and pixels

METHODS
resize() - resize the grid if the container changes size (eg. put in frame resize event)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
   alternatively, pass in true to show controls or false to hide controls
   note - method does not update the stage
   returns object for chaining
dispose() - clears keyboard events and grid

PROPERTIES
type - holds the class name as a String
toggled - boolean - read only true if controls are showing or false if controls are hidden
pixels - boolean - set to true to change to pixels, false to go to percent

MORE: http://zimjs.com/code/bits.html?title=Grid


************************************
[45554] Wrapper(items, width, spacingH, spacingV, wrapperType, align, valign, alignInner, valignInner, flip, reverse, bottomFull, colSize, rowSize, height, minSpreadNum, minStretchNum, percentVoidH, offsetVoidH, percentVoidV, offsetVoidV, style, group, inherit)

Wrapper
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A Wrapper wraps its content to the next row at a given width
The Wrapper is similar to the CSS Flexbox with the following:

ALIGNMENTS:
   It has left, center/middle right then top, center/middle bottom alignments
   for whole rows and columns and then for inside the rows and columns.
   These may or may not be active depending on the wrapper type below
WRAPPER TYPES:
   The types are spacing (default), spread, stretch, or column
   A colSize is available for the column type
   A rowSize is available that works with any of the above types
SETTINGS:
   There are also flip, reverse, bottomFull and col/row void settings.
MARGINS:
   ZIM display objects can have margins left, top, right, bottom
   that will shift objects relatively inside the Wrapper
   without affecting other objects in the wrapper.

WRAPPER WITH WINDOW AND LAYOUT
The Wrapper is resized automatically when added to a ZIM Window.
Set the Window resizeHandle parameter to true to let the user resize.
The Wrapper resizes and scales as a region in the ZIM Layout class.
The Window also resizes - so a Wrapper can go in a Window in a Layout object.

WRAPPER VS TILE
The Tile is locked in to rows and columns and does not wrap content
The Tile also has many responsive settings to squeeze, stretch, align, etc.
Consider the Wrapper like FlexBox perhaps Grid with ColSize set - and the Tile like a Table

WRAPPER VS LABEL
The Label can wrap text using the labelWidth/lineWidth parameters (they are the same).
The Wrapper is used to wrap objects - perhaps including a Label object.

See https://zimjs.com/ten/wrapper.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circles = [];
loop(40, function () {
   circles.push(new Circle(20, [orange, green, blue]));
});
var wrapper = new Wrapper(circles, 400, 20, 20).center();

interval(.5, function () {
   wrapper.resize(rand(300,500)).outline();
   stage.update();
});

EXAMPLE
var window = new Window({
   width:500,
   height:400,
   titleBar:"Wrapper",
   titleBarBackgroundColor:yellow,
   scrollBarDrag:true,
   fullSize:true,
   resizeHandle:true,
   backgroundColor:lighter,
   padding:10
})
   .center()
   .add(new Wrapper({
      items:[
         new Circle(), new Rectangle(), new Triangle(),
         new Circle(), new Rectangle(), new Triangle(),
         new Circle(), new Rectangle(), new Triangle(),
         new Circle(), new Rectangle(), new Triangle(),
         new Circle(), new Rectangle(), new Triangle(),
         new Circle(), new Rectangle(), new Triangle()
      ],
      spacingH:10,
      spacingV:10,
      wrapperType:"spread"
   }));

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
items - (default null) - an Array of items (or a single item) to add to the wrapper - also see add() addAt() and remove() methods
   the wrapper is a ZIM Container so any ZIM add and remove methods can be used and then a resize() method called
width - |ZIM VEE| - (default 300) set to a width to wrap items at this width (see resize(w,h) method to change width)
spacingH - (default 0) a spacing between items - ignored if colSize is set
   spacingH does not get ZIM VEE - the results are jiggly when wrapping
spacingV - |ZIM VEE| - (default 0) a spacing between rows - ignored if rowSize is set
wrapperType - (default "spacing") changes how the wrapper lays out the items as follows:
   "spacing" - places each item spaced at the spacingH from the next item
   "spread" - places equal spacing around edges and items horizontally (min the spacingH)
   "stretch" - places equal spacing between objects horizontally with no spacing at edges (min the spacingH)
   "column" - uses colSize parameter to determine spacing (spacingH is ignored)
align - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
   this aligns the whole row - see also alignInner for aligning inside columns
   align:series(LEFT, RIGHT) will toggle rows aligning left and right
valign - |ZIM VEE| (default TOP) set to CENTER, MIDDLE, BOTTOM
   this aligns the rows at the top, middle or bottom only when a height is provided (rare)
   see also valignInner for vertical aligning within rows (common)
alignInner - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
   aligns the items when colSize is set only - see also align for aligning whole rows horizontally
valignInner - |ZIM VEE| (default BOTTOM) set to TOP, CENTER, MIDDLE
   aligns the items in vertically in their row (common) - see also valign for aligning whole rows vertically (rare)
flip - |ZIM VEE| (default false) set to true to flip the order of the rows
   flip:series(false, true) would read left to right then right to left then left to right, etc.
reverse - |ZIM VEE| (default false) set to true to reverse all the items so the first is (probably) at the bottom right
bottomFull - |ZIM VEE| (default false) set to true to fill the Wrapper at the bottom
   does not reverse but rather leaves potentially fewer items at the top
colSize - |ZIM VEE| (default null) set to number to hard code column width
   this is ignored if the wrapperType is not set to "column"
   use colSize:series(100, 200, 100, 400) to set specific sizes
   this will also the only setting for which alignInner works
rowSize - |ZIM VEE| (default null) set to number to hard code row height
   this ignores spacingV but can be used with any wrapperType
   use a series(100, 200, 100, 400) to set specific sizes
height - (default null) does not really set the height of the wrapper
   the height is always determined by the width and the items as they wrap
   (both the width and height cannot be used together without scaling and the wrapper does not scale items)
   the height will have no effect when the valign parameter is set to TOP (default)
   The height will place the bottom of the wrapper at the height when the valign is BOTTOM
   The height will place the wrapper in the middle of the height when the valign is CENTER/MIDDLE
   Note: in the all cases the bounds will still be the bounds around the wrapper
   just the positioning of the wrapper is changed.
   This allows the wrapper to be placed at the bottom and grow to the top
   or placed in the middle and grow from the middle
   which would not be possible otherwise aside from repositioning after each resize
minSpreadNum - (default 2) spread would always center a single item on a row
   and can look weird spreading two or even three final items
   a wrapper with wrapperType:"spread" will spread items if there are at least minSpreadNum items
   if there is less than minSpreadItems then it will align the items according to align
minStretchNum - (default 3) stretch would always center a single item on a row
   and can look weird stretching two or even three final items
   a wrapper with wrapperType:"stretch" will stretch items if there are at least minStretchNum items
   if there is less than minStretchItems then it will align the items according to align
percentVoidH - |ZIM VEE| - (default 0) set a percent horizontal space between items default in center
offsetVoidH - |ZIM VEE| - (default 0) set a percent (or negative percent) to offset the void from the center horizontally
percentVoidV - |ZIM VEE| - (default 0) set a percent vertical space between rows default in center
offsetVoidV - |ZIM VEE| - (default 0) set a percent (or negative percent) to offset the void from the center vertically
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
add(items) - add an item or an array of items to the wrapper - will call a resize() - returns the wrapper for chaining
addAt(items, index) - insert an item or an array of items at an index - will call a resize() - returns the wrapper for chaining
remove(items) - removes an item or items (pass in an array) - will call a resize() - returns the wrapper for chaining
resize(width, height) - resize the wrapper passing an optional width and height - returns wrapper for chaining
   most of the properties below resize the wrapper automatically
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the Wrapper
dispose() - removes listeners and deletes object

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
items - an array of the wrapper items - or use tile.getChildAt() or tile.loop(function (item) {})
items2D - read only array of rows each containing an array of colums of items
** see the parameter for descriptions of the following
** setting each will resize the wrapper at the current width and height
** all these properties accept ZIM VEE (except spacingH) for instance: flip:series(false,true)
spacingH
spacingV
wrapperType
align
valign
alignInner
valignInner
flip
reverse
bottomFull
colSize
rowSize
percentVoidH
offsetVoidH
percentVoidV
offsetVoidV
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
   use resize(width, height) for resetting the width of the Tile without rescaling
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
   use resize(width, height) for resetting the height of the Tile without rescaling
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.



************************************
[46431] Tile(obj, cols, rows, spacingH, spacingV, unique, width, height, squeezeH, squeezeV, colSize, rowSize, align, valign, count, mirrorH, mirrorV, snapToPixel, clone, events, group, style, inherit)

Tile
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Tile has two main uses:

1. ART
Creates a tile with an object for the columns and rows specified - a mirror effect is available too.
By default the object is cloned.
A ZIM VEE value can be passed to tile multiple types of objects

2. LAYOUT
Set the unique parameter to true to pass in an array of unique objects
** Pre ZIM Cat, a series() would be used with the count set if required and clone set to false to keep object events
Now this is handled by ZIM with the unique parameter, simplifying the process.
The array could be thumbnail pictures, interface bars, content sections on a page, etc.
Horizontal and vertical spacings can be set
Setting colSize and rowSize will override spacings and force grid dimensions
align and valign parameters can be used
setting a width or height will spread the items - and override the colSize and rowSize
In both dimensioned and non dimensioned modes,
the rows and columns can be squeezed together and aligned as a group
So a variety of layouts can be accommodated

See: https://zimjs.com/tile.html for a dynamic example

NOTE: ZIM Layout() is available to layout content that is scaled into regions
Tile will NOT scale the content but of course, the Tile itself can be scaled.
And items can be manually scaled before or after adding - but Tile does not do any scaling.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle();
var tile = new Tile(circle, 20, 10).center();

EXAMPLE
// tile 10 rectangles spaced out across the stage
var tile = new Tile({obj:new Rectangle(), cols:10, spacingH:30, width:stageW*.9).center();

EXAMPLE
// tile two rows with a Dial and a Slider in each
var tile = new Tile({
   obj:[new Dial(), new Slider(), new Dial(), new Slider()],
   unique:true, // as of ZIM Cat
   cols:2, rows:2,
   spacingH:30, spacingV:30,
   valign:"center"
}).center();
// use tile.getChildAt(0) to access first Dial - or:
tile.items[0].on("change", function () {zog("changing dial 1")});

// OR if previously specified with events
var d1 = new Dial().on("change", function () {zog("changing dial 1")});
var d2 = new Dial();
var s1 = new Slider();
var s2 = new Slider();
var tile = new Tile({
   obj:series(d1, s1, d2, s2),
   unique:true, // retains original objects
   cols:2, rows:2,
   spacingH:30, spacingV:30,
   valign:"center"
}).center();
// or after
s2.on("change", function () {zog("changing slider 2")});

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - |ZIM VEE| (default new Circle()) the display object to tile
   note: put rotated objects in a container (unless rotated 180 degrees) and tile the container
   If obj is a String then the object will be turned into an asset(obj).centerReg({add:false}).clone() so a clone of the asset with id of obj.
   If the unique parameter is set then an array of objects can be used here (ZIM VEE will be turned off)
cols - (default 1 - if no cols and rows then 3) the columns to tile
rows - (default 1 - if no cols and rows then 3) the rows to tile
spacingH - (default 0 - if no cols and rows then 3) a spacing between columns - ignored if colSize is set
spacingV - (default 0 - if no cols and rows then 3) a spacing between rows - ignored if rowSize is set
unique - (default false) - set to true if tiling unique items like components with events set or objects with custom properties
   1. this will turn off ZIM VEE for the obj parameter which will accept an array of unique objects
   2. the count parameter will be set to the length of the array
   3. and the clone parameter will be set to false
width - (default null) set to a width to spread items in rows evenly out to width (see resize() method)
   colSize and mirrorH are ignored if width is set
height - (default null) set to a height to spread items in columns evenly out to height (see resize() method)
   rowSize and mirrorV are ignored if height is set
squeezeH - (default false) how to handle positioning within rows
   when width is not set:
      false - will not compress tiles beyond max calculated width for column including spacingH
      true - will treat all rows independently and fill spaces - align will align rows to widest row
   when width is set:
      false - will not compress past longest row including spacingH
      true - will compress all rows - align will then align rows to widest row
      "full" - will continue to compress always keeping each row to the width (may cause overlap)
squeezeV - (default "none") how to handle positioning within columns
   when height is not set:
      false - will not compress tiles beyond max calculated height for column including spacingV
      true - will treat all columns independently and fill spaces - valign will align columns to highest row
   when height is set:
      false - will not compress past longest column including spacingV
      true - will compress all columns - valign will then align columns to longest column
      "full" - will continue to compress always keeping each column to the height
colSize - |ZIM VEE| (default item size) set to number to hard code column width (ignores spacing)
   ignored if width is set
   use a series(100, 200, 100, 400) to set specific sizes
rowSize - |ZIM VEE| (default item size) set to number to hard code row height (ignores spacing)
   ignored if height is set
   use a series(100, 200, 100, 400) to set specific sizes
align - |ZIM VEE (non-squeezed only)| (default "left") set to "center", "middle", "right"
   this is a basic align and may not work with rotated objects
   add these to a container perhaps for best results
valign - |ZIM VEE (non-squeezed only)| (default "top") set to "center", "middle", "bottom"
count - (default cols*rows - obj array length if unique is true) optional total number of items to tile
   if count is set to 0 then count is ignored and a warning message is provided in console
mirrorH - (default false) flip alternating objects horizontally (works with top left registration point)
mirrorV - (default false) flip alternating objects vertically (works with top left registration point)
snapToPixel - (default true) sets the stage to snapToPixelEnabled and snaps to pixels to avoid small gaps when Tile is repositioned
clone - (default true - or false if unique is true) set to false to prevent Tile from cloning objects - good for series
events - (default false) Boolean - set to true to receive change events from elements of Tile
   this allows using one change event (or change() method) for a set of components in the Tile
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
itemUnderPoint(x, y, ignoreSpacing) - gets the item under a global point - (within item's col and row dimensions)
   ** will not work properly with squeeze and gets original items - so not items that are moved
   x and y are frame.mouseX, frame.mouseY for example.
   ignoreSpacing defaults to true and is a bigger selection space if there is spacing (can also be set to "horizontal" or "vertical" to ignore only one direction)
remake(items) - pass in an array of items to tile - see items property for editing current list - returns tile for chaining
   can also change rows and cols and remake()
resize(width, height) - resize the tile with new width and/or height if the width and/or height parameters were set - returns tile for chaining
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if a Tile is made with new Circle(20,[blue,green])
   then its clone will have random blue or green circles that will differ from the original
   If exact is set to true then the clone will the same colors as the original
dispose() - removes listeners and deletes object

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
items - read only array of the original tile items - or use tile.getChildAt() or tile.loop(function (item) {})
items2D - read only array of rows each containing an array of colums of items
items2DCols - read only array of columns each containing array of rows of items
** the current properties work for equal column size and equal row size
** although the row and column size can be different
current ** - a read only array of the current order of tile items - if items have been scrambled
current2D ** - read only array the current order of rows each containing an array of colums of items
current2DCols ** - read only array the current order of columns each containing array of rows of items
tileNum - this property is added to each object in the tile to give its number in the tile
tileCol - this property is added to each object in the tile to give its column number in the tile
tileRow - this property is added to each object in the tile to give its row number in the tile
These properties can be changed by calling remake()
   items - an array of items the tile uses
      modify this and pass in to remake(items) to update the Tile with new items
      cannot modify count - count will become the length of the array passed to remake()
   cols - number of columns - can modify - need to call remake() to see changes
   rows - number of rows - can modify - need to call remake() to see changes
These properties can be changed by calling resize(width, height) - set width or height to 0 for no spreading
   spacingH - horizontal spacing - can modify - need to call resize() to see changes
   spacingV - vertical spacing - can modify - need to call resize() to see changes
   squeezeH - horizontal compression - can modify - need to call resize() to see changes
   squeezeV - vertical compression - can modify - need to call resize() to see changes
   align - (not with ZIM VEE) horizontal alignment - can modify - need to call resize() to see changes
   valign - (not with ZIM VEE) vertical alignment - can modify - need to call resize() to see changes
   mirrorH - horizontal mirroring - can modify - need to call resize() to see changes
   mirrorV - vertical mirroring - can modify - need to call resize() to see changes
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
   use resize(width, height) for resetting the width of the Tile without rescaling
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
   use resize(width, height) for resetting the height of the Tile without rescaling
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a change event if items inside tile dispatch a change event
the change event object has an item property (e.item)
that refers to the item that caused the change event - for instance a Slider, Dial, etc.
note: the item is not the event object target - as that is the tile



************************************
[47187] Beads(path, obj, count, angle, startPercent, endPercent, percents, onTop, showControls, visible, interactive, clone, group, style, inherit)

Beads
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION

Beads adds objects around a Squiggle or Blob path.
Different objects can be specified with ZIM VEE (Pick) values
to put random or sequenced objects around path.
The objects should have center registration for the most part.
Although animating, wiggling or customizing the registration can be cool.
The count of the object and the start and end percents can be specified

Beads can be used to make dotted borders or bead-like art.
The path can be any Squiggle or Blob - see https://zimjs.com/nio/paths.html for example
The beads property holds the beads and can be animated in sequence

See https://zimjs.com/ten/beads.html for a mini-site of examples

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
new Beads({
   path:new Blob({points:"rectangle"}),
   obj:new Circle(5, series(red, blue)),
   visible:false,
   count:52
}).center();

EXAMPLE
var sun = new Beads({
   path:new Blob({color:yellow}), //.radialGradient([yellow,orange],[.2,.8],0,0,0, 0,0,100),
   obj:new Triangle(60, 60, 60, series(orange,yellow,red)).reg(null, 60),
   interactive:false,
   count:9
}).center().drag({all:true});

// here we animate the beads property of Beads - which holds only the beads (not the path)
// sequence is automatically set to 0 to animate each bead individually
// to animate all the beads, animate on the main beads object
// You can still set a sequence to a value to run a sequence
sun.beads.animate({
   props:{scaleY:1.7},
   time:{min:1500, max:2000},
   rewind:true,
   loop:true,
   // sequence:200
});

path, obj, count, angle, startPercent, endPercent, percents, onTop, showControls, visible, interactive, clone, group, style, inherit

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
path - (default new Blob({borderColor:blue})) a ZIM Squiggle or Blob on which to place the objects
obj - |ZIM VEE| the display object to place along the path - or use [] or series() for alternatives - also, see clone()
count - (default 10) the number of objects to place
angle - (default null) set to a specific angle such as 0 to keep all objects upright
   the default of null will align the objects normal (out from) the curve (at 90 degrees from the tangent at its placement point)
startPercent - (default 0) a start percent around the path starting from the first point of the Blob or Squiggle
endPercent - (default 100 or 100-spacing for Blob) an end percent for the last object
   can be smaller than startPercent to wrap around past 100
percents - (default null) an array of percent spacings to override default evenly spaced percents (also see percents property)
onTop - (default false) set to true to let the blob or squiggle come to the top of the bead object when manipulated
showControls - (default false) set to true to start off with the controls showing (also see interactive)
visible - (default true) set to false to not see the Blob or Squiggle path
interactive - (default true) set to false to not interact with the Blob or Squiggle path
clone - (default true) set to false to prevent Beads from cloning objects - good for series if events or custom properties are placed on each object
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
resize() - call resize if programatically changing the Squiggle or Blob path
   this will be done automatically when using path controls
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
   exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
   For instance, if Beads is made with new Circle(20,[blue,green])
   then its clone will have random blue or green circles that will differ from the original
   If exact is set to true then the clone will the same colors as the original
dispose() - removes listeners and deletes object

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
path - the Squiggle or Blob path on which the bead objects are placed
beads - a ZIM Container holding all the bead objects - this has a type of "BeadContainer"
   this can be looped through for hitTests, etc
   or can be animated and will automatically have a sequence of 0ms set
   other sequence values can be set to animate beads in sequence
   Each bead has the following properties added:
      beadNum - the index number of the bead when created
items - an array of the bead items for convenience - also see the beads property
count - get the number of beads
percents - get the array of percent spacings - see also percents parameter
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
   use resize(width, height) for resetting the width of the Tile without rescaling
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
   use resize(width, height) for resetting the height of the Tile without rescaling
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.



************************************
[47417] Layout(holder, regions, lastMargin, backgroundColor, vertical, regionShape, scalingObject, hideKey, style, group, inherit)

Layout
zim class - extends a createjs.EventDispatcher

DESCRIPTION
Layout arranges objects on the page by fitting (scaling) them in regions.
Make a layout object for each page if desired
and even nest layout objects inside regions.
Fixed aspect ratio content is fit into regions.
Layout is good for flexive design where you anchor titles and navigation.
Layout handles any number of regions vertically or horizontally.
It is useful for full scale mode for different devices or browser window scale.
You need to run the resize() method to update the layout.
Put the all your layouts in LayoutManager to scale all at once.

NOTE: ZIM Tile is available to lay out non-scaled content

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// these would be containers with your content
// make sure that bounds are set on containers
// you may want to hard code bounds for clarity
var header = new Rectangle(500, 200, "blue");
var content = new Rectangle(600, 500, "green");
var footer = new Rectangle(500, 200, "blue");
stage.addChild(header, content, footer);

// make the Layout - more useful for FULL scale mode
var layout = new Layout({
   holder:stage,
   regions:[
      {object:header, marginTop:10, maxWidth:80, minHeight:10, valign:"top"},
      {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
      {object:footer, marginTop:5, maxWidth:80, height:10}
   ],
   lastMargin:5
});

// add to LayoutManager to resize or dispose all layouts together
// disposing only removes keyboard events to show boundaries
var manager = new LayoutManager();
manager.add(layout);

frame.on("resize", function() {
   manager.resize();
   stage.update();
});

stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
holder - object to hold layout (stage, container, etc) that must have bounds set
regions - an array of region objects with specific properties for each
   Example VERTICAL region objects - all dimensions are percents
      [{object:title, marginTop:10, maxWidth:80, minHeight:20, align:"left", valign:"top"},
      {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
      {object:nav, marginTop:5, maxWidth:80, height:20, backgroundColor:"red"}]
   note: no minHeight for middle regions - but heights on any region
   align defaults to middle for the regions
   valign defaults to top and bottom for the top and bottom region and middle for the others
   backgroundColor applies a backing color to the region
   Example HORIZONTAL region objects
      [{object:col1, marginLeft:10, maxHeight:80, width:20, valign:"bottom"},
      {object:col2, marginLeft:5, maxHeight:90, align:"middle"}, // note, middle gets no minWidth
      {object:col3, marginLeft:5, maxHeight:80, minWidth:20, align:"left", valign:"top"}]
   align defaults to left and right for the outer regions and middle for the inside regions
   valign defaults to top for all the regions
lastMargin - (default 0) the margin at the bottom (vertical) or at the right (horizontal)
backgroundColor - (default null) background color for the whole holder
vertical - (default true) set to false for horizontal layout
regionShape - (default null) a zim or createjs Shape object to show bounds (gets added to holder)
   can toggle on and off with B key - but must pass in the Shape to use the B key
scalingObject - (default holder) an object used as the bounds of the region scaling
   setting a scalingObject will also set the bounds of the holder to the scalingObject bounds
   it does not scale the holder - only scales the region objects inside
hideKey - (default B) is the hot key for hiding and showing the bounds

METHODS
resize() - resize based on new bounds of the holder (or scalingObject)
dispose() - removes the B key listener (otherwise, nothing to dispose)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
   alternatively, pass in true to show controls or false to hide controls
   note - method does not update the stage
addShape(shape) - adds a bounding shape dynamically
removeShape() - permanently removes the bounding shape
disable() - disables all the layout (shape and sizing)
enable() - enables all the layout (shape and sizing)
if you want to get rid of the objects then you need to do so in your app

PROPERTIES
type - holds the class name as a String
regions - the regions object - if changed will have to call resize() manually
toggled - read-only Boolean as to whether the controls are showing or hidden

DESCRIPTION OF FLEXIVE DESIGN
here described with vertical layout - horizontal is similar but rotated 90
the content in the middle will try and expand against the top and bottom
until it forces the top and bottom to their minimum percents
if the content hits its maximum width percent first then the top and bottom
will fill up the rest of the height until they reach their maximum widths

MORE: http://zimjs.com/code/bits.html?title=Layout


************************************
[47927] Accessibility(appName, tabOrder, tabIndex, cycle, decimals, frame, application, alwaysHighlight, AHTime, AHColor, AHBorderWidth, AHBorderPadding, AHAlpha, AHObject, AHObjectScale)

Accessibility
zim class - extends a createjs.EventDispatcher

DESCRIPTION
Adds Screen Reader accessibility to the canvas for TAB key or Swipe (mobile) highlighting of ZIM objects
Some objects can be activated using the ENTER key and adjusted using the ARROW keys
Default or custom titles can be set to be read by the Screen Reader
The objects and the order in which the objects recieve focus can be set with a tabOrder array
A text message can be passed to the talk() method and it will be read by a Screen Reader

NOTE: Instructions to activate a screen reader on desktop or laptop computers
On Windows, you can type Narrator into Cortana and run it - it is really easy
On Mac, under Accessibility choose Voice Over
On Android, under Accesibility choose Voice and turn on TalkBack
Windows worked at ZIM 6, Apple worked at 6.1.0, Android worked at 6.1.0 aside from Slider, Dial, Stepper and ColorPicker
Custom readers were not tested

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var button = new Button().center()
button.on("mousedown", function() {
   zgo("http://zimjs.com");
});
var dial = new Dial().center().mov(200);

var accessibility = new Accessibility();
// this will automatically read in all objects on the stage and give default messages for the Screen Reader
// ENTER key events will be added to objects that will translate to mousedown and click events on the object
// Tab (swipe on mobile) to focus on the Button and press enter (double tap on mobile) to go to the ZIM site
// The Dial can use arrows to increase and decrease its value (up and right increase, down and left decrease)
// On mobile, double tapping the Dial brings up a select box with options (as does Slider, Stepper, and ColorPicker)

// OR

var accessibility = new Accessibility("Second Example");
accessibility.tabOrder = [
   dial,
   {obj:button, title:"Press ENTER to go to ZIM site"}
];
// this will start and end the app with "Second Example" being read (rather than default, "application")
// the dial will be the first item to tab to
// the button has a tabOrder object so it will have the title read rather than the default button message
// You could also provide a tabOrder object for the dial as well

NOTE: Please see https://zimjs.com/screenreader for a detailed example
NOTE: Please see https://zimjs.com/accessibility for a more examples

PARAMETERS supports DUO - parameters or single object with properties below
appName - (default "application") read in screen reader when application receives or loses focus
tabOrder - (default an array of all ZIM Display Objects on stage) an array of zim Display Objects
   These will be given TAB key control (and ENTER and ARROWS) and will work with Screen Readers
   Or given swipe left/right and double tap on mobile
   *** Alternatively, an array of tabOrder objects with an obj property and a title property can be used
   The obj is the Dispay Object and the title is what is read by the Screen Reader
   eg. {obj:button, title:"Press Enter Key to start game"}
   Can also specify tabOrder as a property of Accessibility
   *** The tabOrder may change compared to the array that is initially provided
   *** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
   *** For objects not on the stage including a Pane, Waiter, etc. do not rely on the auto adding, use the parameter specified array instead.
tabIndex - (default -1) - a starting index for focus - or can set tabIndex property after object is made
cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
decimals - (default 2) number of decimals max to read for screen reader
frame - (default currentFrame) the frame
application - (default true - false on mobile) set to false to set role of buttons as buttons rather than application - may cause problems with NVDA unless set to forms mode
alwaysHighlight - (default false) screen readers will add their own highlights - but this will set highlight to true even if there is no screen reader
   Set to true to place a rectangle around the object being put into focus by pressing the tab key or swipe on mobile
   This will replace screen reader highlights (eg. for Windows Narrator) except for when aria is true (eg. Apple Voice Over)
   The rest of the parameters relate to the alwaysHighlight - meaning highlight even if there is no screen reader
AHTime - (default .7) seconds to show the alwaysHighlight (also see ZIM TIME constant)
AHColor - (default brown) - the color of the alwaysHighlight rectangle
AHBorderWidth - (default 3) thickness of border
AHBorderPadding - (default 5) distance from object bounds outward towards border
AHAlpha - (default .8) alpha of the alwaysHighlight
AHObject - (default null) set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
AHObjectScale - (default .8) scale the AHObject relative to the object with tab focus

METHODS
tab(dir) - set dir to 1 (default) to emulate tab forward or -1 to emulate shift tab
changeTitle(target, title, activate) - change a title for the Screen Reader
   target - the tabObject (eg. button) or the tabIndex of the item in the tabOrder to change
      *** The tabOrder may change compared to the array that is initially provided
      *** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
   title - the new title that will be read to the screen reader
      If no title is provided any component passed will just update to its currentValue or selectedIndex
   activate (default false) - set to true to set focus of item at index and send to Screen Reader
talk(words) - tell the Screen Reader to read the words provided (does not affect focus)
resize(target) - target is the object or index of the object to update - or do not pass a target to update all
   This needs to be done if the object is moved, scaled, or removed from / re-added to the stage
   Accessibility works by placing HTML tags behind the canvas where the ZIM objects exist - so resize() handles this
   Use the Frame resize event and optionally, the ResizeManager()
dispose() - removes listeners and sets tabOrder to []

PROPERTIES
type - holds the class name as a String
tabOrder - get or set an array with the order in which display objects will receive focus with tab and shift tab (swipe on mobile)
tabIndex - get or set the index of the tabOrder (also see currentObject)
   Setting works only if object at the index is on the stage
   Returns -1 if no tabOrder object has the focus
currentObject - get or set the object in the tabOrder that has focus
   Objects have the following Accessibility properties added:
      zimAccessibility - the accessibility object
      zimTabIndex - the index in the tabOrder
      zimTabTag - the HTML tag that is used to represent the object to the screen reader
      zimTabParent - the parent of an object for RadioButtons, Tabs, and Pads (for others, the zimTabParent is the object)
      tabIndex - the index of the tag in tabParent (if there is a parent)
      type - the type of object. If there is a zimTabParent (that is not itself), the type is RadioButton, TabsButton or PadButton
activatedObject - get the object in the tabOrder that was last clicked or had the ENTER key pressed on
startAppTag - get the HTML tag that announces application start
endAppTag - get the HTML tag that announces application end
cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
decimals - (default 2) number of decimals max to read for screen reader
frame - (default currentFrame) the frame
alwaysHighlight - Boolean to use a alwaysHighlight rectangle
AHTime - seconds to show the hightlight (also see ZIM TIME constant)
AHColor - the color of the alwaysHighlight rectangle
AHBorderWidth - thickness of border
AHBorderPadding - (default 5)distance from object bounds outward towards border
AHAlpha - alpha of the alwaysHighlight
AHObject - set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
AHObjectScale - scale the AHObject relative to the object with tab focus
enabled - default is true - set to false to disable

EVENTS
Dispatches a "change" event when the screen reader is about to talk
   This is when the talk() method runs or the tabIndex is changed (from click, swipe, tab, changeTitle - with activate true)
   The event object has a title property that holds the words the screen reader will say
   Several change events can happen at the same time so what is said is usually the last
   but the talk() method takes priority as it runs in alert mode so focus is not lost
The Enter key dispatches mousedown and click events from object with focus
   The event object has a fromEnter property which is true if from an enter key on the object
   This could trigger a button press for instance



************************************
[48985] Manager()

Manager
zim class

DESCRIPTION
used internally to make ResizeManager, GridManager and GuideManager
and in future perhaps OutlineManager


************************************
[49038] ResizeManager()

ResizeManager
zim class extends zim.Manager abstract class

DESCRIPTION
Add objects with a resize() method to a ResizeManager object and call a single resize() on the ResizeManager object
This will most likely go in a resize event on the Frame
Works with objects such as Layout, Pages, Grid, Guide, Accessibility, Loader and TextArea

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var resizeManager = new ResizeManager();
resizeManager.add([pages, layout, accessibility]);
// where these three objects have already been made
// *** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
frame.on("resize", function() {
   resizeManager.resize(); // without ResizeManager you would make three different resize() calls
})

METHODS
add(obj) - adds object or an array of objects to the ResizeManager
   *** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
remove(obj) - removes object or an array of objects from the ResizeManager
resize() - calls the resize() method of any object in the ResizeManager
dispose() - disposes the objects in the ResizeManager and the ResizeManager itself

PROPERTIES
type - holds the class name as a String
items - get or set an array of objects currently in the Manager



************************************
[49081] TransformManager(objects, persistID)

TransformManager
zim class extends CreateJS EventDispatcher

DESCRIPTION
Manages multiple objects with transform() methods set.
Can use to show, hide, hideAll, add, remove and resize transform controls.
Can be used to automatically save any transforms and reload them again on refresh of Browser / App.
This uses localStorage.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var rect = new Rectangle(300, 200, green)
   .centerReg()
   .mov(-200)
   .transform();

var circ = new Circle(100, red)
   .centerReg()
   .mov(200)
   .transform();

var tm = new TransformManager([rect, circ], "sample");
// or use methods:
// tm.add([rect, circ]);
// tm.persist("sample"); // or add later to save transforms

PARAMETERS
objects - (default null) adds the object(s) to the Transform Manager
   pass in a single object or an array of multiple objects
persistID - (default null) String id to make ZIM remember transforms of objects (uses localStorage)

METHODS
add(obj) - adds object or an array of objects to the TransformManager
remove(obj) - removes object or an array of objects to the TransformManager
show(obj) - show controls for an object that has a transform() set
hide(obj) - hides controls for an object that has a transform() set - still available with click
hideAll() - hides all controls - still available with click
resize() - calls the resize() method of any object in the ResizeManager
persist(id) - save data after every change and reload transforms when done - must provide an id
clearPersist(id) - clear persisting data - do this before adding shapes - must provide an id
savePersist() - with persist() already set, this will force a saving even without a transform event being captured
   if resize() after non-transform movement is called, then this is not needed
stopPersist() - no longer save data
dispose(removePersist, removeControls) - default just removes manager - keeps the data
   set removePersist to true to remove the persist data
   set removeControls to true to remove the transforms and beziers of all the items

PROPERTIES
type - holds the class name as a String
items - get or set (set not recommended) an array of objects currently in the TransformManager
currentObject - the last item to get transform tools if it still has the transform tools active
persistData - gets the persist data if it exists

EVENTS
Dispatches a "transformed" event when pressup on any of the controls or on click
   transformed event object has transformObject and transformType properties
   the transformType property has values of:
       FOR TRANSFORM: "select" (if not moved), "size", "move", "rotate", "stretch", "reg" "reset"
       FOR BLOB, SQUIGGLE: "move", "bezierPoint", "bezierHandle", "bezierSwitch"
Adds "transformshow" and "transformhide" events for when click to hide or show controls
   these have a transformObject property to indicate what was shown or hidden
Dispatches, on each object, a "persistset" event when persist data is ready - could be delayed 50ms due to Layer being created
Dispatches a "persistcomplete" event when all persist data has been set + 100ms for layers to be set before applying controls



************************************
[49457] GuideManager()

GuideManager
zim class - extends the ZIM Manager abstract class

DESCRIPTION
Add Zim Guide objects to a GuideManager object and update or remove all guides at once.
Guides are handy to use but perhaps annoying to update and remove if you have many.
GuideManager keeps track of the guides and lets you update or dispose of them on command.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var manager = new GuideManager();
manager.add(new Guide());
manager.add(new Guide(false));

// or with pixels
// manager.add(new Guide(true, false));
// manager.add(new Guide(false, false));

// then you can remove all guides with
// manager.dispose();
// handy with guides on multiple Pages

// and in frame resize event we can resize all guides:
frame.on("resize", function() {manager.resize();})

PROPERTIES
type - holds the class name as a String
items - an array of all Guide objects added with add()

METHODS
add(guide) - registers a guide with the GuideManager
remove(guide) - removes guide from register
resize() - resizes all the guides in the GuideManager (ie. if stage changes)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
   alternatively, pass in true to show controls or false to hide controls
   note - method does not update the stage
dispose() - disposes all guides and the GuideManager

NOTE: to just hide guides, you use the G key
and to toggle percent and pixels use the P key
you can dispose guides individually or use this class to dispose all
disposing will remove the G, P key listener and the guide


************************************
[49513] GridManager()

GridManager
zim class - extends a zim.Manager

DESCRIPTION
Add Zim Grid objects to a GridManager object and update or remove all grids at once.
Grids are handy to use but perhaps annoying to update and remove if you have many.
GridManager keeps track of the grids and lets you update or dispose of them on command.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var manager = new GridManager();
manager.add(new Grid());

// or with pixels
// manager.add(new Grid(null, false));

// then you can remove all grids with
// grid.dispose();
// handy with guides on multiple Pages

// and in frame resize event we can resize all grids:
frame.on("resize", function() {manager.resize();})

METHODS
add(grid) - registers a grid with the GridManager
remove(grid) - removes grid from the register
resize() - resizes all the grids in the GridManager (ie. if stage changes)
dispose() - disposes all grids and the GridManager

NOTE: to just hide grids, you use the G key
and to toggle percent and pixels use the P key
you can dispose grids individually or use this class to dispose all
disposing will remove the G key listener and the grid

PROPERTIES
type - holds the class name as a String
items - an array of all Grid objects added with add()


************************************
[49564] LayoutManager()

LayoutManager
zim class

DESCRIPTION
Add Zim Layout objects to a LayoutManager object and update them all at once.
You can remove all layout region bound shapes at once
as well as remove the B key to show the region bound shapes.
For a final project, call the dispose().
This will remove all shapes and key events.
The layouts will remain in place to handle multiple screen sizes.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// these would be containers with your content
// make sure that bounds are set on containers
// you may want to hard code bounds for clarity
var header = new Rectangle(500, 200, "blue");
var content = new Rectangle(600, 500, "green");
var footer = new Rectangle(500, 200, "blue");
stage.addChild(header, content, footer);

// make the Layout - more useful for FULL scale mode
var layout = new Layout({
   holder:stage,
   regions:[
      {object:header, marginTop:10, maxWidth:80, minHeight:10, valign:"top"},
      {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
      {object:footer, marginTop:5, maxWidth:80, height:10}
   ],
   lastMargin:5
});

// add to LayoutManager to resize or dispose all layouts together
// disposing only removes keyboard events to show boundaries
var manager = new LayoutManager();
manager.add(layout);

frame.on("resize", function() {
   manager.resize();
   stage.update();
});

stage.update();

METHODS
add(layout) - registers a layout with the LayoutManager
resize() - resizes all the layouts in the LayoutManager
disable() - disables all the layouts in the LayoutManager (shapes and sizing)
enable() - enables all the layouts in the LayoutManager (shapes and sizing)
dispose() - only removes bounds shapes and keyboard events (does not really dispose)

NOTE: to just hide bounds, you use the B key

PROPERTIES
type - holds the class name as a String
items - an array of all Layout objects added with add()


************************************
[49658] SelectionSet(selections)

SelectionSet
zim class

DESCRIPTION
Keeps track of selected objects or indexes, etc.
Just a wrapper for array manipulation:
Uses isSelected instead of indexOf()>=0
Uses remove() instead of splice(index, 1), etc.
Handles multiple select, matching other SelectionSet objects for add and remove, etc.
Use with a SelectionManager to control multiple Selection Set objects at once.
See: https://zimjs.com/explore/selectionTest.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var selectedTriangles = new SelectionSet();
var triangles = new Tile(new Triangle(), 5, 1, 50).center().mov(0,-200).cur();
triangles.on("click", function (e) {
   selectedTriangles.toggle(e.target, frame.ctrlKey); // multiple if ctrl down
   // need to loop through all to update
   triangles.loop(function (triangle) {
      triangle.color = selectedTriangles.isSelected(triangle)?pink:black;
   });
   stage.update();
});

PARAMETERS
selections - (default []) an array of selected items or indexes, etc.

METHODS
clear() - clear selections
isSelected(item) - returns true if item is selected else false
toggle(item, multiple, match, unmatch) - toggle the item which calls add or remove below
   this is probably the most handy method - see parameter description below
add(item, multiple, match, unmatch) - add an item
   multiple will not remove other selected items
   match - pass in another SelectionSet to add the same item or index
   unMatch - pass in another SelectionSet to remove the same item or index if there
remove(item, multiple, match, unmatch) - remove an item
   multiple will not remove other selected items
   match - pass in another SelectionSet to remove the same item or index
   unMatch - pass in another SelectionSet to add the same item or index if there
dispose() -  clears list and sets to null

PROPERTIES
type - holds the class name as a String
items - an array of all Layout objects added with add()


************************************
[49788] SelectionManager(sets, multipleKey, multipleSets)

SelectionManager
zim class extends a CreateJS EventDispatcher

DESCRIPTION
Add Zim SelectionSet objects to a SelectionManager object and control multiple selection sets.
Used internally to control Squiggle and Blob point selections for multiple drags and mousemoves
Also provides key events along with undo event
See: https://zimjs.com/explore/selectionTest.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// manage two sets of SelectionSet objects:
var selectedCircles = new SelectionSet();
var selectedRects = new SelectionSet();
// add SelectionSet objects to manager and set ctrl to be multiple select
var selectionManager = new SelectionManager([selectedCircles, selectedRects], "ctrl");

var circles = new Tile(new Circle(), 5, 1, 50).center().cur();
var rects = new Tile(new Rectangle(), 5, 1, 50).center().mov(0,100).cur();
circles.on("click", function (e) {
   // toggle current selected - SelectionManager will handle multiple select
   selectedCircles.toggle(e.target);
   setColors();
});
rects.on("click", function (e) {
   selectedRects.toggle(e.target);
   setColors();
});
// need to loop through all objects to make sure their color did not change
function setColors() {
   circles.loop(function (circle) {
      circle.color = selectedCircles.isSelected(circle)?red:black;
   });
   rects.loop(function (rect) {
      rect.color = selectedRects.isSelected(rect)?red:black;
   });
   stage.update();
}

PARAMETERS
sets - (default null) a ZIM SelectionSet object or an array of SelectionSet objects to manage
multipleKey - (default null) a key ("shift", "ctrl", "meta", etc.) to use for multiple select (only within a SelectionSet)
multipleSets - (default true) set to false to only allow one set at a time to be selected on

METHODS
clear() - clears all SelectionSet objects in the SelectionManager
setCurrent(set) - sets the privided SelectionSet to the currentSet and clears the others
dispose() - removes key events

PROPERTIES
type - holds the class name as a String
sets - an array of all the SelectionSet objects
multipleKey - the key provided for multiple select ("shift", "ctrl", etc) - do not add "Key" as in "shiftKey"
multiple - true if the multipleSelect key is being pressed otherwise false
ctrlKey - true if the ctrlKey key is being pressed otherwise false
shiftKey - true if the shiftKey key is being pressed otherwise false
metaKey - true if the metaKey key is being pressed otherwise false

EVENTS
dispatches an "undo" event if a CTRL or META plus the U key is pressed


************************************
[49911] Bind(connection, bindType, master, masterFilter, couple, smartDecimals, report, setDefault)

Bind
zim class

DESCRIPTION
Binds DisplayObject properties to data, for instance localStorage or server data
The property values can be any JSON valid data such as Number, String, Array or Object Literal

NOTE: see bind() methods of DisplayObjects like Containers, ZIM Shapes, Shapes, Bitmap, etc.

NOTE: see ZIM Base() in PHP for database access https://zimjs.com/php/base.zip

NOTE: see ZIM Skool Data lesson 09 https://zimjs.com/skool/lesson09.html
And asociated videos here https://zimjs.com/learnjavascript.html#lesson09

Bind has to() and from() methods that can be used to update data and properties as desired.
to() saves data and from() gets data and sets object properties.
These have filters to specify on which ids, objects or properties to act.
LOCALSTORAGE, POST and GET is supported as are these global ZIM constants.

The data has JSON.strigify() applied and will be sent as a data property
Bind has a master parameter that will be sent with all to() and from() calls
to() and from() calls will send a command property of either "to" or "from"
There is also an extra property that can be used to send an id, search term, etc.
These can be collected, for instance in PHP, as follows depending on the bindType
$_GET["data"], $_GET["master"], $_GET["command"], $_GET["extra"], $_GET["unique"] or
$_POST["data"], $_POST["master"], $_POST["command"], $_POST["extra"], $_POST["unique"]
Separating the data from the master, command and extra more readily allows JSON storage

GET uses ZIM asnyc() which is JSONp based and overcomes Cross Origin security issues
GET has a limit of 2048 - some servers are more but some do not
POST uses ZIM Ajax() which will work with the same server or one with CORS set accordingly
POST has a limit of roughly the computer memory
LOCALSTORAGE is also supported which stores the data on the user's computer

See: https://zimjs.com/ten/bind.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// LOCALSTORAGE example - synchronous so do not need callback
var b = new Bind();
// b.clear(); // clear localStorage memory

// circle's location will be remembered
var c = new Circle().center().bind("circle", ["x","y"]).drag();
c.on("pressup", function () {b.to();});

// TextArea's text will be remembered
var t = new TextArea().center().mov(0,-100).bind("text", ["text"]);
t.on("input", function () {b.to();});

EXAMPLE
// A GET example - POST is the same - see comments in PHP template...

// get unique user id from components, etc.
// this could be added to the url for get
// but we will pass it in as master data which works for get or post
// to tell the to() and from() methods to always pass this master variable
var uid = "bindTest";
var url = "https://zimjs.com/ten/bind.php";

// from() will get any data from the url and store in Bind as data
// this will then be used as each object is bound
var b = new Bind(url, GET, uid).from(function() {

   var c = new Circle(100,red)
      .loc(rand(stageW), rand(stageH))
      // the bind will also set properties to existing Bind data
      .bind("circle", ["x","y","level"])
      .drag();

   c.on("pressup", function() {
      // to() will send data to the server
      b.to();
   });

   var r = new Rectangle(200,200,blue)
      .loc(rand(stageW-200), rand(stageH-200))
      .bind("rect", {x:BOTH, y:BOTH, level:BOTH, alpha:TO})
      .drag();

   r.on("pressup", function () {
      b.to();
   });

   // b.to(); // would store random locations to start

   // would clear bindings and data
   // b.removeAllBindings(true, function (response) {
   //     zog(response);
   // });

   stage.update();
});

// A PHP Template for GET with notes for POST
// See: https://zimjs.com/ten/bind.html for a full example with MySQLi database code
<?php

// ZIM Bind as of ZIM 10.9.0
// ZIM supports data binding of JSON ready properties on objects
// here is an example of the structure for binding to a database with GET
// GET uses ZIM async() which uses JSONp rather than AJAX
// POST uses ZIM ajax() and is similar - use for larger data

header('Content-type: text/javascript');

// ZIM Bind sends the following variables
// in this case, master is an id
// data is the JSON data to store
// command will be "to" or "from" to store or retrieve data
// extra could be a search term, etc. but not used in this example

// for POST - change these to $_POST["master"], etc.
$master = isset($_GET["master"]) ? $_GET["master"] : "";
$data = isset($_GET["data"]) ? $_GET["data"] : "";
$command = isset($_GET["command"]) ? $_GET["command"] : "";
$extra = isset($_GET["extra"]) ? $_GET["extra"] : "";

if ($command == "to") {

// ZIM Bind.to() will send a data property in JSON format:
// '{"id1":{"prop1":"value", "prop2":"value"}, "id2":{"prop3":"value"}}'
// the JSON string can be stored at the id in the database
// or separate fields can be stored by parsing the JSON data
   // looping and filling specific fields

// check for master id
if ($master=="") {echo "async.callbackTo('error: no id')"; exit;}

// put data into database at id using MySQLi or PDO, etc.
// then echo success or error in the following async format
echo "async.callbackTo('success')";
// echo "success"; // FOR POST

} else if ($command == "from") {

// Bind from() requests the information
// If all the data is requested then the data will be the string 'full'
// so return the JSON string stored at the id for instance.
// requests might also be provided in the following format:
// '{"id":["prop1","prop2"], "id2":["prop3"]}'
// and then return the data for the fields requested as a JSON string:
// '{"id1":{"prop1":"value", "prop2":"value"}, "id2":{"prop3":"value"}}'

// check for master id
if ($master=="") {echo "async.callbackFrom('error: no id')"; exit;}

// get data from database using MySQLi or PDO, etc.
// return data in the following async format - for example:
   $json = '{"circle":{"x":200,"y":200},"rect":{"x":300,"y":300,"alpha":1}}';
echo "async.callbackFrom($json)";
// echo $json; // FOR POST

} else if ($command == "removeAll") {

// if we want to reset the data the Bind object's removeAllBindings
// can be called - the removeConnectionData defaults to true
// and a command of "removeAll" will be called on the server

// check for id
if ($master=="") {echo "async.callbackRemoveAll('error: no id')"; exit;}

// delete data from database using MySQLi or PDO, etc.
echo "async.callbackRemoveAll('success')";
// echo 'success'; // FOR POST
}
?>

PARAMETERS
** supports DUO - parameters or single object with properties below
connection - (default "zimBind") a localStorage string "example" or a URL to a server script
bindType - (default LOCALSTORAGE) or set to GET or POST
   For GET and POST a GET variable called type will be sent with either "get" or "post" value
   This is captured by ZIM Base() on the PHP side and used to manage variables and responses.
   LOCALSTORAGE - stores data in localStorage on the users computer
      and is syncronous so all data is automatically stored on to() and from()
   GET - sends data to a server script such as PHP or node using ZIM async() and JSONp
      as such, this should work from local computers and across different domains
      extra information can be placed on the URL in CGI format ?prop=value&prop=value
      the values (only) should be encodeURI() if spaces or special characters
      there is a limit of approximately 2048 characters
   POST - sends data to a server using an object which gets JSON.stringify applied
      this object can be retrieved via $_POST["data"] in PHP, etc.
      extra information can be placed on the URL in CGI format ?prop=value&prop=value
      the values (only) should be encodeURI() if spaces or special characters
      there is virtually no limit to the amount of data
      files will need to be on the same server or a CORS header set up
master - (default null) information to send with each server call (not localStorage)
   this could be an id, etc. and will have uriEncode() applied
   eg. in php it can be received as $_GET["master"] or $_POST["master"] depending on bindType
masterFilter - (default null) a function to run before TO and after FROM
   this will receive the data (plus command and extra)
   command will be "to", "fromTo", "from", or "remove" - see to(), from(), remove() for details
   and must return the data - but the function can operate on the data
   eg. if data.id = "1_a" the filter function can set data.id = data.id.split("_").join("");
   The function must return data - this will modify before sending and after receiving
   If only one direction is desired use the command parameter in a conditional
   eg. if (command=="to") {etc.} - make sure to return the data in all cases
couple - (default false) - set to true to turn nested JSON into a single layer
   The object will have _ between the id and the property name
   eg. {"circle":{"x":"10", "y":"20"},"count":{"currentValue":"0"}}
   is: {"circle_x":"10", "circle_y":"20", "count_currentValue":"0"}
   This allows data to be JSON decoded on the server
   and put more directly into table fields of the database
   The data will be automatically decoupled back to a double layer object on retrieval
smartDecimals - (default true) numbers > 1 have 1 decimal, numbers < 1 have two decimals
report - (default false) set to true to receive console Bind reports of each bind result
setDefault - (default null) by default the first Bind object is the zimDefaultBind object
   The zimDefaultBind is what DisplayObject bind() method will use unless bindObj is specified.
   Set the setDefault parameter to true to override any previous Bind objects as the default bind object.
   See also the default property

METHODS
** all methods return the object for chaining
add(id, obj, props, extra, filter) - adds a DisplayObject (Container, Bitmap, Circle, etc.) to the Bind object
   or use bind(id, props, filter, bindObj) method of DisplayObjects
   will also set properties to current Bind properties for GET and POST
   or get latest data for LOCALSTORAGE
      id - a string identifier - one id per object
      obj - a DisplayObject (display objects can have more than one id)
      props - an property as a string or an array of properties as strings
      extra (default null) extra information to be sent to the server (not localStorage)
         this could be an id or a search term, etc. it will have encodeURI() applied
         this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
      filter - (default null) a function to run before sending and after receiving data
         this will receive (data, command, extra, process) parameters
         command will be "to", "fromTo", "from", or "remove" - see to(), from(), remove() for details
         calling process.stop() will stop the current to() or from() call from proceeding
         the function must return the data - see Bind masterFilter parameter for more information
         note: the masterFilter if supplied will run as well before the filter
remove(targets, props, extra, filter, removeConnectionData, call) - remove a bind
   targets (default null) an object or id or an array of ids or objects to remove binds
   props (default null) a property or an array of properties to remove binds on only those properties
      or pass both targets and props to remove only properties on provided id or objects
   extra (default null) extra information to be sent to the server (not localStorage)
      this could be an id or a search term, etc. it will have encodeURI() applied
      this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
   filter (default null) a function to run before removing
      this will receive (data, command, extra, process) parameters - command will be "remove"
      calling process.stop() will stop the current to() or from() call from proceeding
      the function must return the data - see Bind masterFilter parameter for more information
      note: the masterFilter and the bind filter if supplied will run as well before the filter
   removeConnectionData (default true) remove connection data
      this will clear removed data from localStorage for LOCALSTORAGE setting
      a "remove" property will be sent to the server for GET or POST
      with a JSON {id1:["prop1","prop2"], id2:["prop3"]} format of removed items
   call is a callback function after the data is sent and received
   the callback function will receive a result "success" or "error ..." in its parameter
from(call, targets, props, extra, filter) - get bind data from the connection (localStorage or database)
   ** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
   from() will also send to the server a command property with the value "from" (not for localStorage)
   in php this can be received as $_GET["command"] or $_POST["command"] depending on bindType
   call is a callback function after the data is received
      the callback function will receive data in its parameter of the data set
      the properties of the objects are set automatically by bind
   ** the targets and props must have already been bound by bind.add() or obj.bind()
   targets (default null) is an object or id or array of objects or ids to receive the data
   props (default null) properties to receive the data
       or both targets and properties for properties of the targets to receive the data
   extra (default null) extra information to be sent to the server (not localStorage)
      this could be an id or a search term, etc. it will have encodeURI() applied
      this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
   filter (default null) a function to run before sending and after receiving data
      this will receive (data, command, extra, process) parameters
      command will be "fromTo" when sending data to server (requesting data)
      command will be "from" when receiving data from the server
      calling process.stop() will stop the current to() or from() call from proceeding
      the function must return the data - see Bind masterFilter parameter for more information
      note: the masterFilter and the bind filter if supplied will run as well before the filter
to(targets, props, extra, filter, smartDecimals, call) - send bind data to the connection (localStorage or database)
   ** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
   to() will also send to the server a command property with the value "to" (not for localStorage)
   in php this can be received as $_GET["command"] or $_POST["command"] depending on bindType
   ** the targets and props must have already been bound by bind.add() or obj.bind()
   targets (default null) is an object or id or array of objects or ids to send the data
   props (default null) properties to send the data
      or both targets and properties for properties of the targets to send the data
   extra (default null) extra information to be sent to the server (not localStorage)
      this could be an id or a search term, etc. it will have encodeURI() applied
      this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
   filter (default null) a function to run before sending data
      this will receive (data, command, extra) parameters - command will be "to"
      calling process.stop() will stop the current to() or from() call from proceeding
      the function must return the data - see Bind masterFilter parameter for more information
      note: the masterFilter and the bind filter if supplied will run as well before the filter
   smartDecimals (default bind smartDecimals) override the bind smartDecimals
      set to true to send numbers > 1 with 1 decimal or numbers < 1 with 2 decimals
   call is a callback function after the data is sent and received
   the callback function will receive a result in its parameter
   often with a success or error property or string
toUnique(targets, props, extra, filter, smartDecimals, call) - send bind data to the connection along with a unique=true variable
   This is the same as to() but sends a unqiue=true variable
   The unique variable can be tested for on the server
   and an appropriate resonse can be returned
   For instance, return false if the extra variable is being used as a key and it is not unique
   In normal binding, we would want to then update
   but is some cases, we might be trying to add a unqique object to bind to in the future
toLock(targets, props, extra, filter, smartDecimals, call) - like a to() but prevents old data from being stored
   A filter with command=="from" must be used to adjust data - see below for more.
   Use when multiple people are appending to or updating the same JSON data object.
   Do not use if users are simply overwriting all the data - just use a to() for that.
   SCENARIO:
      Imagine that there is a bind to a TextArea() filled with user comments
      Traditionally, each comment would be stored as a record (row) in the database table
      With binding, it is easier to store these as a JSON string in one record
      If two users have the JSON object at the same time and one updates the JSON object,
      the second user will not receive this update so their JSON object will be out of date
      When the second user sends their JSON object it will overwrite the first user's update
      The first user's update will be lost
   SENARIO:
      Imagine that there is a five star system that stores total stars and total voters in a JSON object
      It would be bad for a user to initially collect this data and then twenty minutes later,
      write to this data without getting the latest data.
   SOLUTION:
   toLock() solves this by fetching the latest data just before a user wants to update.
   This data is available in a filter when command=="from".
   The DATA MUST BE MODIFIED in the filter.  Then return the modified data and
   toLock() sends the modified data to the server.

   -- SERVER
   -- ZIM Base should be used in the PHP code - see https://zimjs.com/base/
   -- the database table should have a field called lockid of type varchar
   -- in the $command=="from" the record should be locked as follows:
   -- if ($lockid) $base->setLock("table_name", $id, $lockid);
   -- this assumes you are updating a record with an id - this can adjusted - see ZIM Base.

   ** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
   ** the targets and props must have already been bound by bind.add() or obj.bind()
   targets (default null) is an object or id or array of objects or ids to send the data
   props (default null) properties to send the data
      or both targets and properties for properties of the targets to send the data
   extra (default null) extra information to be sent to the server (not localStorage)
      this could be an id or a search term, etc. it will have encodeURI() applied
      this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
   filter (default null) a function that will run three times during the process
      this will receive (data, command, extra) parameters
      the commands for the three times will be:
      command "fromTo" before the from request for current data is sent and the record is locked
      command "from" current data is received but before bound properties are set with current data
         it is here that new data can be added to or updated in the filter data object
         as the data object is about to be used to update the bound properties
      command "to" before new properties are sent to be stored and the record unlocked
      calling process.stop() will stop the current to() or from() call from proceeding
      the function must return the data - see Bind masterFilter parameter for more information
      note: the masterFilter and the bind filter if supplied will run as well before the filter
   smartDecimals (default bind smartDecimals) override the bind smartDecimals
      set to true to send numbers > 1 with 1 decimal or numbers < 1 with 2 decimals
   call is a callback function after the data is sent and received
      the callback function will receive a result in its parameter
      often with a success or error property or string
stop() - stops current to() or from() from running any further - sets the stopped property to true
   there are also process parameters provided to each filter function
   a safer way of stopping a specific bind is calling stop() on the process - process.stop()
report() - logs to the console a snapshot of the current bind data as Bind {DATA} Report:
   note: normally, the console shows updated data rather than static data - for instance at log time
   report() logs a zim.copy(data) which will not change in the console if the data is updated
toggleReport(state - default null) - turns on or off reports - see Bind report parameter
   or pass in true to show reports or false to hide reports
applyData() - used internally to set object properties based on current bind data
updatefilter(id, func) - update a bind filter at an id - set func to null to remove bind filter
   note: the masterFilter can be adjusted with the masterFilter property
clear() - for LOCALSTORAGE, clear the localStorage[connection]
removeAllBindings(removeConnectionData, call) - removes bind data
   removeConnectionData (default true) remove connection data
      this will clear localStorage for LOCALSTORAGE setting
      or send variable "removeAll" to connection for GET and POST
   call is a callback function after the data is sent and received
   the callback function will receive a result "success" or "error ..." in its parameter

PROPERTIES
type - holds the class name as a String
data - the latest data held by bind - might not be all data depending on the last from() call parameters
connection - the localStorage string or the url for GET or POST
bindType - the type of connection LOCALSTORAGE, GET or POST
master - get or set the master data being sent with to() or from()
masterFilter - get or set the masterFilter function
   note: to update the filter for a bind, noBind() and bind() with a new function
couple - get or set whether the data is coupled as sent and uncoupled as received - see couple parameter
smartDecimals - if true numbers > 1 will have 1 decimal and numbers < 1 will have 2 decimals
default - get or set whether this is the zimDefaultBind
   the zimDefaultBind is what DisplayObject bind() method will use unless bindObj is specified
   see also the Bind setDefault parameter
stopped - setting will stop the current bind process - see stop() and filter process.stop()
   note: this is stopped - not stop - stop() is the method
ajax - if type is POST then this is a reference to the ZIM Ajax object being used
** the following info objects are available but relate to one another
** so adjust with care - would suggest add() and remove() to adjust
bindings - a bind info object in the format
   {id:{obj:object, props:["prop1", "prop2"]}, id2:etc.}
ids - an array of all ids
objIDs - a ZIM Dictionary of objects that holds an array of ids for each object
toIDs - an object of to() properties in the form {prop1:[id1, id2], prop2:[id3]}
fromIDs - an object of from() properties in the form {prop1:[id1, id2], prop2:[id3]}


************************************
[50892] Swipe(obj, distance, duration, isometric, overrideNoSwipe)

Swipe
zim class - extends a createjs.EventDispatcher

DESCRIPTION
Sets up capturing swipes on objects.
Dispatches a "swipe" event on swipe left, right, up, down.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var rect = new Rectangle(200, 200, "blue");
rect.center();
var swipe = new Swipe(rect);
var distance = 100;
swipe.on("swipe", function(e) {
   zog(e.swipeX); // -1, 0, 1  (for left, none and right)
   zog(e.swipeY); // -1, 0, 1  (for up, none and down)

   // move directly:
   // rect.x += distance * e.swipeX;
   // rect.y += distance * e.swipeY;
   // stage.update();

   // or animate
   move({
      target:rect,
      x:rect.x+distance*e.swipeX,
      y:rect.y+distance*e.swipeY,
      time:400,
      ease:"quadOut"
   });
});
stage.update();

PARAMETERS supports DUO - parameters or single object with properties below
obj - the object you want to swipe on
distance - (default 30) the distance in pixels to activate swipe
   might want to pass in a pixel distance based on percentage of stage
duration - (default .08) time in seconds to travel that distance (also see ZIM TIME constant)
   try https://zimjs.com/swipe.html for testing distance and time (speed)
isometric - (default false) set to true to rotate swiping test by 30 degrees
   for swiping on ZIM game Board({isometric:true})
   left-right is from top left to bottom right (cols)
   top-bottom is from top right to bottom left (rows)
overrideNoSwipe - (default false) set to true to override any ZIM noSwipe settings
   for example, a List has zimNoSwipe set on its elements so swiping the list does not swipe a page in Pages

METHODS
enable() - set swipe to active (by default it is)
disable() - set swipe to inactive (sets active to false and does not dispatch)

PROPERTIES
type - holds the class name as a String
distance - the distance needed for swipe to activate
duration - the time from mousedown a swipe is measured for distance
direction - the direction of the last swipe (left, right, up, down or none)
obj - the object that was last swiped
active - Boolean true for dispatching swipes and false for not

EVENTS
dispatches a "swipe" event on every pressup (even if swipe failed and direction is none)
when a swipe event triggers
the Swipe event object has a swipeX and swipeY property that is -1,0, or 1
for left, none, or right OR up, none, down
the event object has an obj property as well for what object was swiped
also dispatches a "swipedown" event for convenience on a mousedown

LEGACY
the Swipe object provides a direction property of "left", "right", "up", or "down"
the Swipe object provides an obj property of what object was swiped on
for instance if e is the event object
then e.target is the Swipe object so use e.target.direction
did not dispatch a custom event due to lack of support in early IE
Swipe also dispatches a direction of "none" if the mouse movement is not a swipe
this can be used to snap back to an original location

MORE: http://zimjs.com/code/bits.html?title=Swipe


************************************
[51072] Swiper(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer, factor, loop, pauseTime)

Swiper
zim class - extends a createjs EventDispatcher

DESCRIPTION
Swiper lets you change a property of any object (with damping) by swiping.
In a sense, it is like an invisible Slider.
You pass in the DisplayObject to swipe on - stage, Container, Bitmap, etc.
You pass in which object holds the property to animate and the property name.
Then Swiper will change this property with damping based on a sensitivity you set.
You can use horizontal or vertical but to do both, you need to make two Swiper objects.
Originally made for controlling 3D objects like rotation and scale
based on swiping a rectangle beneath the 3D object that is the same color as the stage.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle(100, green).center();
// will move circle twice as fast as swipe
var swiper = new Swiper(stage, circle, "x", 2);

var man = new Rectangle(50, 100, brown).center();
// will move man up an down slowly within vertical bounds of stage
var swiper = new Swiper(man, man, "y", .5, false, 0, stageH-man.height);

PARAMETERS supports DUO - parameters or single object with properties below
swipeOn - the DisplayObject to swipe on such as the stage or a Rectangle or Bitmap, etc.
target - the object that holds the property that you want to change
property - the property name as a String to change when swiping
   Note: the Swiper will stop if the property value is less than .5 - this handles motion and rotation well
   but if swiping for scale or alpha, etc. this may stop too soon
   so set the min and max and the swiper will adjust to be one thousandth the difference between the two
sensitivity - (default 1) the change in property is equal to the change in distance times the sensitivity
   set to 2 to change the property twice as fast as the swipe
   set to .5 to change the property half as fast as the swipe
   set to .001 to change the property very little while swiping
   set to -1 to go the opposite way (or -2, -.5, -.001, etc.)
horizontal - default(true) set to false for vertical swiping (y)
min - (default null) if specified, the property value will not go below this number
   set min and max if swipe property is a small range - like for alpha or scale
max - (default null) if specified, the property value will not go above this number
   set min and max if swipe property is a small range - like for alpha or scale
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
integer - (default false) set to true to round the property value
factor - (default 1) is going the same direction and -1 is going in opposite direction
pauseTime - (default .2) time in seconds to call swipepause event (also see ZIM TIME constant)
   triggers if no swipe motion and swipeOn is pressed

METHODS
immediate(val) - set the damping immediately to this value to avoid damping to value
dispose() - remove listeners and Ticker

PROPERTIES
type - holds the class name as a String
target - get or set the target for the property that you are changing
property - get or set the String property name that is being damped
desiredValue - the current value that the swiper is damping towards
sensitivity - get or set the sensitivity - see sensitivity parameter
enabled (default true) - set to false to disable the Swiper and visa versa

EVENTS
dispatches a "swipedown" event when swipe is started
dispatches a "swipemove" event when swipe is moving
dispatches a "swipeup" event when swipe is ended
dispatches a "swipepause" event when finger is not swiping but still down - see pauseTime parameter
dispatches a "swipestop" event when swipeup has happened and value has stopped changing (delay is due to damp)


************************************
[51331] MotionController(target, type, speed, axis, boundary, map, diagonal, damp, flip, orient, constant, firstPerson, turnSpeed, moveThreshold, stickThreshold, container, localBounds, mouseMoveOutside, mousedownIncludes, minPercentSpeed, maxPercentSpeed, dampKeyup, rotate)

MotionController
zim class - extends a createjs EventDispatcher

DESCRIPTION
MotionController lets you control an object (target) in a container (like the stage)
with "mousedown", "mousemove", "keydown", "gamebutton", "gamestick" or "manual" modes (types)
For instance, you can control a player in a game or a butterfly in field
SEE: https://zimjs.com/controller for more examples
SEE: https://zimjs.com/explore/sidescroller.html for keyboard work with Scroller, Sprite, Dynamo, Accelerator
SEE: https://zimjs.com/pen or https://zimjs.com/genpen (complex example)

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var circle = new Circle(40, green).center();
var controller = new MotionController(circle); // circle moves to mouse press position with damping

var rect = new Rectangle(50, 30, green).centerReg();
var controller = new MotionController({
   target:rect,
   type:"keydown",
   diagonal:true,
   damp:.1,
   rotate:true
});

PARAMETERS supports DUO - parameters or single object with properties below
target (default null) - the object you want to control
   example a circle to move across the stage
   can also be an Accelerator() to control percentSpeed
   if you only want data from the MotionController you can leave the target parameter as null (don't include it)
type - (default "mousedown") by default will move to where you press in the container
   set to "mousemove" to have the target follow the mouse movement
   set to "pressmove" to have target jump to mousedown position then follow while pressing
   set to "pressdrag" to have target follow mouse if pressed on and then dragged (dedicated to Shan Ruan)
   set to "keydown" to use keys to control the target (see map parameter)
   set to "gamebutton" to use gamepad buttons to control the target (see map parameter)
   set to "gamestick" to use gamepad stick(s) to control the target (see map parameter)
   set to "swipe" to use swipe to control the target
   set to "follow" to mousedown and hold and use Frame.follow() to keep moving towards mouse or press position
   set to "manual" to set your own with myController.convert() or myController.x and myController.y properties
   set to a ZIM DPad object to use the DPad to control the motion
speed - (default 7) pixels it will move each tick, keypress buttonpress, swipe, etc.
axis - (default "both" or "horizontal" if target is Accelerator) or "horizontal" or "vertical" (see diagonal parameter)
boundary - (default null) a ZIM Boundary object for the boundary
   the registration point of the target will stay within this boundary
   this boundary is relative to the stage (global)
   if the boundary object is a Blob, the target will stay within the Blob
   if a boundary relative to the object's parent is desired then set the localBounds parameter to true
   ignored when target is Accelerator - use minPercentSpeed and maxPercentSpeed instead
map - (default null) an Array with left, right, up, down values (or array of values) as outlined below
   - (default [[65,37], [68,39], [87,38], [83,40]] when type == "keydown") these are ADWS and arrows
   - (default [14, 15, 12, 13] when type == "gamebutton") these are DPAD_LEFT, DPAD_RIGHT, DPAD_UP, DPAD_DOWN on a gamepad
   - (default [14, 15, 7, 6] when type == "gamebutton" and firstPerson == true) these are DPAD_LEFT, DPAD_RIGHT, RT, LT on a gamepad
   - (default [0, 0, 1, 1] when type == "gamestick") these are LSX, LSX, LSY, LSY on a gamepad
   - (default [[0,2], [0,2], [1], [1]] when type == "gamestick" and firstPerson == true) turn with left or right stick X, advance with left stick Y
      use [[0,2], [0,2], [1,3], [1,3]] for both sticks (first stick motion overrides second stick)
      Note: MotionController will only use the 0 and the 2 index for speed as the sticks use -1 to 1 values
      so you could not go only left with one stick and only right with another
      Note: stick values may exceed -1 and 1 on occasion (see also stickThreshold)
diagonal - (default true) set to false to lock movement to horizontal or vertical only
damp - (default .1 or .2 if type is pressmove) the damp value with 1 being no damping and 0 being no movement
flip - (default null) set to "horizontal", "vertical" or "both" to flip the target when in negative direction
   flip will not work if the target starts rotated - so make the target a container and add a rotated object to the cotainer
orient - (default false) set to true to face the direction of motion.  Start direction is 0 which is to the right.
   for example, a default ZIM Triangle points up so use triangle.rot(90)
   before adding to the motionController to make it point to the right
   Note that a target that is rotated will not pay attention to the flip parameter - see flip for solution.
constant - (default false) set to true to remove keyup or gamebutton up and always move in direction last key or button press
firstPerson - (default false) set to true for keydown, gamebutton and gamecontroller to go to first person mode
   in firstPerson, the direction starts facing up and by default up arrow is speed forward and left and right change rotation
   speed will be damped by damp parameter - also, map parameter changes if in firstPerson mode - see map parameter
turnSpeed - (default speed*.4) - the speed for turning in firstPerson mode - will be damped but damp parameter
moveThreshold - (default 5) pixels negative or positive to treat damped motion as stopped
stickThreshold - (default .2) gamepad stick axes values are from -1 to 1 but there is a lot of noise
   so consider within +- stickThreshold as no motion 0
container - (default zimDefauktFrame stage) the Container the target is in - the stage is most likely fine
   if container is specified, it must be on the stage when the MotionController is made
localBounds - (default false) which means the boundary is global - set to true for a boundary in the object parent frame
mouseMoveOutside - (default true) set to false to not allow mouse movement outside the stage to affect motion
mousedownIncludes - (default null) a single object or array of objects (aside from the stage) to activate with mousedown
   For mousedown and pressmove types, the mousedown will activate on the stage only
   The controller assumes everything in the container will not activate the mousedown
   This lets you activate interface elements without moving to them ;-)
   If for instance, a backing is used other than the stage, just pass in the backing to this parameter
   See also the mousedownIncludes property and mousedownExcludes parameter and property
mousedownExcludes - (default null) an array of objects that the mousedown will not work on - overrides mousedownIncludes
minPercentSpeed - (default 0) if target is an Accelerator, the percentSpeed at the left or top of the stage (depending on axis)
minPercentSpeed - (default 100) if target is an Accelerator, the percentSpeed at the right or bottom of the stage (depending on axis)
dampKeyup - (default .3) damping applied to slow down Accelerator with keydown
rotate - (depreciated) the same as orient - kept for backwards compatibility as of ZIM Cat 01

METHODS
pause(state, time) - state defaults to true and pauses the motionController (sets speed to 0)
   set state to false to unpause the motionController (sets speed to speed before pausing)
   set the time (default 0) to the seconds to take while slowing the motionController to 0 speed (also see ZIM TIME constant)
immediate(x, y) - set the damping immediately to this value to avoid damping to value - returns object for chaining
convert(x, y) - for manual mode, pass in x and y and damping and rotation will be calculated
dispose() - remove listeners and Ticker, Swiper and GamePad, where applicable

PROPERTIES
type - holds the class name as a String
target - the target that you are controlling
   target.x and target.y will give you damped x and y
x - the desired x position of the target before damping is applied (use this for manual input - or convert() method)
y - the desired y position of the target before damping is applied (use this for manual input - or convert() method)
dirX - the x direction the player is moving (-1,0,1)
dirY - the y direction the player is moving (-1,0,1)
rotation - read only rotation of the player in degrees
scaleX - read only scaleX of player (to get flip data if only using controller for data)
scaleY - read only scaleY of player (to get flip data if only using controller for data)
dampX - reference to the horizonal Damp object
dampY - reference to the vertical Damp object
dampKeyup - get or set keyup damping for when using an accelerator
paused - read only - true if paused and false if not - must be set with pause() method
speed - the speed setting which will be multiplied by direction
turnSpeed - the turn speed for firstPerson mode
axis - the axis (horizontal, vertical or both);
moving - get Boolean as to whether the target is moving (within moveThreshold)
movingX - get Boolean as to whether the target is moving in x direction (within moveThreshold)
movingY - get Boolean as to whether the target is moving in y direction (within moveThreshold)
boundary - get or set the Boundary object
gamepad - reference to GamePad object if applicable - allows you to use this for more events like jumping, shooting, etc.
moveThreshold - the maximum value (+-) within which movement is considered stopped
stickThreshold - the maximum value (+-) within which the gamepad stick axes values are considered 0
mousedownIncludes - an array of objects that the mousedown will work on - along with the stage
enabled - set to false to disable or true to enable MotionController - can toggle with enabled = !enabled

ALSO: adds a motionController property to target referencing the MotionController object

EVENTS
dispatches a "change" event for changes in direction with dir as property of event object
   that will hold "left", "right", "up", "down", null (no direction)
dispatches a "mousedown" event if type is "mousedown" or "pressmove"
dispatches a "pressing" event if type is "pressmove" - note, this dispatches even if not moving
dispatches a "moving" event if target is moving and "startmoving" and "stopmoving" events


************************************
[52170] GamePad()

GamePad
zim class - extends a createjs EventDispatcher

DESCRIPTION
GamePad connects to Game Controllers as inputs using the HTML navigator.getGamepads API
Dispatches buttondown and buttonup events for the following common buttons:

"A","B","X","Y", (or for Triangle, Circle, Cross and Square)
"LB","RB","LT","RT", (for left bumper, right bumper, left trigger, right trigger)
"BACK","START",
"LS","RS", (for left stick press, right stick press)
"DPAD_UP","DPAD_DOWN","DPAD_LEFT","DPAD_RIGHT"

The event object will have a button property telling which button is pressed using the string values above
Dispatches a "data" event constantly to get axes data for the sticks (and constant data for the buttons)
The event object in this case will have axes and buttons properties
The axes property is an array of four numbers for the left and right stick's x and y properies (-1 to 1)

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var gamepad = new GamePad();
gamepad.on("buttondown", function(e) {
   // only fires once per button press (unlike constant keydown event)
   zog(e.button); // LT for instance for Left trigger
   if (e.button == "LT") {
      zog("left trigger is down");
   }
   zog(e.buttonCode); // 6
   if (e.buttonCode == GamePad.LT) {
      zog("another way to do catch left trigger down");
   }
});

gamepad.on("buttonup", function(e) {
   zog(e.button); // LT for instance for Left trigger
}

gamepad.on("data", function(e) {
   // fires constantly in a requestAnimationFrame
   zog(e.axes[0]); // left stick x or horizontal data from -1 to 1 (lots of decimal noise)
   zog(e.axes[GamePad.LTX]); // another way of accessing left stick x
   zog(e.buttons[9]); // true or false depending on if the START button is pressed
   zog(e.buttons[GamePad.START]); another way to find if the START button is pressed
});

METHODS
dispose() - removes all listeners and cancels requestAnimationFrame

PROPERTIES
type - holds the class name as a String
connected - Boolean true if connected and false if not connected (may need to press key, etc)
currentIndex - get or set the index of the controller
   gives multiple controller support - make two GameController objects and set different indexes
data - object that holds buttons (raw data - slightly different than buttons below) and axes properties
buttons - an array of Booleans as to whether the button is pressed
   the order of the buttons match the order of the constants below
constants: A,B,X,Y,LB,RB,LT,RT,BACK,START,LS,RS,DPAD_UP,DPAD_DOWN,DPAD_LEFT,DPAD_RIGHT
   GamePad.A == 0
   GamePad.B == 1, etc. up to
   GamePad.DPAD_RIGHT == 15
axes - an array of four stick values from -1 to 1
   for left x and y and right x and y values (or horizontal and vertical values)
constants: LSX,LSY,RSX,RSY
   GamePad.LSX == 0
   GamePad.LSY == 1
   GamePad.RSX == 2
   GamePad.RSY == 3

EVENTS
dispatches a "gamepadconnected" and gamepaddisconnected when connected and disconnected
   these have an event object with index and id properties - the index and id may not work in chrome
dispatches a "buttondown" event with button and buttonCode properties
dispatches a "buttonup" event with button and buttonCode properties
dispatches a "data" event with axes and buttons array properties
   these can be handled as outlined in the description and examples


************************************
[52335] Portal(obj, lands)

Portal
zim class - extends a CreateJS EventDispatcher
Dedicated to Stephen Hawkings - may he be portal on!

DESCRIPTION
Turn an object into a portal that lets the user enter the portal to change lands, etc.
The portal works based on mouseover (or press for mobile)
The lands need to be stacked in a Container with the first land at the top.
Portal will pass users throught the lands and loop at the end back to the first land.
Alternatively, if loop is turned to false, Portal will backtrack the user through the lands
Pass the container of lands into the lands parameter - most often you will have two lands, but more are fine too!
Alternatively, the portal can be used without lands - and you can customize what you want to happen with portal events.

The object will be used as a mask to show the next land.
You can set the alpha of the object to any value above .01 to hide the object and show the land (do not use 0)
If your object is a ZIM shape, you can use rgba(0,0,0,.01) as the color and still have an opaque borderColor

SEE: https://zimjs.com/portal/

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
frame.loadAssets(["researchbuilding.jpg", "jungle.jpg"]);
frame.on("complete", function() {
   var lands = new Container(stageW, stageH).addTo(stage);
   var jungle = frame.asset("jungle.jpg")
      .scaleTo({boundObj:lands, type:"biggest"})
      .center(lands);
   var researchBuilding = frame.asset("researchbuilding.jpg")
      .scaleTo({boundObj:lands, type:"biggest"})
      .center(lands);
   var portalObject = new Circle(118, faint, pink, 16, true)
      .addTo(stage)
      .pos(580, 470)
      .animate({obj:{rotation:"360"}, time:70, ease:"linear", loop:true});
   var portal = new Portal(portalObject, lands);
   portal.on("enter", function() {
      // play a sound here!
   });

   // use enabled to turn on and off portal
   timeout(1, function() {portal.enabled = false; portalObject.pauseAnimate(true);});
   timeout(5, function() {portal.enabled = true; portalObject.pauseAnimate(false);});

   stage.update();
}); // assets loaded

PARAMETERS supports DUO - parameters or single object with properties below
obj - the Display Object that will be the portal
lands - (default null) optional container of "lands" or display objects to portal through
   The Display Objects in the lands container (lands) should be on the stage
   The lands are adjusted by Portal so the currentLand is the second child and the nextLand is the first child.
   This is due to how the masking works.
   Inserting new lands or removing lands below an index of lands.numChildren-2 is okay
   Use addTo(lands, index) or removeFrom(lands).
   If you adjust either of the top two lands in the container, this will affect what is see on stage.

METHODS
dispose() - remove the events - the obj and lands will be left as is - manually remove these if needed

PROPERTIES
type - holds the class name as a String
portal - a reference to the portal obj
enabled - Boolean as to whether the portal is active or not
currentLand - get or set the active land if lands is provided
nextLand - get (read only) the next land to go to if lands is provided

EVENTS
dispatches an enter event on mouseover of the portal and an exit event on mouseout


************************************
[52498] Physics(gravity, borders, scroll, frame)

Physics
zim module - must import ZIM physics JavaScript file
SEE: https://zimjs.com/physics/

DESCRIPTION
The Physics class provides a wrapper for the Box2D physics engine.
Both Box2D and the ZIM physics JavaScript files must be imported after ZIM.
Once installed, physics can be turned on for ZIM DisplayObjects such as:
Rectangle, Circle, Triangle, Bitmap, Label, Sprite, Shape, etc.

NOTE: The DisplayObjects used in Physics should have center registration and be on the stage
or in a non-transformed Container at 0,0 on the stage.

Use the DisplayObject's addPhysics() method to add the object to a physics world.
This will also add more methods and properties to the DisplayObject.
The physics world can be set up ahead of time with new Physics()
or if a world is not already created the addPhysics() method will make a default world.
The default world will have a boundary of the frame and gravity of 10 (normal gravity).

SHAPES
By default the physics body shape will be a rectangle that matches the bounding box of the DisplayObject.
However, a Circle will be have a physics circle and a Triangle will have a physics triangle.
A different shape can be passed in to the physics() method if desired.
The expand parameter can be used to make the physics object bigger or smaller than the bounds.

PHYSICS
Objects have impulse(), force(), spin() and torque() methods to push them around and spin them.
impulse() is a one time push like shooting a pool ball
force() is a force over time like gravity or wind and is applied in a Ticker, keydown, etc.
spin() is a one time spin of the object around its center
torque() will rotate the object over time and is applied in a Ticker, keydown, etc.
The physics class has a join() method that can join objects in a variety of physics joints.
The physics class has a drag() method to specify which objects are draggable.
There is a debug() method to see the physics world behind ZIM.
The world can be set up to be bigger than the frame and follow() an object.
Objects are given a control() method to use keyboard keys to move the object.
Contact can be tested for with contact() and contactEnd()
each which receive a callback function that is provided with the other contacting body

BOX2D
http://www.box2dflash.org/docs/2.1a/reference/
http://www.box2dflash.org/docs/2.0.2/manual
Box2D has many other features that can be accessed as well.
Note that the ZIM Physics makes much of this easier
so start with ZIM and use the Box2D docs and manuals for custom requirements.
The Physics class has a world poperty that refers to the Box2D world.
Each ZIM DisplayObject with physics() turned on has a body property
that refers to the Box2D body and a physics property that refers to its Physics object.
See the properties listed below for more information.

SEE: https://zimjs.com/physics/ for examples

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// add a circle to a default Physics world,
// set it draggable and turn debug mode on
var circle = new Circle().center().addPhysics();
circle.physics.drag();
circle.physics.debug();

EXAMPLE
// create a world with no gravity (viewed from top like air-hockey)
var physics = new Physics(0);
var circle = new Circle(50,blue,grey).center().addPhysics({restitution:1.1}); // how bouncy
// make sure to centerReg() any rectangular objects
var rect = new Rectangle(30,400).centerReg().pos(70).addPhysics(false); // static - do not move
var tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10});
physics.drag();
// test to see if circle hits rectangle
// contact callback function receives ZIM object (and physics body as next param)
// a ZIM border will have a type = "Border" and a side = "left", "right", "top", "bottom"
// but it is not really a ZIM Rectangle but just an object literal placeholder
circle.contact(function (obj) {
   if (obj == rect) {
      rect.color = red;
      timeout(.3, function () {
         rect.color = black;
         // circle.noContact(); // could only check once...
      })
   }
});

PARAMETERS - FOR PHYSICS
** supports DUO - parameters or single object with properties below
gravity - (default 10) the gravity force in the downward direction
borders - (default the frame bounds) a ZIM Boundary() object or object literal with x, y, width and height properties
   this makes physics body rectangles around the physics world
   pass in "none" for no borders
   you can remove border bodies afterwards with physics.remove(physics.borderTop)
   and then borderLeft, borderRight and borderBottom
scroll - (default false) set to true to be able to scroll the stage x an y
   This will let you follow a physics object - see follow() method
frame - (default zdf) the zim.Frame object

METHODS - FOR PHYSICS - see also OBJECT METHODS and BODY METHODS below
borders(boundary) - (default frame bounds) a ZIM Boundary() object or an object literal {} with x, y, width and height
   pass in "none" for no borders - also see borders parameter
   will remove old borders bodies before making new
drag(array) - drag all physics objects (with dynamic set to true)
   array - (default null) pass in an array of objects to drag
   Note: physics dragging is applied on the Physics class to not overwrite traditional ZIM drag() on DisplayObjects
noDrag() - stops dragging all physics objects
pause(type) - pauses physics if type is true (default), resumes physics if type is false
join(obj1, obj2, point1, point2, minAngle, maxAngle, type) - creates and returns a physics joint
   obj1 - the first ZIM DisplayObject (with physics turned on) to join together
   obj2 - the second ZIM DisplayObject (with physics turned on) to join together
   point1 - (default center of object) the anchor point of the joint on the first object
   point2 - (default center of object) this is only needed on a distance joint
   minAngle - (default null) the minimum angle the joint can make from its starting angle
   maxAngle - (default null) the maximum angle the joint can make from its starting angle
   type - (default "weld") the type of joint
      set to "distance" to keep the same distance between two object anchors
      set to "revolute" to rotate objects around a fixed point relative to the first object
      set to "weld" to fix the objects together
break(joint) - break a joint created with join()
   to use, store the result of the join() method in a variable and pass that variable in to break()
debug() - activates the debugging
updateDebug() - updates the debug canvas if the frame has been scaled (put in frame resize event)
removeDebug() - removes the debug canvas - you can add it again later (or toggle, etc.)
// FOR BODIES ONLY (legacy - but may not need a visual ZIM object)
makeRectangle(width, height, ... all addPhysics() params) - makes a Box2D body in the shape of a rectangle - see parameters
makeCircle(radius, ... all addPhysics() params) - makes a Box2D body in the shape of a circle - see parameters
makeTriangle(a, b, c, ... all addPhysics() params) - makes a Box2D body in the shape of a triangle
   all three add x, y and rotation properties to body (use at start)
   all three support ZIM DUO single parameter as an object using param names as keys
remove(body) - removes a physics body - use on border bodies, for instance
   this is for physics bodies only - use obj.removePhysics() to remove physics from ZIM DisplayObjects
addMap(body, asset) - sets x, y, rotation of ZIM asset to Box2D body
   this can be automatically done by using the physics() method on the ZIM DisplayObject
removeMap(body) - removes mapping (then probably will want to remove body and removeChild)
   see the removePhysics() method of a ZIM DisplayObject
dispose() - stops the update, removes debug if there - you still need to remove ZIM assets
*** also see zim.Ticker below for methods to add and remove functions from update function

PROPERTIES - FOR PHYSICS - see also OBJECT PROPERTIES and BODY PROPERTIES below
world - the Box2D world that is made
frame - the Frame the physics is operating on
   see: https://zimjs.com/expand/physics.html for example
   note: will have to call drag() again if changing frames
   note: may have to redo borders if frame has different dimensions
scale (read only) scale used in world (constant 30)
step (read only) step used in world (constant 20)
timeStep - 1/step - set to 0 to pause physics but also see paused() method
   could animate this property to slow down or speed up physics
gravity (read only) gravity used in world (whatever parameter was passed)
paused (read only) whether physics has been paused with pause() method
scroll - get or set the scroll of the physics world
   see the Physics scroll parameter and the follow() method of objects
Ticker - gives access to update function to add your own functions:
   physics.Ticker.add(function, after)
      after defaults to true for after world step and force clear
      set after to false to run function before world step
   physics.Ticker.remove(function)
controlObj - the ZIM DisplayObject being controlled by the obj.control() method
followObj - the ZIM DisplayObject being followed by the obj.follow() method
borderTop - the top border physics body of the world if it exists
borderBottom - the bottom border physics body of the world if it exists
borderLeft - the left border physics body of the world if it exists
borderRight - the right border physics body of the world if it exists

METHODS - FOR OBJECTS - also see BODY METHODS below
** the ZIM DisplayObject comes with an addPhyics() method
** for reference, here are the docs for the addPhysics() method
** all the methods below addPhysics are the methods added to the DisplayObject
addPhysics(dynamic, contract, shape, friction, linear, angular, density, restitution, maskBits, categoryBits, physics)
   ** supports DUO - parameters or single object with properties below
   dynamic - (default true) - set to true to not move the physics body (static)
   contract - (default 0) - make the physics body smaller (or bigger with negative) than bounds
   shape - (default object shape) - "rectangle" for any object other than Cirlce, Dial and Triangle
       but can specify a "circle" for a Sprite or Bitmap, for instance - to try and match shape
      custom polygon bodies can also be made with manual Box2D and then use physics.setMap()
      but the only shapes available automatically are "rectangle", "circle", "triangle"
   friction - (default .8) - how sticky will the body act - set to 0 to slide.
   linear - (default .5) - linear damping which slows the movement - set to 0 for no damping
   angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping
   density - (default 1) - the density that can affect what happens with collisions
   restitution - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy
   maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies
      as soon as maskBits is specified, the body will collide only with the categoryBits provided to the maskBits parameter
      1 will collide with bodies that do not have categoryBits specified including the borders
      to test collision with bodies that have categoryBits specified, use the pipe (|) as follows:
      1|2 will also collide with bodies having categoryBits of 2 specified
      so if another body has categoryBits of 4 then the bodies would not collide.
      1|2|4 would also collide with 4 but not bodies with categoryBits of 8, etc.
      2|4 would pass through any bodies without categoryBits of 2 or 4 including the borders
   categoryBits - (default 1) - a collision category - by default, bodies are in category 1
      use with maskBits to say which bodies will collide with which other bodies
      the values are bit fields https://en.wikipedia.org/wiki/Bit_field so can have the following values:
      can be 2, 4, 8, 16, 32, 64, 128, 256, etc. up to 15 powers of 2
   physics - (default zimDefaultPhysics)
removePhysics() - lets you remove the DisplayObject from the physics world
   to add back to the physics world, use the addPhysics() method
impulse(x, y, targetX, targetY) - add a one-time force on the object like a hitting a pool ball
   x - (default 0) the force in the x direction
   y - (default 0) the force in the y direction
   targetX - (default center of object) the x location on the object where the force acts
   targetY - (default center of object) the y location on the object where the force acts
force(x, y, targetX, targetY) - add a force over time on the object like a gravity or wind
   this is applied in a new Ticker or on keydown, etc. many times
   just applying the force once will not do anything - use an impulse() for that
   x - (default 0) the force in the x direction
   y - (default 0) the force in the y direction
   targetX - (default center of object) the x location on the object where the force acts
   targetY - (default center of object) the y location on the object where the force acts
spin(amount) - add a one time turning force to an object
torque(amount) - add a turning force over time on the object
   this is applied in a new Ticker or on keydown, etc. many times
   just applying the torque once will hardly do anything - use an spin() for that
setLinearVelocity(x, y) - set the linear velocity - this overrides current forces
   so might look unnatural as setLinearVelocity(0,0) will stop the object moving
setAngularVelocity(amount) - set the angular velocity - this overrids current forces
   so might look unnatural as setAngularVelocity(0) will stop the object spinning
sleep() - puts object to sleep so no physics calculations are done
wake() - wakes up object from sleep so physics calculations are done
follow(damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, borderOriginal)
   moves stage to to follow ZIM object
   set the scroll parameter of Physics to true
   pass in null for obj to stop following - then can position stage with x and y
   ** supports DUO - parameters or single object with properties below
   damp - (default .05) the damping of the motion of the stage - 1 moves faster, 0 not at all
   dampY - (default damp) can set to damp vertical movement at a separate rate
   leftOffset - (default 0)
   rightOffset - (frame.width)
      the object will try and move to leftOffset when moving right and rightOffset when moving left
      this counters the damping so that the user can see in the direction of motion
      when the object is not being controled it moves to the average between left and right offsets
   upOffSet - (default 0)
   downOffSet - (default frame.height)
      same as offsets above but in the y direction
   offsetDamp - (default .02) the damping for moving the object to the offset
   offsetDampY - (default offsetDamp) - damping for moving the object to the y offset if desired to be different than x
   horizontal - (default true) set to false to not follow horizontally
   vertical - (default true) set to false to not follow vertically
   borderLock - (default true) locks follow to borders if borders are not "none"
   borderOriginal - (default false) set to true to lock follow to original borders even if removed
control(type, speed, speedY, horizontal, vertical) - control object with arrows
   see noControl() to turn off object control
   ** supports DUO - parameters or single object with properties below
   type - (default "both") or set "wasd" or "arrows"
   speed - (default 200) the speed of the object motion
   speedY - (default speed) or set to specify a different y speed than the x speed
   horizontal - (default true) set to false to not control horizontal motion
   vertical - (default true) set to false to not control vertical motion
noControl() - remove control for an object set with control()
contact(call) - run the call function when object's body contacts another body
   the callback function receives two parameters - the ZIM object and the Physics body that the object has hit
   a border will have a type = "Border" and a side = "left", "right", "top", "bottom"
   but it is not really a ZIM Rectangle but just an object literal placeholder
contactEnd(call) - run the call function when object's body ends contacts with another body
   the callback function receives two parameters - the ZIM object and the Physics body that the object has hit
   a border will have a type = "Border" and a side = "left", "right", "top", "bottom"
   but it is not really a ZIM Rectangle but just an object literal placeholder
noContact() - remove contact call
noContactEnd() - remove contactEnd call

PROPERTIES - FOR OBJECTS - see also BODY PROPERTIES below
dynamic - set to true for dynamic and false for static
   there is also kinematic that can be set using the obj.body.SetType(1)
** normal x, y, rotation or pos(), loc(), rot() will not work with physics!
** see the BODY PROPERTIES below for x, y and rotation
** these should really not be set at all in the physics world
** but rather let the forces, etc. work them out
** it is best to set traditional properties before calling physics()

METHODS - FOR BODY (a phsyics engine body)
** the ZIM DisplayObject body property provides access to the following Box2D methods (note, all start with uppercase):
** commonly used methods are handled through ZIM wrapper methods on the DisplayObject
** see http://www.box2dflash.org/docs/2.1a/reference/ for very basic docs
Advance() ApplyForce() ApplyImpulse() ApplyTorque() CreateFixture() CreateFixture2() DestroyFixture()
GetAngle() GetAngularDamping() GetAngularVelocity() GetContactList() GetControllerList() GetDefinition()
GetFixtureList() GetInertia() GetJointList() GetLinearDamping() GetLinearVelocity()
GetLinearVelocityFromLocalPoint() GetLinearVelocityFromWorldPoint() GetLocalCenter() GetLocalPoint(
GetLocalVector() GetMass() GetMassData() GetNext() GetPosition() GetTransform() GetType() GetUserData()
GetWorld() GetWorldCenter() GetWorldPoint() GetWorldVector() IsActive() IsAwake() IsBullet() IsFixedRotation()
IsSleepingAllowed() Merge() ResetMassData() SetActive() SetAngle() SetAngularDamping() SetAngularVelocity()
SetAwake() SetBullet() SetFixedRotation() SetLinearDamping() SetLinearVelocity() SetMassData() SetPosition()
SetPositionAndAngle() SetSleepingAllowed() SetTransform() SetType() SetUserData() ShouldCollide()
Split() SynchronizeFixtures() SynchronizeTransform() b2Body() connectEdges()

PROPERTIES - FOR BODY (a phsyics engine body)
zimObj - the ZIM Object that the body is mapped to
** traditional properties should be set before calling phyics()
** but the following properties are provided
x - the x position of the body - setting this will also position of the ZIM DisplayObject
y - the y position of the body - setting this will also position of the ZIM DisplayObject
rotation - the rotation of the body (degrees) - setting this will also rotate the ZIM DisplayObject

GLOBAL VARIABLES
** Making a new Physics() or using physics() on a ZIM DisplayObject
** gives global shortcut access to the following Box2D classes:
** these all have methods and properties http://www.box2dflash.org/docs/2.1a/reference/
b2Vec2 = Box2D.Common.Math.b2Vec2;
b2BodyDef = Box2D.Dynamics.b2BodyDef;
b2Body = Box2D.Dynamics.b2Body;
b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
b2Fixture = Box2D.Dynamics.b2Fixture;
b2World = Box2D.Dynamics.b2World;
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;
b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef;
b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef;
b2WeldJointDef = Box2D.Dynamics.Joints.b2WeldJointDef;
b2AABB = Box2D.Collision.b2AABB;
b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
b2BuoyancyController = Box2D.Dynamics.Controllers.b2BuoyancyController;
b2ContactListener = Box2D.Dynamics.b2ContactListener;


************************************
[52963] Parallax(layers, damp, auto, stage, startPaused, mouseMoveOutside, clamp)

Parallax
zim class

DESCRIPTION
Takes objects as layers and sets properties based on an input,
for instance, each layer could move a different x based on position of mouseX
or each layer could scale a different amount based on scroll of y.
The types of input are mouseX, mouseY, scrollX, scrollY or custom.
The types of properties to change could be x, y, scaleX, scaleY, rotation, alpha, frameNumber, etc.
Parallax allows scale to be a property which scales scaleX and scaleY together.
Parallax allows frame to be a property and calls gotoAndStop() on a Sprite frame.
Parallax really just manages multiple ProportionDamp objects.
For proper parallax, the objects closer move more than the objects farther back.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// make assets to move around
// these could be pictures, shapes, containers, etc.
var backing = new Rectangle(800, 200, "yellow");
backing.center();
var mid = new Rectangle(400, 200, "green");
mid.center().y += 20;
var front = new Circle(60, "red");
front.center().y += 80;

// make Parallax object - here we move with stage mouseX and mouseY
var parallax = new Parallax([
   {obj:backing, prop:"x", propChange:50}, {obj:backing, prop:"y", propChange:40, input:"mouseY"},
   {obj:mid, prop:"x", propChange:100}, {obj:mid, prop:"y", propChange:80, input:"mouseY"},
   {obj:front, prop:"x", propChange:150}, {obj:front, prop:"y", propChange:100, input:"mouseY"}
], .1);

stage.update();

EXAMPLE
// interact outside a stage
// this example has a small stage in the middle of the HTML page
// see https://zimjs.com/explore/parallax.html
var parallax = new Parallax({mouseMoveOutside:true, startPaused:true});
var colors = series(black, white);
new Rectangle(stageW, stageH).center()
loop(10, function (i, total) {
   var rect = new Rectangle(stageW*(1-i/10), stageH*(1-i/10), colors()).center();
   parallax.addLayer({
      obj:rect,
      input:"mouseX", // default so don't need...
      prop:"x", // default so don't need...
      propChange:40*i,
      inMin:-1000,
      inMax:stageW+1000
   });
   parallax.addLayer({
      obj:rect,
      input:"mouseY",
      prop:"y",
      split:true,
      propChange:40*i,
      inMin:-500,
      inMax:stageH+500
   });
});

// starting the parallax paused so this will unpause when mouse is over stage
stage.on("stagemousemove", function (e) {
   if (stage.mouseInBounds) { // now that state is set to move outside...
      // go immediately to the target input - needs to be done for each layer
      var targets = [];
      loop(10, function(i) {
         targets.push(e.stageX, e.stageY)
      });
      parallax.immediate(targets); // pass in the array
      parallax.pause(false); // start the parallax
      e.remove(); // end event
   }
});

PARAMETERS supports DUO - parameters or single object with properties below
layers - (default null) an array of layer objects, the format as below
   Example: to move an obj 200 px in the x as the window scrolls from 100 to 300 px in the y
      [{obj:obj, prop:"x", propChange:200, input:"scrollY", inMin:100, inMax:300, factor:1, integer:false}, etc.]
   obj - the object whose property is being changed
   prop - the property that is being changed
   propChange - how much you want the property to change
   input - (default mouseX) but can also be mouseY, scrollX, scrollY
   inMin - (default 0) minimum input range
   inMax - (default stageW (for x prop) stageH (for y prop)) maximum input range
   factor - (default 1) set factor to -1 to change in the opposite direction
   integer - (default false) set to true to round the value to an integer
   split - (default true for mouseX, false for others) centers input so half output is on one side and half on the other
   immediate - (default null) set to a value to set property immediately take that value without damping from current property value
   Example 2: a traditional mouse move parallax for one object
      [{obj:obj, prop:"x", propChange:100}, {obj:obj, prop:"y", propChange:50, input:"mouseY"}, etc.]
   you would probably have more objects to follow
   or you can add these one at a time with the p.addLayer({layer object properties});
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
auto - (default true) uses the specified input
   if auto is set to false, you must make your own new Ticker and use the step(input) method
stage - (default the default frame's stage) the stage - specify this if multiple stages
startPaused - (default false) set to true to start parallax paused - set paused(false) to unpause it
mouseMoveOutside - (default true) set to false to not allow mouse movement outside the stage to affect motion
clamp - (default true) set to false to allow range outside min and max
NOTE: ticker and fps parameters have been removed - see zim.Ticker to set

METHODS
addLayer({layer object properties}) - adds a layer - returns object for chaining
removeLayer(index) - removes a layer based on order added - returns object for chaining
step(input) - used when auto is false to send in custom input data - returns object for chaining
immediate([]) - an array of inputs for each layer used to immediately set the target value with no damping - returns object for chaining
pause(state) - pauses or unpauses the parallax - state defaults to true - see also startPaused - returns object for chaining
dispose() - removes listeners

PROPERTIES
type - holds the class name as a String
damp - allows you to dynamically change the damping
paused - read-only boolean whether the parallax is paused - see pause() and startPaused property

MORE: http://zimjs.com/code/bits.html?title=Parallax


************************************
[53257] Flipper(front, back, interactive, time, vertical, flipped, ease, frontPress, backPress, style, group, inherit)

Flipper
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
Takes a ZIM Tile and scrambles its items allowing the items to be dragged to unscramble.
Works on horizontal, vertical or grid versions of Tile (as in one column, one row or multiples)
Dispatches a "complete" event when done.
Can pass in an optional keys array that must match key properties
or an existing property of type keyType.
This allows, for instance, matching duplicate letters or colors.

See: https://zimjs.com/cat/flipper.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE


PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
front - (default frame.makeIcon().sca(2)) a DisplayObject for the front (this will be centerReg() in Flipper)
back - (default new Page(front.width, front.height, dark)) a DisplayObject for the back (this will be centerReg() in Flipper)
interactive - (default false) set to true if items in front or back need to be interactive
   which will add default mousedown flip events on backing if there is a backing (like on a ZIM Page) or on whole side
   if interactive is true then mouseChildren properties of the sides are automatically set to false
time - (default .2) the time in Seconds for flipping (also see ZIM TIME constant)
vertical - (default false) set to true to make card flip vertically
flipped - (default false) start the card flipped
easeRoot - (default "quad") the type of easing like "back", "elastic", "bounce" but just the root - not the "In" or "Out" part
frontPress - (default true) set to false to make the card NOT flip on mousedown of the front
backPress - (default true) set to false to make the card NOT flip on mousedown of the back
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
flip(state, time) - flip the card or specify a true or false for first parameter to either go to flipped or non-flipped
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
flipped - true if showing back or false if showing front
front - the front DisplayObject
   will be given an other property to the back DisplayObject
   will be given an flipper property to the flipper object
back - the back DisplayObject
   will be given an other property to the front DisplayObject
   will be given an flipper property to the flipper object
group - used when the object is made to add STYLE with the group selector (like a CSS class)

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "flip" event when the fipper starts the flip
dispatches a "flipped" event when the fipper ends the flip

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[53437] Scroller(backing, speed, direction, horizontal, gapFix, stage, container, style, group, inherit)

Scroller
zim class extends a createjs.EventDispatcher

DESCRIPTION
Scroller animates a backing either horizontally or vertically (not both).
The Scroller object will create a clone of the backing
and animate and swap the backgrounds when needed.

NOTE: A scroller can be added to a Accelerator object
this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
See https://zimjs.com/zide/
See https://zimjs.com/explore/sidescroller.html (with keys)

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var one = new Rectangle(1200, 400, "red");
frame.makeCircles().center(one);
stage.addChild(one);

var scroller = new Scroller(one);

stage.update();

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
backing - an object to animate (make start and end edges match to be seemless)
speed - (default 1) how fast in pixels per second the animation is going
direction - (default 1) set to -1 for left or down
horizontal - (default true) set to false to animate vertically
   you can adjust the speed and direction properties dynamically
   you cannot adjust the backings and horizontal dynamically
   to change your animation, dispose() of the Scroller object and make a new one
   disposing just removes the ticker - you have to remove the backings
   NOTE: the gapFix and ticker parameters have been removed - see zim.Ticker
gapFix - (default 0) if a thin line appears when changing speed - try setting to 1 or 2
stage - (default background.stage) if the backround is not on the stage then need to pass the stage it will be on
container - (default stage) what bounds are used for wrapping the background

METHODS
pause(state, time) - state defaults to true and pauses the scroller (sets speed to 0)
   set state to false to unpause the scroller (sets speed to speed before pausing)
   set the time (default 0) to the seconds to take while slowing the scroller to 0 speed (also see ZIM TIME constant)
dispose() - get rid of the event listeners - you need to remove the backings (see backing properties)

PROPERTIES
type - holds the class name as a String
backing1 - the original backing passed in
backing2 - the cloned backing made from the original backing
speed - how fast the animation is going in pixels per frame
baseSpeed - the scroller speed when it was first made (or can override)
   used to determine percentage speed for percentSpeed property
percentSpeed - get or set the percentage of the baseSpeed - eg. 100 is at the baseSpeed
   this allows you to animate multiple scrollers relative to one another
   See ScrollerManager class
direction - 0 for no direction, either left (-1) or right (1) if horizontal or up (-1) or down (1) if not horizontal
paused - read only - true if paused and false if not - must be set with pause() method

EVENTS
Dispatches a "pause" event when paused is complete (sometimes a delay to slow to pause)

MORE: http://zimjs.com/code/bits.html?title=Scroller


************************************
[53686] Dynamo(sprite, speed, label, startFrame, endFrame, update, reversible, flip, flipVertical, style, group, inherit)

Dynamo
zim class - extends a createjs EventDispatcher

DESCRIPTION
A Dynamo can run any Sprite animation at varying speeds
You pass in an optional label, or start and end frames to define the animation frames
You can animate a Dynamo using speed or percentSpeed
percentSpeed is handy for animating at speeds relative to other animations and scrollers
You can control Dynamo speeds with mouse position - or in a Parallax object
A Dynamo loops automatically - you can pause it (with optional slowing or optional frame) and unpause it (with optional quickening)
You can also get or set its frame property at which point, it will loop from there (unless paused)
A Dynamo dispatches a "change" event every time the frame changes
and a loop event every time it loops to the start and a paused event when paused

NOTE: A Dynamo requires constant stage.update() to run the Sprite
A Ticker.add(function () { // speed Code}) or just new Ticker.always() will provide the update

NOTE: A Dynamo can be added to a Accelerator object (and then to a MotionController)
this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
See https://zimjs.com/zide/
See https://zimjs.com/explore/sidescroller.html

NOTE: Dynamo is an alternative to a Sprite.run() where you provide a set time for animation
but you can pause a Dynamo and then use run() and then unpause the Dynamo when the run is done
If you are controlling the Dynamo in a new Ticker.add() function,
then make sure to remove() the new Ticker function when the Dynamo is paused

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// *** the Sprite will not run with a Dynamo unless there is a constant stage.update()
// The new Ticker will provide a constant stage.update() so that is good!

// we have a sprite of a guy and it has a "walk" animation
// we can make this run faster and slower with an accelerator:
// we pass in a speed of 30 fps and this becomes the baseSpeed

// do not rely on stage.mouseX - does not work on touchscreen!
var stageX;
stage.on("stagemousemove", function (e) {stageX = e.stageX;});
var dynamo = new Dynamo({sprite:sprite, speed:30, label:"walk", reversible:false});
Ticker.add(function() {
   // the sprite will run at 0 speed when the cursor is at the left of the stage
   // and get faster as the cursor moves to the right
   // at the middle it will be 30 fps and at the right it will be 60 fps
   dynamo.percentSpeed = stageX/stageW*100*2;
}, stage);

Here we apply damping and make the sprite play backwards at the left of half stage
var dynamo = new Dynamo(sprite, 30, "walk");
// do not rely on stage.mouseX - does not work on touchscreen!
var stageX;
stage.on("stagemousemove", function (e) {stageX = e.stageX;});
Ticker.add(function() {
   // will play backwards at 30 fps at left and forwards at 30 fps at right
   // it will stop at half the stage width
   // reversible false means it will not walk backwards
   // but rather it will flip and walk in the left direction when the speed is negative
   dynamo.percentSpeed = stageX/stageW*200 - 100;
}, stage);

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
sprite - the sprite to control
speed - (default 30) the frames per second at which to animate the sprite
label - (default null) the label of the sprite to play (see Sprite)
startFrame - (default 0) the frame to start the animation (ignored if a label is provided)
endFrame - (default sprite.totalFrames) the frame to end the animation (ignored if a label is provided)
update - (default false) set to true to update the stage (only do this if you are not already updating the stage!)
reversible - (default true) will allow percentSpeed to be negative and reverse the animation.  Set to false to use absolute value.
flip - (default true if reversible is false) will flip the scaleX of the sprite if speed is negative and reversible is set to false.
   the pairing of reversible false and flip true will make a Sprite turn and walk the other way if the speed is negaitive
   Note: also see the scaleX property
flipVertical - (default false) flip the Sprite in the vertical if the speed is negative (note also see the scaleY property)

METHODS
pause(state, time, frame) - the way to pause or unpause a Dynamo affecting the sprite animating
   state - (default true) true pauses and setting the state to false will unpause the animation
   time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing
   frame - (default null) which frame to pause on - overrides time (unless you want to do the calculation...)
dispose() - cancels the requestAnimationFrame

PROPERTIES
type - holds the class name as a String
frames - an array of frame numbers the Dynamo is acting on according to label, or startFrame, endFrame
frame - the current frame of the Dynamo - this is sequential relative to frames
   whereas the actual Sprite frame may be different as labels can specify non-consecutive frame numbers
totalFrames - the total frames in frames (may be different than the Sprite's total frames)
percentSpeed - get or set the percentage of the baseSpeed - eg. 100 is a the baseSpeed
   this is what you should animate to speed up and slow down the sprite
   this allows you to set the speed relative to other Sprites and Scrollers
speed - get or set the speed of the sprite in frames per second
baseSpeed - the start speed given in frames per second unless changed with this property
   this affects the percentSpeed so usually it is not adjusted - but it can be
paused - read only - whether the Dynamo is paused or not (by using the pause() method)
scaleX - starts with the original scaleX of the Sprite
   if you flip the sprite and are scaling the Sprite manually, then also set the scaleX of the dynamo to match
scaleY - starts with the original scaleY of the Sprite
   if you flip the sprite and are scaling the Sprite manually, then also set the scaleY of the dynamo to match

EVENTS
dispatches a "change" event when the Dynamo changes frame
dispatches a "loop" event when the Dynamo loops (possibly in reverse)
dispatches a "pause" event when the Dynamo is paused - could be delayed


************************************
[53957] Accelerator(objects)

Accelerator
zim class extends a createjs.EventDispatcher

DESCRIPTION
An Accelerator lets you set percentSpeed properties of multiple objects
such as Scroller and Dynamo (Dynamic Sprite) objects
or an object animating with animate() and the dynamic parameter set
All these have a percentSpeed property
which can be set by the Accelerator to operate the speeds.
They can also be paused and paused over time.
An Accelerator object lets you control these from one place

See: https://zimjs.com/explore/sidescroller.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var rect = new Rectangle()
   .centerReg()
   .animate({props:{rotation:360}, ease:"linear", dynamic:true});
var accel = new Accelerator(rect);
// adjust speed of the animation by mousedown
// 0% at left, 50% in middle, 100% at right, etc.
new MotionController(accel);
// or
new MotionController({target:accel, type:"mousemove", minPercentSpeed:-200, maxPercentSpeed:200});
// will change speed from -200% to 200% as cursor is moved across screen

EXAMPLE
// assuming we have scroller1, scroller2 and a sprite
// each of these would have a speed set so the scene animates nicely
var accelerator = new Accelerator([scroller1, scroller2, sprite]);

// here we increase the speed then decrease the speed of the whole scene:
animate({target:accelerator, obj:{percentSpeed:200}, time:1000, rewind:true, ticker:false});

// here we change the speed of the whole scene based on the x position of the mouse
// at the very left, the speed is -200 percent and at the right the speed is 200 percent
// in the center, the speed is 0 - damping is optional but always looks better!
// do not rely on stage.mouseX - does not work on touchscreen!
var stageX;
stage.on("stagemousemove", function (e) {stageX = e.stageX;});
var damp = new Damp(accelerator.percentSpeed);
Ticker.add(function() {
   var newSpeed = (stageX-stageW/2)/(stageW/2)*100*2;
   accelerator.percentSpeed = damp.convert(newSpeed);
}, stage);

PARAMETERS
objects - (default null) registers Scroller or Dynamo objects the Accelerator
   pass in a single object or an array of multiple objects

METHODS
add(objects) - registers Scroller or Dynamo objects with the Accelerator
   pass in a single object or an array of multiple objects
   returns the Accelerator object for chaining
remove(objects) - unregisters a Scroller or Dynamo
   pass in a single object or an array of multiple objects
   returns the Accelerator object for chaining
pause(state, time, frameNumber) - pause (default) or unpause all the objects added to the Accelerator
   state - (default true) set to false to unpause the objects added to the Accelerator
   time - (default 0) time in milliseconds to slow down to a speed of 0 and pause
      the pause event and paused property will be set after the time has passed
      time is ignored if a frameNumber is provided
   frameNumber - (default null) get sprites to animate to the frameNumber (probably good for one sprite!)
      setting this will make the scene ignore the time parameter above
dispose() - calls dispose() on all the objects

PROPERTIES
type - holds the class name as a String
percentSpeed - adjusts the speed relative to the baseSpeed of each items in the Accelerator - eg. 100 is at the baseSpeed
   this can be dynamically changed to change all speeds relatively
paused - (read only) whether the Accelerator is paused or not - only tracks if the pause() method is used
items - an array of all objects added with add()


************************************
[54133] Emitter(obj, width, height, interval, num, life, fade, shrink, decayTime, decayStart, trace, traceFadeTime, traceShiftX, traceShiftY, angle, force, gravity, wind, layers, animation, random, horizontal, vertical, sink, sinkForce, cache, events, startPaused, pool, poolMin, particles, style, group, inherit)

Emitter
zim class - extends a zim.Container which extends a createjs.Container

DESCRIPTION
A particle emitter - so this makes and animates display objects like shapes or bitmaps
Particle emitters are often used for things like fireworks, fire, smoke, sparks, falling objects, etc.
The Emitter is filled with options so have a look at the doc parameters
Here are some examples:
https://zimjs.com/particles/

NOTE: consider the Emitter as somewhat experimental and pushing the bounds of the canvas
In future versions we will look into adding CreateJS StageGL (WebGL) examples / support (it might work already)
The Emitter certainly can make excellent and workable effects
But it can also bog the browser if pushed to extremes or sometimes if left going
This possibly means there are memory leaks - we have been doing our best to track things down
The Emitter is reporting an expected number of children so any leaks might be beyond ZIM control

NOTE: each particle starts at the center of the container width and height
If the trace parameter is true then the particle is put in a container that does not move
and the particle moves inside that container as the container is cached with the source-over composite operation
The currentParticle property and all the event objects' particle parameter is the moving particle
However, the children of the Emitter, will be slightly different in each case:
when trace is false, the children of the Emitter container are any active particles
when trace is true, the children of the Emitter container are the containers that hold the active particles
If you have moved, scaled or rotated the Emitter or its container,
then you will want to use var point = myEmitter.localToGlobal(particle.x, particle.y)
and get point.x and point.y to find the location of the particle relative to the stage coordinates

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// eg.1 make a bunch of spewing pink circles affected by gravity
var emitter = new zim.Emitter(new Circle(5, pink))
   .centerReg();

// eg.2 use a sink to attract the particles
var sink = new Circle(10, pink).centerReg().alp(0);
// make one of three types of particles and randomize the colors
var particles = new Emitter({
   obj:[
      new Circle(20,null,darker,2),
      new Rectangle(30,30,null,darker,2),
      new Triangle(40,40,40,null,darker,2)
   ],
   random:{color:[blue, green, pink, yellow, orange]},
   interval:.02, // default
   life:5,
   decayTime:1, // default
   sink:sink,
   sinkForce:.5,
   gravity:0,
   force:1,
   cache:mobile(), // default
})
   .centerReg()
   .sca(2);

// eg. 3 use a StageGL Frame and createjs.SpriteSheetBuilder for circles:
var frame = new Frame({scale:"fit", width:1024, height:768, gpu:true});
frame.on("ready", function() {
   var stage = frame.stage;
   // if we pass in just a Circle then we would have to turn on cache
   // and cache on WebGL counts as an image for each one
   // whereas a SpriteSheet just counts as an image for all of the particles
   // so build a SpriteSheet from the Circle
   var builder = new createjs.SpriteSheetBuilder();
   builder.addFrame(new Circle(50, purple));
   builder.build();
   var emitter = new zim.Emitter({
      obj:new Sprite({spriteSheet:builder.spriteSheet}),
      num:10, // ten Sprites made every .02 seconds for about 1000 particles per second
      life:2,
      interval:.02,
      gravity:0,
      force:2
   }).centerReg();
});


// see more examples at https://zimjs.com/particles

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - |ZIM VEE| (default blue, green, pink Circles) a display object to clone - eg. new Circle(10, green);
   can also specify a shape config object with the following properties to draw inside a shape as an alternative to the trace property
   {type:"shape", s:"white", ss:1, f:"red", sd:{noPick:[20, 10]}, offset:3}
   the parameters accept ZIM VEE values except the type and sd as it requires an array as a final value
   type:"shape" is required.  s is setStroke, ss is setStrokeStyle, sd and offset are setStrokeDash in CreateJS
   line thickness (ss) is currently not staying in the latest CDN CreateJS - this is working in the NEXT build
width - (default 300) the width of the Emitter container - used as cache bounds for trace if trace is true
height - (default 300) the height of the Emitter container - used as cache bounds for trace if trace is true
   these dimensions will affect performance if the trace parameter is true so use carefully
   also see the traceShiftX and traceShiftY to specify the caching rectangle position
interval - |ZIM VEE| (default 300) the time in ms between imitting particles
num - |ZIM VEE| (default 1) the number of particles emitted each interval
life - (default 1) the time in seconds the particle will exist (also see ZIM TIME constant - same for all times)
fade - (default true) Boolean to fade the particle (alpha 0) - set to false to not fade out the particle over the decayTime
shrink - (default true unless trace is true) Boolean to shrink the particle (scale 0) - set to false to not shrink the particle over the decayTime
decayTime - (default 1) time in seconds to fade and / or shrink the particle - ends animation at the life time unless decayStart is set
decayStart - (default null) time in seconds to start the decayTime otherwise decay (fade and shrink) ends at the end of life time
trace - (default false) Boolean set to true to leave trails by caching each particle with source-over composite operation
traceFadeTime - (default decayTime) time in ms to fade out traced particle to 0 alpha at the end of the particle life time
traceShiftX - (default 0) x amount to shift the cache rectangle for the traced particle
traceShiftY - (default 0) y amount to shift the cache rectangle for the traced particle
   the particle starts centered in the width and height of the Emitter container
   if you have particles falling - for instance fireworks, you can shift the cache rectangle down to see more trails
   and then place the Emitter up higher on the stage
angle - |ZIM VEE| (default {min:0, max:360}) the angle the particle will emit (0 is along the positive x axis)
   if you want to shoot particles in one direction just use angle = 20
   if you want something shooting up on either side of the y axis you can use:
   angle = {min:-90-20, max:-90+20}; this may be easier to visualize
   if you want to emit at 45 or 90 then use [45, 90]
force - |ZIM VEE| (default 5) the force for the emitter to shoot the partice at an angle
   if you want to shoot a variety use force = {min:2, max:10} etc.
gravity - (default 9.8) the force of gravity going down - can be negative to make particles float up
wind - (default 0) a force you can apply in the horizontal direction either negaitive for left or positive for right
layers - (default "top") where to place the current particle being emitted - values are "top", "bottom", "random"
animation - |ZIM VEE| (default null) a zim animate config object to apply to the particle
   This is the whole zim DUO object to pass to animate - including a props parameter that holds the animation object
random - (default null) an object holding properties to animate, each property holding a ZIM VEE Value object for Pick.choose() to pick from per particle
   eg: {color:["red", "white", "green"], scale:{min:1, max:2}} // scale is a convienence property for both scaleX and scaleY
horizontal - (default false) start the particles across the emitter's width at the top of the emitter (unless vertical is set to true)
vertical - (default false) start the particles across the emitter's height at the left of the emitter (unless horizontal is set to true)
sink - (default null) an object with x and y properties (can be a display object) that the particles will be pulled to (or pushed if sinkForce is negative)
sinkForce - (default 10 if sink) the force particles are moved towards the sink location
cache - (default mobile() or false if gpu) Boolean to cache each particle - helpful if complex shape or text (do not use for Bitmap or SpriteSheet)
events - (default false) Boolean - set to true to receive events from Emitter
startPaused - (default false) Boolean - set to true to start the Emitter in the paused state
pool - (default true) Boolean if true, makes as many particles as it needs before recycling particles
   this improves performance as new particles do not need to be made and old ones remove
   see also the clearPool() method to start collecting a new type of particle, etc.
poolMin - (default 0) a minimum number of pooled particles before new particles are no longer made (if pool is true)
   eg. setting poolMin to 100 would make 100 particles and then start reusing these particles for performance
   if you set pool to true and do not specify a poolMin then ZIM will calculate the needed number to properly recycle
   but you can override this number if you want a larger pool for more selection
particles - (default null) a container for the particles
   by default, the Emitter will make a Container and place it beneath itself when added to the stage.
   by separating the particles from the emitter, it allows the emitter to be moved without all the particles moving

METHODS
spurt(num, time, restart) - shoots particles (usually would pause Emitter before doing this)
   supports ZIM DUO config object
   num - |ZIM VEE| (default null) number of particles to emit according to Emitter settings
   time - |ZIM VEE| (default null) alternatively, time in seconds to emit particles according to Emitter settings
      if both num and time are provided the faster one will stop the emitting
      dispatches three different spurt events - see events
   restart (default false) set to true to restart the particles when spurted (removes old particles)
pauseEmitter(state, restart, freeze, immediate) - pause or unpause the Emitter
   state (default true) will pause the emitter or set to false to unpause the emitter
      this will set the read only paused property to true or false accordingly
   restart (default false) set to true to restart the particles when unpaused
      otherwise continues the particles from where they were
   freeze (default false) set to true to freeze the particles
      othewise pause just stops emitting and existing particles continue their life
   immediate (default false) set to true to emit right away after unpausing
      otherwise just emits on normal schedule
clearPool() - clear the pool of particles - use if you change the obj or its properties (no effect if pool parameter is false)
resize(width, height) - resizes the Emitter container and any cache bounds for new particles
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
   all current properties will be cloned except for startPaused for which the initial parameter value is cloned
dispose() - removes event listeners from Window and content and removes any new Ticker functions

ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO: See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
** All the PARAMETERS are available as PROPERTIES to get and set (except for the force and cache parameters - and width and height act differently)
emitterForce - get and set force - do not use force property - due to conflict with physics force
emitterPaused - read only Boolean as to whether the Emitter is paused or not - see also pauseEmitter() method
particles - a reference to the Container that holds the particles
   particles has noMouse() set to if interaction is desired use emitter.particles.mouse()
currentParticle - the latest particle emitted
   if trace is false then this is myEmitter.getChildAt(myEmitter.numChildren-1);
   if trace is true then this is myEmitter.getChildAt(myEmitter.numChildren-1).getChildAt(0);
particlesEmitted - the number of particles that have been made / emitted
spurtNum - total number of particles to spurt (when spurt() is called)
spurtCount - number of particles spurted so far (when spurt() is called)
zimInterval - the interval used to create particles
zimTicker - the ticker used to animate particles
** CHILD PROPERTIES - each child has a particle (if trace is true) or is a particle (if trace is false)
particle -  a reference to the particle for the child (could be to itself)
particleNormal - true or false if particle is not decaying or fizzing
particleDecaying - true or false if decaying - particle is currently animating to either scale 0 or alpha 0
particleFizzing - true or false if fizzing - trace container is currently animating to alpha 0
** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
** these will not remake the cache bounds, etc. - they just scale the Emitter - see resize()
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width.  This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height.  This sets only the height and may change the aspect ratio of the object
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

ALSO: See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
** the below events all have a particle property that gives access to the particle (not the particle container for a traced particle - ask for the particle.parent for that)
dispatches a "spurted" event once the spurt() method is finished emitting particles
dispatches a "spurtdecayed" event once the last spurted particle decays (fade / shrink)
dispatches a "spurtfizzed" event once the last spurted particle's life ends
** the below events only trigger if the events parameter is set to true (default is false for slight performance edge)
dispatches an "emitted" event when a particle is made
dispatches a "decayed" event when the particle's decayStart + decayTime ms has elapsed
dispatches a "fizzed" event when the particle's life ms has elapsed

ALSO: See the CreateJS Easel Docs for Container events (plus a ZIM pressdown - same as mousedown) such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover


************************************
[54937] Generator(color, strokeColor, strokeWidth, draw, stamp, setup, maxCount, boundary, drawCount, drawPause, drawSpacebarPause, startX, startY, cache, recordLinePoints, frame, style, group, inherit)

Generator
zim class - extends a ZIM Container which extends a CreateJS Container

DESCRIPTION
Used for dynamic drawing such as generative art or visualizations.
Generator provides a set of RELATIVE drawing commands
that primarily match the traditional absolute drawing commands for shapes on the canvas.
Rather than add all these commands to the Shape class they have been added to the Generator class.
This optimizes the Shape class which is used for all components and ZIM shapes.

HOW IT WORKS
The arrangement is similar to Processing (or P5js for a JS version).
There is one Shape that gets drawn into and code can be put in three different callback functions:

setup - happens once at the start (similar to Processing)
draw - happens at the framerate (similar to Processing)
stamp - loops all at once (different that Processing?)

SETUP
The optional setup runs once before the draw or stamp functions run.
This function will not be used as much as in Processing because ZIM has a Frame().
Also, things can be set up before the Generator code is called.
And the Generator class has parameters for color, strokeColor and strokeWidth.
Generator defaults to start at the center of the stage - so in the setup,
translate(-stageW/2, -stageH/2) could be used to start at the top left.

DRAW
The optional draw function runs at the framerate and receives count and total parameters.
This will have the affect of animating the drawing as it "processes" the code
By default, this will pause and unpause when the screen or the spacebar is pressed.

STAMP
The optional stamp function runs inside a loop and produces the final drawing at once.
The function receives count and total parameters.
You can switch between the stamp and draw function with the same code inside.
The end product will be the same.

RELATIVE
The draw and stamp work the same way, running the code inside for each count.
The magic happens because the commands are relative.
Even g.rectangle().rotate(5) is beautiful.
Each new rectangle after the first will be rotated 5 degrees
In absolute space, the corner points would have to be calculated with sine and cosine - ew.
Generator does the matrix calculations to avoid this.
Each new command starts where the last command left off.
But each command also has an x and y value to translate if desired.
This x and y value is relative to the current rotation and scale.
Often, the x and y is left at 0, 0.
We considered removing them as parameters because translate() can be called
but we left them in to be the same as Processing.

COUNT, PAUSE AND STEP
The count parameter of draw or stamp suplies the current count.
This provides ways to modify commands.
for instance circle(0,0,count*10); will draw circles that get bigger.
This can also be used to set the rate of change - often by using smaller factors such as count*.01, etc.
Count can also be used to pause or do something different at certain places in the drawing
Pause also has an optional number of seconds to pause or a ZIM interval() and pause(false) can be used.
Generator has a count property which can be set to go forward or back to a certain count.
Step calls a step - usually used when pause is true - an interval could then be used for steps

PUSH AND POP
There is also push() and pop() as in Processing.
These remember the position, rotation, scale and skew when push() is used
and then return the generator to these settings when pop() is used.
Multiple pushes can be set and then popped back.
These can be used to make fractals with recursive branching.

SEE: https://zimjs.com/cat/generator.html

NOTE: The drawing uses matrix transforms on Shape which takes the shape out of traditional positioning.
A drawing property is available on the Generator that points to a Container that holds the drawing.
This container can be moved, dragged, etc. so use this to manipulate the drawing in a traditional manner.
The generator has a shape property which can be used to access the raw shape for absolute drawing for instance.

NOTE: The drawing container is automatically added to the default stage as the Generator is created

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// Draw a line from the center of the stage to 100 pixels to the right
// usually we draw inside a draw or stamp function
var g = new Generator();
g.line(0,0,100,0);

EXAMPLE
// draw an octagon - stop at 8 lines
var g = new Generator({draw:gen});
function gen(count) {
   g.line(0,0,100,0).rotate(45);
   if (count == 8) g.stop();
}

// or use maxCount:
var g = new Generator({draw:gen, maxCount:8});
function gen(count) {
   g.line(0,0,100,0).rotate(45);
}

// make a Blob with points of drawing
// could set interactive:false on Blob for just filled in picture
// lines will not fill in Generator
// shapes fill and curves fill themselves but not collectively
var g = new Generator({stamp:gen, maxCount:8});
var points = [];
function gen(count) {
points.push(g.currentPoint);
   g.line(0,0,100,0).rotate(45);
}
g.on("complete", makeBlob);
function makeBlob() {
new Blob({points:points, color:red}).addTo();
g.drawing.removeFrom()
stage.update();
}

EXAMPLE
// draw a fan of lines always going back to 0,0
var g = new Generator({draw:gen, maxCount:360/5});
function gen(count) {
   g.line(0,0,200,0).translate(-200).rotate(5);
}

// or stamp the fan of lines:
var g = new Generator({stamp:gen, maxCount:8});
function gen(count) {
   g.line(0,0,100,0).rotate(45);
}

// make random color lines with a hole in the middle and draggable
var g = new Generator({stamp:gen, strokeColor:[red,pink,purple], strokeWidth:2, maxCount:360/5});
function gen(count) {
   g.line(50,0,200,0).translate(-250).rotate(5);
}
g.drawing.drag();

// make a series of color lines with a hole in the middle and draggable
// using push() and pop() to not think about how to reset!
// so... draw a line, go back to how it was before drawing, rotate, then draw a line, etc.
// each time it draws the line it chooses the next ZIM VEE value in the series
var g = new Generator({stamp:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
   g.push().line(50,0,200,0).pop().rotate(5);
}

// add a circle to the end
var g = new Generator({stamp:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
   g.push().line(50,0,200,0).circle(15,0,5).pop().rotate(5);
}

// removing circle stroke and adding fill the same color as the stroke
// note, do not remove the stroke first or the currentColor will be null
// currentColor is the applied color from the ZIM VEE value
var g = new Generator({draw:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
   g.push()
      .line(50,0,200,0)
      .fill(g.currentStrokeColor)
      .noStroke()
      .circle(15,0,5)
    .pop()
    .rotate(5);
}

EXAMPLE
// using ZIM VEE series to adjust stroke color and width
var g = new Generator({draw:gen, maxCount:360/2, strokeColor:green});
var s = series({min:1, max:4}).step(.1).bounce(); // stroke sizes
var c = series(blue,pink,green).every(12); // color change
function gen(count, total, g) {
   g
      .rectangle(0,0,200,200)
      .stroke(g.currentStrokeColor.toColor(c,.3), s) // blend color change
      .rotate(2);
}

EXAMPLE
// Clone example
var g1 = new Generator({draw:gen, maxCount:360/10});
function gen(count, total, g) {
   // note: we have three generators calling this function
   // so collect and use the generator g that is calling gen()
   g.rectangle(0,0,100,100).rotate(10);
}
var g2 = g1.clone();
g2.drawing.mov(100);
var g3 = g1.clone();
g3.drawing.mov(-100);

EXAMPLE
// draw rectangles that get smaller and translate like a starfish
var g = new Generator({
   draw:gen,
   color:series(yellow,green,orange),
   strokeColor:white,
   strokeWidth:3,
   maxCount:100/.3
});
function gen(count, total) {
   var mod = count*.3
    g.rectangle(mod, mod, 100-mod, 100-mod, 0).rotate(30);
}

EXAMPLE
// common processing tree
var g = new Generator({
   strokeColor:green,
   strokeWidth:2,
   setup:gen
});
function gen() {
   var length = 150;
   g.translate(0, stageH/2);
   branch(150, 5);
   // recursive function - not stamp or draw
   function branch(length, thickness) {
      g.line(0,0,0,-length);
      if (length > 4) {
         g.push().rotate(30);
         branch(length*.75);
         g.pop().push().rotate(-30);
         branch(length*.75);
         g.pop();
      }
   }
}

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)

color - |ZIM VEE| (default null) the fill color of shapes and individual curves (lines do not fill like in normal shape drawing)
strokeColor - |ZIM VEE| (default white) the color of the stroke or shape border
strokeWidth - |ZIM VEE| (default 1) the thickness of the stroke or shape border
draw - (default null) an optional function to call within an internal ZIM new Ticker that runs at the frame rate
   draw will receive count, maxCount and generator parameters
   will result in the same drawing as the stamp function but animates the drawing
stamp - (default null) an optional function to call within an internal ZIM loop
   stamp will receive count, maxCount and generator parameters
   will result in the same drawing as the draw function but happens right away (or within syncronous processing time)
setup - (default null) an optional function to call before the stamp or call functions run
   setup will receive count (0), maxCount and generator parameters
maxCount - (default 1000) the maximum number of times the stamp or draw functions will run
boundary - (default null) the drawing size if cache is true
drawCount - (default 1) the count per draw.  Set to a higher number to slow down the drawing (2 is twice as long)
drawPause - (default true) set to false to not pause the draw function on stage mousedown
   will dispatch "generatorpaused" and "generatorunpaused" events
   note the pause() method as well to handle pauses manually
drawSpacebarPause - (default true) set to false to not pause the draw function when the spacebar key is pressed
   will dispatch "generatorpaused" and "generatorunpaused" events
   note the pause() method as well to handle pauses manually
startX - (default stage.width/2) set to 0 to start at stage left, etc.
startY - (default stage.height/2) set to 0 to start at stage top, etc.
cache - (default false) set to true to cache image and boost performance - especially when dragging a complex drawing afterwards
   if you notice performance issues then set cache to true
   setting cache to true will be a little blurry
recordLinePoints - (default false) set to true to record the end points of line() commands
   set to "nonzero" to also record non-zero start points
   set to "zero" to also record 0,0 start points (and non-zero start points (and end points)))
   see the linePoints property to retrieve the array as [[x,y], [x,y], [x,y], etc.]
frame - (default zimDefaultFrame) change to another frame if not drawing in the zimDefaultFrame
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
** ALL PARAMETER BELOW SUPPORT |ZIM VEE|
** These are relative shape commands similar to traditional shape commands (see Shape on Docs)
** Note that the curves also include an x and y as the first two parameters
fill(color) - sets the color or no fill if left empty or null is passed in
   also see lighten(), darken(), toColor()
stroke(color, size) - sets the stroke color and / or stroke size
   leaving one empty or null will not adjust that parameter - see noStroke() to remove stroke
   also see lighten(), darken(), toColor(), thicken()
noStroke() - turn the stroke off
translate(x, y) - move the location relatively
   if the shape is rotated then translate(100) will move along the rotation angle
rotate(degrees) - relatively rotate future drawing by this angle - does not affect previously drawn shapes
scale(x, y) - relatively scale future drawing by this amount - does not affect previously drawn shapes
   leaving y out will scale both x and y the same
skew(x, y) - relatively skew future drawing by this angle - does not affect previously drawn shapes
   leaving y out will NOT skew the y
line(x1, y1, x2, y2) - draw a line from the start x and y to the end x and y
   this will be oriented to the current rotation and scaled and skewed to the current scale and skew settings
arc(x, y, radius, startAngle, endAngle, anticlockwise) - an arc that will be adjusted to current transform settings
curve(x1, y1, cpx, cpy, x2, y2) - a quadratic curve that will be adjusted to current transform settings
   x1 and y1 - the start point - note the Shape qt() or CreateJS graphics.curveTo() do not include this start point
   cpx and cpy - control point adjusted relatively to current transform settings
   x2 and y2 - the final point adjusted relatively to current transform settings
bezier(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2) - a cubic bezier curve that will be adjusted to current transform settings
   x1 and y1 - the start point - note the Shape bt() or CreateJS graphics.bezierTo() do not include this start point
   cp1x and cp1y - control point for the first point's Bezier handle adjusted relatively to current transform settings
   cp2x and cp2y - control point for the second point's Bezier handle adjusted relatively to current transform settings
   x2 and y2 - the final point adjusted relatively to current transform settings
rectangle(x, y, w, h, a, b, c, d) - a rectangle if x, y, w, h are provided
   a, b, c, d are for rounding the corners
      if only a is provided then all corners will round to a
      otherwise they start at the top left and go clockwise to bottom left
      a: topLeft, b:topRight, c:bottomRight, d:bottomLeft
circle(x, y, radius, percent, percentClose) - a circle
   with percent like the ZIM Circle() - to make a semicircle
   and percentClose (default true) to close the path of the semicircle
oval(x, y, w, h) - an oval specified by with width and height which will be adjusted relative to current transform settings
poly(x, y, radius, sides, pointSize, angle) - a polygon like the ZIM Poly() but with x,y and angle parameter
   radius - (default 50) the radius (from the center to the edge or half the diameter) ;-)
   sides - (default 5) the number of sides
   pointSize - (default 0) a factor that will indent or outdent the sides to form stars
      0 is no indent - 1 is a complete indent - which will have no fill and if there is a border will look like a stick figure
      beyond 1 is cool - it overlaps on itself and makes multiple patterns
   angle - (default 0) along the relative x axis - different than Poly() which rotates negaitve 90 to start
** ALL PARAMETERS ABOVE SUPPORT |ZIM VEE|
push() - remember the current transform properties (x,y,rotation,scale,skew) and color and stroke properties
   see pop() to return to these remembered property settings
   note push() can be used any number of times before pop() is used, effectively nesting remembered states
pop() - return to the remembered transform properties (x,y,rotation,scale,skew) and color and stroke properties
   see push() to set remembered properties
   note push() can be used any number of times before pop() is used, effectively nesting remembered states
step() - advance the draw function one time - good for when the generator is paused to then step through calculations
blit() - write to drawing cache - if cache is true - done automatically if using draw, stamp or setup
pause(state, time) - pause or unpause the generator with optional time in seconds (see ZIM TIME constant)
   will dispatch a "paused" and "unpaused" event - different than the "generatorpaused" and "generatorunpaused" for stage mousedown and spacebar key
stop() - stops the Generator at which point it cannot be started - just make a new one
clone() - create another generator with the same settings
   The clone will call the same setup, draw and stamp functions,
   so use the generator parameter in these functions to draw into the specific generator drawings
   eg. draw(count, total, g) {g.rectangle(0,0,100,100).rotate(5)}
   To make a copy of generator output, clone() the generator.drawing
dispose() - stops and disposes the Generator - the drawing may still need to be removed

ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
** THESE NEED to be used on the Generator drawing property
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
drawing - reference to the ZIM Container that holds the drawing shape
   automatically added to the stage when new Generator() is made
   ** use this for applying ZIM methods and properties to the drawing
shape - reference to the ZIM Shape object being draw into
   ** because of the matrix being used, this does not respond to position methods or properties
   see the drawing property above to drag, animate, loc, etc.
count - the current count in the draw or stamp loop
maxCount - the number the draw or stamp loop will loop to
drawCount - how many counts go by until the draw function runs - default is 1 for each count
   setting to 2 will draw twice as slow, 10 will draw ten times as slow, etc.
color - |ZIM VEE| get the current color - will set too but not until the next draw - use the fill() method
   this could be a ZIM VEE value - also see currentColor for the color actually being applied (after ZIM VEE is picked)
currentColor - the actual color being applied (after ZIM VEE is picked)
strokeColor - |ZIM VEE| get the current strokeColor - will set too but not until the next draw - use the stroke() method
   this could be a ZIM VEE value - also see currentStrokeColor for the color actually being applied (after ZIM VEE is picked)
currentStrokeColor - the actual stroke color being applied (after ZIM VEE is picked)
strokeWidth - |ZIM VEE| get the current strokeWidth - will set too but not until the next draw - use the stroke() method
   this could be a ZIM VEE value - also see currentStrokeWidth for the color actually being applied (after ZIM VEE is picked)
currentStrokeWidth - the actual stroke width being applied (after ZIM VEE is picked)
currentX - get the current x value
currentY - get the current y value
linePoints - if the recordLinePoints parameter is true then this is an array of [x,y] values
paused - read only as to the pause state of the Generator - see also pause() method
stack - current array of push() remembered transforms stored as a matrix
colorStrokeStack - current array of push() remembered color, strokeColor, strokeWidth, currentColor, currentStrokeColor and currentStrokeWidth properties

ALSO See the CreateJS Easel Docs for Container properties, such as:
** THESE NEED to be used on the Generator drawing property
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "drawing" event each time the draw function is called - not used for stamp function
dispatches a "complete" event when maxCount has been reached - not dispatched if stop() is called
dispatches "paused" and "unpaused" events when pause() is used (and time of time parameter has finished)
dispatches "generatorpaused" and "generatorunpaused" events when stage mousedown or space key is pressed
and drawpause or drawSpacebarPause parameters are true


************************************
[55989] Pen(size, color, penType, damp, spread, borderColor, borderWidth, end, paper, nib, cache, ctrlKey, cropScale, undo, undoKeys, draggable, onTop, deleteable, doubleClickDelete, immediateStop, lineAlpha, lineBlendMode, frame, style, group, inherit)

Pen
zim class - extends a ZIM Container which extends a CreateJS Container

DESCRIPTION
Handles dynamic drawing with a set of different penTypes
You can drag() or gesture() pen, move it with a MotionController(),
animate() it, animate() it along a Squiggle or Blob path, etc.

Holding down the CTRL key will allow the pen to move without drawing

SEE: https://zimjs.com/pen.html

NOTE: the pen adds either a Bitmap (if cache is true) or a Shape (if cache is false)
to the container the pen is added to.  This is layered directly under the pen.

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var pen = new Pen({penType:"kitetail", nib:new Circle(10,pink)}).center().drag();

EXAMPLE
// use a MotionController
var pen = new Pen().center();
var motionController = new MotionController({
   target:pen,
   type:"pressmove",
   speed:60,
   damp:.5,
   mouseMoveOutside:true
});

// if later, animation along a path is desired
// the motionController needs to be disabled
// and the pen set to write
motionController.enabled = false;
pen.write = true;

// position the pen at the start of the path
// and set its damping to start there too...
pen.loc(path.pointControls[0]);
pen.immediate(pen.x, pen.y);

// if animating along a path more than once
// make sure the percentComplete is reset to 0
// (this is a tricky one!)
pen.animate({
   set:{percentComplete:0},
   props:{path:new Squiggle().center()},
   time:1000,
   call:function () {
      // to use the motionController again:
      pen.write = false;
      motionController.enabled = true;
   }
})

PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - |ZIM VEE| (default depends on penType) the pen size
color - |ZIM VEE| (default depends on penType) the pen size
damp - (default .1) the damping for the pen - 0 is no movement, 1 is no damping
   usually, set to 1 or false for following animate paths
penType - (default "line") a String of "line","kitetail","barbwire","grass","hair","city", or "splatter"
spread - |ZIM VEE| (default depends on penType) some pens use this like the splatter to determine how much the circles spread
borderColor - |ZIM VEE| (default depends on penType) a line down the middle of the pen drawing
borderWidth - |ZIM VEE| (default depends on penType) the thickness of a line down the middle of the pen drawing
end - (default "butt") the cap type as a String "butt", "square", "round" - from CreateJS
paper - (default null) a ZIM Container to hold the drawing - or Pen will make a Container to use
   see also the paper property to change containers - for layers in a drawing for instance
nib - (default null) an optional DisplayObject that will be used as the pen - would suggest centerReg({add:false}) this
cache - (default true) caches drawing in a Bitmap (improves performance) - set to false to not cache - the paper property points to the Bitmap or the Shape depending
ctrlKey - (default true) turns off drawing when CTRL key is being pressed. Set to false to not turn off drawing when the CTRL key is pressed
cropScale - (default 1) number times stage dimensions image will be cropped
   if dragging or shifting shape and paper, may want to set to 3 times the stage size for instance
   NOTE: keep this at 1 for iOS to avoid oversize canvas issues.  Set to cropScale:mobile()=="ios"?1:3
undo - (default 0) number of undo levels for example 30
   undo will be automatically recorded when each drawing stops
   undo will also be recorded if dragging a segment(s) with SHIFT or CTRL SHIFT or deleting a segment with delete()
undoKeys - (default true - if undo is > 0) use CTRL Z for undo and CTRL Y or CTRL SHIFT Z for redo - set to false to handle manually
draggable - (default true) set to false to not be able to drag segments or SHIFT drag all
onTop - (default true) - when dragging, does the selected line come to the top in the current paper
deleteable - (default true) - set to false to not be able to delete segments with CTRL click or all segments with CTRL SHIFT click
doubleClickDelete - (default true) - set to false to not use dblclick to delete segment
immediateStop - (default true) - if pressup is used (drag or MotionController) then stop drawing immediately when press is up
   set to false to keep drawing until damping is finished.
lineAlpha - (default 1) the alpha for each line drawn
lineBlendMode - (default "normal") the blendMode for each line drawn () - such as "difference", "multiply", etc. same as CreateJS compositeOperation
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly

METHODS
setPen(newPen) - sets the pen and resets the default properties for the pen
immediate(x, y) - set the pen to this location without damping
clear() - clears the drawing
stop() - stops drawing and saves segment - may start drawing right away again if pen is moving...
   see infinite property to make sure drawing continues as one segment until stop() is called
   infinite is automatically set to true when animating pen along a path
   and stop() is called when animating along a path is complete (or paused)
saveState(obj, startLayer, endLayer) - record an undo state for the paper or a line segment if it is transformed - for an undo()
   use after manually resizing, positioning, rotating, setting alpha and skewing the paper or a line segment
   saveState() is not needed for dragging a line segment with SHIFT, CTRL SHIFT or if dragState or dragAllState is true
   startLayer and endLayer are for if the layer level of the shape changes
undo() - go back one undo state (called automatically by CTRL Z if undoKeys is true - default)
redo() - go forward one undo state (called automatically by CTRL Y or CTRL SHIFT Z if undoKeys is true - default)
delete(index) - delete a line segment at a given index (actually sets its alpha to 0 to maintain layers on undo)
   use: pen.paper.on("mousedown", function (e) {
      pen.delete(paper.getChildIndex(e.target)); // for instance
   })
deleteSegment(object) - delete a line segment object
   use: pen.paper.on("mousedown", function (e) {
      pen.deleteSegment(e.target); // for instance
   })
dispose(paper) - removes all listeners and clears the drawing
   if  the optional paper is provided the specified paper will be disposed - not the pen

ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

PROPERTIES
type - holds the class name as a String
paper - the Container that holds the drawing which are Bitmap objects if cache is true or Shape objects if cache is false
   the paper is centered on the stage and may be bigger or smaller depending on the cropScale setting
   the paper can be changed to a different Container or swapped back and forth for layer type control
   paper has shape, bitmap and paperNum properties
   paper can be specifically disposed() with thePen.dispose(thePaper)
   this should only be used as a way to dispose a series of individual papers other than the current paper
   use thePen.dispose() to dispose of the pen and the current paper
lastSegment - gets the last segment drawn - for instance use in a stop event function to get the line last drawn
   this will be a Bitmap (if cache is true) or a Shape (if cache is false)
   all segments have a paper property referring to its paper (which is also the segment's parent property)
lastSelected - gets the last selected segment - perhaps a segment was dragged, etc.
nib - get a reference to the specified nib - often not used
write - get or set whether the pen is writing to the paper
drawing - read only Boolean as to if the pen is drawing as in moving
size - |ZIM VEE| get or set the size of the pen
sizeFactor - (default 1) get or set a factor to multiply the size of the pen (after being picked from ZIM VEE)
   works independent of sizeScale
sizeScale - (default 1) get or set scaling on the size of the pen (after being picked from ZIM VEE)
   works independent of sizeScale
spread - |ZIM VEE| get or set the spread of the pen
spreadFactor - (default 1) get or set a factor to multiply the spread of the pen (after being picked from ZIM VEE)
   works independent of spreadScale
spreadScale - (default 1) get or set scaling on the spread of the pen (after being picked from ZIM VEE)
   works independent of spreadFactor
color - |ZIM VEE| get or set the color of the pen
borderColor - |ZIM VEE| get or set the borderColor of the pen
borderWidth - |ZIM VEE| get or set the borderWidth of the pen
penType - get or set the type of pen - this will NOT set default properties like setPen()
undoLevels - get or set the number of undo levels
undoKeys - get or set if CTRL Z and CTRL Y / CTRL SHIFT Z are used for undo and redo
immediateStop - get or set how drawing segments ends - "both", "pressup", "mousemove" and "either" are options (see parameter for more info)
infinite - boolean to keep recording until stop() is called

ALSO See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.

EVENTS
dispatches a "drawing" event when drawing - note lastSegment is assigned when the drawing is stopped
dispatches a "stop" event when pen motion stops
   If the immediateStop parameter is "both" (default) then the pen must also be "up" to trigger the stop
   This is if drag() or motionController({type:"pressmove"}) is being used.
   If the immediateStop parameter is "mousemove" then the stop will trigger when the motion stops - regardless of the pen being up or down
   This setting may cause small drawing segments at corners of lines or if the pen is held down and moved slowly
   If the immediateStop is either then either the pressup or mousemove stopping - which ever comes first - will end segment
dispatches a "change" event for when the drawing has a new segment (or on undo / redo)
dispatches a "paperChange" event when undo or redo changes paper objects
   The pen switches papers just before the paperChange is dispatched but before the change event is dispatched
dispatches a "paperMove" event when the paper moves with CTRL drag
dispatches a "recordUndo" when any type of undo is recorded - new segment, delete, drag, clear


************************************
[56907] SoundWave(num, input, include, smoothing, min, max, operation, baseline, magnify, reduce)

SoundWave
zim class - extends a CreateJS EventDispatcher

DESCRIPTION
Receives a sound input and calculates frequency data using HTML AudioContext createAnalyser()
The input can be the mic, a Synth tone(), play() or the result of a asset("someSound").play() or an <audio> tag
You can specify the number of data points and then use the calculate() method to animate to sound

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var soundWave = new SoundWave(50, "mic");
soundWave.on("ready", function() {
   Ticker.add(function() {
      var data = soundWave.calculate();
      // data is an array with 50 frequency amplitudes from low to high based on Microphone input
   })
});

// or pass in a sound instance:

// before loading the sound with frame.loadAssets() use the following:
// this forces CreateJS to use an <audio> tag format
// we are trying to get things to work with WebAudio and will remove this message when we do!
createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);

// later when we the loading is complete:
var soundWave = new SoundWave(50, frame.asset("mySound.mp3").play());

// or pass in an <audio> tag reference:
var soundWave = new SoundWave(50, zid("tagID"));
zid("tagID").play();

// see more examples at
// https://zimjs.com/soundwave/bars.html
// https://zimjs.com/soundwave/circles.html
// https://zimjs.com/soundwave/mouth.html

PARAMETERS supports DUO - parameters or single object with properties below
num - (default 120) Number of data points returned by the calculate() method
input - (default "mic") the input for the sound:
   A. the mic
   B. the result of a ZIM Synth play() or tone()
   C. the results of a asset("someSound").play()
   D. an <audio> tag reference zid("tagID") make sure to zid("tagID").play()
include - (default 120/1024 = .117) a decimal range to include (0-1) - the full range (1) includes 90% very high frequencies
smoothing - (default .85) a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
min - (default -80 mic -100 song) minimum decibel number to pick up
max - (default -40 mic -10 song) maximum decibel number to pick up
operation - (default function below) a function that is applied to each result in the original bufferLength (1024)
   the natural results are very bass heavy with roughly a straight line heading down as frequency gets higher
   the default function reduces the bass by half and slowly rises towards the original values for higher frequency
      function(amplitude, i) {
         return amplitude * (.5+i*1/Math.pow(SoundWave.bufferLength, .95));
      })
   you can pass in a different function to take the place of the default function
   the function receives the original amplitude and index as parameters
   you can use SoundWave.bufferLength to get the total number of values in the original data (1024)
   Note: the data returned by the calculate() method will be only the included range - eg. .117 of the total original values (starting at low frequency)
baseline - (default 0 for mic and 30 for sound) removes this amount of amplitude from each data point (after operation is applied)
magnify - (default 1 for mic and 10 for sound) multiplies the data point by this much (after the baseline is removed)
   by removing the baseline amount and multiplying what's left the difference in wave data is increased
reduce - (default 0) subtracts this amount from each data point (after magnified)

METHODS
calculate() - returns an array of amplitudes at various frequencies from low to high
   the array will have a length that matches the num parameter
   the range of frequencies used will be 1024 multiplied by the include factor - eg. .117 = 120
   this 120 will be divided by the num parameter and average results over the range will be used
   this means the num parameter must be less than the 1024 times the range otherwise there is a warning
setInput() - change the input to another sound
dispose(context) - disposes the analyser.  Disposes the audioContext too if context is true (default false)
   the new Ticker function used in the app will need to be removed - see new Ticker.remove()
   and any animated DisplayObject will need to be removed, etc.

PROPERTIES
type - holds the class name as a String
num - read only num of frequency data
input - get the current input of the SoundWave - see setInput() to set the input
smoothing - a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
analyser - the HTML analyser object https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
   with minDecibels, maxDecibels, smoothingTimeConstant and some others - see link
baseline - removes this amount of amplitude from each data point (after operation is applied)
magnify - multiplies the data point by this much (after the baseline is removed)
reduce - subtracts this amount from each data point (after magnified)

EVENTS
dispatches a "ready" event when the sound source is connected and the calculate() method is ready


************************************
[57151] Synth(volume, frequency)

Synth
zim class - extends a CreateJS EventDispatcher

DESCRIPTION
Synth has two main methods play() and tone().

PLAY
Synth will play generated sounds based on seventeen inputs.
The code library used is ZzFX from Frank Force at https://github.com/KilledByAPixel/ZzFX
Thanks Frank, amazing library - nice and small too!
Sounds can be created with the interface here: https://zzfx.3d2k.com
Then just paste the resulting code into a ZIM Synth play() method.

TONE
http://zimjs.com/cat/synth.html
Tone will play a tone at a given note forever or a duration of time.
The tone() method returns a Tone object and additional notes can be added.
The tone has effects: wah, tremelo (pitch / frequency) and vibrato (gain / volume)
All the settings of the tone - volume, frequency and the effects properties
can be animated with ZIM animate() and wiggle() - controlled with MotionController
and any general interactivity on components like dials, sliders, steppers, selectors, etc.

This uses the native JS Web Audio API to make oscillators with frequency and gain.
The API is fairly complicated and cumbersome so this makes it easier.
tone() plays a note "A", "Bb", "C#", "A4", etc.
The low notes are "C0" then each number increase goes up an octavet to "G8".
New constants are provided: SINE, SQUARE, TRIANGLE, SAW, ZAP for wave shapes.
tone() also plays WaveTables - of 50 different sounds available on the ZIM CDN
See https://zimjs.com/cat/waves.html

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// play() example:
var synth = new Synth();
synth.play(...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]); // magical arrival

// This code came from here: https://zzfx.3d2k.com
// Note - it will have zzfx() and you want synth.play() - so copy what is in the brackets.
// zzfx(...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]);

// Note - above is ES6 - otherwise in ES5:
synth.play(null,0,-1500,.3,.3,1.15,null,1.01,2.37,-7.65,1100,.05,2,null,-0.1,.07,5e-4); // magical arrival

var circle = new Cirlce(50,blue).center().tap(function () {
   var synthSound = synth.play(...[,,229,.04,.04,.47,,.84,7.85,,,,,.2,,.05]);
   synthSound.on("complete", function() {
      circle.removeFrom();
      stage.update();
   });
});

EXAMPLE
// tone() example:
var synth = new Synth();
var tone = synth.tone(.5, "A"); // A is same as A3 (third octave up)
timeout(1, function () {
   tone.addNote(.5, "A2");
});

EXAMPLE
// tone() example:
var synth = new Synth();
var tone = synth.tone({
   volume:1,
   note:"A1",
   shape:SQUARE,
   wahAmount:1000,
   wahRate:1,
   wahShape:SINE, // default
   wahThroat:5
});

EXAMPLE
var synth = new Synth();
var tone = synth.tone({
   volume:.7,
   note:"A2",
   shape:SQUARE,
   wahAmount:2000,
   wahRate:.2, // LFO
   wahThroat:10,

   vibratoAmount:10,
   vibratoRate:15,
   vibratoShape:SQUARE
});

EXAMPLE
var synth = new Synth();
var tone = synth.tone({
   volume:.2,
   shape:SINE,
   tremeloAmount:.2,
   tremeloRate:12,
   tremeloShape:SINE,
})
notes = series("C3", "C4", "C3", "C5");
interval(.8, function () {
   tone.note = notes();
}, null, true); // true - start interval right away

EXAMPLE
var synth = new Synth();
var circle = new Circle(100).center().tap(function () {
   synth.tone({
      note:"C2",
      shape:SQUARE,
      wahAmount:3000,
      wahThroat:5,
      wahShape:ZAP,
      wahRate:.5,
      duration:2
   });
   circle.animate({scale:0}, 2, "backIn")
});



PARAMETERS (Synth)
   volume (default .3) - the default volume of sounds - will be overwritten by first parameter of play() or tone()
   frequency (default 220) - the default frequency (Hz) of sounds - will be overwritten by first parameter of play() or tone()

METHODS (Synth)
   play(see parameters below) - plays a sound - see https://zzfx.3d2k.com to create data
      Returns a SynthSound object that dispatches a complete event when the sound is done
      The SynthSound has the following properties and methods:
         audioContext - the JS AudioContext
         gain - the JS WebAudio GainNode
         duration - the duration of the sound in seconds
         loop(num, offset) - see repeat below - same method.
         repeat(num, offset) - repeat the sound forever or pass in a num - returns object for chaining
            offset is a value to add to the duration so 2 would wait 2 seconds before repeating
            this accepts ZIM VEE so {min:-1, max:1} might overlap or delay slightly
            or series(1,2,3,4) would increase delay in repeating - see ZIM Pick()
         stop() - stop the sound
         play() - play the sound again - will need to call repeat() if desired
      Currently, there is no way to pause, pan or change volume once the sound is playing
      although if one really needed to change the volume, synthSound.gain.gain.value would do it - sigh (JS WebAudio...)

      PARAMETERS (play)
      ** all parameters support |ZIM VEE| - a zim Pick() object or Pick Literal can be passed
      ** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
      volume (default = .3) - Volume scale (ratio)
      randomness (default = .05) - How much to randomize frequency (ratio Hz)
      frequency (default = 220) - Frequency of sound (Hz)
      attack (default = 0) - Attack time, how fast sound starts (seconds)
      sustain (default = 0) - Sustain time, how long sound holds (seconds)
      release (default = .1) - Release time, how fast sound fades out (seconds)
      shape (default = 0) - Shape of the sound wave
         0-sine, 1-triangle, 2-sawtooth, 3-tan, 4-noise, 5-square (duty sweep)
      shapeCurve (default = 1) - Squarenes of wave (0=square, 1=normal, 2=pointy)
      slide (default = 0) - How much to slide frequency (kHz/s)
      deltaSlide (default = 0) - How much to change slide (kHz/s/s)
      pitchJump (default = 0) - Frequency of pitch jump (Hz)
      pitchJumpTime (default = 0) - Time of pitch jump (seconds)
      repeatTime (default = 0) - Resets some parameters periodically (seconds)
      noise (default = 0) - How much random noise to add (ratio)
      modulation (default = 0) - Frequency of modulation wave, negative flips phase (Hz)
      bitCrush (default = 0) - Resamples at a lower frequency in (samples*100)
      delay (default = 0) - Overlap with itself for reverb and flanger effects (seconds)
      sustainVolume (default = 1) - Volume level for sustain (ratio)
      decay (default = 0) - Decay time, how long to reach sustain after attack (seconds)
      tremelo (default = 0) - Trembling effect, rate controlled by repeat time (ratio)

   tone(see parameters below) - play a tone or tones continuously or for a duration
      returns a Synth Tone object - see methods and properties underneath parameters

      PARAMETERS (tone)
      ** supports DUO - parameters or single object with properties below
      ** supports VEE - all parameters support ZIM VEE - a zim Pick() object or Pick Literal can be passed
      ** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
      volume (default 1) - volume is all over the map with tones and effects
         Volume 1 is actually volume .1 as overall gain is dropped to 1/10 default JS Web Audio gain=1
         The overally gain is run through a JS compressor - see compressor property
         and filters can be appied - see insertComponent() but - good luck!
      note (default "A" - Synth default frequency 220) - letter notes (string) or frequency notes (number)
         "C0" is the lowest note with each octave the next number up to "G8" being a very high note (ew)
         Middle notes do not need a number and are octave 3 so a "C" is the same as "C3".
         Sharps are with a "#" so "C#" or "C2#" or "C#2" or "#C" or "#C####" etc. order does not matter
         Flats are with a "b" (the lowercase letter b) so "Bb" or "Ab2", etc.
      shape (default SINE) - the wave form or type as a constant below - or a WaveTable JSON or custom shape
         constants: (each is the same as a lowercase string - eg. SINE is "sine")
         SINE - a sine wave for a smooth sound - not good with Wah effect
         SQUARE - an up and down wave -1/1 with a growly sound - good for wah!
         TRIANGLE - a triangle shaped wave between a SINE an SQAURE
         SAW (SAWTOOTH) - an increase and then sudden drop - a little jagged sounding
         ZAP (reverse SAW) - a loud noise followed by a slow drop to 0 repeating - pew pew
         WaveTable shapes - 50 custom sounds see https://zimjs.com/cat/waves.html
            if loading JSON from file pass in asset("wavename.json") to the shape param (not just the file name)
         CUSTOM - an object {real, imag} with real and imag properties
            the real and imag properties should be Float32Array objects
            but ZIM will convert arrays such as the arrays found in the WaveTables
            ZIM will run a createPeriodicWave() on the object and callsetPeriodicWave()
            https://developer.mozilla.org/en-US/docs/Web/API/PeriodicWave
      duration (default 0) - forever - the seconds the sound will play (see also startTime) - and stop() method - also see ZIM TIME constant
      attack (default .02) - seconds to ramp up sound - sound that starts or stops right away pops (crackles)
      release (default .05) - seconds to ramp down sound at end
      WAH - makes a wah sound!  Like a Wah Pedal... applies an LFO (low frequency oscillator)
         A wah is made with a bandpass filter - that reduces sounds at high and low frequencies
         The JS bandpass filter used is available as the filter property of the tone object
         Changing the middle frequency of the bandpass will move the range up and down
         We call the middle frequency the wahNote and it is the most fun to change!
         The range between the high and low frequency we call wahThroat (it is a Q value - quality)
         The range does not exactly cut off but rather compresses the sound - so a smaller throat sounds squeezed
         This also reduces the volume and can make the tone sould almost wet or like a resonance
         Note: other effects are done with JS Web Audio Oscillator Wah uses a ZIM Synth Oscillator
         As well as the parameters, setting any wah property (tone see properties) will turn on the wah and there is a stopWah() method
            wahAmount (default 1000) - how much (amplitude) the wah moves up and down across notes
            wahRate (default 1) - the oscillations per second the wah moves up and down across notes
            wahShape (default SINE) - the wave form (type) the oscillations take - SINE smooth, SQUARE bee boo bee boo + SAW, TRIANGLE, ZAP
            wahThroat (default 5) - the low to high range of the wah (Q) usually from .1 to 20 - will compress sound and reduce volume
            wahNote (default note) - the center note (frequency) of the wah - changing / animating this will make the most wah effect
               the farther away the wahNote is from the note the more wah
               but if the wah moves too much it can cut off the sound - try within -200 and 3000 ;-)
      VIBRATO - oscillates frequency (pitch)
         When vibrato is used, a JS Oscillator (vibrato property) is used
         to adjust a JS Gain (vibratoGain property) connected to the main note frequency to make a warble
         As well as the parameters, setting any vibrato property (tone see properties) will turn on the vibrato and there is a stopVibrato() method
            vibratoAmount (default 10) - the frequency range to warble
            vibratoRate (default 1) - the oscillations per second to change the frequency
            vibratoShape (default SINE) - the the wave form (type) the oscillations take - SINE smooth, SQUARE bap bap + SAW, TRIANGLE, ZAP
      TREMELO - oscillates gain (volume)
         When tremelo is used, a JS Oscillator (tremelo property) is used
         to adjust a JS Gain (tremeloGain property) to make a warble
         As well as the parameters, setting any tremelo property (tone see properties) will turn on the tremelo and there is a stopTremelo() method
            tremeloAmount (default the tone volume * hush) - matching volumes makes a balanced wobble
               adding volumes gets really loud so reduce volume when applying tremelo
            tremeloRate (default 1) - the oscillations per second to change the gain
            tremeloShape (default SINE) - the the wave form (type) the oscillations take - SINE smooth, SQUARE doop doop + SAW, TRIANGLE, ZAP
      startTime (default 0) - in seconds - times the note start time very accurately - also see ZIM TIME constant
          generally, sequencers should use startTime and run all the notes at the start
         then the start times will play the note
         this avoids inconsistencies in interval() and animate()
         But... it depends on the application

      METHODS (Tone)
         ramp(volume, time) - set a volume with optional fade time
            there is a volume property but ramp() tends to avoid crackle and pop
            so would recommend using volume only for animating
         stop(time) - stop the tone at the given time in seconds (default audioContext.currentTime)
         addNote(volume, note, shape, toWah, toVibrato, startTime) add a new note to the tone - returns a Note() object
            ** also see notes property of tone() for array of notes - and removeNote() below
            volume (default 1) - the volume of the note - 1 will be fine even if main volume is .1 for instance...
            note (default "A") - the letter note (or frequency) of the note
            shape (default SINE) - the type of wave - see tone() wave parameter for more details
            toWah (default true) - set to false to not add the note to the wah effect (if wah is on)
            toVibrato (default false) - set to true to add note to vibrato effect (if vibrato is turned on)
               adds note automatically to tremelo - to not add note to tremelo, make a new tone()
            PROPERTIES (Note)
               type - holds the class name as a String (Note)
               volume - ramp the gain of the gainNode attached to the Oscillator
               note - get or set the note - will ramp the Oscillator frequency
               oscillator - a reference to JS OscillatorNode used for note
               gain - reference to JS GainNode used for note
         removeNote(noteObject or toneObject) - remove a note object or pass in tone to remove that note
         removeWah() - removes the wah effect
         removeVibrato() - removes the vibrato effect
         removeTremelo() - removes the tremelo effect
         animate() - allows for tone to be animated like animate on a DisplayObject
            animate has added note convenience property - to convert to frequency from letter notes
            could animate with animate() function - but adding method makes it easier (and it is just a few lines)
         wiggle() - allows tone to be wiggled like a DisplayObject
            could wiggle with wiggle() function - but adding method makes it easier (and it is just a few lines)
         wire() - wire property values to another object. See wire() in Docs under DisplayMethods for parameters
         noWire() - turn off wire
         wired() - set tone to have property values set by another object. See wire() in Docs under DisplayMethods for parameters
         noWired() - turn off wired

      PROPERTIES (Tone)
         type - holds the class name as a String (Tone)
         volume - the main volume - use this for animation
            warning, use ramp(volume) for setting a one-time volume to avoid crackle
         note - ramps the tone to the provided note ("A", "Bb", "C1", "D#", etc.) - or frequency
         frequency - ramps main frequency (note) to given value (see also note)
         shape - Wave form SINE, SQUARE, TRIANGLE, SAW, ZAP - see parameters for details
         duration - the duration of the tone if any
         currentTime - gets the current time in seconds since the start of the tone
         attack - seconds to ramp up volume or note
         release - seconds to ramp down volume or note
         hush - ratio of overall reduction of volume number - defaults to .1 so 10% JS gain=1 setting
         audioContext - reference to the JS Web Audio context being used - with the Web Audio nodes below
         WEB AUDIO NODES
            https://developer.mozilla.org/en-US/docs/Web/API/AudioNode
            The following are the JS Web Audio nodes used to create tone (for advanced users)
            Other Web Audio nodes can be inserted (patched) into the chain using disconnect() and connect()
            The connection order is: oscillator - filter - gain - compressor - audioContext.destination
         oscillator - reference to JS OscillatorNode created with audioContext.createOscillator()
            this can be directly manipulated but may want to use ZIM properties and methods
         filter - reference to JS BiQuadFilter of type "bandpass" made with audioContext.createBiquadFilter()
         gain - reference to JS GainNode made with audioContext.createGain()
         compressor - reference to JS DynamicsCompressor made with audioContext.createDynamicsCompressor()
            Compressor settings are as follows - these can be overridden:
            compressor.threshold.setValueAtTime(-50, audioContext.currentTime);
            compressor.knee.setValueAtTime(40, audioContext.currentTime);
            compressor.ratio.setValueAtTime(12, audioContext.currentTime);
            compressor.attack.setValueAtTime(0, audioContext.currentTime);
            compressor.release.setValueAtTime(0.25, audioContext.currentTime);
         notes - an array of notes including the main note (see addNote())
         EFFECTS PROPERTIES
            setting these will start the effect if not already going
            see tone() parameters for definitions (aside from wahAdjust - below)
         wahAmount
         wahRate
         wahShape
         wahThroat
         wahNote
         wahAdjust - wahNote is adjusted up 200 hz - set to 0 to start exactly at main note
         vibratoAmount
         vibratoRate
         vibratoShape
         tremeloAmount
         tremeloRate
         tremeloShape

   oscillator(frequency, gain, shape, offset) - returns a ZIM Synth Oscillator object
      this gives an amplitude (plus offset) in time following the form (wave type) at the frequency
      used internally by wah effects as an offset was needed
      could not figure how to get JS Oscillator to offset frequency - or gain attache to oscillator
      see: https://stackoverflow.com/questions/61666671/how-do-you-offset-gain-attached-to-an-oscillator-using-javascript-web-audio

      PARAMETERS (Oscillator)
      frequency (default 1) - how fast in HZ the oscillator goes up and down on the wave
      gain (default 10) - the height of the wave (amplitude) - and negative gain to the lowest amount
      shape (default SINE) - the type of wave - SINE, SQUARE, TRIANGLE, SAW, ZAP (no custom)
      offset (default 0) - an amount added to the gain so 10 would make gain go from 10 to 20 (for gain of 10)

      PROPERTIES (Oscillator)
      all the parameters as properties - supports ZIM VEE
      type - holds the class name as a String (Oscillator)
      ticker - a reference to the ZIM new Ticker that runs the oscillator

      METHODS (Oscillator)
      pause(state) - pause or unpause the oscillator
         state defaults to true - set to false to unpause oscillator

   STATIC METHODS
   Synth.setShape(oscillator, shape) - sets a new wave on a JS OscillatorNode
      used internally by classes and methods with shape parameter
      oscillator - a JS OscillatorNode
      shape (default SINE) - the type of wave - see tone() shape parameter for details
   Synth.getNote (frequency, semitoneOffset) - provided by ZzFX to handle semitones
      returns a new frequency a number of semitones from the provided frequency
      frequency - the frequency in HZ - eg. 220 - middle A
      semitoneOffset - semitones (think consecutive piano keys) to offset the frequency
   Synth.note(note) - gets a frequency at a musical note
      used internally by classes and methods with note parameter
   Synth.wave(a,b) - prepares a WaveTable or wave data for Tone shape
      a - JSON object with WaveTable - if loading a file pass in asset("wave.json")
      b - if a and b are provided then assumes a custom object {real, imag}
         see tone() shape parameter for details
   Synth.drawWave(shape, color, thickness, backgroundColor, borderColor, borderWidth, corner, padding, paddingVertical)
      returns a ZIM Container holding a little picture of the wave type with an optional backing square
      shape (default SINE) the type of wave SINE, SQUARE, TRIANGLE, SAW, ZAP
      the rest of the parameters as expected
      has shape and backing properties - shape is a ZIM Shape and backing is a ZIM Rectangle
      also has a type property that matches the shape - SINE, SQUARE, etc.

   STATIC PROPERTIES
   Synth.notes = ["C",,"D",,"E","F",,"G",,"A",,"B"] - major notes skipping sharps and flats
   Synth.major = ["C","D","E","F","G","A","B","C4"] - major notes
   Synth.minor = ["C","D","Eb","F","G","Ab","B","C4"] - minor notes
   Synth.shapes = ["sine","square","triangle","sawtooth","saw","zap","tan","noise"]
      the last two are for ZzFX play() only which has no "saw" (only "sawtooth") and no "zap"

PROPERTIES (Synth)
   volume - get or set the default volume - will be overwritten by first parameter of play() or tone()
   frequency - get or set the default frequency - will be overwritten by frequency parameter of play() or tone() (or note parameter of tone())

EVENTS (Synth)
the result of the play() or tone() method will dispatch a "complete" event when the sound is done


************************************
[58495] VR(content, angle, distance, parallax, parallaxAngle, damp, parallaxDamp, startAngle, negativeParallax, borderMarkers, swiper, holder)

VR
zim class - extends a ZIM Container which extends a CreateJS Container

DESCRIPTION
Copies the content and displays a left and right channel (side-by-side) to be viewed with a VR helmet.
Content can be made to shift side to side as the head turns.  Parallax is also an option.
Works with Google Cardboard & Daydream, Samsung Gear VR, Carl Zeiss VR, Merge VR, View-Master VR
And costing around $20-$30 these are fine: Utopia 360, VRIT VR, ETVR, etc.
Provides a ZIM Swiper for testing on desktop to emulate turning the head.

DETAILS
Make a content Container (with registration point at 0,0) that holds all the content.
Set a depth property on any children in the content container that you want to look 3D
or use the chainable dep() method to apply the depth property.
ZIM VR will copy the content and its depths into left and right containers and mask it.
The content can be accessed via contentLeft and contentRight properties.
The x values of the content that has depth properties set will be shifted according to the depth.
This gives a sense of 3D coming out of the screen for positive depths and into the screen for negative depths.

Device orientation can also be used to move the content as the head is turned and the headset and device moves.
Currently the horizontal movement is built in as that is the trickiest with the 3D effect.
Supply a motion angle (angle) and a motion distance (distance) about which the user will turn their head to see the content.
Optional arrows are provided to map the boundaries of rotation and available as borderLeft and borderRight properties.
You can manually apply vertical shift based on the ZIM Frame deviceOrientation event about the x axis

Horizontal Parallax is provided if desired and will be based on the head rotation if no motion angle is provided
or based on the distance of the object from the center of view if a motion angle is provided.
You can set the parallax details as well like the magnitude, angle, damping, and negative parallax.
Negative values of depth will not produce parallax unless negativeParallax is set to true (this looks funny).
You can make your own vertical parallax if desired using ZIM Parallax and the deviceOrientation event about the x axis.

NOTE: moving content in the x direction should not be done manually.
Rather, use the position() method of VR to properly place both channels and reset the vrStartX positions required.

NOTE: To add or remove content please use the register() and remove() methods.
Any new content should be added to the initial content container.
Do this first, then set the desired depths, then register the new content.
This will clone the new content to the right side channel
and set the shift in x based on depths for both channels.

NOTE: Any modifications afterwards to other properties like alpha, color, y, registration, etc.
must be made manually to both channels - use the contentLeft and contentRight properties.
The contentLeft is the original content (also available as the content property).
You can use the vrMatch property of any content objects to get its other channel partner.
So if you have a label variable for the Label in the original content,
you can access the label in the right hand channel with label.vrMatch
The right channel objects also have vrMatch properties so label.vrMatch.vrMatch is the label ;-)

SEE: https://zimjs.com/vr/

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// Prepare content inside one container
var content = new Container(stageW/2, stageH);

// This background tile has no depth or is at "screen" depth
// There will be no depth shift and no parallax
new Tile(new Rectangle(10,10,light), 20, 1, 10).center(content);

// These rectangles are given depth using the dep() method - or set the depth property
// The rectangles will be shifted in the x by VR
// centerReg the objects for proper parallax
var box = new Rectangle(50,50,green).centerReg(content).dep(10);
new Rectangle(70,70,clear,blue,5).centerReg(content).dep(12);

// 1. this just shows content in 3D with no motion:
// var vr = new VR(content).addTo(stage);

// 2. this will move when the head is turned (device is rotated) but with no parallax:
// var vr = new VR(content, 160, 400).center();

// 3. this shows parallax when the head is turned but with no positional movement:
// var vr = new VR(content, 0, 400, 2, 60).center();

// 4. this shows motion and parallax as the head is turned:
var vr = new VR(content, 160, 400, 2, 60).center();


// this will change the color of the box after it has been added to VR:
// box.color = pink; // the left side
// box.vrMatch.color = pink; // the right side

// this would fade in and out the outer rectangles:
// var obj = {obj:{alpha:0}, loop:true, rewind:true};
// vr.contentLeft.getChildAt(2).animate(obj);
// vr.contentRight.getChildAt(2).animate(obj);

// this would remove the outer rectangle:
// vr.remove(vr.content.getChildAt(2));

// this would remove the right hand border marker
// which shows when angle is != 0 and borderMarkers is set to true (default)
// vr.remove(vr.borderRight);

// this shows an inter-ocular adjuster when the stage is pressed
stage.on("stagemousedown", function() {
   vr.showAdjuster();
});

// the above works fine, but really should remove the event when stage is pressed
// because all presses using the adjuster would be calling showAdjuster
// then add the event again when the adjuster is closed
// but ZIM makes sure that adjuster does not re-open if it is already open.
// Here is what that code would look like:

// var adjusterEvent = stage.on("stagemousedown", function() {
//    vr.showAdjuster();
// }, null, true); // run once
// vr.on("close", function() {
//    adjusterEvent = stage.on("stagemousedown", adjusterEvent);
// });

// this code turns the stage yellow if device is rotated beyond the angle parameter value
var adjusterEvent = vr.on("boundaryout", function(e) {
   zog(e.boundary); // would be "left" or "right"
   frame.color = yellow;
});

// this code changes the stage color back to the original when rotated back in bounds of the angle parameter
vr.on("boundaryin", function(e) {
   zog(e.boundary); // would be "left" or "right"
   frame.color = lighter;
});

// this would load stereoscopic images to the left and right content (no need to registser)
// frame.loadAssets(["stairsRight.jpg", "stairsLeft.jpg"]);
// frame.on("complete", function() {
//    frame.asset("stairsLeft.jpg").center(vr.contentLeft);
//    frame.asset("stairsRight.jpg").center(vr.contentRight);
// });

PARAMETERS supports DUO - parameters or single object with properties below
content - a ZIM Container with registration point at the top left that holds the content
   The content will be placed in the left VR Channel (Container) and cloned to the right VR Channel (Container)
   Set the depth property (or use dep()) of any children (recursive) of the content to be viewed in 3D
   The higher the depth, the more it comes out of the screen which is at 0 depth
   A negative depth will go into the screen but will not have parallax (see negative parallax)
   The left and right content are available as contentLeft and contentRight properties of VR
   Each child of content has a vrMatch property that refers to itself in the other channel
angle - (default 0) the angle in degrees the head can turn to see VR move (half to left, half to right)
   Currently, there is a small glitch in the transition at 360 degrees as damping rewinds and reverses position
   And there is no affordance for wrapping - so content at this location is not recommended
   A fix for this might be provided some time in the future
distance - (default 100) the pixels the content will move over the angle (half to left, half to right)
   OR if there is no angle and there is parallax, the distance the parallax will move over the parallaxAngle
parallax - (default 0) the percentage of the depth it will move for each degree of motion up to the parallaxAngle
parallaxAngle - (default 60) the degree range that parallax will operate (half on one side and half on the other)
damp - (default .5) the damping for motion if angle is provide - quicker than normal for more response turning
parallaxDamp - (default .1) the damping for parallax - smaller number goes slower towards desired position
startAngle - (default 0) the angle to start the viewing
negativeParallax - (default false) set to true to make parallax work for negative depth (looks funny)
boundaryMarkers - (default true) set to false to remove arrow markers at angle boundaries if angle is set
swiper - (default false) set to true to use swiping if not on mobile device - for testing
   If on mobile, swiper is set to false so it does not conflict with the rotation of the device
   The swiper works from -330 to +330 and then stops
   Currently, there is no wrapping system so the limits prevent a glitchy transition
holder - (default zimCurrentFrame stage) set to a Container with bounds set if desired - usually, the stage (default)

METHODS
register(item) - content is usually passed in initially to the content parameter of VR
   but an item (a display object) can be added at any time - to remove items, see remove().
   Set the desired depth property for the item with 0 being the default for the screen depth.
   Add the item to content (contentLeft) with addTo(), center(), centerReg() before registering.
   Do not add the item to contentRight as register() will clone the new item and its children recursively
   to the right side VR Channel and set its depth and parallax.
   NOTE: to add stereoscopic images, one to the left chanel and one to the right channel,
   just add the images using addTo(), center() or centerReg() to contentLeft and contentRight - no need to register()
   returns the item
remove(item) - removes item (and children) from the content of VR - do not manually remove from left and right channels
   returns the item
position(item, x, y) - positions item in VR in both left and right channels - do no manually position left and right
   returns the item
showAdjuster() - shows a panel to set interocular distance - this is saved across app loads
   The panel container can be accessed with adjuster property of VR
   The adjuster property has backing, label, strip, slider, close, zero and ok properties for formatting
   The adjuster sets the regX property of the content to shift the two channels to the desired distance appart
   Generally, this should be the distance between the eyes, but experimentation shows that a smaller distance works well
   This is provided primarily for tablet or desktop where the distance may be too big for the cross-eyed viewing technique
   returns the VR object
hideAdjuster() - hides the adjuster - but the close and ok buttons will do this as well - also see VR events...
   returns the VR object
resize() - call the resize() method to resize VR if the holder size changes - VR can be added to the ResizeManager
   returns the VR object

PROPERTIES
type - holds the class name as a String
angle - read only - the angle provided to the VR parameters
currentAngle - read only - the angle at which the device has been rotated since the start of the app
content - the original content provided to the VR parameters
contentLeft - the content - this shows in the left VR Channel
   The following read-only property is provided on all children of the content:
      vrMatch - a reference to the matching child in the other VR Channel
   The following read-only properties are provided to children of the content that have a depth property
   These are given for content passed in to the content parameter and also to items passed in to the register() mehtod:
      vrChannel - "left" or "right"
      vrStartX - the starting x position before depth effect or parallax is added (could be changed if manually setting x position)
      vrParallaxDistance - the shift in x due to parallax
      vrParallaxDamp - the ZIM Damp object to handle parallax if VR angle is != 0
contentRight - the cloned content - this shows in the right VR Channel (also see contentLeft info)
left - the container that holds the left VR Channel
right - the container that holds the right VR Channel
adjuster - the adjuster panel - see showAdjuster() method for details
swiper - the ZIM Swiper if swiper parameter is set to true to test the motion if not on device
boundaryLeft - the left boundary container if boundary parameter is true
boundaryRight - the right boundary container if boundary parameter is true

EVENTS
boundaryout - dispatched when rotated past a boundary region - the event object provides a boundary property with "left" or "right" values
boundaryin - dispatched when rotated into the boundary region - the event object provides a boundary property with "left" or "right" values
saved - dispatch when OK button on adjuster panel is pressed to set the interocular distance
closed - dispatches when X and OK button is pressed to close the adjuster panel



------------------------------------
MODULE 5: ZIM CODE
------------------------------------

************************************
[00642] shuffle(array)

shuffle
zim function

DESCRIPTION
Randomly shuffles elements of an array.
Actually changes the original array (and also returns it).

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var array = ["happy", "sad", "spooked"];
var randomFromArray = shuffle(array)[0];
// this will be randomized each time it is run

EXAMPLE
var array = shuffle(["happy", "sad", "spooked"]);
for (var i=0; i<array.length) zog(array[i]);
// this will get random and unique elements of the array

PARAMETERS
array - the Array to shuffle

RETURNS the modified Array

MORE: http://zimjs.com/code/bits.html?title=shuffle


************************************
[00685] rand(a, b, integer, negative)

rand
zim function

DESCRIPTION
Returns a random integer between and including a and b if integer is true.
Returns a random number (with decimals) including a and up to b but not b if integer is false.
b is optional and if left out will default to 0 (includes 0).
integer is a boolean and defaults to true.
If a and b are 0 then just returns Math.random().

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
var speed = rand(10,20); // 10, 11, 12... 18, 19 or 20

var colors = ["blue", "yellow", "green"];
var color = colors[rand(colors.length-1)]; // note the length-1

// the equivalent of:
var color = colors[Math.floor(Math.random()*colors.length)];

// OR a technique often used without using rand():
var color = shuffle(colors)[0];

// here we get a speed that is either from 5 to 10 or -5 to -10
var speed = rand(5,10,null,true);

PARAMETERS
a - the first Number for the range
   if a and b are not provided, rand() acts like Math.random()
   if parameter b is not provided, rand will use range 0 to and including a
b - (default 0) second Number for the range
   it does not matter if a>b or a<b
integer - (default true) set to false to include decimals in results
   if false, range will include decimals up to but not including the highest number
   if a or b have decimals this is set to false
negative - (default false) includes the negative range as well as the positive

RETURNS a Number

MORE: http://zimjs.com/code/bits.html?title=rand


************************************
[00746] series(array|item1|obj, item2, item3)

series
zim function

DESCRIPTION
Returns a function that will return each value passed as a parameter (or an Array) in order
or an object literal with min and max.
This goes in sequence each time the function is called.
Use this to pass a series in to any ZIM VEE value so a looping series is obtained.

NOTE: was called makeSeries() which is now depricated

NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

EXAMPLE
// note - do not call the variable name series
var colors = series(red, green, blue);
colors(); // red
colors(); // green
colors(); // blue
colors(); // red, etc.

// or
var colors = [red, green, blue];
var s = series(colors);
s(); // red
s(); // green
s(); // blue
s(); // red, etc.

new Tile(new Rectangle(10,10,[blue, red]), 10, 10); would randomize colors
new Tile(new Rectangle(10,10,series(blue, red)), 10, 10); would alternate colors

EXAMPLE
STYLE = {color:series(pink, green, blue)}
loop(9, function(i) {
   new Circle(100).loc(110+i*100, 400)
});

EXAMPLE
// ten rectangles getting higher by 20 each time
var s = series({min:10, max:200}).step(20);
loop(10, function(i) {
   new Rectangle(10, s, red).sca(1,-1).loc(100+i*20, 400);
});

EXAMPLE
// added functionality as of ZIM 10.9.0
// start at index 3, reverse and don't go past 0
var nums = series(0, 1, 2, 3, 4).jump(3).reverse().constrain();
loop(5, function(){
   zogb(nums()); // 3,2,1,0,0 (blue in console)
});
nums.reverse(false); // go forward - note, still starting at index 0
zogg(nums()); // 0 (green in console)
zogg(nums()); // 1
zogg(nums()); // 2
nums.bounce(); // go back and forth rather than default loop
loop(5, function(){
   zogy(nums()); // 3,4,3,2,1 (yellow in console)
});
nums.step(3); // sitting at 0 then increase the step to 3
loop(5, function(){
   zogr(nums()); // 0,3,2,1,4 (red in console)
   // 3->6 bounces off 4 with two back to 2
   // 2->-1 bounces off 0 with one forward to 1
   // tricky but correct
});
zogp(nums.index); // 1 - coming back 3 steps from 4 to 1 as current index

PARAMETERS
array|item1|{min,max,step} - the first item - or an array of results that will be called in order as the resulting function is called
   or an object with min, max and step properties to make a series of numbers from and including min and max (step defaults to 0)
   this will make an array of values and then it is just like an array was entered initially.
when used with ZIM VEE - the values may be further ZIM VEE values (including more series values)
item2 - the second item if the first is not an array
item3 - the third item, etc. to as many items as needed

METHODS
step(num) - num defaults to 1 - the number of items to move the index - or use index property
every(num) - num defaults to 0 - steps to wait before moving to the next index - remain on blue for five, then go to yellow for five, etc.
jump(index) - jump to an index but do not run it - the next call to the series will run here
reverse(boolean) - boolean defaults to true - reverses direction - or pass in false to cancel reverse
bounce(boolean) - boolean defaults to true - back and forth between 0 and length-1 - or pass in false to cancel bounce
constrain(boolean) - boolean defaults to true - keeps index between 0 and length-1 - or pass in false to cancel constrain

PROPERTIES
array - an array of items passed in to the function
length - the length of the series
index - get or set the current index of the series - what will run next

RETURNS a function that can be called many times - each time returning the next value in the series


************************************
[00968] loop(obj, call, reverse, step, start, end)

loop
zim function

DESCRIPTION
1. If you pass in a Number for obj then loop() does function call that many times
and passes function call the currentIndex, tot