From cdf3881d11cf3a1dabb2f601042c329949222bec Mon Sep 17 00:00:00 2001
From: steve wirts <stevewirts@gmail.com>
Date: Wed, 3 Dec 2014 09:59:44 -0500
Subject: [PATCH] first stab at polymer core-component-page

---
 README.md              |   4 +-
 build.html             | 710 ++++++++++++++++++++++++++++++++++++++---
 demo.html              |   4 +-
 fin-hypergrid.html     |  20 ++
 fin-hypergrid.pre.html |  20 ++
 gp.sh                  |  65 ++++
 package.json           |   4 +-
 7 files changed, 778 insertions(+), 49 deletions(-)
 create mode 100755 gp.sh

diff --git a/README.md b/README.md
index d720de76f..4d8a77ac8 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 fin-hypergrid
 ================
 
-See the [component page](http://stevewirts.github.io/stevewirts/fin-hypergrid) for more information.
+See the [component page](http://openfin.github.io/fin-hypergrid) for more information.
 
 ## Getting Started
 
-We've put together a [guide for fin-hypergrid](http://www.polymer-project.org/docs/start/reusableelements.html) to help get you rolling.
+Here is a [guide for polymer](https://www.polymer-project.org/) to help get you rolling.
diff --git a/build.html b/build.html
index 5fb96071a..e92f3048b 100644
--- a/build.html
+++ b/build.html
@@ -1702,8 +1702,9 @@
   </script>
 </polymer-element>
 
-<polymer-element name="fin-rectangle" attributes="notitle author" assetpath="../fin-rectangle/">
+<polymer-element name="fin-rectangle" assetpath="../fin-rectangle/">
   <script>
+
 'use strict';
 
 (function() {
@@ -1737,6 +1738,13 @@
 
         var that = {};
 
+        /**
+         * The x of this point expressed as a number,
+         *
+         * @property point.x
+         * @type number
+         * @default '0'
+         */
         Object.defineProperty(that, 'x', {
             value: x || 0,
             writable: false,
@@ -1744,6 +1752,14 @@
             configurable: false
         });
 
+
+        /**
+         * The y of this point expressed as a number,
+         *
+         * @property point.y
+         * @type number
+         * @default '0'
+         */
         Object.defineProperty(that, 'y', {
             value: y || 0,
             writable: false,
@@ -1751,41 +1767,133 @@
             configurable: false
         });
 
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns an instance of point that is the sum of self and the argument.
+         *
+         * @method point.plus(point)
+         * @param {point} a point to add to self
+         * @returns {point} point object.
+         */
         that.plus = function(point) {
             var result = createPoint(this.x + point.x, y + point.y);
             return result;
         };
 
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns an instance of point that is the difference of self and the argument.
+         *
+         * @method point.minus(point)
+         * @param {point} a point to subtract from self
+         * @returns {point} point object.
+         */
         that.minus = function(point) {
             var result = createPoint(x - point.x, y - point.y);
             return result;
         };
+
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns an instance of point that is the min x and y of self and the argument.
+         *
+         * @method point.min(point)
+         * @param {point} a point to source min x and min y against self
+         * @returns {point} point object.
+         */
         that.min = function(point) {
             var result = createPoint(Math.min(x, point.x), Math.min(y, point.y));
             return result;
         };
+
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns an instance of point that is the max x and y of self and the argument.
+         *
+         * @method point.max(point)
+         * @param {point} a point to source max x and max y against self
+         * @returns {point} point object.
+         */
         that.max = function(point) {
             var result = createPoint(Math.max(x, point.x), Math.max(y, point.y));
             return result;
         };
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns distance between the argment and self using the distance formula.
+         *
+         * @method point.distance(point)
+         * @param {point} a point to compute the distance from self
+         * @returns {Number} number object.
+         */
         that.distance = function(point) {
             var dx = point.x - x,
                 dy = point.y - y,
                 result = Math.sqrt((dx * dx) + (dy * dy));
             return result;
         };
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns if both x and y of self is greater than that of the argument.
+         *
+         * @method point.greaterThan(point)
+         * @param {point} a point to compare against self
+         * @returns {boolean} boolean value.
+         */
         that.greaterThan = function(point) {
             var result = this.x > point.x && y > point.y;
             return result;
         };
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns if both x and y of self is less than that of the argument.
+         *
+         * @method point.lessThan(point)
+         * @param {point} a point to compare against self
+         * @returns {boolean} boolean value.
+         */
         that.lessThan = function(point) {
             var result = this.x < point.x && y < point.y;
             return result;
         };
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns if both x and y of self is greater than or equal to that of the argument.
+         *
+         * @method point.greaterThanEqualTo(point)
+         * @param {point} a point to compare against self
+         * @returns {boolean} boolean value.
+         */
         that.greaterThanEqualTo = function(point) {
             var result = this.x >= point.x && y >= point.y;
             return result;
         };
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns if both x and y of self is less than or equal to that of the argument.
+         *
+         * @method point.lessThanEqualTo(point)
+         * @param {point} a point to compare against self
+         * @returns {boolean} boolean value.
+         */
         that.lessThanEqualTo = function(point) {
             var result = this.x <= point.x && y <= point.y;
             return result;
@@ -1800,9 +1908,40 @@
 
         var that = {};
 
+        /**
+         * The origin of this rectangle expressed as a point object,
+         *
+         * @property rectangle.origin
+         * @type point
+         * @default 'point at 0,0'
+         */
         var origin = createPoint(x, y);
+
+        /**
+         * The extent of this rectangle expressed as a point object,
+         *
+         * @property rectangle.extent
+         * @type point
+         * @default 'point at 0,0'
+         */
         var extent = createPoint(width, height);
+
+        /**
+         * The corner of this rectangle expressed as a point object,
+         *
+         * @property rectangle.corner
+         * @type point
+         * @default 'point at 0,0'
+         */
         var corner = createPoint(x + width, y + height);
+
+        /**
+         * The center of this rectangle expressed as a point object,
+         *
+         * @property rectangle.center
+         * @type point
+         * @default 'point at 0,0'
+         */
         var center = createPoint(x + (width / 2), y + (height / 2));
 
         Object.defineProperty(that, 'origin', {
@@ -1833,46 +1972,116 @@
             configurable: false
         });
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.origin.y, this may need to change
+         *
+         * @method rectangle.top()
+         */
         that.top = function() {
             return this.origin.y;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.origin.x, this may need to change
+         *
+         * @method rectangle.left()
+         */
         that.left = function() {
             return this.origin.x;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.top() + this.extent.y, this may need to change
+         *
+         * @method rectangle.bottom()
+         */
         that.bottom = function() {
             return this.top() + this.extent.y;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.left() + this.extent.x, this may need to change
+         *
+         * @method rectangle.right()
+         */
         that.right = function() {
             return this.left() + this.extent.x;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.extent.x
+         *
+         * @method rectangle.width()
+         */
         that.width = function() {
             return this.extent.x;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.extent.y
+         *
+         * @method rectangle.height()
+         */
         that.height = function() {
             return this.extent.y;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns this.extent.x * this.extent.y
+         *
+         * @method rectangle.area()
+         */
         that.area = function() {
             return this.extent.x * this.extent.y;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns a rectangle width 0 and origin x set to argument
+         *
+         * @method rectangle.flattenXAt(x)
+         */
         that.flattenXAt = function(x) {
             var o = this.origin;
             var e = this.extent;
             return createRectangle(x, o.y, 0, e.y);
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns a rectangle height 0 and origin y set to argument
+         *
+         * @method rectangle.flattenYAt(y)
+         */
         that.flattenYAt = function(y) {
             var o = this.origin;
             var e = this.extent;
             return createRectangle(o.x, y, e.x, 0);
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns true if argument point or rectangle is entirely contained inside self
+         *
+         * @method rectangle.contains(pointOrRect)
+         */
         that.contains = function(pointOrRect) {
             var result = pointOrRect.isContainedWithinRectangle(this);
             return result;
@@ -1883,6 +2092,13 @@
             return result;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * return a Rectangle that is enlarged/shrunk by argument size
+         *
+         * @method rectangle.insetBy(thickness)
+         */
         that.insetBy = function(thickness) {
             var result = createRectangle(
                 this.origin.x + thickness,
@@ -1892,8 +2108,15 @@
             return result;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * return a Rectangle that contains the receiver and the argument
+         *
+         * @method rectangle.union(rectangle)
+         */
         that.union = function(rectangle) {
-            //answer a rectangle that contains the receiver and argment rectangles
+
             var anOrigin = this.origin.min(rectangle.origin),
                 aCorner = this.corner.max(rectangle.corner),
                 width = aCorner.x - anOrigin.x,
@@ -1903,6 +2126,13 @@
             return result;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * iterate over all points inside me calling function(x,y) for each
+         *
+         * @method rectangle.forEach(function)
+         */
         that.forEach = function(func) {
             var xstart = this.origin.x;
             var xstop = this.origin.x + this.extent.x;
@@ -1915,9 +2145,15 @@
             }
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns a Rectangle that is the area in which the receiver overlaps with the argument.  ifNoneAction is called if there is no intersection; it has arguments this and rectangle passed in
+         *
+         * @method rectangle.intersect(rectangle,ifNoneAction)
+         */
         that.intersect = function(rectangle, ifNoneAction) {
-            //Answer a Rectangle that is the area in which the receiver overlaps with
-            //rectangle. Optimized for speed
+
             var point = rectangle.origin,
                 myCorner = this.corner,
                 left = null,
@@ -1958,8 +2194,14 @@
             return result;
         };
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * returns true if we overlap with the argument, false otherwise
+         *
+         * @method rectangle.intersects(rectangle)
+         */
         that.intersects = function(rectangle) {
-            //return true if we overlap, false otherwise
 
             var rOrigin = rectangle.origin,
                 rCorner = rectangle.corner;
@@ -1982,6 +2224,41 @@
         return that;
     }
 
+    /**
+     *                                                                        .
+     *                                                                      .
+     * returns an instance of point.
+     *
+     * @method static.point.create(x,y)
+     * @param {Number} the x coordinate
+     *    @param {Number} the y coordinate.
+     * @returns {point} point object.
+     */
+
+    /**
+     *                                                                      .
+     *                                                                      .
+     * returns an instance of rectangle.
+     *
+     * @method static.rectangle.create(ox,oy,ex,ey)
+     * @param {Number} the x origin coordinate
+     *    @param {Number} the y origin coordinate.
+     *    @param {Number} the width extent.
+     *    @param {Number} the height extent.
+     * @returns {rectangle} rectangle object.
+     */
+
+    /**
+     *                                                                      .
+     *                                                                      .
+     * returns if a rectangle contains x, y.
+     *
+     * @method static.rectangle.contains(rectangle,x,y)
+     * @param {rectangle} an instance of rectangle
+     *    @param {Number} the x coordinate.
+     *    @param {Number} the y coordinate.
+     * @returns {rectangle} rectangle object.
+     */
     Polymer('fin-rectangle', { /* jshint ignore:line  */
         point: {
             create: createPoint
@@ -2035,6 +2312,12 @@
 
 (function() {
 
+    /**
+     * charMap is a private property that maps keys strokes to key chars,
+     *
+     * @property charMap
+     * @type Array
+     */
     var charMap = [];
     var empty = ['', ''];
     for (var i = 0; i < 256; i++) {
@@ -2107,6 +2390,185 @@
     charMap[39] = ['RIGHT', 'RIGHTSHIFT'];
 
     Polymer('fin-canvas', { /* jshint ignore:line */
+        /**                                                             .
+         * g is the [fin-rectangle](http://stevewirts.github.io/fin-rectangle/components/fin-rectangle/) factory for creating instances of rectangle and point
+         *
+         * @property g
+         * @type fin-rectangle polymer-element
+         */
+        g: null,
+
+        /**                                                             .
+         * canvas is the actual rendering surface that bit-blit to from the buffer
+         *
+         * @property canvas
+         * @type HTMLCanvasElement
+         */
+        canvas: null,
+
+        /**                                                             .
+         * cavasCTX is the cached graphics context from canvas we bit blit to
+         *
+         * @property cavasCTX
+         * @type 2DRenderingContext
+         */
+        cavasCTX: null,
+
+        /**                                                             .
+         * focuser is a button element that is used to simulate proper focus semantics
+         *
+         * @property focuser
+         * @type HTMLButtonElement
+         */
+        focuser: null,
+
+        /**                                                             .
+         * buffer is the offscreen canvas component we draw to that will eventually be bit blit to canvas
+         *
+         * @property buffer
+         * @type HTMLCanvasElement
+         */
+        buffer: null,
+
+        /**                                                             .
+         * ctx is the offscreen cached graphics context from buffer that we draw to
+         *
+         * @property ctx
+         * @type 2DRenderingContext
+         */
+        ctx: null,
+
+        /**                                                             .
+         * fps is how many times a second we check the repaint flag for redrawing
+         *
+         * @property fps
+         * @type Number
+         */
+        fps: null,
+
+        /**                                                             .
+         * mouseLocation is the current position of the mouse pointer
+         *
+         * @property mouseLocation
+         * @type point
+         */
+        mouseLocation: null,
+
+        /**                                                             .
+         * dragstart is the origin of a drag region for the selection
+         *
+         * @property dragstart
+         * @type point
+         */
+        dragstart: null,
+
+        /**                                                             .
+         * origin location of the top right corner of the grid according to [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect)
+         *
+         * @property origin
+         * @type point
+         */
+        origin: null,
+
+        /**                                                             .
+         * bounds is a private property that maps keys strokes to key chars,
+         *
+         * @property bounds
+         * @type Array
+         */
+        bounds: null,
+
+        /**                                                             .
+         * repaintNow is a private property that maps keys strokes to key chars,
+         *
+         * @property repaintNow
+         * @type Array
+         */
+        repaintNow: false,
+
+        /**                                                             .
+         * size is a private property that maps keys strokes to key chars,
+         *
+         * @property size
+         * @type Array
+         */
+        size: null,
+
+        /**                                                             .
+         * mousedown is a private property that maps keys strokes to key chars,
+         *
+         * @property mousedown
+         * @type Array
+         */
+        mousedown: false,
+
+        /**                                                             .
+         * dragging is true if we are currently dragging
+         *
+         * @property dragging
+         * @type boolean
+         */
+        dragging: false,
+
+        /**                                                             .
+         * focused is true if we currently have input focus
+         *
+         * @property focused
+         * @type boolean
+         */
+        focused: false,
+
+        /**                                                             .
+         * repeatKeyCount is how many times we've recieved a key down event from the user holding a key down
+         *
+         * @property repeatKeyCount
+         * @type Number
+         */
+        repeatKeyCount: 0,
+
+        /**                                                             .
+         * repeatKey is the key that is currently being held down
+         *
+         * @property repeatKey
+         * @type char
+         */
+        repeatKey: null,
+
+        /**                                                             .
+         * repeatKeyStartTime is the start time in milliseconds of the initial keydown event of a key that is being held down
+         *
+         * @property repeatKeyStartTime
+         * @type Number
+         */
+        repeatKeyStartTime: 0,
+
+        /**                                                             .
+         * currentKeys is an array of the all the keys that are currently being pressed
+         *
+         * @property currentKeys
+         * @type Array
+         */
+        currentKeys: [],
+
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * the number of times per second we check the repaint flag to execute a repaint
+         *
+         * @attribute fps
+         * @default 60
+         * @type Number
+         */
+
+
+        /**
+         *                                                                      .
+         *                                                                      .
+         * a polymer lifecycle callback to initialize the canvas
+         *
+         * @method ready()
+         */
         ready: function() {
 
             this.g = document.createElement('fin-rectangle');
@@ -2120,63 +2582,65 @@
 
             this.fps = this.getAttribute('fps') || 60;
 
+            this.mouseLocation = this.g.point.create(-1, -1);
+            this.dragstart = this.g.point.create(-1, -1);
+            this.origin = this.g.point.create(0, 0);
+            this.bounds = this.g.rectangle.create(0, 0, 0, 0);
+
             document.addEventListener('mousemove', function(e) {
-                self.ofmousemove(e);
+                self.finmousemove(e);
             });
             document.addEventListener('mouseup', function(e) {
-                self.ofmouseup(e);
+                self.finmouseup(e);
             });
             this.focuser.addEventListener('focus', function(e) {
-                self.offocusgained(e);
+                self.finfocusgained(e);
             });
             this.focuser.addEventListener('blur', function(e) {
-                self.offocuslost(e);
+                self.finfocuslost(e);
             });
             this.addEventListener('mousedown', function(e) {
-                self.ofmousedown(e);
+                self.finmousedown(e);
             });
             this.addEventListener('mouseout', function(e) {
-                self.ofmouseout(e);
+                self.finmouseout(e);
             });
             document.addEventListener('keydown', function(e) {
-                self.ofkeydown(e);
+                self.finkeydown(e);
             });
             document.addEventListener('keyup', function(e) {
-                self.ofkeyup(e);
+                self.finkeyup(e);
             });
             this.addEventListener('click', function(e) {
-                self.ofclick(e);
+                self.finclick(e);
             });
             this.addEventListener('dblclick', function(e) {
-                self.ofdblclick(e);
+                self.findblclick(e);
             });
 
-            this.mouseLocation = this.g.point.create(-1, -1);
-            this.dragstart = this.g.point.create(-1, -1);
-            this.origin = this.g.point.create(0, 0);
-            this.bounds = this.g.rectangle.create(0, 0, 0, 0);
-
             this.resize();
             this.beginPainting();
         },
 
-
-        repaintNow: false,
-        size: null,
-
-        mousedown: false,
-        dragging: false,
-        focused: false,
-        repeatKeyCount: 0,
-        repeatKey: null,
-        repeatKeyStartTime: 0,
-        currentKeys: [],
-
+        /**
+         *                                                                      .
+         *                                                                      .
+         * return my one child fin-canvas-component
+         *
+         * @method getComponent()
+         */
         getComponent: function() {
             var comp = this.children[0];
             return comp;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * start the paint loop at this.fps rate
+         *
+         * @method beginPainting()
+         */
         beginPainting: function() {
             var self = this;
             self.repaintNow = true;
@@ -2194,6 +2658,13 @@
             requestAnimationFrame(animate);
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * check to see if my size has changed, if so notify myself
+         *
+         * @method checksize()
+         */
         checksize: function() {
             var sizeNow = this.getBoundingClientRect();
             if (sizeNow.width !== this.size.width || sizeNow.height !== this.size.height) {
@@ -2201,10 +2672,24 @@
             }
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * my size has changed, lets resize
+         *
+         * @method sizeChangedNotification()
+         */
         sizeChangedNotification: function() {
             this.resize();
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * because HTMLCanvasElement doesn't obey normal HTML5 resize semantics, we need to update canvas and buffer sizes when our size changes
+         *
+         * @method resize()
+         */
         resize: function() {
             this.size = this.getBoundingClientRect();
 
@@ -2226,14 +2711,35 @@
             //});
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * my size has changed, lets resize
+         *
+         * @method sizeChangedNotification()
+         */
         resizeNotification: function() {
             //to be overridden
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * my bounds with origin 0,0 and width and height set according to [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect)
+         *
+         * @method getBounds()
+         */
         getBounds: function() {
             return this.bounds;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * force a safe paint right now and then flush the buffer to the screen
+         *
+         * @method paintNow()
+         */
         paintNow: function() {
             var gc = this.ctx;
             try {
@@ -2247,12 +2753,26 @@
             this.repaintNow = false;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * render the buffered drawing to the screen
+         *
+         * @method flushBuffer()
+         */
         flushBuffer: function() {
             if (this.buffer.width > 0 && this.buffer.height > 0) {
                 this.canvasCTX.drawImage(this.buffer, 0, 0);
             }
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * this is the entry point to the view-heirarchy sub-structure painting, passing in the graphics context gc
+         *
+         * @method paint(gc)
+         */
         paint: function(gc) {
             var comp = this.getComponent();
             if (comp) {
@@ -2260,7 +2780,15 @@
             }
         },
 
-        ofmousemove: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse move event
+         *
+         * @method finmousemove(e)
+         */
+
+        finmousemove: function(e) {
             var o = this.getOrigin();
             if (!this.dragging && this.mousedown) {
                 this.dragging = true;
@@ -2292,7 +2820,14 @@
             }
         },
 
-        ofmousedown: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse down event
+         *
+         * @method finmousedown(e)
+         */
+        finmousedown: function(e) {
 
             this.mouseLocation = this.g.point.create((e.offsetX || e.layerX), (e.offsetY || e.layerY));
             this.mousedown = true;
@@ -2307,7 +2842,14 @@
 
         },
 
-        ofmouseup: function() {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse up event
+         *
+         * @method finmouseup(e)
+         */
+        finmouseup: function() {
             if (this.dragging) {
                 this.dispatchEvent(new CustomEvent('fin-dragend', {
                     detail: {
@@ -2328,7 +2870,14 @@
             }));
         },
 
-        ofmouseout: function() {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse out event
+         *
+         * @method finmouseout(e)
+         */
+        finmouseout: function() {
             if (!this.mousedown) {
                 this.mouseLocation = this.g.point.create(-1, -1);
             }
@@ -2340,7 +2889,14 @@
             }));
         },
 
-        ofclick: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse click event
+         *
+         * @method finclick(e)
+         */
+        finclick: function(e) {
             this.mouseLocation = this.g.point.create((e.offsetX || e.layerX), (e.offsetY || e.layerY));
             this.dispatchEvent(new CustomEvent('fin-click', {
                 detail: {
@@ -2350,7 +2906,14 @@
             }));
         },
 
-        ofdblclick: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the mouse double click event
+         *
+         * @method findblclick(e)
+         */
+        findblclick: function(e) {
             this.mouseLocation = this.g.point.create((e.offsetX || e.layerX), (e.offsetY || e.layerY));
             this.dispatchEvent(new CustomEvent('fin-dblclick', {
                 detail: {
@@ -2360,7 +2923,14 @@
             }));
         },
 
-        ofkeydown: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the keydown event
+         *
+         * @method finkeydown(e)
+         */
+        finkeydown: function(e) {
             if (!this.hasFocus()) {
                 return;
             }
@@ -2397,7 +2967,14 @@
             }));
         },
 
-        ofkeyup: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the keyup event
+         *
+         * @method finkeyup(e)
+         */
+        finkeyup: function(e) {
             if (!this.hasFocus()) {
                 return;
             }
@@ -2421,7 +2998,14 @@
             }));
         },
 
-        offocusgained: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the focusgained event
+         *
+         * @method finfocusgained(e)
+         */
+        finfocusgained: function(e) {
             this.focused = true;
             this.dispatchEvent(new CustomEvent('fin-focus-gained', {
                 detail: {
@@ -2430,7 +3014,14 @@
             }));
         },
 
-        offocuslost: function(e) {
+        /**
+         *                                                                      .
+         *                                                                      .
+         * handle the focuslost event
+         *
+         * @method finfocuslost(e)
+         */
+        finfocuslost: function(e) {
             this.focused = false;
             this.dispatchEvent(new CustomEvent('fin-focus-lost', {
                 detail: {
@@ -2439,22 +3030,57 @@
             }));
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * tickle the repaint flag to on
+         *
+         * @method repaint()
+         */
         repaint: function() {
             this.repaintNow = true;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * getter accessor for the mouseLocation field
+         *
+         * @method getMouseLocation()
+         */
         getMouseLocation: function() {
             return this.mouseLocation;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * getter accessor for the origin field
+         *
+         * @method getOrigin()
+         */
         getOrigin: function() {
             return this.origin;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * answer if I have focus
+         *
+         * @method hasFocus()
+         */
         hasFocus: function() {
             return this.focused;
         },
 
+        /**
+         *                                                                      .
+         *                                                                      .
+         * try to take global input focus
+         *
+         * @method takeFocus()
+         */
         takeFocus: function() {
             var self = this;
             if (document.activeElement !== this.focuser) {
diff --git a/demo.html b/demo.html
index 262cf1061..210974fd8 100644
--- a/demo.html
+++ b/demo.html
@@ -20,8 +20,8 @@
 <body unresolved fullbleed>
   <fin-hypergrid>
     <!-- <fin-hypergrid-behavior-default></fin-hypergrid-behavior-default> -->
-    <!-- <fin-hypergrid-behavior-in-memory></fin-hypergrid-behavior-in-memory> -->
-    <fin-hypergrid-behavior-q url="ws://localhost:5000/"></fin-hypergrid-behavior-q>
+    <fin-hypergrid-behavior-in-memory></fin-hypergrid-behavior-in-memory>
+   <!--  <fin-hypergrid-behavior-q url="ws://localhost:5000/"></fin-hypergrid-behavior-q> -->
     <fin-hypergrid-excel></fin-hypergrid-excel>
   </fin-hypergrid>
 </body>
diff --git a/fin-hypergrid.html b/fin-hypergrid.html
index 52c0acdac..8c6834a18 100644
--- a/fin-hypergrid.html
+++ b/fin-hypergrid.html
@@ -1,3 +1,23 @@
+<!--
+
+The OpenFin Hypergrid is a high performant canvas based general grid control.  It is implemented as a Polymer HTML5 web-component. See [Polymer](https://www.polymer-project.org/) and [Web Components](http://www.w3.org/TR/components-intro/).
+
+<br><br>
+
+### The Hypergrid is dependent on several other OpenFin projects
+#### - of-canvas: a wrapper to provid a simpler interface to the HTML5 canvas component
+#### - rectangles: a small library providing Point and Rectangle objects
+#### - shadow-bar: a web-component based general scroll bar control
+
+<br><br>
+
+## Pluggable Grid Behaviors
+The Hypergrid design makes no assumptions about the data you wish to view which allows for external data sources and external manipulation and analytics.  Manipulations such as sorting, aggregation, and grouping can be achieved using best of breed high-performant real time tools designed for such purposes. All the code that impacts these operations has been factored into an Object called [PluggableGridBehavior](DefaultGridBehavior.html).  A PluggableGridBehavior can be thought of as a traditional tablemodel but with a little more responsibility.  There are Three example PluggableGridBehaviors provided, the base or DefaultGridBehavior, a QGridBehavior, and an InMemoryGridBehavior.
+
+@group OpenFin hypergrid
+@element fin-hypergrid
+@homepage http://github.com/openfin/fin-hypergrid
+-->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../fin-rectangle/fin-rectangle.html">
 <link rel="import" href="../fin-canvas/fin-canvas.html">
diff --git a/fin-hypergrid.pre.html b/fin-hypergrid.pre.html
index f5ca78e94..1f9491275 100644
--- a/fin-hypergrid.pre.html
+++ b/fin-hypergrid.pre.html
@@ -1,3 +1,23 @@
+<!--
+
+The OpenFin Hypergrid is a high performant canvas based general grid control.  It is implemented as a Polymer HTML5 web-component. See [Polymer](https://www.polymer-project.org/) and [Web Components](http://www.w3.org/TR/components-intro/).
+
+<br><br>
+
+### The Hypergrid is dependent on several other OpenFin projects
+#### - of-canvas: a wrapper to provid a simpler interface to the HTML5 canvas component
+#### - rectangles: a small library providing Point and Rectangle objects
+#### - shadow-bar: a web-component based general scroll bar control
+
+<br><br>
+
+## Pluggable Grid Behaviors
+The Hypergrid design makes no assumptions about the data you wish to view which allows for external data sources and external manipulation and analytics.  Manipulations such as sorting, aggregation, and grouping can be achieved using best of breed high-performant real time tools designed for such purposes. All the code that impacts these operations has been factored into an Object called [PluggableGridBehavior](DefaultGridBehavior.html).  A PluggableGridBehavior can be thought of as a traditional tablemodel but with a little more responsibility.  There are Three example PluggableGridBehaviors provided, the base or DefaultGridBehavior, a QGridBehavior, and an InMemoryGridBehavior.
+
+@group OpenFin hypergrid
+@element fin-hypergrid
+@homepage http://github.com/openfin/fin-hypergrid
+-->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../fin-rectangle/fin-rectangle.html">
 <link rel="import" href="../fin-canvas/fin-canvas.html">
diff --git a/gp.sh b/gp.sh
new file mode 100755
index 000000000..3467a7021
--- /dev/null
+++ b/gp.sh
@@ -0,0 +1,65 @@
+#!/bin/bash -e
+#
+# @license
+# Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+# This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+# The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+# The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+# Code distributed by Google as part of the polymer project is also
+# subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+#
+
+# This script pushes a demo-friendly version of your element and its
+# dependencies to gh-pages.
+
+# usage gp Polymer core-item [branch]
+# Run in a clean directory passing in a GitHub org and repo name
+org=$1
+repo=$2
+branch=${3:-"master"} # default to master when branch isn't specified
+
+# make folder (same as input, no checking!)
+mkdir $repo
+#git clone git@github.com:$org/$repo.git --single-branch
+git clone http://github.com/$org/$repo.git --single-branch
+# switch to gh-pages branch
+pushd $repo >/dev/null
+git checkout --orphan gh-pages
+
+# remove all content
+git rm -rf -q .
+
+# use bower to install runtime deployment
+bower cache clean $repo # ensure we're getting the latest from the desired branch.
+echo "{
+  \"name\": \"$repo#gh-pages\",
+  \"private\": true
+}
+" > bower.json
+echo "{
+  \"directory\": \"components\"
+}
+" > .bowerrc
+bower install --save $org/$repo#$branch
+
+cp -rf ../../core-component-page ./components/core-component-page
+cp -rf ../../webcomponentsjs ./components/webcomponentsjs
+cp -rf ../../polymer ./components/polymer
+cp -rf ../../NodeBind ./components/NodeBind
+cp -rf ../../TemplateBinding ./components/TemplateBinding
+cp -rf ../../URL ./components/URL
+cp -rf ../../observe-js ./components/observe-js
+cp -rf ../../polymer-expressions ./components/polymer-expressions
+cp -rf ../../polymer-gestures ./components/polymer-gestures
+cp -rf ../../fin-rectangle ./components/fin-rectangle
+cp -rf ../../fin-canvas ./components/fin-canvas
+
+# redirect by default to the component folder
+echo "<META http-equiv="refresh" content=\"0;URL=components/$repo/\">" >index.html
+
+# send it all to github
+git add -A .
+git commit -am 'seed gh-pages'
+git push -u origin gh-pages --force
+
+popd >/dev/null
diff --git a/package.json b/package.json
index 0afad5148..706102eac 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "grunt-contrib-concat": "^0.5.0"
   },
   "devDependencies": {
-    "adm-zip": "^0.4.4",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-connect": "^0.9.0",
@@ -20,8 +19,7 @@
     "jshint": "^2.5.0",
     "jshint-stylish": "^1.0.0",
     "load-grunt-tasks": "^1.0.0",
-    "mocha": "^2.0.1",
-    "web-component-tester": "^2.0.0"
+    "web-component-tester": "^2.0.1"
   },
   "scripts": {
     "test": "grunt test"