import React from 'react';

import styles from '../styles/control-panel.scss';


export default React.createClass({

	getInitialState () {
		return {
			visible: false
		}
	},

	componentDidMount () {
		window.addEventListener('keypress', (e) => {
			if (e.keyCode === 99) {
				this.toggleVisible();
			}
		})
	},

	toggleVisible () {
		let showState;
		if (this.state.visible === false) {
			showState = true;
		} else {
			showState = false;
		}
		this.setState({
			visible: showState
		})
	},

	render () {
		return (
			<div className={this.state.visible ? 'ctrlpanel' : 'ctrlpanel hidden'}>
				<div className='wrapper'>
					<h1>Lines</h1>

				</div>
			</div>
		)
	}
});
@@ -19,16 +19,47 @@
 'react';
+%0Aimport Canvas from './Canvas';
 %0A%0Aimport
@@ -191,16 +191,125 @@
 e: false
+,%0A%09%09%09backgroundColor: '#000000',%0A%09%09%09lineColor: '#FFFFFF',%0A%09%09%09autoDraw: 'false',%0A%09%09%09graphFunc: 'clickConnect',
 %0A%09%09%7D%0A%09%7D,
@@ -771,22 +771,522 @@
 %09%09%09%3C
-h1%3ELines%3C/h1%3E%0A
+Canvas %0A%09%09%09%09%09%09backgroundColor=%7Bthis.state.backgroundColor%7D%0A%09%09%09%09%09%09lineColor=%7Bthis.state.lineColor%7D%0A%09%09%09%09%09%09autoDraw=%7Bthis.state.autoDraw%7D%0A%09%09%09%09%09%09graphFunc=%7Bthis.state.autoDraw%7D%0A%09%09%09%09%09/%3E%0A%09%09%09%09%09%3Ch1%3ELines%3C/h1%3E%0A%09%09%09%09%09%3Cdiv className='current-settings'%3E%0A%09%09%09%09%09%09%3Cul%3E %0A%09%09%09%09%09%09%09%3Cli%3EBackground Color: %7Bthis.state.backgroundColor%7D%3C/li%3E%0A%09%09%09%09%09%09%09%3Cli%3ELine Color: %7Bthis.state.lineColor%7D%3C/li%3E%0A%09%09%09%09%09%09%09%3Cli%3EAuto Draw: %7B!this.state.autoDraw  ? 'ON' : 'OFF'%7D%3C/li%3E%0A%09%09%09%09%09%09%09%3Cli%3EGraphing Function: %7Bthis.state.graphFunc%7D%3C/li%3E%0A%09%09%09%09%09%09%3C/ul%3E%0A%09%09%09%09%09%3C/div%3E
 %0A%09%09%09

add graphing state attrs to ctrlpanel and pass down to canvas