var currentFACE = 'front';
function CubeButton(props) {
  const posClass = 'sidebutton bt_' + props.sidePosition;
  return <div onClick={props.onClick} className={posClass}><div><span>{props.cap}</span></div><div>{props.cap2}</div></div>;
}
class Cube extends React.Component {
  constructor(props) {
    super(props);
    this.state = { face: currentFACE, size: props.size, sw: props.w, sh: props.h };
  }
  onSide(target) {
	currentFACE = target;
	this.setState(prevState => {
		return { 
		  face: target   
		};
	  });
  }
  onTop() { this.onSide('top'); }
  onBottom() { this.onSide('bottom'); }
  onLeft() { this.onSide('left'); }
  onRight() { this.onSide('right'); }
  onFront() { this.onSide('front'); }
  onBack() { this.onSide('back'); }
  render() {
	let half = this.state.size / 2;
	let cubeTransform = 'translateX(' + ((this.state.sw / 2) - half) + 'px) translateY(' + ((this.state.sh / 2) - half) + 'px) translateZ(-' + half + 'px)';
	if (this.state.face == 'front') cubeTransform = cubeTransform + ' rotateY(0deg)';
	if (this.state.face == 'right') cubeTransform = cubeTransform + ' rotateY(-90deg)';
	if (this.state.face == 'back') cubeTransform = cubeTransform + ' rotateY(-180deg)';
	if (this.state.face == 'left') cubeTransform = cubeTransform + ' rotateY(90deg)';
	if (this.state.face == 'top') cubeTransform = cubeTransform + ' rotateX(-90deg)';
	if (this.state.face == 'bottom') cubeTransform = cubeTransform + ' rotateX(90deg)';
	let trFront = 'rotateY(  0deg) translateZ(' + half + 'px)';
	let trRight = 'rotateY( 90deg) translateZ(' + half + 'px)';
	let trBack = 'rotateY(180deg) translateZ(' + half + 'px)';
	let trLeft = 'rotateY(-90deg) translateZ(' + half + 'px)';
	let trTop = 'rotateX( 90deg) translateZ(' + half + 'px)';
	let trBottom = 'rotateX(-90deg) translateZ(' + half + 'px)';
	return (
		  <div className='cube' style={{ width: this.state.size + 'px', height: this.state.size + 'px', transform: cubeTransform }}>
			<div className='cube__face' style={{transform: trFront}}><div className='positional' id='side0'></div>
				<CubeButton sidePosition='top' onClick={this.onTop.bind(this)} cap='&#10148;' cap2='Десктоп 3D' />
				<CubeButton sidePosition='left' onClick={this.onLeft.bind(this)} cap='&#10148;' cap2='Веб 3D' />
				<CubeButton sidePosition='right' onClick={this.onRight.bind(this)} cap='&#10148;' cap2='Веб 2D' />
				<CubeButton sidePosition='btm' onClick={this.onBottom.bind(this)} cap2='&#10148;' cap='Десктоп 2D' />
				<CubeButton sidePosition='corner' onClick={this.onBack.bind(this)} cap='&#8617;' cap2='Контакты' />
			</div>
			<div className='cube__face' style={{transform: trBack}}><div className='positional' id='side1'></div>
				<CubeButton sidePosition='top' onClick={this.onTop.bind(this)} cap='&#10148;' cap2='Десктоп 3D' />
				<CubeButton sidePosition='left' onClick={this.onRight.bind(this)} cap='&#10148;' cap2='Веб 2D' />
				<CubeButton sidePosition='right' onClick={this.onLeft.bind(this)} cap='&#10148;' cap2='Веб 3D' />
				<CubeButton sidePosition='btm' onClick={this.onBottom.bind(this)} cap2='&#10148;' cap='Десктоп 2D' />
				<CubeButton sidePosition='corner' onClick={this.onFront.bind(this)} cap='&#8617;' cap2='Старт' />
			</div>
			<div className='cube__face' style={{transform: trRight}}><div className='positional' id='side2'></div>
				<CubeButton sidePosition='top' onClick={this.onTop.bind(this)} cap='&#10148;' cap2='Десктоп 3D' />
				<CubeButton sidePosition='left' onClick={this.onFront.bind(this)} cap='&#10148;' cap2='Старт' />
				<CubeButton sidePosition='right' onClick={this.onBack.bind(this)} cap='&#10148;' cap2='Контакты' />
				<CubeButton sidePosition='btm' onClick={this.onBottom.bind(this)} cap2='&#10148;' cap='Десктоп 2D' />
				<CubeButton sidePosition='corner' onClick={this.onLeft.bind(this)} cap='&#8617;' cap2='Веб 3D' />
			</div>
			<div className='cube__face' style={{transform: trLeft}}><div className='positional' id='side3'></div>
				<CubeButton sidePosition='top' onClick={this.onTop.bind(this)} cap='&#10148;' cap2='Десктоп 3D' />
				<CubeButton sidePosition='left' onClick={this.onBack.bind(this)} cap='&#10148;' cap2='Контакты' />
				<CubeButton sidePosition='right' onClick={this.onFront.bind(this)} cap='&#10148;' cap2='Старт' />
				<CubeButton sidePosition='btm' onClick={this.onBottom.bind(this)} cap2='&#10148;' cap='Десктоп 2D' />
				<CubeButton sidePosition='corner' onClick={this.onRight.bind(this)} cap='&#8617;' cap2='Веб 2D' />
			</div>
			<div className='cube__face' style={{transform: trTop}}><div className='positional' id='side4'></div>
				<CubeButton sidePosition='top' onClick={this.onBack.bind(this)} cap='&#10148;' cap2='Контакты' />
				<CubeButton sidePosition='left' onClick={this.onLeft.bind(this)} cap='&#10148;' cap2='Веб 3D' />
				<CubeButton sidePosition='right' onClick={this.onRight.bind(this)} cap='&#10148;' cap2='Веб 2D' />
				<CubeButton sidePosition='btm' onClick={this.onFront.bind(this)} cap2='&#10148;' cap='Старт' />
				<CubeButton sidePosition='corner' onClick={this.onBottom.bind(this)} cap='&#8617;' cap2='Десктоп 2D' />
			</div>
			<div className='cube__face' style={{transform: trBottom}}><div className='positional' id='side5'></div>
				<CubeButton sidePosition='top' onClick={this.onFront.bind(this)} cap='&#10148;' cap2='Старт' />
				<CubeButton sidePosition='left' onClick={this.onLeft.bind(this)} cap='&#10148;' cap2='Веб 3D' />
				<CubeButton sidePosition='right' onClick={this.onRight.bind(this)} cap='&#10148;' cap2='Веб 2D' />
				<CubeButton sidePosition='btm' onClick={this.onBack.bind(this)} cap2='&#10148;' cap='Десктоп 2D' />
				<CubeButton sidePosition='corner' onClick={this.onTop.bind(this)} cap='&#8617;' cap2='Десктоп 3D' />
			</div>
		  </div>
	);
  }
}
class Scene extends React.Component {
  constructor(props) {
    super(props);
	let s = '';
	for (let i = 0; i < 10; i++) {
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ' + Math.round(Math.random());
		s = s + ' ';
	}
    this.state = { content: s };
  }
  render() {
	let scrWidth = window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;
	let scrHeight = window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
	let _size = Math.min(scrWidth, scrHeight);
	let _SIZE = Math.max(scrWidth, scrHeight);
	let _aspect = _SIZE / _size;
	let _perspective = _size * _aspect * 1.2;
	let _content = '';
	for (let i = 0; i < 150; i++) {
		_content = _content + '\n' + this.state.content;
	}
	const cusize = _size * 0.92;
	reactRenrerComplete = true;
	return (
		<div className='scene' style={{perspective: _perspective}}>
			<Cube size={cusize} w={scrWidth} h={scrHeight} />
			<div className="login_view" id="view"></div>
		</div>
	);
  }
}

	const placeWeWantToPutComponent = document.getElementById('hook');
	ReactDOM.render(<Scene />, placeWeWantToPutComponent);
	window.addEventListener('resize', function(event){
		clearChilds(placeWeWantToPutComponent);
		ReactDOM.render(<Scene />, placeWeWantToPutComponent);
		if (!contentUpdateTimer) contentUpdateTimer = setTimeout(contentFill, 250);
	});