From 999da3c25b5a1529cf706b918eacefe0a1391587 Mon Sep 17 00:00:00 2001
From: TaDaa <trevor002@gmail.com>
Date: Sat, 1 Oct 2016 11:36:13 -0400
Subject: [PATCH] initial commit -- not ready yet

---
 README.md         | 110 +++++++
 build.js          |  37 +++
 dist/container.js |  11 +
 dist/index.js     |   2 +
 dist/poppy.css    |  76 +++++
 dist/poppy.js     | 776 +++++++++++++++++++++++++++++++++++++++++++++
 libs/container.js |   9 +
 libs/index.js     |   2 +
 libs/poppy.css    |  76 +++++
 libs/poppy.js     | 787 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  35 +++
 webpack.config.js |  86 +++++
 12 files changed, 2007 insertions(+)
 create mode 100644 README.md
 create mode 100644 build.js
 create mode 100644 dist/container.js
 create mode 100644 dist/index.js
 create mode 100644 dist/poppy.css
 create mode 100644 dist/poppy.js
 create mode 100644 libs/container.js
 create mode 100644 libs/index.js
 create mode 100644 libs/poppy.css
 create mode 100644 libs/poppy.js
 create mode 100644 package.json
 create mode 100644 webpack.config.js

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5c4e93a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,110 @@
+# C2
+
+C2 is a helper library for creating custom components that render to canvas.  Currently C2 is only compatible with D3 v4.  
+
+C2 works by allowing you to define custom element tags that are intended to render to canvas.
+
+For example:
+```
+//define custom component tag
+
+var Rect = c2.element(function (context) {
+  context.fillRect(this.x,this.y,this.width,this.height);
+}).attributes({
+  x : c2.types.float,
+  y : c2.types.float,
+  width: c2.types.float,
+  height : c2.types.float
+});
+
+//the attributes method above is used to compile optimized setAttribute 
+//and getAttribute functions.  Attributes are also used by c2.animate to
+//generate optimized tweening functions.  
+
+
+
+
+
+
+//c2.Context2d is a custom tag provided by c2 that selects the 2d context from a canvas element
+
+var context = d3.select('canvas').select(c2.Context2d)
+  //tick is an event that triggers before each render frame
+  //if you need to use an after render event, use "tock"
+  .on('tick',function () {
+    this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height);
+  })
+var selection = context.selectAll(Rect).data(data,function (d,i) {return i;});
+selection.enter()
+  .append(Rect)
+  .attr('x',0)
+  .attr('y',0)
+  .attr('width',0)
+  .attr('height',0)
+.merge(selection)
+
+//c2.animate is uses its own internal scheduler, groups tweens by
+//start/duration/easing and is generally faster than d3.transition
+//as well as being easier on the garbage collector.
+.call(c2.animate()
+  .to({
+    x : function (d,i) {return Math.random()*1000},
+    y: function (d,i) {return Math.random()*500},
+    height : 1,
+    width : 1
+  });
+  
+selection.exit()
+  .call(
+    c2.animate()
+      .to({
+        width : 0,
+        height: 0
+      })
+      .remove()
+  );
+```
+
+
+### TODO
+WebGL support
+api/docs
+
+### Demos (with code)
+1) <a href="https://tadaa.github.io/c2/demos/bars.html" target="_blank">Bars</a>
+
+2) <a href="https://tadaa.github.io/c2/demos/donut.html" target="_blank">Donut (uses Path2D for canvas with d3.arc)</a>
+
+
+
+### Quickstart
+1) Download script through npm or download/include the appropriate script.  Pre-minified scripts are available.
+
+`<script src="/path/to/dist/c2.js">`
+
+or
+
+`npm install --save-dev c2`
+
+All scripts:
+
+* dist/c2.js
+
+* dist/c2.min.js
+
+* dist/c2.amd.js
+
+* dist/c2.amd.min.js
+
+* dist/c2.node.js
+
+* dist/c2.node.min.js
+
+* dist/c2.umd.js
+
+* dist/c2.umd.min.js
+
+
+2) Make sure you install d3.js.  c2.js can be loaded before or after d3.
+
+3) Review demos and code away!
diff --git a/build.js b/build.js
new file mode 100644
index 0000000..86cd62a
--- /dev/null
+++ b/build.js
@@ -0,0 +1,37 @@
+var babel = require('babel-core'),
+fs = require('fs');
+
+copy ("index.js") ("poppy.css");
+transform_jsx ("container.js") ("poppy.js")
+
+
+function copy (file) {
+    fs.readFile("libs/"+file,function (err,data) {
+        fs.writeFile("dist/"+file,data,function (err,data) {
+            if (err) {
+                console.error(err.toString());
+            } else {
+                console.error("done writing " + file);
+            }
+        });
+    });
+    return copy;
+}
+function transform_jsx (file) {
+    babel.transformFile("libs/"+file,{
+        'presets' : ['react']
+    },function (err,code) {
+        if (err) {
+            console.error(err.toString());
+        } else {
+            fs.writeFile("dist/"+file,code.code,function (err) {
+                if (err) {
+                    console.error(err.toString());
+                } else {
+                    console.error("done writing " + file);
+                }
+            });
+        }
+    });
+    return transform_jsx;
+}
diff --git a/dist/container.js b/dist/container.js
new file mode 100644
index 0000000..c7978d8
--- /dev/null
+++ b/dist/container.js
@@ -0,0 +1,11 @@
+var React = require('react');
+module.exports = React.createClass({
+    displayName: 'exports',
+
+    'shouldComponentUpdate': function () {
+        return !this.loaded && (this.loaded = true);
+    },
+    'render': function () {
+        return React.createElement('div', { className: 'poppy-container', style: { position: 'absolute', display: 'inline', top: 0, pointerEvents: 'none', zIndex: 6000 } });
+    }
+});
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000..ad6f3bf
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,2 @@
+module.exports = require('./poppy.js');
+module.exports.Container = require('./container.js');
diff --git a/dist/poppy.css b/dist/poppy.css
new file mode 100644
index 0000000..bc5410d
--- /dev/null
+++ b/dist/poppy.css
@@ -0,0 +1,76 @@
+.poppy {
+    visiblity:hidden;
+    display:inline-block;
+    opacity:0;
+    position:absolute;
+}
+.poppy-popover-background {
+    opacity:0.925;
+    z-index:0;
+    backface-visibility:hidden;
+    background:#000;
+    transform:translateZ(0);
+}
+.poppy-arrow {
+    position:absolute;
+    z-index:-1;
+    background:inherit;
+    transition:  all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    transform:rotateZ(45deg);
+}
+.poppy-background-overlay {
+    z-index:0;
+    background:inherit;
+    border-radius:4px;
+    border-top-width:0;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    transform: translateZ(0);
+    height: 100%;
+    transition : all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+}
+.poppy-content {
+    display:inline-block;
+    z-index: 1;
+    position: relative;
+    pointer-events:all;
+    transition:none;
+    padding-left: 10px;
+    width: auto;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+    box-sizing: border-box;
+}
+.poppy-overflow {
+    position:relative;
+    display: inline-block;
+    z-index:0;
+    padding:0;
+}
+.poppy-content-wrapper {
+    position:absolute;
+    pointer-events:all;
+    width:auto;
+    display:inline-block;
+    transition:all 450ms cubic-bezier(0.23,1,0.32,1) 0ms;
+    overflow:hidden;
+    z-index:1;
+}
+.poppy-title-wrapper {
+    z-index:1;
+    position:absolute;
+    display:inline-block;
+    width: 100%;
+    text-align: center;
+    transition: none;
+    color: #fff;
+}
+.poppy-title {
+    display: inline-block;
+    padding: 10px;
+}
diff --git a/dist/poppy.js b/dist/poppy.js
new file mode 100644
index 0000000..aa789a7
--- /dev/null
+++ b/dist/poppy.js
@@ -0,0 +1,776 @@
+//
+//TODO cleanup and opensource
+//TODO add groups
+var SHOWING = {
+    'NONE': 0,
+    'MOUSEOVER': 1,
+    'CONTENT': 2,
+    'CLICK': 4,
+    'PROPERTY': 8
+},
+    LEFT = 1,
+    RIGHT = 2,
+    TOP = 3,
+    BOTTOM = 4;
+
+var defaults = {
+    //'onContentMouseLeave' : undefined,
+    //'onContentMouseEnter' : undefined,
+    'backgroundStyle': undefined,
+    'arrowStyle': {},
+    'foregroundStyle': undefined,
+    'wrapperStyle': undefined,
+    'content': '',
+    'className': '',
+    'title': '',
+    'position': {
+        'overflow': 'auto',
+        'position': 'relative',
+        'top': 0,
+        'height': '100%',
+        'left': 0,
+        'width': '100%'
+    },
+    'constrainTo': 'parent',
+    'persistOverContent': false,
+    'showOnMouseEnter': true,
+    'hideOnMouseLeave': true,
+    'bindWindowResize': false,
+    'bindScroll': false,
+    //'hideOnClickOut' : false,
+    'toggleOnClick': false,
+    'constrainWidth': true,
+    'constrainHeight': true,
+    'track': false,
+    //'constrainLeft' : true,
+    //'constrainTop' : true,
+    'arrowSize': 15,
+    //'arrowPosition' : {},
+    'region': undefined,
+    'show': undefined,
+    'showDelay': 300,
+    'hideDelay': 320
+},
+    getDefaults = eval('(function () {return ' + JSON.stringify(defaults) + ';})');
+(function (defaults) {
+    var p, item;
+    for (p in defaults) {
+        item = defaults[p];
+        if (item && typeof item === 'object') {
+            defaults[p] = eval('(function (obj) {var result =' + JSON.stringify(item) + ',p; for (p in obj) {result[p]=obj[p]} return result;})');
+        }
+    }
+})(defaults);
+
+function assign_defaults(obja) {
+    var _defaults = getDefaults(),
+        val,
+        d,
+        p,
+        q;
+    for (p in obja) {
+        if ((val = obja[p]) !== undefined && val !== null) {
+            if (typeof val === 'object' && typeof (d = _defaults[p]) === 'object' && d) {
+                for (q in val) {
+                    d[q] = val[q];
+                }
+            } else {
+                _defaults[p] = val;
+            }
+        }
+    }
+    return _defaults;
+}
+
+var React = require('react'),
+    ReactDOM = require('react-dom'),
+    Popover = React.createClass({
+    displayName: 'Popover',
+
+    'shouldComponentUpdate': function (props, state) {
+        var last = this.state || {},
+            position1 = last.position || {},
+            position2 = state.position || {},
+            result = this.minWidth !== position2.minWidth || this.minHeight !== position2.minHeight || this.maxWidth !== position2.maxWidth || last.content !== state.content || last.title !== state.title || this.maxHeight !== position2.maxHeight;
+        return result;
+    },
+    'overflowStyle': {},
+    'wrapperStyle': {},
+    'render': function () {
+        var state = this.state;
+        if (!state) {
+            return null;
+        }
+        var title = state.title,
+            position = state.position,
+            maxWidth = position.maxWidth,
+            maxHeight = position.maxHeight,
+            minWidth = position.minWidth,
+            minHeight = position.minHeight,
+            content = state.content,
+            overflowStyle = this.overflowStyle,
+            wrapperStyle = this.wrapperStyle;
+
+        overflowStyle.overflow = content ? 'auto' : null;
+        this.maxHeight = overflowStyle.maxHeight = wrapperStyle.maxHeight = maxHeight;
+        this.maxWidth = overflowStyle.maxWidth = wrapperStyle.maxWidth = maxWidth;
+        this.minHeight = overflowStyle.minHeight = wrapperStyle.minHeight = minHeight;
+        this.minWidth = overflowStyle.minWidth = wrapperStyle.minWidth = minWidth;
+
+        return React.createElement(
+            'span',
+            { className: "poppy " + (state.className || ''), onMouseOver: this._onEnter, onMouseOut: this._onExit },
+            React.createElement(
+                'span',
+                { ref: 'inner', className: 'poppy-background' },
+                React.createElement('div', { ref: 'arrow', className: 'poppy-arrow', style: state.arrowStyle }),
+                React.createElement('div', { ref: 'wrapper', className: 'poppy-background-overlay', style: state.wrapperStyle })
+            ),
+            React.createElement(
+                'div',
+                { ref: 'content', className: 'poppy-content-wrapper', style: wrapperStyle },
+                title ? React.createElement(
+                    'div',
+                    { ref: 'titleWrapper', className: 'poppy-title-wrapper' },
+                    React.createElement(
+                        'span',
+                        { ref: 'title', className: 'poppy-title' },
+                        state.title
+                    )
+                ) : null,
+                React.createElement(
+                    'div',
+                    { ref: 'overflow', className: 'poppy-overflow', style: overflowStyle },
+                    content ? React.createElement(
+                        'div',
+                        { ref: 'popover', className: 'poppy-content' },
+                        ' ',
+                        content || '',
+                        ' '
+                    ) : React.createElement('span', { ref: 'popover' })
+                )
+            )
+        );
+    },
+    '_onEnter': function () {
+        this.state.onEnterContent && this.state.onEnterContent(SHOWING.CONTENT);
+    },
+    '_onExit': function () {
+        this.state.onLeaveContent && this.state.onLeaveContent(SHOWING.CONTENT);
+    }
+}),
+    overlay_template = document.createElement('span');
+overlay_template.innerHTML = '<div class="poppy-container" style="position:absolute;top:0px;display:inline;pointer-events:none;z-index:6000"></div>`';
+overlay_template = overlay_template.lastChild;
+
+module.exports = React.createClass({
+    displayName: 'exports',
+
+    'getInitialState': function () {
+        var state = assign_defaults(this.props);
+        this._lastTargetRect = { left: 0, top: 0, width: 0, height: 0 };
+        this.settings = {
+            arrowStyle: {
+                width: defaults.arrowSize,
+                height: defaults.arrowSize
+            },
+            constrainTo: defaults.constrainTo,
+            showing: 0,
+            showDelay: defaults.showDelay,
+            hideDelay: defaults.hideDelay,
+            //arrowSize:defaults.arrowSize,
+            track: defaults.track,
+            constrainHeight: defaults.constrainHeight,
+            constrainWidth: defaults.constrainWidth,
+            className: defaults.className,
+
+            //showOnMouseEnter : defaults.showOnMouseEnter,
+            //hideOnMouseLeave : defaults.hideOnMouseLeave,
+            //toggleOnClick : defaults.toggleOnClick,
+            //bindWindowResize : defaults.bindWindowResize,
+            //persistOverContent : defaults.persistOverContent,
+            //bindScrollContainer : defaults.bindScrollContainer
+
+            title: ''
+        };
+        this.componentWillUpdate(this.props, state);
+        return state;
+    },
+    'componentDidMount': function () {
+        var me = this,
+            settings = this.state.settings,
+            target = ReactDOM.findDOMNode(this),
+            window = target.ownerDocument.defaultView;
+
+        me.setState({
+            'target': target
+        });
+    },
+    'componentWillUnmount': function () {
+        var target = this.state.target,
+            doc = target.ownerDocument,
+            overlay = doc.body.querySelector('.ui-popover-overlay');
+        window = doc.defaultView;
+
+        if (this.settings && (target = this.settings.target)) {
+            target.removeEventListener('mouseenter', this._onMouseEnter);
+            target.removeEventListener('mouseleave', this._onMouseLeave);
+            target.removeEventListener('click', this._onClick);
+        }
+        this.untrack();
+        this._resize_timer && clearTimeout(this._resize_timer);
+        this._show_timer && clearTimeout(this._show_timer);
+        this._render_timer && clearTimeout(this._render_timer);
+        this.overlay && this.overlay.parentNode.removeChild(this.popoverEl);
+        this._init_timer && clearTimeout(this._init_timer);
+
+        this.state.settings.bindWindowResize && window.removeEventListener('resize', this._onResize);
+        this._boundScroll && this._boundScroll.removeEventListener('scroll', this._onScroll);
+    },
+    'componentWillUpdate': function (props, state) {
+        this._updateSync(props, state);
+        !this._render_timer && (this._render_timer = setTimeout(this._updateAsync, 16));
+    },
+    '_updateSync': function (props, state) {
+        state = state || this.state;
+        var settings = this.settings,
+            bindWindowResize = props.bindWindowResize || false,
+            target = state && state.target,
+            ltarget = settings.target,
+            track = props.track || false,
+            view = target && target.ownerDocument.defaultView,
+            bindScroll = props.bindScroll === true ? 'window' : props.bindScroll,
+            boundScroll = this._boundScroll,
+            scroller = settings.target ? this._upwardSelector(bindScroll, settings) : false;
+
+        if (bindWindowResize !== settings.bindWindowResize) {
+            if (bindWindowResize) {
+                view && (view.addEventListener('resize', this._onResize), settings.bindWindowResize = true);
+            } else {
+                view && view.removeEventListener('resize', this._onResize);
+                settings.bindWindowResize = false;
+            }
+        }
+
+        if (scroller !== boundScroll) {
+            if (boundScroll) {
+                boundScroll.removeEventListener('scroll', this._onScroll);
+                this._boundScroll = false;
+            }
+            if (scroller) {
+                scroller.addEventListener('scroll', this._onScroll, true);
+                this._boundScroll = scroller;
+            }
+        }
+
+        if (track !== settings.track) {
+            if (track) {
+                settings.track = true;
+                this.track();
+            } else {
+                settings.track = false;
+                this.untrack();
+            }
+        }
+
+        if (target && ltarget !== target) {
+            target.addEventListener('mouseenter', this._onMouseEnter);
+            target.addEventListener('mouseleave', this._onMouseLeave);
+            target.addEventListener('click', this._onClick);
+            settings.target = target;
+            if (ltarget) {
+                ltarget.removeEventListener('mouseenter', this._onMouseEnter);
+                ltarget.removeEventListener('mouseleave', this._onMouseLeave);
+                ltarget.removeEventListener('click', this._onClick);
+            }
+        }
+
+        if (props.persistOverContent) {
+            settings.persistOverContent = true;
+            settings.onEnterContent = this.show;
+            settings.onLeaveContent = this.hide;
+        } else {
+            settings.persistOverContent = false;
+            settings.onEnterContent = false;
+            settings.onLeaveContent = false;
+        }
+
+        settings.toggleOnClick = props.toggleOnClick !== undefined ? props.toggleOnClick : defaults.toggleOnClick;
+        settings.showOnMouseEnter = props.showOnMouseEnter !== undefined ? props.showOnMouseEnter : defaults.showOnMouseEnter;
+        settings.hideOnMouseLeave = props.hideOnMouseLeave !== undefined ? props.hideOnMouseLeave : defaults.hideOnMouseLeave;
+        settings.constrainHeight = props.constrainHeight !== undefined ? props.constrainHeight : defaults.constrainHeight;
+        settings.constrainWidth = props.constrainWidth !== undefined ? props.constrainWidth : defaults.constrainWidth;
+    },
+    '_updateAsync': function () {
+        this._render_timer = undefined;
+
+        if (!this.settings.target) {
+            return;
+        }
+
+        var me = this,
+            props = this.props,
+            show = props.show,
+            settings = this.settings,
+            showing = settings.showing & SHOWING.PROPERTY,
+            doc = settings.target.ownerDocument,
+            body = doc.body,
+            overlay = this._upwardSelector(".poppy-container"),
+            popover = this.popover,
+            arrowStyle = settings.arrowStyle,
+            arrowSize = props.arrowSize !== undefined ? props.arrowSize : defaults.arrowSize,
+            region = props.region;
+
+        settings.constrainTo = props.constrainTo || defaults.constrainTo;
+
+        settings.constrainTarget = this._upwardSelector(settings.constrainTo, settings);
+
+        if (region && region !== settings.last_prop_region) {
+            if (region === 'top') {
+                settings.region = TOP;
+            } else if (region === 'left') {
+                settings.region = LEFT;
+            } else if (region === 'right') {
+                settings.region = RIGHT;
+            } else if (region === 'bottom') {
+                settings.region = BOTTOM;
+            }
+        } else if (!region) {
+            settings.region = defaults.region;
+        }
+
+        settings.last_prop_region = region;
+        settings.title = props.title || defaults.title;
+        settings.content = props.content || defaults.content;
+        settings.className = props.className || defaults.className;
+
+        if (settings.arrowSize !== arrowSize) {
+            settings.arrowSize = arrowSize;
+            settings.arrowSize3_4 = arrowSize * .75;
+            settings.arrowSize1_2 = arrowSize * .5;
+            settings.arrowSize2_1 = arrowSize * 2;
+            settings.arrowSize3_2 = arrowSize * 1.5;
+            arrowStyle.height = arrowStyle.width = arrowSize;
+        }
+
+        this._adjustPosition(this.settings);
+
+        if (!overlay || overlay === body) {
+            body.appendChild(overlay = this.overlay = overlay_template.cloneNode(true));
+        } else if (!this.overlay) {
+            this.overlay = overlay;
+        }
+
+        if (!popover) {
+            var test = document.createElement('div');
+            popover = this.popover = ReactDOM.render(React.createElement(Popover, null), test);
+            overlay.appendChild(test.lastChild);
+        } else if (this.overlay.ownerDocument !== doc && this.popoverEl) {
+            overlay.appendChild(this.popoverEl);
+            this.overlay = overlay;
+        }
+
+        popover.setState(settings);
+        if (!this.popoverEl) {
+            this.popoverEl = ReactDOM.findDOMNode(popover);
+        }
+
+        if (this._init_timer) {
+            cancelAnimationFrame(this._init_timer);
+        }
+        this._init_timer = requestAnimationFrame(function () {
+            if (showing && !show) {
+                me.hide(SHOWING.PROPERTY);
+            } else if (!showing && show) {
+                me.show(SHOWING.PROPERTY);
+            }
+
+            me._init_timer = false;
+            me._updatePositions();
+        });
+    },
+    '_onResize': function () {
+        var me = this;
+        if (this._resize_timer) {
+            clearTimeout(this._resize_timer);
+        }
+        this._resize_timer = setTimeout(function () {
+            me._resize_timer = undefined;
+            me.setState({});
+        }, 60);
+    },
+    '_onMouseEnter': function () {
+        if (this.settings.showOnMouseEnter) {
+            this.show(SHOWING.MOUSEOVER);
+        }
+    },
+    '_onMouseLeave': function () {
+        if (this.settings.hideOnMouseLeave) {
+            this.hide(SHOWING.MOUSEOVER);
+        }
+    },
+    '_onClick': function () {
+        if (this.settings.toggleOnClick) {
+            if (this.settings.showing & SHOWING.CLICK) {
+                this.hide(SHOWING.CLICK);
+            } else {
+                this.show(SHOWING.CLICK);
+            }
+        }
+    },
+    '_adjustPosition': function (settings) {
+        var rect = settings.target.getBoundingClientRect(),
+            parentRect = settings.constrainTarget.getBoundingClientRect(),
+            region = settings.region,
+            leftSpace = settings.leftSpace = rect.left - parentRect.left,
+            rightSpace = settings.rightSpace = parentRect.left + parentRect.width - (rect.left + rect.width),
+            topSpace = settings.topSpace = rect.top - parentRect.top,
+            bottomSpace = settings.bottomSpace = parentRect.top + parentRect.height - (rect.top + rect.height),
+            arrowSize = settings.arrowSize,
+            position = settings.position,
+            half_size = settings.arrowSize3_4,
+            constrainHeight = settings.constrainHeight,
+            constrainWidth = settings.constrainWidth,
+            double_size = arrowSize * 2;
+
+        if (!position) {
+            position = settings.position = {};
+        }
+
+        if (!region) {
+            if (leftSpace > bottomSpace && leftSpace > topSpace && leftSpace >= rightSpace && topSpace > 30 && bottomSpace > 30) {
+                region = settings.region = LEFT;
+            } else if (rightSpace > bottomSpace && rightSpace > topSpace && topSpace > 30 && bottomSpace > 30) {
+                region = settings.region = RIGHT;
+            } else if (topSpace > bottomSpace) {
+                region = settings.region = TOP;
+            } else {
+                region = settings.region = BOTTOM;
+            }
+        }
+
+        if (region === LEFT) {
+            position.minWidth = 0;
+            position.minHeight = double_size;
+            position.top = position.left = 0;
+            constrainWidth && (position.maxWidth = Math.max(leftSpace - half_size - 25, double_size));
+            constrainHeight && (position.maxHeight = Math.max(topSpace + bottomSpace + rect.height - 30, 5));
+        } else if (region === RIGHT) {
+            position.minWidth = 0;
+            position.top = 0;
+            position.minHeight = double_size;
+            position.left = rect.left + rect.width + half_size;
+            constrainWidth && (position.maxWidth = Math.max(rightSpace - half_size - 25, double_size));
+            constrainHeight && (position.maxHeight = Math.max(topSpace + bottomSpace + rect.height - 30, 5));
+        } else if (region === BOTTOM) {
+            position.minHeight = 'auto';
+            position.top = rect.top + rect.height + half_size;
+            position.left = 0;
+            position.minWidth = double_size;
+            constrainHeight && (position.maxHeight = Math.max(bottomSpace - half_size - 5, 25));
+            constrainWidth && (position.maxWidth = Math.max(leftSpace + rightSpace + rect.width - 30, 25));
+        } else {
+            position.minHeight = 'auto';
+            position.top = position.left = 0;
+            position.minWidth = double_size;
+            constrainHeight && (position.maxHeight = Math.max(topSpace - half_size + 2, 25));
+            constrainWidth && (position.maxWidth = Math.max(leftSpace + rightSpace + rect.width - 30, 25));
+        }
+    },
+    '_onScroll': function () {
+        !this._render_timer && this._updateAsync();
+    },
+    '_track_timer': undefined,
+    '_doTrack': function () {
+        this._track_timer = setTimeout(this._doTrack, 16);
+
+        var settings = this.settings,
+            target = settings.target;
+
+        if (!target || !this.popover) {
+            return;
+        }
+
+        var targetRect = target.getBoundingClientRect(),
+            lastTargetRect = this._lastTargetRect;
+
+        if (targetRect.top !== lastTargetRect.top || targetRect.left !== lastTargetRect.left || targetRect.width !== lastTargetRect.width || targetRect.height !== lastTargetRect.height || targetRect.ownerDocument !== this._lastTargetDoc) {
+            this._lastTargetRect = targetRect;
+            this._lastTargetDoc = targetRect.ownerDocument;
+            !this._render_timer && this._updateAsync();
+        }
+    },
+    'track': function () {
+        if (!this._track_timer) {
+            this._track_timer = setTimeout(this._doTrack, 16);
+        }
+        return this;
+    },
+    'untrack': function () {
+        if (this._track_timer) {
+            clearTimeout(this._track_timer);
+            this._track_timer = false;
+        }
+        return this;
+    },
+    'refresh': function () {
+        this.setState({});
+        return this;
+    },
+    'hide': function (trigger) {
+        var me = this,
+            settings = this.settings,
+            showing = settings.showing;
+        if (!showing) {
+            return;
+        }
+
+        if (showing & trigger) {
+            settings.showing -= trigger;
+        } else {
+            return;
+        }
+
+        var node = this.popoverEl,
+            style = node.style;
+        this._show_timer && clearTimeout(this._show_timer);
+        this._show_timer = setTimeout(function () {
+            if (settings.showing) {
+                return;
+            }
+            !node.$listener && node.addEventListener('transitionend', node.$listener = function () {
+                node.removeEventListener('transitionend', node.$listener);
+                node.$listener = false;
+                !settings.showing && (node.style.visibility = 'hidden');
+            });
+            me._show_timer = undefined;
+            style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+            if (settings.region === RIGHT) {
+                style.transform = 'translateX(30px)translateY(0px)';
+            } else if (settings.region === LEFT) {
+                style.transform = 'translateX(-30px)translateY(0px)';
+            } else if (settings.region === TOP) {
+                style.transform = 'translateX(0px)translateY(-30px)';
+            } else {
+                style.transform = 'translateX(0px)translateY(30px)';
+            }
+            style.opacity = 0;
+            me.props.onHide && me.props.onHide();
+        }, settings.hideDelay);
+    },
+    'show': function (trigger) {
+        var me = this,
+            settings = this.settings,
+            node = this.popoverEl,
+            style = node.style,
+            reset = true,
+            was_showing = settings.showing;
+
+        settings.showing |= trigger;
+        if (was_showing) {
+            return;
+        } else if (this._show_timer) {
+            clearTimeout(this._show_timer);
+            this._show_timer = undefined;
+            reset = false;
+        }
+        node.$listener && node.removeEventListener('transitionend', node.$listener);
+        node.$listener = false;
+
+        if (reset) {
+            this._show_timer = setTimeout(function () {
+                if (!settings.showing) {
+                    return;
+                }
+                me.props.onShow && me.props.onShow();
+                me._show_timer = undefined;
+                style.transition = null;
+                if (settings.region === RIGHT) {
+                    style.transfrom = 'translateX(30px)translateY(0px)';
+                } else if (settings.region === LEFT) {
+                    style.transform = 'translateX(-30px)translateY(0px)';
+                } else if (settings.region === TOP) {
+                    style.transform = 'translateX(0px)translateY(-30px)';
+                } else {
+                    style.transform = 'translateX(0px)translateY(30px)';
+                }
+                me._show_timer = setTimeout(function () {
+                    me._show_timer = undefined;
+                    style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+                    style.visibility = null;
+                    style.opacity = 1;
+                    style.transform = 'translateX(0px)translateY(0px)';
+                }, settings.showDelay);
+            });
+        } else {
+            style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+            style.visibility = null;
+            style.opacity = 1;
+            style.transform = 'translateX(0px)translateY(0px)';
+        }
+    },
+    '_upwardSelector': function (selector, settings) {
+        var target = settings.target,
+            parent,
+            document = target.ownerDocument;
+
+        if (!selector) {
+            return selector;
+        } else if (typeof selector === 'string') {
+            if (selector === 'body') {
+                return document.body;
+            } else if (selector === 'parent') {
+                return target && target.parentNode;
+            } else if (selector === 'window') {
+                return target && target.ownerDocument.defaultView;
+            } else {
+                while (target) {
+                    if (target.matches && target.matches(selector)) {
+                        return target;
+                    }
+                    target = target.parentNode;
+                }
+                return document.body;
+            }
+        } else if (target = ReactDOM.findDOMNode(selector)) {
+            return target;
+        }
+        return selector;
+    },
+    '_updatePositions': function () {
+        var target = this.settings.target;
+        if (!target) {
+            return;
+        }
+        var overflow = this.popover.refs.overflow,
+            overflowStyle = overflow.style,
+            overflowRect,
+            popoverRect = this.popover.refs.popover.getBoundingClientRect(),
+            wrapperStyle = this.popover.refs.wrapper.style,
+            arrow = this.popover.refs.arrow,
+            arrowelStyle = arrow.style,
+            contentStyle = this.popover.refs.content.style,
+            title = this.popover.refs.title,
+            titleRect = title && title.getBoundingClientRect(),
+            titleWrapper = this.popover.refs.titleWrapper,
+            titleWrapperRect = titleWrapper && titleWrapper.getBoundingClientRect(),
+            titleWidth = titleRect && titleRect.width || 0,
+            titleHeight = titleRect && titleRect.height || 0,
+            targetRect = target.getBoundingClientRect(),
+            targetTop = targetRect.top,
+            targetWidth = targetRect.width,
+            halfTargetWidth = targetWidth / 2,
+            targetHeight = targetRect.height,
+            halfTargetHeight = targetHeight / 2,
+            targetLeft = targetRect.left,
+            settings = this.settings,
+            parentRect = settings.constrainTarget.getBoundingClientRect(),
+            offsetTop,
+            offsetLeft,
+            parentTop = offsetTop = parentRect.top,
+            parentLeft = offsetLeft = parentRect.left,
+            arrowLeft = offsetLeft | 0,
+            arrowTop = offsetTop | 0,
+            width,
+            height,
+            region = settings.region,
+            spaceLeft = settings.leftSpace,
+            spaceTop = settings.topSpace,
+            arrowSize = settings.arrowSize | 0,
+            size1_2 = settings.arrowSize1_2,
+            size3_4 = settings.arrowSize3_4,
+            size2_1 = settings.arrowSize2_1,
+            size3_2 = settings.arrowSize3_2,
+            arrowStyle = settings.arrowStyle,
+            upperBounds,
+            lowerBounds,
+            x = settings.position.left,
+            y = settings.position.top,
+            c;
+
+        overflowStyle.paddingTop = titleHeight + 'px';
+        overflowStyle.maxHeight = Math.max(Math.round(this.settings.position.maxHeight - titleHeight), 0) + 'px';
+
+        overflowRect = overflow.getBoundingClientRect();
+        width = Math.max(overflowRect.width, titleWidth);
+        height = overflowRect.height;
+
+        if (!this.settings.target) {
+            return;
+        }
+        if (region === TOP || region === BOTTOM) {
+            lowerBounds = 5;
+            upperBounds = parentLeft + parentRect.width - 5;
+            offsetLeft = targetLeft + halfTargetWidth - width / 2;
+            if (offsetLeft < lowerBounds) {
+                offsetLeft = lowerBounds;
+            }
+            if ((c = targetLeft + targetWidth - size3_2) < lowerBounds) {
+                offsetLeft = c;
+            }
+            if (offsetLeft > (c = upperBounds - width)) {
+                offsetLeft = c;
+            }
+            if ((c = targetLeft + arrowSize) > upperBounds) {
+                offsetLeft = c - width;
+            }
+
+            arrowLeft += spaceLeft + halfTargetWidth - arrowSize;
+            arrowLeft = Math.max(Math.min(arrowLeft, offsetLeft + width - size2_1), offsetLeft) + size1_2;
+            x = offsetLeft;
+            if (region === TOP) {
+                y = targetTop - height - size3_4 - 9;
+                arrowTop = y + height - size1_2;
+            } else {
+                arrowTop = y - size1_2;
+            }
+        } else if (region === LEFT || region === RIGHT) {
+            offsetTop += spaceTop + targetHeight - halfTargetHeight - height / 2;
+            upperBounds = parentTop + parentRect.height - 5;
+            lowerBounds = 5;
+
+            if (offsetTop < lowerBounds) {
+                offsetTop = lowerBounds;
+            }
+            if ((c = targetTop + targetHeight - size3_2) < lowerBounds) {
+                offsetTop = c;
+            }
+            if (offsetTop > (c = upperBounds - height)) {
+                offsetTop = c;
+            }
+            if ((c = targetTop + arrowSize) > upperBounds) {
+                offsetTop = c - height;
+            }
+            arrowTop += spaceTop + halfTargetHeight - arrowSize;
+            arrowTop = Math.max(Math.min(arrowTop, offsetTop + height - size2_1), offsetTop) + size1_2;
+            y = offsetTop;
+            if (region === LEFT) {
+                x = targetLeft - width - size3_4 - 6;
+                arrowLeft = x + width - size1_2 - 1;
+            } else {
+                x = targetLeft + targetWidth + size3_4;
+                arrowLeft = x - size1_2 + 1;
+            }
+        }
+
+        contentStyle.width = wrapperStyle.width = (width | 0) + 'px';
+        arrowelStyle.top = (arrowTop | 0) + 'px';
+        arrowelStyle.left = (arrowLeft | 0) + 'px';
+        wrapperStyle.top = contentStyle.top = (y | 0) + 'px';
+        wrapperStyle.left = contentStyle.left = (x | 0) + 'px';
+        wrapperStyle.height = (height | 0) + 'px';
+
+        this.settings.showing && (this.popoverEl.style.visiblity = null);
+    },
+    'render': function () {
+        var children = this.props.children;
+        if (typeof children === 'string') {
+            children = React.createElement(
+                'span',
+                null,
+                children
+            );
+        }
+        return children || null;
+    }
+});
\ No newline at end of file
diff --git a/libs/container.js b/libs/container.js
new file mode 100644
index 0000000..ff54b7f
--- /dev/null
+++ b/libs/container.js
@@ -0,0 +1,9 @@
+var React = require('react');
+module.exports = React.createClass({
+    'shouldComponentUpdate' : function () {
+        return !this.loaded && (this.loaded = true);
+    },
+    'render' : function () {
+        return <div className="poppy-container" style={{position:'absolute',display:'inline',top:0,pointerEvents:'none',zIndex:6000}}></div>
+    }
+});
diff --git a/libs/index.js b/libs/index.js
new file mode 100644
index 0000000..ad6f3bf
--- /dev/null
+++ b/libs/index.js
@@ -0,0 +1,2 @@
+module.exports = require('./poppy.js');
+module.exports.Container = require('./container.js');
diff --git a/libs/poppy.css b/libs/poppy.css
new file mode 100644
index 0000000..bc5410d
--- /dev/null
+++ b/libs/poppy.css
@@ -0,0 +1,76 @@
+.poppy {
+    visiblity:hidden;
+    display:inline-block;
+    opacity:0;
+    position:absolute;
+}
+.poppy-popover-background {
+    opacity:0.925;
+    z-index:0;
+    backface-visibility:hidden;
+    background:#000;
+    transform:translateZ(0);
+}
+.poppy-arrow {
+    position:absolute;
+    z-index:-1;
+    background:inherit;
+    transition:  all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    transform:rotateZ(45deg);
+}
+.poppy-background-overlay {
+    z-index:0;
+    background:inherit;
+    border-radius:4px;
+    border-top-width:0;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    transform: translateZ(0);
+    height: 100%;
+    transition : all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+}
+.poppy-content {
+    display:inline-block;
+    z-index: 1;
+    position: relative;
+    pointer-events:all;
+    transition:none;
+    padding-left: 10px;
+    width: auto;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+    box-sizing: border-box;
+}
+.poppy-overflow {
+    position:relative;
+    display: inline-block;
+    z-index:0;
+    padding:0;
+}
+.poppy-content-wrapper {
+    position:absolute;
+    pointer-events:all;
+    width:auto;
+    display:inline-block;
+    transition:all 450ms cubic-bezier(0.23,1,0.32,1) 0ms;
+    overflow:hidden;
+    z-index:1;
+}
+.poppy-title-wrapper {
+    z-index:1;
+    position:absolute;
+    display:inline-block;
+    width: 100%;
+    text-align: center;
+    transition: none;
+    color: #fff;
+}
+.poppy-title {
+    display: inline-block;
+    padding: 10px;
+}
diff --git a/libs/poppy.js b/libs/poppy.js
new file mode 100644
index 0000000..3a26f4b
--- /dev/null
+++ b/libs/poppy.js
@@ -0,0 +1,787 @@
+//
+//TODO cleanup and opensource
+//TODO add groups
+var SHOWING = {
+    'NONE' : 0,
+    'MOUSEOVER' : 1,
+    'CONTENT' : 2,
+    'CLICK' : 4,
+    'PROPERTY' : 8
+},
+LEFT = 1,
+RIGHT = 2,
+TOP = 3,
+BOTTOM = 4;
+
+var defaults = {
+    //'onContentMouseLeave' : undefined,
+    //'onContentMouseEnter' : undefined,
+    'backgroundStyle' : undefined,
+    'arrowStyle' : {},
+    'foregroundStyle' : undefined,
+    'wrapperStyle' : undefined,
+    'content' : '',
+    'className' : '',
+    'title' : '',
+    'position' : {
+        'overflow' : 'auto',
+        'position' : 'relative',
+        'top' : 0,
+        'height' : '100%',
+        'left' :0,
+        'width' : '100%'
+    },
+    'constrainTo' : 'parent',
+    'persistOverContent' : false,
+    'showOnMouseEnter' : true,
+    'hideOnMouseLeave' : true,
+    'bindWindowResize' : false,
+    'bindScroll' : false,
+    //'hideOnClickOut' : false,
+    'toggleOnClick' : false,
+    'constrainWidth' : true,
+    'constrainHeight' : true,
+    'track' : false,
+    //'constrainLeft' : true,
+    //'constrainTop' : true,
+    'arrowSize' : 15,
+    //'arrowPosition' : {},
+    'region' : undefined,
+    'show' : undefined,
+    'showDelay' : 300,
+    'hideDelay' : 320
+},
+getDefaults = eval('(function () {return ' + JSON.stringify(defaults)+ ';})');
+(function (defaults) {
+    var p,item;
+    for (p in defaults) {
+        item = defaults[p];
+        if (item && typeof item === 'object') {
+            defaults[p] = eval('(function (obj) {var result ='+JSON.stringify(item)+',p; for (p in obj) {result[p]=obj[p]} return result;})');
+        }
+    }
+})(defaults);
+
+function assign_defaults (obja) {
+    var _defaults = getDefaults(),
+    val,
+    d,
+    p,q;
+    for (p in obja) {
+        if ((val = obja[p]) !== undefined && val !== null ) {
+            if (typeof val === 'object' && typeof (d = _defaults[p]) === 'object' && d) {
+                for (q in val) {
+                    d[q] = val[q];
+                }
+            } else {
+                _defaults[p] = val;
+            }
+        }
+    }
+    return _defaults;
+}
+
+    
+
+var 
+React = require('react'),
+ReactDOM = require('react-dom'),
+Popover = React.createClass({
+    'shouldComponentUpdate' : function (props,state) {
+        var last = this.state || {},
+        position1 = last.position || {},
+        position2 = state.position || {},
+        result = (this.minWidth !== position2.minWidth || this.minHeight !== position2.minHeight || this.maxWidth !== position2.maxWidth || last.content !== state.content || last.title !== state.title || this.maxHeight !== position2.maxHeight);
+        return result;
+    },
+    'overflowStyle' : {},
+    'wrapperStyle' : {},
+    'render' : function () {
+        var state = this.state;
+        if (!state) {
+            return null;
+        }
+        var title = state.title,  
+        position = state.position,
+        maxWidth = position.maxWidth,
+        maxHeight = position.maxHeight,
+        minWidth = position.minWidth,
+        minHeight = position.minHeight,
+        content = state.content,
+        overflowStyle = this.overflowStyle,
+        wrapperStyle = this.wrapperStyle;
+
+
+        overflowStyle.overflow = content ? 'auto' : null;
+        this.maxHeight = overflowStyle.maxHeight = wrapperStyle.maxHeight = maxHeight;
+        this.maxWidth = overflowStyle.maxWidth = wrapperStyle.maxWidth = maxWidth;
+        this.minHeight = overflowStyle.minHeight = wrapperStyle.minHeight = minHeight;
+        this.minWidth = overflowStyle.minWidth = wrapperStyle.minWidth = minWidth;
+
+
+
+
+        return (<span className={"poppy " + (state.className||'')} onMouseOver={this._onEnter} onMouseOut={this._onExit}>
+            <span ref="inner" className="poppy-background" >
+             <div ref="arrow" className="poppy-arrow" style={state.arrowStyle}></div>
+             <div ref="wrapper" className="poppy-background-overlay" style={state.wrapperStyle}></div>
+            </span>
+            <div ref="content" className="poppy-content-wrapper" style={wrapperStyle}>
+            { title ? <div ref="titleWrapper" className="poppy-title-wrapper"><span ref="title" className="poppy-title">{state.title}</span></div>
+                      : null
+            }
+            <div ref="overflow" className="poppy-overflow" style={overflowStyle}>
+                {
+                    content ?  <div  ref="popover" className="poppy-content"> {content||''} </div>
+                            : <span ref="popover"></span>
+                }
+            </div>
+            </div>
+        </span>);
+    },
+    '_onEnter' : function () {
+        this.state.onEnterContent && this.state.onEnterContent(SHOWING.CONTENT);
+    },
+    '_onExit' : function () {
+        this.state.onLeaveContent && this.state.onLeaveContent(SHOWING.CONTENT);
+    }
+}),
+overlay_template = document.createElement('span');
+overlay_template.innerHTML = '<div class="poppy-container" style="position:absolute;top:0px;display:inline;pointer-events:none;z-index:6000"></div>`'
+overlay_template = overlay_template.lastChild;
+
+
+module.exports = React.createClass({
+    'getInitialState' : function () {
+        var state = assign_defaults(this.props);
+        this._lastTargetRect = {left:0,top:0,width:0,height:0};
+        this.settings = {
+            arrowStyle:{
+                width:defaults.arrowSize,
+                height:defaults.arrowSize
+            },
+            constrainTo : defaults.constrainTo,
+            showing:0,
+            showDelay:defaults.showDelay,
+            hideDelay:defaults.hideDelay,
+            //arrowSize:defaults.arrowSize,
+            track:defaults.track,
+            constrainHeight:defaults.constrainHeight,
+            constrainWidth:defaults.constrainWidth,
+            className : defaults.className,
+
+            //showOnMouseEnter : defaults.showOnMouseEnter,
+            //hideOnMouseLeave : defaults.hideOnMouseLeave,
+            //toggleOnClick : defaults.toggleOnClick,
+            //bindWindowResize : defaults.bindWindowResize,
+            //persistOverContent : defaults.persistOverContent,
+            //bindScrollContainer : defaults.bindScrollContainer
+
+            title:''
+        };
+        this.componentWillUpdate(this.props,state);
+        return state;
+    },
+    'componentDidMount' : function () {
+        var 
+        me = this,
+        settings = this.state.settings,
+        target = ReactDOM.findDOMNode(this),
+        window = target.ownerDocument.defaultView;
+
+
+        me.setState({
+            'target' : target 
+        });
+    },
+    'componentWillUnmount' : function () {
+        var target = this.state.target,
+        doc = target.ownerDocument,
+        overlay = doc.body.querySelector('.ui-popover-overlay');
+        window = doc.defaultView;
+
+        if (this.settings && (target = this.settings.target)) {
+            target.removeEventListener('mouseenter',this._onMouseEnter);
+            target.removeEventListener('mouseleave',this._onMouseLeave);
+            target.removeEventListener('click',this._onClick);
+        }
+        this.untrack();
+        this._resize_timer && clearTimeout(this._resize_timer);
+        this._show_timer && clearTimeout(this._show_timer);
+        this._render_timer && clearTimeout(this._render_timer);
+        this.overlay && this.overlay.parentNode.removeChild(this.popoverEl)
+        this._init_timer && clearTimeout(this._init_timer);
+
+        this.state.settings.bindWindowResize && window.removeEventListener('resize',this._onResize);
+        this._boundScroll && this._boundScroll.removeEventListener('scroll',this._onScroll);
+    },
+    'componentWillUpdate' : function (props,state) {
+        this._updateSync(props,state);
+        !this._render_timer && (this._render_timer = setTimeout(this._updateAsync,16));
+    },
+    '_updateSync' : function (props,state) {
+        state = state || this.state;
+        var 
+        settings = this.settings,
+        bindWindowResize = props.bindWindowResize || false,
+        target = state && state.target ,
+        ltarget = settings.target,
+        track = props.track || false,
+        view = target && target.ownerDocument.defaultView,
+        bindScroll = props.bindScroll === true ? 'window' : props.bindScroll,
+        boundScroll = this._boundScroll,
+        scroller = settings.target ? this._upwardSelector(bindScroll,settings) : false;
+
+        if (bindWindowResize !== settings.bindWindowResize) {
+            if (bindWindowResize) {
+                view && (view.addEventListener('resize',this._onResize),settings.bindWindowResize = true);
+            } else {
+                view && view.removeEventListener('resize',this._onResize);
+                settings.bindWindowResize = false;
+            }
+        }
+
+
+        if (scroller !== boundScroll) {
+            if (boundScroll) {
+                boundScroll.removeEventListener('scroll',this._onScroll);
+                this._boundScroll = false;
+            }
+            if (scroller) {
+                scroller.addEventListener('scroll',this._onScroll,true);
+                this._boundScroll = scroller;
+            }
+        }
+
+        if (track !== settings.track) {
+            if (track) {
+                settings.track = true;
+                this.track();
+            } else {
+                settings.track = false;
+                this.untrack();
+            }
+        }
+
+        if (target && ltarget !== target) {
+            target.addEventListener('mouseenter',this._onMouseEnter);
+            target.addEventListener('mouseleave',this._onMouseLeave);
+            target.addEventListener('click',this._onClick);
+            settings.target = target;
+            if (ltarget) {
+                ltarget.removeEventListener('mouseenter',this._onMouseEnter);
+                ltarget.removeEventListener('mouseleave',this._onMouseLeave);
+                ltarget.removeEventListener('click',this._onClick);
+            }
+        }
+
+        if (props.persistOverContent) {
+            settings.persistOverContent = true;
+            settings.onEnterContent = this.show;
+            settings.onLeaveContent = this.hide;
+        } else {
+            settings.persistOverContent = false;
+            settings.onEnterContent = false;
+            settings.onLeaveContent = false;
+        }
+
+        settings.toggleOnClick = props.toggleOnClick !== undefined ? props.toggleOnClick : defaults.toggleOnClick;
+        settings.showOnMouseEnter = props.showOnMouseEnter !== undefined ? props.showOnMouseEnter : defaults.showOnMouseEnter;
+        settings.hideOnMouseLeave = props.hideOnMouseLeave !== undefined ? props.hideOnMouseLeave : defaults.hideOnMouseLeave;
+        settings.constrainHeight = props.constrainHeight !== undefined ? props.constrainHeight : defaults.constrainHeight;
+        settings.constrainWidth = props.constrainWidth !== undefined ? props.constrainWidth : defaults.constrainWidth;
+
+    },
+    '_updateAsync' : function () {
+        this._render_timer = undefined;
+
+        if (!this.settings.target) {
+            return;
+        } 
+
+
+        var me = this,
+        props = this.props,
+        show = props.show,
+        settings = this.settings,
+        showing = settings.showing & SHOWING.PROPERTY,
+        doc = settings.target.ownerDocument,
+        body = doc.body,
+        overlay = this._upwardSelector(".poppy-container"),
+        popover = this.popover,
+        arrowStyle = settings.arrowStyle,
+        arrowSize = props.arrowSize !== undefined ? props.arrowSize : defaults.arrowSize,
+        region = props.region;
+
+
+        settings.constrainTo = props.constrainTo || defaults.constrainTo;
+
+        settings.constrainTarget = this._upwardSelector(settings.constrainTo,settings);
+
+
+        if (region && region !== settings.last_prop_region) {
+            if (region === 'top') {
+                settings.region = TOP;
+            } else if (region === 'left') {
+                settings.region = LEFT;
+            } else if (region === 'right') {
+                settings.region = RIGHT;
+            } else if (region === 'bottom') {
+                settings.region = BOTTOM;
+            }
+        } else if (!region) {
+            settings.region = defaults.region;
+        }
+
+
+
+        settings.last_prop_region = region; 
+        settings.title = props.title || defaults.title;
+        settings.content = props.content || defaults.content;
+        settings.className = props.className || defaults.className;
+
+        if (settings.arrowSize !== arrowSize) {
+            settings.arrowSize = arrowSize;
+            settings.arrowSize3_4 = arrowSize * .75;
+            settings.arrowSize1_2 = arrowSize * .5;
+            settings.arrowSize2_1 = arrowSize * 2;
+            settings.arrowSize3_2 = arrowSize * 1.5;
+            arrowStyle.height = arrowStyle.width =  arrowSize;
+        }
+
+
+        this._adjustPosition(this.settings);
+
+
+        if (!overlay || overlay === body) {
+            body.appendChild(overlay = this.overlay = overlay_template.cloneNode(true));
+        } else if (!this.overlay) {
+            this.overlay = overlay;
+        }
+
+        if (!popover) {
+            var test = document.createElement('div');
+            popover = this.popover = ReactDOM.render(<Popover></Popover>,test);
+            overlay.appendChild(test.lastChild);
+        } else if (this.overlay.ownerDocument !== doc && this.popoverEl) {
+            overlay.appendChild(this.popoverEl);
+            this.overlay = overlay;
+        }
+
+
+        popover.setState(settings);
+        if (!this.popoverEl) {
+            this.popoverEl = ReactDOM.findDOMNode(popover);
+        }
+
+
+
+        if (this._init_timer) {
+            cancelAnimationFrame(this._init_timer);
+        }
+        this._init_timer = requestAnimationFrame(function () {
+            if (showing && !show) {
+                me.hide(SHOWING.PROPERTY);
+            } else if (!showing && show) {
+                me.show(SHOWING.PROPERTY);
+            }
+
+            me._init_timer = false;
+            me._updatePositions();
+
+        });
+    },
+    '_onResize' : function () {
+        var me = this;
+        if (this._resize_timer) {
+            clearTimeout(this._resize_timer);
+        }
+        this._resize_timer = setTimeout(function () {
+            me._resize_timer = undefined;
+            me.setState({})
+        },60);
+    },
+    '_onMouseEnter' : function () {
+        if (this.settings.showOnMouseEnter) {
+            this.show(SHOWING.MOUSEOVER);
+        }
+    },
+    '_onMouseLeave' : function () {
+        if (this.settings.hideOnMouseLeave) {
+            this.hide(SHOWING.MOUSEOVER);
+        }
+    },
+    '_onClick' : function () {
+        if (this.settings.toggleOnClick) {
+            if (this.settings.showing & SHOWING.CLICK) {
+                this.hide(SHOWING.CLICK);
+            } else {
+                this.show(SHOWING.CLICK);
+            }
+        }
+    },
+    '_adjustPosition' : function (settings) {
+        var rect = settings.target.getBoundingClientRect(),
+        parentRect = settings.constrainTarget.getBoundingClientRect(),
+        region = settings.region,
+        leftSpace = settings.leftSpace =  rect.left - parentRect.left,
+        rightSpace = settings.rightSpace =  parentRect.left + parentRect.width - (rect.left + rect.width),
+        topSpace = settings.topSpace =  rect.top - parentRect.top,
+        bottomSpace = settings.bottomSpace =  parentRect.top + parentRect.height - (rect.top + rect.height),
+        arrowSize = settings.arrowSize,
+        position = settings.position,
+        half_size = settings.arrowSize3_4,
+        constrainHeight = settings.constrainHeight,
+        constrainWidth = settings.constrainWidth,
+        double_size = arrowSize * 2;
+
+        if (!position) {
+            position = settings.position = {};
+        }
+
+        if (!region) {
+            if (leftSpace > bottomSpace && leftSpace > topSpace && leftSpace >= rightSpace && topSpace > 30 && bottomSpace > 30) {
+                region = settings.region = LEFT;
+            } else if (rightSpace > bottomSpace && rightSpace > topSpace && topSpace > 30 && bottomSpace > 30) {
+                region = settings.region =  RIGHT;
+            } else if (topSpace > bottomSpace) {
+                region = settings.region = TOP;
+            } else {
+                region = settings.region = BOTTOM;
+            }
+        }
+
+        if (region === LEFT) {
+            position.minWidth = 0;
+            position.minHeight = double_size;
+            position.top = position.left = 0;
+            constrainWidth && (position.maxWidth = Math.max(leftSpace - half_size-25,double_size));
+            constrainHeight && (position.maxHeight = Math.max(topSpace+bottomSpace+rect.height-30,5));
+        } else if (region === RIGHT) {
+            position.minWidth = 0;
+            position.top = 0;
+            position.minHeight = double_size;
+            position.left = rect.left + rect.width + half_size; 
+            constrainWidth && (position.maxWidth = Math.max(rightSpace - half_size-25,double_size));
+            constrainHeight && (position.maxHeight = Math.max(topSpace+bottomSpace+rect.height-30,5));
+        } else if (region === BOTTOM) {
+            position.minHeight = 'auto';
+            position.top = rect.top + rect.height + half_size;
+            position.left = 0;
+            position.minWidth = double_size;
+            constrainHeight && (position.maxHeight = Math.max(bottomSpace - half_size-5,25));
+            constrainWidth && (position.maxWidth = Math.max(leftSpace+rightSpace+rect.width-30,25));
+        } else {
+            position.minHeight = 'auto';
+            position.top = position.left = 0;
+            position.minWidth = double_size;
+            constrainHeight && (position.maxHeight = Math.max(topSpace - half_size+2,25));
+            constrainWidth && (position.maxWidth = Math.max(leftSpace+rightSpace+rect.width-30,25));
+        }
+    },
+    '_onScroll' : function () {
+        !this._render_timer && this._updateAsync();
+    },
+    '_track_timer' : undefined,
+    '_doTrack' : function () {
+        this._track_timer = setTimeout(this._doTrack,16);
+
+        var settings = this.settings,
+        target = settings.target;
+
+        if (!target || !this.popover) {
+            return;
+        }
+
+        var targetRect = target.getBoundingClientRect(),
+        lastTargetRect = this._lastTargetRect;
+
+        if ( targetRect.top !== lastTargetRect.top 
+            || targetRect.left !== lastTargetRect.left 
+            || targetRect.width !== lastTargetRect.width 
+            || targetRect.height !== lastTargetRect.height 
+            || targetRect.ownerDocument !== this._lastTargetDoc
+        ) {
+            this._lastTargetRect = targetRect;
+            this._lastTargetDoc = targetRect.ownerDocument;
+            !this._render_timer && this._updateAsync();
+        }
+    },
+    'track' : function () {
+        if (!this._track_timer) {
+            this._track_timer = setTimeout(this._doTrack,16);
+        }
+        return this;
+    },
+    'untrack' : function () {
+        if (this._track_timer) {
+            clearTimeout(this._track_timer);
+            this._track_timer = false;
+        }
+        return this;
+    },
+    'refresh' : function () {
+        this.setState({});
+        return this;
+    },
+    'hide' : function (trigger) {
+        var me = this,
+        settings = this.settings,
+        showing = settings.showing;
+        if (!showing) {
+            return;
+        }
+
+        if (showing & trigger) {
+            settings.showing -= trigger;
+        } else {
+            return;
+        }
+
+        var node = this.popoverEl,
+        style = node.style;
+        this._show_timer && clearTimeout(this._show_timer);
+        this._show_timer = setTimeout(function () {
+            if (settings.showing) {
+                return;
+            }
+            !node.$listener && node.addEventListener('transitionend',node.$listener =  function () {
+                node.removeEventListener('transitionend',node.$listener);
+                node.$listener = false;
+                !settings.showing && (node.style.visibility = 'hidden');
+            });
+            me._show_timer = undefined;
+            style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+            if (settings.region === RIGHT) {
+                style.transform = 'translateX(30px)translateY(0px)';
+            } else if (settings.region === LEFT) {
+                style.transform = 'translateX(-30px)translateY(0px)';
+            } else if (settings.region === TOP) {
+                style.transform='translateX(0px)translateY(-30px)';
+            } else {
+                style.transform='translateX(0px)translateY(30px)';
+            }
+            style.opacity = 0
+            me.props.onHide && me.props.onHide();
+        },settings.hideDelay);
+    },
+    'show' : function (trigger) {
+        var 
+        me = this,
+        settings = this.settings,
+        node = this.popoverEl,
+        style = node.style,
+        reset = true,
+        was_showing = settings.showing;
+
+
+        settings.showing |= trigger;
+        if (was_showing) {
+            return;
+        } else if (this._show_timer) {
+            clearTimeout(this._show_timer);
+            this._show_timer = undefined;
+            reset = false;
+        }
+        node.$listener && node.removeEventListener('transitionend',node.$listener);
+        node.$listener = false;
+
+        if (reset) {
+            this._show_timer = setTimeout(function () {
+                if (!settings.showing) {
+                    return;
+                }
+                me.props.onShow && me.props.onShow();
+                me._show_timer = undefined;
+                style.transition = null;
+                if (settings.region === RIGHT) {
+                    style.transfrom = 'translateX(30px)translateY(0px)';
+                } else if (settings.region === LEFT) {
+                    style.transform = 'translateX(-30px)translateY(0px)';
+                } else if (settings.region === TOP) {
+                    style.transform = 'translateX(0px)translateY(-30px)';
+                } else {
+                    style.transform = 'translateX(0px)translateY(30px)';
+                }
+                me._show_timer = setTimeout(function () {
+                    me._show_timer = undefined;
+                    style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+                    style.visibility = null;
+                    style.opacity = 1;
+                    style.transform = 'translateX(0px)translateY(0px)';
+                },settings.showDelay);
+            });
+        } else {
+            style.transition = 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
+            style.visibility = null;
+            style.opacity = 1;
+            style.transform = 'translateX(0px)translateY(0px)';
+        }
+    },
+    '_upwardSelector' : function (selector,settings) {
+        var target = settings.target,
+        parent,
+        document = target.ownerDocument;
+
+        if (!selector) {
+            return selector;
+        } else if (typeof selector === 'string') {
+            if (selector === 'body') {
+                return document.body;
+            } else if (selector === 'parent') {
+                return target && target.parentNode;
+            } else if (selector === 'window') {
+                return target && target.ownerDocument.defaultView;
+            } else {
+                while (target) {
+                    if (target.matches && target.matches(selector)) {
+                        return target;
+                    }
+                    target = target.parentNode;
+                }
+                return document.body;
+            }
+        }  else if (target = ReactDOM.findDOMNode(selector)) {
+            return target;
+        }
+        return selector;
+    },
+    '_updatePositions' : function () {
+        var target = this.settings.target;
+        if (!target) {
+            return;
+        }
+        var 
+        overflow = this.popover.refs.overflow,
+        overflowStyle = overflow.style,
+        overflowRect,
+        popoverRect = this.popover.refs.popover.getBoundingClientRect(),
+        wrapperStyle = this.popover.refs.wrapper.style,
+        arrow = this.popover.refs.arrow,
+        arrowelStyle = arrow.style,
+        contentStyle = this.popover.refs.content.style,
+        title = this.popover.refs.title,
+        titleRect = title && title.getBoundingClientRect(),
+        titleWrapper = this.popover.refs.titleWrapper,
+        titleWrapperRect = titleWrapper && titleWrapper.getBoundingClientRect(),
+        titleWidth = titleRect && titleRect.width || 0,
+        titleHeight = titleRect && titleRect.height || 0,
+        targetRect = target.getBoundingClientRect(),
+        targetTop = targetRect.top,
+        targetWidth = targetRect.width,
+        halfTargetWidth = targetWidth / 2,
+        targetHeight = targetRect.height,
+        halfTargetHeight = targetHeight / 2,
+        targetLeft = targetRect.left,
+        settings = this.settings,
+        parentRect = settings.constrainTarget.getBoundingClientRect(),
+        offsetTop,
+        offsetLeft,
+        parentTop = offsetTop = parentRect.top,
+        parentLeft = offsetLeft = parentRect.left,
+        arrowLeft = offsetLeft|0,
+        arrowTop = offsetTop|0,
+        width,
+        height,
+        region = settings.region,
+        spaceLeft = settings.leftSpace,
+        spaceTop = settings.topSpace,
+        arrowSize = settings.arrowSize|0,
+        size1_2 = settings.arrowSize1_2,
+        size3_4 = settings.arrowSize3_4,
+        size2_1 = settings.arrowSize2_1,
+        size3_2 = settings.arrowSize3_2,
+
+        arrowStyle = settings.arrowStyle,
+        upperBounds,
+        lowerBounds,
+        x = settings.position.left,
+        y = settings.position.top,
+        c;
+
+
+
+        overflowStyle.paddingTop = titleHeight + 'px';
+        overflowStyle.maxHeight = Math.max(Math.round(this.settings.position.maxHeight - titleHeight),0) + 'px';
+
+        overflowRect = overflow.getBoundingClientRect();
+        width = Math.max(overflowRect.width,titleWidth);
+        height = overflowRect.height;
+
+        if (!this.settings.target) {
+            return;
+        }
+        if (region === TOP || region === BOTTOM) {
+            lowerBounds = 5;
+            upperBounds = parentLeft + parentRect.width - 5;
+            offsetLeft = targetLeft +  halfTargetWidth - width/2;
+            if (offsetLeft < lowerBounds) {
+                offsetLeft = lowerBounds;
+            }
+            if ((c=targetLeft + targetWidth-size3_2) < lowerBounds) {
+                offsetLeft = c;
+            }
+            if (offsetLeft > (c=upperBounds - width)) {
+                offsetLeft = c;
+            }
+            if ((c=targetLeft + arrowSize) > upperBounds) {
+                offsetLeft = c - width;
+            }
+
+            arrowLeft += spaceLeft + halfTargetWidth - arrowSize;
+            arrowLeft = Math.max(Math.min(arrowLeft,offsetLeft+width-size2_1),offsetLeft) + size1_2;
+            x = offsetLeft;
+            if (region === TOP) {
+                y = (targetTop - height - size3_4 -9);
+                arrowTop = y + height - size1_2;
+            } else {
+                arrowTop = y - size1_2;
+            }
+
+        } else if (region === LEFT || region === RIGHT) {
+            offsetTop += spaceTop + targetHeight - halfTargetHeight - height / 2;
+            upperBounds = parentTop + parentRect.height - 5;
+            lowerBounds = 5;
+
+            if (offsetTop < lowerBounds) {
+                offsetTop = lowerBounds;
+            } 
+            if ((c=targetTop + targetHeight - size3_2) < lowerBounds ) {
+                offsetTop = c;
+            }
+            if (offsetTop > (c=upperBounds-height)) {
+                offsetTop = c;
+            }
+            if ((c=targetTop +arrowSize) > upperBounds) {
+                offsetTop = c - height;
+            }
+            arrowTop += spaceTop +  halfTargetHeight - arrowSize;
+            arrowTop = Math.max(Math.min(arrowTop,offsetTop + height - size2_1),offsetTop) + size1_2;
+            y= offsetTop;
+            if (region === LEFT) {
+                x = (targetLeft - width - size3_4 - 6);
+                arrowLeft = x + width - size1_2 -1;
+            } else {
+                x = (targetLeft + targetWidth+ size3_4);
+                arrowLeft = x - size1_2 + 1;
+            }
+        }
+
+          contentStyle.width =  wrapperStyle.width = (width|0) + 'px';
+          arrowelStyle.top = (arrowTop|0) + 'px';
+          arrowelStyle.left = (arrowLeft|0) + 'px';
+          wrapperStyle.top = contentStyle.top = (y|0) + 'px';
+          wrapperStyle.left = contentStyle.left = (x|0) + 'px'
+          wrapperStyle.height = (height|0) + 'px';
+
+          this.settings.showing && (this.popoverEl.style.visiblity = null);
+
+    },
+    'render' : function () {
+        var children = this.props.children;
+        if (typeof children === 'string') {
+            children = <span>{children}</span>;
+        }
+        return children || null;
+    }
+});
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..16defd5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-poppy",
+  "version": "0.1.18",
+  "description": "React popover that scales, follows, scrolls, and grows",
+  "main": "dist/poppy.node.js",
+  "author": {
+    "name": "Trevor Lovell"
+  },
+  "keywords": [
+    "react",
+    "popover",
+    "pop",
+    "poppy",
+    "hover"
+  ],
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TaDaa/react-poppy.git"
+  },
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "rm -rf dist/*.* && node build.js",
+    "postpublish": "git push --follow-tags"
+  },
+  "devDependencies": {
+    "babel-core": "^6.16.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-react": "^6.16.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "uglify": "^0.1.5",
+    "webpack": "^1.13.2"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..f17333b
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,86 @@
+var 
+webpack = require('webpack'),
+path = require('path'),
+dir = path.resolve(__dirname);
+module.exports = [
+];
+
+//config('var',''),
+//config('commonjs2','node'),
+//config('amd'),
+//config('umd')
+demo
+    ("scroll");
+
+function demo (target) {
+    module.exports.push({
+        'entry' : {
+            'app' : ["./demos/"+target+".js"]
+        },
+        'output' : {
+            'path' : dir,
+            'filename' : "/demo_bundles/" + target +'.bundle.js'
+        },
+        'module' : {
+            'loaders' : [{
+                'test' : /\.jsx?$/,
+                'loader' : 'babel-loader',
+                'exclude' : /node_modules/,
+                'query' : {
+                    'presets' : ['react']
+                }
+            }]
+        }
+    });
+    return demo;
+}
+
+//function config (target,optionalName) {
+    //optionalName = optionalName !== '' ? ('.'+(optionalName || target)) : '';
+    //module.exports.push({
+        //'entry' : {
+            //'app' : ['./libs/index.js']
+        //},
+        //'output' : {
+            //'path' : dir,
+            //'library' : 'poppy',
+            //'libraryTarget' : target,
+            //'filename' : 'poppy'+optionalName +'.js'
+        //},
+        //'module' : {
+            //'loaders' : [{
+                //'test' : /\.jsx?$/,
+                //'loader' : 'babel-loader',
+                //'exclude' : /node_modules/,
+                //'query' : {
+                    //'presets' : ['react']
+                //}
+            //}]
+        //}
+    //});
+    //module.exports.push({
+        //'entry' : {
+            //'app' : ['./libs/index.js']
+        //},
+        //'output' : {
+            //'path' : dir,
+            //'library' : 'poppy',
+            //'libraryTarget' : target,
+            //'filename' : 'poppy'+optionalName+'.min.js'
+        //},
+        //'module' : {
+            //'loaders' : [{
+                //'test' : /\.jsx?$/,
+                //'loader' : 'babel-loader',
+                //'exclude' : /node_modules/,
+                //'query' : {
+                    //'presets' : ['react']
+                //}
+            //}]
+        //},
+        //'plugins' : [
+            //new webpack.optimize.UglifyJsPlugin({minimize:true})
+        //]
+    //});
+//}
+