div#table
	h2 GRAVITY
	h3 MOVE MOUSE
		div#inner-top-wall
		div#inner-left-wall
		div#inner-bottom-wall
		div#inner-right-wall
		div#outer-top-wall
		div#outer-left-wall
		div#outer-bottom-wall
		div#outer-right-wall
		div#top-top-wall
		div#top-left-wall
		div#top-bottom-wall
		div#top-right-wall
		div#box
			div.front
			div.back
			div.right
			div.left
			div.top

@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);
body{
	background-color: #47c9af;
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-family: 'Alfa Slab One', arial;
	perspective: 1400px;
}

#table{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 600px;
	background-color: #eb974e;
	margin: 10px 0 0 -400px;
	transform-style: preserve-3d;
	transition: all 300ms;
}
#table h2{
  line-height: 300px;
  color: #fff;
  font-size: 80px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table h3{
  line-height: 100px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table.up{
	transform-origin: bottom right;
	transform: rotateX(10deg);
}
#table.down{
	transform-origin: bottom right;
	transform: rotateX(-10deg);
}
#table.left{
	transform-origin: bottom right;
	transform: rotateY(-10deg);
}
#table.right{
	transform-origin: bottom right;
	transform: rotateY(10deg);
}
#table.down-right{
	transform-origin: bottom right;
	transform: rotateY(10deg) rotateX(-10deg);
}
#table.down-left{
	transform-origin: bottom right;
	transform: rotateY(-10deg) rotateX(-10deg);
}
#table.up-left{
	transform-origin: bottom right;
	transform: rotateY(-10deg) rotateX(10deg);
}
#table.up-right{
	transform-origin: bottom right;
	transform: rotateY(10deg) rotateX(10deg);
}
#inner-top-wall{
	position: absolute;
	top: 80px;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #d35400;
	transform-origin: top center;
	transform: rotateX(90deg);
}
#inner-left-wall{
	position: absolute;
	top: 80px;
	left: 80px;
	width: 80px;
	height: 440px;
	background-color: #d35400;
	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#inner-bottom-wall{
	position: absolute;
	top: 520px;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #d35400;
	transform-origin: top center;
	transform: rotateX(90deg);
}
#inner-right-wall{
	position: absolute;
	top: 80px;
	left: 720px;
	width: 80px;
	height: 440px;
	background-color: #d35400;
	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#outer-top-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #eb974e;
	transform-origin: top center;
	transform: rotateX(90deg);
}
#outer-left-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 600px;
	background-color: #eb974e;
	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#outer-bottom-wall{
	position: absolute;
	top: 600px;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #eb974e;
	transform-origin: top center;
	transform: rotateX(90deg);
}
#outer-right-wall{
	position: absolute;
	top: 0;
	left: 800px;
	width: 80px;
	height: 600px;
	background-color: #eb974e;
	transform-origin: bottom left;
	transform: rotateY(-90deg);
}



#top-top-wall{
	position: absolute;
	top: 0;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #f39c12;
	transform: translate3d(0, 0, 80px);

}
#top-left-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 600px;
	background-color: #f39c12;
	transform: translate3d(0, 0, 80px);
}
#top-bottom-wall{
	position: absolute;
	top: 520px;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #f39c12;
	transform: translate3d(0, 0, 80px);
}
#top-right-wall{
	position: absolute;
	top: 0;
	left: 720px;
	width: 80px;
	height: 600px;
	background-color: #f39c12;
	transform:translate3d(0, 0, 80px);
}
#box{
	position: absolute;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	top: 300px;
	left: 300px;
}
#box .left{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #cc0;
	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#box .right{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #16a085;
	transform-origin: bottom right;
	transform: rotateY(90deg);
}
#box .back{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #2ecc71;
	transform-origin: top right;
	transform: rotateX(90deg);
}
#box .front{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #47c9af;
	transform-origin: bottom right;
	transform: rotateX(-90deg);
}
#box .top{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #27ae60;
	transform: translateZ(100px);
}

var $box = document.getElementById("box");
var $table = document.getElementById("table");

var speed = 1;
var direction = 190;
var move = true;

var left = {x: 0, y: 0, width: 80, height: 600}
var right = {x: 720, y: 0, width: 80, height: 600}
var up = {x: 0, y: 0, width: 640, height: 80}
var bottom = {x: 6, y: 520, width: 640, height: 80}
var box = {x: 100, y: 100, width: 100, height: 100}

function collision(){
	if (box.x < left.x + left.width &&
	   box.x + box.width > left.x &&
	   box.y < left.y + left.height &&
	   box.height + box.y > left.y) {
		speed = 0;
		box.x += 1;
	    $box.style.left = box.x;
	}
	else if (box.x < right.x + right.width &&
	   box.x + box.width > right.x &&
	   box.y < right.y + right.height &&
	   box.height + box.y > right.y) {
		speed = 0;
		box.x -= 1;
	    $box.style.left = box.x;
	}
	else if (box.x < up.x + up.width &&
	   box.x + box.width > up.x &&
	   box.y < up.y + up.height &&
	   box.height + box.y > up.y) {
		speed = 0;
		box.y += 1;
	    $box.style.top = box.y;
	}
	else if (box.x < bottom.x + bottom.width &&
	   box.x + box.width > bottom.x &&
	   box.y < bottom.y + bottom.height &&
	   box.height + box.y > bottom.y) {
		speed = 0;
		box.y -= 1;
	    $box.style.top = box.y;
	}	
}

function moveBox() {
	setTimeout(function () {   

		if(direction > 0 && direction < 90){
			$table.setAttribute("class", "up-left");
		}
		if(direction > 90 && direction < 180){
			$table.setAttribute("class", "up-right");
		}
		if(direction > 180 && direction < 270){
			$table.setAttribute("class", "down-right");
		}
		if(direction > 270 && direction < 360){
			$table.setAttribute("class", "down-left");
		}

		box.y -= speed * Math.sin(direction * (Math.PI/180));
		box.x -= speed * Math.cos(direction * (Math.PI/180));

	    $box.style.top = Math.round(box.y) + "px";
	    $box.style.left = Math.round(box.x) + "px";

	    speed += 0.3;

	    collision();
	    if (move) {          
	    	moveBox();            
	    }
	}, 20)
}



function findAngle(a,b,c) {
    var ab = Math.sqrt(Math.pow(b.x-a.x,2)+ Math.pow(b.y-a.y,2));    
    var bc = Math.sqrt(Math.pow(b.x-c.x,2)+ Math.pow(b.y-c.y,2)); 
    var ac = Math.sqrt(Math.pow(c.x-a.x,2)+ Math.pow(c.y-a.y,2));
    var degrees = (Math.acos((bc*bc+ab*ab-ac*ac)/(2*bc*ab))) * (180/Math.PI);
    return degrees;
}

document.onmousemove = function(e){
	var a = {x: e.pageX, y: e.pageY}
	var b = {x: window.innerWidth/2, y: window.innerHeight/2}
	var c = {x: 0, y: window.innerHeight/2}
	speed = 1;
	angle = findAngle(a,b,c);
	if(e.pageY < window.innerHeight/2){
		direction = Math.round(angle);
	}else{
		direction = Math.round(360-angle);
	}
};

moveBox();