content: import classnames from 'classnames';
  import React from 'react';
  import { Button, Checkbox, InputGroup, SegmentedControl } from 'elemental';
  import Portal from './Portal';
  
  const Transition = React.addons.CSSTransitionGroup;
  const sizes = {
  	arrowHeight: 12
  };
  
  var Popout = React.createClass({
  	displayName: 'Popout',
  	propTypes: {
  		isOpen: React.PropTypes.bool,
  		onCancel: React.PropTypes.func,
  		onSubmit: React.PropTypes.func,
  		relativeToID: React.PropTypes.string.isRequired,
  		width: React.PropTypes.number,
  	},
  
  	getInitialState () {
  		return {};
  	},
  
  	getDefaultProps () {
  		return {
  			width: 320,
  		};
  	},
  
  	componentDidMount () {
  		let posNode = document.getElementById(this.props.relativeToID);
  
  		let pos = {
  			top: 0,
  			left: 0,
  			width: posNode.offsetWidth,
  			height: posNode.offsetHeight
  		};
  		while (posNode.offsetParent) {
  			pos.top += posNode.offsetTop;
  			pos.left += posNode.offsetLeft;
  			posNode = posNode.offsetParent;
  		}
  
  		let leftOffset = pos.left + (pos.width / 2) - (this.props.width / 2);
  		let topOffset = pos.top + pos.height + sizes.arrowHeight;
  
  		/* eslint-disable react/no-did-mount-set-state */
  		this.setState({
  			leftOffset: leftOffset,
  			topOffset: topOffset
  		});
  		/* eslint-enable */
  	},
  
  	renderPopout () {
  		if (!this.props.isOpen) return;
  
  		return (
  			<div className="Popout" style={{ left: this.state.leftOffset, top: this.state.topOffset, width: this.props.width }}>
  				<span className="Popout__arrow" />
  				<div className="Popout__inner">
  					{this.props.children}
  				</div>
  			</div>
  		);
  	},
  
  	renderBlockout () {
  		if (!this.props.isOpen) return;
  		return <div className="blockout" onClick={this.props.onCancel} />;
  	},
  
  	render () {
  		return (
  			<Portal className="Popout-wrapper">
  				<Transition className="Popout-animation" transitionName="Popout" component="div">
  					{this.renderPopout()}
  				</Transition>
  				{this.renderBlockout()}
  			</Portal>
  		);
  	}
  
  });
  
  module.exports = Popout;
  
  // expose the child to the top level export
  module.exports.Header = require('./PopoutHeader');
  module.exports.Body = require('./PopoutBody');
  module.exports.Footer = require('./PopoutFooter');
  module.exports.Pane = require('./PopoutPane');
  